fix: restrict delete button to admins
This commit is contained in:
106
src/components/PickupConfigTable.js
Normal file
106
src/components/PickupConfigTable.js
Normal file
@@ -0,0 +1,106 @@
|
||||
import { formatRangeLabel } from '../utils/dateUtils';
|
||||
|
||||
const PickupConfigTable = ({
|
||||
config,
|
||||
weekdays,
|
||||
onToggleActive,
|
||||
onToggleProfileCheck,
|
||||
onToggleOnlyNotify,
|
||||
onWeekdayChange,
|
||||
onRangePickerRequest
|
||||
}) => {
|
||||
return (
|
||||
<div className="overflow-x-auto">
|
||||
<table className="min-w-full bg-white border border-gray-200">
|
||||
<thead>
|
||||
<tr className="bg-gray-100">
|
||||
<th className="px-4 py-2">Aktiv</th>
|
||||
<th className="px-4 py-2">Geschäft</th>
|
||||
<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">Datum / Zeitraum</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{config.map((item, index) => {
|
||||
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={item.id || 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={() => onToggleActive(index)}
|
||||
className="h-5 w-5"
|
||||
/>
|
||||
</td>
|
||||
<td className="px-4 py-2">
|
||||
<span className="font-medium">{item.label}</span>
|
||||
</td>
|
||||
<td className="px-4 py-2 text-center">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={item.checkProfileId}
|
||||
onChange={() => onToggleProfileCheck(index)}
|
||||
className="h-5 w-5"
|
||||
/>
|
||||
</td>
|
||||
<td className="px-4 py-2 text-center">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={item.onlyNotify}
|
||||
onChange={() => onToggleOnlyNotify(index)}
|
||||
className="h-5 w-5"
|
||||
/>
|
||||
</td>
|
||||
<td className="px-4 py-2">
|
||||
<select
|
||||
value={item.desiredWeekday || ''}
|
||||
onChange={(e) => onWeekdayChange(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">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
if (item.desiredWeekday) {
|
||||
return;
|
||||
}
|
||||
onRangePickerRequest(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>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default PickupConfigTable;
|
||||
66
src/components/RangePickerModal.js
Normal file
66
src/components/RangePickerModal.js
Normal file
@@ -0,0 +1,66 @@
|
||||
import { DateRange } from 'react-date-range';
|
||||
import { de } from 'date-fns/locale';
|
||||
import { buildSelectionRange } from '../utils/dateUtils';
|
||||
import 'react-date-range/dist/styles.css';
|
||||
import 'react-date-range/dist/theme/default.css';
|
||||
|
||||
const RangePickerModal = ({ entry, minDate, onSelectRange, onResetRange, onClose }) => {
|
||||
if (!entry || entry.desiredWeekday) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-40 flex items-center justify-center bg-black bg-opacity-40 px-4" onClick={onClose}>
|
||||
<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">{entry.label || `Store ${entry.id}`}</p>
|
||||
</div>
|
||||
<div className="px-2 py-4">
|
||||
<DateRange
|
||||
onChange={(ranges) => {
|
||||
const { startDate, endDate } = ranges.selection;
|
||||
onSelectRange(startDate, endDate);
|
||||
}}
|
||||
moveRangeOnFirstSelection={false}
|
||||
ranges={[
|
||||
buildSelectionRange(
|
||||
entry.desiredDateRange?.start,
|
||||
entry.desiredDateRange?.end,
|
||||
minDate
|
||||
)
|
||||
]}
|
||||
rangeColors={['#2563EB']}
|
||||
months={1}
|
||||
direction="horizontal"
|
||||
showDateDisplay={false}
|
||||
locale={de}
|
||||
minDate={minDate}
|
||||
/>
|
||||
</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={onResetRange}>
|
||||
Zurücksetzen
|
||||
</button>
|
||||
<div className="flex items-center gap-3">
|
||||
<button type="button" className="text-sm text-gray-600 hover:text-gray-900" onClick={onClose}>
|
||||
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={onClose}
|
||||
>
|
||||
Fertig
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default RangePickerModal;
|
||||
Reference in New Issue
Block a user