@haiiro/docuflow 0.0.5 → 0.0.6

package/src/front-components/docflow-documents.front-component.tsx

@@ -1,45 +1,37 @@
-import { useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { defineFrontComponent } from 'twenty-sdk/define';
-import { AppPath, enqueueSnackbar, navigate, openSidePanelPage } from 'twenty-sdk/front-component';
+import { AppPath, enqueueSnackbar, openSidePanelPage } from 'twenty-sdk/front-component';
 import { Button } from 'twenty-ui/primitives/input';
-import { Tag } from 'twenty-ui/primitives/data-display';
 import { useTheme } from 'twenty-ui/theme';
 
-import { createRecord, getErrorMessage, getRecord, listRecords } from 'src/front/api';
+import { createRecord, getErrorMessage, listRecords } from 'src/front/api';
 import {
-  DOCUMENT_ORIGIN_LABELS,
-  DOCUMENT_STATUS_LABELS,
   DOCUMENT_TYPE_LABELS,
   formatDate,
-  formatMemberName,
 } from 'src/front/format';
 import { useAsync, useDebouncedValue } from 'src/front/hooks/use-async';
 import { type DocflowDocument, type DocumentFolder } from 'src/front/types';
 import {
   DataTable,
-  Details,
   DocflowRoot,
   Message,
   SelectField,
-  SplitView,
-  TextAreaField,
   TextField,
   Toolbar,
 } from 'src/front/ui/components';
-import { getObjectSummaries } from 'src/shared/api/object-summaries';
 import { restAnd, restEq, restIlike, restIn, restOr } from 'src/shared/api/rest-filter.util';
 import { DOCUMENT_OBJECT_NAME, PAGE_SIZE } from 'src/shared/docflow.constants';
 import { logDocflow, logDocflowError } from 'src/shared/log.util';
 import { DOCUMENTS_FRONT_COMPONENT_UNIVERSAL_IDENTIFIER } from 'src/universal-identifiers';
 
+const LIST_POLL_INTERVAL_MS = 3000;
+const LIST_POLL_DURATION_MS = 10 * 60 * 1000;
+
 type DocumentFilter = 'all' | 'collected' | 'DRAFT' | 'IN_REVIEW' | 'APPROVED' | 'ARCHIVED';
-type Panel = { kind: 'closed' } | { kind: 'upload' } | { kind: 'document'; documentId: string };
 
 const SEARCH_DEBOUNCE_MS = 300;
 const FOLDERS_LIMIT = 500;
-const COMPANY_OPTIONS_LIMIT = 8;
 const ALL_FOLDERS = '';
-const DATE_PATTERN = /^\d{4}-\d{2}-\d{2}$/;
 
 // The sandbox of a front component gets only the name and size of a chosen
 // file, never its content, so the file goes in through the standard "File"
@@ -56,7 +48,7 @@ const openDocumentCard = async (documentId: string) => {
   } catch (error) {
     logDocflowError('documents: side panel did not open', error, { documentId });
     await enqueueSnackbar({
-      message: 'Карточка документа не открылась: откройте её кнопкой «Прикрепить файл»',
+      message: 'Карточка документа не открылась, попробуйте ещё раз',
       variant: 'error',
     });
   }
@@ -87,292 +79,107 @@ const buildFilter = ({
       : undefined,
   );
 
-const CompanyPicker = ({
-  value,
-  onChange,
-}: {
-  value: { id: string; name: string } | null;
-  onChange: (company: { id: string; name: string } | null) => void;
-}) => {
+const DocflowDocuments = () => {
   const theme = useTheme();
   const [searchInput, setSearchInput] = useState('');
   const searchQuery = useDebouncedValue(searchInput, SEARCH_DEBOUNCE_MS);
-  const { data } = useAsync(
+  const [folderId, setFolderId] = useState(ALL_FOLDERS);
+  const [documentFilter, setDocumentFilter] = useState<DocumentFilter>('all');
+  const [openedDocumentId, setOpenedDocumentId] = useState<string | undefined>();
+  const [watchStartedAt, setWatchStartedAt] = useState<number | undefined>();
+  const [pages, setPages] = useState(1);
+  const [newFolderName, setNewFolderName] = useState('');
+  const [isCreating, setIsCreating] = useState(false);
+
+  const { data: folders, reload: reloadFolders } = useAsync(
     async () =>
-      searchQuery.trim().length === 0
-        ? []
-        : (
-            await listRecords<{ id: string; name?: string | null }>('companies', {
-              filter: restIlike('name', searchQuery),
-              limit: COMPANY_OPTIONS_LIMIT,
-            })
-          ).records,
-    [searchQuery],
+      (
+        await listRecords<DocumentFolder>('smbDocumentFolders', {
+          order_by: 'name[AscNullsLast]',
+          limit: FOLDERS_LIMIT,
+        })
+      ).records,
+    [],
   );
-
-  if (value !== null) {
-    return (
-      <div style={{ alignItems: 'center', display: 'flex', gap: theme.spacing[2], justifyContent: 'space-between' }}>
-        <span>Контрагент: {value.name}</span>
-        <Button variant="ghost" size="sm" onClick={() => onChange(null)}>
-          Убрать
-        </Button>
-      </div>
-    );
-  }
-
-  return (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: theme.spacing[1] }}>
-      <TextField label="Контрагент" placeholder="Начните вводить название" value={searchInput} onChange={setSearchInput} />
-      {(data ?? []).map((company) => (
-        <Button
-          key={company.id}
-          variant="ghost"
-          size="sm"
-          onClick={() => {
-            onChange({ id: company.id, name: company.name?.trim() || 'Без названия' });
-            setSearchInput('');
-          }}
-        >
-          {company.name?.trim() || 'Без названия'}
-        </Button>
-      ))}
-    </div>
+  const listQuery = useMemo(
+    () => ({
+      filter: buildFilter({ folderId, documentFilter, searchQuery }),
+      order_by: 'createdAt[DescNullsLast]',
+      limit: PAGE_SIZE * pages,
+      depth: 1,
+    }),
+    [folderId, documentFilter, searchQuery, pages],
   );
-};
+  const { data, setData, loading, error, reload } = useAsync(
+    () => listRecords<DocflowDocument>('smbDocuments', listQuery),
+    [listQuery],
+  );
+  const documents = data?.records ?? [];
 
-const DocumentUploadForm = ({
-  folderId,
-  onUploaded,
-  onCancel,
-}: {
-  folderId: string;
-  onUploaded: (documentId: string) => void;
-  onCancel: () => void;
-}) => {
-  const theme = useTheme();
-  const [name, setName] = useState('');
-  const [documentType, setDocumentType] = useState('OTHER');
-  const [status, setStatus] = useState('DRAFT');
-  const [number, setNumber] = useState('');
-  const [documentDate, setDocumentDate] = useState('');
-  const [validUntil, setValidUntil] = useState('');
-  const [description, setDescription] = useState('');
-  const [counterparty, setCounterparty] = useState<{ id: string; name: string } | null>(null);
-  const [isSaving, setIsSaving] = useState(false);
-  const [errorMessage, setErrorMessage] = useState<string | undefined>();
+  // A document opens in its standard card in the side panel; while people
+  // edit there, the list re-reads itself quietly to show the changes.
+  const openDocument = async (documentId: string) => {
+    setOpenedDocumentId(documentId);
+    setWatchStartedAt(Date.now());
+    await openDocumentCard(documentId);
+  };
 
-  const handleCreate = async () => {
-    if (name.trim().length === 0) {
+  useEffect(() => {
+    if (watchStartedAt === undefined) {
       return;
     }
 
-    setIsSaving(true);
-    setErrorMessage(undefined);
-    logDocflow('documents: create', { name: name.trim(), documentType, status, folderId });
+    const interval = setInterval(() => {
+      void listRecords<DocflowDocument>('smbDocuments', listQuery)
+        .then((latest) => {
+          const signature = (list: DocflowDocument[]) =>
+            list.map(({ id, updatedAt }) => `${id}:${updatedAt ?? ''}`).join();
+
+          if (signature(latest.records) !== signature(data?.records ?? [])) {
+            setData(latest);
+          }
+        })
+        .catch(() => undefined);
+    }, LIST_POLL_INTERVAL_MS);
+    const stop = setTimeout(() => clearInterval(interval), LIST_POLL_DURATION_MS);
+
+    return () => {
+      clearInterval(interval);
+      clearTimeout(stop);
+    };
+  }, [watchStartedAt, listQuery, data]);
+
+  // As "Создать" of a standard list: an empty draft in the open folder, filled
+  // in its own card in the side panel (the file goes in there too).
+  const handleCreateDocument = async () => {
+    setIsCreating(true);
+    logDocflow('documents: create', { folderId });
 
     try {
       const document = await createRecord<DocflowDocument>('smbDocuments', {
-        name: name.trim(),
-        documentType,
-        status,
-        number: number.trim() || null,
-        documentDate: DATE_PATTERN.test(documentDate) ? documentDate : null,
-        validUntil: DATE_PATTERN.test(validUntil) ? validUntil : null,
-        description: description.trim() || null,
-        counterpartyId: counterparty?.id ?? null,
-        folderId: folderId === ALL_FOLDERS ? null : folderId,
+        name: '',
+        status: 'DRAFT',
         origin: 'UPLOAD',
+        folderId: folderId === ALL_FOLDERS ? null : folderId,
       });
 
       if (document === undefined) {
         throw new Error('документ создан, но сервер его не вернул');
       }
 
-      logDocflow('documents: created', { documentId: document.id });
-      await enqueueSnackbar({ message: 'Документ создан: прикрепите файл в поле «Файл»', variant: 'success' });
-      onUploaded(document.id);
-      await openDocumentCard(document.id);
-    } catch (error) {
-      logDocflowError('documents: create failed', error);
-      setErrorMessage(getErrorMessage(error, 'Не удалось создать документ'));
+      void reload();
+      await openDocument(document.id);
+    } catch (createError) {
+      logDocflowError('documents: create failed', createError);
+      await enqueueSnackbar({
+        message: getErrorMessage(createError, 'Не удалось создать документ'),
+        variant: 'error',
+      });
     } finally {
-      setIsSaving(false);
+      setIsCreating(false);
     }
   };
 
-  return (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: theme.spacing[3] }}>
-      <TextField label="Название" value={name} onChange={setName} />
-      <SelectField
-        label="Тип"
-        value={documentType}
-        options={Object.entries(DOCUMENT_TYPE_LABELS).map(([value, label]) => ({ value, label }))}
-        onChange={setDocumentType}
-      />
-      <SelectField
-        label="Статус"
-        value={status}
-        options={Object.entries(DOCUMENT_STATUS_LABELS).map(([value, label]) => ({ value, label }))}
-        onChange={setStatus}
-      />
-      <TextField label="Номер" value={number} onChange={setNumber} />
-      <TextField label="Дата документа" type="date" value={documentDate} onChange={setDocumentDate} />
-      <TextField label="Действует до" type="date" value={validUntil} onChange={setValidUntil} />
-      <CompanyPicker value={counterparty} onChange={setCounterparty} />
-      <TextAreaField label="Описание" value={description} onChange={setDescription} />
-      <Message tone="hint">Файл прикрепляется в карточке документа: она откроется справа после создания.</Message>
-      {errorMessage !== undefined && <Message tone="danger">{errorMessage}</Message>}
-      <div style={{ display: 'flex', gap: theme.spacing[2] }}>
-        <Button
-          variant="solid"
-          size="sm"
-          loading={isSaving}
-          disabled={name.trim().length === 0}
-          onClick={() => void handleCreate()}
-        >
-          Создать и прикрепить файл
-        </Button>
-        <Button variant="ghost" size="sm" onClick={onCancel}>
-          Отмена
-        </Button>
-      </div>
-    </div>
-  );
-};
-
-const DocumentCard = ({ documentId }: { documentId: string }) => {
-  const theme = useTheme();
-  const { data: document, loading, error, reload } = useAsync(
-    () => getRecord<DocflowDocument>('smbDocuments', documentId),
-    [documentId],
-  );
-  const { data: objectSummaries } = useAsync(() => getObjectSummaries(), []);
-
-  if (document === undefined) {
-    return loading ? (
-      <Message>Загрузка…</Message>
-    ) : (
-      <Message tone="danger">{getErrorMessage(error, 'Документ не найден или нет доступа.')}</Message>
-    );
-  }
-
-  const file = document.file?.[0];
-  const sourceSummary =
-    typeof document.sourceObjectName === 'string'
-      ? objectSummaries?.get(document.sourceObjectName)
-      : undefined;
-  const linkStyle = { color: theme.color.blue, cursor: 'pointer' };
-
-  return (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: theme.spacing[3] }}>
-      <strong style={{ fontSize: theme.font.size.lg }}>{document.name?.trim() || 'Без названия'}</strong>
-      <Details
-        rows={[
-          { label: 'Тип', value: DOCUMENT_TYPE_LABELS[document.documentType ?? ''] },
-          { label: 'Номер', value: document.number },
-          { label: 'Дата', value: formatDate(document.documentDate) },
-          { label: 'Действует до', value: formatDate(document.validUntil) },
-          { label: 'Контрагент', value: document.counterparty?.name },
-          {
-            label: 'Статус',
-            value: document.status && <Tag color="gray">{DOCUMENT_STATUS_LABELS[document.status] ?? document.status}</Tag>,
-          },
-          { label: 'Автор', value: formatMemberName(document.author ?? undefined) },
-          { label: 'Добавлен', value: formatDate(document.createdAt) },
-          { label: 'Источник', value: DOCUMENT_ORIGIN_LABELS[document.origin ?? ''] },
-          {
-            label: 'Где загружен',
-            value: sourceSummary !== undefined && typeof document.sourceRecordId === 'string' && (
-              <span
-                role="link"
-                tabIndex={0}
-                style={linkStyle}
-                onClick={() =>
-                  void navigate(AppPath.RecordShowPage, {
-                    objectNameSingular: sourceSummary.nameSingular,
-                    objectRecordId: document.sourceRecordId as string,
-                  })
-                }
-              >
-                {document.sourceRecordName ?? sourceSummary.labelSingular}
-              </span>
-            ),
-          },
-          {
-            label: 'Процесс',
-            value: typeof document.workflowRunId === 'string' && (
-              <span
-                role="link"
-                tabIndex={0}
-                style={linkStyle}
-                onClick={() =>
-                  void navigate(AppPath.RecordShowPage, {
-                    objectNameSingular: 'workflowRun',
-                    objectRecordId: document.workflowRunId as string,
-                  })
-                }
-              >
-                Открыть запуск
-              </span>
-            ),
-          },
-        ]}
-      />
-      {typeof document.description === 'string' && document.description.length > 0 && (
-        <div style={{ whiteSpace: 'pre-wrap' }}>{document.description}</div>
-      )}
-      {file?.url !== undefined ? (
-        <a href={file.url} target="_blank" rel="noopener noreferrer" download={file.label} style={linkStyle}>
-          Скачать {file.label}
-        </a>
-      ) : (
-        <Message tone="hint">Файл не прикреплён.</Message>
-      )}
-      <div style={{ display: 'flex', flexWrap: 'wrap', gap: theme.spacing[2] }}>
-        <Button variant="outline" size="sm" onClick={() => void openDocumentCard(documentId)}>
-          {file === undefined ? 'Прикрепить файл' : 'Открыть карточку'}
-        </Button>
-        <Button variant="ghost" size="sm" loading={loading} onClick={() => void reload()}>
-          Обновить
-        </Button>
-      </div>
-    </div>
-  );
-};
-
-const DocflowDocuments = () => {
-  const theme = useTheme();
-  const [searchInput, setSearchInput] = useState('');
-  const searchQuery = useDebouncedValue(searchInput, SEARCH_DEBOUNCE_MS);
-  const [folderId, setFolderId] = useState(ALL_FOLDERS);
-  const [documentFilter, setDocumentFilter] = useState<DocumentFilter>('all');
-  const [panel, setPanel] = useState<Panel>({ kind: 'closed' });
-  const [pages, setPages] = useState(1);
-  const [newFolderName, setNewFolderName] = useState('');
-
-  const { data: folders, reload: reloadFolders } = useAsync(
-    async () =>
-      (
-        await listRecords<DocumentFolder>('smbDocumentFolders', {
-          order_by: 'name[AscNullsLast]',
-          limit: FOLDERS_LIMIT,
-        })
-      ).records,
-    [],
-  );
-  const { data, loading, error, reload } = useAsync(
-    () =>
-      listRecords<DocflowDocument>('smbDocuments', {
-        filter: buildFilter({ folderId, documentFilter, searchQuery }),
-        order_by: 'createdAt[DescNullsLast]',
-        limit: PAGE_SIZE * pages,
-        depth: 1,
-      }),
-    [folderId, documentFilter, searchQuery, pages],
-  );
-  const documents = data?.records ?? [];
-
   const handleCreateFolder = async () => {
     const folderName = newFolderName.trim();
 
@@ -394,24 +201,7 @@ const DocflowDocuments = () => {
 
   return (
     <DocflowRoot>
-      <SplitView
-        panelTitle={panel.kind === 'upload' ? 'Новый документ' : 'Документ'}
-        onClosePanel={() => setPanel({ kind: 'closed' })}
-        panel={
-          panel.kind === 'upload' ? (
-            <DocumentUploadForm
-              folderId={folderId}
-              onCancel={() => setPanel({ kind: 'closed' })}
-              onUploaded={(documentId) => {
-                setPanel({ kind: 'document', documentId });
-                void reload();
-              }}
-            />
-          ) : panel.kind === 'document' ? (
-            <DocumentCard key={panel.documentId} documentId={panel.documentId} />
-          ) : undefined
-        }
-      >
+      <div style={{ display: 'flex', flex: 1, flexDirection: 'column', minHeight: 0, overflowY: 'auto' }}>
         <div style={{ display: 'flex', flex: 1, flexWrap: 'wrap', minHeight: 0 }}>
           <nav
             aria-label="Папки"
@@ -422,7 +212,7 @@ const DocflowDocuments = () => {
               flexDirection: 'column',
               gap: theme.spacing[1],
               maxWidth: '240px',
-              padding: theme.spacing[2],
+              padding: `${theme.spacing[4]} ${theme.spacing[3]} ${theme.spacing[4]} ${theme.spacing[5]}`,
             }}
           >
             {[{ id: ALL_FOLDERS, name: 'Все документы' }, ...(folders ?? [])].map((folder) => (
@@ -474,8 +264,8 @@ const DocflowDocuments = () => {
                 }}
               />
               <div style={{ marginLeft: 'auto' }}>
-                <Button variant="solid" size="sm" onClick={() => setPanel({ kind: 'upload' })}>
-                  Добавить документ
+                <Button variant="solid" size="sm" loading={isCreating} onClick={() => void handleCreateDocument()}>
+                  Создать
                 </Button>
               </div>
             </Toolbar>
@@ -495,8 +285,8 @@ const DocflowDocuments = () => {
                   { key: 'source', label: 'Где загружен', width: '24%' },
                   { key: 'createdAt', label: 'Добавлен' },
                 ]}
-                selectedRowId={panel.kind === 'document' ? panel.documentId : undefined}
-                onRowClick={(documentId) => setPanel({ kind: 'document', documentId })}
+                selectedRowId={openedDocumentId}
+                onRowClick={(documentId) => void openDocument(documentId)}
                 rows={documents.map((document) => ({
                   id: document.id,
                   cells: {
@@ -518,7 +308,7 @@ const DocflowDocuments = () => {
             )}
           </div>
         </div>
-      </SplitView>
+      </div>
     </DocflowRoot>
   );
 };