feat: add vehicle edit page, image gallery with upload, print and CSV export
This commit is contained in:
@@ -0,0 +1,111 @@
|
||||
'use client';
|
||||
|
||||
import { Button } from '@/components/ui/Button';
|
||||
import type { VehicleResponse } from '@/lib/vehicles';
|
||||
|
||||
interface VehicleActionsProps {
|
||||
vehicle: VehicleResponse;
|
||||
}
|
||||
|
||||
function escapeCsvValue(value: string | number | undefined | null): string {
|
||||
if (value === null || value === undefined) return '';
|
||||
const str = String(value);
|
||||
if (str.includes(',') || str.includes('"') || str.includes('\n')) {
|
||||
return `"${str.replace(/"/g, '""')}"`;
|
||||
}
|
||||
return str;
|
||||
}
|
||||
|
||||
function downloadCsv(filename: string, csvContent: string): void {
|
||||
const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const link = document.createElement('a');
|
||||
link.href = url;
|
||||
link.download = filename;
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
document.body.removeChild(link);
|
||||
URL.revokeObjectURL(url);
|
||||
}
|
||||
|
||||
function vehicleToCsvRow(v: VehicleResponse): string {
|
||||
const headers = [
|
||||
'Make', 'Model', 'FIN', 'Year', 'Price', 'Vehicle Type',
|
||||
'Condition', 'Availability', 'Mileage (km)', 'Power (kW)',
|
||||
'Fuel Type', 'Transmission', 'Color', 'Location',
|
||||
'First Registration', 'Description',
|
||||
];
|
||||
return headers.map(h => {
|
||||
switch (h) {
|
||||
case 'Make': return escapeCsvValue(v.make);
|
||||
case 'Model': return escapeCsvValue(v.model);
|
||||
case 'FIN': return escapeCsvValue(v.fin);
|
||||
case 'Year': return escapeCsvValue(v.year);
|
||||
case 'Price': return escapeCsvValue(v.price);
|
||||
case 'Vehicle Type': return escapeCsvValue(v.vehicle_type);
|
||||
case 'Condition': return escapeCsvValue(v.condition);
|
||||
case 'Availability': return escapeCsvValue(v.availability);
|
||||
case 'Mileage (km)': return escapeCsvValue(v.mileage_km);
|
||||
case 'Power (kW)': return escapeCsvValue(v.power_kw);
|
||||
case 'Fuel Type': return escapeCsvValue(v.fuel_type);
|
||||
case 'Transmission': return escapeCsvValue(v.transmission);
|
||||
case 'Color': return escapeCsvValue(v.color);
|
||||
case 'Location': return escapeCsvValue(v.location);
|
||||
case 'First Registration': return escapeCsvValue(v.first_registration);
|
||||
case 'Description': return escapeCsvValue(v.description);
|
||||
default: return '';
|
||||
}
|
||||
}).join(',');
|
||||
}
|
||||
|
||||
export function VehicleActions({ vehicle }: VehicleActionsProps) {
|
||||
const handlePrint = () => {
|
||||
window.print();
|
||||
};
|
||||
|
||||
const handleExportPdf = () => {
|
||||
window.print();
|
||||
};
|
||||
|
||||
const handleExportCsv = () => {
|
||||
const headers = 'Make,Model,FIN,Year,Price,Vehicle Type,Condition,Availability,Mileage (km),Power (kW),Fuel Type,Transmission,Color,Location,First Registration,Description';
|
||||
const row = vehicleToCsvRow(vehicle);
|
||||
const csv = `${headers}\n${row}`;
|
||||
const filename = `vehicle_${vehicle.fin || vehicle.id}.csv`;
|
||||
downloadCsv(filename, csv);
|
||||
};
|
||||
|
||||
return (
|
||||
<div data-testid="vehicle-actions" className="flex gap-2 print:hidden">
|
||||
<Button
|
||||
variant="secondary"
|
||||
onClick={handlePrint}
|
||||
data-testid="print-button"
|
||||
>
|
||||
Drucken
|
||||
</Button>
|
||||
<Button
|
||||
variant="secondary"
|
||||
onClick={handleExportPdf}
|
||||
data-testid="export-pdf-button"
|
||||
>
|
||||
Als PDF exportieren
|
||||
</Button>
|
||||
<Button
|
||||
variant="secondary"
|
||||
onClick={handleExportCsv}
|
||||
data-testid="export-csv-button"
|
||||
>
|
||||
Als CSV exportieren
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function exportVehiclesToCsv(vehicles: VehicleResponse[]): void {
|
||||
const headers = 'Make,Model,FIN,Year,Price,Vehicle Type,Condition,Availability,Mileage (km),Power (kW),Fuel Type,Transmission,Color,Location,First Registration,Description';
|
||||
const rows = vehicles.map(v => vehicleToCsvRow(v));
|
||||
const csv = [headers, ...rows].join('\n');
|
||||
const now = new Date().toISOString().split('T')[0];
|
||||
downloadCsv(`vehicles_export_${now}.csv`, csv);
|
||||
}
|
||||
@@ -9,6 +9,8 @@ import {
|
||||
type VehicleResponse,
|
||||
} from '@/lib/vehicles';
|
||||
import { MobileDeStatus } from './MobileDeStatus';
|
||||
import { VehicleImages } from './VehicleImages';
|
||||
import { VehicleActions } from './VehicleActions';
|
||||
|
||||
interface VehicleDetailProps {
|
||||
vehicleId: string;
|
||||
@@ -126,6 +128,8 @@ export function VehicleDetail({ vehicleId }: VehicleDetailProps) {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<VehicleActions vehicle={vehicle} />
|
||||
|
||||
<div data-testid="vehicle-detail-fields" className="grid grid-cols-2 md:grid-cols-3 gap-4 p-6 bg-surface rounded-lg border border-border">
|
||||
{fields.map(field => (
|
||||
<div key={field.label} className="space-y-1">
|
||||
@@ -137,6 +141,8 @@ export function VehicleDetail({ vehicleId }: VehicleDetailProps) {
|
||||
))}
|
||||
</div>
|
||||
|
||||
<VehicleImages vehicleId={vehicle.id} />
|
||||
|
||||
<MobileDeStatus vehicleId={vehicle.id} />
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -0,0 +1,58 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import { VehicleForm } from './VehicleForm';
|
||||
import { getVehicle, type VehicleResponse } from '@/lib/vehicles';
|
||||
|
||||
interface VehicleEditFormProps {
|
||||
vehicleId: string;
|
||||
}
|
||||
|
||||
export function VehicleEditForm({ vehicleId }: VehicleEditFormProps) {
|
||||
const [vehicle, setVehicle] = useState<VehicleResponse | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
async function fetchVehicle() {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
try {
|
||||
const data = await getVehicle(vehicleId);
|
||||
setVehicle(data);
|
||||
} catch (err: unknown) {
|
||||
const apiErr = err as { error?: { message?: string } };
|
||||
setError(apiErr?.error?.message || 'Failed to load vehicle');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
fetchVehicle();
|
||||
}, [vehicleId]);
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div data-testid="vehicle-edit-loading" className="text-center py-8 text-text-muted">
|
||||
Loading vehicle...
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<div data-testid="vehicle-edit-error" className="p-4 bg-error/10 text-error rounded-lg">
|
||||
{error}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!vehicle) {
|
||||
return (
|
||||
<div data-testid="vehicle-edit-not-found" className="text-center py-8 text-text-muted">
|
||||
Vehicle not found
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return <VehicleForm vehicle={vehicle} mode="edit" />;
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -11,6 +11,7 @@ import {
|
||||
type VehicleListParams,
|
||||
} from '@/lib/vehicles';
|
||||
import type { PaginatedResponse } from '@/lib/api';
|
||||
import { exportVehiclesToCsv } from './VehicleActions';
|
||||
|
||||
const VEHICLE_TYPES = ['lkw', 'pkw', 'baumaschine', 'stapler', 'transporter'];
|
||||
const AVAILABILITY_OPTIONS = ['available', 'reserved', 'sold'];
|
||||
@@ -31,6 +32,7 @@ export function VehicleList() {
|
||||
const [pageSize] = useState(20);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [exporting, setExporting] = useState(false);
|
||||
|
||||
const [filters, setFilters] = useState<VehicleListParams>({
|
||||
page: 1,
|
||||
@@ -69,6 +71,23 @@ export function VehicleList() {
|
||||
setFilters(prev => ({ ...prev, page: newPage }));
|
||||
};
|
||||
|
||||
const handleExportAllCsv = async () => {
|
||||
setExporting(true);
|
||||
setError(null);
|
||||
try {
|
||||
const data: PaginatedResponse<VehicleResponse> = await listVehicles({
|
||||
page: 1,
|
||||
page_size: 1000,
|
||||
});
|
||||
exportVehiclesToCsv(data.items);
|
||||
} catch (err: unknown) {
|
||||
const apiErr = err as { error?: { message?: string } };
|
||||
setError(apiErr?.error?.message || 'Failed to export vehicles');
|
||||
} finally {
|
||||
setExporting(false);
|
||||
}
|
||||
};
|
||||
|
||||
const columns = [
|
||||
{
|
||||
key: 'make',
|
||||
@@ -101,9 +120,20 @@ export function VehicleList() {
|
||||
<div data-testid="vehicle-list" className="space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<h1 className="text-2xl font-bold text-text">Fahrzeuge</h1>
|
||||
<Button onClick={() => router.push('/de/fahrzeuge/neu')}>
|
||||
+ Neues Fahrzeug
|
||||
</Button>
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
variant="secondary"
|
||||
onClick={handleExportAllCsv}
|
||||
loading={exporting}
|
||||
disabled={exporting}
|
||||
data-testid="export-all-csv-button"
|
||||
>
|
||||
Alle als CSV exportieren
|
||||
</Button>
|
||||
<Button onClick={() => router.push('/de/fahrzeuge/neu')}>
|
||||
+ Neues Fahrzeug
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div data-testid="vehicle-filters" className="flex flex-wrap gap-3 p-4 bg-surface rounded-lg border border-border">
|
||||
|
||||
Reference in New Issue
Block a user