Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 | 1x 22x 22x 22x 22x 22x 22x 22x 4x 12x 4x 22x 4x 16x 4x 8x 8x 66x 22x 1x 1x 1x 22x 1x 1x 1x 22x 1x 1x 1x 1x 1x 22x 1x 1x 1x 1x 22x 66x 1x 1x 1x 1x 1x 1x 1x 51x 15x | import {
Button,
Container,
Dialog,
DialogActions,
DialogContent,
DialogTitle,
IconButton,
List,
ListItem,
ListItemButton,
ListItemText,
Stack,
TextField,
Typography,
} from '@mui/material';
import { Delete, Edit } from '@mui/icons-material';
import { format } from 'date-fns';
import { useMemo, useState } from 'react';
import { Link as RouterLink } from 'react-router-dom';
import { usePickLists, useAreas } from '../hooks/dataHooks';
import { useDatabase } from '../context/DBProvider';
import { PickList } from '../models/PickList';
export const PickListsScreen = () => {
const lists = usePickLists();
const areas = useAreas();
const db = useDatabase();
const [editingList, setEditingList] = useState<PickList | null>(null);
const [areaId, setAreaId] = useState('');
const [notes, setNotes] = useState('');
const areaNameById = useMemo(() => {
const map = new Map<string, string>();
areas.forEach((area) => map.set(area.id, area.name));
return map;
}, [areas]);
const sortedLists = useMemo(() => {
const locale = new Intl.Collator(undefined, { sensitivity: 'base' });
const normalizeAreaName = (areaId: string) =>
(areaNameById.get(areaId) ?? 'Unknown area').trim();
return [...lists].sort((a, b) => {
const nameComparison = locale.compare(
normalizeAreaName(a.area_id),
normalizeAreaName(b.area_id),
);
Eif (nameComparison !== 0) return nameComparison;
return a.created_at - b.created_at;
});
}, [areaNameById, lists]);
const getAreaName = (areaId: string) => areaNameById.get(areaId) ?? 'Unknown area';
const openEdit = (list: PickList) => {
setEditingList(list);
setAreaId(list.area_id);
setNotes(list.notes ?? '');
};
const closeEdit = () => {
setEditingList(null);
setAreaId('');
setNotes('');
};
const saveEdit = async () => {
Iif (!editingList || !areaId) return;
const listId = editingList.id;
const trimmedNotes = notes.trim() || undefined;
closeEdit();
await db.pickLists.update(listId, {
area_id: areaId,
notes: trimmedNotes,
});
};
const deleteList = async (list: PickList) => {
const confirmed = window.confirm('Remove this pick list and its items?');
Iif (!confirmed) return;
await db.pickItems.where('pick_list_id').equals(list.id).delete();
await db.pickLists.delete(list.id);
};
return (
<Container sx={{ py: 4 }}>
<Typography variant="h5" gutterBottom>
Pick Lists
</Typography>
<Button component={RouterLink} to="/start" variant="contained" sx={{ mb: 2 }}>
Add Pick List
</Button>
<List>
{sortedLists.map((list) => (
<ListItem key={list.id} divider secondaryAction={
<Stack direction="row" spacing={1}>
<IconButton
edge="end"
aria-label="Edit"
onClick={(event) => {
event.stopPropagation();
event.preventDefault();
openEdit(list);
}}
>
<Edit />
</IconButton>
<IconButton
edge="end"
aria-label="Delete"
onClick={(event) => {
event.stopPropagation();
event.preventDefault();
deleteList(list);
}}
>
<Delete />
</IconButton>
</Stack>
}>
<ListItemButton component={RouterLink} to={`/pick-lists/${list.id}`}>
<ListItemText
primary={getAreaName(list.area_id)}
secondary={
<Stack spacing={0.5}>
{list.notes ? <span>{list.notes}</span> : null}
<Typography variant="caption" color="text.secondary">
Created {format(list.created_at, 'PPpp')}
</Typography>
</Stack>
}
secondaryTypographyProps={{ component: 'div' }}
/>
</ListItemButton>
</ListItem>
))}
</List>
{editingList ? (
<Dialog open onClose={closeEdit} fullWidth>
<DialogTitle>Edit Pick List</DialogTitle>
<DialogContent sx={{ pt: 1 }}>
<Stack spacing={2} mt={1}>
<TextField
select
SelectProps={{ native: true }}
fullWidth
label="Area"
value={areaId}
onChange={(event) => setAreaId(event.target.value)}
>
{areas.map((area) => (
<option key={area.id} value={area.id}>
{area.name}
</option>
))}
</TextField>
<TextField
label="Notes"
value={notes}
onChange={(event) => setNotes(event.target.value)}
multiline
minRows={2}
/>
</Stack>
</DialogContent>
<DialogActions>
<Button onClick={closeEdit}>Cancel</Button>
<Button variant="contained" onClick={saveEdit} disabled={!areaId}>
Save Changes
</Button>
</DialogActions>
</Dialog>
) : null}
</Container>
);
};
|