437 lines
17 KiB
React
437 lines
17 KiB
React
import React from 'react';
|
|
import { FolderIcon, CheckIcon, CloseIcon } from '../ui/icons';
|
|
import { getTagColorStyle } from '../utils/colors';
|
|
import DocumentThumbnailImage from './DocumentThumbnailImage';
|
|
import CorrespondentLinks from './CorrespondentLinks';
|
|
import { resolveCorrespondents } from './correspondents';
|
|
import { writeTagTransferData } from './tagTransfer';
|
|
import useInlineRename from './useInlineRename';
|
|
|
|
const formatDate = (value) => {
|
|
if (!value) {
|
|
return "—";
|
|
}
|
|
const timestamp = Date.parse(value);
|
|
if (Number.isNaN(timestamp)) {
|
|
return "—";
|
|
}
|
|
return new Date(timestamp).toLocaleDateString();
|
|
};
|
|
|
|
const DocumentsList = ({
|
|
entries,
|
|
focusedRowKey,
|
|
selectedDocumentIdsSet,
|
|
selectedFolderIdsSet,
|
|
draggingDocumentIdsSet,
|
|
draggedFolderId,
|
|
ensureAssetUrl,
|
|
getDocumentAsset,
|
|
onFolderClick,
|
|
onFolderSelect,
|
|
onFolderDragOver,
|
|
onFolderDragLeave,
|
|
onFolderDrop,
|
|
onFolderDragStart,
|
|
onFolderDragEnd,
|
|
onFolderRename,
|
|
onDocumentClick,
|
|
onDocumentOpen,
|
|
onDocumentDragStart,
|
|
onDocumentDragEnd,
|
|
onDocumentTagDragOver,
|
|
onDocumentTagDragLeave,
|
|
onDocumentTagDrop,
|
|
onDocumentRename,
|
|
tagLookupById,
|
|
onTagClick,
|
|
onCorrespondentClick,
|
|
activeCorrespondentIdSet,
|
|
scrollRef,
|
|
onClearSelection,
|
|
}) => {
|
|
const {
|
|
editingId: editingDocumentId,
|
|
draftValue: documentDraft,
|
|
setDraftValue: setDocumentDraft,
|
|
beginEditing: beginDocumentEditing,
|
|
cancelEditing: cancelDocumentEditing,
|
|
submitEditing: submitDocumentEditing,
|
|
savingId: savingDocumentId,
|
|
attachInputRef: attachDocumentInputRef,
|
|
} = useInlineRename(onDocumentRename, {
|
|
getCurrentValue: (doc) => doc?.title ?? '',
|
|
getEntityId: (doc) => doc?.id ?? null,
|
|
});
|
|
|
|
const {
|
|
editingId: editingFolderId,
|
|
draftValue: folderDraft,
|
|
setDraftValue: setFolderDraft,
|
|
beginEditing: beginFolderEditing,
|
|
cancelEditing: cancelFolderEditing,
|
|
submitEditing: submitFolderEditing,
|
|
savingId: savingFolderId,
|
|
attachInputRef: attachFolderInputRef,
|
|
} = useInlineRename(onFolderRename, {
|
|
getCurrentValue: (folder) => folder?.name ?? '',
|
|
getEntityId: (folder) => folder?.id ?? null,
|
|
});
|
|
|
|
|
|
const documentSelectionCount = selectedDocumentIdsSet?.size ?? 0;
|
|
const folderSelectionCount = selectedFolderIdsSet?.size ?? 0;
|
|
const totalSelectionCount = documentSelectionCount + folderSelectionCount;
|
|
|
|
return (
|
|
<table aria-multiselectable="true">
|
|
<thead
|
|
onClick={() => {
|
|
onClearSelection?.();
|
|
}}
|
|
>
|
|
<tr>
|
|
<th className="thumb-column"></th>
|
|
<th>Name</th>
|
|
<th>Issued</th>
|
|
<th>Added</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{entries.map((entry) => {
|
|
if (entry.type === 'folder') {
|
|
const folder = entry.folder;
|
|
if (!folder) {
|
|
return null;
|
|
}
|
|
const canDragFolder = folder.id !== 'root';
|
|
const isDraggingFolder = draggedFolderId === folder.id;
|
|
const isSelectedFolder = selectedFolderIdsSet?.has(folder.id);
|
|
const rowKey = `folder:${folder.id}`;
|
|
const canRenameFolder = folder.id !== 'root' && typeof onFolderRename === 'function';
|
|
const isFolderEditing = editingFolderId === folder.id;
|
|
const folderDraftValue = isFolderEditing ? folderDraft : folder.name;
|
|
const trimmedFolderDraft = isFolderEditing ? folderDraft.trim() : '';
|
|
const isFolderSaving = savingFolderId === folder.id;
|
|
const canSubmitFolder =
|
|
isFolderEditing && trimmedFolderDraft.length > 0 && trimmedFolderDraft !== folder.name;
|
|
const allowInlineFolderEdit = canRenameFolder && isSelectedFolder && totalSelectionCount === 1;
|
|
|
|
return (
|
|
<tr
|
|
key={entry.key}
|
|
className={`folder${isDraggingFolder ? ' is-dragging' : ''}${
|
|
focusedRowKey === rowKey ? ' focused' : ''
|
|
}${isSelectedFolder ? ' selected' : ''}`}
|
|
id={`folder-row-${folder.id}`}
|
|
onClick={(event) => onFolderClick?.(folder, event)}
|
|
onDoubleClick={(event) => {
|
|
event.preventDefault();
|
|
onFolderSelect?.(folder.id);
|
|
}}
|
|
onDragOver={(event) => onFolderDragOver?.(event, folder.id)}
|
|
onDragLeave={onFolderDragLeave}
|
|
onDrop={(event) => onFolderDrop?.(event, folder.id)}
|
|
draggable={canDragFolder}
|
|
onDragStart={(event) => {
|
|
if (canDragFolder) {
|
|
onFolderDragStart?.(event, folder.id);
|
|
}
|
|
}}
|
|
onDragEnd={(event) => {
|
|
if (canDragFolder) {
|
|
onFolderDragEnd?.(event);
|
|
}
|
|
}}
|
|
>
|
|
<td className="thumb-cell">
|
|
<div className="thumb-icon">
|
|
<FolderIcon className="thumb-icon__image" size={32} />
|
|
</div>
|
|
</td>
|
|
<td className="doc-list__name">
|
|
<div className="doc-list__name-content">
|
|
<span className="doc-name__title">
|
|
<span className="doc-name__primary">
|
|
{isFolderEditing ? (
|
|
<span className="doc-title-edit">
|
|
<input
|
|
type="text"
|
|
ref={attachFolderInputRef}
|
|
value={folderDraftValue}
|
|
onChange={(event) => setFolderDraft(event.target.value)}
|
|
onClick={(event) => event.stopPropagation()}
|
|
onKeyDown={(event) => {
|
|
if (event.key === 'Enter') {
|
|
event.preventDefault();
|
|
submitFolderEditing(folder);
|
|
} else if (event.key === 'Escape') {
|
|
event.preventDefault();
|
|
cancelFolderEditing(event);
|
|
}
|
|
}}
|
|
onBlur={(event) => {
|
|
const nextFocus = event.relatedTarget;
|
|
if (!nextFocus || !event.currentTarget.parentElement?.contains(nextFocus)) {
|
|
cancelFolderEditing();
|
|
}
|
|
}}
|
|
/>
|
|
<button
|
|
type="button"
|
|
className="icon-button"
|
|
aria-label="Save name"
|
|
title="Save name"
|
|
disabled={!canSubmitFolder || isFolderSaving}
|
|
onClick={(event) => {
|
|
event.stopPropagation();
|
|
submitFolderEditing(folder);
|
|
}}
|
|
>
|
|
<CheckIcon />
|
|
</button>
|
|
<button
|
|
type="button"
|
|
className="icon-button"
|
|
aria-label="Cancel"
|
|
title="Cancel"
|
|
onClick={(event) => {
|
|
cancelFolderEditing(event);
|
|
}}
|
|
>
|
|
<CloseIcon />
|
|
</button>
|
|
</span>
|
|
) : (
|
|
<span
|
|
className="doc-name__primary-text"
|
|
role={allowInlineFolderEdit ? 'button' : undefined}
|
|
tabIndex={allowInlineFolderEdit ? 0 : undefined}
|
|
onClick={(event) => {
|
|
if (!allowInlineFolderEdit) {
|
|
return;
|
|
}
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
beginFolderEditing(folder);
|
|
}}
|
|
onKeyDown={(event) => {
|
|
if (!allowInlineFolderEdit) {
|
|
return;
|
|
}
|
|
if (event.key === 'Enter') {
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
beginFolderEditing(folder);
|
|
}
|
|
}}
|
|
>
|
|
{folder.name}
|
|
</span>
|
|
)}
|
|
</span>
|
|
</span>
|
|
</div>
|
|
</td>
|
|
<td>—</td>
|
|
<td>—</td>
|
|
</tr>
|
|
);
|
|
}
|
|
|
|
const doc = entry.document;
|
|
if (!doc) {
|
|
return null;
|
|
}
|
|
const isSelected = selectedDocumentIdsSet?.has(doc.id);
|
|
const isDraggingDoc = draggingDocumentIdsSet?.has(doc.id);
|
|
const rowClasses = ['document'];
|
|
if (isSelected) rowClasses.push('selected');
|
|
if (isDraggingDoc) rowClasses.push('is-dragging');
|
|
const correspondents = resolveCorrespondents(doc);
|
|
const isEditingDoc = editingDocumentId === doc.id;
|
|
const documentDraftValue = isEditingDoc ? documentDraft : doc.title;
|
|
const trimmedDocumentDraft = isEditingDoc ? documentDraft.trim() : '';
|
|
const isDocumentSaving = savingDocumentId === doc.id;
|
|
const canSubmitDocument =
|
|
isEditingDoc && trimmedDocumentDraft.length > 0 && trimmedDocumentDraft !== doc.title;
|
|
const allowInlineDocumentEdit =
|
|
onDocumentRename && isSelected && totalSelectionCount === 1;
|
|
const issuedLabel = formatDate(doc.issued_at);
|
|
const addedLabel = formatDate(doc.created_at || doc.uploaded_at);
|
|
return (
|
|
<tr
|
|
key={entry.key}
|
|
className={rowClasses.join(' ')}
|
|
id={`document-row-${doc.id}`}
|
|
data-doc-id={doc.id}
|
|
onClick={(event) => onDocumentClick?.(doc, event)}
|
|
onDoubleClick={() => onDocumentOpen?.(doc.id)}
|
|
draggable
|
|
onDragStart={(event) => onDocumentDragStart?.(event, doc)}
|
|
onDragEnd={(event) => onDocumentDragEnd?.(event)}
|
|
onDragOver={onDocumentTagDragOver}
|
|
onDragLeave={onDocumentTagDragLeave}
|
|
onDrop={(event) => onDocumentTagDrop?.(event, doc.id)}
|
|
>
|
|
<td className="thumb-cell">
|
|
<DocumentThumbnailImage
|
|
document={doc}
|
|
ensureAssetUrl={ensureAssetUrl}
|
|
getDocumentAsset={getDocumentAsset}
|
|
alt={`Thumbnail for ${doc.title}`}
|
|
scrollRootRef={scrollRef}
|
|
/>
|
|
</td>
|
|
<td className="doc-list__name">
|
|
<div className="doc-name">
|
|
<div className="doc-list__name-content">
|
|
<span className="doc-name__title">
|
|
{correspondents.length > 0 ? (
|
|
<span className="doc-correspondents">
|
|
<CorrespondentLinks
|
|
correspondents={correspondents}
|
|
activeCorrespondentIdSet={activeCorrespondentIdSet}
|
|
onCorrespondentClick={onCorrespondentClick}
|
|
/>
|
|
</span>
|
|
) : null}
|
|
<span className="doc-name__primary">
|
|
{isEditingDoc ? (
|
|
<span className="doc-title-edit">
|
|
<input
|
|
type="text"
|
|
ref={attachDocumentInputRef}
|
|
value={documentDraftValue}
|
|
onChange={(event) => setDocumentDraft(event.target.value)}
|
|
onClick={(event) => event.stopPropagation()}
|
|
onKeyDown={(event) => {
|
|
if (event.key === 'Enter') {
|
|
event.preventDefault();
|
|
submitDocumentEditing(doc);
|
|
} else if (event.key === 'Escape') {
|
|
event.preventDefault();
|
|
cancelDocumentEditing(event);
|
|
}
|
|
}}
|
|
onBlur={(event) => {
|
|
const nextFocus = event.relatedTarget;
|
|
if (!nextFocus || !event.currentTarget.parentElement?.contains(nextFocus)) {
|
|
cancelDocumentEditing();
|
|
}
|
|
}}
|
|
/>
|
|
<button
|
|
type="button"
|
|
className="icon-button"
|
|
aria-label="Save title"
|
|
title="Save title"
|
|
disabled={!canSubmitDocument || isDocumentSaving}
|
|
onClick={(event) => {
|
|
event.stopPropagation();
|
|
submitDocumentEditing(doc);
|
|
}}
|
|
>
|
|
<CheckIcon />
|
|
</button>
|
|
<button
|
|
type="button"
|
|
className="icon-button"
|
|
aria-label="Cancel"
|
|
title="Cancel"
|
|
onClick={(event) => {
|
|
cancelDocumentEditing(event);
|
|
}}
|
|
>
|
|
<CloseIcon />
|
|
</button>
|
|
</span>
|
|
) : (
|
|
<span
|
|
className="doc-name__primary-text"
|
|
role={allowInlineDocumentEdit ? 'button' : undefined}
|
|
tabIndex={allowInlineDocumentEdit ? 0 : undefined}
|
|
onClick={(event) => {
|
|
if (!allowInlineDocumentEdit) {
|
|
return;
|
|
}
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
beginDocumentEditing(doc);
|
|
}}
|
|
onKeyDown={(event) => {
|
|
if (!allowInlineDocumentEdit) {
|
|
return;
|
|
}
|
|
if (event.key === 'Enter') {
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
beginDocumentEditing(doc);
|
|
}
|
|
}}
|
|
>
|
|
{doc.title}
|
|
</span>
|
|
)}
|
|
</span>
|
|
</span>
|
|
</div>
|
|
{(doc.tags || []).length > 0 && (
|
|
<div className="doc-name__tags">
|
|
{(doc.tags || []).map((tag) => {
|
|
const colorSource = tag?.color || tagLookupById?.get(tag.id)?.color;
|
|
const style = getTagColorStyle(colorSource);
|
|
return (
|
|
<span
|
|
key={tag.id}
|
|
className="badge tag-chip"
|
|
style={style || undefined}
|
|
title={tag.label}
|
|
role="button"
|
|
onClick={(event) => {
|
|
event.stopPropagation();
|
|
onTagClick?.(tag.id);
|
|
}}
|
|
draggable
|
|
onDragStart={(event) => {
|
|
event.stopPropagation();
|
|
try {
|
|
if (event.dataTransfer) {
|
|
event.dataTransfer.effectAllowed = 'copyMove';
|
|
}
|
|
} catch (error) {
|
|
console.warn('[documents] Failed to configure drag effect', error);
|
|
}
|
|
writeTagTransferData(event.dataTransfer, tag, doc.id);
|
|
}}
|
|
onDragEnd={(event) => {
|
|
event.stopPropagation();
|
|
}}
|
|
onKeyDown={(event) => {
|
|
if (event.key === 'Enter' || event.key === ' ') {
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
onTagClick?.(tag.id);
|
|
}
|
|
}}
|
|
>
|
|
{tag.label}
|
|
</span>
|
|
);
|
|
})}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</td>
|
|
<td>{issuedLabel}</td>
|
|
<td>{addedLabel}</td>
|
|
</tr>
|
|
);
|
|
})}
|
|
</tbody>
|
|
</table>
|
|
);
|
|
};
|
|
|
|
export default DocumentsList;
|