#

vincentlu

2025-02-14 992b4d6c4b964082adfabbef2f44dc50698ce8ed

 rsf-admin/src/page/role/AssignPermissions.jsx

@@ -3,7 +3,7 @@
    useTranslate,
    useNotify,
} from 'react-admin';
import { Box, Button, Card, Stack, CardContent } from '@mui/material';
import { Box, Button, Card, Stack, CardContent, Skeleton } from '@mui/material';
import { SimpleTreeView, TreeItem, RichTreeView, useTreeViewApiRef } from '@mui/x-tree-view';
import SaveIcon from '@mui/icons-material/Save';
import request from '@/utils/request'
@@ -15,10 +15,11 @@
    const translate = useTranslate();
    const notify = useNotify();

    const [treeData, setTreeData] = React.useState([]);
    const [selectedItems, setSelectedItems] = React.useState([]);
    const [expandedItems, setExpandedItems] = React.useState([]);
    const toggledItemRef = React.useRef({});
    const [loading, setLoading] = useState(false);
    const [treeData, setTreeData] = useState([]);
    const [selectedItems, setSelectedItems] = useState([]);
    const [expandedItems, setExpandedItems] = useState([]);
    const toggledItemRef = useRef({});
    const apiRef = useTreeViewApiRef();

    useEffect(() => {
@@ -45,7 +46,9 @@
            } else {
                notify(res.data.msg, { type: 'error' });
            }
            setLoading(false);
        }
        setLoading(true);
        setTimeout(() => {
            http();
        }, 200);
@@ -197,22 +200,27 @@
                            boxShadow: '0 1px 2px rgba(0, 0, 0, 0.2)',
                            backgroundColor: 'background.paper',
                        }}>
                            <RichTreeView
                                multiSelect
                                checkboxSelection
                                apiRef={apiRef}
                                items={treeData}
                                selectedItems={selectedItems}
                                onSelectedItemsChange={handleSelectedItemsChange}
                                onItemSelectionToggle={(event, itemId, isSelected) => {
                                    toggledItemRef.current[itemId] = isSelected;
                                }}
                            {loading ? (
                                <SkeletonBox />
                            ) : (
                                <RichTreeView
                                    multiSelect
                                    checkboxSelection
                                    apiRef={apiRef}
                                    items={treeData}
                                    selectedItems={selectedItems}
                                    onSelectedItemsChange={handleSelectedItemsChange}
                                    onItemSelectionToggle={(event, itemId, isSelected) => {
                                        toggledItemRef.current[itemId] = isSelected;
                                    }}

                                expandedItems={expandedItems}
                                onExpandedItemsChange={(event, itemIds) => {
                                    setExpandedItems(itemIds);
                                }}
                            />
                                    expandedItems={expandedItems}
                                    onExpandedItemsChange={(event, itemIds) => {
                                        setExpandedItems(itemIds);
                                    }}
                                />
                            )}

                        </Box>
                    </Box>
                    <Box sx={{
@@ -326,4 +334,27 @@
    return childrenIds;
};

const SkeletonBox = () => {
    return (
        <Stack spacing={1}>
            <Skeleton variant="rounded" width={200} height={20} />
            <Skeleton variant="rounded" width={200} height={20} style={{ marginLeft: '50px' }} />
            <Skeleton variant="rounded" width={200} height={20} style={{ marginLeft: '50px' }} />
            <Skeleton variant="rounded" width={200} height={20} style={{ marginLeft: '50px' }} />
            <Skeleton variant="rounded" width={200} height={20} />
            <Skeleton variant="rounded" width={200} height={20} style={{ marginLeft: '50px' }} />
            <Skeleton variant="rounded" width={200} height={20} style={{ marginLeft: '50px' }} />
            <Skeleton variant="rounded" width={200} height={20} style={{ marginLeft: '50px' }} />
            <Skeleton variant="rounded" width={200} height={20} />
            <Skeleton variant="rounded" width={200} height={20} style={{ marginLeft: '50px' }} />
            <Skeleton variant="rounded" width={200} height={20} style={{ marginLeft: '50px' }} />
            <Skeleton variant="rounded" width={200} height={20} style={{ marginLeft: '50px' }} />
            <Skeleton variant="rounded" width={200} height={20} />
            <Skeleton variant="rounded" width={200} height={20} style={{ marginLeft: '50px' }} />
            <Skeleton variant="rounded" width={200} height={20} style={{ marginLeft: '50px' }} />
            <Skeleton variant="rounded" width={200} height={20} style={{ marginLeft: '50px' }} />
        </Stack>
    )
}

export default AssignPermissions;