@m4l/components 0.1.40 → 0.1.41

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

@@ -1,96 +0,0 @@
-/* eslint-disable jsx-a11y/click-events-have-key-events */
-// react
-
-// m4l
-
-// mui
-
-// styled components
-import {
-    WrapperApplyedFilter,
-    AplyedFilterStyled,
-    ContainerField,
-    ContainerOperator,
-    ContainerOperands,
-} from './styles';
-// internal components
-import { IconButton } from '../../../../../mui_extended/IconButton';
-// sub components
-
-// styled components
-
-// types
-import type { FilterFieldApply } from '../../../../types';
-// hooks
-import { useBase } from '../../../../hooks/useFilter';
-import { useMemo } from 'react';
-import { useEnvironment } from '@m4l/core';
-
-// utils
-
-// constants
-
-export function ApplyedFilter(props: FilterFieldApply) {
-    const {
-        n: fieldName,
-        id,
-        isSetted,
-        fixed,
-        labelOperator: labelOperator,
-        labelOperands: labelOperands,
-    } = props;
-
-    const { removeFilter, showPopupForEditFilter, hidePopupEdit, getFieldByName } = useBase();
-    const { host_static_assets, environment_assets } = useEnvironment();
-
-    const field = useMemo(() => {
-        return getFieldByName(fieldName);
-    }, [getFieldByName]);
-
-    const urlIcon = useMemo(() => {
-        if (!field) return;
-
-        if (field && field.urlIcon !== '') {
-            return field.urlIcon;
-        }
-        return '';
-    }, [field]);
-
-    const onDelete = () => {
-        //
-        hidePopupEdit(false);
-        removeFilter(id);
-    };
-    const onClick = (event: any) => {
-        //
-        showPopupForEditFilter(event.currentTarget, props);
-    };
-
-    if (!field) {
-        // eslint-disable-next-line react/jsx-no-useless-fragment
-        return <></>;
-    }
-    return (
-        <WrapperApplyedFilter
-            id={'WrapperApplyedFilter'}
-            className={!isSetted ? 'waf_no_setted' : ''}
-        >
-            {urlIcon && <IconButton src={urlIcon} onClick={onClick} />}
-            <AplyedFilterStyled onClick={onClick}>
-                <ContainerField>{field.label}</ContainerField>
-                <ContainerOperator>{labelOperator}</ContainerOperator>
-                <ContainerOperands>{labelOperands}</ContainerOperands>
-            </AplyedFilterStyled>
-            {!fixed && (
-                <IconButton
-                    size="small"
-                    src={`${host_static_assets}/${environment_assets}/frontend/components/dynamic_filter/assets/icons/clear.svg`}
-                    onClick={onDelete}
-                    dictionaryTooltip={'dynamic_filter.tooltip_clear_filter'}
-                />
-            )}
-        </WrapperApplyedFilter>
-    );
-}
-
-/* {`${field.label}\u00A0\u00A0${labelOperator}\u00A0\u00A0${labelOperands}`} */

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

@@ -1,47 +0,0 @@
-import { styled } from '@mui/material/styles';
-import { alpha } from '@mui/material';
-
-export const WrapperApplyedFilter = styled('div')(({ theme }) => ({
-    width: 'auto',
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-    height: '100%',
-    minHeight: theme.spacing(3),
-    paddingLeft: theme.spacing(1),
-    backgroundColor: theme.palette.grid?.sectionHeader,
-    border: '1px solid',
-    borderColor: alpha(`${theme.palette.divider}`, 0.1),
-    overflow: 'visible',
-    borderRadius: theme.spacing(1),
-    '&.waf_no_setted': {
-        border: `1px solid ${theme.palette.error.main}`,
-    },
-}));
-
-export const AplyedFilterStyled = styled('div')(({ theme }) => ({
-    ...theme.typography.body2,
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-    width: 'auto',
-    height: '100%',
-    marginRight: theme.spacing(1),
-    marginLeft: theme.spacing(1),
-    whiteSpace: 'nowrap',
-}));
-
-export const ContainerField = styled('span')(({ theme }) => ({
-    ...theme.typography.subtitle2,
-}));
-
-export const ContainerOperator = styled('span')(({ theme }) => ({
-    ...theme.typography.body2,
-    marginLeft: theme.spacing(1.5),
-    fontStyle: 'italic',
-}));
-
-export const ContainerOperands = styled('span')(({ theme }) => ({
-    ...theme.typography.body2,
-    marginLeft: theme.spacing(1.5),
-}));

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