Meik/Pickup-Config
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: streamline dashboard actions by removing inline add-entry form and manual refresh

Browse Source
This commit is contained in:
root
2025-11-09 18:00:35 +01:00
parent 57da03b2ac
commit 96eabafea8
1 changed files with 179 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

205
src/App.js
View File

@@ -1,5 +1,5 @@
import React, { useState, useEffect, useCallback, useMemo } from 'react';
import { BrowserRouter as Router, Routes, Route, Navigate, Link, useLocation } from 'react-router-dom';
import { BrowserRouter as Router, Routes, Route, Navigate, Link, useLocation, useNavigate } from 'react-router-dom';
import './App.css';
const TOKEN_STORAGE_KEY = 'pickupConfigToken';
@@ -23,6 +23,11 @@ function App() {
etaSeconds: null
});
const [initializing, setInitializing] = useState(false);
const [isDirty, setIsDirty] = useState(false);
const [dirtyDialogOpen, setDirtyDialogOpen] = useState(false);
const [dirtyDialogMessage, setDirtyDialogMessage] = useState('');
const [pendingNavigation, setPendingNavigation] = useState(null);
const [dirtyDialogSaving, setDirtyDialogSaving] = useState(false);
const weekdays = ['Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag', 'Sonntag'];
const delay = useCallback((ms) => new Promise((resolve) => setTimeout(resolve, ms)), []);
@@ -281,7 +286,7 @@ function App() {
}
};
const handleLogout = async () => {
const performLogout = useCallback(async () => {
if (!session?.token) {
handleUnauthorized();
return;
@@ -293,6 +298,10 @@ function App() {
} finally {
handleUnauthorized();
}
}, [session?.token, authorizedFetch, handleUnauthorized]);
const handleLogout = () => {
requestNavigation('dich abzumelden', performLogout);
};
const fetchConfig = useCallback(async (tokenOverride, { silent = false } = {}) => {
@@ -427,6 +436,7 @@ function App() {
await fetchStoresList(effectiveToken);
await fetchConfig(effectiveToken, { silent: true });
setIsDirty(false);
setStatus('Betriebe aktualisiert.');
setTimeout(() => setStatus(''), 3000);
} catch (err) {
@@ -451,11 +461,88 @@ function App() {
]
);
const saveConfig = useCallback(async () => {
if (!session?.token) {
return false;
}
setStatus('Speichere...');
setError('');
try {
const response = await authorizedFetch('/api/config', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(config)
});
if (!response.ok) {
throw new Error(`HTTP ${response.status}`);
}
const result = await response.json();
if (result.success) {
setStatus('Konfiguration erfolgreich gespeichert!');
setTimeout(() => setStatus(''), 3000);
setIsDirty(false);
return true;
}
throw new Error(result.error || 'Unbekannter Fehler beim Speichern');
} catch (err) {
setError(`Fehler beim Speichern: ${err.message}`);
setStatus('');
return false;
} finally {
setLoading(false);
}
}, [session?.token, authorizedFetch, config]);
const refreshStoresAndConfig = useCallback(
({ block = false } = {}) => syncStoresWithProgress({ block, reason: 'manual', startJob: true }),
[syncStoresWithProgress]
);
const requestNavigation = useCallback(
(message, action) => {
if (!isDirty) {
action();
return;
}
setDirtyDialogMessage(message || 'Änderungen wurden noch nicht gespeichert.');
setPendingNavigation(() => action);
setDirtyDialogOpen(true);
},
[isDirty]
);
const handleDirtySave = useCallback(async () => {
if (!pendingNavigation) {
setDirtyDialogOpen(false);
return;
}
setDirtyDialogSaving(true);
const success = await saveConfig();
setDirtyDialogSaving(false);
if (!success) {
return;
}
const action = pendingNavigation;
setPendingNavigation(null);
setDirtyDialogOpen(false);
action();
}, [pendingNavigation, saveConfig]);
const handleDirtyDiscard = useCallback(() => {
const action = pendingNavigation;
setPendingNavigation(null);
setDirtyDialogOpen(false);
setIsDirty(false);
if (action) {
action();
}
}, [pendingNavigation]);
const handleDirtyCancel = useCallback(() => {
setDirtyDialogOpen(false);
setPendingNavigation(null);
}, []);
useEffect(() => {
let ticker;
let cancelled = false;
@@ -513,33 +600,20 @@ function App() {
syncStoresWithProgress
]);
const saveConfig = async () => {
if (!session?.token) {
useEffect(() => {
const handleBeforeUnload = (event) => {
if (!isDirty) {
return;
}
setStatus('Speichere...');
setError('');
try {
const response = await authorizedFetch('/api/config', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(config)
});
if (!response.ok) {
throw new Error(`HTTP ${response.status}`);
}
const result = await response.json();
if (result.success) {
setStatus('Konfiguration erfolgreich gespeichert!');
setTimeout(() => setStatus(''), 3000);
} else {
throw new Error(result.error || 'Unbekannter Fehler beim Speichern');
}
} catch (err) {
setError(`Fehler beim Speichern: ${err.message}`);
setStatus('');
}
event.preventDefault();
event.returnValue = '';
return '';
};
window.addEventListener('beforeunload', handleBeforeUnload);
return () => {
window.removeEventListener('beforeunload', handleBeforeUnload);
};
}, [isDirty]);
const persistConfigUpdate = async (updater, successMessage) => {
if (!session?.token) {
@@ -571,12 +645,14 @@ function App() {
const message = successMessage || 'Konfiguration gespeichert.';
setStatus(message);
setTimeout(() => setStatus(''), 3000);
setIsDirty(false);
} catch (err) {
setError(`Fehler beim Speichern: ${err.message}`);
}
};
const deleteEntry = (entryId) => {
setIsDirty(true);
if (window.confirm('Soll dieser Eintrag dauerhaft gelöscht werden?')) {
const updatedConfig = config.filter((item) => item.id !== entryId);
setConfig(updatedConfig);
@@ -589,6 +665,7 @@ function App() {
if (!window.confirm('Soll dieser Betrieb ausgeblendet werden?')) {
return;
}
setIsDirty(true);
await persistConfigUpdate(
(prev) => prev.map((item) => (item.id === entryId ? { ...item, hidden: true } : item)),
'Betrieb ausgeblendet.'
@@ -596,6 +673,7 @@ function App() {
};
const handleToggleActive = (entryId) => {
setIsDirty(true);
setConfig((prev) =>
prev.map((item) =>
item.id === entryId ? { ...item, active: !item.active } : item
@@ -604,6 +682,7 @@ function App() {
};
const handleToggleProfileCheck = (entryId) => {
setIsDirty(true);
setConfig((prev) =>
prev.map((item) =>
item.id === entryId ? { ...item, checkProfileId: !item.checkProfileId } : item
@@ -612,6 +691,7 @@ function App() {
};
const handleToggleOnlyNotify = (entryId) => {
setIsDirty(true);
setConfig((prev) =>
prev.map((item) =>
item.id === entryId ? { ...item, onlyNotify: !item.onlyNotify } : item
@@ -620,6 +700,7 @@ function App() {
};
const handleWeekdayChange = (entryId, value) => {
setIsDirty(true);
setConfig((prev) =>
prev.map((item) => {
if (item.id !== entryId) {
@@ -635,6 +716,7 @@ function App() {
};
const handleDateChange = (entryId, value) => {
setIsDirty(true);
setConfig((prev) =>
prev.map((item) => {
if (item.id !== entryId) {
@@ -671,6 +753,7 @@ function App() {
return;
}
const message = existing ? 'Betrieb wieder eingeblendet.' : 'Betrieb zur Liste hinzugefügt.';
setIsDirty(true);
await persistConfigUpdate(
(prev) => {
const already = prev.find((item) => item.id === storeId);
@@ -996,6 +1079,15 @@ function App() {
target="_blank"
rel="noopener noreferrer"
className="text-blue-600 hover:text-blue-800 flex items-center"
onClick={(event) => {
if (!isDirty) {
return;
}
event.preventDefault();
requestNavigation('das Foodsharing-Dashboard zu öffnen', () =>
window.open('https://foodsharing.de/?page=dashboard', '_blank', 'noopener,noreferrer')
);
}}
>
<svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
@@ -1300,7 +1392,7 @@ function App() {
<>
<div className="min-h-screen bg-gray-100 py-6">
<div className="max-w-7xl mx-auto px-4">
<NavigationTabs isAdmin={session?.isAdmin} />
<NavigationTabs isAdmin={session?.isAdmin} onProtectedNavigate={requestNavigation} />
<Routes>
<Route path="/" element={dashboardContent} />
<Route path="/admin" element={adminPageContent} />
@@ -1309,13 +1401,22 @@ function App() {
</div>
</div>
<StoreSyncOverlay state={syncProgress} />
<DirtyNavigationDialog
open={dirtyDialogOpen}
message={dirtyDialogMessage}
onSave={handleDirtySave}
onDiscard={handleDirtyDiscard}
onCancel={handleDirtyCancel}
saving={dirtyDialogSaving}
/>
</>
</Router>
);
}
function NavigationTabs({ isAdmin }) {
function NavigationTabs({ isAdmin, onProtectedNavigate }) {
const location = useLocation();
const navigate = useNavigate();
if (!isAdmin) {
return null;
}
@@ -1324,6 +1425,18 @@ function NavigationTabs({ isAdmin }) {
{ to: '/admin', label: 'Admin' }
];
const handleClick = (event, tab) => {
event.preventDefault();
if (location.pathname === tab.to) {
return;
}
if (onProtectedNavigate) {
onProtectedNavigate(`zur Seite "${tab.label}" wechseln`, () => navigate(tab.to));
} else {
navigate(tab.to);
}
};
return (
<div className="flex flex-wrap gap-2 mb-4">
{tabs.map((tab) => {
@@ -1332,6 +1445,7 @@ function NavigationTabs({ isAdmin }) {
<Link
key={tab.to}
to={tab.to}
onClick={(event) => handleClick(event, tab)}
className={`px-4 py-2 rounded-md text-sm font-medium transition-colors ${
isActive ? 'bg-blue-600 text-white shadow' : 'bg-white text-blue-600 border border-blue-200 hover:bg-blue-50'
}`}
@@ -1359,6 +1473,41 @@ function AdminAccessMessage() {
);
}
function DirtyNavigationDialog({ open, message, onSave, onDiscard, onCancel, saving }) {
if (!open) {
return null;
}
return (
<div className="fixed inset-0 z-50 flex items-center justify-center bg-slate-900/60 px-4">
<div className="bg-white rounded-lg shadow-2xl max-w-md w-full p-6">
<h3 className="text-lg font-semibold text-gray-800 mb-2">Änderungen nicht gespeichert</h3>
<p className="text-sm text-gray-600 mb-4">{message || 'Es gibt ungespeicherte Änderungen. Wie möchtest du fortfahren?'}</p>
<div className="flex flex-col gap-2">
<button
onClick={onSave}
disabled={saving}
className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:opacity-70"
>
{saving ? 'Speichere...' : 'Speichern & fortfahren'}
</button>
<button
onClick={onDiscard}
className="bg-white border border-gray-300 hover:bg-gray-50 text-gray-800 px-4 py-2 rounded focus:outline-none focus:ring-2 focus:ring-gray-400"
>
Ohne Speichern fortfahren
</button>
<button
onClick={onCancel}
className="bg-gray-100 hover:bg-gray-200 text-gray-700 px-4 py-2 rounded focus:outline-none focus:ring-2 focus:ring-gray-300"
>
Abbrechen
</button>
</div>
</div>
</div>
);
}
function formatEta(seconds) {
if (seconds == null || seconds === Infinity) {
return null;