feat: replace single-date picker with unified date range control
This commit is contained in:
root
@@ -30,7 +30,14 @@ const PickupConfigEditor = () => {
|
||||
{ id: "63448", active: false, checkProfileId: true, onlyNotify: true, label: "Penny Baden-Oos" },
|
||||
{ id: "44975", active: false, checkProfileId: true, onlyNotify: false, label: "Aldi Kuppenheim", desiredWeekday: "Samstag" },
|
||||
{ id: "44972", active: false, checkProfileId: true, onlyNotify: false, label: "Aldi Biblisweg", desiredWeekday: "Dienstag" },
|
||||
{ id: "44975", active: false, checkProfileId: true, onlyNotify: false, label: "Aldi Kuppenheim", desiredDate: "2025-05-18" },
|
||||
{
|
||||
id: "44975",
|
||||
active: false,
|
||||
checkProfileId: true,
|
||||
onlyNotify: false,
|
||||
label: "Aldi Kuppenheim",
|
||||
desiredDateRange: { start: "2025-05-18", end: "2025-05-18" }
|
||||
},
|
||||
{ id: "33875", active: false, checkProfileId: true, onlyNotify: false, label: "Cap Markt", desiredWeekday: "Donnerstag" },
|
||||
{ id: "42322", active: false, checkProfileId: false, onlyNotify: false, label: "Edeka Haueneberstein" },
|
||||
{ id: "51450", active: false, checkProfileId: true, onlyNotify: false, label: "Hornbach Grünwinkel" }
|
||||
@@ -90,23 +97,6 @@ const PickupConfigEditor = () => {
|
||||
const handleWeekdayChange = (index, value) => {
|
||||
const newConfig = [...config];
|
||||
newConfig[index].desiredWeekday = value;
|
||||
// Wenn ein Wochentag gesetzt wird, entfernen wir das spezifische Datum
|
||||
if (newConfig[index].desiredDate) {
|
||||
delete newConfig[index].desiredDate;
|
||||
}
|
||||
if (newConfig[index].desiredDateRange) {
|
||||
delete newConfig[index].desiredDateRange;
|
||||
}
|
||||
setConfig(newConfig);
|
||||
};
|
||||
|
||||
const handleDateChange = (index, value) => {
|
||||
const newConfig = [...config];
|
||||
newConfig[index].desiredDate = value;
|
||||
// Wenn ein spezifisches Datum gesetzt wird, entfernen wir den Wochentag
|
||||
if (newConfig[index].desiredWeekday) {
|
||||
delete newConfig[index].desiredWeekday;
|
||||
}
|
||||
if (newConfig[index].desiredDateRange) {
|
||||
delete newConfig[index].desiredDateRange;
|
||||
}
|
||||
@@ -115,19 +105,30 @@ const PickupConfigEditor = () => {
|
||||
|
||||
const handleDateRangeChange = (index, field, value) => {
|
||||
const newConfig = [...config];
|
||||
const currentRange = newConfig[index].desiredDateRange
|
||||
? { ...newConfig[index].desiredDateRange }
|
||||
: newConfig[index].desiredDate
|
||||
? { start: newConfig[index].desiredDate, end: newConfig[index].desiredDate }
|
||||
: { start: null, end: null };
|
||||
const nextRange = {
|
||||
start: newConfig[index].desiredDateRange?.start || null,
|
||||
end: newConfig[index].desiredDateRange?.end || null
|
||||
start: currentRange.start || null,
|
||||
end: currentRange.end || null
|
||||
};
|
||||
if (field === 'start') {
|
||||
nextRange.start = value || null;
|
||||
if (nextRange.end && value && value > nextRange.end) {
|
||||
nextRange.end = value;
|
||||
if (!nextRange.start) {
|
||||
nextRange.end = null;
|
||||
} else if (!nextRange.end || nextRange.end < nextRange.start) {
|
||||
nextRange.end = nextRange.start;
|
||||
}
|
||||
} else if (field === 'end') {
|
||||
nextRange.end = value || null;
|
||||
if (nextRange.start && value && value < nextRange.start) {
|
||||
nextRange.start = value;
|
||||
if (!nextRange.end && nextRange.start) {
|
||||
nextRange.end = nextRange.start;
|
||||
} else if (!nextRange.start && nextRange.end) {
|
||||
nextRange.start = nextRange.end;
|
||||
} else if (nextRange.start && nextRange.end < nextRange.start) {
|
||||
nextRange.start = nextRange.end;
|
||||
}
|
||||
}
|
||||
const hasRange = Boolean(nextRange.start || nextRange.end);
|
||||
@@ -136,12 +137,12 @@ const PickupConfigEditor = () => {
|
||||
if (newConfig[index].desiredWeekday) {
|
||||
delete newConfig[index].desiredWeekday;
|
||||
}
|
||||
if (newConfig[index].desiredDate) {
|
||||
delete newConfig[index].desiredDate;
|
||||
}
|
||||
} else if (newConfig[index].desiredDateRange) {
|
||||
delete newConfig[index].desiredDateRange;
|
||||
}
|
||||
if (newConfig[index].desiredDate) {
|
||||
delete newConfig[index].desiredDate;
|
||||
}
|
||||
setConfig(newConfig);
|
||||
};
|
||||
|
||||
@@ -176,93 +177,89 @@ const PickupConfigEditor = () => {
|
||||
<th className="px-4 py-2">Profil prüfen</th>
|
||||
<th className="px-4 py-2">Nur benachrichtigen</th>
|
||||
<th className="px-4 py-2">Wochentag</th>
|
||||
<th className="px-4 py-2">Spezifisches Datum</th>
|
||||
<th className="px-4 py-2">Datumsbereich</th>
|
||||
<th className="px-4 py-2">Datum / Zeitraum</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{config.map((item, index) => {
|
||||
const hasDateRange = Boolean(item.desiredDateRange?.start || item.desiredDateRange?.end);
|
||||
const normalizedRange = item.desiredDateRange
|
||||
? { ...item.desiredDateRange }
|
||||
: item.desiredDate
|
||||
? { start: item.desiredDate, end: item.desiredDate }
|
||||
: null;
|
||||
const rangeStart = normalizedRange?.start || '';
|
||||
const rangeEnd = normalizedRange?.end || '';
|
||||
const hasDateRange = Boolean(rangeStart || rangeEnd);
|
||||
return (
|
||||
<tr key={index} className={index % 2 === 0 ? 'bg-gray-50' : 'bg-white'}>
|
||||
<td className="px-4 py-2 text-center">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={item.active}
|
||||
onChange={() => handleToggleActive(index)}
|
||||
className="h-5 w-5"
|
||||
/>
|
||||
</td>
|
||||
<td className="px-4 py-2">
|
||||
<span className="font-medium">{item.label}</span>
|
||||
<br />
|
||||
<span className="text-sm text-gray-500">ID: {item.id}</span>
|
||||
</td>
|
||||
<td className="px-4 py-2 text-center">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={item.checkProfileId}
|
||||
onChange={() => handleToggleProfileCheck(index)}
|
||||
className="h-5 w-5"
|
||||
/>
|
||||
</td>
|
||||
<td className="px-4 py-2 text-center">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={item.onlyNotify}
|
||||
onChange={() => handleToggleOnlyNotify(index)}
|
||||
className="h-5 w-5"
|
||||
/>
|
||||
</td>
|
||||
<td className="px-4 py-2">
|
||||
<select
|
||||
value={item.desiredWeekday || ''}
|
||||
onChange={(e) => handleWeekdayChange(index, e.target.value)}
|
||||
className="border rounded p-1 w-full"
|
||||
disabled={item.desiredDate || hasDateRange}
|
||||
>
|
||||
<option value="">Kein Wochentag</option>
|
||||
{weekdays.map((day) => (
|
||||
<option key={day} value={day}>{day}</option>
|
||||
))}
|
||||
</select>
|
||||
</td>
|
||||
<td className="px-4 py-2">
|
||||
<input
|
||||
type="date"
|
||||
value={item.desiredDate || ''}
|
||||
onChange={(e) => handleDateChange(index, e.target.value)}
|
||||
className="border rounded p-1 w-full"
|
||||
disabled={item.desiredWeekday || hasDateRange}
|
||||
/>
|
||||
</td>
|
||||
<td className="px-4 py-2">
|
||||
<div className="grid grid-cols-1 gap-2">
|
||||
<div>
|
||||
<label className="block text-xs text-gray-500 mb-1">Von</label>
|
||||
<input
|
||||
type="date"
|
||||
value={item.desiredDateRange?.start || ''}
|
||||
onChange={(e) => handleDateRangeChange(index, 'start', e.target.value)}
|
||||
className="border rounded p-1 w-full"
|
||||
disabled={item.desiredWeekday || item.desiredDate}
|
||||
/>
|
||||
<tr key={index} className={index % 2 === 0 ? 'bg-gray-50' : 'bg-white'}>
|
||||
<td className="px-4 py-2 text-center">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={item.active}
|
||||
onChange={() => handleToggleActive(index)}
|
||||
className="h-5 w-5"
|
||||
/>
|
||||
</td>
|
||||
<td className="px-4 py-2">
|
||||
<span className="font-medium">{item.label}</span>
|
||||
<br />
|
||||
<span className="text-sm text-gray-500">ID: {item.id}</span>
|
||||
</td>
|
||||
<td className="px-4 py-2 text-center">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={item.checkProfileId}
|
||||
onChange={() => handleToggleProfileCheck(index)}
|
||||
className="h-5 w-5"
|
||||
/>
|
||||
</td>
|
||||
<td className="px-4 py-2 text-center">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={item.onlyNotify}
|
||||
onChange={() => handleToggleOnlyNotify(index)}
|
||||
className="h-5 w-5"
|
||||
/>
|
||||
</td>
|
||||
<td className="px-4 py-2">
|
||||
<select
|
||||
value={item.desiredWeekday || ''}
|
||||
onChange={(e) => handleWeekdayChange(index, e.target.value)}
|
||||
className="border rounded p-1 w-full"
|
||||
disabled={hasDateRange}
|
||||
>
|
||||
<option value="">Kein Wochentag</option>
|
||||
{weekdays.map((day) => (
|
||||
<option key={day} value={day}>{day}</option>
|
||||
))}
|
||||
</select>
|
||||
</td>
|
||||
<td className="px-4 py-2">
|
||||
<div className="border rounded p-2 bg-gray-50">
|
||||
<label className="block text-xs text-gray-500 mb-1">Datum / Zeitraum</label>
|
||||
<div className="flex items-center gap-2">
|
||||
<input
|
||||
type="date"
|
||||
value={rangeStart}
|
||||
onChange={(e) => handleDateRangeChange(index, 'start', e.target.value)}
|
||||
className="border rounded p-1 w-full"
|
||||
disabled={Boolean(item.desiredWeekday)}
|
||||
/>
|
||||
<span className="text-xs text-gray-500">bis</span>
|
||||
<input
|
||||
type="date"
|
||||
value={rangeEnd}
|
||||
onChange={(e) => handleDateRangeChange(index, 'end', e.target.value)}
|
||||
className="border rounded p-1 w-full"
|
||||
disabled={Boolean(item.desiredWeekday)}
|
||||
min={rangeStart || undefined}
|
||||
/>
|
||||
</div>
|
||||
<p className="text-xs text-gray-500 mt-1">Ein einzelner Tag: Start = Ende.</p>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-xs text-gray-500 mb-1">Bis</label>
|
||||
<input
|
||||
type="date"
|
||||
value={item.desiredDateRange?.end || ''}
|
||||
onChange={(e) => handleDateRangeChange(index, 'end', e.target.value)}
|
||||
className="border rounded p-1 w-full"
|
||||
disabled={item.desiredWeekday || item.desiredDate}
|
||||
min={item.desiredDateRange?.start || undefined}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
Reference in New Issue
Block a user