@m4l/components 0.1.39 → 0.1.41

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

@@ -1,53 +0,0 @@
-// react
-
-// m4l
-
-// mui
-
-// styled components
-
-// internal components
-import { ScrollBar } from '../../../ScrollBar';
-// sub components
-
-// styled components
-import { WrapperApplyedFilters, ContainerApplyedFilters } from './styles';
-
-// types
-
-// hooks
-
-import { useBase } from '../../hooks/useFilter';
-import { ApplyedFilter } from './components/ApplyedFilter';
-/* import { default as ScrollBar } from '../../../ScrollBar'; */
-
-import 'simplebar/dist/simplebar.min.css';
-
-// utils
-
-// constants
-
-export function ApplyedFilters() {
-    const { applyedFilters, isSkeleton } = useBase();
-
-    if (isSkeleton) {
-        return <WrapperApplyedFilters id="WrapperApplyedFilters"></WrapperApplyedFilters>;
-    }
-
-    return (
-        <WrapperApplyedFilters className="WrapperApplyedFilters">
-            {/* <SimpleBar forceVisible="x" autoHide={false}> */}
-            <ScrollBar>
-                <ContainerApplyedFilters id="WrapperApplyedFilters">
-                    {[...applyedFilters]
-                        .sort((a, b) => (a.isSetted === b.isSetted ? 0 : a.isSetted ? -1 : 1))
-                        .reverse()
-                        .map(filter => (
-                            <ApplyedFilter key={filter.id} {...filter} />
-                        ))}
-                </ContainerApplyedFilters>
-            </ScrollBar>
-            {/* </SimpleBar> */}
-        </WrapperApplyedFilters>
-    );
-}

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

@@ -1,17 +0,0 @@
-import { styled } from '@mui/material/styles';
-
-export const WrapperApplyedFilters = styled('div')(({ theme }) => ({
-    width: '100%',
-    margin: theme.spacing(0, 1),
-    paddingLeft: theme.spacing(1),
-    borderLeft: `1px solid ${theme.palette.divider}`,
-}));
-
-export const ContainerApplyedFilters = styled('div')(({ theme }) => ({
-    width: '100%',
-    display: 'flex',
-    justifyContent: 'flex-start',
-    alignItems: 'center',
-    height: 'auto',
-    gap: theme.spacing(1.5),
-}));

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

@@ -1,33 +0,0 @@
-import { IconButton } from '../../../../components/mui_extended/IconButton';
-import { useEnvironment } from '@m4l/core';
-import { WrapperClearFilters, SKTClearFilters } from './styles';
-import { useBase } from '../../hooks/useFilter';
-import { Skeleton } from '@mui/material';
-
-export const ClearFilters = () => {
-    const { host_static_assets, environment_assets } = useEnvironment();
-    const { clearFilters, isSkeleton, applyedFilters } = useBase();
-
-    if (isSkeleton) {
-        return (
-            <SKTClearFilters>
-                <Skeleton variant="circular" width={'20px'} height={'20px'} />
-            </SKTClearFilters>
-        );
-    }
-
-    if (applyedFilters.findIndex(f => f.fixed == false) > -1) {
-        return (
-            <WrapperClearFilters>
-                <IconButton
-                    src={`${host_static_assets}/${environment_assets}/frontend/components/dynamic_filter/assets/icons/clear.svg`}
-                    onClick={clearFilters}
-                    dictionaryTooltip={'dynamic_filter.tooltip_clear_filters'}
-                />
-            </WrapperClearFilters>
-        );
-    }
-
-    // eslint-disable-next-line react/jsx-no-useless-fragment
-    return <></>;
-};

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

@@ -1,14 +0,0 @@
-import { styled } from '@mui/material';
-
-export const SKTClearFilters = styled('div')(({ theme }) => ({
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-    minWidth: theme.spacing(3.75),
-    height: theme.spacing(3.75),
-}));
-
-export const WrapperClearFilters = styled('div')(({ theme }) => ({
-    paddingLeft: theme.spacing(0.5),
-    borderLeft: `1px solid ${theme.palette.divider}`,
-}));

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

