From 016d7a978c197d42c5844d66cd0482593c039321 Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Fri, 1 Mar 2024 13:31:32 +0800 Subject: [PATCH 01/11] don't categorize when searching --- src/pages/EditReportFieldDropdownPage.tsx | 28 +++++++++++++++++------ 1 file changed, 21 insertions(+), 7 deletions(-) diff --git a/src/pages/EditReportFieldDropdownPage.tsx b/src/pages/EditReportFieldDropdownPage.tsx index 1ad3c766221..ddd5330e389 100644 --- a/src/pages/EditReportFieldDropdownPage.tsx +++ b/src/pages/EditReportFieldDropdownPage.tsx @@ -46,15 +46,29 @@ function EditReportFieldDropdownPage({fieldName, onSubmit, fieldID, fieldValue, const [headerMessage, setHeaderMessage] = useState(''); const sections = useMemo(() => { - const filteredRecentOptions = recentlyUsedOptions.filter((option) => option.toLowerCase().includes(searchValue.toLowerCase())); - const filteredRestOfOptions = fieldOptions.filter((option) => !filteredRecentOptions.includes(option) && option.toLowerCase().includes(searchValue.toLowerCase())); - setHeaderMessage(!filteredRecentOptions.length && !filteredRestOfOptions.length ? translate('common.noResultsFound') : ''); + if (searchValue) { + const filteredOptions = fieldOptions.filter((option) => option.toLowerCase().includes(searchValue.toLowerCase())); + setHeaderMessage(!filteredOptions.length ? translate('common.noResultsFound') : ''); + return [ + { + shouldShow: false, + data: filteredOptions.map((option) => ({ + text: option, + keyForList: option, + searchText: option, + tooltipText: option, + })), + }, + ]; + } + const restOfOptions = fieldOptions.filter((option) => !recentlyUsedOptions.includes(option)); + setHeaderMessage(!restOfOptions.length && !recentlyUsedOptions.length ? translate('common.noResultsFound') : ''); return [ { title: translate('common.recents'), - shouldShow: filteredRecentOptions.length > 0, - data: filteredRecentOptions.map((option) => ({ + shouldShow: recentlyUsedOptions.length > 0, + data: recentlyUsedOptions.map((option) => ({ text: option, keyForList: option, searchText: option, @@ -63,8 +77,8 @@ function EditReportFieldDropdownPage({fieldName, onSubmit, fieldID, fieldValue, }, { title: translate('common.all'), - shouldShow: filteredRestOfOptions.length > 0, - data: filteredRestOfOptions.map((option) => ({ + shouldShow: restOfOptions.length > 0, + data: restOfOptions.map((option) => ({ text: option, keyForList: option, searchText: option, From fc05a9f5fa50bb94c3ca18b7fa79bac208070ebe Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Mon, 4 Mar 2024 17:06:01 +0800 Subject: [PATCH 02/11] don't include selected value in recent and all --- src/pages/EditReportFieldDropdownPage.tsx | 20 +++++++++++++++----- 1 file changed, 15 insertions(+), 5 deletions(-) diff --git a/src/pages/EditReportFieldDropdownPage.tsx b/src/pages/EditReportFieldDropdownPage.tsx index ddd5330e389..b21a9d68506 100644 --- a/src/pages/EditReportFieldDropdownPage.tsx +++ b/src/pages/EditReportFieldDropdownPage.tsx @@ -62,13 +62,23 @@ function EditReportFieldDropdownPage({fieldName, onSubmit, fieldID, fieldValue, ]; } - const restOfOptions = fieldOptions.filter((option) => !recentlyUsedOptions.includes(option)); - setHeaderMessage(!restOfOptions.length && !recentlyUsedOptions.length ? translate('common.noResultsFound') : ''); + const selectedValue = fieldValue; + + setHeaderMessage(!fieldOptions.length && !recentlyUsedOptions.length ? translate('common.noResultsFound') : ''); return [ + { + shouldShow: false, + data: [{ + text: selectedValue, + keyForList: selectedValue, + searchText: selectedValue, + tooltipText: selectedValue, + }], + }, { title: translate('common.recents'), shouldShow: recentlyUsedOptions.length > 0, - data: recentlyUsedOptions.map((option) => ({ + data: recentlyUsedOptions.filter((option) => option !== selectedValue).map((option) => ({ text: option, keyForList: option, searchText: option, @@ -77,8 +87,8 @@ function EditReportFieldDropdownPage({fieldName, onSubmit, fieldID, fieldValue, }, { title: translate('common.all'), - shouldShow: restOfOptions.length > 0, - data: restOfOptions.map((option) => ({ + shouldShow: fieldOptions.length > 0, + data: fieldOptions.filter((option) => option !== selectedValue).map((option) => ({ text: option, keyForList: option, searchText: option, From 24309d60de21e8c71775262782c45ce751a5cb7b Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Mon, 4 Mar 2024 17:10:56 +0800 Subject: [PATCH 03/11] fix lint --- src/pages/EditReportFieldDropdownPage.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/EditReportFieldDropdownPage.tsx b/src/pages/EditReportFieldDropdownPage.tsx index b21a9d68506..1b6631b6088 100644 --- a/src/pages/EditReportFieldDropdownPage.tsx +++ b/src/pages/EditReportFieldDropdownPage.tsx @@ -96,7 +96,7 @@ function EditReportFieldDropdownPage({fieldName, onSubmit, fieldID, fieldValue, })), }, ]; - }, [fieldOptions, recentlyUsedOptions, searchValue, translate]); + }, [fieldValue, fieldOptions, recentlyUsedOptions, searchValue, translate]); return ( Date: Mon, 4 Mar 2024 17:16:38 +0800 Subject: [PATCH 04/11] prettier --- src/pages/EditReportFieldDropdownPage.tsx | 42 +++++++++++++---------- 1 file changed, 24 insertions(+), 18 deletions(-) diff --git a/src/pages/EditReportFieldDropdownPage.tsx b/src/pages/EditReportFieldDropdownPage.tsx index 1b6631b6088..0fe7511b573 100644 --- a/src/pages/EditReportFieldDropdownPage.tsx +++ b/src/pages/EditReportFieldDropdownPage.tsx @@ -68,32 +68,38 @@ function EditReportFieldDropdownPage({fieldName, onSubmit, fieldID, fieldValue, return [ { shouldShow: false, - data: [{ - text: selectedValue, - keyForList: selectedValue, - searchText: selectedValue, - tooltipText: selectedValue, - }], + data: [ + { + text: selectedValue, + keyForList: selectedValue, + searchText: selectedValue, + tooltipText: selectedValue, + }, + ], }, { title: translate('common.recents'), shouldShow: recentlyUsedOptions.length > 0, - data: recentlyUsedOptions.filter((option) => option !== selectedValue).map((option) => ({ - text: option, - keyForList: option, - searchText: option, - tooltipText: option, - })), + data: recentlyUsedOptions + .filter((option) => option !== selectedValue) + .map((option) => ({ + text: option, + keyForList: option, + searchText: option, + tooltipText: option, + })), }, { title: translate('common.all'), shouldShow: fieldOptions.length > 0, - data: fieldOptions.filter((option) => option !== selectedValue).map((option) => ({ - text: option, - keyForList: option, - searchText: option, - tooltipText: option, - })), + data: fieldOptions + .filter((option) => option !== selectedValue) + .map((option) => ({ + text: option, + keyForList: option, + searchText: option, + tooltipText: option, + })), }, ]; }, [fieldValue, fieldOptions, recentlyUsedOptions, searchValue, translate]); From 6f58e2f765e9860d27d47e3968fa29d5c41200b8 Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Mon, 4 Mar 2024 20:20:44 +0800 Subject: [PATCH 05/11] conditionally add the section when it's not empty --- src/pages/EditReportFieldDropdownPage.tsx | 62 +++++++++++++---------- 1 file changed, 36 insertions(+), 26 deletions(-) diff --git a/src/pages/EditReportFieldDropdownPage.tsx b/src/pages/EditReportFieldDropdownPage.tsx index 0fe7511b573..8831cca1219 100644 --- a/src/pages/EditReportFieldDropdownPage.tsx +++ b/src/pages/EditReportFieldDropdownPage.tsx @@ -65,8 +65,14 @@ function EditReportFieldDropdownPage({fieldName, onSubmit, fieldID, fieldValue, const selectedValue = fieldValue; setHeaderMessage(!fieldOptions.length && !recentlyUsedOptions.length ? translate('common.noResultsFound') : ''); - return [ - { + + const newSections = []; + + const filteredRecentlyUsedOptions = recentlyUsedOptions.filter((option) => option !== selectedValue); + const filteredFieldOptions = fieldOptions.filter((option) => option !== selectedValue); + + if (selectedValue) { + newSections.push({ shouldShow: false, data: [ { @@ -76,32 +82,36 @@ function EditReportFieldDropdownPage({fieldName, onSubmit, fieldID, fieldValue, tooltipText: selectedValue, }, ], - }, - { + }); + } + + if (filteredRecentlyUsedOptions.length > 0) { + newSections.push({ title: translate('common.recents'), - shouldShow: recentlyUsedOptions.length > 0, - data: recentlyUsedOptions - .filter((option) => option !== selectedValue) - .map((option) => ({ - text: option, - keyForList: option, - searchText: option, - tooltipText: option, - })), - }, - { + shouldShow: true, + data: filteredRecentlyUsedOptions.map((option) => ({ + text: option, + keyForList: option, + searchText: option, + tooltipText: option, + })), + }); + } + + if (filteredFieldOptions.length > 0) { + newSections.push({ title: translate('common.all'), - shouldShow: fieldOptions.length > 0, - data: fieldOptions - .filter((option) => option !== selectedValue) - .map((option) => ({ - text: option, - keyForList: option, - searchText: option, - tooltipText: option, - })), - }, - ]; + shouldShow: true, + data: filteredFieldOptions.map((option) => ({ + text: option, + keyForList: option, + searchText: option, + tooltipText: option, + })), + }); + } + + return newSections; }, [fieldValue, fieldOptions, recentlyUsedOptions, searchValue, translate]); return ( From 563ed6a0ae9b1247432810b8872293be6f86ed97 Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Tue, 5 Mar 2024 11:49:09 +0800 Subject: [PATCH 06/11] moving code around --- src/pages/EditReportFieldDropdownPage.tsx | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/src/pages/EditReportFieldDropdownPage.tsx b/src/pages/EditReportFieldDropdownPage.tsx index 8831cca1219..97688c41750 100644 --- a/src/pages/EditReportFieldDropdownPage.tsx +++ b/src/pages/EditReportFieldDropdownPage.tsx @@ -62,15 +62,11 @@ function EditReportFieldDropdownPage({fieldName, onSubmit, fieldID, fieldValue, ]; } - const selectedValue = fieldValue; - setHeaderMessage(!fieldOptions.length && !recentlyUsedOptions.length ? translate('common.noResultsFound') : ''); const newSections = []; - const filteredRecentlyUsedOptions = recentlyUsedOptions.filter((option) => option !== selectedValue); - const filteredFieldOptions = fieldOptions.filter((option) => option !== selectedValue); - + const selectedValue = fieldValue; if (selectedValue) { newSections.push({ shouldShow: false, @@ -85,6 +81,7 @@ function EditReportFieldDropdownPage({fieldName, onSubmit, fieldID, fieldValue, }); } + const filteredRecentlyUsedOptions = recentlyUsedOptions.filter((option) => option !== selectedValue); if (filteredRecentlyUsedOptions.length > 0) { newSections.push({ title: translate('common.recents'), @@ -98,6 +95,7 @@ function EditReportFieldDropdownPage({fieldName, onSubmit, fieldID, fieldValue, }); } + const filteredFieldOptions = fieldOptions.filter((option) => option !== selectedValue); if (filteredFieldOptions.length > 0) { newSections.push({ title: translate('common.all'), From 51cdd39de12d738e5a9357fe64f9840aa23688b4 Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Wed, 13 Mar 2024 20:04:15 +0800 Subject: [PATCH 07/11] remove header message --- src/pages/EditReportFieldDropdownPage.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/pages/EditReportFieldDropdownPage.tsx b/src/pages/EditReportFieldDropdownPage.tsx index 97688c41750..55dc9b1accd 100644 --- a/src/pages/EditReportFieldDropdownPage.tsx +++ b/src/pages/EditReportFieldDropdownPage.tsx @@ -62,8 +62,6 @@ function EditReportFieldDropdownPage({fieldName, onSubmit, fieldID, fieldValue, ]; } - setHeaderMessage(!fieldOptions.length && !recentlyUsedOptions.length ? translate('common.noResultsFound') : ''); - const newSections = []; const selectedValue = fieldValue; From 204d48621226a98ea8c015aec8f631fb1828658f Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Thu, 21 Mar 2024 16:10:55 +0800 Subject: [PATCH 08/11] get the header message from section data --- src/pages/EditReportFieldDropdownPage.tsx | 102 +++++++++++----------- 1 file changed, 50 insertions(+), 52 deletions(-) diff --git a/src/pages/EditReportFieldDropdownPage.tsx b/src/pages/EditReportFieldDropdownPage.tsx index bf22d739ce6..bd76f792b8f 100644 --- a/src/pages/EditReportFieldDropdownPage.tsx +++ b/src/pages/EditReportFieldDropdownPage.tsx @@ -43,71 +43,69 @@ function EditReportFieldDropdownPage({fieldName, onSubmit, fieldKey, fieldValue, const {getSafeAreaMargins} = useStyleUtils(); const {translate} = useLocalize(); const recentlyUsedOptions = useMemo(() => recentlyUsedReportFields?.[fieldKey] ?? [], [recentlyUsedReportFields, fieldKey]); - const [headerMessage, setHeaderMessage] = useState(''); - - const sections = useMemo(() => { - if (searchValue) { - const filteredOptions = fieldOptions.filter((option) => option.toLowerCase().includes(searchValue.toLowerCase())); - setHeaderMessage(!filteredOptions.length ? translate('common.noResultsFound') : ''); - return [ - { - shouldShow: false, - data: filteredOptions.map((option) => ({ - text: option, - keyForList: option, - searchText: option, - tooltipText: option, - })), - }, - ]; - } + const {sections, headerMessage} = useMemo(() => { + let headerMessage = ''; const newSections = []; - const selectedValue = fieldValue; - if (selectedValue) { + if (searchValue) { + const filteredOptions = fieldOptions.filter((option) => option.toLowerCase().includes(searchValue.toLowerCase())); + headerMessage = !filteredOptions.length ? translate('common.noResultsFound') : ''; newSections.push({ shouldShow: false, - data: [ - { - text: selectedValue, - keyForList: selectedValue, - searchText: selectedValue, - tooltipText: selectedValue, - }, - ], - }); - } - - const filteredRecentlyUsedOptions = recentlyUsedOptions.filter((option) => option !== selectedValue); - if (filteredRecentlyUsedOptions.length > 0) { - newSections.push({ - title: translate('common.recents'), - shouldShow: true, - data: filteredRecentlyUsedOptions.map((option) => ({ - text: option, - keyForList: option, - searchText: option, - tooltipText: option, - })), - }); - } - - const filteredFieldOptions = fieldOptions.filter((option) => option !== selectedValue); - if (filteredFieldOptions.length > 0) { - newSections.push({ - title: translate('common.all'), - shouldShow: true, - data: filteredFieldOptions.map((option) => ({ + data: filteredOptions.map((option) => ({ text: option, keyForList: option, searchText: option, tooltipText: option, })), }); + } else { + const selectedValue = fieldValue; + if (selectedValue) { + newSections.push({ + shouldShow: false, + data: [ + { + text: selectedValue, + keyForList: selectedValue, + searchText: selectedValue, + tooltipText: selectedValue, + }, + ], + }); + } + + const filteredRecentlyUsedOptions = recentlyUsedOptions.filter((option) => option !== selectedValue); + if (filteredRecentlyUsedOptions.length > 0) { + newSections.push({ + title: translate('common.recents'), + shouldShow: true, + data: filteredRecentlyUsedOptions.map((option) => ({ + text: option, + keyForList: option, + searchText: option, + tooltipText: option, + })), + }); + } + + const filteredFieldOptions = fieldOptions.filter((option) => option !== selectedValue); + if (filteredFieldOptions.length > 0) { + newSections.push({ + title: translate('common.all'), + shouldShow: true, + data: filteredFieldOptions.map((option) => ({ + text: option, + keyForList: option, + searchText: option, + tooltipText: option, + })), + }); + } } - return newSections; + return {sections: newSections, headerMessage}; }, [fieldValue, fieldOptions, recentlyUsedOptions, searchValue, translate]); return ( From 500c4c918dd8b325bc34dcaf2c72b6ba32200300 Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Thu, 21 Mar 2024 16:17:49 +0800 Subject: [PATCH 09/11] rename --- src/pages/EditReportFieldDropdownPage.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/pages/EditReportFieldDropdownPage.tsx b/src/pages/EditReportFieldDropdownPage.tsx index bd76f792b8f..8c2438011c4 100644 --- a/src/pages/EditReportFieldDropdownPage.tsx +++ b/src/pages/EditReportFieldDropdownPage.tsx @@ -45,12 +45,12 @@ function EditReportFieldDropdownPage({fieldName, onSubmit, fieldKey, fieldValue, const recentlyUsedOptions = useMemo(() => recentlyUsedReportFields?.[fieldKey] ?? [], [recentlyUsedReportFields, fieldKey]); const {sections, headerMessage} = useMemo(() => { - let headerMessage = ''; + let newHeaderMessage = ''; const newSections = []; if (searchValue) { const filteredOptions = fieldOptions.filter((option) => option.toLowerCase().includes(searchValue.toLowerCase())); - headerMessage = !filteredOptions.length ? translate('common.noResultsFound') : ''; + newHeaderMessage = !filteredOptions.length ? translate('common.noResultsFound') : ''; newSections.push({ shouldShow: false, data: filteredOptions.map((option) => ({ @@ -105,7 +105,7 @@ function EditReportFieldDropdownPage({fieldName, onSubmit, fieldKey, fieldValue, } } - return {sections: newSections, headerMessage}; + return {sections: newSections, headerMessage: newHeaderMessage}; }, [fieldValue, fieldOptions, recentlyUsedOptions, searchValue, translate]); return ( From 693178df3f1dc3f26e99426996068df426478b53 Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Thu, 21 Mar 2024 21:13:13 +0800 Subject: [PATCH 10/11] add type --- src/pages/EditReportFieldDropdownPage.tsx | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/src/pages/EditReportFieldDropdownPage.tsx b/src/pages/EditReportFieldDropdownPage.tsx index 8c2438011c4..9de7e0e8531 100644 --- a/src/pages/EditReportFieldDropdownPage.tsx +++ b/src/pages/EditReportFieldDropdownPage.tsx @@ -37,6 +37,19 @@ type EditReportFieldDropdownPageOnyxProps = { type EditReportFieldDropdownPageProps = EditReportFieldDropdownPageComponentProps & EditReportFieldDropdownPageOnyxProps; +type ReportFieldDropdownData = { + text: string; + keyForList: string; + searchText: string; + tooltipText: string; +} + +type ReportFieldDropdownSectionItem = { + data: ReportFieldDropdownData[]; + shouldShow: boolean; + title?: string, +}; + function EditReportFieldDropdownPage({fieldName, onSubmit, fieldKey, fieldValue, fieldOptions, recentlyUsedReportFields}: EditReportFieldDropdownPageProps) { const [searchValue, setSearchValue] = useState(''); const styles = useThemeStyles(); @@ -46,7 +59,7 @@ function EditReportFieldDropdownPage({fieldName, onSubmit, fieldKey, fieldValue, const {sections, headerMessage} = useMemo(() => { let newHeaderMessage = ''; - const newSections = []; + const newSections: ReportFieldDropdownSectionItem[] = []; if (searchValue) { const filteredOptions = fieldOptions.filter((option) => option.toLowerCase().includes(searchValue.toLowerCase())); From d8aa7fa0d2d1bae9aa5483ae0782d8e9e77740ea Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Thu, 21 Mar 2024 21:19:45 +0800 Subject: [PATCH 11/11] prettier --- src/pages/EditReportFieldDropdownPage.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/EditReportFieldDropdownPage.tsx b/src/pages/EditReportFieldDropdownPage.tsx index 9de7e0e8531..a3d9c2fd99f 100644 --- a/src/pages/EditReportFieldDropdownPage.tsx +++ b/src/pages/EditReportFieldDropdownPage.tsx @@ -42,12 +42,12 @@ type ReportFieldDropdownData = { keyForList: string; searchText: string; tooltipText: string; -} +}; type ReportFieldDropdownSectionItem = { data: ReportFieldDropdownData[]; shouldShow: boolean; - title?: string, + title?: string; }; function EditReportFieldDropdownPage({fieldName, onSubmit, fieldKey, fieldValue, fieldOptions, recentlyUsedReportFields}: EditReportFieldDropdownPageProps) {