From bf2c17247e59a3ee4bdc88647b167918253d231c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Matja=C5=BE=20=C4=8Crnko?= Date: Fri, 19 Jan 2024 19:20:02 +0100 Subject: [PATCH 01/12] feat: Change from Select to Autocomplete for single select in Reports --- .../src/reports/components/ReportFilter.jsx | 46 ++++++++++++++----- 1 file changed, 34 insertions(+), 12 deletions(-) diff --git a/modern/src/reports/components/ReportFilter.jsx b/modern/src/reports/components/ReportFilter.jsx index eab7d0ebec..de64188c31 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 && (
- {t(multiDevice ? 'deviceTitle' : 'reportDevice')} - + {multiDevice ? ( + <> + {t('deviceTitle')} + + + ) : ( + <> + a.name.localeCompare(b.name))} + getOptionLabel={(option) => option?.name ?? ''} + renderOption={(props, option) => ( + + {option.name} + + )} + value={devices[deviceId] || null} + onChange={(event, newValue) => { + dispatch(devicesActions.selectId(newValue?.id ?? null)) + }} + renderInput={(params) => } + /> + + )}
)} From 783eccb019824946d758c31f2f945ce2fc80fc2a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Matja=C5=BE=20=C4=8Crnko?= Date: Fri, 19 Jan 2024 19:21:02 +0100 Subject: [PATCH 02/12] wip: Modify SelectField so that it uses Autocomplete component instead of Select with single select --- modern/src/common/components/SelectField.jsx | 58 ++++++++++++++----- 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/PreferencesPage.jsx | 4 +- modern/src/settings/ServerPage.jsx | 5 +- modern/src/settings/UserPage.jsx | 5 +- .../settings/components/BaseCommandView.jsx | 3 +- 9 files changed, 58 insertions(+), 27 deletions(-) diff --git a/modern/src/common/components/SelectField.jsx b/modern/src/common/components/SelectField.jsx index 35f817a0dd..dc31a1561e 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 ( - {label} - + {multiple ? ( + <> + {label} + + + ) : ( + <> + { + 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) => ( + {titleGetter(option)} + )} + isOptionEqualToValue={(option, value) => keyGetter(option) == value} + value={value} + onChange={(e, nV) => {onChange({target:{value:nV ? keyGetter(nV) : emptyValue}})}} + renderInput={(params) => } + /> + + )} ); } diff --git a/modern/src/settings/ComputedAttributePage.jsx b/modern/src/settings/ComputedAttributePage.jsx index 3bae823196..f7ffe36e2d 100644 --- a/modern/src/settings/ComputedAttributePage.jsx +++ b/modern/src/settings/ComputedAttributePage.jsx @@ -156,7 +156,7 @@ const ComputedAttributePage = () => { 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 d8a30cbf07..66a71cdb4f 100644 --- a/modern/src/settings/DevicePage.jsx +++ b/modern/src/settings/DevicePage.jsx @@ -103,7 +103,7 @@ const DevicePage = () => { setItem({ ...item, groupId: Number(event.target.value) })} endpoint="/api/groups" label={t('groupParent')} @@ -134,7 +134,7 @@ const DevicePage = () => { label={t('deviceCategory')} /> 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 b6c516a123..174bdfb10b 100644 --- a/modern/src/settings/GeofencePage.jsx +++ b/modern/src/settings/GeofencePage.jsx @@ -76,7 +76,7 @@ const GeofencePage = () => { label={t('sharedDescription')} /> 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 c4ca867d58..b54e3b7f11 100644 --- a/modern/src/settings/GroupPage.jsx +++ b/modern/src/settings/GroupPage.jsx @@ -81,7 +81,7 @@ const GroupPage = () => { setItem({ ...item, groupId: Number(event.target.value) })} endpoint="/api/groups" label={t('groupParent')} diff --git a/modern/src/settings/PreferencesPage.jsx b/modern/src/settings/PreferencesPage.jsx index bd96b1405b..53d205f5a5 100644 --- a/modern/src/settings/PreferencesPage.jsx +++ b/modern/src/settings/PreferencesPage.jsx @@ -272,8 +272,8 @@ const PreferencesPage = () => { label={t('devicePrimaryInfo')} /> 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 07ce2dad35..4dc8788760 100644 --- a/modern/src/settings/ServerPage.jsx +++ b/modern/src/settings/ServerPage.jsx @@ -193,10 +193,11 @@ const ServerPage = () => { 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 d9a608eff7..7411ee6449 100644 --- a/modern/src/settings/UserPage.jsx +++ b/modern/src/settings/UserPage.jsx @@ -267,10 +267,11 @@ const UserPage = () => { 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 acf3909084..070ecfed05 100644 --- a/modern/src/settings/components/BaseCommandView.jsx +++ b/modern/src/settings/components/BaseCommandView.jsx @@ -28,9 +28,10 @@ const BaseCommandView = ({ deviceId, item, setItem }) => { return ( <> 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')} From b39ffd97e355dc2a6bba65ffa56947734455ed24 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Matja=C5=BE=20=C4=8Crnko?= Date: Mon, 22 Jan 2024 14:55:53 +0100 Subject: [PATCH 03/12] fix: Migrate ReportFilter to SelectField --- .../src/reports/components/ReportFilter.jsx | 43 ++++--------------- 1 file changed, 8 insertions(+), 35 deletions(-) diff --git a/modern/src/reports/components/ReportFilter.jsx b/modern/src/reports/components/ReportFilter.jsx index de64188c31..9e6a0a2301 100644 --- a/modern/src/reports/components/ReportFilter.jsx +++ b/modern/src/reports/components/ReportFilter.jsx @@ -92,41 +92,14 @@ const ReportFilter = ({ children, handleSubmit, handleSchedule, showOnly, ignore
{!ignoreDevice && (
- - {multiDevice ? ( - <> - {t('deviceTitle')} - - - ) : ( - <> - a.name.localeCompare(b.name))} - getOptionLabel={(option) => option?.name ?? ''} - renderOption={(props, option) => ( - - {option.name} - - )} - value={devices[deviceId] || null} - onChange={(event, newValue) => { - dispatch(devicesActions.selectId(newValue?.id ?? null)) - }} - renderInput={(params) => } - /> - - )} - + a.name.localeCompare(b.name))} + value={multiDevice ? deviceIds : deviceId || null} + onChange={(e) => dispatch(multiDevice ? devicesActions.selectIds(e.target.value) : devicesActions.selectId(e.target.value))} + multiple={multiDevice} + fullWidth + />
)} {includeGroups && ( From fd58e2bb16e41a6097135b77565a4f6e39f61d85 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Matja=C5=BE=20=C4=8Crnko?= Date: Mon, 22 Jan 2024 15:12:47 +0100 Subject: [PATCH 04/12] fix: Migrate more Select to SelectField --- .../src/reports/components/ReportFilter.jsx | 23 ++++++++----------- 1 file changed, 9 insertions(+), 14 deletions(-) diff --git a/modern/src/reports/components/ReportFilter.jsx b/modern/src/reports/components/ReportFilter.jsx index 9e6a0a2301..f7b4a6e169 100644 --- a/modern/src/reports/components/ReportFilter.jsx +++ b/modern/src/reports/components/ReportFilter.jsx @@ -104,19 +104,14 @@ const ReportFilter = ({ children, handleSubmit, handleSchedule, showOnly, ignore )} {includeGroups && (
- - {t('settingsGroups')} - - + a.name.localeCompare(b.name))} + value={groupIds} + onChange={(e) => dispatch(reportsActions.updateGroupIds(e.target.value))} + multiple + fullWidth + />
)} {button !== 'schedule' ? ( @@ -170,7 +165,7 @@ const ReportFilter = ({ children, handleSubmit, handleSchedule, showOnly, ignore
setCalendarId(Number(event.target.value))} endpoint="/api/calendars" label={t('sharedCalendar')} From 2bd044ecf9fa456e168057acc513bd3b4582d0c6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Matja=C5=BE=20=C4=8Crnko?= Date: Mon, 22 Jan 2024 15:22:33 +0100 Subject: [PATCH 05/12] fix: SelectField better label code --- modern/src/common/components/SelectField.jsx | 20 ++++++++------------ 1 file changed, 8 insertions(+), 12 deletions(-) diff --git a/modern/src/common/components/SelectField.jsx b/modern/src/common/components/SelectField.jsx index dc31a1561e..bc0571d5bb 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 = ({ { - 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) => ( {titleGetter(option)} )} From 19e73a4263d05cba07157d7e6a7f7f971745c662 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Matja=C5=BE=20=C4=8Crnko?= Date: Mon, 22 Jan 2024 18:25:48 +0100 Subject: [PATCH 06/12] 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(-) diff --git a/modern/src/common/components/SelectField.jsx b/modern/src/common/components/SelectField.jsx index bc0571d5bb..920c2640df 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 4dc8788760..09a02f9129 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 7411ee6449..dee7f2acf8 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 070ecfed05..f4d5d4b2f5 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')} From a0aaf68016db18a2ee69fddf74fcdbe72c9f5f17 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Matja=C5=BE=20=C4=8Crnko?= Date: Mon, 22 Jan 2024 19:59:36 +0100 Subject: [PATCH 07/12] fix: SelectField squash warning. --- modern/src/settings/NotificationPage.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/modern/src/settings/NotificationPage.jsx b/modern/src/settings/NotificationPage.jsx index fdefedaf67..cfb908b554 100644 --- a/modern/src/settings/NotificationPage.jsx +++ b/modern/src/settings/NotificationPage.jsx @@ -102,7 +102,7 @@ const NotificationPage = () => { /> {item.notificators?.includes('command') && ( setItem({ ...item, commandId: Number(event.target.value) })} endpoint="/api/commands" titleGetter={(it) => it.description} @@ -138,7 +138,7 @@ const NotificationPage = () => { setItem({ ...item, calendarId: Number(event.target.value) })} endpoint="/api/calendars" label={t('sharedCalendar')} From 829fa6caac936cc53395ca4fe7f05e13c2841588 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Matja=C5=BE=20=C4=8Crnko?= Date: Mon, 22 Jan 2024 20:05:32 +0100 Subject: [PATCH 08/12] 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(-) diff --git a/modern/src/common/components/SelectField.jsx b/modern/src/common/components/SelectField.jsx index 920c2640df..3d25ca8eb5 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 66a71cdb4f..c775f75e69 100644 --- a/modern/src/settings/DevicePage.jsx +++ b/modern/src/settings/DevicePage.jsx @@ -125,7 +125,6 @@ const DevicePage = () => { /> 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 cfb908b554..53eea8ae03 100644 --- a/modern/src/settings/NotificationPage.jsx +++ b/modern/src/settings/NotificationPage.jsx @@ -73,8 +73,7 @@ const NotificationPage = () => { 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 53d205f5a5..aaa9964586 100644 --- a/modern/src/settings/PreferencesPage.jsx +++ b/modern/src/settings/PreferencesPage.jsx @@ -264,7 +264,6 @@ const PreferencesPage = () => { setAttributes({ ...attributes, devicePrimary: e.target.value })} data={deviceFields} @@ -272,7 +271,6 @@ const PreferencesPage = () => { label={t('devicePrimaryInfo')} /> setAttributes({ ...attributes, deviceSecondary: e.target.value })} data={deviceFields} diff --git a/modern/src/settings/ServerPage.jsx b/modern/src/settings/ServerPage.jsx index 09a02f9129..eb7c7ac086 100644 --- a/modern/src/settings/ServerPage.jsx +++ b/modern/src/settings/ServerPage.jsx @@ -194,7 +194,6 @@ const ServerPage = () => { 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 dee7f2acf8..8a61b3b7b1 100644 --- a/modern/src/settings/UserPage.jsx +++ b/modern/src/settings/UserPage.jsx @@ -268,7 +268,6 @@ const UserPage = () => { setItem({ ...item, attributes: { ...item.attributes, timezone: e.target.value } })} endpoint="/api/server/timezones" keyGetter={(it) => it} From ba24d834925f3d66d875ae601e80a60cf03110cc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Matja=C5=BE=20=C4=8Crnko?= Date: Mon, 22 Jan 2024 21:06:27 +0100 Subject: [PATCH 09/12] 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(-) diff --git a/modern/src/common/components/SelectField.jsx b/modern/src/common/components/SelectField.jsx index 3d25ca8eb5..52ec591b97 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 f7b4a6e169..5b4c578651 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 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
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 f7ffe36e2d..e3a5e5a26c 100644 --- a/modern/src/settings/ComputedAttributePage.jsx +++ b/modern/src/settings/ComputedAttributePage.jsx @@ -156,7 +156,7 @@ const ComputedAttributePage = () => { 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 c775f75e69..726242708c 100644 --- a/modern/src/settings/DevicePage.jsx +++ b/modern/src/settings/DevicePage.jsx @@ -103,7 +103,7 @@ const DevicePage = () => { setItem({ ...item, groupId: Number(event.target.value) })} endpoint="/api/groups" label={t('groupParent')} @@ -133,7 +133,7 @@ const DevicePage = () => { label={t('deviceCategory')} /> 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 174bdfb10b..1d9e614bbb 100644 --- a/modern/src/settings/GeofencePage.jsx +++ b/modern/src/settings/GeofencePage.jsx @@ -76,7 +76,7 @@ const GeofencePage = () => { label={t('sharedDescription')} /> 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 b54e3b7f11..64498b9caf 100644 --- a/modern/src/settings/GroupPage.jsx +++ b/modern/src/settings/GroupPage.jsx @@ -81,7 +81,7 @@ const GroupPage = () => { 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 53eea8ae03..44399f92c6 100644 --- a/modern/src/settings/NotificationPage.jsx +++ b/modern/src/settings/NotificationPage.jsx @@ -73,7 +73,7 @@ const NotificationPage = () => { setItem({ ...item, type: e.target.value })} endpoint="/api/notifications/types" keyGetter={(it) => it.type} @@ -101,7 +101,7 @@ const NotificationPage = () => { /> {item.notificators?.includes('command') && ( setItem({ ...item, commandId: Number(event.target.value) })} endpoint="/api/commands" titleGetter={(it) => it.description} @@ -137,7 +137,7 @@ const NotificationPage = () => { 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 aaa9964586..cfdcf88536 100644 --- a/modern/src/settings/PreferencesPage.jsx +++ b/modern/src/settings/PreferencesPage.jsx @@ -271,7 +271,7 @@ const PreferencesPage = () => { label={t('devicePrimaryInfo')} /> 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 eb7c7ac086..1020092b44 100644 --- a/modern/src/settings/ServerPage.jsx +++ b/modern/src/settings/ServerPage.jsx @@ -193,7 +193,7 @@ const ServerPage = () => { 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 8a61b3b7b1..f276beca42 100644 --- a/modern/src/settings/UserPage.jsx +++ b/modern/src/settings/UserPage.jsx @@ -267,7 +267,7 @@ const UserPage = () => { 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 f4d5d4b2f5..bb70c3b9b3 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 ( <> setItem({ ...item, type: e.target.value, attributes: {} })} endpoint={deviceId ? `/api/commands/types?${new URLSearchParams({ deviceId }).toString()}` : '/api/commands/types'} keyGetter={(it) => it.type} From 7fe52f39c7ccd1e7bfeb07b1480b9b25a08226ab Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Matja=C5=BE=20=C4=8Crnko?= Date: Tue, 23 Jan 2024 16:25:31 +0100 Subject: [PATCH 10/12] fix: SelectField code style cleanup --- modern/src/common/components/SelectField.jsx | 26 +++++++++----------- 1 file changed, 12 insertions(+), 14 deletions(-) diff --git a/modern/src/common/components/SelectField.jsx b/modern/src/common/components/SelectField.jsx index 52ec591b97..ee512a7871 100644 --- a/modern/src/common/components/SelectField.jsx +++ b/modern/src/common/components/SelectField.jsx @@ -55,20 +55,18 @@ const SelectField = ({ ) : ( - <> - ( - {titleGetter(option)} - )} - isOptionEqualToValue={(option, value) => keyGetter(option) == value} - value={value} - onChange={(e, nV) => {onChange({target:{value:nV ? keyGetter(nV) : emptyValue}})}} - renderInput={(params) => } - /> - + ( + {titleGetter(option)} + )} + isOptionEqualToValue={(option, value) => keyGetter(option) == value} + value={value} + onChange={(_, value) => {onChange({ target: { value: value ? keyGetter(value) : emptyValue }})}} + renderInput={(params) => } + /> )} ); From b87f2387ae597e57d9e2591ab01595e76b65d7c5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Matja=C5=BE=20=C4=8Crnko?= Date: Tue, 23 Jan 2024 16:31:04 +0100 Subject: [PATCH 11/12] Update modern/src/common/components/SelectField.jsx Co-authored-by: Anton Tananaev --- modern/src/common/components/SelectField.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/modern/src/common/components/SelectField.jsx b/modern/src/common/components/SelectField.jsx index ee512a7871..c7efe75f4c 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) => } /> )} From 3229441f4b254eb13266486ff5b29e3dd952357b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Matja=C5=BE=20=C4=8Crnko?= Date: Fri, 8 Mar 2024 11:10:49 +0100 Subject: [PATCH 12/12] fix: Linting. --- modern/src/common/components/SelectField.jsx | 10 +++++----- modern/src/reports/components/ReportFilter.jsx | 8 ++++---- 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/modern/src/common/components/SelectField.jsx b/modern/src/common/components/SelectField.jsx index c7efe75f4c..db8c30b0b7 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) => ( {titleGetter(option)} )} - 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) => } /> )} diff --git a/modern/src/reports/components/ReportFilter.jsx b/modern/src/reports/components/ReportFilter.jsx index 5b4c578651..e6e08f16ea 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
{!ignoreDevice && (
- a.name.localeCompare(b.name))} value={multiDevice ? deviceIds : deviceId} @@ -104,13 +104,13 @@ const ReportFilter = ({ children, handleSubmit, handleSchedule, showOnly, ignore )} {includeGroups && (
- a.name.localeCompare(b.name))} value={groupIds} onChange={(e) => dispatch(reportsActions.updateGroupIds(e.target.value))} multiple - fullWidth + fullWidth />
)}