AppStd/DigitalData.Hub
8
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor DocSearchView to use BoolFilter component

Browse Source 
Introduced a new `BoolFilter` component to encapsulate the checkbox and switch functionality previously handled in `DocSearchView`. This refactor improves code organization and reusability. Removed unnecessary imports from `doc-search-view.tsx` and added imports for the new component in `bool-filter.tsx`.
This commit is contained in:
tekh 2025-07-04 14:01:22 +02:00
parent 8893b96e9b
commit 9b831c86d4
2 changed files with 36 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
src/client/dd-hub-react/src/sections/document/bool-filter.tsx Normal file
View File

@ -0,0 +1,34 @@
import { useState } from 'react';
import Switch from '@mui/material/Switch';
import Checkbox from '@mui/material/Checkbox';
import FormGroup from '@mui/material/FormGroup';
import AddBoxIcon from '@mui/icons-material/AddBox';
import FormControlLabel from '@mui/material/FormControlLabel';
import AddBoxTwoToneIcon from '@mui/icons-material/AddBoxTwoTone';
// ----------------------------------------------------------------------
type BoolFilterProps = {
label: string;
onClick?: React.MouseEventHandler<HTMLButtonElement>;
}
export function BoolFilter({ label }: BoolFilterProps) {
const [disabled, setDisabled] = useState<boolean>(true);
return (
<FormGroup row>
<Checkbox
{...{ inputProps: { 'aria-label': 'Checkbox demo' } }}
icon={<AddBoxTwoToneIcon />}
checkedIcon={<AddBoxIcon />}
onClick={() => setDisabled(!disabled)}
/>
{
disabled
? <FormControlLabel disabled control={<Switch />} label={label} />
: <FormControlLabel control={<Switch />} label={label} />
}
</FormGroup>
);
}

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

@ -3,15 +3,9 @@ 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 Checkbox from '@mui/material/Checkbox';
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 AddBoxIcon from '@mui/icons-material/AddBox';
import FormControlLabel from '@mui/material/FormControlLabel';
import AddBoxTwoToneIcon from '@mui/icons-material/AddBoxTwoTone';
import { DashboardContent } from 'src/layouts/dashboard';
import { Filter, getFiltersAsync } from 'src/api/filter-service';
@ -19,6 +13,7 @@ import { Filter, getFiltersAsync } from 'src/api/filter-service';
import { Iconify } from 'src/components/iconify';
import { DocItem } from '../doc-item';
import { BoolFilter } from '../bool-filter';
import type { IDocItem } from '../doc-item';
// ----------------------------------------------------------------------
@ -107,20 +102,7 @@ export function DocSearchView({ posts }: Props) {
let filterComp;
switch (filter.type) {
case 'BOOLEAN':
filterComp =
<FormGroup row>
<Checkbox
{...{ inputProps: { 'aria-label': 'Checkbox demo' } }}
icon={<AddBoxTwoToneIcon />}
checkedIcon={<AddBoxIcon />}
onClick={() => setDisabledState(index, !disabledStates[index])}
/>
{
disabledStates[index] === undefined || disabledStates[index]
? <FormControlLabel disabled control={<Switch />} label={filter.label ?? filter.name} />
: <FormControlLabel control={<Switch />} label={filter.label ?? filter.name} />
}
</FormGroup>
filterComp = <BoolFilter label={filter.label ?? filter.name} />
break;
case 'VARCHAR':
case 'INTEGER':