Compare Changes at consolidate

This commit is contained in:
2026-02-26 16:18:45 +01:00
parent c8309832f7
commit 6190d707bb
8 changed files with 214 additions and 56 deletions

View File

@@ -13,7 +13,7 @@ import {
Label,
Spinner,
} from "@fluentui/react-components";
import { SheetMappingStatus, TARGET_COLUMNS } from "../models";
import { SheetMappingStatus, TARGET_COLUMNS, ConsolidateSettings } from "../models";
interface ColumnMapperProps {
sheetMappings: SheetMappingStatus[];
@@ -22,6 +22,8 @@ interface ColumnMapperProps {
onBack: () => void;
onConsolidate: () => void;
isConsolidating: boolean;
settings: ConsolidateSettings;
onSettingsChange: (settings: ConsolidateSettings) => void;
}
const ColumnMapper: React.FC<ColumnMapperProps> = ({
@@ -31,6 +33,8 @@ const ColumnMapper: React.FC<ColumnMapperProps> = ({
onBack,
onConsolidate,
isConsolidating,
settings,
onSettingsChange,
}) => {
return (
<div style={{ display: "flex", flexDirection: "column", gap: "15px", padding: "10px" }}>
@@ -119,6 +123,36 @@ const ColumnMapper: React.FC<ColumnMapperProps> = ({
})}
</Accordion>
<div style={{ marginTop: "20px", padding: "10px", backgroundColor: "#f3f2f1", borderRadius: "4px" }}>
<Text weight="semibold">Hervorhebungen (Farben)</Text>
<div style={{ display: "flex", gap: "20px", marginTop: "10px" }}>
<Field label="Neue Kabel">
<input
type="color"
value={settings.colorNew}
onChange={(e) => onSettingsChange({ ...settings, colorNew: e.target.value })}
style={{ width: "60px", padding: "0", cursor: "pointer", height: "30px", border: "none" }}
/>
</Field>
<Field label="Geänderte Werte">
<input
type="color"
value={settings.colorChanged}
onChange={(e) => onSettingsChange({ ...settings, colorChanged: e.target.value })}
style={{ width: "60px", padding: "0", cursor: "pointer", height: "30px", border: "none" }}
/>
</Field>
<Field label="Entfallene Kabel">
<input
type="color"
value={settings.colorDeleted}
onChange={(e) => onSettingsChange({ ...settings, colorDeleted: e.target.value })}
style={{ width: "60px", padding: "0", cursor: "pointer", height: "30px", border: "none" }}
/>
</Field>
</div>
</div>
<div style={{ display: "flex", justifyContent: "space-between", marginTop: "20px" }}>
<Button onClick={onBack} disabled={isConsolidating}>Zurück</Button>
<Button