Clean up custom-aggrid-header (#2434)

authored-by: Hugo Marcellin <[email protected]>

Author: Meklo

src/components/custom-aggrid/custom-aggrid-filters/custom-aggrid-autocomplete-filter.tsx

@@ -0,0 +1,58 @@
+/**
+ * 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 React, { FunctionComponent, SyntheticEvent, useMemo } from 'react';
+import { Autocomplete, TextField } from '@mui/material';
+import { useIntl } from 'react-intl';
+import { useCustomAggridFilter } from '../hooks/use-custom-aggrid-filter';
+import { isStringOrNonEmptyArray } from '../custom-aggrid-header-utils';
+import { CustomAggridFilterParams, FILTER_TEXT_COMPARATORS, FilterEnumsType } from '../custom-aggrid-header.type';
+
+export interface CustomAggridAutocompleteFilterParams extends CustomAggridFilterParams {
+    filterEnums?: FilterEnumsType;
+    getEnumLabel?: (value: string) => string; // Used for translation of enum values in the filter
+}
+
+export const CustomAggridAutocompleteFilter: FunctionComponent<CustomAggridAutocompleteFilterParams> = ({
+    field,
+    filterParams,
+    filterEnums,
+    getEnumLabel,
+}) => {
+    const intl = useIntl();
+    const { selectedFilterData, handleChangeFilterValue } = useCustomAggridFilter(field, filterParams);
+
+    const handleFilterAutoCompleteChange = (_: SyntheticEvent, data: string[]) => {
+        handleChangeFilterValue({ value: data, type: FILTER_TEXT_COMPARATORS.EQUALS });
+    };
+
+    const filterOption = useMemo(() => filterEnums?.[field] ?? [], [field, filterEnums]);
+
+    return (
+        <Autocomplete
+            multiple
+            value={Array.isArray(selectedFilterData) ? selectedFilterData : []}
+            options={filterOption}
+            getOptionLabel={getEnumLabel}
+            onChange={handleFilterAutoCompleteChange}
+            size="small"
+            disableCloseOnSelect
+            renderInput={(params) => (
+                <TextField
+                    {...params}
+                    placeholder={
+                        !isStringOrNonEmptyArray(selectedFilterData)
+                            ? intl.formatMessage({
+                                  id: 'filter.filterOoo',
+                              })
+                            : ''
+                    }
+                />
+            )}
+            fullWidth
+        />
+    );
+};

src/components/custom-aggrid/custom-aggrid-filters/custom-aggrid-boolean-filter.tsx

@@ -11,6 +11,9 @@ import ClearIcon from '@mui/icons-material/Clear';
 import { useIntl } from 'react-intl';
 import { SelectChangeEvent } from '@mui/material/Select/SelectInput';
 import { mergeSx } from 'components/utils/functions';
+import { useCustomAggridFilter } from '../hooks/use-custom-aggrid-filter';
+import { isStringOrNonEmptyArray } from '../custom-aggrid-header-utils';
+import { CustomAggridFilterParams, FILTER_TEXT_COMPARATORS } from '../custom-aggrid-header.type';
 
 export enum BooleanFilterValue {
     TRUE = 'true',
@@ -26,33 +29,36 @@ const styles = {
     },
 };
 
-interface ICustomAggridBooleanFilter {
-    value: string;
-    onChange: (value: string) => void;
-}
-
-const CustomAggridBooleanFilter: FunctionComponent<ICustomAggridBooleanFilter> = ({ value, onChange }) => {
+export const CustomAggridBooleanFilter: FunctionComponent<CustomAggridFilterParams> = ({ field, filterParams }) => {
     const intl = useIntl();
 
+    const { selectedFilterData, handleChangeFilterValue } = useCustomAggridFilter(field, filterParams);
+
     const handleValueChange = (event: SelectChangeEvent) => {
         const newValue = event.target.value;
-        onChange && onChange(newValue);
+        handleChangeFilterValue({ value: newValue, type: FILTER_TEXT_COMPARATORS.EQUALS });
+    };
+
+    const handleClearFilter = () => {
+        handleChangeFilterValue({
+            value: undefined,
+        });
     };
 
     return (
         <Select
             fullWidth
             size={'small'}
-            value={value || ''}
+            value={typeof selectedFilterData === 'string' ? selectedFilterData : ''}
             onChange={handleValueChange}
             sx={mergeSx(styles.input, {
                 '& .MuiSelect-iconOutlined': {
-                    display: value ? 'none' : '',
+                    display: selectedFilterData ? 'none' : '',
                 },
             })}
             endAdornment={
-                value && (
-                    <IconButton onClick={() => onChange('')}>
+                isStringOrNonEmptyArray(selectedFilterData) && (
+                    <IconButton onClick={handleClearFilter}>
                         <ClearIcon fontSize={'small'} />
                     </IconButton>
                 )
@@ -68,5 +74,3 @@ const CustomAggridBooleanFilter: FunctionComponent<ICustomAggridBooleanFilter> =
         </Select>
     );
 };
-
-export default CustomAggridBooleanFilter;

src/components/custom-aggrid/custom-aggrid-filters/custom-aggrid-comparator-filter.tsx

@@ -0,0 +1,44 @@
+/**
+ * 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 { CustomAggridComparatorSelector } from './custom-aggrid-comparator-selector';
+import { CustomAggridTextFilter } from './custom-aggrid-text-filter';
+import { Grid } from '@mui/material';
+import { useCustomAggridComparatorFilter } from '../hooks/use-custom-aggrid-comparator-filter';
+import { CustomAggridFilterParams } from '../custom-aggrid-header.type';
+
+export const CustomAggridComparatorFilter = ({ field, filterParams }: CustomAggridFilterParams) => {
+    const {
+        selectedFilterData,
+        selectedFilterComparator,
+        decimalAfterDot,
+        isNumberInput,
+        handleFilterComparatorChange,
+        handleFilterTextChange,
+        handleClearFilter,
+    } = useCustomAggridComparatorFilter(field, filterParams);
+
+    const {
+        filterComparators = [], // used for text filter as a UI type (examples: contains, startsWith..)
+    } = filterParams;
+
+    return (
+        <Grid container direction={'column'} gap={0.8} sx={{ padding: '8px' }}>
+            <CustomAggridComparatorSelector
+                value={selectedFilterComparator}
+                onChange={handleFilterComparatorChange}
+                options={filterComparators}
+            />
+            <CustomAggridTextFilter
+                value={selectedFilterData}
+                onChange={handleFilterTextChange}
+                onClear={handleClearFilter}
+                isNumberInput={isNumberInput}
+                decimalAfterDot={decimalAfterDot}
+            />
+        </Grid>
+    );
+};

src/components/custom-aggrid/custom-aggrid-filters/custom-aggrid-comparator-selector.tsx

@@ -0,0 +1,43 @@
+/**
+ * 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 React from 'react';
+import { Select, MenuItem } from '@mui/material';
+import { SelectChangeEvent } from '@mui/material/Select/SelectInput';
+import { useIntl } from 'react-intl';
+
+const styles = {
+    input: {
+        minWidth: '250px',
+        maxWidth: '40%',
+    },
+};
+
+interface CustomAggridComparatorSelectorProps {
+    value: string;
+    onChange: (event: SelectChangeEvent) => void;
+    options: string[];
+}
+
+export const CustomAggridComparatorSelector: React.FC<CustomAggridComparatorSelectorProps> = ({
+    value,
+    onChange,
+    options,
+}) => {
+    const intl = useIntl();
+
+    return (
+        <Select value={value} onChange={onChange} displayEmpty size={'small'} sx={styles.input}>
+            {options.map((filterComparator) => (
+                <MenuItem key={filterComparator} value={filterComparator}>
+                    {intl.formatMessage({
+                        id: `filter.${filterComparator}`,
+                    })}
+                </MenuItem>
+            ))}
+        </Select>
+    );
+};