diff --git a/plans/ux-overhaul.md b/plans/ux-overhaul.md index 97b8abe..f791e64 100644 --- a/plans/ux-overhaul.md +++ b/plans/ux-overhaul.md @@ -54,7 +54,7 @@ Editor-Factory-Muster, `AccordionSection`, `TabbedTranslatableFields`, `ElementP ## Phase 4 — Editor-Konsistenz & Wartbarkeit - [ ] `useElementUpdate`-Hook (dedupliziert Handler-Boilerplate über ~12 Editoren). - [ ] Listen-Editoren vereinheitlichen (ChipGroup-Dialog vs. SingleSelection-Tabelle). -- [ ] Pflichtfeld-Markierung, Feld-ID prominenter, Hilfetexte, Duplikat-Optionen verhindern. +- [~] **Feld-ID-Prominenz** *(PR Phase 4)*: gemeinsame `common/FieldIdField` (Pflicht-Marker, Hilfetext, Leer-Warnung) **zentral** im `EnhancedElementEditorFactory` für alle wertführenden Typen (Boolean/String/Number/Date/SingleSelection). Befund: Feld-ID war zuvor uneinheitlich — bei Number/Date/Boolean/SingleSelection gar nicht editierbar, bei String als String statt `{field_name}`. Jetzt überall sichtbar + einheitlich als `{field_name}` geschrieben. Offen: Duplikat-Optionen verhindern, breitere Pflichtfeld-Markierungen, `useElementUpdate`-Hook. ## Phase 5 — Seiten & Flow-Metadaten - [ ] `pattern_type`-Auswahl bei Seitenanlage; Layout-Vorschau (`PageNavigator.tsx`, `EditPageDialog.tsx`). diff --git a/src/components/HybridEditor/EnhancedElementEditorFactory.tsx b/src/components/HybridEditor/EnhancedElementEditorFactory.tsx index 35a05fc..f817eee 100644 --- a/src/components/HybridEditor/EnhancedElementEditorFactory.tsx +++ b/src/components/HybridEditor/EnhancedElementEditorFactory.tsx @@ -2,12 +2,22 @@ import React from 'react'; import { PatternLibraryElement } from '../../models/listingFlow'; import { ElementEditorFactory } from '../PropertyEditor/ElementEditorFactory'; import { Box, Typography } from '@mui/material'; +import FieldIdField from '../PropertyEditor/common/FieldIdField'; interface EnhancedElementEditorFactoryProps { element: PatternLibraryElement; onUpdate: (updatedElement: PatternLibraryElement) => void; } +// Wertführende Eingabe-Typen, die zwingend eine Feld-ID brauchen (dort landet der Wert). +const FIELD_ID_TYPES = [ + 'BooleanUIElement', + 'StringUIElement', + 'NumberUIElement', + 'DateUIElement', + 'SingleSelectionUIElement', +]; + /** * Brückenkomponente, die die ElementEditorFactory in den EnhancedPropertyEditor integriert. * Diese Komponente dient als Adapter zwischen dem EnhancedPropertyEditor und den spezialisierten @@ -27,8 +37,23 @@ export const EnhancedElementEditorFactory: React.FC { + onUpdate({ + ...element, + element: { ...element.element, field_id: { field_name: name } } as any, + }); + }; + return ( + {showFieldId && ( + + )} ); diff --git a/src/components/PropertyEditor/common/FieldIdField.tsx b/src/components/PropertyEditor/common/FieldIdField.tsx new file mode 100644 index 0000000..792d9d9 --- /dev/null +++ b/src/components/PropertyEditor/common/FieldIdField.tsx @@ -0,0 +1,55 @@ +import React from 'react'; +import { Box, TextField, Typography } from '@mui/material'; +import KeyOutlinedIcon from '@mui/icons-material/KeyOutlined'; + +interface FieldIdFieldProps { + /** Aktueller field_name (Wert von field_id.field_name). */ + value: string; + /** Liefert den neuen field_name. */ + onChange: (fieldName: string) => void; + required?: boolean; + helpText?: string; +} + +/** + * Prominentes, einheitliches Editierfeld für die Feld-ID (`field_id.field_name`). + * Eingabe-Elemente brauchen eine Feld-ID — dort landet der erfasste Wert. Früher war + * dieses Feld in den Editoren uneinheitlich, versteckt oder gar nicht vorhanden; + * hier zentral mit Pflicht-Markierung, Hilfetext und Leer-Warnung. + */ +const FieldIdField: React.FC = ({ value, onChange, required = true, helpText }) => { + const empty = required && !value.trim(); + + return ( + + + + Feld-ID{required ? ' *' : ''} + + onChange(e.target.value)} + placeholder="z. B. heating_type" + error={empty} + helperText={ + empty + ? 'Pflichtfeld — ohne Feld-ID wird der erfasste Wert nicht gespeichert.' + : helpText ?? 'Eindeutiger Name, unter dem der erfasste Wert gespeichert wird (snake_case).' + } + /> + + ); +}; + +export default FieldIdField; diff --git a/src/components/PropertyEditor/editors/StringElementEditor.tsx b/src/components/PropertyEditor/editors/StringElementEditor.tsx index e5e2bcc..2261661 100644 --- a/src/components/PropertyEditor/editors/StringElementEditor.tsx +++ b/src/components/PropertyEditor/editors/StringElementEditor.tsx @@ -21,7 +21,6 @@ import TextFieldsIcon from '@mui/icons-material/TextFields'; import TitleIcon from '@mui/icons-material/Title'; import TuneIcon from '@mui/icons-material/Tune'; import VerifiedIcon from '@mui/icons-material/Verified'; -import SettingsIcon from '@mui/icons-material/Settings'; import HelpOutlineIcon from '@mui/icons-material/HelpOutline'; interface StringElementEditorProps { @@ -230,22 +229,6 @@ const StringElementEditor: React.FC = ({ element, onUp - } - defaultExpanded={false} - > - - - - -