From 783eccb019824946d758c31f2f945ce2fc80fc2a Mon Sep 17 00:00:00 2001
From: Matjaž Črnko <m.crnko@txt.si>
Date: Fri, 19 Jan 2024 19:21:02 +0100
Subject: wip: Modify SelectField so that it uses Autocomplete component
 instead of Select with single select

---
 modern/src/common/components/SelectField.jsx | 58 +++++++++++++++++++++-------
 1 file changed, 43 insertions(+), 15 deletions(-)

(limited to 'modern/src/common/components/SelectField.jsx')

diff --git a/modern/src/common/components/SelectField.jsx b/modern/src/common/components/SelectField.jsx
index 35f817a0..dc31a156 100644
--- a/modern/src/common/components/SelectField.jsx
+++ b/modern/src/common/components/SelectField.jsx
@@ -1,5 +1,5 @@
 import {
-  FormControl, InputLabel, MenuItem, Select,
+  FormControl, InputLabel, MenuItem, Select, Autocomplete, TextField
 } from '@mui/material';
 import React, { useState } from 'react';
 import { useEffectAsync } from '../../reactHelper';
@@ -14,6 +14,7 @@ const SelectField = ({
   onChange,
   endpoint,
   data,
+  keyField = 'id',
   keyGetter = (item) => item.id,
   titleGetter = (item) => item.name,
 }) => {
@@ -33,20 +34,47 @@ const SelectField = ({
   if (items) {
     return (
       <FormControl fullWidth={fullWidth}>
-        <InputLabel>{label}</InputLabel>
-        <Select
-          label={label}
-          multiple={multiple}
-          value={value}
-          onChange={onChange}
-        >
-          {!multiple && emptyValue !== null && (
-            <MenuItem value={emptyValue}>{emptyTitle}</MenuItem>
-          )}
-          {items.map((item) => (
-            <MenuItem key={keyGetter(item)} value={keyGetter(item)}>{titleGetter(item)}</MenuItem>
-          ))}
-        </Select>
+        {multiple ? (
+          <>
+            <InputLabel>{label}</InputLabel>
+            <Select
+              label={label}
+              multiple
+              value={value}
+              onChange={onChange}
+            >
+              {items.map((item) => (
+                <MenuItem key={keyGetter(item)} value={keyGetter(item)}>{titleGetter(item)}</MenuItem>
+              ))}
+            </Select>
+          </>
+        ) : (
+          <>
+            <Autocomplete
+              size="small"
+              options={items}
+              getOptionLabel={(option) => {
+                                      if (typeof option != 'object') {
+                                        if (keyField) {
+                                          option = items.find(obj => obj[keyField] === option)
+                                        } else {
+                                          option = items.find(obj => obj === option)
+                                        }
+                                      }
+                                      const title = option ? titleGetter(option) : ''
+                                      return title ? title : ''
+                                      }
+                              }
+              renderOption={(props, option) => (
+                <MenuItem {...props} key={keyGetter(option)} value={keyGetter(option)}>{titleGetter(option)}</MenuItem>
+              )}
+              isOptionEqualToValue={(option, value) => keyGetter(option) == value}
+              value={value}
+              onChange={(e, nV) => {onChange({target:{value:nV ? keyGetter(nV) : emptyValue}})}}
+              renderInput={(params) => <TextField {...params} label={label} />}
+            />
+          </>
+        )}
       </FormControl>
     );
   }
-- 
cgit v1.2.3


From 2bd044ecf9fa456e168057acc513bd3b4582d0c6 Mon Sep 17 00:00:00 2001
From: Matjaž Črnko <m.crnko@txt.si>
Date: Mon, 22 Jan 2024 15:22:33 +0100
Subject: fix: SelectField better label code

---
 modern/src/common/components/SelectField.jsx | 20 ++++++++------------
 1 file changed, 8 insertions(+), 12 deletions(-)

(limited to 'modern/src/common/components/SelectField.jsx')

diff --git a/modern/src/common/components/SelectField.jsx b/modern/src/common/components/SelectField.jsx
index dc31a156..bc0571d5 100644
--- a/modern/src/common/components/SelectField.jsx
+++ b/modern/src/common/components/SelectField.jsx
@@ -20,6 +20,13 @@ const SelectField = ({
 }) => {
   const [items, setItems] = useState(data);
 
+  const getOptionLabel = (option) => {
+    if (typeof option !== 'object') {
+      option = items.find(obj => keyField ? obj[keyField] === option : obj === option);
+    }
+    return option ? titleGetter(option) : '';
+  }
+
   useEffectAsync(async () => {
     if (endpoint) {
       const response = await fetch(endpoint);
@@ -53,18 +60,7 @@ const SelectField = ({
             <Autocomplete
               size="small"
               options={items}
-              getOptionLabel={(option) => {
-                                      if (typeof option != 'object') {
-                                        if (keyField) {
-                                          option = items.find(obj => obj[keyField] === option)
-                                        } else {
-                                          option = items.find(obj => obj === option)
-                                        }
-                                      }
-                                      const title = option ? titleGetter(option) : ''
-                                      return title ? title : ''
-                                      }
-                              }
+              getOptionLabel={getOptionLabel}
               renderOption={(props, option) => (
                 <MenuItem {...props} key={keyGetter(option)} value={keyGetter(option)}>{titleGetter(option)}</MenuItem>
               )}
-- 
cgit v1.2.3


From 19e73a4263d05cba07157d7e6a7f7f971745c662 Mon Sep 17 00:00:00 2001
From: Matjaž Črnko <m.crnko@txt.si>
Date: Mon, 22 Jan 2024 18:25:48 +0100
Subject: fix: SelectField - cleaner approach for Autocomplete value handling

---
 modern/src/common/components/SelectField.jsx       | 3 +--
 modern/src/settings/ServerPage.jsx                 | 1 -
 modern/src/settings/UserPage.jsx                   | 1 -
 modern/src/settings/components/BaseCommandView.jsx | 1 -
 4 files changed, 1 insertion(+), 5 deletions(-)

(limited to 'modern/src/common/components/SelectField.jsx')

diff --git a/modern/src/common/components/SelectField.jsx b/modern/src/common/components/SelectField.jsx
index bc0571d5..920c2640 100644
--- a/modern/src/common/components/SelectField.jsx
+++ b/modern/src/common/components/SelectField.jsx
@@ -14,7 +14,6 @@ const SelectField = ({
   onChange,
   endpoint,
   data,
-  keyField = 'id',
   keyGetter = (item) => item.id,
   titleGetter = (item) => item.name,
 }) => {
@@ -22,7 +21,7 @@ const SelectField = ({
 
   const getOptionLabel = (option) => {
     if (typeof option !== 'object') {
-      option = items.find(obj => keyField ? obj[keyField] === option : obj === option);
+      option = items.find(obj => keyGetter(obj) === option);
     }
     return option ? titleGetter(option) : '';
   }
diff --git a/modern/src/settings/ServerPage.jsx b/modern/src/settings/ServerPage.jsx
index 4dc87887..09a02f91 100644
--- a/modern/src/settings/ServerPage.jsx
+++ b/modern/src/settings/ServerPage.jsx
@@ -197,7 +197,6 @@ const ServerPage = () => {
                   emptyValue={null}
                   onChange={(e) => setItem({ ...item, attributes: { ...item.attributes, timezone: e.target.value } })}
                   endpoint="/api/server/timezones"
-                  keyField={false}
                   keyGetter={(it) => it}
                   titleGetter={(it) => it}
                   label={t('sharedTimezone')}
diff --git a/modern/src/settings/UserPage.jsx b/modern/src/settings/UserPage.jsx
index 7411ee64..dee7f2ac 100644
--- a/modern/src/settings/UserPage.jsx
+++ b/modern/src/settings/UserPage.jsx
@@ -271,7 +271,6 @@ const UserPage = () => {
                 emptyValue={null}
                 onChange={(e) => setItem({ ...item, attributes: { ...item.attributes, timezone: e.target.value } })}
                 endpoint="/api/server/timezones"
-                keyField={false}
                 keyGetter={(it) => it}
                 titleGetter={(it) => it}
                 label={t('sharedTimezone')}
diff --git a/modern/src/settings/components/BaseCommandView.jsx b/modern/src/settings/components/BaseCommandView.jsx
index 070ecfed..f4d5d4b2 100644
--- a/modern/src/settings/components/BaseCommandView.jsx
+++ b/modern/src/settings/components/BaseCommandView.jsx
@@ -31,7 +31,6 @@ const BaseCommandView = ({ deviceId, item, setItem }) => {
         value={item.type || null}
         onChange={(e) => setItem({ ...item, type: e.target.value, attributes: {} })}
         endpoint={deviceId ? `/api/commands/types?${new URLSearchParams({ deviceId }).toString()}` : '/api/commands/types'}
-        keyField='type'
         keyGetter={(it) => it.type}
         titleGetter={(it) => t(prefixString('command', it.type))}
         label={t('sharedType')}
-- 
cgit v1.2.3


From 829fa6caac936cc53395ca4fe7f05e13c2841588 Mon Sep 17 00:00:00 2001
From: Matjaž Črnko <m.crnko@txt.si>
Date: Mon, 22 Jan 2024 20:05:32 +0100
Subject: fix: SelectField default emptyValue to null

---
 modern/src/common/components/SelectField.jsx | 2 +-
 modern/src/settings/DevicePage.jsx           | 1 -
 modern/src/settings/NotificationPage.jsx     | 3 +--
 modern/src/settings/PreferencesPage.jsx      | 2 --
 modern/src/settings/ServerPage.jsx           | 1 -
 modern/src/settings/UserPage.jsx             | 1 -
 6 files changed, 2 insertions(+), 8 deletions(-)

(limited to 'modern/src/common/components/SelectField.jsx')

diff --git a/modern/src/common/components/SelectField.jsx b/modern/src/common/components/SelectField.jsx
index 920c2640..3d25ca8e 100644
--- a/modern/src/common/components/SelectField.jsx
+++ b/modern/src/common/components/SelectField.jsx
@@ -9,7 +9,7 @@ const SelectField = ({
   fullWidth,
   multiple,
   value,
-  emptyValue = 0,
+  emptyValue = null,
   emptyTitle = '\u00a0',
   onChange,
   endpoint,
diff --git a/modern/src/settings/DevicePage.jsx b/modern/src/settings/DevicePage.jsx
index 66a71cdb..c775f75e 100644
--- a/modern/src/settings/DevicePage.jsx
+++ b/modern/src/settings/DevicePage.jsx
@@ -125,7 +125,6 @@ const DevicePage = () => {
               />
               <SelectField
                 value={item.category || 'default'}
-                emptyValue={null}
                 onChange={(event) => setItem({ ...item, category: event.target.value })}
                 data={deviceCategories.map((category) => ({
                   id: category,
diff --git a/modern/src/settings/NotificationPage.jsx b/modern/src/settings/NotificationPage.jsx
index cfb908b5..53eea8ae 100644
--- a/modern/src/settings/NotificationPage.jsx
+++ b/modern/src/settings/NotificationPage.jsx
@@ -73,8 +73,7 @@ const NotificationPage = () => {
             </AccordionSummary>
             <AccordionDetails className={classes.details}>
               <SelectField
-                value={item.type}
-                emptyValue={null}
+                value={item.type || null}
                 onChange={(e) => setItem({ ...item, type: e.target.value })}
                 endpoint="/api/notifications/types"
                 keyGetter={(it) => it.type}
diff --git a/modern/src/settings/PreferencesPage.jsx b/modern/src/settings/PreferencesPage.jsx
index 53d205f5..aaa99645 100644
--- a/modern/src/settings/PreferencesPage.jsx
+++ b/modern/src/settings/PreferencesPage.jsx
@@ -264,7 +264,6 @@ const PreferencesPage = () => {
               </AccordionSummary>
               <AccordionDetails className={classes.details}>
                 <SelectField
-                  emptyValue={null}
                   value={attributes.devicePrimary || 'name'}
                   onChange={(e) => setAttributes({ ...attributes, devicePrimary: e.target.value })}
                   data={deviceFields}
@@ -272,7 +271,6 @@ const PreferencesPage = () => {
                   label={t('devicePrimaryInfo')}
                 />
                 <SelectField
-                  emptyValue={null}
                   value={attributes.deviceSecondary || null}
                   onChange={(e) => setAttributes({ ...attributes, deviceSecondary: e.target.value })}
                   data={deviceFields}
diff --git a/modern/src/settings/ServerPage.jsx b/modern/src/settings/ServerPage.jsx
index 09a02f91..eb7c7ac0 100644
--- a/modern/src/settings/ServerPage.jsx
+++ b/modern/src/settings/ServerPage.jsx
@@ -194,7 +194,6 @@ const ServerPage = () => {
                 </FormControl>
                 <SelectField
                   value={item.attributes.timezone || null}
-                  emptyValue={null}
                   onChange={(e) => setItem({ ...item, attributes: { ...item.attributes, timezone: e.target.value } })}
                   endpoint="/api/server/timezones"
                   keyGetter={(it) => it}
diff --git a/modern/src/settings/UserPage.jsx b/modern/src/settings/UserPage.jsx
index dee7f2ac..8a61b3b7 100644
--- a/modern/src/settings/UserPage.jsx
+++ b/modern/src/settings/UserPage.jsx
@@ -268,7 +268,6 @@ const UserPage = () => {
               </FormControl>
               <SelectField
                 value={(item.attributes && item.attributes.timezone) || null}
-                emptyValue={null}
                 onChange={(e) => setItem({ ...item, attributes: { ...item.attributes, timezone: e.target.value } })}
                 endpoint="/api/server/timezones"
                 keyGetter={(it) => it}
-- 
cgit v1.2.3


From ba24d834925f3d66d875ae601e80a60cf03110cc Mon Sep 17 00:00:00 2001
From: Matjaž Črnko <m.crnko@txt.si>
Date: Mon, 22 Jan 2024 21:06:27 +0100
Subject: fix: SelectField default to null value and fix emptyTitle

---
 modern/src/common/components/SelectField.jsx       | 6 +++---
 modern/src/reports/components/ReportFilter.jsx     | 4 ++--
 modern/src/settings/ComputedAttributePage.jsx      | 2 +-
 modern/src/settings/DevicePage.jsx                 | 4 ++--
 modern/src/settings/GeofencePage.jsx               | 2 +-
 modern/src/settings/GroupPage.jsx                  | 2 +-
 modern/src/settings/NotificationPage.jsx           | 6 +++---
 modern/src/settings/PreferencesPage.jsx            | 2 +-
 modern/src/settings/ServerPage.jsx                 | 2 +-
 modern/src/settings/UserPage.jsx                   | 2 +-
 modern/src/settings/components/BaseCommandView.jsx | 2 +-
 11 files changed, 17 insertions(+), 17 deletions(-)

(limited to 'modern/src/common/components/SelectField.jsx')

diff --git a/modern/src/common/components/SelectField.jsx b/modern/src/common/components/SelectField.jsx
index 3d25ca8e..52ec591b 100644
--- a/modern/src/common/components/SelectField.jsx
+++ b/modern/src/common/components/SelectField.jsx
@@ -8,9 +8,9 @@ const SelectField = ({
   label,
   fullWidth,
   multiple,
-  value,
+  value = null,
   emptyValue = null,
-  emptyTitle = '\u00a0',
+  emptyTitle = '',
   onChange,
   endpoint,
   data,
@@ -23,7 +23,7 @@ const SelectField = ({
     if (typeof option !== 'object') {
       option = items.find(obj => keyGetter(obj) === option);
     }
-    return option ? titleGetter(option) : '';
+    return option ? titleGetter(option) : emptyTitle;
   }
 
   useEffectAsync(async () => {
diff --git a/modern/src/reports/components/ReportFilter.jsx b/modern/src/reports/components/ReportFilter.jsx
index f7b4a6e1..5b4c5786 100644
--- a/modern/src/reports/components/ReportFilter.jsx
+++ b/modern/src/reports/components/ReportFilter.jsx
@@ -95,7 +95,7 @@ const ReportFilter = ({ children, handleSubmit, handleSchedule, showOnly, ignore
           <SelectField 
             label={t(multiDevice ? 'deviceTitle' : 'reportDevice')}
             data={Object.values(devices).sort((a, b) => a.name.localeCompare(b.name))}
-            value={multiDevice ? deviceIds : deviceId || null}
+            value={multiDevice ? deviceIds : deviceId}
             onChange={(e) => dispatch(multiDevice ? devicesActions.selectIds(e.target.value) : devicesActions.selectId(e.target.value))}
             multiple={multiDevice}
             fullWidth
@@ -165,7 +165,7 @@ const ReportFilter = ({ children, handleSubmit, handleSchedule, showOnly, ignore
           </div>
           <div className={classes.filterItem}>
             <SelectField
-              value={calendarId || null}
+              value={calendarId}
               onChange={(event) => setCalendarId(Number(event.target.value))}
               endpoint="/api/calendars"
               label={t('sharedCalendar')}
diff --git a/modern/src/settings/ComputedAttributePage.jsx b/modern/src/settings/ComputedAttributePage.jsx
index f7ffe36e..e3a5e5a2 100644
--- a/modern/src/settings/ComputedAttributePage.jsx
+++ b/modern/src/settings/ComputedAttributePage.jsx
@@ -156,7 +156,7 @@ const ComputedAttributePage = () => {
             </AccordionSummary>
             <AccordionDetails className={classes.details}>
               <SelectField
-                value={deviceId || null}
+                value={deviceId}
                 onChange={(e) => setDeviceId(Number(e.target.value))}
                 endpoint="/api/devices"
                 label={t('sharedDevice')}
diff --git a/modern/src/settings/DevicePage.jsx b/modern/src/settings/DevicePage.jsx
index c775f75e..72624270 100644
--- a/modern/src/settings/DevicePage.jsx
+++ b/modern/src/settings/DevicePage.jsx
@@ -103,7 +103,7 @@ const DevicePage = () => {
             </AccordionSummary>
             <AccordionDetails className={classes.details}>
               <SelectField
-                value={item.groupId || null}
+                value={item.groupId}
                 onChange={(event) => setItem({ ...item, groupId: Number(event.target.value) })}
                 endpoint="/api/groups"
                 label={t('groupParent')}
@@ -133,7 +133,7 @@ const DevicePage = () => {
                 label={t('deviceCategory')}
               />
               <SelectField
-                value={item.calendarId || null}
+                value={item.calendarId}
                 onChange={(event) => setItem({ ...item, calendarId: Number(event.target.value) })}
                 endpoint="/api/calendars"
                 label={t('sharedCalendar')}
diff --git a/modern/src/settings/GeofencePage.jsx b/modern/src/settings/GeofencePage.jsx
index 174bdfb1..1d9e614b 100644
--- a/modern/src/settings/GeofencePage.jsx
+++ b/modern/src/settings/GeofencePage.jsx
@@ -76,7 +76,7 @@ const GeofencePage = () => {
                 label={t('sharedDescription')}
               />
               <SelectField
-                value={item.calendarId || null}
+                value={item.calendarId}
                 onChange={(event) => setItem({ ...item, calendarId: Number(event.target.value) })}
                 endpoint="/api/calendars"
                 label={t('sharedCalendar')}
diff --git a/modern/src/settings/GroupPage.jsx b/modern/src/settings/GroupPage.jsx
index b54e3b7f..64498b9c 100644
--- a/modern/src/settings/GroupPage.jsx
+++ b/modern/src/settings/GroupPage.jsx
@@ -81,7 +81,7 @@ const GroupPage = () => {
             </AccordionSummary>
             <AccordionDetails className={classes.details}>
               <SelectField
-                value={item.groupId || null}
+                value={item.groupId}
                 onChange={(event) => setItem({ ...item, groupId: Number(event.target.value) })}
                 endpoint="/api/groups"
                 label={t('groupParent')}
diff --git a/modern/src/settings/NotificationPage.jsx b/modern/src/settings/NotificationPage.jsx
index 53eea8ae..44399f92 100644
--- a/modern/src/settings/NotificationPage.jsx
+++ b/modern/src/settings/NotificationPage.jsx
@@ -73,7 +73,7 @@ const NotificationPage = () => {
             </AccordionSummary>
             <AccordionDetails className={classes.details}>
               <SelectField
-                value={item.type || null}
+                value={item.type}
                 onChange={(e) => setItem({ ...item, type: e.target.value })}
                 endpoint="/api/notifications/types"
                 keyGetter={(it) => it.type}
@@ -101,7 +101,7 @@ const NotificationPage = () => {
               />
               {item.notificators?.includes('command') && (
                 <SelectField
-                  value={item.commandId || null}
+                  value={item.commandId}
                   onChange={(event) => setItem({ ...item, commandId: Number(event.target.value) })}
                   endpoint="/api/commands"
                   titleGetter={(it) => it.description}
@@ -137,7 +137,7 @@ const NotificationPage = () => {
             </AccordionSummary>
             <AccordionDetails className={classes.details}>
               <SelectField
-                value={item.calendarId || null}
+                value={item.calendarId}
                 onChange={(event) => setItem({ ...item, calendarId: Number(event.target.value) })}
                 endpoint="/api/calendars"
                 label={t('sharedCalendar')}
diff --git a/modern/src/settings/PreferencesPage.jsx b/modern/src/settings/PreferencesPage.jsx
index aaa99645..cfdcf885 100644
--- a/modern/src/settings/PreferencesPage.jsx
+++ b/modern/src/settings/PreferencesPage.jsx
@@ -271,7 +271,7 @@ const PreferencesPage = () => {
                   label={t('devicePrimaryInfo')}
                 />
                 <SelectField
-                  value={attributes.deviceSecondary || null}
+                  value={attributes.deviceSecondary}
                   onChange={(e) => setAttributes({ ...attributes, deviceSecondary: e.target.value })}
                   data={deviceFields}
                   titleGetter={(it) => t(it.name)}
diff --git a/modern/src/settings/ServerPage.jsx b/modern/src/settings/ServerPage.jsx
index eb7c7ac0..1020092b 100644
--- a/modern/src/settings/ServerPage.jsx
+++ b/modern/src/settings/ServerPage.jsx
@@ -193,7 +193,7 @@ const ServerPage = () => {
                   </Select>
                 </FormControl>
                 <SelectField
-                  value={item.attributes.timezone || null}
+                  value={item.attributes.timezone}
                   onChange={(e) => setItem({ ...item, attributes: { ...item.attributes, timezone: e.target.value } })}
                   endpoint="/api/server/timezones"
                   keyGetter={(it) => it}
diff --git a/modern/src/settings/UserPage.jsx b/modern/src/settings/UserPage.jsx
index 8a61b3b7..f276beca 100644
--- a/modern/src/settings/UserPage.jsx
+++ b/modern/src/settings/UserPage.jsx
@@ -267,7 +267,7 @@ const UserPage = () => {
                 </Select>
               </FormControl>
               <SelectField
-                value={(item.attributes && item.attributes.timezone) || null}
+                value={item.attributes && item.attributes.timezone}
                 onChange={(e) => setItem({ ...item, attributes: { ...item.attributes, timezone: e.target.value } })}
                 endpoint="/api/server/timezones"
                 keyGetter={(it) => it}
diff --git a/modern/src/settings/components/BaseCommandView.jsx b/modern/src/settings/components/BaseCommandView.jsx
index f4d5d4b2..bb70c3b9 100644
--- a/modern/src/settings/components/BaseCommandView.jsx
+++ b/modern/src/settings/components/BaseCommandView.jsx
@@ -28,7 +28,7 @@ const BaseCommandView = ({ deviceId, item, setItem }) => {
   return (
     <>
       <SelectField
-        value={item.type || null}
+        value={item.type}
         onChange={(e) => setItem({ ...item, type: e.target.value, attributes: {} })}
         endpoint={deviceId ? `/api/commands/types?${new URLSearchParams({ deviceId }).toString()}` : '/api/commands/types'}
         keyGetter={(it) => it.type}
-- 
cgit v1.2.3


From 7fe52f39c7ccd1e7bfeb07b1480b9b25a08226ab Mon Sep 17 00:00:00 2001
From: Matjaž Črnko <m.crnko@txt.si>
Date: Tue, 23 Jan 2024 16:25:31 +0100
Subject: fix: SelectField code style cleanup

---
 modern/src/common/components/SelectField.jsx | 26 ++++++++++++--------------
 1 file changed, 12 insertions(+), 14 deletions(-)

(limited to 'modern/src/common/components/SelectField.jsx')

diff --git a/modern/src/common/components/SelectField.jsx b/modern/src/common/components/SelectField.jsx
index 52ec591b..ee512a78 100644
--- a/modern/src/common/components/SelectField.jsx
+++ b/modern/src/common/components/SelectField.jsx
@@ -55,20 +55,18 @@ const SelectField = ({
             </Select>
           </>
         ) : (
-          <>
-            <Autocomplete
-              size="small"
-              options={items}
-              getOptionLabel={getOptionLabel}
-              renderOption={(props, option) => (
-                <MenuItem {...props} key={keyGetter(option)} value={keyGetter(option)}>{titleGetter(option)}</MenuItem>
-              )}
-              isOptionEqualToValue={(option, value) => keyGetter(option) == value}
-              value={value}
-              onChange={(e, nV) => {onChange({target:{value:nV ? keyGetter(nV) : emptyValue}})}}
-              renderInput={(params) => <TextField {...params} label={label} />}
-            />
-          </>
+          <Autocomplete
+            size="small"
+            options={items}
+            getOptionLabel={getOptionLabel}
+            renderOption={(props, option) => (
+              <MenuItem {...props} key={keyGetter(option)} value={keyGetter(option)}>{titleGetter(option)}</MenuItem>
+            )}
+            isOptionEqualToValue={(option, value) => keyGetter(option) == value}
+            value={value}
+            onChange={(_, value) => {onChange({ target: { value: value ? keyGetter(value) : emptyValue }})}}
+            renderInput={(params) => <TextField {...params} label={label} />}
+          />
         )}
       </FormControl>
     );
-- 
cgit v1.2.3


From b87f2387ae597e57d9e2591ab01595e76b65d7c5 Mon Sep 17 00:00:00 2001
From: Matjaž Črnko <matjaz.crnko@gmail.com>
Date: Tue, 23 Jan 2024 16:31:04 +0100
Subject: Update modern/src/common/components/SelectField.jsx

Co-authored-by: Anton Tananaev <anton.tananaev@gmail.com>
---
 modern/src/common/components/SelectField.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'modern/src/common/components/SelectField.jsx')

diff --git a/modern/src/common/components/SelectField.jsx b/modern/src/common/components/SelectField.jsx
index ee512a78..c7efe75f 100644
--- a/modern/src/common/components/SelectField.jsx
+++ b/modern/src/common/components/SelectField.jsx
@@ -64,7 +64,7 @@ const SelectField = ({
             )}
             isOptionEqualToValue={(option, value) => keyGetter(option) == value}
             value={value}
-            onChange={(_, value) => {onChange({ target: { value: value ? keyGetter(value) : emptyValue }})}}
+            onChange={(_, value) => onChange({ target: { value: value ? keyGetter(value) : emptyValue }})}
             renderInput={(params) => <TextField {...params} label={label} />}
           />
         )}
-- 
cgit v1.2.3


From 3229441f4b254eb13266486ff5b29e3dd952357b Mon Sep 17 00:00:00 2001
From: Matjaž Črnko <m.crnko@txt.si>
Date: Fri, 8 Mar 2024 11:10:49 +0100
Subject: fix: Linting.

---
 modern/src/common/components/SelectField.jsx   | 10 +++++-----
 modern/src/reports/components/ReportFilter.jsx |  8 ++++----
 2 files changed, 9 insertions(+), 9 deletions(-)

(limited to 'modern/src/common/components/SelectField.jsx')

diff --git a/modern/src/common/components/SelectField.jsx b/modern/src/common/components/SelectField.jsx
index c7efe75f..db8c30b0 100644
--- a/modern/src/common/components/SelectField.jsx
+++ b/modern/src/common/components/SelectField.jsx
@@ -1,5 +1,5 @@
 import {
-  FormControl, InputLabel, MenuItem, Select, Autocomplete, TextField
+  FormControl, InputLabel, MenuItem, Select, Autocomplete, TextField,
 } from '@mui/material';
 import React, { useState } from 'react';
 import { useEffectAsync } from '../../reactHelper';
@@ -21,10 +21,10 @@ const SelectField = ({
 
   const getOptionLabel = (option) => {
     if (typeof option !== 'object') {
-      option = items.find(obj => keyGetter(obj) === option);
+      option = items.find((obj) => keyGetter(obj) === option);
     }
     return option ? titleGetter(option) : emptyTitle;
-  }
+  };
 
   useEffectAsync(async () => {
     if (endpoint) {
@@ -62,9 +62,9 @@ const SelectField = ({
             renderOption={(props, option) => (
               <MenuItem {...props} key={keyGetter(option)} value={keyGetter(option)}>{titleGetter(option)}</MenuItem>
             )}
-            isOptionEqualToValue={(option, value) => keyGetter(option) == value}
+            isOptionEqualToValue={(option, value) => keyGetter(option) === value}
             value={value}
-            onChange={(_, value) => onChange({ target: { value: value ? keyGetter(value) : emptyValue }})}
+            onChange={(_, value) => onChange({ target: { value: value ? keyGetter(value) : emptyValue } })}
             renderInput={(params) => <TextField {...params} label={label} />}
           />
         )}
diff --git a/modern/src/reports/components/ReportFilter.jsx b/modern/src/reports/components/ReportFilter.jsx
index 5b4c5786..e6e08f16 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, Autocomplete
+  FormControl, InputLabel, Select, MenuItem, Button, TextField, Typography,
 } from '@mui/material';
 import { useDispatch, useSelector } from 'react-redux';
 import dayjs from 'dayjs';
@@ -92,7 +92,7 @@ const ReportFilter = ({ children, handleSubmit, handleSchedule, showOnly, ignore
     <div className={classes.filter}>
       {!ignoreDevice && (
         <div className={classes.filterItem}>
-          <SelectField 
+          <SelectField
             label={t(multiDevice ? 'deviceTitle' : 'reportDevice')}
             data={Object.values(devices).sort((a, b) => a.name.localeCompare(b.name))}
             value={multiDevice ? deviceIds : deviceId}
@@ -104,13 +104,13 @@ const ReportFilter = ({ children, handleSubmit, handleSchedule, showOnly, ignore
       )}
       {includeGroups && (
         <div className={classes.filterItem}>
-          <SelectField 
+          <SelectField
             label={t('settingsGroups')}
             data={Object.values(groups).sort((a, b) => a.name.localeCompare(b.name))}
             value={groupIds}
             onChange={(e) => dispatch(reportsActions.updateGroupIds(e.target.value))}
             multiple
-            fullWidth  
+            fullWidth
           />
         </div>
       )}
-- 
cgit v1.2.3

