839 lines
24 KiB
TypeScript
839 lines
24 KiB
TypeScript
import React, { useCallback, useEffect, useMemo, useState, type FormEvent } from 'react';
|
|
import { Link } from 'react-router-dom';
|
|
import { EditIcon, IconX, CheckIcon, PlusIcon } from '../ui/icons';
|
|
import SelectionAssignmentMenu, {
|
|
SelectionAssignmentMenuItem,
|
|
type NormalizedSelectionAssignmentItem,
|
|
} from './SelectionAssignmentMenu';
|
|
import { getTagColorStyle } from '../utils/colors';
|
|
import {
|
|
formatDate,
|
|
toDateInputValue,
|
|
toIssuedTimestamp,
|
|
} from '../utils/date';
|
|
import { describeDocumentSummary, type DocumentSummaryRow } from './documentSummary';
|
|
import { isPlainObject } from '../utils/typeGuards';
|
|
import { useFolderManager } from '../folders/FolderManagerContext';
|
|
|
|
type Identifier = string | number;
|
|
|
|
interface TagEntry {
|
|
id?: Identifier;
|
|
label?: string;
|
|
color?: string | null;
|
|
}
|
|
|
|
interface CorrespondentEntry {
|
|
id?: Identifier;
|
|
name?: string;
|
|
count?: number;
|
|
}
|
|
|
|
interface DocumentLike {
|
|
id?: Identifier;
|
|
title?: string;
|
|
issued_at?: string | null;
|
|
folder_id?: string | null;
|
|
current_version?: { version_number?: number } | null;
|
|
tags?: TagEntry[];
|
|
correspondents?: CorrespondentEntry[];
|
|
[key: string]: unknown;
|
|
}
|
|
|
|
interface TagSectionProps {
|
|
tags?: TagEntry[];
|
|
onRemove?: (tag: TagEntry) => void;
|
|
onAdd?: (payload: { value: string; option?: unknown; input?: unknown }) => void;
|
|
emptyMessage?: string;
|
|
addPlaceholder?: string;
|
|
addButtonLabel?: string;
|
|
datalistOptions?: Array<SelectionAssignmentMenuItem | string>;
|
|
className?: string;
|
|
}
|
|
|
|
interface CorrespondentSectionProps {
|
|
entries?: CorrespondentEntry[];
|
|
onRemove?: (entry: CorrespondentEntry) => void;
|
|
onAdd?: (payload: { name: string; option?: unknown; input?: unknown }) => void;
|
|
showCount?: boolean;
|
|
addPlaceholder?: string;
|
|
addButtonLabel?: string;
|
|
datalistOptions?: Array<SelectionAssignmentMenuItem | string>;
|
|
className?: string;
|
|
}
|
|
|
|
export interface DocumentSummarySectionProps {
|
|
document?: DocumentLike | null;
|
|
tagLookupById?: Map<Identifier, TagEntry>;
|
|
tagOptions?: SelectionAssignmentMenuItem[];
|
|
onTagAdd?: (doc: DocumentLike, value: string, context?: { option?: unknown }) => void;
|
|
onTagRemove?: (docId: Identifier | undefined, tagId: Identifier | undefined) => void;
|
|
correspondents?: CorrespondentEntry[];
|
|
correspondentOptions?: SelectionAssignmentMenuItem[];
|
|
onCorrespondentAdd?: (payload: { document: DocumentLike; name: string; option?: unknown }) => void;
|
|
onCorrespondentRemove?: (payload: { documentId: Identifier | undefined; correspondentId: Identifier | undefined }) => void;
|
|
onUpdateTitle?: (docId: Identifier | undefined, title: string) => Promise<boolean> | boolean;
|
|
onUpdateIssued?: (docId: Identifier | undefined, timestamp: number | null) => Promise<boolean> | boolean;
|
|
onFolderNavigate?: (folderId: string | null) => void;
|
|
layout?: 'default' | 'compact';
|
|
}
|
|
|
|
interface MetaItem {
|
|
key: string;
|
|
label: string;
|
|
valueContent?: React.ReactNode | null;
|
|
fallbackValue?: string | null;
|
|
error?: string | null;
|
|
}
|
|
|
|
export const sortCorrespondents = (entries = []) =>
|
|
entries
|
|
.filter((entry) => entry && entry.name)
|
|
.map(({ id, name, count }) => ({ id, name, count }))
|
|
.sort((a, b) => a.name.localeCompare(b.name));
|
|
|
|
export const buildCorrespondentOptions = (entries = []) => {
|
|
const seen = new Set();
|
|
return entries.reduce((options, entry) => {
|
|
const name = entry?.name?.trim?.() || '';
|
|
if (!name) {
|
|
return options;
|
|
}
|
|
const key = name.toLowerCase();
|
|
if (seen.has(key)) {
|
|
return options;
|
|
}
|
|
seen.add(key);
|
|
options.push(name);
|
|
return options;
|
|
}, []);
|
|
};
|
|
|
|
const normalizeOptions = <T,>(options?: T[] | null): T[] => (Array.isArray(options) ? options : []);
|
|
|
|
interface QuickAddOption {
|
|
id?: Identifier;
|
|
label?: string;
|
|
name?: string;
|
|
[key: string]: unknown;
|
|
}
|
|
|
|
interface QuickAddEntry {
|
|
id: Identifier | string;
|
|
label: string;
|
|
original: QuickAddOption | string;
|
|
}
|
|
|
|
const resolveOptionName = (source?: QuickAddOption | string | null): string => {
|
|
if (!source) {
|
|
return '';
|
|
}
|
|
if (isPlainObject(source)) {
|
|
const raw = source.name ?? source.label ?? '';
|
|
return `${raw}`.trim();
|
|
}
|
|
return `${source}`.trim();
|
|
};
|
|
|
|
const normalizeQuickAddOption = (option?: QuickAddOption | string | null): QuickAddEntry | null => {
|
|
if (option == null) {
|
|
return null;
|
|
}
|
|
const label = (() => {
|
|
if (isPlainObject(option)) {
|
|
const sourceLabel = option.label ?? option.name ?? '';
|
|
return `${sourceLabel}`.trim();
|
|
}
|
|
return `${option}`.trim();
|
|
})();
|
|
if (!label) {
|
|
return null;
|
|
}
|
|
return {
|
|
id: isPlainObject(option) && option.id ? option.id : label,
|
|
label,
|
|
original: option,
|
|
};
|
|
};
|
|
|
|
export const TagSection: React.FC<TagSectionProps> = ({
|
|
tags = [],
|
|
onRemove,
|
|
onAdd,
|
|
emptyMessage = 'No tags yet.',
|
|
addPlaceholder = 'Add or create tag',
|
|
addButtonLabel = 'Add',
|
|
datalistOptions = [],
|
|
className,
|
|
}) => {
|
|
const handleCreate = useCallback(
|
|
(label: string) => onAdd?.({ value: label, input: null }),
|
|
[onAdd],
|
|
);
|
|
|
|
const handleSelect = useCallback(
|
|
(option: { label?: string; name?: string } | string | null) => {
|
|
if (!onAdd) return;
|
|
const label = resolveOptionName(option as QuickAddOption | string | null);
|
|
if (!label) {
|
|
return;
|
|
}
|
|
onAdd({ value: label, option });
|
|
},
|
|
[onAdd],
|
|
);
|
|
|
|
const normalizedOptions = useMemo(
|
|
() =>
|
|
normalizeOptions(datalistOptions)
|
|
.map((option) => normalizeQuickAddOption(option))
|
|
.filter((option): option is QuickAddEntry => Boolean(option)),
|
|
[datalistOptions],
|
|
);
|
|
const containerClass = className ? `tag-list ${className}` : 'tag-list';
|
|
const showQuickAdd = Boolean(onAdd);
|
|
|
|
const assignmentItems = useMemo<SelectionAssignmentMenuItem[]>(() => {
|
|
const map = new Map<string, SelectionAssignmentMenuItem>();
|
|
|
|
normalizedOptions.forEach((option) => {
|
|
const label = option?.label?.trim();
|
|
if (!label) {
|
|
return;
|
|
}
|
|
const key = label.toLowerCase();
|
|
if (map.has(key)) {
|
|
return;
|
|
}
|
|
map.set(key, {
|
|
id: option.id ?? label,
|
|
label,
|
|
state: 'none',
|
|
payload: option.original ?? { label },
|
|
});
|
|
});
|
|
|
|
tags.forEach((tag) => {
|
|
const label = tag?.label?.trim?.() || '';
|
|
if (!label) {
|
|
return;
|
|
}
|
|
const key = label.toLowerCase();
|
|
const payload = { id: tag.id, label, color: tag.color ?? null };
|
|
if (map.has(key)) {
|
|
const entry = map.get(key);
|
|
if (entry) {
|
|
entry.state = 'all';
|
|
entry.payload = payload;
|
|
}
|
|
return;
|
|
}
|
|
map.set(key, {
|
|
id: tag.id ?? label,
|
|
label,
|
|
state: 'all',
|
|
payload,
|
|
});
|
|
});
|
|
|
|
return Array.from(map.values());
|
|
}, [normalizedOptions, tags]);
|
|
|
|
const handleAssignmentSelect = useCallback(
|
|
(item: NormalizedSelectionAssignmentItem) => {
|
|
if (!item) {
|
|
return;
|
|
}
|
|
if (item.state === 'all' && onRemove) {
|
|
const payload = isPlainObject(item.payload)
|
|
? (item.payload as TagEntry)
|
|
: tags.find((tag) => (tag.id ?? tag.label) === item.id) ?? { id: item.id, label: item.label };
|
|
onRemove(payload);
|
|
return;
|
|
}
|
|
const payload = item.payload ?? { label: item.label };
|
|
handleSelect(payload);
|
|
},
|
|
[handleSelect, onRemove, tags],
|
|
);
|
|
|
|
return (
|
|
<div className={containerClass}>
|
|
{tags.map((tag) => {
|
|
const key = tag.id ?? tag.label;
|
|
const style = getTagColorStyle(tag.color);
|
|
return (
|
|
<span key={key} className="badge tag-chip" style={style || undefined}>
|
|
<span className="tag-chip__label">{tag.label}</span>
|
|
{onRemove ? (
|
|
<button
|
|
type="button"
|
|
className="tag-chip__remove"
|
|
onClick={() => onRemove(tag)}
|
|
aria-label={`Remove tag ${tag.label}`}
|
|
>
|
|
<IconX className="icon-inline" aria-hidden="true" />
|
|
</button>
|
|
) : null}
|
|
</span>
|
|
);
|
|
})}
|
|
{showQuickAdd ? (
|
|
<SelectionAssignmentMenu
|
|
label="Add tag"
|
|
items={assignmentItems}
|
|
placeholder={addPlaceholder}
|
|
emptyMessage="No tags"
|
|
createLabel={addButtonLabel}
|
|
onToggle={handleAssignmentSelect}
|
|
onCreate={handleCreate}
|
|
showStateIndicators
|
|
showCounts={false}
|
|
positionStrategy="fixed"
|
|
triggerClassName="quick-add__chip quick-add__trigger"
|
|
triggerContent={<PlusIcon className="icon-inline" aria-hidden="true" />}
|
|
closeOnSelection={false}
|
|
freezeSortOnOpen
|
|
/>
|
|
) : null}
|
|
{!tags.length && !showQuickAdd ? <span className="tag-list__empty meta">{emptyMessage}</span> : null}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export const CorrespondentSection: React.FC<CorrespondentSectionProps> = ({
|
|
entries = [],
|
|
onRemove,
|
|
onAdd,
|
|
showCount = false,
|
|
addPlaceholder = 'Add or create correspondent',
|
|
addButtonLabel = 'Add',
|
|
datalistOptions = [],
|
|
className,
|
|
}) => {
|
|
const handleCreate = useCallback(
|
|
(name: string) => onAdd?.({ name, input: null }),
|
|
[onAdd],
|
|
);
|
|
|
|
const normalizedOptions = useMemo(
|
|
() =>
|
|
normalizeOptions(datalistOptions)
|
|
.map((option) => normalizeQuickAddOption(option))
|
|
.filter((option): option is QuickAddEntry => Boolean(option)),
|
|
[datalistOptions],
|
|
);
|
|
const hasEntries = entries && entries.length > 0;
|
|
const showQuickAdd = Boolean(onAdd);
|
|
const containerClass = className ? `correspondent-list ${className}` : 'correspondent-list';
|
|
|
|
const assignmentItems = useMemo<SelectionAssignmentMenuItem[]>(() => {
|
|
const map = new Map<string, SelectionAssignmentMenuItem>();
|
|
|
|
normalizedOptions.forEach((option) => {
|
|
const label = option?.label?.trim();
|
|
if (!label) {
|
|
return;
|
|
}
|
|
const key = label.toLowerCase();
|
|
if (map.has(key)) {
|
|
return;
|
|
}
|
|
map.set(key, {
|
|
id: option.id ?? label,
|
|
label,
|
|
state: 'none',
|
|
payload: option.original ?? { name: label },
|
|
});
|
|
});
|
|
|
|
entries.forEach((entry) => {
|
|
const label = entry?.name?.trim?.() || '';
|
|
if (!label) {
|
|
return;
|
|
}
|
|
const key = label.toLowerCase();
|
|
const payload = { id: entry.id, name: label };
|
|
if (map.has(key)) {
|
|
const item = map.get(key);
|
|
if (item) {
|
|
item.state = 'all';
|
|
item.payload = payload;
|
|
}
|
|
return;
|
|
}
|
|
map.set(key, {
|
|
id: entry.id ?? label,
|
|
label,
|
|
state: 'all',
|
|
payload,
|
|
});
|
|
});
|
|
|
|
return Array.from(map.values());
|
|
}, [normalizedOptions, entries]);
|
|
|
|
const handleAssignmentSelect = useCallback(
|
|
(item: NormalizedSelectionAssignmentItem) => {
|
|
if (!item) {
|
|
return;
|
|
}
|
|
if (item.state === 'all' && onRemove) {
|
|
const payload = isPlainObject(item.payload)
|
|
? (item.payload as CorrespondentEntry)
|
|
: entries.find((entry) => (entry.id ?? entry.name) === item.id) ?? { id: item.id, name: item.label };
|
|
onRemove(payload);
|
|
return;
|
|
}
|
|
if (!onAdd) {
|
|
return;
|
|
}
|
|
const source = (item.payload ?? item) as QuickAddOption | string | null;
|
|
const resolvedName = resolveOptionName(source);
|
|
if (!resolvedName) {
|
|
return;
|
|
}
|
|
const payload = isPlainObject(source)
|
|
? { ...source, name: resolvedName }
|
|
: { id: null, name: resolvedName };
|
|
onAdd({ name: resolvedName, option: payload, input: null });
|
|
},
|
|
[entries, onAdd, onRemove],
|
|
);
|
|
|
|
return (
|
|
<div className={containerClass}>
|
|
{hasEntries
|
|
? entries.map((entry) => {
|
|
const key = entry.id ?? entry.name;
|
|
return (
|
|
<span key={key} className="correspondent-pill">
|
|
<span className="correspondent-pill__label">
|
|
{entry.name}
|
|
{showCount && entry.count ? ` (${entry.count})` : ''}
|
|
</span>
|
|
{onRemove ? (
|
|
<button
|
|
type="button"
|
|
className="correspondent-pill__remove"
|
|
onClick={() => onRemove(entry)}
|
|
aria-label={`Remove ${entry.name}`}
|
|
>
|
|
<IconX className="icon-inline" aria-hidden="true" />
|
|
</button>
|
|
) : null}
|
|
</span>
|
|
);
|
|
})
|
|
: !showQuickAdd && <span className="meta">No correspondents yet.</span>}
|
|
{showQuickAdd ? (
|
|
<SelectionAssignmentMenu
|
|
label="Add correspondent"
|
|
items={assignmentItems}
|
|
placeholder={addPlaceholder}
|
|
emptyMessage="No correspondents"
|
|
createLabel={addButtonLabel}
|
|
onToggle={handleAssignmentSelect}
|
|
onCreate={handleCreate}
|
|
showStateIndicators
|
|
showCounts={false}
|
|
positionStrategy="fixed"
|
|
triggerClassName="quick-add__chip quick-add__trigger"
|
|
triggerContent={<PlusIcon className="icon-inline" aria-hidden="true" />}
|
|
closeOnSelection={false}
|
|
freezeSortOnOpen
|
|
/>
|
|
) : null}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const DocumentSummarySection: React.FC<DocumentSummarySectionProps> = ({
|
|
document,
|
|
tagLookupById = new Map(),
|
|
tagOptions = [],
|
|
onTagAdd,
|
|
onTagRemove,
|
|
correspondents,
|
|
correspondentOptions = [],
|
|
onCorrespondentAdd,
|
|
onCorrespondentRemove,
|
|
onUpdateTitle,
|
|
onUpdateIssued,
|
|
onFolderNavigate,
|
|
layout = 'default',
|
|
}) => {
|
|
const folderManager = useFolderManager();
|
|
const isCompactLayout = layout === 'compact';
|
|
const summaryRows = useMemo(() => describeDocumentSummary(document), [document]);
|
|
const issuedDateLabel = useMemo(
|
|
() => formatDate(document?.issued_at, { fallback: null }),
|
|
[document?.issued_at],
|
|
);
|
|
|
|
const editableTitle = Boolean(document && onUpdateTitle);
|
|
const editableIssued = Boolean(document && onUpdateIssued);
|
|
|
|
const resolvedTags = useMemo(() => {
|
|
if (!Array.isArray(document?.tags)) {
|
|
return [];
|
|
}
|
|
return document.tags.map((tag) => ({
|
|
id: tag.id,
|
|
label: tag.label,
|
|
color: tag.color ?? tagLookupById.get(tag.id)?.color ?? null,
|
|
}));
|
|
}, [document?.tags, tagLookupById]);
|
|
|
|
const resolvedCorrespondents = useMemo(() => {
|
|
if (Array.isArray(correspondents) && correspondents.length) {
|
|
return correspondents;
|
|
}
|
|
return sortCorrespondents(document?.correspondents || []);
|
|
}, [correspondents, document?.correspondents]);
|
|
|
|
const extraSummaryRows = useMemo(() => {
|
|
const rows: DocumentSummaryRow[] = [];
|
|
const currentVersionNumber = document?.current_version?.version_number;
|
|
if (Number.isFinite(currentVersionNumber)) {
|
|
rows.push({
|
|
key: 'current-version',
|
|
label: 'Current version',
|
|
value: `#${currentVersionNumber}`,
|
|
});
|
|
}
|
|
return rows;
|
|
}, [document?.current_version?.version_number]);
|
|
|
|
const resolvedFolderId = document?.folder_id ?? null;
|
|
|
|
const [folderName, setFolderName] = useState<string | null>(() => folderManager.getNameSync(resolvedFolderId));
|
|
|
|
useEffect(() => {
|
|
let active = true;
|
|
const cached = folderManager.getNameSync(resolvedFolderId);
|
|
setFolderName(cached);
|
|
if (!cached && resolvedFolderId != null) {
|
|
folderManager.resolveName(resolvedFolderId).then((name) => {
|
|
if (active) {
|
|
setFolderName(name);
|
|
}
|
|
}).catch(() => {});
|
|
}
|
|
return () => {
|
|
active = false;
|
|
};
|
|
}, [resolvedFolderId, folderManager]);
|
|
|
|
const folderHref = resolvedFolderId == null ? '/documents' : `/documents/folder/${resolvedFolderId}`;
|
|
|
|
const handleFolderClick = useCallback(
|
|
(event: React.MouseEvent) => {
|
|
if (!onFolderNavigate) {
|
|
return;
|
|
}
|
|
event.preventDefault();
|
|
onFolderNavigate(resolvedFolderId);
|
|
},
|
|
[onFolderNavigate, resolvedFolderId],
|
|
);
|
|
|
|
const [titleDraft, setTitleDraft] = useState('');
|
|
const [titleSaving, setTitleSaving] = useState(false);
|
|
const [titleError, setTitleError] = useState(null);
|
|
const [isTitleEditing, setIsTitleEditing] = useState(false);
|
|
|
|
const [issuedDraft, setIssuedDraft] = useState('');
|
|
const [issuedSaving, setIssuedSaving] = useState(false);
|
|
const [issuedError, setIssuedError] = useState(null);
|
|
const [isIssuedEditing, setIsIssuedEditing] = useState(false);
|
|
|
|
useEffect(() => {
|
|
setIsTitleEditing(false);
|
|
setTitleDraft('');
|
|
setTitleError(null);
|
|
setTitleSaving(false);
|
|
|
|
setIsIssuedEditing(false);
|
|
setIssuedDraft('');
|
|
setIssuedError(null);
|
|
setIssuedSaving(false);
|
|
}, [document?.id]);
|
|
|
|
const startTitleEdit = useCallback(() => {
|
|
if (!editableTitle || !document) return;
|
|
setIsTitleEditing(true);
|
|
setTitleDraft(document.title || '');
|
|
setTitleError(null);
|
|
}, [document, editableTitle]);
|
|
|
|
const cancelTitleEdit = useCallback(() => {
|
|
setIsTitleEditing(false);
|
|
setTitleDraft('');
|
|
setTitleError(null);
|
|
setTitleSaving(false);
|
|
}, []);
|
|
|
|
const submitTitleEdit = useCallback(
|
|
async (event: FormEvent<HTMLFormElement>) => {
|
|
event.preventDefault();
|
|
if (!editableTitle || !document || !onUpdateTitle) return;
|
|
const trimmed = titleDraft.trim();
|
|
if (!trimmed) {
|
|
setTitleError('Title cannot be empty.');
|
|
return;
|
|
}
|
|
setTitleSaving(true);
|
|
try {
|
|
const ok = await onUpdateTitle(document.id, trimmed);
|
|
if (ok) {
|
|
cancelTitleEdit();
|
|
} else {
|
|
setTitleError('Failed to update title.');
|
|
}
|
|
} finally {
|
|
setTitleSaving(false);
|
|
}
|
|
},
|
|
[cancelTitleEdit, document, editableTitle, onUpdateTitle, titleDraft],
|
|
);
|
|
|
|
const startIssuedEdit = useCallback(() => {
|
|
if (!editableIssued || !document) return;
|
|
setIsIssuedEditing(true);
|
|
setIssuedDraft(toDateInputValue(document.issued_at));
|
|
setIssuedError(null);
|
|
}, [document, editableIssued]);
|
|
|
|
const cancelIssuedEdit = useCallback(() => {
|
|
setIsIssuedEditing(false);
|
|
setIssuedDraft('');
|
|
setIssuedError(null);
|
|
setIssuedSaving(false);
|
|
}, []);
|
|
|
|
const submitIssuedEdit = useCallback(
|
|
async (event: FormEvent<HTMLFormElement>) => {
|
|
event.preventDefault();
|
|
if (!editableIssued || !document || !onUpdateIssued) return;
|
|
const normalizedValue = issuedDraft ? toIssuedTimestamp(issuedDraft, document.issued_at) : null;
|
|
setIssuedSaving(true);
|
|
try {
|
|
const ok = await onUpdateIssued(document.id, normalizedValue);
|
|
if (ok) {
|
|
cancelIssuedEdit();
|
|
} else {
|
|
setIssuedError('Failed to update issued date.');
|
|
}
|
|
} finally {
|
|
setIssuedSaving(false);
|
|
}
|
|
},
|
|
[cancelIssuedEdit, document, editableIssued, issuedDraft, onUpdateIssued],
|
|
);
|
|
|
|
if (!document) {
|
|
return null;
|
|
}
|
|
|
|
const renderTitleEditForm = (extraClassName?: string) => (
|
|
<form className={`doc-title-edit${extraClassName ? ` ${extraClassName}` : ''}`} onSubmit={submitTitleEdit}>
|
|
<input
|
|
value={titleDraft}
|
|
onChange={(event) => {
|
|
setTitleDraft(event.target.value);
|
|
if (titleError) {
|
|
setTitleError(null);
|
|
}
|
|
}}
|
|
onKeyDown={(event) => {
|
|
if (event.key === 'Escape') {
|
|
event.preventDefault();
|
|
cancelTitleEdit();
|
|
}
|
|
}}
|
|
aria-label="Document title"
|
|
autoFocus
|
|
disabled={titleSaving}
|
|
/>
|
|
<button type="submit" className="icon-button icon-button--accent" disabled={titleSaving} aria-label="Save title">
|
|
<CheckIcon size={16} />
|
|
</button>
|
|
<button
|
|
type="button"
|
|
className="icon-button"
|
|
onClick={cancelTitleEdit}
|
|
disabled={titleSaving}
|
|
aria-label="Cancel"
|
|
>
|
|
<IconX size={16} />
|
|
</button>
|
|
</form>
|
|
);
|
|
|
|
const titleMetaDisplay = editableTitle && isTitleEditing
|
|
? renderTitleEditForm('doc-title-edit--inline')
|
|
: (
|
|
<>
|
|
<span className="detail-meta__value">{document?.title}</span>
|
|
{editableTitle ? (
|
|
<button
|
|
type="button"
|
|
className="icon-button"
|
|
onClick={startTitleEdit}
|
|
aria-label="Edit title"
|
|
title="Edit title"
|
|
>
|
|
<EditIcon className="icon-inline" />
|
|
</button>
|
|
) : null}
|
|
</>
|
|
);
|
|
|
|
const issuedDisplay = editableIssued && isIssuedEditing ? (
|
|
<form className="doc-issued-edit" onSubmit={submitIssuedEdit}>
|
|
<input
|
|
type="date"
|
|
value={issuedDraft}
|
|
onChange={(event) => {
|
|
setIssuedDraft(event.target.value);
|
|
if (issuedError) {
|
|
setIssuedError(null);
|
|
}
|
|
}}
|
|
aria-label="Issued on"
|
|
disabled={issuedSaving}
|
|
/>
|
|
<button type="submit" className="icon-button icon-button--accent" disabled={issuedSaving} aria-label="Save issued date">
|
|
<CheckIcon size={16} />
|
|
</button>
|
|
<button
|
|
type="button"
|
|
className="icon-button"
|
|
onClick={cancelIssuedEdit}
|
|
disabled={issuedSaving}
|
|
aria-label="Cancel"
|
|
>
|
|
<IconX size={16} />
|
|
</button>
|
|
</form>
|
|
) : (
|
|
<>
|
|
<span className="detail-meta__value">{issuedDateLabel || 'Not set'}</span>
|
|
{editableIssued ? (
|
|
<button
|
|
type="button"
|
|
className="icon-button"
|
|
onClick={startIssuedEdit}
|
|
aria-label={issuedDateLabel ? 'Edit issued date' : 'Set issued date'}
|
|
title={issuedDateLabel ? 'Edit issued date' : 'Set issued date'}
|
|
>
|
|
<EditIcon className="icon-inline" />
|
|
</button>
|
|
) : null}
|
|
</>
|
|
);
|
|
|
|
const tagsValueContent = (
|
|
<TagSection
|
|
tags={resolvedTags}
|
|
onRemove={
|
|
onTagRemove
|
|
? (tag) => onTagRemove(document.id, tag.id)
|
|
: undefined
|
|
}
|
|
onAdd={
|
|
onTagAdd
|
|
? ({ value, option }) => onTagAdd(document, value, { option })
|
|
: undefined
|
|
}
|
|
datalistOptions={tagOptions}
|
|
className="document-summary__tags"
|
|
/>
|
|
);
|
|
|
|
const correspondentsValueContent = (
|
|
<CorrespondentSection
|
|
entries={resolvedCorrespondents}
|
|
onRemove={
|
|
onCorrespondentRemove
|
|
? (entry) =>
|
|
onCorrespondentRemove({
|
|
documentId: document.id,
|
|
correspondentId: entry.id,
|
|
})
|
|
: undefined
|
|
}
|
|
onAdd={
|
|
onCorrespondentAdd
|
|
? ({ name, option }) =>
|
|
onCorrespondentAdd({
|
|
document,
|
|
name,
|
|
option,
|
|
})
|
|
: undefined
|
|
}
|
|
showCount
|
|
datalistOptions={correspondentOptions}
|
|
className="document-summary__correspondents"
|
|
/>
|
|
);
|
|
|
|
const folderValueContent = (
|
|
<Link
|
|
className="document-summary__folder-link"
|
|
to={folderHref}
|
|
onClick={handleFolderClick}
|
|
>
|
|
{folderName}
|
|
</Link>
|
|
);
|
|
|
|
const summaryRowOverrides = {
|
|
title: { valueContent: titleMetaDisplay, error: titleError },
|
|
issued: { valueContent: issuedDisplay, error: issuedError },
|
|
tags: { valueContent: tagsValueContent },
|
|
correspondents: { valueContent: correspondentsValueContent },
|
|
folder: { valueContent: folderValueContent },
|
|
} as Record<string, { valueContent?: React.ReactNode | null; error?: string | null }>;
|
|
|
|
const baseRows: MetaItem[] = [...summaryRows, ...extraSummaryRows].map((row) => {
|
|
const overrides = summaryRowOverrides[row.key] || {};
|
|
return {
|
|
key: row.key,
|
|
label: row.label,
|
|
valueContent: overrides.valueContent ?? null,
|
|
fallbackValue: overrides.valueContent ? row.value : row.value,
|
|
error: overrides.error ?? null,
|
|
};
|
|
});
|
|
|
|
const allRows = baseRows;
|
|
const summaryClass = `document-summary${isCompactLayout ? ' document-summary--compact' : ''}`;
|
|
const sectionClass = `document-summary__section document-summary__meta${isCompactLayout ? ' document-summary__meta--compact' : ''}`;
|
|
const listClass = `document-summary__details-list${isCompactLayout ? ' document-summary__details-list--meta' : ''}`;
|
|
|
|
return (
|
|
<div className={summaryClass}>
|
|
<section className={sectionClass}>
|
|
<dl className={listClass}>
|
|
{allRows.map((item) => (
|
|
<div key={item.key} className="document-summary__details-row">
|
|
<dt>{item.label}</dt>
|
|
<dd>
|
|
{item.valueContent != null && item.valueContent !== ''
|
|
? item.valueContent
|
|
: item.fallbackValue || '—'}
|
|
</dd>
|
|
{item.error ? <div className="status-inline error">{item.error}</div> : null}
|
|
</div>
|
|
))}
|
|
</dl>
|
|
</section>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default DocumentSummarySection;
|