This commit is contained in:
2025-10-31 00:38:52 +01:00
parent 39d1d80383
commit 5ca7dc9678
2 changed files with 98 additions and 86 deletions
+77 -58
View File
@@ -665,6 +665,36 @@ const DocumentsTable = ({
const cardClasses = ['document-card', 'document'];
if (isSelected) cardClasses.push('selected');
if (isDraggingDoc) cardClasses.push('is-dragging');
const titleText = doc.title || doc.original_name;
const documentTypeNode = documentType
? (
<span
className={`doc-type-inline${
isDocumentTypeActive ? ' active' : ''
}`}
role={canToggleDocumentType ? 'button' : undefined}
tabIndex={canToggleDocumentType ? 0 : undefined}
onClick={(event) => {
event.stopPropagation();
if (canToggleDocumentType) {
onDocumentTypeClick?.(documentType.id, documentType);
}
}}
onKeyDown={(event) => {
if (event.key === 'Enter' || event.key === ' ') {
event.preventDefault();
event.stopPropagation();
if (canToggleDocumentType) {
onDocumentTypeClick?.(documentType.id, documentType);
}
}
}}
>
({documentType.name})
</span>
)
: null;
return (
<div
key={doc.id}
@@ -688,47 +718,27 @@ const DocumentsTable = ({
document={doc}
ensureAssetUrl={ensureAssetUrl}
getDocumentAsset={getDocumentAsset}
alt={`Thumbnail for ${doc.title || doc.original_name}`}
alt={`Thumbnail for ${titleText}`}
maxSize={gridIconSize}
scrollRootRef={scrollRef}
/>
<div className="document-card__meta">
<div
className="document-card__title"
title={doc.title || doc.original_name}
title={titleText}
>
{documentType ? (
<span
className={`doc-type-label${
isDocumentTypeActive ? ' active' : ''
}`}
role={canToggleDocumentType ? 'button' : undefined}
tabIndex={canToggleDocumentType ? 0 : undefined}
onClick={(event) => {
event.stopPropagation();
if (canToggleDocumentType) {
onDocumentTypeClick?.(documentType.id, documentType);
}
}}
onKeyDown={(event) => {
if (event.key === 'Enter' || event.key === ' ') {
event.preventDefault();
event.stopPropagation();
if (canToggleDocumentType) {
onDocumentTypeClick?.(documentType.id, documentType);
}
}
}}
>
{documentType.name}
</span>
) : null}
{correspondents.length > 0 ? (
<span className="doc-correspondents">
{renderCorrespondentLinks(correspondents)}
</span>
) : null}
<span>{doc.title || doc.original_name}</span>
<span className="doc-name__primary">{titleText}</span>
{documentTypeNode ? (
<>
{' '}
{documentTypeNode}
</>
) : null}
</div>
{visibleTags.length > 0 && (
<div className="document-card__tags">
@@ -917,6 +927,35 @@ const DocumentsTable = ({
const documentType = resolveDocumentType(doc);
const isRowDocumentTypeActive = documentType?.id != null && activeDocumentTypeIdSet.has(documentType.id);
const canToggleRowDocumentType = documentType?.id != null && typeof onDocumentTypeClick === 'function';
const titleText = doc.title || doc.original_name;
const documentTypeNode = documentType
? (
<span
className={`doc-type-inline${
isRowDocumentTypeActive ? ' active' : ''
}`}
role={canToggleRowDocumentType ? 'button' : undefined}
tabIndex={canToggleRowDocumentType ? 0 : undefined}
onClick={(event) => {
event.stopPropagation();
if (canToggleRowDocumentType) {
onDocumentTypeClick?.(documentType.id, documentType);
}
}}
onKeyDown={(event) => {
if (event.key === 'Enter' || event.key === ' ') {
event.preventDefault();
event.stopPropagation();
if (canToggleRowDocumentType) {
onDocumentTypeClick?.(documentType.id, documentType);
}
}
}}
>
({documentType.name})
</span>
)
: null;
return (
<tr
@@ -938,7 +977,7 @@ const DocumentsTable = ({
document={doc}
ensureAssetUrl={ensureAssetUrl}
getDocumentAsset={getDocumentAsset}
alt={`Thumbnail for ${doc.title || doc.original_name}`}
alt={`Thumbnail for ${titleText}`}
scrollRootRef={scrollRef}
/>
</td>
@@ -946,38 +985,18 @@ const DocumentsTable = ({
<div className="doc-name">
<div className="doc-list__name-content">
<span className="doc-name__title">
{documentType ? (
<span
className={`doc-type-label${
isRowDocumentTypeActive ? ' active' : ''
}`}
role={canToggleRowDocumentType ? 'button' : undefined}
tabIndex={canToggleRowDocumentType ? 0 : undefined}
onClick={(event) => {
event.stopPropagation();
if (canToggleRowDocumentType) {
onDocumentTypeClick?.(documentType.id, documentType);
}
}}
onKeyDown={(event) => {
if (event.key === 'Enter' || event.key === ' ') {
event.preventDefault();
event.stopPropagation();
if (canToggleRowDocumentType) {
onDocumentTypeClick?.(documentType.id, documentType);
}
}
}}
>
{documentType.name}
</span>
) : null}
{correspondents.length > 0 ? (
<span className="doc-correspondents">
{renderCorrespondentLinks(correspondents)}
</span>
) : null}
<span>{doc.title || doc.original_name}</span>
<span className="doc-name__primary">{titleText}</span>
{documentTypeNode ? (
<>
{' '}
{documentTypeNode}
</>
) : null}
</span>
</div>
{(doc.tags || []).length > 0 && (
@@ -1058,7 +1077,7 @@ const DocumentsTable = ({
type="button"
className="icon-button"
title="Rename"
aria-label={`Rename document ${doc.title || doc.original_name}`}
aria-label={`Rename document ${titleText}`}
onClick={(event) => {
event.stopPropagation();
const nextName = window.prompt(