import React, { useState, useRef, useEffect, useMemo, useCallback } from "react";
|
import {
|
SavedQueriesList,
|
FilterLiveSearch,
|
FilterList,
|
FilterListItem,
|
useStore,
|
} from 'react-admin';
|
import { Box, Typography, Card, CardContent, useTheme } 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 AccessTimeIcon from '@mui/icons-material/AccessTime';
|
import {
|
endOfYesterday,
|
startOfWeek,
|
subWeeks,
|
startOfMonth,
|
subMonths,
|
} from 'date-fns';
|
import request from '@/utils/request'
|
|
const UserListAside = (props) => {
|
const theme = useTheme();
|
const [roles, setRoles] = React.useState([]);
|
|
React.useEffect(() => {
|
request.post('/role/list', {}).then(res => {
|
if (res?.data?.code === 200) {
|
setRoles(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
|
sx={{
|
display: { xs: 'none', md: 'block', },
|
order: -1,
|
mr: 2,
|
mt: 8,
|
alignSelf: 'flex-start',
|
border: theme.palette.mode === 'light' && '1px solid #e0e0e3',
|
// width: 200
|
}}
|
>
|
<CardContent>
|
<SavedQueriesList icon={<BookmarkIcon />} />
|
<FilterLiveSearch source='condition' hiddenLabel />
|
|
<FilterList
|
label="filters.lastCreated"
|
icon={<AccessTimeIcon />}
|
>
|
<FilterListItem
|
label="filters.today"
|
value={{
|
timeStart: endOfYesterday().toISOString(),
|
timeEnd: undefined,
|
}}
|
/>
|
<FilterListItem
|
label="filters.thisWeek"
|
value={{
|
timeStart: startOfWeek(new Date()).toISOString(),
|
timeEnd: undefined,
|
}}
|
/>
|
<FilterListItem
|
label="filters.lastWeek"
|
value={{
|
timeStart: subWeeks(startOfWeek(new Date()), 1).toISOString(),
|
timeEnd: startOfWeek(new Date()).toISOString(),
|
}}
|
/>
|
<FilterListItem
|
label="filters.thisMonth"
|
value={{
|
timeStart: startOfMonth(new Date()).toISOString(),
|
timeEnd: undefined,
|
}}
|
/>
|
<FilterListItem
|
label="filters.lastMonth"
|
value={{
|
timeStart: subMonths(startOfMonth(new Date()), 1).toISOString(),
|
timeEnd: startOfMonth(new Date()).toISOString(),
|
}}
|
/>
|
<FilterListItem
|
label="filters.earlier"
|
value={{
|
timeStart: undefined,
|
timeEnd: subMonths(startOfMonth(new Date()), 1).toISOString(),
|
}}
|
/>
|
</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 => {
|
return (
|
<FilterListItem
|
key={role.id}
|
label={`${role.name}`}
|
value={{ roleId: role.id }}
|
isSelected={isSelected}
|
toggleFilter={toggleFilter}
|
/>
|
)
|
})}
|
</FilterList>
|
|
</CardContent>
|
</Card>
|
)
|
}
|
|
export default UserListAside;
|
