@fortawesome/free-solid-svg-icons#faLink JavaScript Examples

MyTeamCard = ({ className, backgroundImg, title, description }) => {
  const currikiUtility = classNames(
    "curriki-utility-myproject-card",
    className
  );
  return (
    <div className={currikiUtility}>
      <div
        className="myproject-card-top"
        style={{ backgroundImage: `url(${backgroundImg})` }}
      >
        <div className="myproject-card-dropdown">
          <ActivityCardDropDown iconColor="white" />
        </div>
        <div className="myproject-card-title">
          <h2>{title}</h2>
        </div>
      </div>
      <div className="myproject-card-detail">
        <p>
          {description}
        </p>
      </div>
      <div className="my-project-icons">
        <FontAwesomeIcon icon={faEye} color="#084892" className="icon-edit" />
        <FontAwesomeIcon icon={faEdit} color="#084892" className="icon-edit" />
        <FontAwesomeIcon icon={faLink} color="#084892" className="icon-edit" />
      </div>
    </div>
  );
}

ICONS = {
  string: TextIcon,

  // Sub Types of String
  email: EmailIcon,
  text: RichTextIcon,
  date: DateIcon,
  time: TimeIcon,
  url: ({ fill }) => <FontAwesomeIcon icon={faLink} color={fill} />,
  media: MediaIcon,

  // Others
  boolean: BoolIcon,
  number: NumberIcon,
  object: JsonIcon,

  // temp Array
  array: ListIcon,

  // mixed formats
  mixed: ({ fill }) => <FontAwesomeIcon icon={faRandom} color={fill} />,
}

library.add(
    faArrowAltCircleUp,
    faCog,
    faEdit,
    faEye,
    faEyeSlash,
    faList,
    faPause,
    faPlay,
    faPlus,
    faSearch,
    faTachometerAlt,
    faTimes,
    faTimesCircle,
    faTrash,
    faCheckCircle,
    faStream,
    faSave,
    faExclamationCircle,
    faBullhorn,
    faArrowsAltV,
    faUnlink,
    faQuestionCircle,
    faImages,
    faUpload,
    faCopy,
    faCheck,
    faFile,
    faAward,
    faLink,
    faChevronDown,
    faSignOutAlt,
    faPen,
    faExternalLinkSquareAlt,
    faSpinner,
    faUndo,
    faPlusCircle,
    faAngleDown,
    faLink,
);

