feat: Change from Select to Autocomplete for single select in Reports

1 files changed, 34 insertions, 12 deletions

diff --git a/modern/src/reports/components/ReportFilter.jsx b/modern/src/reports/components/ReportFilter.jsx
index eab7d0eb..de64188c 100644
--- a/modern/src/reports/components/ReportFilter.jsx
+++ b/modern/src/reports/components/ReportFilter.jsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import {
-  FormControl, InputLabel, Select, MenuItem, Button, TextField, Typography,
+  FormControl, InputLabel, Select, MenuItem, Button, TextField, Typography, Autocomplete
 } from '@mui/material';
 import { useDispatch, useSelector } from 'react-redux';
 import dayjs from 'dayjs';
@@ -93,17 +93,39 @@ const ReportFilter = ({ children, handleSubmit, handleSchedule, showOnly, ignore
       {!ignoreDevice && (
         <div className={classes.filterItem}>
           <FormControl fullWidth>
-            <InputLabel>{t(multiDevice ? 'deviceTitle' : 'reportDevice')}</InputLabel>
-            <Select
-              label={t(multiDevice ? 'deviceTitle' : 'reportDevice')}
-              value={multiDevice ? deviceIds : deviceId || ''}
-              onChange={(e) => dispatch(multiDevice ? devicesActions.selectIds(e.target.value) : devicesActions.selectId(e.target.value))}
-              multiple={multiDevice}
-            >
-              {Object.values(devices).sort((a, b) => a.name.localeCompare(b.name)).map((device) => (
-                <MenuItem key={device.id} value={device.id}>{device.name}</MenuItem>
-              ))}
-            </Select>
+          {multiDevice ? (
+            <>
+              <InputLabel>{t('deviceTitle')}</InputLabel>
+              <Select
+                label={t('deviceTitle')}
+                value={deviceIds}
+                onChange={(e) => dispatch(devicesActions.selectIds(e.target.value))}
+                multiple
+              >
+                {Object.values(devices).sort((a, b) => a.name.localeCompare(b.name)).map((device) => (
+                  <MenuItem key={device.id} value={device.id}>{device.name}</MenuItem>
+                ))}
+              </Select>
+            </>
+          ) : (
+            <>
+              <Autocomplete
+                size="small"
+                options={Object.values(devices).sort((a, b) => a.name.localeCompare(b.name))}
+                getOptionLabel={(option) => option?.name ?? ''}
+                renderOption={(props, option) => (
+                  <MenuItem {...props} key={option.id}>
+                      {option.name}
+                  </MenuItem>
+                )}
+                value={devices[deviceId] || null}
+                onChange={(event, newValue) => {
+                  dispatch(devicesActions.selectId(newValue?.id ?? null))
+                }}
+                renderInput={(params) => <TextField {...params} label={t('reportDevice')} />}
+              />
+            </>
+          )}
           </FormControl>
         </div>
       )}