@hed-hog/operations 0.0.330 → 0.0.332

package/hedhog/frontend/app/_components/project-file-attachments.tsx.ejs

@@ -0,0 +1,371 @@
+'use client';
+
+import { Button } from '@/components/ui/button';
+import { useApp } from '@hed-hog/next-app-provider';
+import {
+  Archive,
+  ExternalLink,
+  File,
+  FileAudio,
+  FileCode,
+  FileImage,
+  FileSpreadsheet,
+  FileText,
+  FileVideo,
+  Loader2,
+  Paperclip,
+  Trash2,
+  UploadCloud,
+} from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+// ─── Types ────────────────────────────────────────────────────────────────────
+
+type ProjectFile = {
+  id: number;
+  file_id: number;
+  filename: string;
+  size: number;
+  mimetype: string;
+  created_at: string;
+};
+
+type UploadingFile = {
+  key: string;
+  filename: string;
+  progress: number;
+  error?: string;
+};
+
+// ─── Helpers ──────────────────────────────────────────────────────────────────
+
+function formatBytes(bytes: number) {
+  if (bytes === 0) return '0 B';
+  const k = 1024;
+  const sizes = ['B', 'KB', 'MB', 'GB'];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return `${parseFloat((bytes / Math.pow(k, i)).toFixed(1))} ${sizes[i]}`;
+}
+
+function getFileIcon(mimetype: string, filename: string) {
+  const ext = filename.split('.').pop()?.toLowerCase() ?? '';
+
+  if (mimetype.startsWith('image/')) return FileImage;
+  if (mimetype.startsWith('video/')) return FileVideo;
+  if (mimetype.startsWith('audio/')) return FileAudio;
+  if (
+    mimetype === 'application/pdf' ||
+    mimetype.includes('word') ||
+    mimetype.includes('document')
+  )
+    return FileText;
+  if (
+    mimetype.includes('spreadsheet') ||
+    mimetype.includes('excel') ||
+    ext === 'xlsx' ||
+    ext === 'xls'
+  )
+    return FileSpreadsheet;
+  if (ext === 'csv') return FileSpreadsheet;
+  if (
+    mimetype.includes('zip') ||
+    mimetype.includes('compressed') ||
+    mimetype.includes('archive') ||
+    ['zip', 'rar', '7z', 'tar', 'gz'].includes(ext)
+  )
+    return Archive;
+  if (
+    [
+      'js', 'ts', 'tsx', 'jsx', 'py', 'java', 'cs', 'cpp', 'c', 'go',
+      'rs', 'json', 'xml', 'html', 'css',
+    ].includes(ext) ||
+    mimetype.includes('javascript') ||
+    mimetype.includes('json') ||
+    mimetype.includes('xml') ||
+    mimetype.includes('html')
+  )
+    return FileCode;
+
+  return File;
+}
+
+function getFileOpenUrl(fileId: number) {
+  const base =
+    typeof process !== 'undefined'
+      ? (process.env.NEXT_PUBLIC_API_BASE_URL?.trim().replace(/\/$/, '') ?? '')
+      : '';
+  return `${base}/file/open/${fileId}`;
+}
+
+// ─── Component ────────────────────────────────────────────────────────────────
+
+type Props = {
+  projectId: number;
+};
+
+export function ProjectFileAttachments({ projectId }: Props) {
+  const t = useTranslations('operations.ProjectFileAttachments');
+  const { request } = useApp();
+
+  const [files, setFiles] = useState<ProjectFile[]>([]);
+  const [uploading, setUploading] = useState<UploadingFile[]>([]);
+  const [loadingFiles, setLoadingFiles] = useState(false);
+  const [deletingId, setDeletingId] = useState<number | null>(null);
+  const [isDraggingOver, setIsDraggingOver] = useState(false);
+
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  // ── Fetch existing files ──────────────────────────────────────────────────
+
+  const fetchFiles = useCallback(async () => {
+    setLoadingFiles(true);
+    try {
+      const res = await request<ProjectFile[]>({
+        url: `/operations/projects/${projectId}/files`,
+        method: 'GET',
+      });
+      setFiles((res.data as ProjectFile[]) ?? []);
+    } catch {
+      // ignore
+    } finally {
+      setLoadingFiles(false);
+    }
+  }, [projectId, request]);
+
+  useEffect(() => {
+    void fetchFiles();
+  }, [fetchFiles]);
+
+  // ── Upload handler ────────────────────────────────────────────────────────
+
+  const uploadFile = useCallback(
+    async (file: File) => {
+      const key = `${file.name}-${Date.now()}`;
+      setUploading((prev) => [
+        ...prev,
+        { key, filename: file.name, progress: 0 },
+      ]);
+
+      try {
+        const formData = new FormData();
+        formData.append('file', file);
+
+        const res = await (request as any)({
+          url: `/operations/projects/${projectId}/files`,
+          method: 'POST',
+          data: formData,
+          headers: { 'Content-Type': 'multipart/form-data' },
+          onUploadProgress: (e: { loaded: number; total?: number }) => {
+            if (!e.total) return;
+            const pct = Math.round((e.loaded * 100) / e.total);
+            setUploading((prev) =>
+              prev.map((u) => (u.key === key ? { ...u, progress: pct } : u))
+            );
+          },
+        });
+
+        if (res?.data) {
+          await fetchFiles();
+        }
+      } catch {
+        setUploading((prev) =>
+          prev.map((u) =>
+            u.key === key ? { ...u, error: t('uploadError') } : u
+          )
+        );
+        setTimeout(() => {
+          setUploading((prev) => prev.filter((u) => u.key !== key));
+        }, 3000);
+        return;
+      }
+
+      setUploading((prev) => prev.filter((u) => u.key !== key));
+    },
+    [projectId, request, fetchFiles, t]
+  );
+
+  const handleFiles = useCallback(
+    (fileList: FileList | null) => {
+      if (!fileList) return;
+      Array.from(fileList).forEach((f) => void uploadFile(f));
+      if (inputRef.current) inputRef.current.value = '';
+    },
+    [uploadFile]
+  );
+
+  // ── Delete handler ────────────────────────────────────────────────────────
+
+  const handleDelete = useCallback(
+    async (relationId: number) => {
+      setDeletingId(relationId);
+      try {
+        await request({
+          url: `/operations/projects/${projectId}/files/${relationId}`,
+          method: 'DELETE',
+        });
+        setFiles((prev) => prev.filter((f) => f.id !== relationId));
+      } catch {
+        // ignore
+      } finally {
+        setDeletingId(null);
+      }
+    },
+    [projectId, request]
+  );
+
+  // ── Drag and drop ─────────────────────────────────────────────────────────
+
+  const handleDragOver = (e: React.DragEvent) => {
+    e.preventDefault();
+    setIsDraggingOver(true);
+  };
+
+  const handleDragLeave = () => setIsDraggingOver(false);
+
+  const handleDrop = (e: React.DragEvent) => {
+    e.preventDefault();
+    setIsDraggingOver(false);
+    handleFiles(e.dataTransfer.files);
+  };
+
+  // ── Render ────────────────────────────────────────────────────────────────
+
+  const isEmpty = files.length === 0 && uploading.length === 0;
+
+  return (
+    <div className="space-y-3">
+      {/* Drop zone */}
+      <div
+        role="button"
+        tabIndex={0}
+        aria-label={t('dropzone.ariaLabel')}
+        className={[
+          'flex cursor-pointer flex-col items-center justify-center gap-2 rounded-xl border-2 border-dashed px-4 py-5 text-sm transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50',
+          isDraggingOver
+            ? 'border-primary bg-primary/5 text-primary'
+            : 'border-border bg-muted/30 text-muted-foreground hover:border-primary/50 hover:bg-muted/50',
+        ].join(' ')}
+        onClick={() => inputRef.current?.click()}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            inputRef.current?.click();
+          }
+        }}
+        onDragOver={handleDragOver}
+        onDragLeave={handleDragLeave}
+        onDrop={handleDrop}
+      >
+        <UploadCloud className="size-6 shrink-0 opacity-60" />
+        <span className="text-center text-xs leading-relaxed">
+          {isDraggingOver ? t('dropzone.dragging') : t('dropzone.idle')}
+        </span>
+        <input
+          ref={inputRef}
+          type="file"
+          multiple
+          className="hidden"
+          onChange={(e) => handleFiles(e.target.files)}
+        />
+      </div>
+
+      {/* Upload progress items */}
+      {uploading.map((u) => (
+        <div
+          key={u.key}
+          className="flex items-center gap-3 rounded-xl border bg-muted/30 px-3 py-2"
+        >
+          <Loader2 className="size-4 shrink-0 animate-spin text-primary" />
+          <div className="min-w-0 flex-1">
+            <p className="truncate text-xs font-medium">{u.filename}</p>
+            {u.error ? (
+              <p className="text-[10px] text-destructive">{u.error}</p>
+            ) : (
+              <div className="mt-1 h-1 w-full overflow-hidden rounded-full bg-muted">
+                <div
+                  className="h-full rounded-full bg-primary transition-all duration-200"
+                  style={{ width: `${u.progress}%` }}
+                />
+              </div>
+            )}
+          </div>
+          <span className="shrink-0 text-[10px] tabular-nums text-muted-foreground">
+            {u.error ? t('error') : `${u.progress}%`}
+          </span>
+        </div>
+      ))}
+
+      {/* Loading skeleton */}
+      {loadingFiles && files.length === 0 && uploading.length === 0 ? (
+        <div className="space-y-2">
+          {[1, 2].map((i) => (
+            <div
+              key={i}
+              className="h-12 animate-pulse rounded-xl border bg-muted/30"
+            />
+          ))}
+        </div>
+      ) : null}
+
+      {/* Empty state */}
+      {!loadingFiles && isEmpty ? (
+        <div className="flex items-center gap-2 rounded-xl border border-dashed bg-muted/10 px-3 py-3 text-xs text-muted-foreground">
+          <Paperclip className="size-3.5 shrink-0" />
+          {t('empty')}
+        </div>
+      ) : null}
+
+      {/* File list */}
+      {files.map((file) => {
+        const Icon = getFileIcon(file.mimetype, file.filename);
+        const isDeleting = deletingId === file.id;
+        return (
+          <div
+            key={file.id}
+            className="group flex items-center gap-3 rounded-xl border bg-card px-3 py-2 transition hover:border-primary/30 hover:bg-muted/30"
+          >
+            <Icon className="size-5 shrink-0 text-muted-foreground" />
+            <div className="min-w-0 flex-1">
+              <p className="truncate text-xs font-medium leading-tight">
+                {file.filename}
+              </p>
+              <p className="text-[10px] text-muted-foreground">
+                {formatBytes(file.size)}
+              </p>
+            </div>
+            <div className="flex shrink-0 items-center gap-1 opacity-0 transition-opacity group-hover:opacity-100">
+              <Button
+                type="button"
+                variant="ghost"
+                size="icon"
+                className="size-7 rounded-lg"
+                title={t('actions.openInNewTab')}
+                onClick={() =>
+                  window.open(getFileOpenUrl(file.file_id), '_blank')
+                }
+              >
+                <ExternalLink className="size-3.5" />
+              </Button>
+              <Button
+                type="button"
+                variant="ghost"
+                size="icon"
+                className="size-7 rounded-lg text-destructive hover:bg-destructive/10 hover:text-destructive"
+                title={t('actions.removeFile')}
+                disabled={isDeleting}
+                onClick={() => void handleDelete(file.id)}
+              >
+                {isDeleting ? (
+                  <Loader2 className="size-3.5 animate-spin" />
+                ) : (
+                  <Trash2 className="size-3.5" />
+                )}
+              </Button>
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}