tycho-components 0.21.19 → 0.22.1

package/dist/features/DocumentDrawer/Metadata/DocumentMetadata/DocumentMetadata.d.ts

@@ -0,0 +1,8 @@
+import { Document } from '../../deps';
+import './style.scss';
+type Props = {
+    document: Document;
+    onDocumentChange?: (document: Document) => void;
+};
+export default function DocumentMetadata({ document, onDocumentChange, }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/features/DocumentDrawer/Metadata/DocumentMetadata/DocumentMetadata.js

@@ -0,0 +1,60 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import metadataService from '../../services/MetadataService';
+import { useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { AppFormInfo, AppPlaceholder, } from '../../deps';
+import './style.scss';
+import { Button } from 'tycho-storybook';
+import DocumentMetadataEdit from '../DocumentMetadataEdit/DocumentMetadataEdit';
+import MetadataUtils from '../../functions/MetadataUtils';
+function getDocumentMetaValue(document, attr) {
+    const entry = document.metadata?.find((m) => {
+        const values = m;
+        return (values.uid === attr || values.symbol === attr || values[attr] != null);
+    });
+    if (!entry)
+        return undefined;
+    const values = entry;
+    return values.value || values[attr];
+}
+function hasDisplayValue(value) {
+    return value != null && String(value).trim() !== '';
+}
+export default function DocumentMetadata({ document, onDocumentChange, }) {
+    const { t } = useTranslation('document');
+    const { metaAttr, normalizeMetadataType, formatMetadataDateForDisplay } = MetadataUtils;
+    const [editOpen, setEditOpen] = useState(false);
+    const [metadata, setMetadata] = useState();
+    const filteredMetadata = useMemo(() => (metadata ?? []).filter((meta) => hasDisplayValue(getDocumentMetaValue(document, metaAttr(meta)))), [metadata, document]);
+    const fields = useMemo(() => filteredMetadata.map((meta) => {
+        const attr = metaAttr(meta);
+        const type = normalizeMetadataType(meta.type);
+        const base = {
+            attr,
+            name: meta.name,
+            type: type === 'DATE' ? 'datepicker' : meta.type?.toLowerCase() || 'text',
+        };
+        if (type === 'DATE') {
+            return {
+                ...base,
+                display: (raw) => formatMetadataDateForDisplay(raw == null ? '' : String(raw)),
+            };
+        }
+        return base;
+    }), [filteredMetadata]);
+    const data = useMemo(() => {
+        const row = {};
+        filteredMetadata.forEach((meta) => {
+            const attr = metaAttr(meta);
+            const raw = getDocumentMetaValue(document, attr);
+            row[attr] = raw;
+        });
+        return row;
+    }, [filteredMetadata, document]);
+    useEffect(() => {
+        metadataService.list(document).then((response) => {
+            setMetadata(response.data);
+        });
+    }, [document]);
+    return (_jsxs("div", { className: "metadata-container", children: [_jsxs("div", { className: "header", children: [_jsx("div", { className: "title", children: t('metadata.label.title') }), _jsx(Button, { size: "small", onClick: () => setEditOpen(true), text: t('document.button.edit'), icon: "edit", mode: "outlined" })] }), _jsxs("div", { className: "body", children: [filteredMetadata.length > 0 && (_jsx(AppFormInfo, { fields: fields, data: data })), metadata && filteredMetadata.length === 0 && (_jsx(AppPlaceholder, { text: t('placeholder.empty.metadata') }))] }), editOpen && metadata && (_jsx(DocumentMetadataEdit, { document: document, metadata: metadata, onClose: () => setEditOpen(false), onSave: (updated) => onDocumentChange?.(updated) }))] }));
+}

package/dist/features/DocumentDrawer/Metadata/DocumentMetadata/index.d.ts

@@ -0,0 +1,2 @@
+import DocumentMetadata from './DocumentMetadata';
+export default DocumentMetadata;

package/dist/features/DocumentDrawer/Metadata/DocumentMetadata/index.js

@@ -0,0 +1,2 @@
+import DocumentMetadata from './DocumentMetadata';
+export default DocumentMetadata;

package/dist/features/DocumentDrawer/Metadata/DocumentMetadata/style.scss

@@ -0,0 +1,7 @@
+.metadata-container {
+  .body {
+    height: 90vh;
+    overflow-y: auto;
+    padding: 16px;
+  }
+}

package/dist/features/DocumentDrawer/Metadata/DocumentMetadataEdit/DocumentMetadataEdit.d.ts

@@ -0,0 +1,11 @@
+import Metadata from '../../types/Metadata';
+import { Document } from '../../deps';
+import './style.scss';
+type Props = {
+    document: Document;
+    metadata: Metadata[];
+    onClose: () => void;
+    onSave: (document: Document) => void;
+};
+export default function DocumentMetadataEdit({ document, metadata, onClose, onSave, }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/features/DocumentDrawer/Metadata/DocumentMetadataEdit/DocumentMetadataEdit.js

@@ -0,0 +1,195 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import MetadataUtils from '../../functions/MetadataUtils';
+import documentService from '../../services/DocumentService';
+import metadataService from '../../services/MetadataService';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { AppForm, AppModal, useMessageUtils, } from '../../deps';
+import { Button, IconButton, SelectField } from 'tycho-storybook';
+import './style.scss';
+const PENDING_FIELD = 'val';
+const ADD_SELECT_FIELD = 'attr';
+export default function DocumentMetadataEdit({ document, metadata, onClose, onSave, }) {
+    const { t } = useTranslation('document');
+    const { dispatchMessage, dispatchError } = useMessageUtils();
+    const { metaAttr, normalizeMetadataType, toAppFormField, toAutocompleteFormValue, normalizeMetadataDateValue, resolveRawFromForm, serializeMetadataValue, compareMetadata, buildInitialEntries, } = MetadataUtils;
+    const initialAttrsRef = useRef(new Set((document.metadata || []).map((m) => {
+        const values = m;
+        return values.uid || values.symbol || values[m.attr];
+    })));
+    const modalContentRef = useRef(null);
+    const syncedEntryAttrsRef = useRef('');
+    const definitions = useMemo(() => [...metadata].sort(compareMetadata), [metadata]);
+    const [entries, setEntries] = useState([]);
+    const [loaded, setLoaded] = useState(false);
+    const [pendingAttr, setPendingAttr] = useState(null);
+    const [saving, setSaving] = useState(false);
+    const pendingFieldRef = useRef(null);
+    const form = useForm({ defaultValues: {} });
+    const addSelectForm = useForm({
+        defaultValues: { [ADD_SELECT_FIELD]: '' },
+    });
+    const pendingForm = useForm({
+        defaultValues: { [PENDING_FIELD]: '' },
+    });
+    const pendingMeta = useMemo(() => pendingAttr
+        ? definitions.find((d) => metaAttr(d) === pendingAttr)
+        : undefined, [definitions, pendingAttr]);
+    const selectedAddAttr = addSelectForm.watch(ADD_SELECT_FIELD);
+    const availableToAdd = useMemo(() => definitions
+        .filter((d) => !entries.some((e) => e.attr === metaAttr(d)))
+        .sort((a, b) => a.name.localeCompare(b.name)), [definitions, entries]);
+    const entryLoadOptions = useMemo(() => {
+        const base = {};
+        for (const m of definitions) {
+            if (normalizeMetadataType(m.type) === 'TEXT') {
+                const attr = metaAttr(m);
+                base[attr] = async (query) => {
+                    const r = await metadataService.suggestValues(document.corpus, m.uid, query);
+                    return r.data.map((v) => ({ label: v, value: v }));
+                };
+            }
+        }
+        return base;
+    }, [definitions, document.corpus]);
+    const pendingLoadOptions = useMemo(() => {
+        const base = {};
+        if (!pendingMeta || normalizeMetadataType(pendingMeta.type) !== 'TEXT')
+            return base;
+        base[PENDING_FIELD] = async (query) => {
+            const r = await metadataService.suggestValues(document.corpus, pendingMeta.uid, query);
+            return r.data.map((v) => ({ label: v, value: v }));
+        };
+        return base;
+    }, [pendingMeta, document.corpus]);
+    const pendingFields = useMemo(() => {
+        if (!pendingMeta)
+            return [];
+        return [toAppFormField(pendingMeta, PENDING_FIELD, t)];
+    }, [pendingMeta, t]);
+    const handleRemove = (attr) => {
+        setEntries((prev) => prev.filter((e) => e.attr !== attr));
+        if (pendingAttr === attr)
+            setPendingAttr(null);
+    };
+    const handleAddPending = () => {
+        if (!pendingMeta || pendingAttr == null)
+            return;
+        const raw = pendingForm.getValues(PENDING_FIELD);
+        const val = serializeMetadataValue(pendingMeta, raw);
+        setEntries((prev) => [
+            ...prev,
+            { attr: pendingAttr, meta: pendingMeta, value: val },
+        ]);
+        setPendingAttr(null);
+        addSelectForm.reset({ [ADD_SELECT_FIELD]: '' });
+        pendingForm.reset({ [PENDING_FIELD]: '' });
+    };
+    const buildPayload = (formValues) => {
+        const domRoot = modalContentRef.current;
+        const payload = {};
+        for (const e of entries) {
+            const raw = resolveRawFromForm(e.meta, e.attr, formValues, domRoot);
+            payload[e.attr] = serializeMetadataValue(e.meta, raw);
+        }
+        for (const uid of initialAttrsRef.current) {
+            if (!(uid in payload)) {
+                payload[uid] = '';
+            }
+        }
+        return payload;
+    };
+    const submitMetadata = async (formValues) => {
+        const payload = buildPayload(formValues);
+        setSaving(true);
+        try {
+            await metadataService.update(document.uid, payload);
+            dispatchMessage({ key: 'update.success', t });
+            const refreshed = await documentService.get(document.uid);
+            onSave(refreshed.data);
+            onClose();
+        }
+        catch (err) {
+            const msg = t('error.metadata.invalid', {
+                value: err.response.data.details[0],
+                field: err.response.data.details[1],
+                type: err.response.data.details[2],
+            });
+            dispatchError({ err: msg });
+        }
+        finally {
+            setSaving(false);
+        }
+    };
+    const handleConfirm = () => {
+        void form.handleSubmit((values) => submitMetadata(values))();
+    };
+    useEffect(() => {
+        setEntries(buildInitialEntries(definitions, document));
+        setLoaded(true);
+        syncedEntryAttrsRef.current = '';
+    }, [definitions, document]);
+    useEffect(() => {
+        if (!loaded)
+            return;
+        const attrKey = entries
+            .map((e) => e.attr)
+            .sort()
+            .join('|');
+        if (syncedEntryAttrsRef.current === attrKey)
+            return;
+        syncedEntryAttrsRef.current = attrKey;
+        const prev = form.getValues();
+        const dirty = form.formState.dirtyFields;
+        const next = {};
+        entries.forEach((e) => {
+            const existing = prev[e.attr];
+            const type = normalizeMetadataType(e.meta.type);
+            const isDirty = !!dirty[e.attr];
+            if (isDirty && existing !== undefined) {
+                next[e.attr] = existing;
+                return;
+            }
+            const stored = e.value ?? '';
+            if (type === 'TEXT') {
+                if (existing != null && typeof existing === 'object') {
+                    next[e.attr] = existing;
+                }
+                else {
+                    next[e.attr] = toAutocompleteFormValue(existing != null ? String(existing) : stored);
+                }
+            }
+            else if (type === 'DATE') {
+                next[e.attr] = normalizeMetadataDateValue(existing != null ? String(existing) : stored);
+            }
+            else {
+                next[e.attr] = existing ?? stored;
+            }
+        });
+        form.reset(next);
+    }, [entries, loaded]);
+    useEffect(() => {
+        if (!pendingMeta)
+            return;
+        pendingForm.reset({
+            [PENDING_FIELD]: normalizeMetadataType(pendingMeta.type) === 'TEXT' ? null : '',
+        });
+    }, [pendingMeta, pendingForm]);
+    useEffect(() => {
+        if (!pendingMeta)
+            return;
+        const timeout = window.setTimeout(() => {
+            const el = pendingFieldRef.current?.querySelector('input:not([disabled]), textarea:not([disabled]), select:not([disabled])');
+            el?.focus();
+        }, 0);
+        return () => window.clearTimeout(timeout);
+    }, [pendingMeta]);
+    useEffect(() => {
+        setPendingAttr(selectedAddAttr || null);
+    }, [selectedAddAttr]);
+    return (_jsx(AppModal, { title: t('metadata.modal.edit.title'), className: "modal-document-metadata", close: onClose, confirm: handleConfirm, disableConfirm: !loaded || saving, disableBackdropClose: true, disableEscapeClose: true, children: _jsxs("div", { className: "document-metadata-edit", ref: modalContentRef, children: [_jsxs("div", { className: "document-metadata-edit-add", children: [_jsx(SelectField, { label: t('metadata.add.select.label'), attr: ADD_SELECT_FIELD, placeholder: t('metadata.add.select.placeholder'), createdForm: addSelectForm, options: availableToAdd.map((def) => ({
+                                label: def.name,
+                                value: metaAttr(def),
+                            })), showEndAdornment: false }), pendingMeta && (_jsxs("div", { className: "document-metadata-edit-pending-field", ref: pendingFieldRef, children: [_jsx(AppForm, { fields: pendingFields, form: pendingForm, runtimeLoadOptions: pendingLoadOptions }), _jsx(Button, { size: "small", mode: "outlined", text: t('metadata.button.add'), onClick: handleAddPending })] }))] }), entries.length > 0 && (_jsxs("div", { className: "document-metadata-edit-list", children: [_jsx("div", { className: "document-metadata-edit-list-label", children: t('metadata.list.label') }), entries.map((e) => (_jsxs("div", { className: "document-metadata-edit-row", "data-metadata-field": e.attr, children: [_jsx("div", { className: "document-metadata-edit-row-field", children: _jsx(AppForm, { fields: [toAppFormField(e.meta, e.attr, t)], form: form, runtimeLoadOptions: entryLoadOptions }) }), _jsx(IconButton, { name: "delete", size: "large", mode: "outlined", color: "danger", title: t('metadata.remove.tooltip'), onClick: () => handleRemove(e.attr) })] }, e.attr)))] }))] }) }));
+}

package/dist/features/DocumentDrawer/Metadata/DocumentMetadataEdit/index.d.ts

@@ -0,0 +1,2 @@
+import DocumentMetadataEdit from './DocumentMetadataEdit';
+export default DocumentMetadataEdit;

package/dist/features/DocumentDrawer/Metadata/DocumentMetadataEdit/index.js

@@ -0,0 +1,2 @@
+import DocumentMetadataEdit from './DocumentMetadataEdit';
+export default DocumentMetadataEdit;

package/dist/features/DocumentDrawer/Metadata/DocumentMetadataEdit/style.scss

@@ -0,0 +1,58 @@
+.modal-document-metadata {
+  width: min(560px, 92vw);
+  margin-top: 8vh;
+
+  .body {
+    height: 70vh;
+    overflow-y: auto;
+
+    .document-metadata-edit {
+      display: flex;
+      flex-direction: column;
+      gap: 24px;
+
+      &-label {
+        display: block;
+        font-size: 0.875rem;
+        margin-bottom: var(--spacing-x-small, 0.25rem);
+      }
+
+      &-select {
+        width: 100%;
+        max-width: 100%;
+        padding: 0.5rem 0.75rem;
+        border-radius: var(--radius-100, 4px);
+        border: 1px solid var(--border-default, #ccc);
+        background: var(--background-default, #fff);
+      }
+
+      &-pending-field {
+        margin-top: var(--spacing-small, 0.5rem);
+        display: flex;
+        flex-direction: column;
+        gap: var(--spacing-small, 0.5rem);
+      }
+
+      &-list-label {
+        font-weight: 600;
+        margin-bottom: var(--spacing-x-small, 0.25rem);
+      }
+
+      &-row {
+        display: flex;
+        align-items: flex-start;
+        gap: var(--spacing-small, 0.5rem);
+        margin-bottom: var(--spacing-small, 0.5rem);
+
+        &-field {
+          flex: 1;
+          min-width: 0;
+
+          .app-form-container {
+            width: 100%;
+          }
+        }
+      }
+    }
+  }
+}

package/dist/features/DocumentDrawer/PageStatusComponent/PageStatusComponent.d.ts

@@ -0,0 +1,9 @@
+import { PageStatus } from '../types/PageStatus';
+import Page from '../types/Page';
+import './style.scss';
+type Props = {
+    page: Page;
+    onUpdate: (status: PageStatus) => void;
+};
+export default function PageStatusComponent({ page, onUpdate }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/features/DocumentDrawer/PageStatusComponent/PageStatusComponent.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PageStatusNames } from '../types/PageStatus';
+import { useTranslation } from 'react-i18next';
+import { Tag } from 'tycho-storybook';
+import './style.scss';
+const SELECTABLE_STATUSES = [
+    'TRANSCRIPTION',
+    'EDITION',
+    'REVIEW',
+    'COMPLETED',
+];
+export default function PageStatusComponent({ page, onUpdate }) {
+    const { t } = useTranslation('page');
+    const currentStatus = page.status ?? 'EDITION';
+    const colors = {
+        blue: 'blue',
+        green: 'green',
+        yellow: 'yellow',
+        violet: 'violet',
+        gray: 'gray',
+    };
+    const colorByStatus = {
+        TRANSCRIPTION: colors.blue,
+        EDITION: colors.violet,
+        REVIEW: colors.yellow,
+        COMPLETED: colors.green,
+    };
+    const statusColor = colorByStatus[currentStatus];
+    return (_jsx(Tag, { color: statusColor, size: "medium", text: t(PageStatusNames[currentStatus]), className: "page-status-tag" }));
+}

package/dist/features/DocumentDrawer/PageStatusComponent/index.d.ts

@@ -0,0 +1,2 @@
+import PageStatusComponent from './PageStatusComponent';
+export default PageStatusComponent;

package/dist/features/DocumentDrawer/PageStatusComponent/index.js

@@ -0,0 +1,2 @@
+import PageStatusComponent from './PageStatusComponent';
+export default PageStatusComponent;

package/dist/features/DocumentDrawer/PageStatusComponent/style.scss

@@ -0,0 +1,19 @@
+.page-status-tag {
+  cursor: pointer;
+}
+
+.popover-status {
+  .popover-body {
+    padding: 8px;
+
+    .options {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+
+      > .ds-button {
+        width: 100%;
+      }
+    }
+  }
+}

package/dist/features/DocumentDrawer/Pages/BoxRemoval.d.ts

@@ -0,0 +1,10 @@
+import BoundingBox from '../types/BoundingBox';
+import { Document } from '../deps';
+import './style.scss';
+type Props = {
+    box: BoundingBox;
+    onClose: () => void;
+    onRemove: (document: Document) => void;
+};
+export default function BoxRemoval({ box, onClose, onRemove }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/features/DocumentDrawer/Pages/BoxRemoval.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import BoundingBoxService from '../services/BoundingBoxService';
+import { useTranslation } from 'react-i18next';
+import { AppModalConfirm } from '../deps';
+import './style.scss';
+export default function BoxRemoval({ box, onClose, onRemove }) {
+    const { t } = useTranslation('page');
+    const handleRemovePage = () => {
+        BoundingBoxService.remove(box).then((response) => {
+            onRemove(response.data);
+        });
+    };
+    return (_jsx(AppModalConfirm, { title: t('modal.title.page.remove'), subtitle: t('modal.description.page.remove'), onClose: onClose, onConfirm: handleRemovePage }));
+}

package/dist/features/DocumentDrawer/Pages/Boxes.d.ts

@@ -0,0 +1,10 @@
+import { Document } from '../deps';
+import './style.scss';
+type Props = {
+    document: Document;
+    setDocument: React.Dispatch<React.SetStateAction<Document | undefined>>;
+    setOpenFile: (b: boolean) => void;
+    handleChange: (document: Document) => void;
+};
+export default function Boxes({ document, setDocument, setOpenFile, handleChange, }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/features/DocumentDrawer/Pages/Boxes.js

@@ -0,0 +1,65 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import BoundingBoxService from '../services/BoundingBoxService';
+import { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { AppCard, AppPagination, AppPicture, ToolsUtils, useCorpusUtils, useMessageUtils } from '../deps';
+import { Button, IconButton } from 'tycho-storybook';
+import BoxRemoval from './BoxRemoval';
+import './style.scss';
+export default function Boxes({ document, setDocument, setOpenFile, handleChange, }) {
+    const { t } = useTranslation('page');
+    const { dispatchMessage, dispatchLoading, isLoading } = useMessageUtils();
+    const { getCorpus, hasCorpus, hasParameter } = useCorpusUtils();
+    const [pages, setPages] = useState();
+    const [removeBox, setRemoveBox] = useState(null);
+    const [pagination, setPagination] = useState({
+        pageIndex: 0,
+        pageSize: 10,
+    });
+    const open = (thisBox) => {
+        setOpenFile(false);
+        hasCorpus();
+        ToolsUtils.redirectPage({
+            corpus: getCorpus(),
+            tool: document.defaultTool,
+            uid: thisBox.uid,
+            hasParameter,
+        });
+    };
+    const handleAddPage = () => {
+        if (isLoading() || !hasCorpus())
+            return;
+        dispatchLoading(true);
+        BoundingBoxService.create(document.uid, getCorpus()).then(() => {
+            loadData();
+        });
+    };
+    const handleRemoved = (updated) => {
+        setDocument((prev) => prev && { ...prev, ...updated });
+        handleChange(updated);
+        setRemoveBox(null);
+        loadData();
+    };
+    const loadData = () => {
+        BoundingBoxService.page(document, pagination.pageIndex, pagination.pageSize).then((r) => {
+            setPages(r.data);
+            dispatchLoading(false);
+        });
+    };
+    const validateRemovePage = (thisBox) => {
+        if (pages?.totalElements === 1) {
+            dispatchMessage({ key: 'remove.one.page', t });
+            return;
+        }
+        setRemoveBox(thisBox);
+    };
+    useEffect(() => {
+        loadData();
+    }, [pagination]);
+    return (_jsxs("div", { className: "pages-container", children: [_jsxs("div", { className: "header", children: [_jsx("div", { className: "title", children: t('pages.label.title') }), _jsx(Button, { size: "small", onClick: handleAddPage, text: t('pages.tooltip.add'), icon: "add", mode: "outlined" })] }), _jsx("div", { className: "body", children: pages &&
+                    pages.content &&
+                    pages.content.map((thisBox, idx) => (_jsx(AppCard, { onClick: () => open(thisBox), footer: _jsxs(_Fragment, { children: [_jsxs("span", { children: [t('pages.label.card'), " ", thisBox.order] }), _jsx(IconButton, { onClick: (e) => {
+                                        validateRemovePage(thisBox);
+                                        e.stopPropagation();
+                                    }, title: t('pages.tooltip.remove'), name: "delete", mode: "ghost", size: "small" })] }), children: _jsx(AppPicture, { src: thisBox.image?.url || '' }) }, idx.valueOf()))) }), _jsx("div", { className: "footer", children: pages && (_jsx(AppPagination, { totalElements: pages.totalElements, pagination: pagination, setPagination: setPagination, hideItensPage: true })) }), removeBox !== null && (_jsx(BoxRemoval, { box: removeBox, onClose: () => setRemoveBox(null), onRemove: handleRemoved }))] }));
+}

package/dist/features/DocumentDrawer/Pages/PageRemoval.d.ts

@@ -0,0 +1,10 @@
+import Page from '../types/Page';
+import { Document } from '../deps';
+import './style.scss';
+type Props = {
+    page: Page;
+    onClose: () => void;
+    onRemove: (document: Document) => void;
+};
+export default function PageRemoval({ page, onClose, onRemove }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/features/DocumentDrawer/Pages/PageRemoval.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import PageService from '../services/PageService';
+import { useTranslation } from 'react-i18next';
+import { AppModalConfirm } from '../deps';
+import './style.scss';
+export default function PageRemoval({ page, onClose, onRemove }) {
+    const { t } = useTranslation('page');
+    const handleRemovePage = () => {
+        PageService.remove(page).then((response) => {
+            onRemove(response.data);
+            onClose();
+        });
+    };
+    return (_jsx(AppModalConfirm, { title: t('modal.title.page.remove'), subtitle: t('modal.description.page.remove'), onClose: onClose, onConfirm: handleRemovePage }));
+}

package/dist/features/DocumentDrawer/Pages/Pages.d.ts

@@ -0,0 +1,10 @@
+import { Document } from '../deps';
+import './style.scss';
+type Props = {
+    document: Document;
+    setDocument: React.Dispatch<React.SetStateAction<Document | undefined>>;
+    handleChange: (document: Document) => void;
+    setOpenFile: (b: boolean) => void;
+};
+export default function Pages({ document, setDocument, setOpenFile, handleChange, }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/features/DocumentDrawer/Pages/Pages.js

@@ -0,0 +1,67 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import pageService from '../services/PageService';
+import { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { AppCard, AppPagination, AppPicture, ToolsUtils, useCorpusUtils, useMessageUtils, } from '../deps';
+import { Button, IconButton } from 'tycho-storybook';
+import PageRemoval from './PageRemoval';
+import './style.scss';
+import PageStatusComponent from '../PageStatusComponent';
+export default function Pages({ document, setDocument, setOpenFile, handleChange, }) {
+    const { t } = useTranslation('page');
+    const { dispatchLoading, dispatchMessage } = useMessageUtils();
+    const { getCorpus, hasCorpus, hasParameter } = useCorpusUtils();
+    const [pages, setPages] = useState();
+    const [removePage, setRemovePage] = useState(null);
+    const [pagination, setPagination] = useState({
+        pageIndex: 0,
+        pageSize: 10,
+    });
+    const open = (thisPage) => {
+        setOpenFile(false);
+        hasCorpus();
+        ToolsUtils.redirectPage({
+            corpus: getCorpus(),
+            tool: document.defaultTool,
+            uid: thisPage.uid,
+            hasParameter,
+            sameWindow: true,
+        });
+    };
+    const handleAddPage = () => {
+        dispatchLoading(true);
+        pageService.create(document.uid).then((response) => {
+            loadData();
+        });
+    };
+    const handleRemoved = (updated) => {
+        setDocument((prev) => prev && { ...prev, ...updated });
+        handleChange(updated);
+        setRemovePage(null);
+        loadData();
+    };
+    const loadData = () => {
+        pageService
+            .page(document, pagination.pageIndex, pagination.pageSize)
+            .then((r) => {
+            setPages(r.data);
+            dispatchLoading(false);
+        });
+    };
+    const validateRemovePage = (thisPage) => {
+        if (pages?.totalElements === 1) {
+            dispatchMessage({ key: 'remove.one.page', t });
+            return;
+        }
+        setRemovePage(thisPage);
+    };
+    useEffect(() => {
+        loadData();
+    }, [pagination]);
+    return (_jsxs("div", { className: "pages-container", children: [_jsxs("div", { className: "header", children: [_jsx("div", { className: "title", children: t('pages.label.title') }), _jsx(Button, { size: "small", onClick: handleAddPage, text: t('pages.tooltip.add'), icon: "add", mode: "outlined" })] }), _jsx("div", { className: "body", children: pages &&
+                    pages.content &&
+                    pages.content.map((thisPage, idx) => (_jsxs(AppCard, { onClick: () => open(thisPage), footer: _jsxs(_Fragment, { children: [_jsxs("span", { children: [t('pages.label.card'), " ", thisPage.order] }), _jsx(IconButton, { onClick: (e) => {
+                                        validateRemovePage(thisPage);
+                                        e.stopPropagation();
+                                    }, title: t('pages.tooltip.remove'), name: "delete", mode: "ghost", size: "small" })] }), children: [_jsx(PageStatusComponent, { page: thisPage, onUpdate: (status) => console.log(status) }), _jsx(AppPicture, { src: thisPage.image?.url || '' })] }, idx.valueOf()))) }), _jsx("div", { className: "footer", children: pages && (_jsx(AppPagination, { totalElements: pages.totalElements, pagination: pagination, setPagination: setPagination, hideItensPage: true })) }), removePage !== null && (_jsx(PageRemoval, { page: removePage, onClose: () => setRemovePage(null), onRemove: handleRemoved }))] }));
+}