|  |  | 
 |  |  |     FilterListItem, | 
 |  |  |     useTheme, | 
 |  |  |     useStore, | 
 |  |  |     useTranslate, | 
 |  |  | } from 'react-admin'; | 
 |  |  | import { Box, Typography, Card, CardContent } from '@mui/material'; | 
 |  |  | import * as Common from '@/utils/common'; | 
 |  |  | import WcIcon from '@mui/icons-material/Wc'; | 
 |  |  | import BookmarkIcon from '@mui/icons-material/BookmarkBorder'; | 
 |  |  | import StyleIcon from '@mui/icons-material/Style'; | 
 |  |  | import RunningWithErrorsIcon from '@mui/icons-material/RunningWithErrors'; | 
 |  |  | import TypeSpecimenIcon from '@mui/icons-material/TypeSpecimen'; | 
 |  |  | import AccessTimeIcon from '@mui/icons-material/AccessTime'; | 
 |  |  | import { | 
 |  |  |     endOfYesterday, | 
 |  |  | 
 |  |  |  | 
 |  |  | const TaskListAside = (props) => { | 
 |  |  |     const theme = useTheme(); | 
 |  |  |     const [roles, setRoles] = React.useState([]); | 
 |  |  |     const translate = useTranslate(); | 
 |  |  |     const [taskStsList, setTaskStsList] = React.useState([]); | 
 |  |  |     const [taskTypeList, setTaskTypeList] = React.useState([]); | 
 |  |  |  | 
 |  |  |     React.useEffect(() => { | 
 |  |  |         request.post('/role/list', {}).then(res => { | 
 |  |  |         request.post('/taskSts/list', {}).then(res => { | 
 |  |  |             if (res?.data?.code === 200) { | 
 |  |  |                 setRoles(res.data.data); | 
 |  |  |                 setTaskStsList(res.data.data); | 
 |  |  |             } | 
 |  |  |         }) | 
 |  |  |         request.post('/taskType/list', {}).then(res => { | 
 |  |  |             if (res?.data?.code === 200) { | 
 |  |  |                 setTaskTypeList(res.data.data); | 
 |  |  |             } | 
 |  |  |         }) | 
 |  |  |     }, []) | 
 |  |  |  | 
 |  |  |     const isSelected = (value, filters) => { | 
 |  |  |         const roleIds = filters.roleIds || []; | 
 |  |  |         return roleIds.includes(value.roleId); | 
 |  |  |     }; | 
 |  |  |  | 
 |  |  |     const toggleFilter = (value, filters) => { | 
 |  |  |         const roleIds = filters.roleIds || []; | 
 |  |  |         return { | 
 |  |  |             ...filters, | 
 |  |  |             roleIds: roleIds.includes(value.roleId) | 
 |  |  |                 ? roleIds.filter(v => v !== value.roleId) | 
 |  |  |                 // : [...roleIds, value.roleId], | 
 |  |  |                 : [value.roleId], | 
 |  |  |         }; | 
 |  |  |     }; | 
 |  |  |  | 
 |  |  |  | 
 |  |  |     return ( | 
 |  |  |         <Card | 
 |  |  | 
 |  |  |                 mt: 8, | 
 |  |  |                 alignSelf: 'flex-start', | 
 |  |  |                 border: theme[0] === 'light' && '1px solid #e0e0e3', | 
 |  |  |                 // width: 200 | 
 |  |  |                 width: 255 | 
 |  |  |             }} | 
 |  |  |         > | 
 |  |  |             <CardContent> | 
 |  |  |                 <SavedQueriesList icon={<BookmarkIcon />} /> | 
 |  |  |                 <FilterLiveSearch source='condition' hiddenLabel /> | 
 |  |  |                 <FilterLiveSearch label={translate("table.field.task.seqNum")} source='seqNum' hiddenLabel /> | 
 |  |  |  | 
 |  |  |                 <FilterList | 
 |  |  |                     label="filters.lastCreated" | 
 |  |  | 
 |  |  |                     /> | 
 |  |  |                 </FilterList> | 
 |  |  |  | 
 |  |  |                 <FilterList label="table.field.user.sex" icon={<WcIcon />}> | 
 |  |  |                     <FilterListItem label="table.field.user.sexes.female" value={{ sex: '2' }} /> | 
 |  |  |                     <FilterListItem label="table.field.user.sexes.male" value={{ sex: '1' }} /> | 
 |  |  |                     <FilterListItem label="table.field.user.sexes.unknown" value={{ sex: '0' }} /> | 
 |  |  |                 </FilterList> | 
 |  |  |  | 
 |  |  |                 <FilterList label="table.field.user.role" icon={<StyleIcon />}> | 
 |  |  |                     {roles.map(role => { | 
 |  |  |                 <FilterList label="table.field.task.taskSts" icon={<RunningWithErrorsIcon />}> | 
 |  |  |                     {taskStsList.map(taskSts => { | 
 |  |  |                         return ( | 
 |  |  |                             <FilterListItem | 
 |  |  |                                 key={role.id} | 
 |  |  |                                 label={`${role.name}`} | 
 |  |  |                                 value={{ roleId: role.id }} | 
 |  |  |                                 isSelected={isSelected} | 
 |  |  |                                 toggleFilter={toggleFilter} | 
 |  |  |                                 key={taskSts.id} | 
 |  |  |                                 label={`${taskSts.name}`} | 
 |  |  |                                 value={{ taskSts: taskSts.id }} | 
 |  |  |                             /> | 
 |  |  |                         ) | 
 |  |  |                     })} | 
 |  |  |                 </FilterList> | 
 |  |  |  | 
 |  |  |                 <FilterList label="table.field.task.taskType" icon={<TypeSpecimenIcon />}> | 
 |  |  |                     {taskTypeList.map(taskType => { | 
 |  |  |                         return ( | 
 |  |  |                             <FilterListItem | 
 |  |  |                                 key={taskType.id} | 
 |  |  |                                 label={`${taskType.name}`} | 
 |  |  |                                 value={{ taskType: taskType.id }} | 
 |  |  |                             /> | 
 |  |  |                         ) | 
 |  |  |                     })} |