DeckList = ({ onDeckSelected, standaloneDecks = 0 }) => {
    const { t } = useTranslation();
    const [pagingDetails, setPagingDetails] = useState({
        pageSize: 10,
        page: 1,
        sort: 'lastUpdated',
        sortDir: 'desc',
        filter: []
    });
    const nameFilter = useRef(null);
    const dispatch = useDispatch();

    const getDecks = (state) => {
        switch (standaloneDecks) {
            case 1:
                return state.cards.standaloneDecks;
            case 2:
                return state.cards.adventuringPartyDecks;
            case 3:
                return state.cards.buildingBasicsDecks;
            default:
                return state.cards.decks;
        }
    };

    const { decks, numDecks, selectedDeck } = useSelector((state) => ({
        decks: getDecks(state),
        numDecks: state.cards.numDecks,
        selectedDeck: standaloneDecks ? null : state.cards.selectedDeck
    }));

    useEffect(() => {
        if (standaloneDecks == 1) {
            dispatch(loadStandaloneDecks());
        } else if (standaloneDecks == 2) {
            dispatch(loadAdventuringPartyDecks());
        } else if (standaloneDecks == 3) {
            dispatch(loadBuildingBasicsDecks());
        } else {
            dispatch(loadDecks(pagingDetails));
        }

        $('.filter-label').parent().parent().hide();
    }, [pagingDetails, dispatch, standaloneDecks]);

    const selectRow = {
        mode: 'radio',
        clickToSelect: true,
        hideSelectColumn: true,
        selected: decks && selectedDeck ? [decks.find((d) => d._id === selectedDeck._id)?._id] : [],
        classes: 'selected-deck',
        onSelect: (deck, isSelect) => {
            if (isSelect) {
                dispatch(selectDeck(deck));
            }
        }
    };

    const rowEvents = {
        onClick: (event, deck) => {
            onDeckSelected && onDeckSelected(deck);
        }
    };

    // eslint-disable-next-line no-unused-vars
    const rowClasses = (row) => {
        if (!row.status.basicRules) {
            return 'invalid';
        }

        if (!row.status.hasConjurations) {
            return 'conjurations';
        }

        return '';
    };

    /**
     * @param {any} type
     * @param {PagingDetails} data
     */
    const onTableChange = (type, data) => {
        let newPageData = Object.assign({}, pagingDetails);
        switch (type) {
            case 'pagination':
                if (
                    (pagingDetails.page !== data.page && data.page !== 0) ||
                    (pagingDetails.pageSize !== data.sizePerPage && data.sizePerPage !== 0)
                ) {
                    newPageData.page = data.page || pagingDetails.page;
                    newPageData.pageSize = data.sizePerPage;
                }

                break;
            case 'sort':
                newPageData.sort = data.sortField;
                newPageData.sortDir = data.sortOrder;

                break;
            case 'filter':
                newPageData.filter = Object.keys(data.filters).map((k) => ({
                    name: k,
                    value: data.filters[k].filterVal
                }));

                break;
        }

        setPagingDetails(newPageData);
    };

    const columns = [
        {
            dataField: 'none',
            headerStyle: {
                width: '12%'
            },
            text: t('Id'),
            sort: false,
            // eslint-disable-next-line react/display-name
            formatter: (_, row) => (
                <div className='deck-image'>
                    <Phoenixborn pbStub={row.phoenixborn[0]?.card.imageStub} />
                </div>
            )
        },
        {
            dataField: 'name',
            text: t('Name'),
            sort: !standaloneDecks,
            style: {
                fontSize: '0.8rem'
            },
            filter: textFilter({
                getFilter: (filter) => {
                    nameFilter.current = filter;
                }
            }),
            formatter: (item, row) => {
                const hasChained = row.cards.some((c) => c.card.isChained);
                const icon = hasChained ? (
                    <FontAwesomeIcon icon={faLink} title='This deck contains chained cards' />
                ) : null;
                const output = (
                    <>
                        <span>{item}</span>&nbsp;
                        {icon}
                    </>
                );
                return output;
            }
        },
        {
            dataField: 'lastUpdated',
            headerStyle: {
                width: '20%'
            },
            style: {
                fontSize: '0.7rem'
            },
            align: 'center',
            text: t('Added'),
            sort: !standaloneDecks,
            /**
             * @param {Date} cell
             */
            formatter: (cell) => moment(cell).format('YYYY-MM-DD')
        },
        {
            dataField: 'winRate',
            align: 'center',
            text: t('Win %'),
            headerStyle: {
                width: '18%'
            },
            style: {
                fontSize: '0.8rem'
            },
            sort: !standaloneDecks,
            hidden: standaloneDecks,
            /**
             * @param {number} cell
             */
            formatter: (cell) => `${cell}%`
        }
    ];

    let onNameChange = debounce((event) => {
        nameFilter.current(event.target.value);
    }, 500);

    return (
        <div className='deck-list'>
            {!standaloneDecks && (
                <Col md={12}>
                    <Form>
                        <Form.Row>
                            <Form.Group as={Col} controlId='formGridName'>
                                <Form.Control
                                    name='name'
                                    type='text'
                                    onChange={(event) => {
                                        event.persist();
                                        onNameChange(event);
                                    }}
                                    placeholder={t('Filter by name')}
                                />
                            </Form.Group>
                        </Form.Row>
                    </Form>
                </Col>
            )}
            <Col md={12}>
                <BootstrapTable
                    bootstrap4
                    remote
                    hover
                    keyField='_id'
                    data={decks}
                    columns={columns}
                    selectRow={selectRow}
                    rowEvents={rowEvents}
                    rowClasses={rowClasses}
                    pagination={
                        standaloneDecks
                            ? null
                            : paginationFactory({
                                page: pagingDetails.page,
                                sizePerPage: pagingDetails.pageSize,
                                totalSize: numDecks
                            })
                    }
                    filter={filterFactory()}
                    filterPosition='top'
                    onTableChange={onTableChange}
                    defaultSorted={[{ dataField: 'datePublished', order: 'desc' }]}
                />
            </Col>
        </div>
    );
}

