@m4l/components 0.1.40 → 0.1.41

package/src/components/DataGrid/subcomponents/Actions/subcomponents/RowsCount/index.tsx

@@ -1,36 +0,0 @@
-// m4l
-import { useModuleDictionary, useModuleSkeleton } from '@m4l/core';
-// componentes estilados
-import { Skeleton } from '@mui/material';
-import { Container, RowsLabel, InsetLabel } from './styles';
-// hooks
-import { useDataGrid } from '../../../../hooks/useDataGrid';
-// types
-
-// utils
-
-export function RowsCount() {
-    const { rowsCount } = useDataGrid();
-    const { getLabel } = useModuleDictionary();
-    const isSkeleton = useModuleSkeleton();
-
-    if (isSkeleton) {
-        return (
-            <Container>
-                <RowsLabel>
-                    <Skeleton variant="text" width="40px" height="16px" />
-                </RowsLabel>
-                <InsetLabel>
-                    <Skeleton variant="text" width="20px" height="16px" />
-                </InsetLabel>
-            </Container>
-        );
-    }
-
-    return (
-        <Container className="rows-count" id="RowsCount">
-            <RowsLabel>{getLabel('data_grid.rows')}</RowsLabel>
-            <InsetLabel>{rowsCount}</InsetLabel>
-        </Container>
-    );
-}

package/src/components/DataGrid/subcomponents/Actions/subcomponents/RowsCount/styles.ts

@@ -1,41 +0,0 @@
-import { styled } from '@mui/material/styles';
-
-export const Container = styled('div')(() => ({
-    display: 'flex',
-    alignItems: 'center',
-    // flexGrow: 1,
-    // height: "35px",
-}));
-
-export const RowsLabel = styled('span')(() => ({}));
-
-export const InsetLabel = styled('span')(({ theme }) => ({
-    marginLeft: theme.spacing(2),
-    paddingTop: '2px',
-    paddingBottom: '2px',
-    paddingLeft: '4px',
-    paddingRight: '4px',
-    border: `1px solid ${theme.palette.divider}`,
-    // display: 'flex',
-    // alignItems: 'center',
-}));
-
-/* 
-.mi-grid-rdg-header__container-total-regs {
-
-}
-
-.mi-grid-rdg-header__total-regs {
-    width: 80px!important;
-    padding: initial;
-}
-
-.mi-grid-rdg-header__total-regs .mi-label {
-    margin-right: 7px;
-}
-
-.mi-grid-rdg-header__total-regs .mi-input {
-    width: 80px!important;
-    padding: initial;
-    height: 20px!important;
-} */

package/src/components/DataGrid/subcomponents/Actions/subcomponents/RowsCount/types.ts

@@ -1,2 +0,0 @@
-// eslint-disable-next-line @typescript-eslint/no-empty-interface
-export interface TotalRecordProps {}

package/src/components/DataGrid/subcomponents/Actions/subcomponents/Settings/index.tsx

