aswi20220x00-gitlab/webapp/components/annotation/AnnotationOccurrenceItem.tsx @ a4b7eec8

import { Col, Container, Row } from 'react-bootstrap';
import { Tag } from '../types/tag';
import { ChangeEvent, useContext } from 'react';
import 'antd/dist/antd.css';
import { Button, Input, Select } from 'antd';
import {
    DeleteOutlined,
    DislikeOutlined,
    EyeOutlined,
    LikeOutlined,
} from '@ant-design/icons';
import { AnnotationContext } from '../../contexts/AnnotationContext';
import { ETagSentiment, TagInstanceInfo } from '../../api';
import { getNameTruncated, getTextMaxLength } from '../../utils/strings';
import {
    COLOR_ALL_OCCURRENCES_ACCEPTED,
    COLOR_HIGHLIGHTED_OCCURRENCE,
    COLOR_HIGHLIGHTED_TAG,
    COLOR_OCCURRENCE_ACCEPTED,
} from '../../constants';
import { ShowConfirm } from '../../utils/alerts';

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 AnnotationOccurrenceItem(props: {
    tag: Tag;
    occurrence: TagInstanceInfo;
}) {
    /**
     * Context that manages annotations.
     */
    const {
        deleteOccurrence,
        changeNote,
        changeSentiment,
        selectedOccurrenceId,
        setSelectedOccurrenceId,
        setSelectedInstanceId,
        isFinal,
        makeOccurrenceFinal,
    } = useContext(AnnotationContext);

    const onChangeSentiment = (occurrence: TagInstanceInfo) => (val: ETagSentiment) => {
        changeSentiment(occurrence, val);
    };

    /**
     * Removes an occurrence of this annotation from the context.
     * @param occurrence The occurrence that should be removed.
     */
    const onDeleteOccurrence = (occurrence: TagInstanceInfo) => (e: any) => {
        deleteOccurrence(occurrence);
    };

    const onChangeNote =
        (occurrence: TagInstanceInfo) => (e: ChangeEvent<HTMLTextAreaElement>) => {
            changeNote(occurrence, e.currentTarget.value);
        };

    function getBackgroundColor(): string {
        if (selectedOccurrenceId === props.occurrence.occurenceId) {
            // highlighted occurrence
            return COLOR_HIGHLIGHTED_OCCURRENCE;
        }

        if (isFinal) {
            if (props.occurrence.isFinal) {
                return COLOR_OCCURRENCE_ACCEPTED;
            }
        }

        return 'white';
    }

    return (
        <Container
            className="shadow-sm"
            style={{
                backgroundColor: getBackgroundColor(),
            }}
        >
            <Row className="mb-1 mt-1">
                <Col>
                    <Row>
                        <Col>Pozice: {props.occurrence.position}</Col>
                        <Col>Délka: {props.occurrence.length}</Col>
                    </Row>
                    <Row>
                        <i title={props.occurrence.selectedText ?? ''}>
                            {getTextMaxLength(props.occurrence.selectedText ?? '', 35)}
                        </i>
                    </Row>
                    <Row>
                        <Col className="d-flex align-items-center" sm="4">
                            Poznámka:
                        </Col>
                        <Col>
                            <Input.TextArea
                                defaultValue={props.occurrence.note ?? ''}
                                onBlur={onChangeNote(props.occurrence)}
                                rows={1}
                            />
                        </Col>
                    </Row>
                    {props.occurrence.sentiment && (
                        <Row>
                            <Col className="d-flex align-items-center" sm="4">
                                Sentiment:
                            </Col>
                            <Col>
                                <Select
                                    defaultValue={props.occurrence.sentiment}
                                    style={{ width: '100%' }}
                                    onChange={onChangeSentiment(props.occurrence)}
                                >
                                    <Option value={ETagSentiment.Positive}>
                                        <span style={{ color: 'green' }}>Pozitivní</span>
                                    </Option>
                                    <Option value={ETagSentiment.Neutral}>
                                        Neutrální
                                    </Option>
                                    <Option value={ETagSentiment.Negative}>
                                        <span
                                            style={{
                                                color: '#ff4d4f',
                                            }}
                                        >
                                            Negativní
                                        </span>
                                    </Option>
                                </Select>
                            </Col>
                        </Row>
                    )}
                </Col>
                <Col
                    sm="auto"
                    className="d-flex align-items-center flex-column justify-content-sm-evenly"
                >
                    <Button
                        icon={<EyeOutlined />}
                        onClick={() => {
                            setSelectedOccurrenceId(props.occurrence.occurenceId ?? null);
                            setSelectedInstanceId(props.tag.instanceId);
                        }}
                        title={'Zvýraznit výskyt'}
                    />
                    <Button
                        icon={<DeleteOutlined />}
                        onClick={onDeleteOccurrence(props.occurrence)}
                        danger
                        className={'mt-1'}
                    />
                    {isFinal && (
                        <Button
                            icon={
                                props.occurrence.isFinal ? (
                                    <DislikeOutlined />
                                ) : (
                                    <LikeOutlined />
                                )
                            }
                            title={
                                props.occurrence.isFinal
                                    ? 'ZRUŠIT označení správného řešení'
                                    : 'Označit jako správné řešení'
                            }
                            onClick={() => {
                                ShowConfirm(
                                    () => {
                                        makeOccurrenceFinal(
                                            props.occurrence,
                                            !props.occurrence.isFinal
                                        );
                                    },
                                    props.occurrence.isFinal
                                        ? 'ZRUŠIT označené správného řešení'
                                        : 'označit toto řešení jako správné'
                                );
                            }}
                            className={'mt-1'}
                        />
                    )}
                </Col>
            </Row>
            {isFinal && (
                <Row className="mb-1 mt-1">
                    <Col>
                        Označili:{' '}
                        {props.occurrence.users?.map((u) => (
                            <span
                                title={u.name + ' ' + u.surname + ' (' + u.username + ')'}
                                key={props.occurrence.occurenceId + '.' + u.id}
                                style={{ marginRight: 10 }}
                            >
                                {getNameTruncated(u)}
                            </span>
                        ))}
                    </Col>
                </Row>
            )}
        </Container>
    );
}