aswi20220x00-gitlab/webapp/components/annotation/annotationItem.tsx @ 4e91ed40

import { Col, Container, Row, Stack } from 'react-bootstrap';
import { Occurrence, Tag } from '../models/tag';
import { ChangeEvent, ChangeEventHandler, useState } from 'react';

import 'antd/dist/antd.css';
import { Button, Input } from 'antd';
import {
    PlusOutlined,
    EyeOutlined,
    DownOutlined,
    DeleteOutlined,
} from '@ant-design/icons';

type AnnotationItemProps = {
    tag: Tag;
    onAddOccurrence: (tag: Tag) => void;
    onDeleteOccurrence: (occurrence: Occurrence) => void;
    onChangeVisibility: (tag: Tag) => void;
    onChangePosition: (occurrence: Occurrence, newValue: number) => void;
    onChangeLength: (occurrence: Occurrence, newValue: number) => void;
};

export function AnnotationItem(props: AnnotationItemProps) {
    const [visibleProperties, setVisibleProperties] = useState(false);

    const addOccurrence = () => {
        props.onAddOccurrence(props.tag);
    };

    const deleteOccurrence = (occurrence: Occurrence) => (e: any) => {
        props.onDeleteOccurrence(occurrence);
    };

    const changeVisibility = () => {
        props.onChangeVisibility(props.tag);
    };

    const changePropertiesVisibility = () => {
        setVisibleProperties(!visibleProperties);
    };

    const changePosition =
        (occurrence: Occurrence) => (e: ChangeEvent<HTMLInputElement>) => {
            props.onChangePosition(occurrence, Number(e.currentTarget.value));
        };

    const changeLength =
        (occurrence: Occurrence) => (e: ChangeEvent<HTMLInputElement>) => {
            props.onChangeLength(occurrence, Number(e.currentTarget.value));
        };

    return (
        <div>
            <Row>
                <Col className="d-flex align-items-center">{props.tag.name}</Col>
                <Col sm="auto">
                    <Button
                        type="text"
                        shape="circle"
                        icon={<PlusOutlined />}
                        onClick={addOccurrence}
                    />
                    <Button
                        type="text"
                        shape="circle"
                        icon={<EyeOutlined />}
                        onClick={changeVisibility}
                    />
                    <Button
                        type="text"
                        shape="circle"
                        icon={<DownOutlined />}
                        onClick={changePropertiesVisibility}
                    />
                </Col>
            </Row>
            {visibleProperties && (
                <Stack>
                    <div>Kategorie: {props.tag.category}</div>
                    <div>Výskyty:</div>
                    {props.tag.occurrences.map((occurrence, index) => {
                        return (
                            <div key={index} id={props.tag.name + index}>
                                <Container>
                                    <Row>
                                        <Col>
                                            <Row>
                                                Pozice:
                                                <Input
                                                    value={occurrence.position}
                                                    onChange={changePosition(occurrence)}
                                                />
                                            </Row>
                                            <Row>
                                                Délka:
                                                <Input
                                                    value={occurrence.length}
                                                    onChange={changeLength(occurrence)}
                                                />
                                            </Row>
                                        </Col>
                                        <Col
                                            sm="auto"
                                            className="d-flex align-items-center"
                                        >
                                            <Button
                                                icon={<DeleteOutlined />}
                                                onClick={deleteOccurrence(occurrence)}
                                            ></Button>
                                        </Col>
                                    </Row>
                                </Container>
                            </div>
                        );
                    })}
                </Stack>
            )}
        </div>
    );
}