DeckSummary = ({ deck }) => {
    let [zoomCard, setZoomCard] = useState(null);
    let [mousePos, setMousePosition] = useState({ x: 0, y: 0 });

    if (!deck) return null;

    const getCardsToRender = () => {
        let cardsToRender = [];
        let groupedCards = {};

        let combinedCards = deck.cards.concat(deck.conjurations);

        combinedCards.forEach((card) => {
            let type = card.card.type;

            if (type === 'character' || type === 'event') {
                type = card.card.side + ` ${type}`;
            }
            if (!groupedCards[type]) {
                groupedCards[type] = [card];
            } else {
                groupedCards[type].push(card);
            }
        });

        for (let key in groupedCards) {
            let cardList = groupedCards[key];
            let cards = [];
            let count = 0;

            cardList.forEach((card) => {
                let chainedIcon = null;
                if (card.card.isChained) {
                    chainedIcon = <FontAwesomeIcon icon={faLink} title='This card is on the chained list' />
                }
                cards.push(
                    <div key={card.card.id}>
                        <span>{card.count + 'x '}</span>
                        <span
                            className='card-link'
                            onMouseOver={() => setZoomCard(card)}
                            onMouseMove={(event) => {
                                let y = event.clientY;
                                let yPlusHeight = y + 420;

                                if (yPlusHeight >= window.innerHeight) {
                                    y -= yPlusHeight - window.innerHeight;
                                }

                                setMousePosition({ x: event.clientX, y: y });
                            }}
                            onMouseOut={() => setZoomCard(null)}
                        >
                            {card.card.name}
                        </span>
                        &nbsp;
                        {chainedIcon}
                    </div>
                );
                count += parseInt(card.count);
            });

            cardsToRender.push(
                <div className='cards-no-break'>
                    <div className='card-group-title'>{key + ' (' + count.toString() + ')'}</div>
                    <div key={key} className='deck-card-group'>
                        {cards}
                    </div>
                </div>
            );
        }

        return cardsToRender;
    };

    const getDiceToRender = () => {
        const diceToRender = [];
        if (deck.dicepool) {
            deck.dicepool.forEach((diceCount) => {
                for (let i = 0; i < diceCount.count; i++) {
                    diceToRender.push(<DieIcon die={{ magic: diceCount.magic, level: 'power' }} />);
                }
            });
        }
        return (
            <div>
                {/* <div className='card-group-title'>Dice</div> */}
                <div className='flex'> {diceToRender}</div>
            </div>
        );
    };

    var cardsToRender = getCardsToRender();
    var diceToRender = getDiceToRender();
    var phoenixbornStub = deck.phoenixborn.length > 0 ? deck.phoenixborn[0].card.imageStub : '';

    return (
        <Col xs='12' className='deck-summary'>
            <Row>
                <Col xs='2' sm='3'>
                    <Phoenixborn pbStub={phoenixbornStub} />
                </Col>
                <Col xs='10' sm='9'>
                    <table style={{ width: '100%' }}>
                        <tr>
                            <th>Win</th>
                            <th>Loss</th>
                            <th>Total</th>
                            <th>Win Rate</th>
                        </tr>
                        <tr>
                            <td>{deck.wins}</td>
                            <td>{deck.played - deck.wins}</td>
                            <td>{parseInt(deck.played)}</td>
                            <td>{deck.winRate?.toFixed(0)}%</td>
                        </tr>
                    </table>

                    <Row>
                        <Col xs='8'>
                            <DeckStatusSummary status={deck.status} />

                        </Col>
                        <Col xs='4'>
                            <DeckStatus status={deck.status} />
                        </Col>
                    </Row>
                </Col>
            </Row>
            <Row>
                <div className='large'>{diceToRender}</div>
            </Row>
            <Row className='deck-cards'>
                {zoomCard && (
                    <div
                        className='decklist-card-zoom'
                        style={{ left: mousePos.x + 5 + 'px', top: mousePos.y + 'px' }}
                    >
                        <CardImage
                            card={Object.assign({}, zoomCard, zoomCard.card, zoomCard.cardData)}
                        />
                    </div>
                )}
                <div className='cards'>{cardsToRender}</div>
            </Row>
            <Row>
                <div className='deck-card-group deck-notes'>
                    {deck.notes}
                </div>
            </Row>

        </Col>
    );
}

