favorite countries in the filter dialog (#532)

Signed-off-by: Mathieu DEHARBE <[email protected]>

Author: Mathieu-Deharbe

src/components/filter/expert/expert-filter-constants.ts

@@ -255,7 +255,6 @@ export const FIELDS_OPTIONS = {
         label: 'country',
         dataType: DataType.ENUM,
         valueEditorType: 'select',
-        defaultValue: 'AF',
     },
     VOLTAGE_REGULATOR_ON: {
         name: FieldType.VOLTAGE_REGULATOR_ON,
@@ -493,14 +492,12 @@ export const FIELDS_OPTIONS = {
         label: 'country1',
         dataType: DataType.ENUM,
         valueEditorType: 'select',
-        defaultValue: 'AF',
     },
     COUNTRY_2: {
         name: FieldType.COUNTRY_2,
         label: 'country2',
         dataType: DataType.ENUM,
         valueEditorType: 'select',
-        defaultValue: 'AF',
     },
     SERIE_RESISTANCE: {
         name: FieldType.SERIE_RESISTANCE,

src/components/filter/expert/expert-filter-utils.ts

@@ -409,7 +409,7 @@ export const queryValidator: QueryValidator = (query) => {
         const dataType = getDataType(rule.field, rule.operator);
 
         const isNumberInput = dataType === DataType.NUMBER && !isValueAnArray;
-        const isStringInput = dataType === DataType.STRING && !isValueAnArray;
+        const isStringInput = (dataType === DataType.STRING || dataType === DataType.ENUM) && !isValueAnArray;
 
         if (
             rule.id &&

src/components/inputs/react-query-builder/autocomplete-with-favorites.tsx

@@ -0,0 +1,70 @@
+/**
+ * Copyright (c) 2024, RTE (http://www.rte-france.com)
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+
+import { Autocomplete, Box, TextField, Theme } from '@mui/material';
+import { useMemo } from 'react';
+import { AutocompleteProps } from '@mui/material/Autocomplete/Autocomplete';
+
+const styles = {
+    favBox: (theme: Theme) => ({
+        borderBottom: '1px solid',
+        borderColor: theme.palette.divider,
+    }),
+};
+
+interface AutocompleteWithFavoritesProps<Value>
+    extends Omit<
+        AutocompleteProps<Value, boolean, false, boolean>,
+        'multiple' | 'renderInput' | 'renderGroup' | 'groupBy'
+    > {
+    favorites: Value[];
+    valid: boolean;
+}
+
+/**
+ * Autocomplete component which allows to have a few "favorite" options always displayed
+ * at the beginning of the selector and separated from the others options
+ */
+function AutocompleteWithFavorites<Value>({
+    favorites,
+    valid,
+    options,
+    value,
+    ...otherProps
+}: AutocompleteWithFavoritesProps<Value>) {
+    const optionsWithFavorites = useMemo(() => {
+        if (favorites) {
+            // remove favorites from standardOptions to avoid duplicate keys
+            const optionsWithoutFavorites = options.filter((option: Value) => !favorites.includes(option));
+            return [...favorites, ...optionsWithoutFavorites];
+        }
+        return options;
+    }, [options, favorites]);
+
+    return (
+        <Autocomplete
+            size="small"
+            value={value}
+            options={optionsWithFavorites}
+            {...otherProps}
+            /* props should not be overridden */
+            groupBy={(option: Value) => (favorites.includes(option) ? `fav` : 'not_fav')}
+            multiple={Array.isArray(value)}
+            renderInput={(params) => <TextField {...params} error={!valid} />}
+            renderGroup={(item) => {
+                const { group, children } = item;
+                return (
+                    <Box key={`keyBoxGroup_${group}`} sx={styles.favBox}>
+                        {children}
+                    </Box>
+                );
+            }}
+        />
+    );
+}
+
+export default AutocompleteWithFavorites;

src/components/inputs/react-query-builder/country-value-editor.tsx

@@ -6,50 +6,51 @@
  */
 
 import { ValueEditorProps } from 'react-querybuilder';
-import { MaterialValueEditor } from '@react-querybuilder/material';
-import { Autocomplete, TextField } from '@mui/material';
-import { useMemo } from 'react';
-import useConvertValue from './use-convert-value';
-import useValid from './use-valid';
+import { SyntheticEvent, useEffect, useState } from 'react';
 import { useLocalizedCountries } from '../../../hooks/localized-countries-hook';
 import useCustomFormContext from '../react-hook-form/provider/use-custom-form-context';
+import { fetchFavoriteAndDefaultCountries } from '../../../services';
+import AutocompleteWithFavorites from './autocomplete-with-favorites';
+import useConvertValue from './use-convert-value';
+import useValid from './use-valid';
 
 function CountryValueEditor(props: ValueEditorProps) {
+    const { value, handleOnChange } = props;
+
     const { language } = useCustomFormContext();
     const { translate, countryCodes } = useLocalizedCountries(language);
-    const { value, handleOnChange } = props;
+    const [favoriteCountryCodes, setFavoriteCountryCodes] = useState<string[]>([]);
+    const [initialized, setInitialized] = useState<boolean>(false);
+
+    // fetch favorite countries and default country
+    useEffect(() => {
+        if (!initialized) {
+            fetchFavoriteAndDefaultCountries().then(({ favoriteCountries, defaultCountry }) => {
+                setFavoriteCountryCodes(favoriteCountries);
+                if (defaultCountry && !value) {
+                    handleOnChange(defaultCountry);
+                }
+                setInitialized(true);
+            });
+        }
+    }, [initialized, setInitialized, handleOnChange, value]);
 
-    const countriesList = useMemo(
-        () =>
-            countryCodes.map((country: string) => {
-                return { name: country, label: translate(country) };
-            }),
-        [countryCodes, translate]
-    );
     // When we switch to 'in' operator, we need to switch the input value to an array and vice versa
     useConvertValue(props);
 
     const valid = useValid(props);
 
-    // The displayed component totally depends on the value type and not the operator. This way, we have smoother transition.
-    if (!Array.isArray(value)) {
-        return (
-            <MaterialValueEditor
-                {...props}
-                values={countriesList}
-                title={undefined} // disable the tooltip
-            />
-        );
-    }
     return (
-        <Autocomplete
+        <AutocompleteWithFavorites
             value={value}
             options={countryCodes}
-            getOptionLabel={(code: string) => translate(code)}
-            onChange={(event, newValue: any) => handleOnChange(newValue)}
-            multiple
+            favorites={favoriteCountryCodes}
+            getOptionLabel={(code: string) => (code ? translate(code) : '')}
+            valid={valid}
+            onChange={(event: SyntheticEvent, newValue: any) => {
+                handleOnChange(newValue);
+            }}
             fullWidth
-            renderInput={(params) => <TextField {...params} error={!valid} />}
         />
     );
 }

src/components/inputs/react-query-builder/property-value-editor.tsx

@@ -82,12 +82,13 @@ function PropertyValueEditor(props: ExpertFilterPropertyProps) {
                     onChange={(event, value: any) => {
                         onChange(FieldConstants.PROPERTY_NAME, value);
                     }}
+                    size="small"
                 />
             </Grid>
             <Grid item xs={2.5}>
                 <Select
                     value={propertyOperator ?? PROPERTY_VALUE_OPERATORS[0].customName}
-                    size="medium"
+                    size="small"
                     error={!valid}
                     onChange={(event, value: any) => {
                         onChange(FieldConstants.PROPERTY_OPERATOR, value);
@@ -111,6 +112,7 @@ function PropertyValueEditor(props: ExpertFilterPropertyProps) {
                     onChange={(event, value: any) => {
                         onChange(FieldConstants.PROPERTY_VALUES, value);
                     }}
+                    size="small"
                 />
             </Grid>
         </Grid>

src/components/inputs/react-query-builder/text-value-editor.tsx

@@ -35,6 +35,7 @@ function TextValueEditor(props: ValueEditorProps) {
             multiple
             fullWidth
             renderInput={(params) => <TextField {...params} error={!valid} />}
+            size="small"
         />
     );
 }

src/components/inputs/react-query-builder/translated-value-editor.tsx

@@ -56,6 +56,7 @@ function TranslatedValueEditor(props: ValueEditorProps) {
             multiple
             fullWidth
             renderInput={(params) => <TextField {...params} error={!valid} />}
+            size="small"
         />
     );
 }

src/services/apps-metadata.ts

@@ -46,6 +46,7 @@ export type StudyMetadata = CommonMetadata & {
         mapManualRefresh?: string; // maybe 'true'|'false' type?
     };
     defaultCountry?: string;
+    favoriteCountries?: string[];
 };
 
 export async function fetchAppsMetadata(): Promise<CommonMetadata[]> {
@@ -68,3 +69,19 @@ export async function fetchStudyMetadata(): Promise<StudyMetadata> {
         return studyMetadata[0]; // There should be only one study metadata
     }
 }
+
+export async function fetchFavoriteAndDefaultCountries(): Promise<{
+    favoriteCountries: string[];
+    defaultCountry?: string;
+}> {
+    const { favoriteCountries = [], defaultCountry } = await fetchStudyMetadata();
+    return {
+        favoriteCountries,
+        defaultCountry,
+    };
+}
+
+export const fetchDefaultCountry = async (): Promise<string | undefined> => {
+    const studyMetadata = await fetchStudyMetadata();
+    return studyMetadata.defaultCountry;
+};