@m4l/components 0.1.40 → 0.1.41

package/src/components/DynamicFilter/components/PopupEditFilter/index.tsx

@@ -1,150 +0,0 @@
-/* eslint-disable react/jsx-no-useless-fragment */
-import { useModuleDictionary } from '@m4l/core';
-import { ClickAwayListener, Popper, useTheme } from '@mui/material';
-import { useMemo } from 'react';
-import { FieldValues } from 'react-hook-form';
-import { Icon } from '../../../Icon';
-import { RHFormProvider } from '../../../../contexts/RHFormContext';
-import { useBase } from '../../hooks/useFilter';
-import { FilterFormFieldApply } from '../../types';
-import { PopupEditFilterComponent } from '../fieldstypes/factory';
-import {
-    WrapperPopupEditFilter,
-    TitleContainer,
-    HeaderContainer,
-    WrapperEditFilter,
-} from './styles';
-import { ActionCancel, ActionIntro, Actions } from '../../../../components/CommonActions';
-
-// const getFilterFromFormData = (
-//     idFilter: number,
-//     field: Field,
-//     data: FieldValues,
-//     fixed: boolean,
-// ): FilterFieldApply => {
-//     //Esta funcion se usa para caundo se da introducir, convertir los valores de data a FilterFieldApply
-
-//     const newFilter: FilterFieldApply = {
-//         id: idFilter,
-//         fieldName: field.name,
-//         fixed: fixed,
-//         isSetted: true,
-//         operator: data.valueOperator.id,
-//         operand1: data.valueOperand1,
-//         labelOperator: data.valueOperator.label,
-//         labelOperands: '',
-//     };
-
-//     switch (field.type) {
-//         case 'string':
-//         case 'number':
-//             break;
-//         case 'boolean':
-//             newFilter.operand1 = data.valueOperand1.value;
-//             newFilter.labelOperands = data.valueOperand1.label;
-//             break;
-//         case 'datetime':
-//             newFilter.operand1 = (data.valueOperand1 as Date).toUTCString();
-//             if (data.valueOperator.id === 'b' ){
-//                 newFilter.operand2 = (data.valueOperand2 as Date).toUTCString();
-//                 newFilter.labelOperands = format(data.valueOperand1, 'yyyy-MM-dd hh:mm:ss',{locale:})
-//             }else{
-
-//             }
-
-//             break;
-//         // case 'date-time':
-//         //     return <StringFilter />;
-//         // case 'time':
-//         //     return <StringFilter />;
-//         // case 'in':
-//         //     return <StringFilter />;
-//         default:
-//     }
-
-//
-
-//     return newFilter;
-// };
-
-export const PopupEditFilter = () => {
-    const {
-        popupValidationSchema,
-        popupData: { popupAnchorEl, filter, field },
-        hidePopupEdit,
-        addFilter,
-        updateFilter,
-        getLabelOperator,
-        fnTransformFormValuesIntoRawValues,
-    } = useBase();
-
-    const theme = useTheme();
-
-    const { getLabel } = useModuleDictionary();
-
-    const values: FieldValues = useMemo(() => {
-        //Se inicializa solo el operador, porque los operandos dependen de cada tipo de dato, y se setean dentro de cada componente
-
-        if (!filter || !field) return {};
-
-        const valuesFilter: FilterFormFieldApply = {
-            ...filter,
-            valueOperator: {
-                id: filter.o,
-                label: getLabelOperator(filter.o),
-            },
-        };
-
-        return valuesFilter;
-    }, [filter, field, getLabelOperator, getLabel]);
-
-    const onSubmit = async (data: FieldValues) => {
-        if (!filter || !field) return;
-
-        const newFilter = fnTransformFormValuesIntoRawValues(data);
-        if (!newFilter) return;
-
-        if (filter.id === 0) {
-            addFilter(newFilter); // getFilterFromFormData(filter.id, field, data, false)
-        } else {
-            updateFilter(newFilter); //getFilterFromFormData(filter.id, field, data, filter.fixed)
-        }
-        hidePopupEdit(false);
-    };
-
-    const onClose = () => {
-        hidePopupEdit(false);
-    };
-
-    return (
-        <Popper
-            open={Boolean(popupAnchorEl)}
-            anchorEl={popupAnchorEl}
-            sx={{ boxShadow: theme.customShadows.dropdown, borderRadius: 1 }}
-        >
-            <ClickAwayListener onClickAway={onClose}>
-                <WrapperEditFilter>
-                    {filter && (
-                        <RHFormProvider
-                            onSubmit={onSubmit}
-                            values={values}
-                            validationSchema={popupValidationSchema}
-                        >
-                            <WrapperPopupEditFilter>
-                                <HeaderContainer>
-                                    {field?.urlIcon && <Icon src={field.urlIcon} />}
-                                    <TitleContainer>{field?.label}</TitleContainer>
-                                </HeaderContainer>
-                                <PopupEditFilterComponent filter={filter} />
-                                <Actions>
-                                    <ActionCancel onClick={onClose} />
-                                    <ActionIntro />
-                                </Actions>
-                            </WrapperPopupEditFilter>
-                        </RHFormProvider>
-                    )}
-                </WrapperEditFilter>
-            </ClickAwayListener>
-        </Popper>
-    );
-};

