aswi20220x00-gitlab/webapp/components/annotation/AnnotationItem.tsx @ fa93df26

import { Col, Container, Row, Stack } from 'react-bootstrap';
import { Tag } from '../types/tag';
import { useContext, useState } from 'react';
import 'antd/dist/antd.css';
import { Button, Select } from 'antd';
import { DownOutlined, PlusOutlined, TagOutlined } from '@ant-design/icons';
import { AnnotationContext } from '../../contexts/AnnotationContext';
import { AnnotationOccurrenceItem } from './AnnotationOccurrenceItem';
import { COLOR_ALL_OCCURRENCES_ACCEPTED, COLOR_HIGHLIGHTED_TAG } from '../../constants';
import { ABadge, BadgeStyle } from '../common/ABadge';
import { getNameTruncated } from '../../utils/strings';
import { ShowConfirm } from '../../utils/alerts';

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faAngleDown, faAngleUp, faTag } from '@fortawesome/free-solid-svg-icons';
import { faCircleQuestion } from '@fortawesome/free-regular-svg-icons';
import styles from '/styles/Icon.module.scss';

const { Option } = Select;

/**
 * Creates a single item in an annotation panel.
 * @param props Properties should contain a tag that will be shown in this annotation.
 * @returns The item that represents an annotation.
 */
export function AnnotationItem(props: { tag: Tag }) {
    /**
     * Should properties of this annotation be visible?
     */
    const [detailsVisible, setDetailsVisible] = useState(false);

    /**
     * Context that manages annotations.
     */
    const {
        addOccurrence,
        selectedInstanceId,
        setSelectedOccurrenceId,
        setSelectedInstanceId,
        isFinal,
        makeOccurrenceFinal,
    } = useContext(AnnotationContext);

    /**
     * Adds new occurrence of this annotation to the context.
     */
    const onAddOccurrence = () => {
        addOccurrence(props.tag);
    };

    /**
     * Changes visibility of properties of this annotation.
     */
    const changePropertiesVisibility = () => {
        setDetailsVisible(!detailsVisible);
    };

    function isAllAccepted() {
        return props.tag.occurrences.filter((o) => !o.isFinal).length === 0;
    }
    function getBackgroundColor(): string {
        if (selectedInstanceId === props.tag.instanceId) {
            // highlighted tag
            return COLOR_HIGHLIGHTED_TAG;
        }

        if (isFinal) {
            if (isAllAccepted()) {
                return COLOR_ALL_OCCURRENCES_ACCEPTED;
            } else {
                return '#E4C8CC';
            }
        }

        return 'white';
    }
    return (
        <Container
            className="border rounded"
            style={{
                backgroundColor: getBackgroundColor(),
            }}
        >
            <Row className="">
                <Col sm="auto" className="d-flex align-items-center">
                    <Button
                        icon={
                            <FontAwesomeIcon icon={faTag} className={styles.iconLeft} />
                        }
                        onClick={() => {
                            setSelectedInstanceId(props.tag.instanceId);
                            setSelectedOccurrenceId(null);
                        }}
                        style={{
                            border: 'none',
                            paddingLeft: 0,
                            backgroundColor: getBackgroundColor(),
                        }}
                        title={'Zvýraznit značky'}
                    />
                </Col>
                <Col className="d-flex align-items-center">
                    {props.tag.tagName}
                    {props.tag.subtagName ? ' (' + props.tag.subtagName + ')' : ''}
                </Col>
                <Col sm="auto">
                    {props.tag.occurrences.length > 1 && (
                        <ABadge style={BadgeStyle.GENERAL}>
                            {props.tag.occurrences.length}
                        </ABadge>
                    )}

                    <Button
                        type="text"
                        shape="circle"
                        icon={<PlusOutlined />}
                        onClick={onAddOccurrence}
                    />
                    <Button
                        type="text"
                        shape="circle"
                        icon={<DownOutlined />}
                        onClick={changePropertiesVisibility}
                    />
                </Col>
            </Row>
            {isFinal && !isAllAccepted() && (
                <>
                    <Row
                        style={{
                            backgroundColor: getBackgroundColor(),
                        }}
                    >
                        <Col sm="12" className="d-flex align-items-center">
                            {props.tag.occurrences.length === 1 && (
                                <div
                                    style={{
                                        display: 'flex',
                                        flexDirection: 'row',
                                        width: '100%',
                                        justifyContent: 'space-between',
                                    }}
                                >
                                    <div style={{ width: '60%' }}>
                                        Anotovali:{' '}
                                        {props.tag.occurrences[0].users?.map((u) => (
                                            <span
                                                title={
                                                    u.name +
                                                    ' ' +
                                                    u.surname +
                                                    ' (' +
                                                    u.username +
                                                    ')'
                                                }
                                                key={
                                                    props.tag.occurrences[0].occurenceId +
                                                    '.' +
                                                    u.id
                                                }
                                                style={{ marginRight: 10 }}
                                            >
                                                {getNameTruncated(u)}
                                            </span>
                                        ))}
                                    </div>
                                    <div>
                                        <Button
                                            onClick={() => {
                                                ShowConfirm(() => {
                                                    makeOccurrenceFinal(
                                                        props.tag.occurrences[0]
                                                    );
                                                }, 'označit toto řešení jako správné');
                                            }}
                                        >
                                            Přijmout toto řešení
                                        </Button>
                                    </div>
                                </div>
                            )}
                        </Col>
                    </Row>
                </>
            )}

            {detailsVisible && (
                <Stack gap={1} className="mb-2">
                    <div>Kategorie: {props.tag.category}</div>
                    <div>Výskyty (části):</div>
                    {props.tag.occurrences.map((occurrence, index) => {
                        return (
                            <AnnotationOccurrenceItem
                                occurrence={occurrence}
                                tag={props.tag}
                                key={'occ-' + occurrence.occurenceId}
                            />
                        );
                    })}
                </Stack>
            )}
        </Container>
    );
}