feat(ui): Verbesserung von CreateFilterModal mit Validierung und dynamischer Filtererstellung

- Validierung für `name` und `type` vor der Filtererstellung hinzugefügt
- Verbinden der Felder `label`, `name` und `type` mit dem Formularstatus
- Hardcodierte Werte im Aufruf `createFiltersAsync` durch Benutzereingaben ersetzt
- Einführung der Funktion `tryCreateFilter` für eine bessere Struktur
- Falsche Verwendung von `Name` und `Label` behoben

src/client/dd-hub-react/src/api/filter-service.ts

@@ -13,7 +13,7 @@ export const filterTypes: Type[] = [
 ];
 
 export type FilterCreateDto = {
-    label?: string;
+    label?: string | undefined;
     name: string;
     type: Type;
 };

src/client/dd-hub-react/src/sections/document/view/create-filter-modal.tsx

@@ -1,3 +1,5 @@
+import { useState } from 'react';
+
 import Box from '@mui/material/Box';
 import Modal from '@mui/material/Modal';
 import Button from '@mui/material/Button';
@@ -7,7 +9,6 @@ import Autocomplete from '@mui/material/Autocomplete';
 import { Iconify } from 'src/components/iconify/iconify';
 
 import { createFiltersAsync, FilterCreateDto, filterTypes, Type } from '../../../api/filter-service';
-import { useState } from 'react';
 
 const style = {
   position: 'absolute',
@@ -26,8 +27,21 @@ type ModalProps = {
 }
 
 export default function CreateFilterModal({ open, handleClose }: ModalProps) {
-  const [name, setName] = useState<string>('');
-  const [label, setLabel] = useState<string>('');
+  const [name, setName] = useState<string | undefined>(undefined);
+  const [label, setLabel] = useState<string | undefined>(undefined);
+  const [selectedType, setSelectedType] = useState<Type | undefined>(undefined);
+
+  async function tryCreateFilter(): Promise<any> {
+    if (!name) {
+      alert('No name.');
+    }
+    else if (!selectedType) {
+      alert('No type.');
+    }
+    else {
+      await createFiltersAsync({ name: name, type: selectedType, label: label }).then(() => handleClose());
+    }
+  }
 
   return (
     <div>
@@ -43,13 +57,15 @@ export default function CreateFilterModal({ open, handleClose }: ModalProps) {
           <Autocomplete
             disablePortal
             options={filterTypes}
+            value={selectedType}
+            onChange={(event, newValue) => setSelectedType(newValue ?? undefined)}
             renderInput={params => <TextField {...params} label="Type" variant="filled" />}
           />
           <Button
             variant="contained"
             color="inherit"
             startIcon={<Iconify icon="mingcute:add-line" />}
-            onClick={() => createFiltersAsync({ name: '', type: 'VARCHAR' })}
+            onClick={() => tryCreateFilter()}
           >
             Add filter
           </Button>
@@ -58,4 +74,3 @@ export default function CreateFilterModal({ open, handleClose }: ModalProps) {
     </div>
   );
 }
-