Innovenergy
/
Innovenergy_trunk
3
1
Fork 1
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

allow multiple choices on status to filter

This commit is contained in:
Yinyin Liu 2026-04-29 15:01:02 +02:00
parent 8d43687829
commit 90f6c2a5f9
1 changed files with 28 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
typescript/frontend-marios2/src/content/dashboards/Tickets/TicketList.tsx
View File

@ -4,9 +4,11 @@ import {
Alert, Alert,
Box, Box,
Button, Button,
Checkbox,
Container, Container,
FormControl, FormControl,
InputLabel, InputLabel,
ListItemText,
MenuItem, MenuItem,
Select, Select,
Table, Table,
@ -52,7 +54,7 @@ function TicketList() {
const intl = useIntl(); const intl = useIntl();
const [tickets, setTickets] = useState<TicketSummary[]>([]); const [tickets, setTickets] = useState<TicketSummary[]>([]);
const [search, setSearch] = useState(''); const [search, setSearch] = useState('');
const [statusFilter, setStatusFilter] = useState<number | ''>(''); const [statusFilter, setStatusFilter] = useState<number[]>([]);
const [createOpen, setCreateOpen] = useState(false); const [createOpen, setCreateOpen] = useState(false);
const [error, setError] = useState(''); const [error, setError] = useState('');
@ -73,7 +75,7 @@ function TicketList() {
search === '' || search === '' ||
t.subject.toLowerCase().includes(search.toLowerCase()) || t.subject.toLowerCase().includes(search.toLowerCase()) ||
t.installationName.toLowerCase().includes(search.toLowerCase()); t.installationName.toLowerCase().includes(search.toLowerCase());
const matchesStatus = statusFilter === '' || t.status === statusFilter; const matchesStatus = statusFilter.length === 0 || statusFilter.includes(t.status);
return matchesSearch && matchesStatus; return matchesSearch && matchesStatus;
}) })
.sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()); .sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime());
@ -110,28 +112,37 @@ function TicketList() {
onChange={(e) => setSearch(e.target.value)} onChange={(e) => setSearch(e.target.value)}
sx={{ minWidth: 250 }} sx={{ minWidth: 250 }}
/> />
<FormControl size="small" sx={{ minWidth: 160 }}> <FormControl size="small" sx={{ minWidth: 200 }}>
<InputLabel> <InputLabel>
<FormattedMessage id="status" defaultMessage="Status" /> <FormattedMessage id="status" defaultMessage="Status" />
</InputLabel> </InputLabel>
<Select <Select
multiple
value={statusFilter} value={statusFilter}
label="Status" label={intl.formatMessage({ id: 'status', defaultMessage: 'Status' })}
onChange={(e) => onChange={(e) => {
setStatusFilter(e.target.value === '' ? '' : Number(e.target.value)) const value = e.target.value;
setStatusFilter(
typeof value === 'string'
? value.split(',').map(Number)
: (value as number[])
);
}}
renderValue={(selected) =>
(selected as number[])
.map((s) => intl.formatMessage(statusKeys[s]))
.join(', ')
} }
> >
<MenuItem value=""> {Object.entries(statusKeys).map(([val, msg]) => {
<FormattedMessage const num = Number(val);
id="allStatuses" return (
defaultMessage="All Statuses" <MenuItem key={val} value={num}>
/> <Checkbox checked={statusFilter.indexOf(num) > -1} />
<ListItemText primary={intl.formatMessage(msg)} />
</MenuItem> </MenuItem>
{Object.entries(statusKeys).map(([val, msg]) => ( );
<MenuItem key={val} value={Number(val)}> })}
{intl.formatMessage(msg)}
</MenuItem>
))}
</Select> </Select>
</FormControl> </FormControl>
</Box> </Box>