T08a: Frontend DMS + Tags + Permissions UI — 33 tests, tsc clean, vite build pass
- DMS file browser: folder tree + file grid + upload dropzone + search + preview modal - DMS share dialog: user/group share + public share links with password+expiry - DMS bulk actions: bulk move + bulk delete with confirm dialogs - DMS trash view: deleted files list with restore button - Tags: TagPicker on company/contact detail pages (new tabs tab) - Tags: TagCloud + BulkTagDialog for bulk tag assignment - Permissions: share link creation, permission display, copy-link button - API clients: dms.ts, tags.ts, permissions.ts - Routes: /dms, /dms/trash added to router - Sidebar: DMS nav link updated - i18n: de.json + en.json translations for DMS/Tags/Permissions - 33 new tests (5 test files), full regression 276/276 pass - tsc --noEmit: 0 errors, vite build: 252 modules
This commit is contained in:
leocrm-bot
@@ -0,0 +1,128 @@
|
||||
/**
|
||||
* Bulk actions bar for DMS file browser.
|
||||
* Shows when files are selected, offers bulk-move and bulk-delete.
|
||||
*/
|
||||
|
||||
import React, { useState } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Button } from '@/components/ui/Button';
|
||||
import { Select } from '@/components/ui/Select';
|
||||
import { ConfirmDialog } from '@/components/ui/ConfirmDialog';
|
||||
import { useToast } from '@/components/ui/Toast';
|
||||
import { bulkMoveFiles, bulkDeleteFiles, type DmsFolder } from '@/api/dms';
|
||||
|
||||
export interface BulkActionsProps {
|
||||
selectedFileIds: Set<string>;
|
||||
folders: DmsFolder[];
|
||||
onClear: () => void;
|
||||
onActionComplete: () => void;
|
||||
}
|
||||
|
||||
export function BulkActions({
|
||||
selectedFileIds,
|
||||
folders,
|
||||
onClear,
|
||||
onActionComplete,
|
||||
}: BulkActionsProps) {
|
||||
const { t } = useTranslation();
|
||||
const toast = useToast();
|
||||
const [showMoveDialog, setShowMoveDialog] = useState(false);
|
||||
const [showDeleteDialog, setShowDeleteDialog] = useState(false);
|
||||
const [targetFolderId, setTargetFolderId] = useState<string>('');
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
|
||||
const selectedCount = selectedFileIds.size;
|
||||
const fileIds = Array.from(selectedFileIds);
|
||||
|
||||
const handleBulkMove = async () => {
|
||||
setSubmitting(true);
|
||||
try {
|
||||
await bulkMoveFiles({
|
||||
file_ids: fileIds,
|
||||
target_folder_id: targetFolderId || null,
|
||||
});
|
||||
toast.success(t('dms.shared'));
|
||||
setShowMoveDialog(false);
|
||||
onClear();
|
||||
onActionComplete();
|
||||
} catch (err) {
|
||||
const msg = err instanceof Error ? err.message : String(err);
|
||||
toast.error(msg);
|
||||
}
|
||||
setSubmitting(false);
|
||||
};
|
||||
|
||||
const handleBulkDelete = async () => {
|
||||
setSubmitting(true);
|
||||
try {
|
||||
await bulkDeleteFiles({ file_ids: fileIds });
|
||||
toast.success(t('dms.deleted'));
|
||||
setShowDeleteDialog(false);
|
||||
onClear();
|
||||
onActionComplete();
|
||||
} catch (err) {
|
||||
const msg = err instanceof Error ? err.message : String(err);
|
||||
toast.error(msg);
|
||||
}
|
||||
setSubmitting(false);
|
||||
};
|
||||
|
||||
if (selectedCount === 0) return null;
|
||||
|
||||
const folderOptions = [
|
||||
{ value: '', label: t('dms.allFiles') },
|
||||
...folders.map((f) => ({ value: f.id, label: f.name })),
|
||||
];
|
||||
|
||||
return (
|
||||
<div
|
||||
className="flex items-center justify-between p-3 bg-primary-50 border border-primary-200 rounded-lg"
|
||||
data-testid="bulk-actions-bar"
|
||||
>
|
||||
<span className="text-sm font-medium text-primary-700">
|
||||
{selectedCount} {t('dms.selected')}
|
||||
</span>
|
||||
<div className="flex items-center gap-2">
|
||||
<Button
|
||||
variant="secondary"
|
||||
size="sm"
|
||||
onClick={() => setShowMoveDialog(true)}
|
||||
>
|
||||
{t('dms.bulkMove')}
|
||||
</Button>
|
||||
<Button
|
||||
variant="danger"
|
||||
size="sm"
|
||||
onClick={() => setShowDeleteDialog(true)}
|
||||
>
|
||||
{t('dms.bulkDelete')}
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={onClear}
|
||||
>
|
||||
{t('dms.cancel')}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<ConfirmDialog
|
||||
open={showMoveDialog}
|
||||
title={t('dms.bulkMoveTitle')}
|
||||
message={t('dms.selectTargetFolder')}
|
||||
confirmLabel={t('dms.bulkMove')}
|
||||
onConfirm={handleBulkMove}
|
||||
onCancel={() => setShowMoveDialog(false)}
|
||||
/>
|
||||
<ConfirmDialog
|
||||
open={showDeleteDialog}
|
||||
title={t('dms.bulkDeleteTitle')}
|
||||
message={t('dms.confirmBulkDelete')}
|
||||
confirmLabel={t('dms.bulkDelete')}
|
||||
variant="danger"
|
||||
onConfirm={handleBulkDelete}
|
||||
onCancel={() => setShowDeleteDialog(false)}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,165 @@
|
||||
/**
|
||||
* File grid for DMS file browser.
|
||||
* Displays files with icons, names, sizes, and action buttons.
|
||||
*/
|
||||
|
||||
import React, { useMemo } from 'react';
|
||||
import clsx from 'clsx';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import type { DmsFile } from '@/api/dms';
|
||||
|
||||
function getFileIcon(mimeType: string): { path: string; color: string } {
|
||||
if (mimeType === 'application/pdf') {
|
||||
return { path: 'M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z', color: 'text-danger-500' };
|
||||
}
|
||||
if (mimeType.startsWith('image/')) {
|
||||
return { path: 'M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z', color: 'text-accent-500' };
|
||||
}
|
||||
if (mimeType.includes('spreadsheet') || mimeType.includes('excel')) {
|
||||
return { path: 'M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z', color: 'text-success-500' };
|
||||
}
|
||||
if (mimeType.includes('presentation') || mimeType.includes('powerpoint')) {
|
||||
return { path: 'M7 8h10M7 16h10M7 12h6m-7 8h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z', color: 'text-warning-500' };
|
||||
}
|
||||
if (mimeType.startsWith('text/') || mimeType.includes('document') || mimeType.includes('word')) {
|
||||
return { path: 'M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z', color: 'text-primary-500' };
|
||||
}
|
||||
if (mimeType.includes('zip') || mimeType.includes('compressed') || mimeType.includes('archive')) {
|
||||
return { path: 'M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4', color: 'text-secondary-500' };
|
||||
}
|
||||
return { path: 'M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z', color: 'text-secondary-400' };
|
||||
}
|
||||
|
||||
function formatFileSize(bytes: number): string {
|
||||
if (bytes < 1024) return `${bytes} B`;
|
||||
if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
|
||||
if (bytes < 1024 * 1024 * 1024) return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
|
||||
return `${(bytes / (1024 * 1024 * 1024)).toFixed(1)} GB`;
|
||||
}
|
||||
|
||||
export interface FileGridProps {
|
||||
files: DmsFile[];
|
||||
selectedFileIds: Set<string>;
|
||||
onToggleSelect: (fileId: string) => void;
|
||||
onFileClick: (file: DmsFile) => void;
|
||||
onFileShare: (file: DmsFile) => void;
|
||||
onFileDelete: (file: DmsFile) => void;
|
||||
onFilePreview: (file: DmsFile) => void;
|
||||
loading?: boolean;
|
||||
}
|
||||
|
||||
export function FileGrid({
|
||||
files,
|
||||
selectedFileIds,
|
||||
onToggleSelect,
|
||||
onFileClick,
|
||||
onFileShare,
|
||||
onFileDelete,
|
||||
onFilePreview,
|
||||
loading = false,
|
||||
}: FileGridProps) {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const sortedFiles = useMemo(() => {
|
||||
return [...files].sort((a, b) => a.name.localeCompare(b.name));
|
||||
}, [files]);
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4" data-testid="file-grid-loading">
|
||||
{[1, 2, 3, 4, 5, 6].map((i) => (
|
||||
<div key={i} className="bg-white rounded-lg border border-secondary-200 p-4 animate-pulse">
|
||||
<div className="h-12 w-12 bg-secondary-100 rounded mb-3" />
|
||||
<div className="h-4 bg-secondary-100 rounded mb-2" />
|
||||
<div className="h-3 bg-secondary-50 rounded w-1/2" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (files.length === 0) {
|
||||
return (
|
||||
<div className="text-center py-12" data-testid="file-grid-empty">
|
||||
<svg className="mx-auto h-12 w-12 text-secondary-300" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
|
||||
</svg>
|
||||
<p className="mt-2 text-sm text-secondary-500">{t('dms.noFiles')}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4" data-testid="file-grid">
|
||||
{sortedFiles.map((file) => {
|
||||
const icon = getFileIcon(file.mime_type);
|
||||
const isSelected = selectedFileIds.has(file.id);
|
||||
return (
|
||||
<div
|
||||
key={file.id}
|
||||
className={clsx(
|
||||
'bg-white rounded-lg border p-4 motion-safe:transition-all cursor-pointer',
|
||||
isSelected ? 'border-primary-500 ring-2 ring-primary-200' : 'border-secondary-200 hover:border-secondary-300 hover:shadow-sm'
|
||||
)}
|
||||
onClick={() => onFileClick(file)}
|
||||
data-testid={`file-card-${file.id}`}
|
||||
>
|
||||
<div className="flex items-start justify-between mb-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={isSelected}
|
||||
onChange={() => onToggleSelect(file.id)}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
className="rounded border-secondary-300 text-primary-600 focus:ring-primary-500"
|
||||
aria-label={t('dms.bulkSelect')}
|
||||
/>
|
||||
<svg className={clsx('w-10 h-10', icon.color)} fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d={icon.path} />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-sm font-medium text-secondary-900 truncate" title={file.name}>{file.name}</p>
|
||||
<div className="mt-1 flex items-center gap-3 text-xs text-secondary-500">
|
||||
<span>{formatFileSize(file.size)}</span>
|
||||
{file.mime_type && <span className="truncate">{file.mime_type.split('/')[1]?.toUpperCase()}</span>}
|
||||
</div>
|
||||
<div className="mt-3 flex items-center gap-1">
|
||||
<button
|
||||
onClick={(e) => { e.stopPropagation(); onFilePreview(file); }}
|
||||
className="p-1.5 rounded text-secondary-400 hover:text-primary-600 hover:bg-primary-50 min-h-touch min-w-touch"
|
||||
aria-label={t('dms.preview')}
|
||||
title={t('dms.preview')}
|
||||
>
|
||||
<svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
|
||||
</svg>
|
||||
</button>
|
||||
<button
|
||||
onClick={(e) => { e.stopPropagation(); onFileShare(file); }}
|
||||
className="p-1.5 rounded text-secondary-400 hover:text-primary-600 hover:bg-primary-50 min-h-touch min-w-touch"
|
||||
aria-label={t('dms.share')}
|
||||
title={t('dms.share')}
|
||||
>
|
||||
<svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8.7 10.7l6.6-3.4M8.7 13.3l6.6 3.4M18 12a3 3 0 11-6 0 3 3 0 016 0zM9 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||
</svg>
|
||||
</button>
|
||||
<button
|
||||
onClick={(e) => { e.stopPropagation(); onFileDelete(file); }}
|
||||
className="p-1.5 rounded text-secondary-400 hover:text-danger-600 hover:bg-danger-50 min-h-touch min-w-touch"
|
||||
aria-label={t('dms.delete')}
|
||||
title={t('dms.delete')}
|
||||
>
|
||||
<svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,108 @@
|
||||
/**
|
||||
* File preview modal for DMS.
|
||||
* Renders PDF files in an iframe via the preview endpoint.
|
||||
* Shows file metadata and download button for non-PDF files.
|
||||
*/
|
||||
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Modal } from '@/components/ui/Modal';
|
||||
import { Button } from '@/components/ui/Button';
|
||||
import { Badge } from '@/components/ui/Badge';
|
||||
import { getFilePreviewUrl, type DmsFile } from '@/api/dms';
|
||||
|
||||
export interface FilePreviewModalProps {
|
||||
open: boolean;
|
||||
file: DmsFile | null;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
function formatFileSize(bytes: number): string {
|
||||
if (bytes < 1024) return `${bytes} B`;
|
||||
if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
|
||||
if (bytes < 1024 * 1024 * 1024) return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
|
||||
return `${(bytes / (1024 * 1024 * 1024)).toFixed(1)} GB`;
|
||||
}
|
||||
|
||||
export function FilePreviewModal({ open, file, onClose }: FilePreviewModalProps) {
|
||||
const { t } = useTranslation();
|
||||
const [previewUrl, setPreviewUrl] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (open && file) {
|
||||
setPreviewUrl(getFilePreviewUrl(file.id));
|
||||
} else {
|
||||
setPreviewUrl(null);
|
||||
}
|
||||
}, [open, file]);
|
||||
|
||||
if (!file) return null;
|
||||
|
||||
const isPdf = file.mime_type === 'application/pdf';
|
||||
const isImage = file.mime_type.startsWith('image/');
|
||||
|
||||
return (
|
||||
<Modal
|
||||
open={open}
|
||||
onClose={onClose}
|
||||
title={file.name}
|
||||
size="xl"
|
||||
data-testid="file-preview-modal"
|
||||
>
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center gap-4 flex-wrap">
|
||||
<Badge variant="info">{file.mime_type.split('/')[1]?.toUpperCase() || t('dms.icon.other')}</Badge>
|
||||
<span className="text-sm text-secondary-500">{formatFileSize(file.size)}</span>
|
||||
{file.created_at && (
|
||||
<span className="text-sm text-secondary-500">
|
||||
{t('dms.fileModified')}: {new Date(file.created_at).toLocaleDateString()}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{isPdf && previewUrl && (
|
||||
<div className="border border-secondary-200 rounded-lg overflow-hidden" data-testid="pdf-preview">
|
||||
<iframe
|
||||
src={previewUrl} className="w-full h-[60vh]"
|
||||
title={file.name} aria-label={t('dms.preview')}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{isImage && previewUrl && (
|
||||
<div className="flex justify-center border border-secondary-200 rounded-lg p-4" data-testid="image-preview">
|
||||
<img
|
||||
src={previewUrl}
|
||||
alt={file.name}
|
||||
className="max-h-[60vh] object-contain"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!isPdf && !isImage && (
|
||||
<div className="text-center py-12" data-testid="no-preview-available">
|
||||
<svg className="mx-auto h-12 w-12 text-secondary-300" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
|
||||
</svg>
|
||||
<p className="mt-2 text-sm text-secondary-500">{t('dms.preview')}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex justify-end gap-3">
|
||||
{previewUrl && (
|
||||
<a
|
||||
href={previewUrl}
|
||||
download={file.name}
|
||||
className="inline-flex items-center px-4 py-2 rounded-md bg-primary-600 text-white text-sm font-medium hover:bg-primary-700 min-h-touch"
|
||||
>
|
||||
{t('dms.download')}
|
||||
</a>
|
||||
)}
|
||||
<Button variant="secondary" onClick={onClose}>
|
||||
{t('dms.cancel')}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,146 @@
|
||||
/**
|
||||
* Folder tree sidebar for DMS file browser.
|
||||
* Renders a hierarchical tree of folders with expand/collapse and selection.
|
||||
*/
|
||||
|
||||
import React, { useState } from 'react';
|
||||
import clsx from 'clsx';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import type { DmsFolder } from '@/api/dms';
|
||||
|
||||
interface FolderTreeItemProps {
|
||||
folder: DmsFolder;
|
||||
level: number;
|
||||
selectedFolderId: string | null;
|
||||
onSelect: (folderId: string | null) => void;
|
||||
}
|
||||
|
||||
function FolderTreeItem({ folder, level, selectedFolderId, onSelect }: FolderTreeItemProps) {
|
||||
const { t } = useTranslation();
|
||||
const [expanded, setExpanded] = useState(true);
|
||||
const hasChildren = folder.children && folder.children.length > 0;
|
||||
const isSelected = selectedFolderId === folder.id;
|
||||
|
||||
return (
|
||||
<li role="treeitem" aria-expanded={hasChildren ? expanded : undefined} aria-selected={isSelected}>
|
||||
<div
|
||||
className={clsx(
|
||||
'flex items-center gap-1 px-2 py-1.5 rounded-md text-sm cursor-pointer min-h-touch',
|
||||
'hover:bg-secondary-100 motion-safe:transition-colors',
|
||||
'focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500',
|
||||
isSelected && 'bg-primary-50 text-primary-700 font-medium'
|
||||
)}
|
||||
style={{ paddingLeft: `${level * 12 + 8}px` }}
|
||||
onClick={() => onSelect(folder.id)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter' || e.key === ' ') {
|
||||
e.preventDefault();
|
||||
onSelect(folder.id);
|
||||
}
|
||||
}}
|
||||
tabIndex={0}
|
||||
role="button"
|
||||
aria-label={folder.name}
|
||||
>
|
||||
{hasChildren && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setExpanded((prev) => !prev);
|
||||
}}
|
||||
className="flex-shrink-0 w-4 h-4 flex items-center justify-center text-secondary-400 hover:text-secondary-600"
|
||||
aria-label={expanded ? t('dms.folders') : t('dms.folders')}
|
||||
>
|
||||
<svg className="w-3 h-3 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d={expanded ? 'M19 9l-7 7-7-7' : 'M9 5l7 7-7 7'} />
|
||||
</svg>
|
||||
</button>
|
||||
)}
|
||||
{!hasChildren && <span className="w-4 flex-shrink-0" aria-hidden="true" />}
|
||||
<svg className="w-4 h-4 text-warning-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z" />
|
||||
</svg>
|
||||
<span className="truncate">{folder.name}</span>
|
||||
{typeof folder.file_count === 'number' && folder.file_count > 0 && (
|
||||
<span className="ml-auto text-xs text-secondary-400">{folder.file_count}</span>
|
||||
)}
|
||||
</div>
|
||||
{hasChildren && expanded && (
|
||||
<ul role="group" className="space-y-0.5">
|
||||
{folder.children!.map((child) => (
|
||||
<FolderTreeItem
|
||||
key={child.id}
|
||||
folder={child}
|
||||
level={level + 1}
|
||||
selectedFolderId={selectedFolderId}
|
||||
onSelect={onSelect}
|
||||
/>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</li>
|
||||
);
|
||||
}
|
||||
|
||||
export interface FolderTreeProps {
|
||||
folders: DmsFolder[];
|
||||
selectedFolderId: string | null;
|
||||
onSelect: (folderId: string | null) => void;
|
||||
loading?: boolean;
|
||||
}
|
||||
|
||||
export function FolderTree({ folders, selectedFolderId, onSelect, loading = false }: FolderTreeProps) {
|
||||
const { t } = useTranslation();
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="space-y-2 p-2" data-testid="folder-tree-loading">
|
||||
{[1, 2, 3].map((i) => (
|
||||
<div key={i} className="h-8 bg-secondary-100 rounded animate-pulse" />
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<nav aria-label={t('dms.folders')} data-testid="folder-tree">
|
||||
<ul role="tree" className="space-y-0.5">
|
||||
<li role="treeitem" aria-selected={selectedFolderId === null}>
|
||||
<div
|
||||
className={clsx(
|
||||
'flex items-center gap-2 px-2 py-1.5 rounded-md text-sm cursor-pointer min-h-touch',
|
||||
'hover:bg-secondary-100 motion-safe:transition-colors',
|
||||
'focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500',
|
||||
selectedFolderId === null && 'bg-primary-50 text-primary-700 font-medium'
|
||||
)}
|
||||
onClick={() => onSelect(null)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter' || e.key === ' ') {
|
||||
e.preventDefault();
|
||||
onSelect(null);
|
||||
}
|
||||
}}
|
||||
tabIndex={0}
|
||||
role="button"
|
||||
aria-label={t('dms.allFiles')}
|
||||
>
|
||||
<svg className="w-4 h-4 text-secondary-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
|
||||
</svg>
|
||||
<span>{t('dms.allFiles')}</span>
|
||||
</div>
|
||||
</li>
|
||||
{folders.map((folder) => (
|
||||
<FolderTreeItem
|
||||
key={folder.id}
|
||||
folder={folder}
|
||||
level={0}
|
||||
selectedFolderId={selectedFolderId}
|
||||
onSelect={onSelect}
|
||||
/>
|
||||
))}
|
||||
</ul>
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,290 @@
|
||||
/**
|
||||
* Share dialog for DMS files.
|
||||
* Allows sharing with users/groups and creating public share links.
|
||||
*/
|
||||
|
||||
import React, { useState, useEffect, useCallback } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Modal } from '@/components/ui/Modal';
|
||||
import { Button } from '@/components/ui/Button';
|
||||
import { Input } from '@/components/ui/Input';
|
||||
import { Select } from '@/components/ui/Select';
|
||||
import { Badge } from '@/components/ui/Badge';
|
||||
import { EmptyState } from '@/components/ui/EmptyState';
|
||||
import { useToast } from '@/components/ui/Toast';
|
||||
import {
|
||||
shareFile,
|
||||
removeShare,
|
||||
type DmsFile,
|
||||
type DmsShare,
|
||||
} from '@/api/dms';
|
||||
import {
|
||||
fetchFilePermissions,
|
||||
grantPermission,
|
||||
revokePermission,
|
||||
createShareLink,
|
||||
revokeShareLink,
|
||||
type FilePermissionEntry,
|
||||
type ShareLinkEntry,
|
||||
} from '@/api/permissions';
|
||||
|
||||
export interface ShareDialogProps {
|
||||
open: boolean;
|
||||
file: DmsFile | null;
|
||||
onClose: () => void;
|
||||
onShared: () => void;
|
||||
}
|
||||
|
||||
export function ShareDialog({ open, file, onClose, onShared }: ShareDialogProps) {
|
||||
const { t } = useTranslation();
|
||||
const toast = useToast();
|
||||
const [shares, setShares] = useState<DmsShare[]>([]);
|
||||
const [permissions, setPermissions] = useState<FilePermissionEntry[]>([]);
|
||||
const [shareLinks, setShareLinks] = useState<ShareLinkEntry[]>([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const [shareType, setShareType] = useState<'user' | 'group'>('user');
|
||||
const [shareId, setShareId] = useState('');
|
||||
const [sharePermission, setSharePermission] = useState<'read' | 'write'>('read');
|
||||
const [linkPassword, setLinkPassword] = useState('');
|
||||
const [linkExpiry, setLinkExpiry] = useState('');
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
|
||||
const loadData = useCallback(async () => {
|
||||
if (!file) return;
|
||||
setLoading(true);
|
||||
try {
|
||||
const perms = await fetchFilePermissions(file.id);
|
||||
setPermissions(perms);
|
||||
} catch {
|
||||
setPermissions([]);
|
||||
}
|
||||
setLoading(false);
|
||||
}, [file]);
|
||||
|
||||
useEffect(() => {
|
||||
if (open && file) {
|
||||
loadData();
|
||||
}
|
||||
}, [open, file, loadData]);
|
||||
|
||||
const handleAddShare = useCallback(async () => {
|
||||
if (!file || !shareId) return;
|
||||
setSubmitting(true);
|
||||
try {
|
||||
const payload: { user_id?: string; group_id?: string; permission: 'read' | 'write' } = {
|
||||
permission: sharePermission,
|
||||
};
|
||||
if (shareType === 'user') payload.user_id = shareId;
|
||||
else payload.group_id = shareId;
|
||||
await shareFile(file.id, payload);
|
||||
toast.success(t('dms.shared'));
|
||||
setShareId('');
|
||||
onShared();
|
||||
loadData();
|
||||
} catch (err) {
|
||||
const msg = err instanceof Error ? err.message : String(err);
|
||||
toast.error(msg);
|
||||
}
|
||||
setSubmitting(false);
|
||||
}, [file, shareId, shareType, sharePermission, toast, t, onShared, loadData]);
|
||||
|
||||
const handleRemovePermission = useCallback(async (userId: string) => {
|
||||
if (!file) return;
|
||||
try {
|
||||
await revokePermission(file.id, userId);
|
||||
toast.success(t('permissions.revoked'));
|
||||
loadData();
|
||||
} catch (err) {
|
||||
const msg = err instanceof Error ? err.message : String(err);
|
||||
toast.error(msg);
|
||||
}
|
||||
}, [file, toast, t, loadData]);
|
||||
|
||||
const handleCreateLink = useCallback(async () => {
|
||||
if (!file) return;
|
||||
setSubmitting(true);
|
||||
try {
|
||||
const payload: { password?: string; expires_at?: string | null } = {};
|
||||
if (linkPassword) payload.password = linkPassword;
|
||||
if (linkExpiry) payload.expires_at = linkExpiry;
|
||||
const link = await createShareLink(file.id, payload);
|
||||
setShareLinks((prev) => [...prev, link]);
|
||||
toast.success(t('permissions.linkCreated'));
|
||||
setLinkPassword('');
|
||||
setLinkExpiry('');
|
||||
onShared();
|
||||
} catch (err) {
|
||||
const msg = err instanceof Error ? err.message : String(err);
|
||||
toast.error(msg);
|
||||
}
|
||||
setSubmitting(false);
|
||||
}, [file, linkPassword, linkExpiry, toast, t, onShared]);
|
||||
|
||||
const handleCopyLink = useCallback((url: string) => {
|
||||
navigator.clipboard.writeText(url).then(() => {
|
||||
toast.success(t('dms.linkCopied'));
|
||||
}).catch(() => {
|
||||
toast.error(t('dms.uploadError'));
|
||||
});
|
||||
}, [toast, t]);
|
||||
|
||||
const handleRevokeLink = useCallback(async (linkId: string) => {
|
||||
try {
|
||||
await revokeShareLink(linkId);
|
||||
setShareLinks((prev) => prev.filter((l) => l.id !== linkId));
|
||||
toast.success(t('permissions.linkRevoked'));
|
||||
} catch (err) {
|
||||
const msg = err instanceof Error ? err.message : String(err);
|
||||
toast.error(msg);
|
||||
}
|
||||
}, [toast, t]);
|
||||
|
||||
if (!file) return null;
|
||||
|
||||
return (
|
||||
<Modal
|
||||
open={open}
|
||||
onClose={onClose}
|
||||
title={t('dms.shareWith')}
|
||||
size="lg"
|
||||
data-testid="share-dialog"
|
||||
>
|
||||
<div className="space-y-6">
|
||||
{/* Add share section */}
|
||||
<div className="space-y-3" data-testid="share-add-section">
|
||||
<h3 className="text-sm font-semibold text-secondary-900">{t('dms.addShare')}</h3>
|
||||
<div className="flex items-center gap-3 flex-wrap">
|
||||
<Select
|
||||
label={t('dms.userOrGroup')}
|
||||
options={[
|
||||
{ value: 'user', label: t('permissions.user') },
|
||||
{ value: 'group', label: t('permissions.group') },
|
||||
]}
|
||||
value={shareType}
|
||||
onChange={(e) => setShareType(e.target.value as 'user' | 'group')}
|
||||
/>
|
||||
<Input
|
||||
label={shareType === 'user' ? t('dms.userId') : t('dms.groupId')}
|
||||
value={shareId}
|
||||
onChange={(e) => setShareId(e.target.value)}
|
||||
placeholder={shareType === 'user' ? t('dms.userId') : t('dms.groupId')}
|
||||
/>
|
||||
<Select
|
||||
label={t('dms.permissionLevel')}
|
||||
options={[
|
||||
{ value: 'read', label: t('permissions.permissionRead') },
|
||||
{ value: 'write', label: t('permissions.permissionWrite') },
|
||||
]}
|
||||
value={sharePermission}
|
||||
onChange={(e) => setSharePermission(e.target.value as 'read' | 'write')}
|
||||
/>
|
||||
</div>
|
||||
<Button
|
||||
onClick={handleAddShare}
|
||||
isLoading={submitting}
|
||||
disabled={!shareId}
|
||||
size="sm"
|
||||
>
|
||||
{t('dms.addShare')}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Current permissions */}
|
||||
<div className="space-y-2" data-testid="share-permissions-list">
|
||||
<h3 className="text-sm font-semibold text-secondary-900">{t('permissions.filePermissions')}</h3>
|
||||
{loading ? (
|
||||
<p className="text-sm text-secondary-500">{t('dms.loading')}...</p>
|
||||
) : permissions.length === 0 ? (
|
||||
<EmptyState title={t('permissions.noPermissions')} />
|
||||
) : (
|
||||
<ul className="space-y-2" role="list">
|
||||
{permissions.map((perm) => (
|
||||
<li key={perm.id} className="flex items-center justify-between p-3 bg-secondary-50 rounded-md">
|
||||
<div className="flex items-center gap-3">
|
||||
<Badge variant={perm.permission === 'write' ? 'warning' : 'info'}>
|
||||
{perm.permission === 'read' ? t('permissions.permissionRead') : t('permissions.permissionWrite')}
|
||||
</Badge>
|
||||
<span className="text-sm text-secondary-700">
|
||||
{perm.user_name || perm.group_name || perm.user_id || perm.group_id}
|
||||
</span>
|
||||
</div>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => perm.user_id && handleRemovePermission(perm.user_id)}
|
||||
>
|
||||
{t('dms.removeShare')}
|
||||
</Button>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Public share link section */}
|
||||
<div className="space-y-3 border-t border-secondary-200 pt-4" data-testid="share-link-section">
|
||||
<h3 className="text-sm font-semibold text-secondary-900">{t('dms.shareLink')}</h3>
|
||||
<div className="flex items-center gap-3 flex-wrap">
|
||||
<Input
|
||||
label={t('dms.password')}
|
||||
type="password"
|
||||
value={linkPassword}
|
||||
onChange={(e) => setLinkPassword(e.target.value)}
|
||||
placeholder={t('dms.password')}
|
||||
/>
|
||||
<Input
|
||||
label={t('dms.expiryDate')}
|
||||
type="date"
|
||||
value={linkExpiry}
|
||||
onChange={(e) => setLinkExpiry(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<Button
|
||||
onClick={handleCreateLink}
|
||||
isLoading={submitting}
|
||||
size="sm"
|
||||
>
|
||||
{t('dms.createShareLink')}
|
||||
</Button>
|
||||
|
||||
{shareLinks.length > 0 && (
|
||||
<ul className="space-y-2" role="list" data-testid="share-links-list">
|
||||
{shareLinks.map((link) => (
|
||||
<li key={link.id} className="flex items-center justify-between p-3 bg-secondary-50 rounded-md">
|
||||
<div className="flex items-center gap-2 flex-1 min-w-0">
|
||||
<span className="text-sm text-secondary-700 truncate">{link.url}</span>
|
||||
{link.password_protected && (
|
||||
<Badge variant="warning">{t('permissions.passwordProtected')}</Badge>
|
||||
)}
|
||||
{link.expires_at && (
|
||||
<Badge variant="info">
|
||||
{t('permissions.expiresAt')}: {new Date(link.expires_at).toLocaleDateString()}
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex items-center gap-2 flex-shrink-0">
|
||||
<Button
|
||||
variant="secondary"
|
||||
size="sm"
|
||||
onClick={() => handleCopyLink(link.url)}
|
||||
>
|
||||
{t('dms.copyLink')}
|
||||
</Button>
|
||||
<Button
|
||||
variant="danger"
|
||||
size="sm"
|
||||
onClick={() => handleRevokeLink(link.id)}
|
||||
>
|
||||
{t('dms.delete')}
|
||||
</Button>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,165 @@
|
||||
/**
|
||||
* Upload dropzone for DMS file browser.
|
||||
* Supports drag-and-drop and click-to-select file uploads with progress.
|
||||
*/
|
||||
|
||||
import React, { useCallback, useRef, useState } from 'react';
|
||||
import clsx from 'clsx';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { uploadFile } from '@/api/dms';
|
||||
import { useToast } from '@/components/ui/Toast';
|
||||
|
||||
export interface UploadDropzoneProps {
|
||||
folderId: string | null;
|
||||
onUploaded: () => void;
|
||||
}
|
||||
|
||||
interface UploadProgress {
|
||||
fileName: string;
|
||||
progress: number;
|
||||
error: string | null;
|
||||
}
|
||||
|
||||
export function UploadDropzone({ folderId, onUploaded }: UploadDropzoneProps) {
|
||||
const { t } = useTranslation();
|
||||
const toast = useToast();
|
||||
const inputRef = useRef<HTMLInputElement>(null);
|
||||
const [isDragging, setIsDragging] = useState(false);
|
||||
const [uploads, setUploads] = useState<UploadProgress[]>([]);
|
||||
const [isUploading, setIsUploading] = useState(false);
|
||||
|
||||
const handleFiles = useCallback(async (fileList: FileList) => {
|
||||
const files = Array.from(fileList);
|
||||
if (files.length === 0) return;
|
||||
|
||||
setIsUploading(true);
|
||||
const progressEntries = files.map((f) => ({ fileName: f.name, progress: 0, error: null as string | null }));
|
||||
setUploads(progressEntries);
|
||||
|
||||
let allSuccess = true;
|
||||
for (let i = 0; i < files.length; i++) {
|
||||
const file = files[i];
|
||||
try {
|
||||
setUploads((prev) => prev.map((u, idx) => idx === i ? { ...u, progress: 50 } : u));
|
||||
await uploadFile(file, folderId);
|
||||
setUploads((prev) => prev.map((u, idx) => idx === i ? { ...u, progress: 100 } : u));
|
||||
} catch (err) {
|
||||
allSuccess = false;
|
||||
const errorMsg = err instanceof Error ? err.message : String(err);
|
||||
setUploads((prev) => prev.map((u, idx) => idx === i ? { ...u, error: errorMsg } : u));
|
||||
}
|
||||
}
|
||||
|
||||
setIsUploading(false);
|
||||
if (allSuccess) {
|
||||
toast.success(t('dms.uploadSuccess'));
|
||||
} else {
|
||||
toast.error(t('dms.uploadError'));
|
||||
}
|
||||
onUploaded();
|
||||
setTimeout(() => setUploads([]), 3000);
|
||||
}, [folderId, onUploaded, toast, t]);
|
||||
|
||||
const handleDragOver = useCallback((e: React.DragEvent) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
setIsDragging(true);
|
||||
}, []);
|
||||
|
||||
const handleDragLeave = useCallback((e: React.DragEvent) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
setIsDragging(false);
|
||||
}, []);
|
||||
|
||||
const handleDrop = useCallback((e: React.DragEvent) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
setIsDragging(false);
|
||||
if (e.dataTransfer.files.length > 0) {
|
||||
handleFiles(e.dataTransfer.files);
|
||||
}
|
||||
}, [handleFiles]);
|
||||
|
||||
const handleClick = useCallback(() => {
|
||||
inputRef.current?.click();
|
||||
}, []);
|
||||
|
||||
const handleInputChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
if (e.target.files && e.target.files.length > 0) {
|
||||
handleFiles(e.target.files);
|
||||
e.target.value = '';
|
||||
}
|
||||
}, [handleFiles]);
|
||||
|
||||
return (
|
||||
<div data-testid="upload-dropzone">
|
||||
<div
|
||||
className={clsx(
|
||||
'border-2 border-dashed rounded-lg p-8 text-center cursor-pointer motion-safe:transition-all',
|
||||
'focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500',
|
||||
isDragging
|
||||
? 'border-primary-500 bg-primary-50'
|
||||
: 'border-secondary-300 hover:border-secondary-400 bg-secondary-50'
|
||||
)}
|
||||
onDragOver={handleDragOver}
|
||||
onDragLeave={handleDragLeave}
|
||||
onDrop={handleDrop}
|
||||
onClick={handleClick}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter' || e.key === ' ') {
|
||||
e.preventDefault();
|
||||
handleClick();
|
||||
}
|
||||
}}
|
||||
tabIndex={0}
|
||||
role="button"
|
||||
aria-label={t('dms.uploadDropHere')}
|
||||
>
|
||||
<input
|
||||
ref={inputRef}
|
||||
type="file"
|
||||
multiple
|
||||
onChange={handleInputChange}
|
||||
className="hidden"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<svg className="mx-auto h-10 w-10 text-secondary-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
|
||||
</svg>
|
||||
<p className="mt-2 text-sm text-secondary-600">{t('dms.uploadDropHere')}</p>
|
||||
</div>
|
||||
{uploads.length > 0 && (
|
||||
<div className="mt-4 space-y-2" data-testid="upload-progress-list">
|
||||
{uploads.map((u, i) => (
|
||||
<div key={i} className="bg-white rounded-md border border-secondary-200 p-3">
|
||||
<div className="flex items-center justify-between mb-1">
|
||||
<span className="text-sm text-secondary-700 truncate">{u.fileName}</span>
|
||||
{u.error ? (
|
||||
<span className="text-xs text-danger-600">{u.error}</span>
|
||||
) : (
|
||||
<span className="text-xs text-secondary-500">{u.progress}%</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="h-2 bg-secondary-100 rounded-full overflow-hidden">
|
||||
<div
|
||||
className={clsx('h-full rounded-full transition-all', u.error ? 'bg-danger-500' : 'bg-primary-500')}
|
||||
style={{ width: `${u.error ? 100 : u.progress}%` }}
|
||||
role="progressbar"
|
||||
aria-valuenow={u.error ? 100 : u.progress}
|
||||
aria-valuemin={0}
|
||||
aria-valuemax={100}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
{isUploading && (
|
||||
<div className="mt-2 text-sm text-secondary-500" data-testid="upload-indicator">
|
||||
{t('dms.uploading')}...
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user