allow multiple choices on status to filter

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

@@ -4,9 +4,11 @@ import {
   Alert,
   Box,
   Button,
+  Checkbox,
   Container,
   FormControl,
   InputLabel,
+  ListItemText,
   MenuItem,
   Select,
   Table,
@@ -52,7 +54,7 @@ function TicketList() {
   const intl = useIntl();
   const [tickets, setTickets] = useState<TicketSummary[]>([]);
   const [search, setSearch] = useState('');
-  const [statusFilter, setStatusFilter] = useState<number | ''>('');
+  const [statusFilter, setStatusFilter] = useState<number[]>([]);
   const [createOpen, setCreateOpen] = useState(false);
   const [error, setError] = useState('');
 
@@ -73,7 +75,7 @@ function TicketList() {
         search === '' ||
         t.subject.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;
     })
     .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)}
             sx={{ minWidth: 250 }}
           />
-          <FormControl size="small" sx={{ minWidth: 160 }}>
+          <FormControl size="small" sx={{ minWidth: 200 }}>
             <InputLabel>
               <FormattedMessage id="status" defaultMessage="Status" />
             </InputLabel>
             <Select
+              multiple
               value={statusFilter}
-              label="Status"
-              onChange={(e) =>
-                setStatusFilter(e.target.value === '' ? '' : Number(e.target.value))
+              label={intl.formatMessage({ id: 'status', defaultMessage: 'Status' })}
+              onChange={(e) => {
+                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="">
-                <FormattedMessage
-                  id="allStatuses"
-                  defaultMessage="All Statuses"
-                />
-              </MenuItem>
-              {Object.entries(statusKeys).map(([val, msg]) => (
-                <MenuItem key={val} value={Number(val)}>
-                  {intl.formatMessage(msg)}
-                </MenuItem>
-              ))}
+              {Object.entries(statusKeys).map(([val, msg]) => {
+                const num = Number(val);
+                return (
+                  <MenuItem key={val} value={num}>
+                    <Checkbox checked={statusFilter.indexOf(num) > -1} />
+                    <ListItemText primary={intl.formatMessage(msg)} />
+                  </MenuItem>
+                );
+              })}
             </Select>
           </FormControl>
         </Box>