nils/papercrate
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

tags, folder rename, other stuff

Browse Source
This commit is contained in:
nils
2025-10-15 21:32:17 +02:00
parent b5119a8e6f
commit 068f96880b
13 changed files with 525 additions and 130 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/documents/DocumentsTable.jsx
+90 -17
View File
@@ -1,7 +1,7 @@
import React, { useCallback, useEffect, useMemo, useRef } from 'react';
import { resolveDocumentAssetUrl } from '../asset_manager';
import { getTagColorStyle } from '../utils/colors';
import { DownloadIcon, FolderIcon } from '../ui/icons';
import { DownloadIcon, FolderIcon, EditIcon } from '../ui/icons';
const FilterBar = ({
query,
@@ -112,6 +112,8 @@ const DocumentsTable = ({
onDocumentDragStart,
onDocumentDragEnd,
onDocumentDelete,
onFolderRename,
onDocumentRename,
filterBar,
tagLookupById,
onDocumentListFocus,
@@ -120,6 +122,7 @@ const DocumentsTable = ({
ensureAssetUrl = null,
getDocumentAsset = () => null,
getDownloadHref,
onTagClick,
}) => {
const showingSearchResults = searchResults !== null;
const rows = showingSearchResults ? searchResults : documents;
@@ -306,7 +309,34 @@ const DocumentsTable = ({
<FolderIcon className="icon-inline" size={18} />
</div>
</td>
<td>{folder.name}</td>
<td className="doc-list__name">
<div className="doc-list__name-content">
<span>{folder.name}</span>
{folder.id !== 'root' && (
<button
type="button"
className="icon-button ghost doc-list__icon-button"
onClick={(event) => {
event.stopPropagation();
if (!onFolderRename) return;
const nextName = window.prompt('Rename folder', folder.name || '');
if (!nextName) {
return;
}
const trimmed = nextName.trim();
if (!trimmed || trimmed === folder.name) {
return;
}
onFolderRename(folder.id, trimmed);
}}
title="Rename folder"
aria-label={`Rename folder ${folder.name}`}
>
<EditIcon className="doc-list__icon" size={16} />
</button>
)}
</div>
</td>
<td>Folder</td>
<td>—</td>
<td className="actions">
@@ -351,25 +381,68 @@ const DocumentsTable = ({
alt={`Thumbnail for ${doc.title || doc.original_name}`}
/>
</td>
<td>
<td className="doc-list__name">
<div className="doc-name">
<span className="doc-name__title">{doc.title || doc.original_name}</span>
<div className="doc-list__name-content">
<span className="doc-name__title">{doc.title || doc.original_name}</span>
<button
type="button"
className="icon-button ghost doc-list__icon-button"
onClick={(event) => {
event.stopPropagation();
if (!onDocumentRename) return;
const nextName = window.prompt(
'Rename document',
doc.title || doc.original_name || '',
);
if (!nextName) {
return;
}
const trimmed = nextName.trim();
if (!trimmed || trimmed === (doc.title || doc.original_name)) {
return;
}
onDocumentRename(doc.id, trimmed);
}}
title="Rename document"
aria-label={`Rename document ${doc.title || doc.original_name}`}
>
<EditIcon className="doc-list__icon" size={16} />
</button>
</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}
>
{tag.label}
</span>
);
})}
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}
onClick={(event) => {
event.stopPropagation();
if (onTagClick) {
onTagClick(tag.id);
}
}}
role="button"
tabIndex={0}
onKeyDown={(event) => {
if (event.key === 'Enter' || event.key === ' ') {
event.preventDefault();
event.stopPropagation();
if (onTagClick) {
onTagClick(tag.id);
}
}
}}
>
{tag.label}
</span>
);
})}
</div>
)}
</div>