From 783eccb019824946d758c31f2f945ce2fc80fc2a Mon Sep 17 00:00:00 2001 From: Matjaž Črnko 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 ( - {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) => } + /> + + )} ); } -- cgit v1.2.3 From 2bd044ecf9fa456e168057acc513bd3b4582d0c6 Mon Sep 17 00:00:00 2001 From: Matjaž Črnko 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 = ({ { - 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)} )} -- cgit v1.2.3 From 19e73a4263d05cba07157d7e6a7f7f971745c662 Mon Sep 17 00:00:00 2001 From: Matjaž Črnko 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 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 = () => { /> 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 = () => { 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 = () => { 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 09a02f91..eb7c7ac0 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 dee7f2ac..8a61b3b7 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} -- cgit v1.2.3 From ba24d834925f3d66d875ae601e80a60cf03110cc Mon Sep 17 00:00:00 2001 From: Matjaž Črnko 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 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 f7ffe36e..e3a5e5a2 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 c775f75e..72624270 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 174bdfb1..1d9e614b 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 b54e3b7f..64498b9c 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 53eea8ae..44399f92 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 aaa99645..cfdcf885 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 eb7c7ac0..1020092b 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 8a61b3b7..f276beca 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 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 ( <> 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 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 = ({ ) : ( - <> - ( - {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) => } + /> )} ); -- cgit v1.2.3 From b87f2387ae597e57d9e2591ab01595e76b65d7c5 Mon Sep 17 00:00:00 2001 From: Matjaž Črnko Date: Tue, 23 Jan 2024 16:31:04 +0100 Subject: 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(-) (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) => } /> )} -- cgit v1.2.3 From 3229441f4b254eb13266486ff5b29e3dd952357b Mon Sep 17 00:00:00 2001 From: Matjaž Črnko 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) => ( {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 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
{!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 />
)} -- cgit v1.2.3