Card = ({
    canDrag,
    card,
    cardBackUrl,
    className,
    disableMouseOver,
    onClick,
    onAltClick,
    onDieClick,
    onMenuItemClick,
    onMouseOut,
    onMouseOver,
    orientation = 'vertical',
    showAltIcon,
    side,
    size,
    source,
    style,
    wrapped = true
}) => {
    const cardBack = cardBackUrl || (card.isConjuration ? conjback : spellback);
    const sizeClass = {
        [size]: size !== 'normal'
    };
    const [showMenu, setShowMenu] = useState(false);

    const [{ dragOffset, isDragging }, drag, preview] = useDrag({
        item: { card: card, source: source, type: ItemTypes.CARD },
        canDrag: () => canDrag || (!card.unselectable && card.canPlay),
        collect: (monitor) => ({
            isDragging: monitor.isDragging(),
            dragOffset: monitor.getSourceClientOffset()
        })
    });

    const isAllowedMenuSource = () => {
        return source === 'play area' || source === 'spellboard';
    };

    const onCardClicked = (event, card) => {
        event.preventDefault();
        event.stopPropagation();
        if (isAllowedMenuSource() && card.menu && card.menu.length !== 0) {
            setShowMenu(!showMenu);
            return;
        }

        onClick && onClick(card);
    };

    const getCountersForCard = (card) => {
        let counters = [];
        let needsFade = UpgradeCardTypes.includes(card.type) && !['full deck'].includes(source);
        if (card.acquiredEffects?.length) {
            card.acquiredEffects.forEach((e) => {
                counters.push({
                    icon: e.effect,
                    name: e.source,
                    count: 1,
                    fade: needsFade,
                    showValue: false
                });
            });
        }
        if (card.armor > 0) {
            counters.push({
                name: 'armor',
                count: card.armor,
                fade: needsFade,
                showValue: true
            });
        }

        if (card.guarded || card.cannotBlock) {
            counters.push({
                name: 'guarded',
                count: 1,
                fade: needsFade,
                showValue: false
            });
        }

        for (const [key, token] of Object.entries(card.tokens || {})) {
            counters.push({
                name: key,
                count: token,
                fade: needsFade,
                showValue: true
            });
        }

        for (const upgrade of card.upgrades || []) {
            counters = counters.concat(getCountersForCard(upgrade));
        }

        return counters.filter((counter) => counter.count >= 0);
    };

    const getCardSizeMultiplier = () => {
        switch (size) {
            case 'small':
                return 0.6;
            case 'large':
                return 1.4;
            case 'x-large':
                return 2;
        }

        return 1;
    };

    const getupgrades = () => {
        if (!['full deck', 'play area', 'spellboard'].includes(source)) {
            return null;
        }

        if (['full deck', 'play area'].includes(source) && !card.upgrades) {
            return null;
        }
        if ('spellboard' === source && !card.childCards) {
            return null;
        }

        let index = 1;
        const cardsToRender = 'spellboard' === source
            ? card.childCards
            : card.upgrades;
        let upgrades = cardsToRender.map((upgrade) => {
            let returnedupgrade = (
                <Card
                    key={upgrade.uuid}
                    source={source}
                    card={upgrade}
                    className={classNames('upgrade', `upgrade-${index}`)}
                    wrapped={false}
                    onMouseOver={
                        !disableMouseOver && onMouseOver
                            ? (upgrade) => onMouseOver(upgrade)
                            : undefined
                    }
                    onMouseOut={!disableMouseOver && onMouseOut}
                    onClick={onClick}
                    onMenuItemClick={onMenuItemClick}
                    size={size}
                />
            );

            index += 1;
            return returnedupgrade;
        });

        return upgrades;
    };

    const renderUnderneathCards = () => {
        // TODO: Right now it is assumed that all cards in the childCards array
        // are being placed underneath the current card. In the future there may
        // be other types of cards in this array and it should be filtered.
        let underneathCards = card.childCards;
        if (!underneathCards || underneathCards.length === 0 || card.location === 'spellboard') {
            return;
        }

        let maxCards = 1 + (underneathCards.length - 1) / 6;
        return (
            <SquishableCardPanel
                cardSize={size}
                cards={underneathCards}
                className='underneath'
                maxCards={maxCards}
                onCardClick={onClick}
                onMouseOut={onMouseOut}
                onMouseOver={onMouseOver}
                source='underneath'
            />
        );
    };

    const getCardOrdering = () => {
        if (!card.order) {
            return null;
        }

        return <div className='card-ordering'>{card.order}</div>;
    };

    const shouldShowMenu = () => {
        if (!isAllowedMenuSource()) {
            return false;
        }

        if (!card.menu || !showMenu) {
            return false;
        }

        return true;
    };

    const showCounters = () => {
        if (['full deck'].includes(source)) {
            return true;
        }

        if (card.facedown || UpgradeCardTypes.includes(card.type)) {
            return false;
        }

        return true;
    };

    const isFacedown = () => {
        return card.facedown || !card.name;
    };

    const getDragFrame = (image) => {
        if (!isDragging) {
            return null;
        }

        let style = {};
        if (dragOffset && isDragging) {
            let x = dragOffset.x;
            let y = dragOffset.y;
            style = {
                left: x,
                top: y
            };
        }

        return (
            <div className='drag-preview' style={style} ref={preview}>
                {image}
            </div>
        );
    };

    const getBoostedFlags = (card) => {
        if (card.flags) {
            let flagItems = Object.keys(card.flags)
                .sort((a, b) => (a < b ? -1 : 1))
                .map((key, index) => {
                    return (
                        <div key={key + index} className={`darkbg flag ${key}`}>
                            <span className='sr-only'>{key[0]}</span>
                            {card.flags[key]}
                        </div>
                    );
                });

            return <div className='flags'>{flagItems}</div>;
        }

        return '';
    };

    const getChainIcon = (card) => {
        if (card.isChained) {
            return (
                <div className='card-chain-icon'>
                    <FontAwesomeIcon icon={faLink} />
                </div>
            );
        }
        return '';
    };

    const getAltIcon = (card) => {
        if (showAltIcon && card.altArts) {
            return (
                <div className='card-alt-icon'>
                    <button className=''
                        onClick={() => onAltClick(card)}
                    >Alt</button>
                </div>
            );
        }
        return '';
    };

    const getCard = () => {
        if (!card) {
            return <div />;
        }

        let statusClass = getStatusClass();
        const combatClass = card.isAttacker || card.isDefender ? 'combat-' + side : null;

        let cardClass = classNames(
            'game-card',
            `card-type-${card.type}`,
            className,
            sizeClass,
            statusClass,
            combatClass,
            {
                'custom-card': card.code && card.code.startsWith('custom'),
                horizontal: orientation !== 'vertical',
                vertical: orientation === 'vertical',
                'can-play':
                    statusClass !== 'selected' &&
                    statusClass !== 'selectable' &&
                    !card.unselectable &&
                    !card.isAttacker &&
                    !card.isDefender &&
                    card.canPlay,
                unselectable: !card.selected && card.unselectable,
                dragging: isDragging,
                controlled: card.controlled,
                attacker: card.isAttacker,
                defender: card.isDefender
            }
        );
        let imageClass = classNames('card-image vertical', sizeClass, {
            exhausted: orientation === 'exhausted' || orientation === 'horizontal'
        });
        let image = card ? (
            <div className={imageClass}>
                <CardImage card={card} cardBack={cardBack} />
                {getChainIcon(card)}
                {getBoostedFlags(card)}
            </div>
        ) : null;
        let dice =
            card.dieUpgrades && card.dieUpgrades.length > 0
                ? card.dieUpgrades.map((d) => (
                    <Die key={'dup-' + d.uuid} die={d} onClick={onDieClick} />
                ))
                : null;

        return (
            <div className='card-frame' ref={drag}>
                {getDragFrame(image)}
                {getCardOrdering()}
                <div
                    tabIndex={0}
                    className={cardClass}
                    onMouseOver={
                        !disableMouseOver && (!isFacedown() || !card.parent) && onMouseOver
                            ? () => onMouseOver(card)
                            : undefined
                    }
                    onMouseOut={!disableMouseOver && !isFacedown() ? onMouseOut : undefined}
                    onClick={(event) => onCardClicked(event, card)}
                >
                    <div>
                        <span className='card-name'>{card.name}</span>
                        {image}
                    </div>
                    {showCounters() && <CardCounters counters={getCountersForCard(card)} />}
                    <div className='die-upgrades'>{dice}</div>
                </div>
                {shouldShowMenu() && (
                    <CardMenu
                        menu={card.menu}
                        side={side}
                        onMenuItemClick={(menuItem) => {
                            onMenuItemClick && onMenuItemClick(card, menuItem);
                            setShowMenu(!showMenu);
                        }}
                    />
                )}
            </div>
        );
    };

    const getStatusClass = () => {
        if (!card) {
            return undefined;
        }

        // location prevents highlighting cards we're about to meditate
        if (card.selected && card.location !== 'deck') {
            return 'selected';
        } else if (card.selectable) {
            // if (card.isAttacker) return 'attacker-' + side + ' selectable ';
            return 'selectable';
            // } else if (card.isAttacker) {
            //     return 'attacker-' + side;
            // } else if (card.isDefender) {
            //     return 'defender-' + side;
        } else if (card.new) {
            return 'new';
        }

        return undefined;
    };

    let styleCopy = Object.assign({}, style);
    if (card.upgrades) {
        styleCopy.top = card.upgrades.length * (15 * getCardSizeMultiplier());
    }
    if (wrapped) {
        return (
            <div className={'card-wrapper'} style={style}>
                {getAltIcon(card)}

                {getCard()}
                {getupgrades()}
                {renderUnderneathCards()}
            </div>
        );
    }

    return getCard();
}

