@m4l/components 0.1.35 → 0.1.37

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

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

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

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

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

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

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

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

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

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

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