Add date picker for launch and ready to order fields

This commit is contained in:
Christian Vidal Wolf
2026-04-14 17:09:12 +02:00
parent f4f69633ce
commit 78df66be24
+26 -10
View File
@@ -11,6 +11,24 @@ interface MissingDataViewProps {
onCaptureState: (message: string) => void; onCaptureState: (message: string) => void;
} }
function formatDateForInput(val: string): string {
if (!val) return '';
const parts = val.split('/');
if (parts.length === 3) {
return `${parts[2]}-${parts[1]}-${parts[0]}`;
}
return val;
}
function formatDateFromInput(val: string): string {
if (!val) return '';
const parts = val.split('-');
if (parts.length === 3) {
return `${parts[2]}/${parts[1]}/${parts[0]}`;
}
return val;
}
function formatDateValue(val: any): string { function formatDateValue(val: any): string {
if (val === null || val === undefined || val === '') return ''; if (val === null || val === undefined || val === '') return '';
if (typeof val === 'number') { if (typeof val === 'number') {
@@ -160,8 +178,8 @@ export function MissingDataView({ data, headers, onSaveRow, onCaptureState }: Mi
setEditing({ setEditing({
rowIndex, rowIndex,
classification: String(row[COLUMNS.CLASSIFICATION] || ''), classification: String(row[COLUMNS.CLASSIFICATION] || ''),
launchDate: launchDateCol >= 0 ? formatDateValue(row[launchDateCol]) || String(row[launchDateCol] ?? '') : '', launchDate: launchDateCol >= 0 ? formatDateForInput(formatDateValue(row[launchDateCol]) || String(row[launchDateCol] ?? '')) : '',
readyToOrder: readyToOrderCol >= 0 ? formatDateValue(row[readyToOrderCol]) || String(row[readyToOrderCol] ?? '') : '', readyToOrder: readyToOrderCol >= 0 ? formatDateForInput(formatDateValue(row[readyToOrderCol]) || String(row[readyToOrderCol] ?? '')) : '',
}); });
}; };
@@ -171,8 +189,8 @@ export function MissingDataView({ data, headers, onSaveRow, onCaptureState }: Mi
onCaptureState(`Updated product ${row[COLUMNS.ARTICLE_NO]}`); onCaptureState(`Updated product ${row[COLUMNS.ARTICLE_NO]}`);
const newRow = [...row]; const newRow = [...row];
newRow[COLUMNS.CLASSIFICATION] = editing.classification; newRow[COLUMNS.CLASSIFICATION] = editing.classification;
if (launchDateCol >= 0) newRow[launchDateCol] = editing.launchDate; if (launchDateCol >= 0) newRow[launchDateCol] = formatDateFromInput(editing.launchDate);
if (readyToOrderCol >= 0) newRow[readyToOrderCol] = editing.readyToOrder; if (readyToOrderCol >= 0) newRow[readyToOrderCol] = formatDateFromInput(editing.readyToOrder);
onSaveRow(editing.rowIndex, newRow); onSaveRow(editing.rowIndex, newRow);
setEditing(null); setEditing(null);
}; };
@@ -411,12 +429,11 @@ export function MissingDataView({ data, headers, onSaveRow, onCaptureState }: Mi
<div className="flex flex-col gap-1.5"> <div className="flex flex-col gap-1.5">
<label className="text-xs font-medium text-slate-400 uppercase tracking-wider">{launchHeader}</label> <label className="text-xs font-medium text-slate-400 uppercase tracking-wider">{launchHeader}</label>
<input <input
type="text" type="date"
value={editing.launchDate} value={editing.launchDate}
onChange={e => setEditing(prev => prev ? { ...prev, launchDate: e.target.value } : prev)} onChange={e => setEditing(prev => prev ? { ...prev, launchDate: e.target.value } : prev)}
placeholder="DD/MM/YYYY"
className={cn( className={cn(
"w-full bg-slate-900 border rounded-md px-3 py-2.5 text-sm text-white font-mono focus:outline-none focus:ring-1 transition-colors", "w-full bg-slate-900 border rounded-md px-3 py-2.5 text-sm text-white focus:outline-none focus:ring-1 transition-colors",
editing.launchDate !== (formatDateValue(editingRow[launchDateCol]) || String(editingRow[launchDateCol] ?? '')) editing.launchDate !== (formatDateValue(editingRow[launchDateCol]) || String(editingRow[launchDateCol] ?? ''))
? "border-blue-500 focus:ring-blue-500" ? "border-blue-500 focus:ring-blue-500"
: "border-slate-700 focus:border-slate-500 focus:ring-slate-500" : "border-slate-700 focus:border-slate-500 focus:ring-slate-500"
@@ -429,12 +446,11 @@ export function MissingDataView({ data, headers, onSaveRow, onCaptureState }: Mi
<div className="flex flex-col gap-1.5"> <div className="flex flex-col gap-1.5">
<label className="text-xs font-medium text-slate-400 uppercase tracking-wider">{readyHeader}</label> <label className="text-xs font-medium text-slate-400 uppercase tracking-wider">{readyHeader}</label>
<input <input
type="text" type="date"
value={editing.readyToOrder} value={editing.readyToOrder}
onChange={e => setEditing(prev => prev ? { ...prev, readyToOrder: e.target.value } : prev)} onChange={e => setEditing(prev => prev ? { ...prev, readyToOrder: e.target.value } : prev)}
placeholder="DD/MM/YYYY"
className={cn( className={cn(
"w-full bg-slate-900 border rounded-md px-3 py-2.5 text-sm text-white font-mono focus:outline-none focus:ring-1 transition-colors", "w-full bg-slate-900 border rounded-md px-3 py-2.5 text-sm text-white focus:outline-none focus:ring-1 transition-colors",
editing.readyToOrder !== (formatDateValue(editingRow[readyToOrderCol]) || String(editingRow[readyToOrderCol] ?? '')) editing.readyToOrder !== (formatDateValue(editingRow[readyToOrderCol]) || String(editingRow[readyToOrderCol] ?? ''))
? "border-blue-500 focus:ring-blue-500" ? "border-blue-500 focus:ring-blue-500"
: "border-slate-700 focus:border-slate-500 focus:ring-slate-500" : "border-slate-700 focus:border-slate-500 focus:ring-slate-500"