refactor(create-filter-model): add combobox for types and text fields for label and name

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

@@ -2,6 +2,16 @@ import { _filters } from 'src/_mock/_data';
 
 export type Type = 'BOOLEAN' | 'DATE' | 'TIME' | 'DATETIME' | 'VARCHAR' | 'INTEGER' | 'DECIMAL';
 
+export const filterTypes: Type[] = [
+    'BOOLEAN',
+    'DATE',
+    'TIME',
+    'DATETIME',
+    'VARCHAR',
+    'INTEGER',
+    'DECIMAL'
+];
+
 export type FilterCreateDto = {
     label?: string;
     name: string;

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

@@ -1,6 +1,12 @@
 import Box from '@mui/material/Box';
 import Modal from '@mui/material/Modal';
-import Typography from '@mui/material/Typography';
+import Button from '@mui/material/Button';
+import TextField from '@mui/material/TextField';
+import Autocomplete from '@mui/material/Autocomplete';
+
+import { Iconify } from 'src/components/iconify/iconify';
+
+import { createFiltersAsync, FilterCreateDto, filterTypes, Type } from '../../../api/filter-service';
 
 const style = {
   position: 'absolute',
@@ -9,7 +15,6 @@ const style = {
   transform: 'translate(-50%, -50%)',
   width: 400,
   bgcolor: 'background.paper',
-  border: '2px solid #000',
   boxShadow: 24,
   p: 4,
 };
@@ -29,14 +34,24 @@ export default function CreateFilterModal({ open, handleClose }: ModalProps) {
         aria-describedby="modal-modal-description"
       >
         <Box sx={style}>
-          <Typography id="modal-modal-title" variant="h6" component="h2">
-            Text in a modal
-          </Typography>
-          <Typography id="modal-modal-description" sx={{ mt: 2 }}>
-            Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
-          </Typography>
+          <TextField label="Label" variant="filled" />
+          <TextField label="Name" variant="filled" />
+          <Autocomplete
+            disablePortal
+            options={filterTypes}
+            renderInput={params => <TextField {...params} label="Type" variant="filled" />}
+          />
+          <Button
+            variant="contained"
+            color="inherit"
+            startIcon={<Iconify icon="mingcute:add-line" />}
+            onClick={() => createFiltersAsync({ name: '', type: 'VARCHAR' })}
+          >
+            Add filter
+          </Button>
         </Box>
       </Modal>
     </div>
   );
-}
+}
+