package/src/components/DynamicFilter/components/PopupEditFilter/styles.tsx

@@ -1,43 +0,0 @@
-import { styled } from '@mui/material/styles';
-
-export const WrapperPopupEditFilter = styled('div')(({ theme }) => ({
-    display: 'flex',
-    flexDirection: 'column',
-    justifyContent: 'center',
-    alignItems: 'center',
-    padding: theme.spacing(1.4, 3, 3, 3),
-    backgroundColor: theme.palette.background.default,
-    borderRadius: theme.spacing(1),
-}));
-
-export const PopperActionsContainer = styled('div')(({ theme }) => ({
-    display: 'flex',
-    justifyContent: 'center',
-    gap: theme.spacing(3),
-    paddingTop: theme.spacing(3),
-}));
-
-export const TitleContainer = styled('div')(({ theme }) => ({
-    ...theme.typography.subtitle2,
-    width: '100%',
-    display: 'flex',
-    justifyContent: 'flex-start',
-    alignItems: 'center',
-    padding: theme.spacing(2, 0),
-    marginLeft: theme.spacing(1.5),
-}));
-
-export const HeaderContainer = styled('div')(({ theme }) => ({
-    width: '100%',
-    display: 'flex',
-    justifyContent: 'flex-start',
-    alignItems: 'center',
-    borderBottom: `1px solid ${theme.palette.divider}`,
-}));
-
-export const WrapperEditFilter = styled('div')(() => ({
-    '& .m4l_FormProvider': {
-        padding: '0px',
-        margin: '0px',
-    },
-}));

package/src/components/DynamicFilter/components/fieldstypes/BooleanFilter/index.tsx

