Add filter state management and UI updates

Introduce state management for disabled filter states in the DocSearchView component. Add Material-UI components for switches and update rendering logic to conditionally display enabled/disabled states. Adjust handling of VARCHAR filters to ensure correct TextField IDs.

src/client/dd-hub-react/src/sections/document/view/doc-search-view.tsx

@@ -3,9 +3,12 @@ import { useState, useCallback, useEffect } from 'react';
 import Box from '@mui/material/Box';
 import Grid from '@mui/material/Grid';
 import Button from '@mui/material/Button';
+import Switch from '@mui/material/Switch';
+import FormGroup from '@mui/material/FormGroup';
 import TextField from '@mui/material/TextField';
 import Typography from '@mui/material/Typography';
 import Pagination from '@mui/material/Pagination';
+import FormControlLabel from '@mui/material/FormControlLabel';
 
 import { DashboardContent } from 'src/layouts/dashboard';
 import { Filter, getFiltersAsync } from 'src/api/filter-service';
@@ -13,11 +16,8 @@ import { Filter, getFiltersAsync } from 'src/api/filter-service';
 import { Iconify } from 'src/components/iconify';
 
 import { DocItem } from '../doc-item';
-import { DocSort } from '../doc-sort';
-import { DocSearch } from '../doc-search';
 
 import type { IDocItem } from '../doc-item';
-
 // ----------------------------------------------------------------------
 
 type Props = {
@@ -29,6 +29,15 @@ export function DocSearchView({ posts }: Props) {
 
   const [filters, setFilters] = useState<Filter[]>([])
 
+  const [disabledStates, setDisabledStates] = useState<Record<number, boolean>>({});
+
+  const setDisabledState = useCallback((index: number, state: boolean) => {
+    setDisabledStates(prev => ({
+      ...prev,
+      [index]: state,
+    }));
+  }, []);
+
   const handleSort = useCallback((newSort: string) => {
     setSortBy(newSort);
   }, []);
@@ -36,6 +45,13 @@ export function DocSearchView({ posts }: Props) {
   useEffect(() => {
     getFiltersAsync().then((res) => {
       setFilters(res);
+      const newDisabledStates = res.reduce<Record<number, boolean>>((acc, filter, index) => {
+        if (filter.type === 'BOOLEAN') {
+          acc[index] = true;
+        }
+        return acc;
+      }, {});
+      setDisabledStates(newDisabledStates);
     });
   }, []);
 
@@ -87,13 +103,21 @@ export function DocSearchView({ posts }: Props) {
         {filters.map((filter, index) => {
           let filterComp;
           switch (filter.type) {
-            case 'VARCHAR':
             case 'BOOLEAN':
+              <FormGroup>
+                {
+                  filterComp = disabledStates[index] === undefined || disabledStates[index]
+                    ? <FormControlLabel disabled control={<Switch />} label={filter.label ?? filter.name} />
+                    : <FormControlLabel control={<Switch />} label={filter.label ?? filter.name} />
+                }
+              </FormGroup>
+              break;
+            case 'VARCHAR':
             case 'INTEGER':
             case 'DECIMAL':
             case 'DATE':
             default:
-              filterComp = (<TextField id="filled-basic" label={filter.label ?? filter.type} variant="filled" />)
+              filterComp = (<TextField id={`filter-${filter.id.toString()}`} label={filter.label ?? filter.type} variant="filled" />)
               break;
           }
           return (