TSX rewrite and query strings initial set up

2026-07-16 11:23:10 +02:00 · 2025-05-21 21:47:44 +01:00
parent 5f7a4e1664
commit 41c82b15da
22 changed files with 1228 additions and 610 deletions
@@ -0,0 +1,206 @@
+import React, { useState, useEffect } from "react";
+import { Card, Group, Text, Stack, Image, Badge, Button, Box, Flex } from "@mantine/core";
+import { Dropzone, MIME_TYPES } from "@mantine/dropzone";
+import { GlobalWorkerOptions, getDocument } from "pdfjs-dist";
+
+GlobalWorkerOptions.workerSrc =
+  (import.meta as any).env?.PUBLIC_URL
+    ? `${(import.meta as any).env.PUBLIC_URL}/pdf.worker.js`
+    : "/pdf.worker.js";
+
+export interface FileWithUrl extends File {
+  url?: string;
+  file?: File;
+}
+
+function getFileDate(file: File): string {
+  if (file.lastModified) {
+    return new Date(file.lastModified).toLocaleString();
+  }
+  return "Unknown";
+}
+
+function getFileSize(file: File): string {
+  if (!file.size) return "Unknown";
+  if (file.size < 1024) return `${file.size} B`;
+  if (file.size < 1024 * 1024) return `${(file.size / 1024).toFixed(1)} KB`;
+  return `${(file.size / (1024 * 1024)).toFixed(2)} MB`;
+}
+
+function usePdfThumbnail(file: File | undefined | null): string | null {
+  const [thumb, setThumb] = useState<string | null>(null);
+
+  useEffect(() => {
+    let cancelled = false;
+    async function generate() {
+      if (!file) return;
+      try {
+        const arrayBuffer = await file.arrayBuffer();
+        const pdf = await getDocument({ data: arrayBuffer }).promise;
+        const page = await pdf.getPage(1);
+        const viewport = page.getViewport({ scale: 0.5 });
+        const canvas = document.createElement("canvas");
+        canvas.width = viewport.width;
+        canvas.height = viewport.height;
+        const context = canvas.getContext("2d");
+        if (context) {
+          await page.render({ canvasContext: context, viewport }).promise;
+          if (!cancelled) setThumb(canvas.toDataURL());
+        }
+      } catch {
+        if (!cancelled) setThumb(null);
+      }
+    }
+    generate();
+    return () => { cancelled = true; };
+  }, [file]);
+
+  return thumb;
+}
+
+interface FileCardProps {
+  file: File;
+  onRemove: () => void;
+  onDoubleClick?: () => void;
+}
+
+function FileCard({ file, onRemove, onDoubleClick }: FileCardProps) {
+  const thumb = usePdfThumbnail(file);
+
+  return (
+    <Card
+      shadow="xs"
+      radius="md"
+      withBorder
+      p="xs"
+      style={{ width: 225, minWidth: 180, maxWidth: 260, cursor: onDoubleClick ? "pointer" : undefined }}
+      onDoubleClick={onDoubleClick}
+    >
+      <Stack gap={6} align="center">
+        <Box
+          style={{
+            border: "2px solid #e0e0e0",
+            borderRadius: 8,
+            width: 90,
+            height: 120,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            margin: "0 auto",
+            background: "#fafbfc",
+          }}
+        >
+          {thumb ? (
+            <Image src={thumb} alt="PDF thumbnail" height={110} width={80} fit="contain" radius="sm" />
+          ) : (
+            <Image src="/images/pdf-placeholder.svg" alt="PDF" height={60} width={60} fit="contain" radius="sm" />
+          )}
+        </Box>
+        <Text fw={500} size="sm" lineClamp={1} ta="center">
+          {file.name}
+        </Text>
+        <Group gap="xs" justify="center">
+          <Badge color="gray" variant="light" size="sm">
+            {getFileSize(file)}
+          </Badge>
+          <Badge color="blue" variant="light" size="sm">
+            {getFileDate(file)}
+          </Badge>
+        </Group>
+        <Button
+          color="red"
+          size="xs"
+          variant="light"
+          onClick={onRemove}
+          mt={4}
+        >
+          Remove
+        </Button>
+      </Stack>
+    </Card>
+  );
+}
+
+interface FileManagerProps {
+  files: FileWithUrl[];
+  setFiles: React.Dispatch<React.SetStateAction<FileWithUrl[]>>;
+  allowMultiple?: boolean;
+  setPdfFile?: (fileObj: { file: File; url: string }) => void;
+  setCurrentView?: (view: string) => void;
+}
+
+const FileManager: React.FC<FileManagerProps> = ({
+  files = [],
+  setFiles,
+  allowMultiple = true,
+  setPdfFile,
+  setCurrentView,
+}) => {
+  const handleDrop = (uploadedFiles: File[]) => {
+    setFiles((prevFiles) => (allowMultiple ? [...prevFiles, ...uploadedFiles] : uploadedFiles));
+  };
+
+  const handleRemoveFile = (index: number) => {
+    setFiles((prevFiles) => prevFiles.filter((_, i) => i !== index));
+  };
+
+  return (
+    <div style={{ width: "100%", margin: "0 auto" }}>
+      <Dropzone
+        onDrop={handleDrop}
+        accept={[MIME_TYPES.pdf]}
+        multiple={allowMultiple}
+        maxSize={20 * 1024 * 1024}
+        style={{
+          marginBottom: 16,
+          border: "2px dashed rgb(202, 202, 202)",
+          background: "#f8fafc",
+          borderRadius: 8,
+          minHeight: 120,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+        }}
+      >
+        <Group justify="center" gap="xl" style={{ pointerEvents: "none" }}>
+          <Text size="md">
+            Drag PDF files here or click to select
+          </Text>
+        </Group>
+      </Dropzone>
+      {files.length === 0 ? (
+        <Text c="dimmed" ta="center">
+          No files uploaded yet.
+        </Text>
+      ) : (
+        <Box>
+          <Flex
+            wrap="wrap"
+            gap="lg"
+            justify="flex-start"
+            style={{ width: "fit-content", margin: "0 auto" }}
+          >
+            {files.map((file, idx) => (
+              <FileCard
+                key={file.name + idx}
+                file={file}
+                onRemove={() => handleRemoveFile(idx)}
+                onDoubleClick={() => {
+                  const fileObj = (file as FileWithUrl).file || file;
+                  setPdfFile &&
+                    setPdfFile({
+                      file: fileObj,
+                      url: URL.createObjectURL(fileObj),
+                    });
+                  setCurrentView && setCurrentView("viewer");
+                }}
+              />
+            ))}
+          </Flex>
+        </Box>
+      )}
+    </div>
+  );
+};
+
+export default FileManager;