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

/**
 * Creates an annotation view of a document.
 * @returns The annotation view.
 */
import { ChangeEvent, useContext } from 'react';
import { AnnotationContext } from '../../contexts/AnnotationContext';
import { Button, Input, Space } from 'antd';
import parse from 'html-react-parser';
import {
    COLOR_HIGHLIGHTED_TAG,
    DOCUMENT_INSTANCE_ID_ATTRIBUTE_NAME,
    DOCUMENT_OCCURRENCE_ID_ATTRIBUTE_NAME,
    DOCUMENT_TAG_ID_ATTRIBUTE_NAME,
} from '../../constants';

export function DocumentAnnotationView() {
    const {
        annotation,
        setSelectedInstanceId,
        setSelectedOccurrenceId,
        selectedInstanceId,
        selectedOccurrenceId,
        changeDocumentNote,
    } = useContext(AnnotationContext);

    if (!annotation) {
        return <p>Probíhá načítání anotace ...</p>;
    }

    const onChangeNote = (e: ChangeEvent<HTMLTextAreaElement>) => {
        changeDocumentNote(e.currentTarget.value);
    };

    function detectSelectedElement(e: any) {
        if (!(e.target instanceof HTMLElement)) {
            return;
        }

        const target = e.target as HTMLElement;

        const id = target.getAttribute(DOCUMENT_TAG_ID_ATTRIBUTE_NAME);
        const idInstance = target.getAttribute(DOCUMENT_INSTANCE_ID_ATTRIBUTE_NAME);
        const idOccurrence = target.getAttribute(DOCUMENT_OCCURRENCE_ID_ATTRIBUTE_NAME);

        if (!id || !idInstance || !idOccurrence) {
            setSelectedInstanceId(null);
            setSelectedOccurrenceId(null);
            return;
        }

        setSelectedInstanceId(idInstance);
        setSelectedOccurrenceId(idOccurrence);
    }

    function getCss() {
        let css = 'span.annotation {border-bottom: 2px solid;}\n';
        css += 'span {line-height: 30px}\n';
        css +=
            'span[end="1"] {border-end-end-radius: 0px; border-right: 1px solid darkgray}\n';
        css +=
            'span[start="1"] {border-end-start-radius: 0px; border-left: 1px solid darkgray}\n';

        for (const info of annotation?.cssInfo ?? []) {
            css += `span[${DOCUMENT_INSTANCE_ID_ATTRIBUTE_NAME}="${info.instanceId}"] { border-color:${info.color}; padding-bottom: ${info.padding}px }\n`;
        }

        if (selectedInstanceId) {
            css += `span[${DOCUMENT_INSTANCE_ID_ATTRIBUTE_NAME}="${selectedInstanceId}"] { background-color: ${COLOR_HIGHLIGHTED_TAG};  }\n`;
        }
        if (selectedOccurrenceId) {
            css += `span[${DOCUMENT_OCCURRENCE_ID_ATTRIBUTE_NAME}="${selectedOccurrenceId}"] { border-bottom: 4px dotted;  }\n`;
        }

        return <style dangerouslySetInnerHTML={{ __html: css }}></style>;
    }

    return (
        <div>
            <div className="mb-3">
                <h5>Poznámka</h5>
                <Input.TextArea
                    defaultValue={annotation.note ?? ''}
                    onBlur={onChangeNote}
                />
            </div>
            <hr />

            {getCss()}
            <div onClick={detectSelectedElement}>
                {parse(annotation.documentToRender ?? '')}
            </div>
        </div>
    );
}