@@ -1,188 +0,0 @@
-// react
-import { useCallback, useEffect, useMemo, useState } from 'react';
-import { FieldValues, useFormContext } from 'react-hook-form';
-// m4l
-import { useModuleDictionary } from '@m4l/core';
-// mui
-
-// external libraries
-import * as Yup from 'yup';
-// styled components
-
-// internal components
-import { RHFAutocomplete } from '../../../../hook-form';
-
-// sub components
-
-// styled components
-import { WrapperAllFieldsFilter, WrapperAutoComplete } from './styles';
-// types
-import {
-    OptionOperator,
-    BooleanOperator,
-    BOOLEAN_OPERATORS,
-    FilterFieldApply,
-    Field,
-} from '../../../types';
-// hooks
-
-import { useBase } from '../../../hooks/useFilter';
-
-// utils
-
-// constants
-import {} from '../../../types';
-
-interface BooleanOperand {
-    value: boolean;
-    label: string;
-}
-
-export const getDefaultBooleanFilter = (
-    field: Field,
-    fixed: boolean,
-    getLabel: (key: string) => string,
-): FilterFieldApply => {
-    const dfop1 = field.defaultOperand1;
-
-    const defaultFilter: FilterFieldApply = {
-        id: 0,
-        n: field.name,
-        fixed,
-        isSetted: true, //Seteado por defecto
-        o: 'e',
-        labelOperator: '',
-        o1: true,
-        o2: '',
-        labelOperands: '',
-    };
-
-    defaultFilter.labelOperator = getLabel(`dynamic_filter.operator_${defaultFilter.o}`);
-
-    if (dfop1 !== undefined && typeof dfop1 === 'boolean') {
-        defaultFilter.o1 = dfop1;
-    }
-
-    defaultFilter.labelOperands = getLabel(`dynamic_filter.operand_${defaultFilter.o1}`);
-
-    return defaultFilter;
-};
-
-export function BooleanFilter() {
-    const {
-        setPoupEditValidationSchema,
-        setFnTransformFormValuesIntoValues: setTransformFunctionFormValuesToValues,
-        getLabelOperator,
-    } = useBase();
-    const { getLabel } = useModuleDictionary();
-    const {
-        popupData: { filter, field },
-    } = useBase();
-    const { setValue } = useFormContext();
-    const [isLoaded, setIsLoaded] = useState(false);
-
-    const operators: Array<OptionOperator<BooleanOperator>> = useMemo(
-        () =>
-            BOOLEAN_OPERATORS.map(o => ({
-                id: o,
-                label: getLabelOperator(o),
-            })),
-        [getLabelOperator],
-    );
-    const optionsYesNo: Array<BooleanOperand> = useMemo(
-        () => [
-            {
-                value: true,
-                label: getLabel('dynamic_filter.operand_true'),
-            },
-            {
-                value: false,
-                label: getLabel('dynamic_filter.operand_false'),
-            },
-        ],
-        [getLabel],
-    );
-
-    const transformFunctionFormValuesToValues = useCallback(
-        (data: FieldValues): FilterFieldApply | undefined => {
-            //Esta funcion se usa para caundo se da introducir, convertir los valores de data a FilterFieldApply
-
-            if (!filter || !field) return undefined;
-
-            const newFilter: FilterFieldApply = {
-                id: filter.id,
-                n: field.name,
-                fixed: filter.fixed,
-                isSetted: true,
-                o: data.valueOperator.id,
-                labelOperator: data.valueOperator.label,
-
-                o1: data.valueOperand1.value,
-                labelOperands: data.valueOperand1.label,
-            };
-
-            return newFilter;
-        },
-        [],
-    );
-
-    useEffect(() => {
-        if (!isLoaded) {
-            setPoupEditValidationSchema({
-                valueOperator: Yup.object()
-                    .nullable()
-                    .required(getLabel(`error_operator_required`)),
-                valueOperand1: Yup.object().nullable().required(getLabel(`error_operand_required`)),
-            });
-        }
-
-        //Funcion transformadora de datos
-        setTransformFunctionFormValuesToValues(transformFunctionFormValuesToValues);
-
-        //Cargar en el formato que requiera los componentes los operandos
-        if (filter && field) {
-            setValue(
-                'valueOperand1',
-                {
-                    value: filter.o1,
-                    label: getLabel(`dynamic_filter.operand_${filter.o1}`),
-                },
-                {
-                    shouldTouch: false,
-                    shouldValidate: false,
-                },
-            );
-        }
-        setIsLoaded(true);
-    }, [getLabel]);
-
-    return (
-        <WrapperAllFieldsFilter id="WrapperAllFieldsFilter">
-            {isLoaded && (
-                <>
-                    <WrapperAutoComplete>
-                        <RHFAutocomplete<OptionOperator<BooleanOperator>>
-                            name="valueOperator"
-                            autoComplete="off"
-                            options={operators}
-                            getOptionLabel={option => option.label}
-                            isOptionEqualToValue={(option, value) => option.id === value.id}
-                            label=""
-                        />
-                    </WrapperAutoComplete>
-
-                    <WrapperAutoComplete>
-                        <RHFAutocomplete<BooleanOperand>
-                            name="valueOperand1"
-                            autoComplete="off"
-                            options={optionsYesNo}
-                            getOptionLabel={option => option.label}
-                            isOptionEqualToValue={(option, value) => option.value === value.value}
-                            label=""
-                        />
-                    </WrapperAutoComplete>
-                </>
-            )}
-        </WrapperAllFieldsFilter>
-    );
-}

package/src/components/DynamicFilter/components/fieldstypes/BooleanFilter/styles.tsx

@@ -1,17 +0,0 @@
-import { styled } from '@mui/material/styles';
-
-export const WrapperAllFieldsFilter = styled('div')(({ theme }) => ({
-    display: 'flex',
-    flexDirection: 'column',
-    justifyContent: 'center',
-    alignItems: 'center',
-    width: '100%',
-    minWidth: theme.spacing(3.75),
-    height: '100%',
-    padding: theme.spacing(3, 0),
-    gap: theme.spacing(3),
-}));
-
-export const WrapperAutoComplete = styled('div')(() => ({
-    width: '100%',
-}));

