feat: add vehicle edit page, image gallery with upload, print and CSV export

2026-07-19 19:47:39 +02:00
parent 58fcf4a722
commit 563127c75a
9 changed files with 499 additions and 5 deletions
@@ -0,0 +1,188 @@
+'use client';
+
+import { useState, useEffect, useCallback, useRef } from 'react';
+import { Button } from '@/components/ui/Button';
+import { Modal } from '@/components/ui/Modal';
+import {
+  listFiles,
+  uploadFile,
+  deleteFile,
+  isImageMime,
+  getThumbnailUrl,
+  getFileDownloadUrl,
+  type FileResponse,
+} from '@/lib/files';
+
+interface VehicleImagesProps {
+  vehicleId: string;
+}
+
+export function VehicleImages({ vehicleId }: VehicleImagesProps) {
+  const [files, setFiles] = useState<FileResponse[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [uploading, setUploading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [selectedImage, setSelectedImage] = useState<FileResponse | null>(null);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const fetchFiles = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const data = await listFiles(vehicleId, 1, 100);
+      const imageFiles = data.items.filter(f => isImageMime(f.mime_type));
+      setFiles(imageFiles);
+    } catch (err: unknown) {
+      const apiErr = err as { error?: { message?: string } };
+      setError(apiErr?.error?.message || 'Failed to load images');
+    } finally {
+      setLoading(false);
+    }
+  }, [vehicleId]);
+
+  useEffect(() => {
+    fetchFiles();
+  }, [fetchFiles]);
+
+  const handleUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const selectedFiles = e.target.files;
+    if (!selectedFiles || selectedFiles.length === 0) return;
+
+    setUploading(true);
+    setError(null);
+    try {
+      for (let i = 0; i < selectedFiles.length; i++) {
+        await uploadFile(vehicleId, selectedFiles[i]);
+      }
+      await fetchFiles();
+    } catch (err: unknown) {
+      const apiErr = err as { error?: { message?: string } };
+      setError(apiErr?.error?.message || 'Failed to upload images');
+    } finally {
+      setUploading(false);
+      if (fileInputRef.current) {
+        fileInputRef.current.value = '';
+      }
+    }
+  };
+
+  const handleDelete = async (fileId: string) => {
+    if (!confirm('Delete this image?')) return;
+    try {
+      await deleteFile(vehicleId, fileId);
+      setFiles(prev => prev.filter(f => f.id !== fileId));
+      if (selectedImage?.id === fileId) {
+        setSelectedImage(null);
+      }
+    } catch (err: unknown) {
+      const apiErr = err as { error?: { message?: string } };
+      setError(apiErr?.error?.message || 'Failed to delete image');
+    }
+  };
+
+  return (
+    <div data-testid="vehicle-images" className="space-y-4">
+      <div className="flex items-center justify-between">
+        <h2 className="text-xl font-semibold text-text">Bilder</h2>
+        <div className="flex items-center gap-2">
+          <input
+            ref={fileInputRef}
+            data-testid="image-upload-input"
+            type="file"
+            accept="image/*"
+            multiple
+            onChange={handleUpload}
+            className="hidden"
+          />
+          <Button
+            data-testid="upload-image-button"
+            onClick={() => fileInputRef.current?.click()}
+            loading={uploading}
+            disabled={uploading}
+          >
+            Bild hochladen
+          </Button>
+        </div>
+      </div>
+
+      {error && (
+        <div data-testid="images-error" className="p-4 bg-error/10 text-error rounded-lg">
+          {error}
+        </div>
+      )}
+
+      {loading ? (
+        <div data-testid="images-loading" className="text-center py-8 text-text-muted">
+          Loading images...
+        </div>
+      ) : files.length === 0 ? (
+        <div data-testid="no-images" className="text-center py-8 text-text-muted">
+          Keine Bilder vorhanden
+        </div>
+      ) : (
+        <div
+          data-testid="image-grid"
+          className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4"
+        >
+          {files.map(file => {
+            const thumbUrl = getThumbnailUrl(file) || getFileDownloadUrl(vehicleId, file.id);
+            return (
+              <div
+                key={file.id}
+                data-testid={`image-item-${file.id}`}
+                className="relative group rounded-lg overflow-hidden border border-border bg-surface"
+              >
+                <button
+                  onClick={() => setSelectedImage(file)}
+                  className="block w-full aspect-square"
+                >
+                  {/* eslint-disable-next-line @next/next/no-img-element */}
+                  <img
+                    src={thumbUrl}
+                    alt={file.original_filename}
+                    className="w-full h-full object-cover"
+                  />
+                </button>
+                <button
+                  data-testid={`delete-image-${file.id}`}
+                  onClick={() => handleDelete(file.id)}
+                  className="absolute top-2 right-2 bg-error text-white rounded-full p-1.5 opacity-0 group-hover:opacity-100 transition-opacity"
+                  aria-label="Delete image"
+                >
+                  <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+                  </svg>
+                </button>
+              </div>
+            );
+          })}
+        </div>
+      )}
+
+      <Modal
+        open={selectedImage !== null}
+        onClose={() => setSelectedImage(null)}
+        title={selectedImage?.original_filename}
+      >
+        {selectedImage && (
+          <div className="flex flex-col items-center">
+            {/* eslint-disable-next-line @next/next/no-img-element */}
+            <img
+              src={getFileDownloadUrl(vehicleId, selectedImage.id)}
+              alt={selectedImage.original_filename}
+              className="max-w-full max-h-[70vh] object-contain rounded-lg"
+            />
+            <div className="mt-4 flex gap-3">
+              <Button
+                variant="danger"
+                onClick={() => handleDelete(selectedImage.id)}
+              >
+                Löschen
+              </Button>
+            </div>
+          </div>
+        )}
+      </Modal>
+    </div>
+  );
+}