import React, { useEffect, useState } from "react";
|
import { useTranslate } from "react-admin";
|
import {
|
Drawer,
|
Box,
|
Typography,
|
IconButton,
|
Stack,
|
useTheme,
|
List,
|
ListItemButton,
|
ListItemText,
|
ListItemAvatar,
|
Avatar,
|
CircularProgress,
|
} from '@mui/material';
|
import CloseIcon from '@mui/icons-material/Close';
|
import { PAGE_DRAWER_WIDTH } from '@/config/setting';
|
import { fetchAreaList } from './http';
|
|
const AreaList = ({
|
open,
|
onClose,
|
zoneId,
|
width = PAGE_DRAWER_WIDTH,
|
onSelect,
|
}) => {
|
const translate = useTranslate();
|
const theme = useTheme();
|
const themeMode = theme.palette.mode;
|
const [areas, setAreas] = useState([]);
|
const [loading, setLoading] = useState(false);
|
|
useEffect(() => {
|
if (!open) {
|
setAreas([]);
|
return;
|
}
|
setLoading(true);
|
fetchAreaList(zoneId)
|
.then((list) => {
|
setAreas(Array.isArray(list) ? list : []);
|
})
|
.finally(() => setLoading(false));
|
}, [open, zoneId]);
|
|
const handleItemClick = (area) => {
|
onSelect?.(area);
|
};
|
|
return (
|
<Drawer
|
variant="persistent"
|
open={open}
|
anchor="right"
|
onClose={onClose}
|
sx={{ zIndex: 100, opacity: 0.95 }}
|
>
|
{open && (
|
<Box pt={12} width={{ xs: '100vW', sm: width }} height={'calc(100vh - 200px);'} mt={{ xs: 2, sm: 1 }} sx={{
|
}}>
|
<Stack direction="row" alignItems="center" px={3} py={2}>
|
<Typography variant="h6" flex={1}>
|
{translate('page.map.action.areaList')}
|
</Typography>
|
<IconButton onClick={onClose} size="small">
|
<CloseIcon />
|
</IconButton>
|
</Stack>
|
|
<Box px={3} pb={3}>
|
{loading ? (
|
<Box display="flex" justifyContent="center" mt={6}>
|
<CircularProgress />
|
</Box>
|
) : (
|
<List dense sx={{ maxHeight: '70vh', overflowY: 'auto' }}>
|
{areas.length === 0 && (
|
<Typography variant="body2" color="text.secondary" textAlign="center" py={4}>
|
{translate('page.map.area.form.codesEmpty')}
|
</Typography>
|
)}
|
{areas.map((area) => (
|
<ListItemButton
|
key={area.id}
|
onClick={() => handleItemClick(area)}
|
sx={{
|
borderRadius: 2,
|
mb: 1,
|
boxShadow:
|
themeMode === 'light'
|
? '0 2px 8px rgba(0,0,0,0.07)'
|
: '0 2px 8px rgba(255,255,255,0.12)',
|
}}
|
>
|
<ListItemAvatar>
|
<Avatar
|
variant="rounded"
|
sx={{
|
bgcolor: area.color ? Number(area.color) : theme.palette.grey[400],
|
color: theme.palette.getContrastText(
|
area.color ? Number(area.color) : theme.palette.grey[400]
|
),
|
}}
|
>
|
{area.name?.slice(0, 1)?.toUpperCase() || 'A'}
|
</Avatar>
|
</ListItemAvatar>
|
<ListItemText
|
primary={area.name || translate('page.map.area.form.name')}
|
secondary={area.code ? `${translate('page.map.area.form.code')}: ${area.code}` : ''}
|
/>
|
</ListItemButton>
|
))}
|
</List>
|
)}
|
</Box>
|
</Box>
|
)}
|
</Drawer>
|
);
|
};
|
|
export default AreaList;
|