@@ -1,73 +0,0 @@
-// react
-
-// m4l
-import { useEnvironment } from '@m4l/core';
-// mui
-import { Skeleton } from '@mui/material';
-// styled components
-
-// internal components
-import { IconButton } from '../../../mui_extended/IconButton';
-// sub components
-
-// styled components
-import { SKTWrapperFilterButton, WrapperFilterButton } from './styles';
-// types
-
-// hooks
-
-import { useBase } from '../../hooks/useFilter';
-import { useMemo } from 'react';
-// utils
-
-// constants
-
-export function FilterButton() {
-    const { isSkeleton, fireOnChangeFilters, automatic, isDirty, isValid } = useBase();
-    const { host_static_assets, environment_assets } = useEnvironment();
-
-    if (isSkeleton) {
-        return (
-            <SKTWrapperFilterButton>
-                <Skeleton variant="circular" width={20} height={20} />
-            </SKTWrapperFilterButton>
-        );
-    }
-
-    const color = useMemo(() => {
-        if (automatic || !isDirty) {
-            return 'action.active';
-        }
-        if (!isValid) {
-            return 'error.main';
-        }
-
-        return 'primary.main';
-    }, [automatic, isValid, isDirty]);
-
-    /*     const getButtonAnimation = () => {
-        if(isDirty && isValid){
-            return 'isDirty';
-        }
-        
-        isDirty && isValid ? 'isDirty' : '';
-        return '';
-    }; */
-
-    return (
-        <WrapperFilterButton
-            id="WrapperFilterButton"
-            className={isDirty && isValid ? 'isDirty' : ''}
-        >
-            <IconButton
-                bgColor={color}
-                dictionaryTooltip="dynamic_filter.filter_tooltip"
-                onClick={() => fireOnChangeFilters()}
-                aria-label="settings"
-                src={`${host_static_assets}/${environment_assets}/frontend/components/dynamic_filter/assets/icons/${
-                    automatic ? 'refresh' : 'search'
-                }.svg`}
-            />
-        </WrapperFilterButton>
-    );
-}

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

@@ -1,32 +0,0 @@
-import { alpha, styled } from '@mui/material/styles';
-
-export const SKTWrapperFilterButton = styled('div')(({ theme }) => ({
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-    minWidth: theme.spacing(3.75),
-    height: theme.spacing(3.75),
-    background: alpha(theme.palette.primary.main, 0.3),
-}));
-
-export const WrapperFilterButton = styled('div')(() => ({
-    '&.isDirty': {
-        animationName: 'dirtyEffect',
-        animationDuration: '1s',
-        animationFillMode: 'both',
-        animationIterationCount: 'infinite',
-        transition: 'all .3s',
-        '@keyframes dirtyEffect': {
-            '20%': {
-                opacity: 1,
-            },
-            '50%': {
-                opacity: 0.5,
-            },
-            '100%': {
-                opacity: 1,
-            },
-        },
-    },
-    '&.isDirtyError': {},
-}));

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

