@m4l/components 0.1.39 → 0.1.41

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

@@ -1,464 +0,0 @@
-// 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

@@ -1,64 +0,0 @@
-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

@@ -1,30 +0,0 @@
-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

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

package/src/components/DynamicFilter/index.tsx

@@ -1,55 +0,0 @@
-// 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

@@ -1,49 +0,0 @@
-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',
-}));