fix: enforce future-dated ranges with modal picker
This commit is contained in:
@@ -1,6 +1,6 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import { DateRange } from 'react-date-range';
|
||||
import { format, parseISO, isValid } from 'date-fns';
|
||||
import { format, parseISO, isValid, startOfDay } from 'date-fns';
|
||||
import { de } from 'date-fns/locale';
|
||||
import 'react-date-range/dist/styles.css';
|
||||
import 'react-date-range/dist/theme/default.css';
|
||||
@@ -37,9 +37,16 @@ const formatRangeLabel = (start, end) => {
|
||||
return 'Zeitraum auswählen';
|
||||
};
|
||||
|
||||
const buildSelectionRange = (start, end) => {
|
||||
const startDate = parseDateValue(start) || parseDateValue(end) || new Date();
|
||||
const endDate = parseDateValue(end) || parseDateValue(start) || startDate;
|
||||
const buildSelectionRange = (start, end, minDate) => {
|
||||
const minimum = minDate || startOfDay(new Date());
|
||||
let startDate = parseDateValue(start) || parseDateValue(end) || minimum;
|
||||
let endDate = parseDateValue(end) || parseDateValue(start) || startDate;
|
||||
if (startDate < minimum) {
|
||||
startDate = minimum;
|
||||
}
|
||||
if (endDate < minimum) {
|
||||
endDate = startDate;
|
||||
}
|
||||
return {
|
||||
startDate,
|
||||
endDate,
|
||||
@@ -53,6 +60,7 @@ const PickupConfigEditor = () => {
|
||||
const [status, setStatus] = useState('');
|
||||
const [error, setError] = useState('');
|
||||
const [activeRangePicker, setActiveRangePicker] = useState(null);
|
||||
const minSelectableDate = startOfDay(new Date());
|
||||
|
||||
// Simulierte API-Endpunkte - diese müssen in Ihrer tatsächlichen Implementierung angepasst werden
|
||||
const API_URL = '/api/iobroker/pickup-config';
|
||||
@@ -62,6 +70,16 @@ const PickupConfigEditor = () => {
|
||||
fetchConfig();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (!activeRangePicker) {
|
||||
return;
|
||||
}
|
||||
const entry = config.find((item) => item.id === activeRangePicker);
|
||||
if (!entry || entry.desiredWeekday) {
|
||||
setActiveRangePicker(null);
|
||||
}
|
||||
}, [activeRangePicker, config]);
|
||||
|
||||
const fetchConfig = async () => {
|
||||
setLoading(true);
|
||||
setError('');
|
||||
@@ -155,27 +173,38 @@ const PickupConfigEditor = () => {
|
||||
}
|
||||
};
|
||||
|
||||
const handleDateRangeSelection = (index, startDate, endDate) => {
|
||||
const newConfig = [...config];
|
||||
const handleDateRangeSelection = (entryId, startDate, endDate) => {
|
||||
const startValue = formatDateValue(startDate);
|
||||
const endValue = formatDateValue(endDate);
|
||||
if (startValue || endValue) {
|
||||
newConfig[index].desiredDateRange = {
|
||||
start: startValue || endValue,
|
||||
end: endValue || startValue
|
||||
};
|
||||
if (newConfig[index].desiredWeekday) {
|
||||
delete newConfig[index].desiredWeekday;
|
||||
}
|
||||
} else if (newConfig[index].desiredDateRange) {
|
||||
delete newConfig[index].desiredDateRange;
|
||||
}
|
||||
if (newConfig[index].desiredDate) {
|
||||
delete newConfig[index].desiredDate;
|
||||
}
|
||||
setConfig(newConfig);
|
||||
setConfig((prev) =>
|
||||
prev.map((item) => {
|
||||
if (item.id !== entryId) {
|
||||
return item;
|
||||
}
|
||||
const updated = { ...item };
|
||||
if (startValue || endValue) {
|
||||
updated.desiredDateRange = {
|
||||
start: startValue || endValue,
|
||||
end: endValue || startValue
|
||||
};
|
||||
if (updated.desiredWeekday) {
|
||||
delete updated.desiredWeekday;
|
||||
}
|
||||
} else if (updated.desiredDateRange) {
|
||||
delete updated.desiredDateRange;
|
||||
}
|
||||
if (updated.desiredDate) {
|
||||
delete updated.desiredDate;
|
||||
}
|
||||
return updated;
|
||||
})
|
||||
);
|
||||
};
|
||||
|
||||
const activeRangeEntry = activeRangePicker
|
||||
? config.find((item) => item.id === activeRangePicker) || null
|
||||
: null;
|
||||
|
||||
if (loading) {
|
||||
return <div className="text-center p-8">Lade Konfiguration...</div>;
|
||||
}
|
||||
@@ -265,62 +294,24 @@ const PickupConfigEditor = () => {
|
||||
</select>
|
||||
</td>
|
||||
<td className="px-4 py-2">
|
||||
<div className="relative">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
if (item.desiredWeekday) {
|
||||
return;
|
||||
}
|
||||
setActiveRangePicker((prev) => (prev === item.id ? null : item.id));
|
||||
}}
|
||||
disabled={Boolean(item.desiredWeekday)}
|
||||
className={`w-full border rounded p-2 text-left transition focus:outline-none focus:ring-2 focus:ring-blue-500 ${
|
||||
item.desiredWeekday
|
||||
? 'bg-gray-100 text-gray-400 cursor-not-allowed'
|
||||
: 'bg-white hover:border-blue-400'
|
||||
}`}
|
||||
>
|
||||
<span className="block text-sm text-gray-700">{formatRangeLabel(rangeStart, rangeEnd)}</span>
|
||||
<span className="block text-xs text-gray-500">Klicke zum Auswählen</span>
|
||||
</button>
|
||||
{activeRangePicker === item.id && !item.desiredWeekday && (
|
||||
<div className="absolute z-20 mt-2 bg-white border border-gray-200 rounded-lg shadow-2xl">
|
||||
<DateRange
|
||||
onChange={(ranges) => {
|
||||
const { startDate, endDate } = ranges.selection;
|
||||
handleDateRangeSelection(index, startDate, endDate);
|
||||
}}
|
||||
moveRangeOnFirstSelection={false}
|
||||
ranges={[buildSelectionRange(rangeStart, rangeEnd)]}
|
||||
rangeColors={['#2563EB']}
|
||||
months={1}
|
||||
direction="horizontal"
|
||||
showDateDisplay={false}
|
||||
locale={de}
|
||||
/>
|
||||
<div className="flex items-center justify-between px-4 py-2 border-t text-sm bg-gray-50 rounded-b-lg">
|
||||
<button
|
||||
type="button"
|
||||
className="text-gray-600 hover:text-gray-900"
|
||||
onClick={() => {
|
||||
handleDateRangeSelection(index, null, null);
|
||||
setActiveRangePicker(null);
|
||||
}}
|
||||
>
|
||||
Zurücksetzen
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="text-blue-600 font-semibold hover:text-blue-800"
|
||||
onClick={() => setActiveRangePicker(null)}
|
||||
>
|
||||
Fertig
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
if (item.desiredWeekday) {
|
||||
return;
|
||||
}
|
||||
setActiveRangePicker(item.id);
|
||||
}}
|
||||
disabled={Boolean(item.desiredWeekday)}
|
||||
className={`w-full border rounded p-2 text-left transition focus:outline-none focus:ring-2 focus:ring-blue-500 ${
|
||||
item.desiredWeekday
|
||||
? 'bg-gray-100 text-gray-400 cursor-not-allowed'
|
||||
: 'bg-white hover:border-blue-400'
|
||||
}`}
|
||||
>
|
||||
<span className="block text-sm text-gray-700">{formatRangeLabel(rangeStart, rangeEnd)}</span>
|
||||
<span className="block text-xs text-gray-500">Klicke zum Auswählen</span>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
@@ -350,6 +341,75 @@ const PickupConfigEditor = () => {
|
||||
{JSON.stringify(config, null, 2)}
|
||||
</pre>
|
||||
</div>
|
||||
|
||||
{activeRangeEntry && !activeRangeEntry.desiredWeekday && (
|
||||
<div
|
||||
className="fixed inset-0 z-40 flex items-center justify-center bg-black bg-opacity-40 px-4"
|
||||
onClick={() => setActiveRangePicker(null)}
|
||||
>
|
||||
<div
|
||||
className="bg-white rounded-2xl shadow-2xl w-full max-w-lg"
|
||||
onClick={(event) => event.stopPropagation()}
|
||||
>
|
||||
<div className="px-5 pt-5 pb-3 border-b">
|
||||
<p className="text-xs uppercase tracking-wide text-gray-500">Zeitraum auswählen für</p>
|
||||
<p className="text-lg font-semibold text-gray-900">
|
||||
{activeRangeEntry.label || `Store ${activeRangeEntry.id}`}
|
||||
</p>
|
||||
</div>
|
||||
<div className="px-2 py-4">
|
||||
<DateRange
|
||||
onChange={(ranges) => {
|
||||
const { startDate, endDate } = ranges.selection;
|
||||
handleDateRangeSelection(activeRangeEntry.id, startDate, endDate);
|
||||
}}
|
||||
moveRangeOnFirstSelection={false}
|
||||
ranges={[
|
||||
buildSelectionRange(
|
||||
activeRangeEntry.desiredDateRange?.start,
|
||||
activeRangeEntry.desiredDateRange?.end,
|
||||
minSelectableDate
|
||||
)
|
||||
]}
|
||||
rangeColors={['#2563EB']}
|
||||
months={1}
|
||||
direction="horizontal"
|
||||
showDateDisplay={false}
|
||||
locale={de}
|
||||
minDate={minSelectableDate}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center justify-between px-5 py-3 border-t bg-gray-50 rounded-b-2xl">
|
||||
<button
|
||||
type="button"
|
||||
className="text-sm text-gray-600 hover:text-gray-900"
|
||||
onClick={() => {
|
||||
handleDateRangeSelection(activeRangeEntry.id, null, null);
|
||||
setActiveRangePicker(null);
|
||||
}}
|
||||
>
|
||||
Zurücksetzen
|
||||
</button>
|
||||
<div className="flex items-center gap-3">
|
||||
<button
|
||||
type="button"
|
||||
className="text-sm text-gray-600 hover:text-gray-900"
|
||||
onClick={() => setActiveRangePicker(null)}
|
||||
>
|
||||
Abbrechen
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="text-sm font-semibold text-white bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded-md"
|
||||
onClick={() => setActiveRangePicker(null)}
|
||||
>
|
||||
Fertig
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user