export function MetaConfig(props) {
  const dispatch = useDispatch();
  const history = useHistory();
  const classes = useStyles();

  const [cols, setCols] = useState();

  const { id } = useParams();
  const metaDict = useSelector((state) => state.metas.dict);
  const meta = metaDict[id];
  console.log(meta);

  useEffect(() => {
    dispatch(metaActions.getMeta(id)).then((response) => {
      if(response.error) {
        alertActions.handleError(dispatch, response.error);
        return;
      }
    })  
  }, [])

  useEffect(() => {
    if(meta && meta.columns && !cols) {
      let columns = [];

      for (const col of meta.columns) {
        const obj = {...col};
        obj.isNullable = obj.isNullable || false;
        obj.isUnique = obj.isUnique || false;
        obj.isHidden = obj.isHidden || false;

        columns.push(obj);
      }

      setCols(columns);
    }
  }, [meta])

  let dataTypeIcon;
  if (meta && meta.dataType) {
    switch (meta.dataType) {
      case "file":
        dataTypeIcon = <FontAwesomeIcon icon={faFile} />
        break;
      case "database":
        dataTypeIcon = <FontAwesomeIcon icon={faDatabase} />
        break;
      case "link":
        dataTypeIcon = <FontAwesomeIcon icon={faLink} />
        break;
    }
  }

  return (

    <div className={classes.root}>
      {meta && 
        <div>
          <Grid container>
            <Grid item xs={12}>
              <div className={classes.dataInfo}>
                {dataTypeIcon}
                <span className={classes.dataName}>
                  {meta.originalFileName}
                </span>
              </div>
            </Grid>
          </Grid>

          {cols &&
            <Grid container>
              <Grid item lg={4} md={6} xs={12}>
                <MetaSchema cols={cols} />
              
                l4 m6 x12
              </Grid>
              <Grid item lg={4} md={6} xs={12}>
                <MetaOptions />
                l4 m6 x12
              </Grid>
              <Grid item lg={4} md={12}>
                <MetaDocs />
                l4 m12
              </Grid>
            </Grid>
          }
        </div>
      }
    </div>
  )
}