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/settings/GroupPage.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'modern/src/settings/GroupPage.jsx')

diff --git a/modern/src/settings/GroupPage.jsx b/modern/src/settings/GroupPage.jsx
index c4ca867d..b54e3b7f 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 || 0}
+                value={item.groupId || null}
                 onChange={(event) => setItem({ ...item, groupId: Number(event.target.value) })}
                 endpoint="/api/groups"
                 label={t('groupParent')}
-- 
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/settings/GroupPage.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