package/src/components/DynamicFilter/components/fieldstypes/DateTimeFilter/index.tsx

@@ -1,229 +0,0 @@
-// react
-import { useCallback, useEffect, useMemo, useState } from 'react';
-import { FieldValues, useFormContext, useWatch } from 'react-hook-form';
-// m4l
-import { useModuleDictionary } from '@m4l/core';
-// mui
-
-// external libraries
-import * as Yup from 'yup';
-
-// styled components
-
-// internal components
-import { RHFAutocomplete, RHFDateTime } from '../../../../hook-form';
-
-// sub components
-
-// styled components
-import { WrapperAllFieldsFilter, WrapperAutoComplete } from './styles';
-// types
-import {
-    OptionOperator,
-    DateTimeOperator,
-    DATE_TIME_OPERATORS,
-    FilterFieldApply,
-    Field,
-} from '../../../types';
-
-// hooks
-
-import { useBase } from '../../../hooks/useFilter';
-import { isValidDate } from '../validations';
-import { Formatters, useFormatter } from '@m4l/graphics';
-
-// utils
-
-// constants
-
-export const getDefaultDateTimeFilter = (
-    field: Field,
-    fixed: boolean,
-    getLabel: (key: string) => string,
-    formatters: Formatters,
-): FilterFieldApply => {
-    //'number' | 'string' | 'boolean' | 'date' | 'date-time' | 'time' | 'in';
-    const defaultStartDate = new Date();
-    const defaultEndDate = new Date();
-
-    const { dateFormatter } = formatters;
-
-    let dfop1 = field.defaultOperand1;
-    let dfop2 = field.defaultOperand2;
-
-    const defaultFilter: FilterFieldApply = {
-        id: 0,
-        n: field.name,
-        fixed,
-        isSetted: true,
-        o: 'b',
-        labelOperator: '',
-        o1: dfop1,
-        o2: dfop2,
-        labelOperands: '',
-    };
-
-    if (dfop1) {
-        if (isValidDate(dfop1)) {
-            defaultStartDate.setDate((dfop1 as Date).getDate());
-        } else {
-            dfop1 = undefined;
-        }
-    }
-
-    if (dfop1 === undefined) {
-        defaultStartDate.setHours(0, 0, 0, 0);
-    }
-
-    if (dfop2) {
-        if (isValidDate(dfop2)) {
-            defaultEndDate.setDate((dfop2 as Date).getDate());
-        } else {
-            dfop2 = undefined;
-        }
-    }
-
-    if (dfop2 === undefined) {
-        defaultEndDate.setHours(23, 59, 59, 999); //defaultStartDate.getHours()
-    }
-
-    defaultFilter.o1 = defaultStartDate.toISOString();
-    defaultFilter.o2 = defaultEndDate.toISOString();
-
-    defaultFilter.labelOperands = `${dateFormatter.formatDate(
-        defaultStartDate,
-        formatters.dateFormatter.datetimeFormat,
-    )} - ${dateFormatter.formatDate(defaultEndDate, dateFormatter.datetimeFormat)}`;
-
-    defaultFilter.labelOperator = getLabel(`dynamic_filter.operator_${defaultFilter.o}`);
-    return defaultFilter;
-};
-
-export function DateTimeFilter() {
-    const {
-        setPoupEditValidationSchema,
-        setFnTransformFormValuesIntoValues: setTransformFunctionFormValuesToValues,
-        getLabelOperator,
-    } = useBase();
-    const { getLabel } = useModuleDictionary();
-    const { dateFormatter } = useFormatter();
-    const {
-        popupData: { filter, field },
-    } = useBase();
-
-    const { control, setValue } = useFormContext();
-    const operator = useWatch({
-        control,
-        name: 'valueOperator',
-    });
-    const [isLoaded, setIsLoaded] = useState(false);
-
-    //export type DateTimeOperator = 'b' | 'e' | 'ne' | 'gt' | 'gte' | 'lt' | 'lte';
-
-    const options: Array<OptionOperator<DateTimeOperator>> = useMemo(
-        () =>
-            DATE_TIME_OPERATORS.map(o => ({
-                id: o,
-                label: getLabelOperator(o),
-            })),
-        [getLabelOperator],
-    );
-
-    const transformFunctionFormValuesToValues = useCallback(
-        (data: FieldValues): FilterFieldApply | undefined => {
-            //Esta funcion se usa para caundo se da introducir, convertir los valores de data a FilterFieldApply
-
-            if (!filter || !field) return undefined;
-
-            const newFilter: FilterFieldApply = {
-                id: filter.id,
-                n: field.name,
-                fixed: filter.fixed,
-                isSetted: true,
-                o: data.valueOperator.id,
-                o1: (data.valueOperand1 as Date).toISOString(),
-                labelOperator: data.valueOperator.label,
-                labelOperands: '',
-            };
-
-            if (data.valueOperator.id === 'b') {
-                newFilter.o2 = (data.valueOperand2 as Date).toISOString();
-                newFilter.labelOperands = `${dateFormatter.formatDate(
-                    data.valueOperand1,
-                    dateFormatter.datetimeFormat,
-                )} - ${dateFormatter.formatDate(data.valueOperand2, dateFormatter.datetimeFormat)}`;
-            } else {
-                newFilter.o2 = newFilter.o2 ? newFilter.o2 : newFilter.o1;
-                newFilter.labelOperands = dateFormatter.formatDate(
-                    data.valueOperand1,
-                    dateFormatter.datetimeFormat,
-                );
-            }
-
-            return newFilter;
-        },
-        [],
-    );
-
-    useEffect(() => {
-        if (!isLoaded) {
-            setPoupEditValidationSchema({
-                valueOperator: Yup.object().nullable().required(getLabel(`operator_required`)),
-                valueOperand1: Yup.date()
-                    .required(getLabel(`dynamic_filter.error_invalid_date`))
-                    .typeError(getLabel(`dynamic_filter.error_invalid_date`)),
-
-                valueOperand2: Yup.mixed().when(['valueOperator.id'], {
-                    is: 'b',
-                    then: Yup.date()
-                        .typeError(getLabel(`dynamic_filter.error_invalid_date`))
-                        .min(
-                            Yup.ref('valueOperand1'),
-                            getLabel(`dynamic_filter.error_less_than_start`),
-                        ),
-                }),
-            });
-        }
-
-        //Cargar en el formato que requiera los componentes los operandos
-        if (filter && field) {
-            setValue('valueOperand1', new Date(filter.o1 as string), {
-                shouldTouch: false,
-                shouldValidate: false,
-            });
-            setValue('valueOperand2', new Date(filter.o2 as string), {
-                shouldTouch: false,
-                shouldValidate: false,
-            });
-        }
-        //Funcion transformadora de datos
-        setTransformFunctionFormValuesToValues(transformFunctionFormValuesToValues);
-
-        setIsLoaded(true);
-    }, [getLabel, filter, field]);
-
-    return (
-        <WrapperAllFieldsFilter>
-            {isLoaded && (
-                <>
-                    <WrapperAutoComplete>
-                        <RHFAutocomplete<OptionOperator<DateTimeOperator>>
-                            name="valueOperator"
-                            autoComplete="off"
-                            options={options}
-                            getOptionLabel={option => option.label}
-                            isOptionEqualToValue={(option, value) => option.id === value.id}
-                            label=""
-                        />
-                    </WrapperAutoComplete>
-
-                    <RHFDateTime name="valueOperand1" autoComplete="off" label="" focused />
-
-                    {operator && operator.id === 'b' && (
-                        <RHFDateTime name="valueOperand2" autoComplete="off" label="" />
-                    )}
-                </>
-            )}
-        </WrapperAllFieldsFilter>
-    );
-}

package/src/components/DynamicFilter/components/fieldstypes/DateTimeFilter/styles.tsx

@@ -1,16 +0,0 @@
-import { styled } from '@mui/material/styles';
-
-export const WrapperAllFieldsFilter = styled('div')(({ theme }) => ({
-    display: 'flex',
-    flexDirection: 'column',
-    justifyContent: 'center',
-    alignItems: 'center',
-    width: '100%',
-    minWidth: theme.spacing(3.75),
-    padding: theme.spacing(3, 0),
-    gap: theme.spacing(3),
-}));
-
-export const WrapperAutoComplete = styled('div')(() => ({
-    width: '100%',
-}));