Neue Seite um Betriebe zu überwachen
This commit is contained in:
@@ -696,7 +696,7 @@ function App() {
|
||||
<NavigationTabs isAdmin={session?.isAdmin} onProtectedNavigate={requestNavigation} />
|
||||
<Routes>
|
||||
<Route path="/" element={dashboardContent} />
|
||||
<Route path="/store-watch" element={<StoreWatchPage authorizedFetch={authorizedFetch} />} />
|
||||
<Route path="/store-watch" element={<StoreWatchPage authorizedFetch={authorizedFetch} knownStores={stores} />} />
|
||||
<Route path="/admin" element={adminPageContent} />
|
||||
<Route path="*" element={<Navigate to="/" replace />} />
|
||||
</Routes>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { useCallback, useEffect, useMemo, useState } from 'react';
|
||||
|
||||
const StoreWatchPage = ({ authorizedFetch }) => {
|
||||
const StoreWatchPage = ({ authorizedFetch, knownStores = [] }) => {
|
||||
const [regions, setRegions] = useState([]);
|
||||
const [selectedRegionId, setSelectedRegionId] = useState('');
|
||||
const [storesByRegion, setStoresByRegion] = useState({});
|
||||
@@ -12,6 +12,8 @@ const StoreWatchPage = ({ authorizedFetch }) => {
|
||||
const [error, setError] = useState('');
|
||||
const [dirty, setDirty] = useState(false);
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [filterText, setFilterText] = useState('');
|
||||
const [sortBy, setSortBy] = useState('name');
|
||||
|
||||
const watchedIds = useMemo(
|
||||
() => new Set(watchList.map((entry) => String(entry.storeId))),
|
||||
@@ -36,6 +38,58 @@ const StoreWatchPage = ({ authorizedFetch }) => {
|
||||
[currentStores]
|
||||
);
|
||||
|
||||
const membershipMap = useMemo(() => {
|
||||
const map = new Map();
|
||||
(knownStores || []).forEach((store) => {
|
||||
if (store?.id) {
|
||||
map.set(String(store.id), store);
|
||||
}
|
||||
});
|
||||
return map;
|
||||
}, [knownStores]);
|
||||
|
||||
const filteredStores = useMemo(() => {
|
||||
const search = filterText.trim().toLowerCase();
|
||||
const data = !search
|
||||
? [...eligibleStores]
|
||||
: eligibleStores.filter((store) => {
|
||||
const haystack = [
|
||||
store.name,
|
||||
store.city,
|
||||
store.street,
|
||||
store.zipCode,
|
||||
store.id
|
||||
]
|
||||
.filter(Boolean)
|
||||
.map((value) => String(value).toLowerCase());
|
||||
return haystack.some((value) => value.includes(search));
|
||||
});
|
||||
const compareString = (a = '', b = '') => a.localeCompare(b, 'de', { sensitivity: 'base' });
|
||||
data.sort((a, b) => {
|
||||
switch (sortBy) {
|
||||
case 'city':
|
||||
return compareString(a.city || '', b.city || '') || compareString(a.name || '', b.name || '');
|
||||
case 'created-desc': {
|
||||
const timeA = a.createdAt ? new Date(a.createdAt).getTime() : 0;
|
||||
const timeB = b.createdAt ? new Date(b.createdAt).getTime() : 0;
|
||||
if (timeA === timeB) {
|
||||
return compareString(a.name || '', b.name || '');
|
||||
}
|
||||
return timeB - timeA;
|
||||
}
|
||||
case 'membership':
|
||||
return (
|
||||
Number(membershipMap.has(String(b.id))) - Number(membershipMap.has(String(a.id))) ||
|
||||
compareString(a.name || '', b.name || '')
|
||||
);
|
||||
case 'name':
|
||||
default:
|
||||
return compareString(a.name || '', b.name || '');
|
||||
}
|
||||
});
|
||||
return data;
|
||||
}, [eligibleStores, filterText, sortBy, membershipMap]);
|
||||
|
||||
const loadRegions = useCallback(async () => {
|
||||
if (!authorizedFetch) {
|
||||
return;
|
||||
@@ -279,6 +333,42 @@ const StoreWatchPage = ({ authorizedFetch }) => {
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="mb-4 border border-gray-200 rounded-lg p-4 bg-gray-50">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1" htmlFor="store-filter">
|
||||
Betriebe filtern
|
||||
</label>
|
||||
<input
|
||||
id="store-filter"
|
||||
type="text"
|
||||
value={filterText}
|
||||
onChange={(event) => setFilterText(event.target.value)}
|
||||
className="border rounded-md p-2 w-full"
|
||||
placeholder="Name, Ort oder PLZ"
|
||||
disabled={!selectedRegionId}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1" htmlFor="store-sort">
|
||||
Sortieren nach
|
||||
</label>
|
||||
<select
|
||||
id="store-sort"
|
||||
value={sortBy}
|
||||
onChange={(event) => setSortBy(event.target.value)}
|
||||
className="border rounded-md p-2 w-full"
|
||||
disabled={!selectedRegionId}
|
||||
>
|
||||
<option value="name">Name (A-Z)</option>
|
||||
<option value="city">Ort (A-Z)</option>
|
||||
<option value="created-desc">Kooperation (neueste zuerst)</option>
|
||||
<option value="membership">Eigene Betriebe zuerst</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mb-6">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<h2 className="text-lg font-semibold text-gray-800">Betriebe in der Region</h2>
|
||||
@@ -290,27 +380,33 @@ const StoreWatchPage = ({ authorizedFetch }) => {
|
||||
)}
|
||||
</div>
|
||||
{storesLoading && <p className="text-sm text-gray-600">Lade Betriebe...</p>}
|
||||
{!storesLoading && (!selectedRegionId || eligibleStores.length === 0) && (
|
||||
{!storesLoading && !selectedRegionId && (
|
||||
<p className="text-sm text-gray-500">Bitte zuerst eine Region auswählen.</p>
|
||||
)}
|
||||
{!storesLoading && selectedRegionId && filteredStores.length === 0 && (
|
||||
<p className="text-sm text-gray-500">
|
||||
{selectedRegionId
|
||||
? 'Keine geeigneten Betriebe (Status "aktiv") in dieser Region.'
|
||||
: 'Bitte zuerst eine Region auswählen.'}
|
||||
Keine Betriebe gefunden. Prüfe Filter oder sortiere anders.
|
||||
</p>
|
||||
)}
|
||||
{!storesLoading && eligibleStores.length > 0 && (
|
||||
{!storesLoading && filteredStores.length > 0 && (
|
||||
<div className="overflow-x-auto border border-gray-200 rounded-lg">
|
||||
<table className="min-w-full divide-y divide-gray-200 text-sm">
|
||||
<thead className="bg-gray-100">
|
||||
<tr>
|
||||
<th className="px-4 py-2 text-left">Betrieb</th>
|
||||
<th className="px-4 py-2 text-left">Ort</th>
|
||||
<th className="px-4 py-2 text-left">Kooperation</th>
|
||||
<th className="px-4 py-2 text-left">Kooperation seit</th>
|
||||
<th className="px-4 py-2 text-center">Mitglied</th>
|
||||
<th className="px-4 py-2 text-center">Überwachen</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-gray-200">
|
||||
{eligibleStores.map((store) => {
|
||||
{filteredStores.map((store) => {
|
||||
const checked = watchedIds.has(String(store.id));
|
||||
const isMember = membershipMap.has(String(store.id));
|
||||
const sinceLabel = store.createdAt
|
||||
? new Date(store.createdAt).toLocaleDateString('de-DE')
|
||||
: 'unbekannt';
|
||||
return (
|
||||
<tr key={store.id} className="bg-white">
|
||||
<td className="px-4 py-2">
|
||||
@@ -321,8 +417,15 @@ const StoreWatchPage = ({ authorizedFetch }) => {
|
||||
<p className="text-gray-800 text-sm">{store.city || 'unbekannt'}</p>
|
||||
<p className="text-xs text-gray-500">{store.street || ''}</p>
|
||||
</td>
|
||||
<td className="px-4 py-2 text-sm text-gray-600">
|
||||
Seit {store.createdAt ? new Date(store.createdAt).toLocaleDateString('de-DE') : 'n/a'}
|
||||
<td className="px-4 py-2 text-sm text-gray-600">{sinceLabel}</td>
|
||||
<td className="px-4 py-2 text-center">
|
||||
<span
|
||||
className={`inline-flex items-center justify-center px-2 py-1 text-xs font-semibold rounded ${
|
||||
isMember ? 'bg-green-100 text-green-700' : 'bg-gray-100 text-gray-500'
|
||||
}`}
|
||||
>
|
||||
{isMember ? 'Ja' : 'Nein'}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-4 py-2 text-center">
|
||||
<input
|
||||
|
||||
Reference in New Issue
Block a user