#

luxiaotao1123

2024-09-09 7d978fa8fc6e0adb86203ed469075981058f0627

#

 zy-acs-flow/src/page/user/UserList.jsx

@@ -42,6 +42,7 @@
import MyField from "../components/MyField";
import { PAGE_DRAWER_WIDTH, OPERATE_MODE } from '@/config/setting';
import * as Common from '@/utils/common';
import UserListAside from "./UserListAside";

const StyledDatagrid = styled(DatagridConfigurable)(({ theme }) => ({
    '& .css-1vooibu-MuiSvgIcon-root': {
@@ -131,6 +132,7 @@
                    </TopToolbar>
                )}
                perPage={25}
                aside={<UserListAside />}
            >
                <StyledDatagrid
                    preferenceKey='user'

 zy-acs-flow/src/page/user/UserListAside.jsx

New file
@@ -0,0 +1,88 @@
import React, { useState, useRef, useEffect, useMemo, useCallback } from "react";
import {
    SavedQueriesList,
    FilterLiveSearch,
    FilterList,
    FilterListItem,
} from 'react-admin';
import { Box, Typography, Card, CardContent } from '@mui/material';
import { styled } from '@mui/material/styles';
import { PAGE_DRAWER_WIDTH, OPERATE_MODE } from '@/config/setting';
import * as Common from '@/utils/common';
import MailIcon from '@mui/icons-material/MailOutline'
import BookmarkIcon from '@mui/icons-material/BookmarkBorder';
import CategoryIcon from '@mui/icons-material/LocalOffer';

const UserListAside = (props) => {

    const isSelected = (value, filters) => {
        const categories = filters.categories || [];
        return categories.includes(value.category);
    };

    const toggleFilter = (value, filters) => {
        const categories = filters.categories || [];
        return {
            ...filters,
            categories: categories.includes(value.category)
                // Remove the category if it was already present
                ? categories.filter(v => v !== value.category)
                // Add the category if it wasn't already present
                : [...categories, value.category],
        };
    };


    return (
        <>
            <Card
                sx={{
                    display: {
                        xs: 'none',
                        md: 'block',
                    },
                    order: -1,
                    // flex: '0 0 15em',
                    mr: 2,
                    mt: 6,
                    alignSelf: 'flex-start',
                    // width: 200
                }}
            >
                <CardContent>
                    <SavedQueriesList icon={<BookmarkIcon />} />

                    <FilterLiveSearch source='condition' hiddenLabel />

                    <FilterList label="aa" icon={<MailIcon />}>
                        <FilterListItem label="Yes" value={{ status: '1' }} />
                        <FilterListItem label="No" value={{ status: '0' }} />
                    </FilterList>

                    <FilterList label="Categories" icon={<CategoryIcon />}>
                        <FilterListItem
                            label="Tests"
                            value={{ category: 'tests' }}
                            isSelected={isSelected}
                            toggleFilter={toggleFilter}
                        />
                        <FilterListItem
                            label="News"
                            value={{ category: 'news' }}
                            isSelected={isSelected}
                            toggleFilter={toggleFilter}
                        />
                        <FilterListItem
                            label="Deals"
                            value={{ category: 'deals' }}
                            isSelected={isSelected}
                            toggleFilter={toggleFilter}
                        />
                    </FilterList>
                </CardContent>
            </Card>
        </>
    )
}

export default UserListAside;