Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add sort function in report field pages #46757

Merged
merged 10 commits into from
Aug 6, 2024
5 changes: 3 additions & 2 deletions src/pages/EditReportFieldDropdown.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import type {ListItem} from '@components/SelectionList/types';
import useDebouncedState from '@hooks/useDebouncedState';
import useLocalize from '@hooks/useLocalize';
import useTheme from '@hooks/useTheme';
import localeCompare from '@libs/LocaleCompare';
import * as OptionsListUtils from '@libs/OptionsListUtils';
import CONST from '@src/CONST';
import ONYXKEYS from '@src/ONYXKEYS';
Expand Down Expand Up @@ -42,7 +43,7 @@ function EditReportFieldDropdownPage({onSubmit, fieldKey, fieldValue, fieldOptio
const [searchValue, debouncedSearchValue, setSearchValue] = useDebouncedState('');
const theme = useTheme();
const {translate} = useLocalize();
const recentlyUsedOptions = useMemo(() => recentlyUsedReportFields?.[fieldKey] ?? [], [recentlyUsedReportFields, fieldKey]);
const recentlyUsedOptions = useMemo(() => recentlyUsedReportFields?.[fieldKey].sort((a, b) => localeCompare(a, b)) ?? [], [recentlyUsedReportFields, fieldKey]);
cretadn22 marked this conversation as resolved.
Show resolved Hide resolved

const itemRightSideComponent = useCallback(
(item: ListItem) => {
Expand All @@ -61,7 +62,7 @@ function EditReportFieldDropdownPage({onSubmit, fieldKey, fieldValue, fieldOptio
);

const [sections, headerMessage] = useMemo(() => {
const validFieldOptions = fieldOptions?.filter((option) => !!option);
const validFieldOptions = fieldOptions?.filter((option) => !!option).sort((a, b) => localeCompare(a, b));
cretadn22 marked this conversation as resolved.
Show resolved Hide resolved

const {policyReportFieldOptions} = OptionsListUtils.getFilteredOptions(
[],
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import React, {useMemo} from 'react';
import SelectionList from '@components/SelectionList';
import RadioListItem from '@components/SelectionList/RadioListItem';
import localeCompare from '@libs/LocaleCompare';

type ReportFieldsInitialListValuePickerProps = {
/** Options to select from if field is of type list */
Expand All @@ -22,6 +23,7 @@ function ReportFieldsInitialListValuePicker({listValues, disabledOptions, value,
{
data: Object.values(listValues ?? {})
.filter((listValue, index) => !disabledOptions[index])
.sort((a, b) => localeCompare(a, b))
cretadn22 marked this conversation as resolved.
Show resolved Hide resolved
.map((listValue) => ({
keyForList: listValue,
value: listValue,
Expand Down
34 changes: 18 additions & 16 deletions src/pages/workspace/reportFields/ReportFieldsListValuesPage.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ import useThemeStyles from '@hooks/useThemeStyles';
import {turnOffMobileSelectionMode} from '@libs/actions/MobileSelectionMode';
import * as ReportField from '@libs/actions/Policy/ReportField';
import * as DeviceCapabilities from '@libs/DeviceCapabilities';
import localeCompare from '@libs/LocaleCompare';
import Navigation from '@libs/Navigation/Navigation';
import * as PolicyUtils from '@libs/PolicyUtils';
import * as ReportUtils from '@libs/ReportUtils';
Expand Down Expand Up @@ -84,22 +85,23 @@ function ReportFieldsListValuesPage({
}, [formDraft?.disabledListValues, formDraft?.listValues, policy?.fieldList, reportFieldID]);

const listValuesSections = useMemo(() => {
const data = listValues.map<ValueListItem>((value, index) => ({
value,
index,
text: value,
keyForList: value,
isSelected: selectedValues[value],
enabled: !disabledListValues[index] ?? true,
pendingAction: reportFieldID ? policy?.fieldList?.[ReportUtils.getReportFieldKey(reportFieldID)]?.pendingAction : null,
rightElement: (
<ListItemRightCaretWithLabel
shouldShowCaret={false}
labelText={disabledListValues[index] ? translate('workspace.common.disabled') : translate('workspace.common.enabled')}
/>
),
}));

const data = listValues
.map<ValueListItem>((value, index) => ({
value,
index,
text: value,
keyForList: value,
isSelected: selectedValues[value],
enabled: !disabledListValues[index] ?? true,
pendingAction: reportFieldID ? policy?.fieldList?.[ReportUtils.getReportFieldKey(reportFieldID)]?.pendingAction : null,
rightElement: (
<ListItemRightCaretWithLabel
shouldShowCaret={false}
labelText={disabledListValues[index] ? translate('workspace.common.disabled') : translate('workspace.common.enabled')}
/>
),
}))
.sort((a, b) => localeCompare(a.value, b.value));
return [{data, isDisabled: false}];
}, [disabledListValues, listValues, policy?.fieldList, reportFieldID, selectedValues, translate]);

Expand Down
35 changes: 19 additions & 16 deletions src/pages/workspace/reportFields/WorkspaceReportFieldsPage.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ import useTheme from '@hooks/useTheme';
import useThemeStyles from '@hooks/useThemeStyles';
import {turnOffMobileSelectionMode} from '@libs/actions/MobileSelectionMode';
import * as DeviceCapabilities from '@libs/DeviceCapabilities';
import localeCompare from '@libs/LocaleCompare';
import Navigation from '@libs/Navigation/Navigation';
import type {FullScreenNavigatorParamList} from '@libs/Navigation/types';
import * as PolicyUtils from '@libs/PolicyUtils';
Expand Down Expand Up @@ -99,22 +100,24 @@ function WorkspaceReportFieldsPage({

return [
{
data: Object.values(filteredPolicyFieldList).map((reportField) => ({
value: reportField.name,
fieldID: reportField.fieldID,
keyForList: String(reportField.fieldID),
orderWeight: reportField.orderWeight,
pendingAction: reportField.pendingAction,
isSelected: selectedReportFields.find((selectedReportField) => selectedReportField.name === reportField.name) !== undefined,
isDisabled: reportField.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE,
text: reportField.name,
rightElement: (
<ListItemRightCaretWithLabel
shouldShowCaret={false}
labelText={Str.recapitalize(translate(WorkspaceReportFieldUtils.getReportFieldTypeTranslationKey(reportField.type)))}
/>
),
})),
data: Object.values(filteredPolicyFieldList)
.sort((a, b) => localeCompare(a.name, b.name))
.map((reportField) => ({
value: reportField.name,
fieldID: reportField.fieldID,
keyForList: String(reportField.fieldID),
orderWeight: reportField.orderWeight,
pendingAction: reportField.pendingAction,
isSelected: selectedReportFields.find((selectedReportField) => selectedReportField.name === reportField.name) !== undefined,
isDisabled: reportField.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE,
text: reportField.name,
rightElement: (
<ListItemRightCaretWithLabel
shouldShowCaret={false}
labelText={Str.recapitalize(translate(WorkspaceReportFieldUtils.getReportFieldTypeTranslationKey(reportField.type)))}
/>
),
})),
isDisabled: false,
},
];
Expand Down
Loading