@m4l/components 0.1.35 → 0.1.37

package/src/components/DynamicFilter/contexts/BaseContext/index.tsx

@@ -0,0 +1,464 @@
+// react
+import { createContext, useState, useCallback, useMemo, useEffect } from 'react';
+// eslint-disable-next-line import/extensions
+import { Maybe, useEnvironment, useHostTools, useModuleDictionary, voidFunction } from '@m4l/core';
+// external libraries
+import * as Yup from 'yup';
+// types
+import { BaseContextProps, BaseProviderProps, PopupContext } from './types';
+import type {
+    FilterFieldApply,
+    Operator,
+    Field,
+    InitialFilterFieldApply,
+    FilterToEditApply,
+    FilterToAddApply,
+    RawFilterFieldApply,
+} from '../../types';
+
+//constants
+import { ALL_FIELDS } from '../../types';
+import { getDefaultFilterValues } from '../../components/fieldstypes/factory';
+import {
+    verifyBooleanFilter,
+    verifyDateTime,
+    verifyNumberFilter,
+    verifyStringFilter,
+} from '../../components/fieldstypes/validations';
+import { FieldValues } from 'react-hook-form';
+import { Formatters, useFormatter } from '@m4l/graphics';
+
+const initialState: BaseContextProps = {
+    // columns
+    fields: [],
+    withAllField: true,
+    isDirty: false,
+    isValid: true,
+    automatic: false,
+    availableFields: [],
+    getFieldByName: () => undefined,
+    getLabelOperator: () => '',
+    applyedFilters: [],
+    addFilter: voidFunction,
+    updateFilter: voidFunction,
+    removeFilter: voidFunction,
+    clearFilters: voidFunction,
+    fireOnChangeFilters: voidFunction,
+    openAnchorEl: null,
+    openMenuFields: voidFunction,
+    closeMenuFields: voidFunction,
+
+    popupData: { popupAnchorEl: null, filter: null, field: null },
+    popupValidationSchema: {},
+    setPoupEditValidationSchema: voidFunction,
+    showPopupForAddFilter: voidFunction,
+    showPopupForEditFilter: voidFunction,
+    hidePopupEdit: voidFunction,
+    setInEdition: voidFunction,
+    inEdition: false,
+
+    setFnTransformFormValuesIntoValues: voidFunction,
+    fnTransformFormValuesIntoRawValues: () => undefined,
+};
+
+//
+
+const BaseContext = createContext<BaseContextProps>(initialState);
+
+// ----------------------------------------------------------------------
+
+const getMaxId = (applyedFilters: Array<FilterFieldApply>) => {
+    return applyedFilters.reduce((prev: number, n: FilterFieldApply) => {
+        return n.id > prev ? n.id : prev;
+    }, 0);
+};
+
+const getFilterById = (id: number, applyedFilters: Array<FilterFieldApply>) => {
+    return applyedFilters.findIndex(f => f.id === id);
+};
+
+const formatToInitialFilters = (
+    applyedFilter: Array<FilterFieldApply>,
+): Array<InitialFilterFieldApply> => {
+    return applyedFilter.map(af => ({
+        n: af.n,
+        o: af.o,
+        labelOperands: af.labelOperands,
+        o1: af.o1,
+        o2: af.o2,
+    }));
+};
+
+const formatToRawFilter = (applyedFilter: Array<FilterFieldApply>): Array<RawFilterFieldApply> => {
+    return applyedFilter.map(af => ({
+        n: af.n,
+        o: af.o,
+        o1: af.o1,
+        o2: af.o2,
+    }));
+};
+
+const getInitialFilters = (
+    fields: Array<Field>,
+    filters: Array<InitialFilterFieldApply>,
+    getFieldByName: (name: string) => Field | undefined,
+    getLabel: (key: string) => string,
+    formatters: Formatters,
+): Array<FilterFieldApply> => {
+    //Verificar si hay fixed y no estan agregados
+
+    const newFilters: Array<FilterFieldApply> = [];
+    const fixedFields: Array<string> = [];
+    //garantizar que todos los filtros iniciales ingresen al sistema correctamente.
+    for (let index = 0; index < filters.length; index++) {
+        let add: boolean;
+        const filter: FilterFieldApply = {
+            ...filters[index],
+            id: 0,
+            isSetted: true,
+            fixed: false,
+            labelOperator: '',
+        };
+        const field = getFieldByName(filter.n);
+
+        //
+        if (!field) continue;
+
+        switch (field.type) {
+            case 'string':
+                add = verifyStringFilter(filter);
+                break;
+            case 'number':
+                add = verifyNumberFilter(filter);
+                break;
+            case 'boolean':
+                add = verifyBooleanFilter(filter);
+                break;
+            case 'datetime':
+                add = verifyDateTime(filter);
+                break;
+
+            default:
+                add = false;
+        }
+        if (add) {
+            //garantizar que solo haya un fixed filter por campo, para cuando son multiples
+            if (field.presence === 'fixed') {
+                if (fixedFields.findIndex(f => f === field.name) === -1) {
+                    filter.fixed = true;
+                    fixedFields.push(field.name);
+                } else {
+                    filter.fixed = false;
+                }
+            }
+            filter.isSetted = true;
+            filter.id = newFilters.length + 1;
+            filter.labelOperator = getLabel(`dynamic_filter.operator_${filter.o}`);
+            newFilters.push(filter);
+        }
+    }
+
+    //Agregar un filtro si el campo es fixed y no se ha agregado
+    for (let index = 0; index < fields.length; index++) {
+        const field = fields[index];
+
+        if (field.presence === 'initialized' || field.presence === 'fixed') {
+            //garantizar que exista dentro de los filters sin settear
+            if (!filters.find(f => f.n === field.name)) {
+                const newFilter = getDefaultFilterValues(
+                    field,
+                    field.presence === 'fixed',
+                    getLabel,
+                    formatters,
+                );
+                newFilter.id = newFilters.length + 1;
+                newFilters.push(newFilter);
+            }
+        }
+    }
+
+    return newFilters;
+};
+
+function BaseProvider(props: BaseProviderProps) {
+    const {
+        isSkeleton = false,
+        fields,
+        initialFilters = [],
+        withAllField = true,
+        onChangeFilter,
+        automatic = true,
+        children,
+    } = props;
+
+    const [openAnchorEl, setOpenAnchorEl] = useState<Maybe<Element>>(null);
+
+    const [popupData, setPopupData] = useState<PopupContext>({
+        popupAnchorEl: null,
+        filter: null,
+        field: null,
+    });
+    const { getLabel } = useModuleDictionary();
+    const [popupValidationSchema, setInternalPopupValidationSchema] = useState<any>(
+        Yup.object().shape({}),
+    );
+
+    const [fnTransformFormValuesIntoRawValues, setInternalfnTransormFormValuesIntoRawValues] =
+        useState<(data: FieldValues) => FilterFieldApply | undefined>(() => undefined);
+
+    const { host_static_assets, environment_assets } = useEnvironment();
+    const formatter = useFormatter();
+
+    const all_fields = useMemo(() => {
+        return {
+            ...ALL_FIELDS,
+            label: getLabel('dynamic_filter.all_fields'),
+            urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/dynamic_filter/assets/icons/all_fields.svg`,
+        };
+    }, [getLabel, host_static_assets, environment_assets]);
+
+    const [inEdition, setInEdition] = useState(false);
+    const [isDirty, setIsDirty] = useState(!automatic);
+    const [isValid, setIsValid] = useState(false);
+
+    const { toast } = useHostTools();
+
+    const getFieldByName = useCallback(
+        (name: string) => {
+            return fields.concat(all_fields).find(f => {
+                return f.name === name;
+            });
+        },
+        [fields, all_fields],
+    );
+    const getLabelOperator = useCallback(
+        (operator: Operator) => {
+            return getLabel(`dynamic_filter.operator_${operator}`);
+        },
+        [getLabel],
+    );
+
+    const [applyedFilters, setApplyedFilters] = useState<Array<FilterFieldApply>>(
+        getInitialFilters(fields, initialFilters, getFieldByName, getLabel, formatter),
+    );
+
+    const availableFields = useMemo(() => {
+        const newFields = [];
+
+        for (let index = 0; index < fields.length; index++) {
+            let add: boolean;
+            const field = fields[index];
+            add = true;
+            //no agregar los filtos que no son multiples y que ya esten agregados
+            if (field.multiple !== undefined && field.multiple === false) {
+                const fIndx = applyedFilters.findIndex(f => f.n === field.name);
+                if (fIndx > -1) {
+                    add = false;
+                }
+            }
+            if (add) {
+                newFields.push(field);
+            }
+        }
+
+        return newFields;
+    }, [fields, applyedFilters]);
+
+    const fireOnChangeFilters = useCallback(() => {
+        if (isValid) {
+            if (!automatic) setIsDirty(false);
+            onChangeFilter(
+                formatToInitialFilters(applyedFilters),
+                formatToRawFilter(applyedFilters),
+            );
+        } else {
+            toast(getLabel('dynamic_filter.error_filters_no_setted'), {
+                type: 'error',
+                autoClose: 10000,
+            });
+        }
+    }, [isValid, applyedFilters, onChangeFilter]);
+
+    useEffect(() => {
+        //Si hay filtros no seatados el sistema es invalido
+        const NoValid = applyedFilters.findIndex(f => !f.isSetted) > -1;
+        if (NoValid) {
+            setIsValid(false);
+        } else {
+            setIsValid(true);
+        }
+
+        if (!automatic) {
+            setIsDirty(true);
+            return;
+        }
+
+        if (!NoValid) {
+            setIsDirty(false);
+            onChangeFilter(
+                formatToInitialFilters(applyedFilters),
+                formatToRawFilter(applyedFilters),
+            );
+        }
+    }, [applyedFilters]);
+
+    const addFilter = useCallback((newFilter: FilterToAddApply) => {
+        setApplyedFilters(lastApplyedFilters => {
+            const newArray = [...lastApplyedFilters];
+            const newFilterFull: FilterFieldApply = {
+                ...newFilter,
+                id: getMaxId(lastApplyedFilters) + 1,
+                labelOperator: getLabelOperator(newFilter.o),
+            };
+
+            newArray.push(newFilterFull);
+            return newArray;
+        });
+    }, []);
+
+    const updateFilter = useCallback((newFilter: FilterToEditApply) => {
+        setApplyedFilters(lastApplyedFilters => {
+            const newArray = [...lastApplyedFilters];
+
+            const findedFilter = getFilterById(newFilter.id, newArray);
+
+            if (findedFilter > -1) {
+                // si lo encuentra
+                newArray.splice(findedFilter, 1, {
+                    ...newFilter,
+                    labelOperator: getLabelOperator(newFilter.o),
+                });
+            }
+
+            return newArray;
+        });
+    }, []);
+
+    const clearFilters = useCallback(() => {
+        setApplyedFilters(lastFilters => {
+            const newFilters = [];
+            for (let index = 0; index < lastFilters.length; index++) {
+                const filter = lastFilters[index];
+
+                if (filter.fixed) {
+                    newFilters.push(filter);
+                }
+            }
+
+            return newFilters;
+        });
+    }, []);
+
+    const openMenuFields = useCallback(
+        (anchorEl: Element) => {
+            setOpenAnchorEl(anchorEl);
+            setInEdition(true);
+        },
+        [applyedFilters],
+    );
+
+    const closeMenuFields = useCallback(() => {
+        setOpenAnchorEl(null);
+        setInEdition(false);
+    }, []);
+
+    const hidePopupEdit = useCallback(
+        (stayInEditon: boolean) => {
+            if (popupData.popupAnchorEl) {
+                setPopupData({ popupAnchorEl: null, filter: null, field: null });
+            }
+            if (!stayInEditon && inEdition) {
+                setInEdition(false);
+            }
+        },
+        [popupData, inEdition],
+    );
+
+    const showPopupForAddFilter = useCallback((anchorEl: Maybe<Element>, field: Field) => {
+        setPopupData({
+            popupAnchorEl: anchorEl,
+            filter: getDefaultFilterValues(field, false, getLabel, formatter),
+            field,
+        });
+
+        setInEdition(true);
+    }, []);
+
+    const showPopupForEditFilter = useCallback(
+        (anchorEl: Maybe<Element>, filterToEdit: FilterFieldApply) => {
+            setPopupData({
+                popupAnchorEl: anchorEl,
+                filter: filterToEdit,
+                field: getFieldByName(filterToEdit.n),
+            });
+
+            setInEdition(true);
+        },
+        [],
+    );
+
+    const removeFilter = useCallback((id: number) => {
+        setApplyedFilters(lastApplyedFilters => {
+            const newArray = [...lastApplyedFilters];
+            const index_to_remove = lastApplyedFilters.findIndex(filter => id === filter.id);
+
+            if (index_to_remove > -1) {
+                if (!newArray[index_to_remove].fixed) {
+                    newArray.splice(index_to_remove, 1);
+                }
+            }
+
+            return newArray;
+        });
+    }, []);
+
+    const setPoupEditValidationSchema = useCallback((validationSchema: any) => {
+        setInternalPopupValidationSchema(Yup.object().shape({ ...validationSchema }));
+    }, []);
+
+    const setFnTransformFormValuesIntoValues = useCallback(
+        (fn: (data: FieldValues) => FilterFieldApply | undefined) => {
+            setInternalfnTransormFormValuesIntoRawValues(() => fn);
+        },
+        [],
+    );
+
+    return (
+        <BaseContext.Provider
+            value={{
+                isSkeleton,
+                inEdition,
+                automatic,
+                isDirty,
+                isValid,
+                withAllField,
+                fields,
+                availableFields,
+                getFieldByName,
+                getLabelOperator,
+                applyedFilters,
+                addFilter,
+                updateFilter,
+                removeFilter,
+                clearFilters,
+                fireOnChangeFilters,
+                openAnchorEl,
+                openMenuFields,
+                closeMenuFields,
+                popupData,
+                popupValidationSchema,
+                showPopupForAddFilter,
+                showPopupForEditFilter,
+                hidePopupEdit,
+                setInEdition,
+                setPoupEditValidationSchema,
+                fnTransformFormValuesIntoRawValues,
+                setFnTransformFormValuesIntoValues,
+            }}
+        >
+            {children}
+        </BaseContext.Provider>
+    );
+}
+
+export { BaseProvider, BaseContext };

package/src/components/DynamicFilter/contexts/BaseContext/types.ts

@@ -0,0 +1,64 @@
+import type { Maybe } from '@m4l/core';
+
+import type { ReactNode } from 'react';
+import { FieldValues } from 'react-hook-form';
+import type {
+    Field,
+    FilterFieldApply,
+    DynamicFilterProps,
+    Operator,
+    FilterToEditApply,
+    FilterToAddApply,
+} from '../../types';
+
+export interface BaseProviderProps extends DynamicFilterProps {
+    children: ReactNode;
+}
+
+export interface PopupContext {
+    popupAnchorEl: Maybe<Element>;
+    filter: Maybe<FilterFieldApply>;
+    field: Maybe<Field>;
+}
+
+export interface BaseContextProps {
+    isSkeleton?: boolean;
+    withAllField: boolean;
+    fields: Array<Field>;
+    inEdition: boolean;
+    setInEdition: (newState: boolean) => void;
+    availableFields: Array<Field>;
+    getFieldByName: (name: string) => Maybe<Field>;
+    applyedFilters: Array<FilterFieldApply>;
+    automatic: boolean;
+    isDirty: boolean;
+    isValid: boolean;
+    openAnchorEl: Maybe<Element>;
+
+    addFilter: (newFilter: FilterToAddApply) => void;
+
+    updateFilter: (filterToEdit: FilterToEditApply) => void;
+
+    popupData: PopupContext;
+    popupValidationSchema: any;
+
+    getLabelOperator: (operator: Operator) => string;
+
+    showPopupForAddFilter: (anchorEl: Maybe<Element>, field: Field) => void;
+    showPopupForEditFilter: (anchorEl: Maybe<Element>, filterToEdit: FilterFieldApply) => void;
+    hidePopupEdit: (stayInEditon: boolean) => void;
+    setPoupEditValidationSchema: (validationSchema: any) => void;
+
+    removeFilter: (id: number) => void;
+    clearFilters: VoidFunction;
+
+    openMenuFields: (anchorEl: Element) => void;
+    closeMenuFields: VoidFunction;
+
+    setFnTransformFormValuesIntoValues: (
+        fn: (data: FieldValues) => FilterFieldApply | undefined,
+    ) => void;
+    fnTransformFormValuesIntoRawValues: (data: FieldValues) => FilterFieldApply | undefined;
+
+    fireOnChangeFilters: VoidFunction;
+}

package/src/components/DynamicFilter/dictionary.ts

@@ -0,0 +1,30 @@
+import { Dictionary } from '@m4l/core';
+import { getCommonActionsDictionary } from '../CommonActions';
+
+export function getDynamicFilterComponentsDictionary() {
+    return ['dynamic_filter'].concat(getCommonActionsDictionary());
+}
+
+export const defaultDynamicFilterDictionary: Dictionary = {
+    dynamic_filter: {
+        filter_tooltip: 'Search',
+        operator_b: 'between',
+        operator_e: '=',
+        operator_ne: '!=',
+        operator_gt: '>',
+        operator_gte: '>=',
+        operator_lt: '<',
+        operator_lte: '<=',
+        operator_c: 'contains',
+        operator_nc: 'not contains',
+
+        all_fields: 'all_fields',
+        operand_true: 'true',
+        operand_false: 'false',
+        error_operator_required: 'Operator required',
+        error_operand_required: 'Operand required',
+        error_invalid_date: 'Invalid date',
+        error_operand_mustbe_number: 'Invalid number',
+        error_filters_no_setted: 'Filters not yet set',
+    },
+};

package/src/components/DynamicFilter/hooks/useFilter.ts

@@ -0,0 +1,6 @@
+import { useContext } from 'react';
+import { BaseContext } from '../contexts/BaseContext';
+
+// ----------------------------------------------------------------------
+
+export const useBase = () => useContext(BaseContext);

package/src/components/DynamicFilter/index.tsx

@@ -0,0 +1,55 @@
+// react
+import { ApplyedFilters } from './components/ApplyedFilters';
+import { ClearFilters } from './components/ClearFilters';
+import { FilterButton } from './components/FilterButton';
+import { InputFilter } from './components/InputFilter';
+import { PopupEditFilter } from './components/PopupEditFilter';
+import { BaseContext, BaseProvider } from './contexts/BaseContext';
+import { useResponsiveDesktop } from '@m4l/graphics';
+
+// m4l
+
+// mui
+// styled components
+import { WrapperFilter, ContainerFistRow, WrapperFilterMobile } from './styles';
+// types
+import type { DynamicFilterProps } from './types';
+import { useFlagsPresent } from '@m4l/core';
+
+export const DynamicFilter = (props: DynamicFilterProps) => {
+    const isDesktop = useResponsiveDesktop();
+
+    const render = useFlagsPresent(['dictionary_loaded']);
+    if (!render) {
+        // eslint-disable-next-line react/jsx-no-useless-fragment
+        return <></>;
+    }
+    return (
+        <BaseProvider {...props}>
+            <BaseContext.Consumer>
+                {({ inEdition }) =>
+                    isDesktop ? (
+                        <WrapperFilter id="WrapperFilter" inEdition={inEdition}>
+                            <FilterButton />
+                            <InputFilter />
+                            <ApplyedFilters />
+                            <PopupEditFilter />
+                            <ClearFilters />
+                        </WrapperFilter>
+                    ) : (
+                        <WrapperFilterMobile id="WrapperFilterMobile" inEdition={inEdition}>
+                            <ContainerFistRow id="ContainerFistRow">
+                                <FilterButton />
+                                <InputFilter />
+                                <ClearFilters />
+                            </ContainerFistRow>
+
+                            <ApplyedFilters />
+                            <PopupEditFilter />
+                        </WrapperFilterMobile>
+                    )
+                }
+            </BaseContext.Consumer>
+        </BaseProvider>
+    );
+};

package/src/components/DynamicFilter/styles.tsx

@@ -0,0 +1,49 @@
+import { styled } from '@mui/material/styles';
+
+interface WrapperProps {
+    inEdition: boolean;
+}
+
+export const WrapperFilter = styled('div', {
+    shouldForwardProp: prop => prop !== 'inEdition',
+})<WrapperProps>(({ theme, inEdition }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'flex-start',
+    height: 'auto',
+    width: '100%',
+    padding: theme.spacing(0.5),
+    borderRadius: theme.spacing(1),
+    border: inEdition
+        ? `1px solid ${theme.palette.primary.main}`
+        : `1px solid ${theme.palette.divider}`,
+}));
+
+export const WrapperFilterMobile = styled('div', {
+    shouldForwardProp: prop => prop !== 'inEdition',
+})<WrapperProps>(({ theme, inEdition }) => ({
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    minWidth: theme.spacing(25),
+    height: 'auto',
+    width: '100%',
+    padding: theme.spacing(0.5),
+    borderRadius: theme.spacing(1),
+    border: inEdition
+        ? `1px solid ${theme.palette.primary.main}`
+        : `1px solid ${theme.palette.divider}`,
+    gap: theme.spacing(0.75),
+    '& .WrapperApplyedFilters': {
+        margin: '0px',
+        padding: '0px',
+        border: '0px',
+    },
+}));
+
+export const ContainerFistRow = styled('div')(() => ({
+    width: '100%',
+    display: 'flex',
+    justifyContent: 'space-between',
+}));