@@ -1,97 +0,0 @@
-// react
-import { useCallback, useRef } from 'react';
-// mui
-
-// styled components
-
-// internal components
-import { Skeleton } from '@mui/material';
-import { IconButton } from '../../../../../mui_extended/IconButton';
-// sub components
-import { ColumnsConfig } from './subcomponents/ColumnsConfig';
-import { SKTWrapperColumnsSettings } from './styles';
-// types
-
-// hooks
-import { useModal } from '../../../../../../hooks/useModal';
-import { useDataGrid } from '../../../../hooks/useDataGrid';
-
-// utils
-
-// constants
-
-import { ColumnsConfigRef } from './subcomponents/ColumnsConfig/types';
-import { useEnvironment, useModuleDictionary, useModuleSkeleton } from '@m4l/core';
-import { ActionCancel } from '../../../../../CommonActions/components/ActionCancel';
-import { ActionIntro } from '../../../../../CommonActions/components/ActionIntro';
-import { WindowBase } from '../../../../../modal';
-import { Actions } from '../../../../../../components/CommonActions';
-
-export function Settings() {
-    const { openModal, closeModal } = useModal();
-    const { columnsConfig, onChangeColumnsConfig } = useDataGrid();
-    const { getLabel } = useModuleDictionary();
-    const { host_static_assets, environment_assets } = useEnvironment();
-    const isSkeleton = useModuleSkeleton();
-
-    const ref = useRef<ColumnsConfigRef>(null);
-
-    const onCloseSettings = useCallback(() => {
-        closeModal();
-    }, [closeModal]);
-
-    const onClickIntro = useCallback(() => {
-        if (ref.current?.onClickIntro) {
-            ref.current?.onClickIntro();
-        }
-    }, []);
-
-    const onClickSettings = useCallback(() => {
-        openModal({
-            initialWidth: 500,
-            initialHeigth: 680,
-
-            window: (
-                <WindowBase title={getLabel('data_grid.settings_title')}>
-                    <ColumnsConfig
-                        ref={ref}
-                        columnsConfig={columnsConfig}
-                        onChangeColumnsConfig={onChangeColumnsConfig}
-                        onCloseSettings={onCloseSettings}
-                    />
-                    <Actions>
-                        <ActionCancel onClick={closeModal} />
-                        <ActionIntro onClick={onClickIntro} />
-                    </Actions>
-                </WindowBase>
-            ),
-
-            // { withCancel: true, onClickIntro },
-        });
-    }, [
-        closeModal,
-        columnsConfig,
-        getLabel,
-        onChangeColumnsConfig,
-        onCloseSettings,
-        openModal,
-        onClickIntro,
-    ]);
-
-    if (isSkeleton) {
-        return (
-            <SKTWrapperColumnsSettings>
-                <Skeleton variant="circular" width={20} height={20} />
-            </SKTWrapperColumnsSettings>
-        );
-    }
-
-    return (
-        <IconButton
-            dictionaryTooltip="data_grid.tooltip_settings"
-            onClick={onClickSettings}
-            aria-label="settings"
-            src={`${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/configuration.svg`}
-        />
-    );
-}

package/src/components/DataGrid/subcomponents/Actions/subcomponents/Settings/styles.ts

@@ -1,25 +0,0 @@
-import { styled } from '@mui/material/styles';
-
-// export const IconButton = styled(IconButton)(({ theme }) => ({
-//     color: theme.palette.text.primary,
-//     // paddingLeft: "4px",
-//     // paddingRight: "4px",
-//     // '& svg ': {
-//     //     width: "20px",
-//     //     height: "20px"
-//     // }
-//     // display: 'flex',
-//     // textAlign: 'center',
-//     // alignItems: 'center',
-//     // flexDirection: 'column',
-//     // justifyContent: 'center',
-//     // padding: theme.spacing(8, 2),
-// }));
-
-export const SKTWrapperColumnsSettings = styled('div')(({ theme }) => ({
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-    minWidth: theme.spacing(3.75),
-    height: theme.spacing(3.75),
-}));

package/src/components/DataGrid/subcomponents/Actions/subcomponents/Settings/subcomponents/ColumnsConfig/index.tsx

