From a7f74eaf1c385117bd5cd82334362172358d86d1 Mon Sep 17 00:00:00 2001 From: christian Date: Tue, 2 Jun 2026 09:44:14 +0000 Subject: [PATCH] feat: Produktpflege mit Bildupload + Beschreibung + Aktiv-Status Backend (routes/artikel.js): - 3 neue Spalten via Auto-Migration (bootstrap.js): - bild_url VARCHAR(500) - beschreibung TEXT - aktiv TINYINT(1) DEFAULT 1 - POST/PUT/DELETE Routes jetzt unter requireRole(admin) - GET unterstuetzt ?all=1 fuer inaktive Produkte (Produktpflege-Ansicht) - POST /artikel/:id/bild und DELETE /artikel/:id/bild fuer Bildverwaltung - DELETE faengt FK-Constraint ab (Hinweis: stattdessen inaktiv setzen) Frontend: - Neue Komponente Produkte.jsx als Kartenraster - Bildupload, Beschreibung, Pfandbetrag, Aktiv-Toggle, Edit/Loeschen - Inaktive werden ausgegraut dargestellt - TopNav: neuer Admin-Menupunkt Produkte (FaTags Icon) - Dashboard.jsx: Route eingebaut - client.js: api.getArtikel(true) fuer inaktive, uploadArtikelBild, deleteArtikelBild --- backend/routes/artikel.js | 105 ++++++++++++-- backend/scripts/bootstrap.js | 39 ++++-- src/api/client.js | 16 ++- src/components/Dashboard/Dashboard.jsx | 2 + src/components/Dashboard/TopNav.jsx | 3 +- src/components/Produkte.jsx | 185 +++++++++++++++++++++++++ 6 files changed, 323 insertions(+), 27 deletions(-) create mode 100644 src/components/Produkte.jsx diff --git a/backend/routes/artikel.js b/backend/routes/artikel.js index 296e63e..5c8923f 100644 --- a/backend/routes/artikel.js +++ b/backend/routes/artikel.js @@ -1,15 +1,21 @@ import express from 'express'; +import fs from 'fs'; +import path from 'path'; import { body, validationResult } from 'express-validator'; import pool from '../config/database.js'; -import { authenticateToken, requireTenant } from '../middleware/auth.js'; +import { authenticateToken, requireTenant, requireRole } from '../middleware/auth.js'; +import { upload } from '../middleware/upload.js'; const router = express.Router(); router.use(authenticateToken, requireTenant); +// GET alle Artikel (auch Inaktive fuer Admin) router.get('/', async (req, res) => { try { + const showInactive = req.query.all === '1'; + const where = showInactive ? 'tenant_id = ?' : 'tenant_id = ? AND aktiv = 1'; const [rows] = await pool.query( - 'SELECT * FROM artikel WHERE tenant_id = ? ORDER BY bezeichnung ASC', + `SELECT * FROM artikel WHERE ${where} ORDER BY bezeichnung ASC`, [req.user.tenant_id] ); res.json(rows); @@ -27,35 +33,49 @@ router.get('/:id', async (req, res) => { } catch (e) { res.status(500).json({ error: 'Serverfehler' }); } }); -router.post('/', [ +// POST: Anlegen (Admin only) +router.post('/', requireRole(['admin']), [ body('bezeichnung').notEmpty().trim(), - body('pfand_betrag').isFloat({ min: 0 }) + body('pfand_betrag').isFloat({ min: 0 }), + body('beschreibung').optional({ checkFalsy: true }).trim(), ], async (req, res) => { const errors = validationResult(req); if (!errors.isEmpty()) return res.status(400).json({ errors: errors.array() }); try { await pool.query( - 'INSERT INTO artikel (id, tenant_id, bezeichnung, pfand_betrag) VALUES (UUID(), ?, ?, ?)', - [req.user.tenant_id, req.body.bezeichnung, req.body.pfand_betrag] + `INSERT INTO artikel (id, tenant_id, bezeichnung, pfand_betrag, beschreibung, aktiv) + VALUES (UUID(), ?, ?, ?, ?, 1)`, + [req.user.tenant_id, req.body.bezeichnung, req.body.pfand_betrag, + req.body.beschreibung || null] ); const [rows] = await pool.query( 'SELECT * FROM artikel WHERE tenant_id = ? ORDER BY erstellt_am DESC LIMIT 1', [req.user.tenant_id] ); res.status(201).json(rows[0]); - } catch (e) { res.status(500).json({ error: 'Serverfehler' }); } + } catch (e) { + console.error('POST artikel:', e); + res.status(500).json({ error: 'Serverfehler' }); + } }); -router.put('/:id', [ +// PUT: Aendern (Admin only) +router.put('/:id', requireRole(['admin']), [ body('bezeichnung').notEmpty().trim(), - body('pfand_betrag').isFloat({ min: 0 }) + body('pfand_betrag').isFloat({ min: 0 }), + body('beschreibung').optional({ checkFalsy: true }).trim(), + body('aktiv').optional().isBoolean(), ], async (req, res) => { const errors = validationResult(req); if (!errors.isEmpty()) return res.status(400).json({ errors: errors.array() }); try { + const aktivVal = req.body.aktiv === undefined ? 1 : (req.body.aktiv ? 1 : 0); const [r] = await pool.query( - 'UPDATE artikel SET bezeichnung=?, pfand_betrag=? WHERE id=? AND tenant_id=?', - [req.body.bezeichnung, req.body.pfand_betrag, req.params.id, req.user.tenant_id] + `UPDATE artikel + SET bezeichnung=?, pfand_betrag=?, beschreibung=?, aktiv=? + WHERE id=? AND tenant_id=?`, + [req.body.bezeichnung, req.body.pfand_betrag, req.body.beschreibung || null, + aktivVal, req.params.id, req.user.tenant_id] ); if (r.affectedRows === 0) return res.status(404).json({ error: 'Artikel nicht gefunden' }); const [rows] = await pool.query('SELECT * FROM artikel WHERE id=? AND tenant_id=?', @@ -64,13 +84,72 @@ router.put('/:id', [ } catch (e) { res.status(500).json({ error: 'Serverfehler' }); } }); -router.delete('/:id', async (req, res) => { +// POST Produktbild (Admin only) +router.post('/:id/bild', requireRole(['admin']), upload.single('foto'), async (req, res) => { + if (!req.file) return res.status(400).json({ error: 'Kein Bild hochgeladen' }); try { + const [[a]] = await pool.query('SELECT bild_url FROM artikel WHERE id=? AND tenant_id=?', + [req.params.id, req.user.tenant_id]); + if (!a) { + try { fs.unlinkSync(req.file.path); } catch {} + return res.status(404).json({ error: 'Artikel nicht gefunden' }); + } + // Altes Bild loeschen (best effort) + if (a.bild_url) { + const oldPath = path.join(process.env.UPLOAD_DIR || '/app/uploads', + a.bild_url.replace(/^\/uploads\//, '')); + try { fs.unlinkSync(oldPath); } catch {} + } + const newUrl = `/uploads/${req.file.filename}`; + await pool.query('UPDATE artikel SET bild_url=? WHERE id=? AND tenant_id=?', + [newUrl, req.params.id, req.user.tenant_id]); + const [rows] = await pool.query('SELECT * FROM artikel WHERE id=? AND tenant_id=?', + [req.params.id, req.user.tenant_id]); + res.json(rows[0]); + } catch (e) { + console.error('POST artikel/bild:', e); + res.status(500).json({ error: 'Serverfehler' }); + } +}); + +router.delete('/:id/bild', requireRole(['admin']), async (req, res) => { + try { + const [[a]] = await pool.query('SELECT bild_url FROM artikel WHERE id=? AND tenant_id=?', + [req.params.id, req.user.tenant_id]); + if (!a) return res.status(404).json({ error: 'Artikel nicht gefunden' }); + if (a.bild_url) { + const p = path.join(process.env.UPLOAD_DIR || '/app/uploads', + a.bild_url.replace(/^\/uploads\//, '')); + try { fs.unlinkSync(p); } catch {} + } + await pool.query('UPDATE artikel SET bild_url=NULL WHERE id=? AND tenant_id=?', + [req.params.id, req.user.tenant_id]); + res.json({ message: 'Bild entfernt' }); + } catch (e) { res.status(500).json({ error: 'Serverfehler' }); } +}); + +router.delete('/:id', requireRole(['admin']), async (req, res) => { + try { + // Bild-Datei mitloeschen + const [[a]] = await pool.query('SELECT bild_url FROM artikel WHERE id=? AND tenant_id=?', + [req.params.id, req.user.tenant_id]); + if (a?.bild_url) { + const p = path.join(process.env.UPLOAD_DIR || '/app/uploads', + a.bild_url.replace(/^\/uploads\//, '')); + try { fs.unlinkSync(p); } catch {} + } const [r] = await pool.query('DELETE FROM artikel WHERE id=? AND tenant_id=?', [req.params.id, req.user.tenant_id]); if (r.affectedRows === 0) return res.status(404).json({ error: 'Artikel nicht gefunden' }); res.json({ message: 'Artikel gelöscht' }); - } catch (e) { res.status(500).json({ error: 'Serverfehler' }); } + } catch (e) { + if (e.code === 'ER_ROW_IS_REFERENCED' || e.code === 'ER_ROW_IS_REFERENCED_2') { + return res.status(400).json({ + error: 'Artikel wird in Lieferungen/Rücknahmen verwendet — bitte stattdessen auf "Inaktiv" setzen.' + }); + } + res.status(500).json({ error: 'Serverfehler' }); + } }); export default router; diff --git a/backend/scripts/bootstrap.js b/backend/scripts/bootstrap.js index 5ad9586..8d28ef2 100644 --- a/backend/scripts/bootstrap.js +++ b/backend/scripts/bootstrap.js @@ -1,18 +1,33 @@ import bcrypt from 'bcrypt'; import pool from '../config/database.js'; -const EXPIRY_COLS = ['notified_7d_at', 'notified_1d_at', 'notified_expired_at']; +// Spaltenname -> SQL-Definition +const COLS_TO_ADD = { + tenants: { + notified_7d_at: 'TIMESTAMP NULL', + notified_1d_at: 'TIMESTAMP NULL', + notified_expired_at: 'TIMESTAMP NULL', + }, + artikel: { + bild_url: 'VARCHAR(500) NULL', + beschreibung: 'TEXT NULL', + aktiv: 'TINYINT(1) NOT NULL DEFAULT 1', + }, +}; -async function ensureExpiryColumns() { - const [cols] = await pool.query( - `SELECT COLUMN_NAME FROM information_schema.columns - WHERE TABLE_SCHEMA = DATABASE() AND TABLE_NAME = 'tenants'` - ); - const have = new Set(cols.map(c => c.COLUMN_NAME)); - for (const col of EXPIRY_COLS) { - if (!have.has(col)) { - await pool.query(`ALTER TABLE tenants ADD COLUMN ${col} TIMESTAMP NULL`); - console.log('[bootstrap] tenants ALTER ADD', col); +async function ensureColumns() { + for (const [table, cols] of Object.entries(COLS_TO_ADD)) { + const [existing] = await pool.query( + `SELECT COLUMN_NAME FROM information_schema.columns + WHERE TABLE_SCHEMA = DATABASE() AND TABLE_NAME = ?`, + [table] + ); + const have = new Set(existing.map(c => c.COLUMN_NAME)); + for (const [col, def] of Object.entries(cols)) { + if (!have.has(col)) { + await pool.query(`ALTER TABLE ${table} ADD COLUMN ${col} ${def}`); + console.log(`[bootstrap] ${table} ALTER ADD ${col}`); + } } } } @@ -25,7 +40,7 @@ export async function bootstrapSuperAdmin() { } // Migrations - try { await ensureExpiryColumns(); } + try { await ensureColumns(); } catch (e) { console.error('[bootstrap] Migration-Fehler:', e.message); } const email = process.env.SUPERADMIN_EMAIL; diff --git a/src/api/client.js b/src/api/client.js index bfeaa1e..6ebc0f2 100644 --- a/src/api/client.js +++ b/src/api/client.js @@ -77,7 +77,21 @@ class ApiClient { deleteKundenBild(id) { return this.request(`/kunden-bilder/bild/${id}`, { method: 'DELETE' }); } // Artikel - getArtikel() { return this.request('/artikel'); } + getArtikel(includeInactive) { + return this.request('/artikel' + (includeInactive ? '?all=1' : '')); + } + async uploadArtikelBild(id, file) { + const fd = new FormData(); + fd.append('foto', file); + const res = await fetch(`${API_BASE_URL}/artikel/${id}/bild`, { + method: 'POST', + headers: { 'Authorization': `Bearer ${this.getToken()}` }, + body: fd, + }); + if (!res.ok) { const e = await res.json().catch(()=>({})); throw new Error(e.error || `HTTP ${res.status}`); } + return res.json(); + } + deleteArtikelBild(id) { return this.request(`/artikel/${id}/bild`, { method: 'DELETE' }); } createArtikel(a) { return this.request('/artikel', { method: 'POST', body: JSON.stringify(a) }); } updateArtikel(id, a) { return this.request(`/artikel/${id}`, { method: 'PUT', body: JSON.stringify(a) }); } deleteArtikel(id) { return this.request(`/artikel/${id}`, { method: 'DELETE' }); } diff --git a/src/components/Dashboard/Dashboard.jsx b/src/components/Dashboard/Dashboard.jsx index f293538..abf2bbd 100644 --- a/src/components/Dashboard/Dashboard.jsx +++ b/src/components/Dashboard/Dashboard.jsx @@ -6,6 +6,7 @@ import AdminDashboard from './AdminDashboard'; import KundenVerwaltung from '../KundenVerwaltung'; import MitarbeiterVerwaltung from '../MitarbeiterVerwaltung'; import Geraete from '../Geraete'; +import Produkte from '../Produkte'; import TourPlanung from '../TourPlanung'; import Account from './Account'; @@ -38,6 +39,7 @@ export default function Dashboard({ user, onLogout }) { {activeView === 'account' && } {isAdmin && activeView === 'admin' && } {isAdmin && activeView === 'kunden' && } + {isAdmin && activeView === 'produkte' && } {isAdmin && activeView === 'mitarbeiter' && } {isAdmin && activeView === 'geraete' && } diff --git a/src/components/Dashboard/TopNav.jsx b/src/components/Dashboard/TopNav.jsx index 850dec7..a143bd6 100644 --- a/src/components/Dashboard/TopNav.jsx +++ b/src/components/Dashboard/TopNav.jsx @@ -1,7 +1,7 @@ import { useState, useRef, useEffect } from 'react'; import { FaPlusCircle, FaTruck, FaUndo, FaUsers, FaAddressBook, - FaChartBar, FaUserCircle, FaSignOutAlt, FaBoxes, FaMapMarkedAlt + FaChartBar, FaUserCircle, FaSignOutAlt, FaBoxes, FaMapMarkedAlt, FaTags } from 'react-icons/fa'; const mainItems = [ @@ -14,6 +14,7 @@ const mainItems = [ const adminItems = [ { icon: FaChartBar, label: 'Auswertung', view: 'admin' }, { icon: FaAddressBook, label: 'Kunden', view: 'kunden' }, + { icon: FaTags, label: 'Produkte', view: 'produkte' }, { icon: FaBoxes, label: 'Geräte', view: 'geraete' }, { icon: FaUsers, label: 'Mitarbeiter', view: 'mitarbeiter' }, ]; diff --git a/src/components/Produkte.jsx b/src/components/Produkte.jsx new file mode 100644 index 0000000..6453eef --- /dev/null +++ b/src/components/Produkte.jsx @@ -0,0 +1,185 @@ +import { useEffect, useState } from 'react'; +import { FaPlus, FaEdit, FaTrash, FaTimes, FaCamera, FaCheck, FaBan } from 'react-icons/fa'; +import { api } from '../api/client'; + +const API_BASE = import.meta.env.VITE_API_URL || '/api'; +const empty = { bezeichnung: '', pfand_betrag: '', beschreibung: '', aktiv: true }; + +export default function Produkte() { + const [list, setList] = useState([]); + const [form, setForm] = useState(empty); + const [editId, setEditId] = useState(null); + const [loading, setLoading] = useState(true); + const [error, setError] = useState(''); + const [bildBusy, setBildBusy] = useState(null); // id des Artikels der gerade Bild hochlaedt + + const load = async () => { + setLoading(true); + try { setList(await api.getArtikel(true)); setError(''); } + catch (e) { setError(e.message); } + finally { setLoading(false); } + }; + useEffect(() => { load(); }, []); + + const startEdit = (a) => { + setEditId(a.id); + setForm({ + bezeichnung: a.bezeichnung || '', + pfand_betrag: a.pfand_betrag ?? '', + beschreibung: a.beschreibung || '', + aktiv: !!a.aktiv, + }); + }; + const cancel = () => { setEditId(null); setForm(empty); }; + + const save = async () => { + if (!form.bezeichnung) return setError('Bezeichnung erforderlich'); + if (form.pfand_betrag === '' || isNaN(parseFloat(form.pfand_betrag))) + return setError('Pfandbetrag erforderlich'); + try { + const payload = { + bezeichnung: form.bezeichnung, + pfand_betrag: parseFloat(form.pfand_betrag), + beschreibung: form.beschreibung || null, + aktiv: form.aktiv, + }; + if (editId) await api.updateArtikel(editId, payload); + else await api.createArtikel(payload); + cancel(); load(); + } catch (e) { setError(e.message); } + }; + + const del = async (id) => { + if (!confirm('Produkt wirklich löschen? (Falls bereits in Vorgängen verwendet, lieber auf Inaktiv setzen.)')) return; + try { await api.deleteArtikel(id); load(); } + catch (e) { setError(e.message); } + }; + + const uploadBild = async (id, file) => { + if (!file) return; + setBildBusy(id); + try { await api.uploadArtikelBild(id, file); load(); } + catch (e) { setError(e.message); } finally { setBildBusy(null); } + }; + const deleteBild = async (id) => { + if (!confirm('Bild entfernen?')) return; + try { await api.deleteArtikelBild(id); load(); } + catch (e) { setError(e.message); } + }; + + const toggleAktiv = async (a) => { + try { + await api.updateArtikel(a.id, { + bezeichnung: a.bezeichnung, + pfand_betrag: a.pfand_betrag, + beschreibung: a.beschreibung, + aktiv: !a.aktiv, + }); + load(); + } catch (e) { setError(e.message); } + }; + + const bildUrl = (a) => + a.bild_url ? (a.bild_url.startsWith('http') ? a.bild_url : `${API_BASE.replace('/api', '')}${a.bild_url}`) : null; + + return ( +
+
+

Produkte

+
{list.length} Produkte
+
+ + {error &&
{error}
} + +
+

{editId ? 'Produkt bearbeiten' : 'Neues Produkt'}

+
+
+ + setForm(f => ({ ...f, bezeichnung: e.target.value }))} /> +
+
+ + setForm(f => ({ ...f, pfand_betrag: e.target.value }))} /> +
+
+ +
+
+ +