100 lines
3.3 KiB
TypeScript
100 lines
3.3 KiB
TypeScript
'use client'
|
|
|
|
// MUI Imports
|
|
import Drawer from '@mui/material/Drawer'
|
|
import Typography from '@mui/material/Typography'
|
|
import Checkbox from '@mui/material/Checkbox'
|
|
import FormControlLabel from '@mui/material/FormControlLabel'
|
|
import List from '@mui/material/List'
|
|
import ListItem from '@mui/material/ListItem'
|
|
import ListItemText from '@mui/material/ListItemText'
|
|
import Divider from '@mui/material/Divider'
|
|
import Box from '@mui/material/Box'
|
|
|
|
// Component Imports
|
|
import PerfectScrollbar from 'react-perfect-scrollbar'
|
|
|
|
// Config
|
|
import type { RowId, CardId } from '@views/dashboards/farm/farmDashboardConfig'
|
|
import { ROW_IDS } from '@views/dashboards/farm/farmDashboardConfig'
|
|
|
|
type RowCardsType = Record<RowId, CardId[]>
|
|
type RowLabelsType = Record<RowId, string>
|
|
type CardLabelsType = Record<CardId, string>
|
|
|
|
type FarmDashboardSettingsDrawerProps = {
|
|
open: boolean
|
|
onClose: () => void
|
|
disabledCardIds: string[]
|
|
onToggleCard: (cardId: CardId, disabled: boolean) => void
|
|
cardLabels: CardLabelsType
|
|
rowLabels: RowLabelsType
|
|
rowCards: RowCardsType
|
|
}
|
|
|
|
const FarmDashboardSettingsDrawer = (props: FarmDashboardSettingsDrawerProps) => {
|
|
const { open, onClose, disabledCardIds, onToggleCard, cardLabels, rowLabels, rowCards } = props
|
|
const disabledSet = new Set(disabledCardIds)
|
|
|
|
return (
|
|
<Drawer
|
|
open={open}
|
|
onClose={onClose}
|
|
anchor='end'
|
|
variant='temporary'
|
|
ModalProps={{
|
|
disablePortal: true,
|
|
disableAutoFocus: true,
|
|
disableScrollLock: true,
|
|
keepMounted: true
|
|
}}
|
|
PaperProps={{
|
|
className: 'is-[320px] shadow-none'
|
|
}}
|
|
sx={{ zIndex: 'drawer' }}
|
|
>
|
|
<Box className='flex flex-col is-full' sx={{ height: '100%' }}>
|
|
<Box className='p-6'>
|
|
<Typography variant='h5'>Dashboard Settings</Typography>
|
|
<Typography variant='body2' color='text.secondary' sx={{ mt: 0.5 }}>
|
|
Toggle cards to show or hide on the dashboard
|
|
</Typography>
|
|
</Box>
|
|
<Divider />
|
|
<PerfectScrollbar options={{ wheelPropagation: false }} className='flex-1'>
|
|
<List className='p-4'>
|
|
{ROW_IDS.map(rowId => (
|
|
<Box key={rowId}>
|
|
<Typography variant='subtitle2' color='text.secondary' sx={{ px: 2, py: 1 }}>
|
|
{rowLabels[rowId]}
|
|
</Typography>
|
|
{rowCards[rowId].map(cardId => {
|
|
const isDisabled = disabledSet.has(cardId)
|
|
return (
|
|
<ListItem key={cardId} disablePadding sx={{ py: 0.5 }}>
|
|
<FormControlLabel
|
|
control={
|
|
<Checkbox
|
|
checked={!isDisabled}
|
|
onChange={e => onToggleCard(cardId, !e.target.checked)}
|
|
size='small'
|
|
/>
|
|
}
|
|
label={<ListItemText primary={cardLabels[cardId]} primaryTypographyProps={{ variant: 'body2' }} />}
|
|
sx={{ m: 0, width: '100%' }}
|
|
/>
|
|
</ListItem>
|
|
)
|
|
})}
|
|
<Divider component='li' sx={{ my: 2 }} />
|
|
</Box>
|
|
))}
|
|
</List>
|
|
</PerfectScrollbar>
|
|
</Box>
|
|
</Drawer>
|
|
)
|
|
}
|
|
|
|
export default FarmDashboardSettingsDrawer
|