@m4l/components 0.1.35 → 0.1.37

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,21 @@
+// 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>>;
+};

package/src/components/DataGrid/subcomponents/Table/hooks/useFocusRef.ts

@@ -0,0 +1,15 @@
+import { useRef, useLayoutEffect } from 'react';
+
+export function useFocusRef<T extends HTMLOrSVGElement>(isSelected: boolean) {
+    const ref = useRef<T>(null);
+
+    useLayoutEffect(() => {
+        if (!isSelected) return;
+        ref.current?.focus({ preventScroll: true });
+    }, [isSelected]);
+
+    return {
+        ref,
+        tabIndex: isSelected ? 0 : -1,
+    };
+}