@@ -1,327 +0,0 @@
-// react
-import { forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
-// m4l
-import { useEnvironment, useModuleDictionary } from '@m4l/core';
-
-// librerías externas
-import Datadata_grid, { Column, DataGridHandle } from 'react-data-grid';
-
-// mui
-import { IconButton } from '../../../../../../../mui_extended/IconButton';
-// internal components
-
-// styled components
-import { WrapperColumnsConfig, WrapperDataGrid, DivSelColumns, ColumnActions } from './styles';
-
-import { OriginalDataGridWrapperStyled } from '../../../../../../styles';
-
-import { FormatterColumn } from './subcomponents/FormatterColumn';
-
-// hooks
-
-// types
-import type { RowKey } from '../../../../../../types';
-import type { IConfigColumn } from '../../../../../../contexts/DataGridContext/types';
-import type { ColumnsConfigRef, ConfigProps, Row } from './types';
-
-function getRowsFromColumnsConfig(columnsConfig: IConfigColumn[]): Row[] {
-    // Filtrar los hidden y
-
-    return columnsConfig
-        .filter(column => !column.hidden)
-        .map(
-            column =>
-                ({
-                    key: column.key,
-                    name: column.name,
-                    visible: column.visible === undefined ? true : column.visible,
-                    frozen: column.frozen === undefined ? false : column.frozen,
-                    originalIndex: column.orginalIndex,
-                    originalFrozen: column.originalFrozen,
-                    originalVisible: column.originalVisible,
-                } as Row),
-        );
-}
-
-export const ColumnsConfig = forwardRef<ColumnsConfigRef, ConfigProps>((props, ref) => {
-    const refdata_grid = useRef<DataGridHandle>(null);
-    const { onCloseSettings, columnsConfig, onChangeColumnsConfig } = props;
-    const { getLabel } = useModuleDictionary();
-
-    const [isInit, setIsInit] = useState(true);
-
-    const [rows, setRows] = useState<Row[]>(getRowsFromColumnsConfig(columnsConfig));
-    const [selRows, setSelRows] = useState<ReadonlySet<RowKey>>(() => new Set());
-    const divRef = useRef<HTMLDivElement>(null);
-    const { host_static_assets, environment_assets } = useEnvironment();
-
-    useImperativeHandle(ref, () => ({
-        onClickIntro: handleIntro,
-        current: divRef.current,
-    }));
-
-    const columnsdata_grid: Column<Row>[] = useMemo(
-        () => [
-            {
-                key: 'name',
-                name: getLabel('data_grid.settings_column_name'),
-                width: 200,
-                resizable: true,
-                type: 'string',
-            },
-            {
-                key: 'originalIndex',
-                name: getLabel('data_grid.settings_column_position'),
-                width: 50,
-                type: 'number',
-                cellClass: 'rdg-cell-align-center',
-            },
-            {
-                key: 'visible',
-                name: getLabel('data_grid.settings_column_visible'),
-                width: 80,
-                type: 'boolean',
-                formatter: FormatterColumn,
-                cellClass: 'rdg-cell-align-center',
-            },
-            {
-                key: 'frozen',
-                name: getLabel('data_grid.settings_column_frozen'),
-                width: 80,
-                type: 'boolean',
-                formatter: FormatterColumn,
-                cellClass: 'rdg-cell-align-center',
-            },
-        ],
-        [getLabel],
-    );
-
-    const checkAll = () => {
-        setRows(rows.map(row => ({ ...row, visible: true })));
-    };
-
-    const unCheckAll = () => {
-        setRows(rows.map(row => ({ ...row, visible: false })));
-    };
-
-    const restoreAll = () => {
-        setRows(
-            rows
-                .map(row => ({
-                    ...row,
-                    visible: row.originalVisible,
-                    frozen: row.originalFrozen,
-                    index: row.originalIndex,
-                }))
-                .sort((a, b) => a.index - b.index),
-        );
-    };
-
-    useEffect(() => {
-        if (isInit === false) {
-            setRows(getRowsFromColumnsConfig(columnsConfig));
-        }
-        setIsInit(false);
-
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [columnsConfig]);
-
-    const rowSelectedIndex: number = useMemo(() => {
-        let rowIndex = -1;
-        if (selRows.size !== 1) return rowIndex;
-
-        const iterator = selRows.entries();
-        const entry = iterator.next().value[1];
-
-        rowIndex = rows.findIndex(row => row.key === entry);
-        return rowIndex;
-    }, [rows, selRows]);
-
-    const handleMoveFirst = () => {
-        if (rowSelectedIndex === -1) return -1;
-
-        const newRows: Row[] = [...rows];
-
-        newRows.splice(rowSelectedIndex, 1);
-        newRows.splice(0, 0, rows[rowSelectedIndex]);
-
-        refdata_grid.current?.selectCell({ idx: 0, rowIdx: 0 });
-        setRows(newRows);
-    };
-
-    const handleMoveLast = () => {
-        if (rowSelectedIndex === -1) return -1;
-
-        const newRows: Row[] = [...rows];
-
-        newRows.splice(rowSelectedIndex, 1);
-        newRows.splice(newRows.length, 0, rows[rowSelectedIndex]);
-
-        refdata_grid.current?.selectCell({ idx: 0, rowIdx: newRows.length - 1 });
-
-        setRows(newRows);
-    };
-
-    const handleMoveUpDownd = (position: number) => {
-        if (rowSelectedIndex === -1) return -1;
-
-        const newRows: Row[] = [...rows];
-        const element = newRows[rowSelectedIndex];
-
-        newRows.splice(rowSelectedIndex, 1);
-        newRows.splice(rowSelectedIndex + position, 0, element);
-
-        refdata_grid.current?.selectCell({ idx: 0, rowIdx: rowSelectedIndex + position });
-
-        setRows(newRows);
-    };
-
-    const getColumnConfigByKey = (
-        key: string,
-    ): Pick<IConfigColumn, 'visible' | 'frozen'> | undefined => {
-        const rowIndexFinded = rows.findIndex(row => row.key === key);
-
-        if (rowIndexFinded > -1) {
-            return {
-                visible: rows[rowIndexFinded].visible,
-                frozen: rows[rowIndexFinded].frozen,
-                // index: rowIndexFinded,
-            };
-        }
-
-        return undefined;
-    };
-
-    const getRowIndex = (column: IConfigColumn): number => {
-        const rowIndexFinded = rows.findIndex(row => row.key === column.key);
-
-        if (rowIndexFinded > -1) {
-            return rowIndexFinded;
-        }
-
-        return columnsConfig.findIndex(columnConfig => columnConfig.key === column.key);
-    };
-
-    const handleIntro = () => {
-        const newColumnsConfig = columnsConfig
-            .map(columnConfig => {
-                const newColumnConfig = { ...columnConfig };
-
-                if (!columnConfig.hidden) {
-                    const columnConfigRow = getColumnConfigByKey(columnConfig.key);
-
-                    if (columnConfigRow) {
-                        newColumnConfig.visible = columnConfigRow.visible;
-                        // newColumnConfig.index = columnConfigRow.index;
-                        newColumnConfig.frozen = columnConfigRow.frozen;
-                    }
-                }
-
-                return newColumnConfig;
-            })
-            .sort((a, b) => getRowIndex(a) - getRowIndex(b));
-
-        onChangeColumnsConfig(newColumnsConfig);
-
-        onCloseSettings(); // Cerrar la ventana
-    };
-
-    const onInternalSelectedRowsChange = () => {};
-
-    const onInternalRowsChange = (newRows: Row[]) => {
-        setRows(newRows);
-    };
-
-    const onRowClick = (row: Row) => {
-        if (selRows.has(row.key)) return;
-
-        const mySet: ReadonlySet<RowKey> = new Set([row.key]);
-        setSelRows(mySet);
-    };
-
-    return (
-        <WrapperColumnsConfig id="WrapperColumnsConfig" ref={divRef}>
-            <DivSelColumns id="divInfo">{getLabel('data_grid.settings_sel_columns')}</DivSelColumns>
-            <WrapperDataGrid id="WrapperDataGrid">
-                <OriginalDataGridWrapperStyled id="Originaldata_gridWrapperStyled">
-                    <Datadata_grid
-                        className="fill-data_grid  rdg-light"
-                        ref={refdata_grid}
-                        // header
-
-                        // columnas
-                        columns={columnsdata_grid}
-                        // sortColumns={sortColumns}
-                        // onSortColumnsChange={setSortColumns}
-
-                        // filas
-                        rows={rows}
-                        onRowsChange={onInternalRowsChange}
-                        selectedRows={selRows}
-                        onSelectedRowsChange={onInternalSelectedRowsChange}
-                        onRowClick={onRowClick}
-                        // rowHeight={props.rowHeight}
-                        rowKeyGetter={(row: Row) => row.key}
-                        // celdas
-                        cellNavigationMode="CHANGE_ROW"
-                        defaultColumnOptions={{ resizable: true, sortable: true }}
-                    />
-                </OriginalDataGridWrapperStyled>
-            </WrapperDataGrid>
-            <ColumnActions>
-                <IconButton
-                    dictionaryTooltip="data_grid.settings_move_first"
-                    onClick={handleMoveFirst}
-                    aria-label="move first place"
-                    disabled={rowSelectedIndex < 1}
-                    src={`${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/move_first_place.svg`}
-                />
-                <IconButton
-                    dictionaryTooltip="data_grid.settings_move_up"
-                    onClick={() => handleMoveUpDownd(-1)}
-                    aria-label="move up place"
-                    disabled={rowSelectedIndex < 1}
-                    src={`${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/move_up_place.svg`}
-                />
-                <IconButton
-                    dictionaryTooltip="data_grid.settings_move_last"
-                    onClick={handleMoveLast}
-                    aria-label="move last place"
-                    disabled={!!(rowSelectedIndex === rows.length - 1 || rowSelectedIndex === -1)}
-                    src={`${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/move_last_place.svg`}
-                />
-                <IconButton
-                    dictionaryTooltip="data_grid.settings_move_down"
-                    onClick={() => handleMoveUpDownd(+1)}
-                    aria-label="move down place"
-                    disabled={!!(rowSelectedIndex === rows.length - 1 || rowSelectedIndex === -1)}
-                    src={`${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/move_down_place.svg`}
-                />
-                <IconButton
-                    dictionaryTooltip="data_grid.settings_visible_all"
-                    onClick={checkAll}
-                    aria-label="check visible all"
-                    src={`${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/check_all.svg`}
-                />
-                <IconButton
-                    dictionaryTooltip="data_grid.settings_no_visible_all"
-                    onClick={unCheckAll}
-                    aria-label="un check all"
-                    src={`${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/uncheck_all.svg`}
-                />
-                <IconButton
-                    dictionaryTooltip="data_grid.settings_restore"
-                    onClick={restoreAll}
-                    aria-label="Restore columns"
-                    src={`${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/restore_columns.svg`}
-                />
-            </ColumnActions>
-            {/* <DialogActions >
-                // {/* <Button variant="outlined" color="inherit" onClick={onCloseSettings}>{getLabel( 'data_grid.cancel')}</Button> */}
-            {/* <Button variant="contained" onClick={handleIntro} >{getLabel( 'data_grid.intro')}</Button> */}
-            {/* </DialogActions> } */}
-        </WrapperColumnsConfig>
-    );
-});
-
-ColumnsConfig.displayName = 'ColumnsConfig';

package/src/components/DataGrid/subcomponents/Actions/subcomponents/Settings/subcomponents/ColumnsConfig/styles.ts

@@ -1,48 +0,0 @@
-import { styled } from '@mui/material/styles';
-
-export const WrapperColumnsConfig = styled('div')(({ theme }) => ({
-    color: theme.palette.text.primary,
-    position: 'relative',
-    display: 'flex',
-    flexDirection: 'column',
-    height: '100%',
-    width: '100%',
-}));
-
-export const DivAll = styled('div')(({ theme }) => ({
-    color: theme.palette.text.primary,
-    fontSize: theme.typography.h4.fontSize,
-}));
-
-export const DivSelColumns = styled('div')(({ theme }) => ({
-    ...theme.typography.subtitle2,
-    color: theme.palette.text.primary,
-    padding: `${theme.spacing(3)} ${theme.spacing(1)}`,
-}));
-
-export const WrapperDataGrid = styled('div')(() => ({
-    position: 'relative',
-    display: 'flex',
-    flexDirection: 'column',
-    flexGrow: 1,
-}));
-
-export const DivColumn = styled('div')(() => ({
-    display: 'flex',
-    flexDirection: 'row',
-}));
-
-export const ColumnActions = styled('div')(({ theme }) => ({
-    paddingTop: theme.spacing(3),
-    display: 'flex',
-    flexDirection: 'row',
-}));
-export const DialogActions = styled('div')(({ theme }) => ({
-    paddingTop: theme.spacing(3),
-    display: 'flex',
-    flexDirection: 'row',
-    justifyContent: 'flex-end',
-    '& > button': {
-        marginLeft: '10px',
-    },
-}));

package/src/components/DataGrid/subcomponents/Actions/subcomponents/Settings/subcomponents/ColumnsConfig/subcomponents/FormatterColumn/index.tsx

@@ -1,15 +0,0 @@
-import { Checkbox } from '@mui/material';
-import { FormatterProps } from 'react-data-grid';
-import { Row } from '../../types';
-
-export function FormatterColumn({ row, onRowChange, column }: FormatterProps<Row>) {
-    const handleChange = () => {
-        const newRow = { ...row };
-
-        (newRow as any)[column.key] = !(row as any)[column.key];
-
-        onRowChange(newRow);
-    };
-
-    return <Checkbox size="small" checked={(row as any)[column.key]} onChange={handleChange} />;
-}

package/src/components/DataGrid/subcomponents/Actions/subcomponents/Settings/subcomponents/ColumnsConfig/types.ts

@@ -1,31 +0,0 @@
-import { IConfigColumn } from '../../../../../../contexts/DataGridContext/types';
-
-export interface Row {
-    key: string;
-    name: string;
-    visible: boolean;
-    frozen: boolean;
-
-    width: number;
-    index: number;
-
-    originalIndex: number;
-    originalVisible: boolean;
-    originalFrozen: boolean;
-}
-
-export type ColumnsConfigRef = {
-    onClickIntro: () => void;
-    current: HTMLDivElement | null;
-};
-
-export interface ConfigProps {
-    onCloseSettings: () => void;
-    columnsConfig: IConfigColumn[];
-    onChangeColumnsConfig: (newColumnsConfig: IConfigColumn[]) => void;
-}
-
-export interface CheckFormatterProps {
-    key: string;
-    row: any;
-}

package/src/components/DataGrid/subcomponents/Actions/subcomponents/Settings/types.ts

@@ -1,2 +0,0 @@
-// eslint-disable-next-line @typescript-eslint/no-empty-interface
-export interface SettingsProps {}

package/src/components/DataGrid/subcomponents/Actions/types.ts

@@ -1,20 +0,0 @@
-import type { PagerProps } from '../../../mui_extended/Pager/types';
-import { SettingsProps } from './subcomponents/Settings/types';
-
-export interface ActionsProps {
-    withSettings?: boolean;
-    settingsProps?: SettingsProps;
-
-    // TotalRecords
-
-    withRowsCount?: boolean;
-
-    // Pager
-    withPager?: boolean;
-    pagerOptions?: PagerProps;
-
-    // WithLocalFilters
-    withLocalFilters?: boolean;
-}
-
-export type InternalActionsProps = ActionsProps;

package/src/components/DataGrid/subcomponents/Table/hooks/getDragHeaderRenderer.tsx

@@ -1,21 +0,0 @@
-// react
-import { FunctionComponent } from 'react';
-
-// external components
-import { HeaderRendererProps } from 'react-data-grid';
-
-// types
-
-import { DraggableHeaderRenderer } from '../subcomponents/DraggableHeaderRenderer';
-// (props: HeaderRendererProps<R>) => JSX.Element
-export const getDragHeaderRenderer = <TRow, TSummaryRow>(
-    handleColumnsReorder: (sourceKey: string, targetKey: string) => void,
-): FunctionComponent<HeaderRendererProps<TRow, TSummaryRow>> => {
-    // onChangehandleColumnsReorder: (sourceKey: string, targetKey: string) => void)
-
-    function HeaderRenderer(props: HeaderRendererProps<TRow>) {
-        return <DraggableHeaderRenderer {...props} onColumnsReorder={handleColumnsReorder} />;
-    }
-
-    return HeaderRenderer as FunctionComponent<HeaderRendererProps<TRow, TSummaryRow>>;
-};