@haiiro/docuflow 0.0.13 → 0.0.15

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

@@ -36,7 +36,6 @@ import { type DocflowDocument, type DocumentFolder } from 'src/front/types';
 import {
   DataTable,
   DocflowRoot,
-  formatTotal,
   ListToolbar,
   Message,
   pluralize,
@@ -49,7 +48,8 @@ import {
   useRowSelection,
 } from 'src/front/ui/components';
 import { type FolderAppearance, FolderList, useFolderColor } from 'src/front/ui/folders';
-import { BulkChangeDialog, Button, type MenuAction, MenuButton, PromptDialog, StatusChip, ViewTabs } from 'src/front/ui/kit';
+import { BulkChangeDialog, Button, type MenuAction, MenuButton, PromptDialog, QuickViews, StatusChip } from 'src/front/ui/kit';
+import { TableSkeleton } from 'src/front/ui/skeleton';
 import { restAnd, restEq, restIlike, restIn, restIsNotNull, 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';
@@ -61,6 +61,9 @@ const SEARCH_DEBOUNCE_MS = 300;
 const FOLDERS_LIMIT = 500;
 const ALL_FOLDERS = '';
 const ANY = 'any';
+// The folder list with names and the narrowest row it keeps them in
+const FOLDERS_WIDTH_PX = 240;
+const FOLDERS_FULL_MIN_ROW_PX = FOLDERS_WIDTH_PX + 640;
 const DOCUMENT_NOUN: [string, string, string] = ['документ', 'документа', 'документов'];
 
 // The quick views: a status, all of them, or the trash
@@ -414,31 +417,48 @@ const DocflowDocuments = () => {
   return (
     <DocflowRoot>
       <div style={{ display: 'flex', flex: 1, flexDirection: 'column', minHeight: 0, overflowY: 'auto' }}>
-        <div style={{ alignItems: 'flex-start', display: 'flex', flex: 1, flexWrap: 'wrap', minHeight: 0 }}>
-          <div
-            style={{
-              boxSizing: 'border-box',
-              flex: '1 1 200px',
-              maxWidth: '240px',
-              minWidth: 0,
-              padding: `${theme.spacing[4]} ${theme.spacing[3]} ${theme.spacing[4]} ${theme.spacing[5]}`,
-            }}
-          >
-            <FolderList
-              folders={folders ?? []}
-              selectedFolderId={folderId}
-              allFoldersId={ALL_FOLDERS}
-              onSelect={(id) => {
-                setFolderId(id);
-                setPages(1);
-                selection.clear();
+        {/* The folders stay beside the table: a list where the row is wide,
+            a rail of icons where it is not. No media queries in the sandbox,
+            so each variant's max-width is huge or zero by the row's width. */}
+        <div style={{ alignItems: 'flex-start', display: 'flex', flex: 1, minHeight: 0 }}>
+          {[false, true].map((isCompact) => (
+            <div
+              key={isCompact ? 'compact' : 'full'}
+              style={{
+                flexShrink: 0,
+                maxWidth: isCompact
+                  ? `calc((${FOLDERS_FULL_MIN_ROW_PX}px - 100%) * 999)`
+                  : `calc((100% - ${FOLDERS_FULL_MIN_ROW_PX}px) * 999)`,
+                overflow: 'hidden',
               }}
-              onCreate={handleCreateFolder}
-              onUpdate={handleUpdateFolder}
-              onDelete={handleDeleteFolder}
-            />
-          </div>
-          <div style={{ display: 'flex', flex: '999 1 420px', flexDirection: 'column', minWidth: 0 }}>
+            >
+              <div
+                style={{
+                  boxSizing: 'border-box',
+                  padding: isCompact
+                    ? `${theme.spacing[4]} 0 ${theme.spacing[4]} ${theme.spacing[3]}`
+                    : `${theme.spacing[4]} ${theme.spacing[3]} ${theme.spacing[4]} ${theme.spacing[5]}`,
+                  width: isCompact ? undefined : FOLDERS_WIDTH_PX,
+                }}
+              >
+                <FolderList
+                  isCompact={isCompact}
+                  folders={folders ?? []}
+                  selectedFolderId={folderId}
+                  allFoldersId={ALL_FOLDERS}
+                  onSelect={(id) => {
+                    setFolderId(id);
+                    setPages(1);
+                    selection.clear();
+                  }}
+                  onCreate={handleCreateFolder}
+                  onUpdate={handleUpdateFolder}
+                  onDelete={handleDeleteFolder}
+                />
+              </div>
+            </div>
+          ))}
+          <div style={{ display: 'flex', flex: 1, flexDirection: 'column', minWidth: 0 }}>
             <ListToolbar
               search={{
                 value: searchInput,
@@ -471,7 +491,7 @@ const DocflowDocuments = () => {
                 ],
               }}
               views={
-                <ViewTabs
+                <QuickViews
                   value={view}
                   onChange={(next) => {
                     setView(next);
@@ -481,10 +501,6 @@ const DocflowDocuments = () => {
                   options={VIEWS.map((option) => ({ ...option, count: counts?.[option.value] }))}
                 />
               }
-              total={data === undefined ? undefined : formatTotal(documents.length, data.totalCount, DOCUMENT_NOUN)}
-              columns={{ columns: COLUMNS, hiddenKeys: hiddenColumns, onChange: setHiddenColumns }}
-              onRefresh={() => void reloadAll()}
-              isRefreshing={loading}
               onCreate={() => void handleCreateDocument()}
               isCreating={isCreating}
             />
@@ -493,12 +509,13 @@ const DocflowDocuments = () => {
                 <Message tone="danger">{getErrorMessage(error, 'Не удалось загрузить документы')}</Message>
               </div>
             )}
-            {loading && data === undefined && <Message>Загрузка…</Message>}
+            {loading && data === undefined && <TableSkeleton />}
             {!loading && error === undefined && documents.length === 0 && <Message>Документов нет.</Message>}
             {documents.length > 0 && (
               <DataTable
                 columns={COLUMNS}
                 hiddenColumnKeys={hiddenColumns}
+                onHiddenColumnsChange={setHiddenColumns}
                 sort={sort}
                 onSortChange={(next) => {
                   setSort(next);