@@ -1,158 +0,0 @@
-// react
-import { ChangeEvent, KeyboardEvent, useMemo, useState } from 'react';
-// m4l
-
-// mui
-import { MenuItem, Skeleton } from '@mui/material';
-// styled components
-
-// internal components
-
-// sub components
-
-// styled components
-import { StyledInputFilter, WrapperInputFilter } from './styles';
-import { LabelMemuItem } from '../../../mui_extended/MenuActions/styles';
-// types
-
-// hooks
-
-import { useBase } from '../../hooks/useFilter';
-
-import { Popover } from '../../../mui_extended/Popover';
-import { ALL_FIELDS, Field } from '../../types';
-import { Icon } from '../../../Icon';
-
-// utils
-
-// constants
-
-export function InputFilter() {
-    const {
-        isSkeleton,
-        withAllField,
-        availableFields,
-        showPopupForAddFilter,
-        addFilter,
-        openAnchorEl,
-        openMenuFields,
-        closeMenuFields,
-        hidePopupEdit,
-    } = useBase();
-
-    const [valueFilter, setValueFilter] = useState<string>('');
-
-    const finalFields = useMemo(() => {
-        if (!openAnchorEl) {
-            return [];
-        }
-
-        //falta tener en cuenta los que no puede ser repetidos
-
-        return availableFields.filter(field => field.label.includes(valueFilter));
-    }, [valueFilter, openAnchorEl]);
-
-    if (isSkeleton) {
-        return (
-            <WrapperInputFilter id="SKTWrapperInputFilter">
-                <Skeleton variant="text" width={'100%'} height={24} />
-            </WrapperInputFilter>
-        );
-    }
-
-    const handleClose = () => {
-        closeMenuFields();
-    };
-
-    const handleClickItem = (field: Field) => {
-        closeMenuFields();
-        showPopupForAddFilter(openAnchorEl, field);
-    };
-
-    const onClickFilter = (event: any) => {
-        //
-        openMenuFields(event.currentTarget);
-    };
-
-    const onChangeFilter = (event: ChangeEvent<HTMLInputElement>) => {
-        setValueFilter(event.target.value);
-        if (!openAnchorEl) {
-            openMenuFields(event.currentTarget);
-        }
-        hidePopupEdit(true);
-    };
-
-    const handleKeyPressMenu = (event: KeyboardEvent<HTMLInputElement>) => {
-        if (event.key !== 'Enter') return;
-
-        if (valueFilter.trim() === '') {
-            closeMenuFields();
-            return;
-        }
-
-        if (withAllField) {
-            addFilter({
-                n: ALL_FIELDS.name,
-                isSetted: true,
-                fixed: false,
-                o: 'c',
-                o1: valueFilter,
-                labelOperands: valueFilter,
-            });
-            setValueFilter('');
-            closeMenuFields();
-        }
-    };
-
-    if (!withAllField && availableFields.length == 0) {
-        // eslint-disable-next-line react/jsx-no-useless-fragment
-        return <></>;
-    }
-
-    return (
-        <WrapperInputFilter id="WrapperInputFilter">
-            <StyledInputFilter
-                type="text"
-                value={valueFilter}
-                placeholder={'filter'}
-                onClick={onClickFilter}
-                onChange={onChangeFilter}
-                onKeyPress={handleKeyPressMenu}
-            />
-            {availableFields.length > 0 && (
-                <Popover
-                    id="Popover"
-                    open={Boolean(openAnchorEl)}
-                    anchorEl={openAnchorEl}
-                    onClose={handleClose}
-                    // anchorOrigin={{ vertical: 'top', horizontal: 'left' }}
-                    // transformOrigin={{ vertical: 'top', horizontal: 'right' }}
-                    disableAutoFocus
-                    arrowType={'right-top'}
-                    sx={{
-                        '& .MuiMenuItem-root': { px: 1, typography: 'body2', borderRadius: 0.75 },
-                    }}
-                >
-                    {Boolean(openAnchorEl) &&
-                        finalFields.map((field, index) => (
-                            <MenuItem
-                                key={`menu_action_${index}`}
-                                dense
-                                onClick={() => handleClickItem(field)}
-                                // sx={{ color: field.color ? field.color : 'text.main' }}
-                            >
-                                <Icon
-                                    src={field.urlIcon}
-                                    // sx={{
-                                    //   width: menuAction.iconWidth ? menuAction.iconWidth : 18,
-                                    //   height: menuAction.iconHeight ? menuAction.iconHeight : 18,
-                                    // }}
-                                />
-                                <LabelMemuItem>{field.label}</LabelMemuItem>
-                            </MenuItem>
-                        ))}
-                </Popover>
-            )}
-        </WrapperInputFilter>
-    );
-}

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

@@ -1,31 +0,0 @@
-import { styled } from '@mui/material/styles';
-
-export const WrapperInputFilter = styled('div')(({ theme }) => ({
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-    width: '100%',
-    height: theme.spacing(3),
-    borderLeft: `1px solid ${theme.palette.divider}`,
-    paddingLeft: theme.spacing(1),
-    marginLeft: theme.spacing(1),
-    [theme.breakpoints.up('sm')]: {
-        width: theme.spacing(25),
-    },
-}));
-
-export const StyledInputFilter = styled('input')(({ theme }) => ({
-    background: 'transparent',
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-    minWidth: theme.spacing(3.75),
-    width: '100%',
-    '&': {
-        outline: 'none',
-        border: 'none',
-    },
-    [theme.breakpoints.up('sm')]: {
-        width: 'auto',
-    },
-}));

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',
-    },
-}));