@m4l/components 0.1.35 → 0.1.37

package/src/components/DataGrid/subcomponents/Table/subcomponents/DraggableHeaderRenderer.tsx

@@ -0,0 +1,123 @@
+// react
+import { useEffect, useState } from 'react';
+// m4l
+import { useModuleDictionary } from '@m4l/core';
+// mui
+import { InputBase } from '@mui/material';
+// librerias externas
+import { useDrag, useDrop } from 'react-dnd';
+import { HeaderRenderer, HeaderRendererProps } from 'react-data-grid';
+// sub components
+import { filterHeight } from './SelectColumn';
+
+// hooks
+import { useFocusRef } from '../hooks/useFocusRef';
+import { useFilters } from '../../../hooks/useFilters';
+
+interface DraggableHeaderRendererProps<TRow> extends HeaderRendererProps<TRow> {
+    onColumnsReorder: (sourceKey: string, targetKey: string) => void;
+}
+
+export function DraggableHeaderRenderer<TRow>(props: DraggableHeaderRendererProps<TRow>): any {
+    const { onColumnsReorder, column, isCellSelected, ...others } = props;
+
+    const { ref, tabIndex } = useFocusRef<HTMLInputElement>(isCellSelected);
+    const { getLabel } = useModuleDictionary();
+    const { activeFilters, filters, onChangeFilter } = useFilters();
+
+    const [filter, setFilter] = useState(filters?.get(column.key) || '');
+
+    const [{ isDragging }, drag] = useDrag({
+        type: 'COLUMN_DRAG',
+        item: { key: column.key },
+        collect: monitor => ({
+            isDragging: monitor.isDragging(),
+        }),
+    });
+
+    const [{ isOver }, drop] = useDrop({
+        accept: 'COLUMN_DRAG',
+        drop({ key }: { key: string }) {
+            onColumnsReorder(key, column.key);
+        },
+        collect: monitor => ({
+            isOver: monitor.isOver(),
+            canDrop: monitor.canDrop(),
+        }),
+    });
+    // const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    //   setName(event.target.value);
+    // };
+    // React.FormEvent<HTMLInputElement>
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        if (activeFilters) {
+            if (onChangeFilter) onChangeFilter(column, e.target.value);
+        }
+        setFilter(e.target.value);
+    };
+
+    useEffect(() => {
+        if (!activeFilters) setFilter('');
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [activeFilters]);
+
+    const newColumn = { ...column };
+    if (newColumn.withinHeaderRenderer) {
+        newColumn.name = newColumn.withinHeaderRenderer(props) as any;
+    }
+    return (
+        <div
+            ref={newRef => {
+                drag(newRef);
+                drop(newRef);
+            }}
+            style={{
+                opacity: isDragging ? 0.5 : 1,
+                backgroundColor: isOver ? '#ececec' : undefined,
+                cursor: 'move',
+                display: 'flex',
+                flexDirection: 'column',
+                lineHeight: '1', // activeFilters && column.withFilter ? '30px' : '60px',
+                height: '100%',
+                justifyContent: 'center',
+                textAlign: 'center',
+                // alignItems: 'center',
+                // justifyContent: 'space-evenly'
+            }}
+        >
+            {/* {withinHeaderRenderer && withinHeaderRenderer(props)} */}
+
+            <HeaderRenderer column={newColumn} isCellSelected={isCellSelected} {...others} />
+
+            {activeFilters && (column?.withFilter === undefined || column.withFilter === true) && (
+                <div
+                    className="filter_cell_div"
+                    style={{
+                        borderTop: '1px solid var(--rdg-border-color)',
+                        width: '100%',
+                        display: 'flex',
+                        alignItems: 'center',
+                        // flexGrow: 1,
+                        height: `${filterHeight}px`,
+
+                        // paddingLeft: '2px', paddingRight: '2px'
+                    }}
+                >
+                    <InputBase
+                        inputRef={ref}
+                        placeholder={getLabel('data_grid.filter_holder')}
+                        style={{
+                            width: '100%',
+                            paddingBottom: '2px',
+                            border: '1px solid var(--rdg-border-color)',
+                        }}
+                        tabIndex={tabIndex}
+                        type="text"
+                        onChange={handleChange}
+                        value={filter}
+                    />
+                </div>
+            )}
+        </div>
+    );
+}

package/src/components/DataGrid/subcomponents/Table/subcomponents/SelectColumn.tsx

@@ -0,0 +1,106 @@
+import {
+    Column,
+    SELECT_COLUMN_KEY,
+    SelectCellFormatter,
+    FormatterProps,
+    useRowSelection,
+    GroupFormatterProps,
+    HeaderRendererProps,
+} from 'react-data-grid';
+import useDataGrid from '../../../hooks/useDataGrid';
+
+export const filterColumnClassName = 'filter-cell';
+export const filterHeight = 35;
+
+// export const getIsChecked = (props: FormatterProps<any>) => {
+//     if (mapRowsSelected.size > 0) {
+//         const iterator = mapRowsSelected.entries();
+//         for (let i = 0; i < mapRowsSelected.size; i++) {
+//             const entry = iterator.next().value;
+//             const key: Key = entry[1];
+//             const row = finalRows.find(frow => props.rowKeyGetter(frow) === key);
+//             if (row) {
+//                 rawRowsSelected.push(row);
+//             }
+//         }
+//     }
+// };
+
+function SelectGroupFormatter(props: GroupFormatterProps<unknown>) {
+    const [isRowSelected, onRowSelectionChange] = useRowSelection();
+
+    const onChange = (checked: boolean) => {
+        onRowSelectionChange({ row: props.row, checked, isShiftClick: false });
+    };
+
+    const cellFormater = SelectCellFormatter({
+        value: isRowSelected,
+        isCellSelected: props.isCellSelected,
+        onChange,
+        'aria-label': 'Select Group',
+    });
+
+    return cellFormater;
+}
+
+function SelectFormatter(props: FormatterProps<any, any>) {
+    const { checkedRows, onCheckedRowsChange, rowKeyGetter } = useDataGrid<any, any>();
+
+    const onChange = (checked: boolean, _isShiftClick: boolean) => {
+        const newCheckedRows = new Set(checkedRows);
+        if (checked) {
+            newCheckedRows.add(rowKeyGetter(props.row));
+        } else {
+            newCheckedRows.delete(rowKeyGetter(props.row));
+        }
+
+        onCheckedRowsChange && onCheckedRowsChange(newCheckedRows);
+    };
+
+    return (
+        <SelectCellFormatter
+            value={checkedRows?.has(rowKeyGetter(props.row)) || false}
+            isCellSelected={props.isCellSelected}
+            onChange={onChange}
+            aria-label={'Select'}
+        />
+    );
+}
+
+const SelectColumnHeaderRenderer = (props: HeaderRendererProps<any, any>) => {
+    const { rows, rowKeyGetter, onCheckedRowsChange, checkedRows } = useDataGrid<any, any>();
+
+    const onAllRowsCheckedChange = (checked: boolean) => {
+        if (!onCheckedRowsChange) return;
+
+        if (checked) {
+            onCheckedRowsChange(new Set(rows.map(r => rowKeyGetter(r))));
+        } else {
+            onCheckedRowsChange(new Set());
+        }
+    };
+
+    const allRowsChecked = rows.length === checkedRows?.size;
+
+    return SelectCellFormatter({
+        'aria-label': 'Select All',
+        isCellSelected: props.isCellSelected,
+        value: allRowsChecked,
+        onChange: onAllRowsCheckedChange,
+    });
+};
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const SelectColumn: Column<any, any> = {
+    key: SELECT_COLUMN_KEY,
+    name: '',
+    width: 60,
+    maxWidth: 60,
+    resizable: false,
+    sortable: false,
+    frozen: true,
+    type: 'boolean',
+    headerRenderer: SelectColumnHeaderRenderer,
+    formatter: SelectFormatter,
+    groupFormatter: SelectGroupFormatter,
+};

package/src/components/DataGrid/subcomponents/Table/subcomponents/SkeletonFormatter/index.tsx

@@ -0,0 +1,13 @@
+// mui
+import { Skeleton } from '@mui/material';
+import { WrapperSkeleton } from './styles';
+
+// types
+
+export function SkeletonFormatter() {
+    return (
+        <WrapperSkeleton>
+            <Skeleton variant="text" width="100%" height="12px" />
+        </WrapperSkeleton>
+    );
+}

package/src/components/DataGrid/subcomponents/Table/subcomponents/SkeletonFormatter/styles.tsx

@@ -0,0 +1,8 @@
+import { styled } from '@mui/material/styles';
+
+export const WrapperSkeleton = styled('div')(() => ({
+    display: 'flex',
+    width: '100%',
+    height: '100%',
+    alignItems: 'center',
+}));

package/src/components/DataGrid/subcomponents/Table/subcomponents/SkeletonFormatter/types.ts

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

package/src/components/DataGrid/subcomponents/editors/TextEditor/index.tsx

@@ -0,0 +1,77 @@
+import { EditorProps } from 'react-data-grid';
+
+import { styled } from '@mui/material/styles';
+
+export const Input = styled('input')(() => ({
+    appearance: 'none',
+    boxSizing: 'border-box',
+    inlineSize: '100%',
+    blockSize: '100%',
+    paddingBlock: '0',
+    /* padding-inline: 6px; */
+    /* border: 2px solid #ccc; */
+    verticalAlign: 'top',
+    textAlign: 'right',
+    color: 'var(--rdg-color)',
+    backgroundColor: 'var(--rdg-background-color)',
+
+    fontFamily: 'inherit',
+    // fontSize: 'var(--rdg-font-size)',
+
+    '&:focus': {
+        // borderColor: 'var(--rdg-selection-color)',
+        outline: 'none',
+    },
+
+    '&::placeholder': {
+        color: '#999',
+        opacity: '1',
+    },
+}));
+
+function autoFocusAndSelect(input: HTMLInputElement | null) {
+    input?.focus();
+    input?.select();
+}
+
+export function TextEditor<TRow, TSummaryRow>({
+    row,
+    column,
+    onRowChange,
+    onClose,
+}: EditorProps<TRow, TSummaryRow>) {
+    return (
+        <Input
+            className={'rdg-text-editor'}
+            ref={autoFocusAndSelect}
+            value={row[column.key as keyof TRow] as unknown as string}
+            onChange={event => onRowChange({ ...row, [column.key]: event.target.value })}
+            onBlur={() => onClose(true)}
+        />
+    );
+}
+
+export function NumberEditor<TRow, TSummaryRow>({
+    row,
+    column,
+    onRowChange,
+    onClose,
+}: EditorProps<TRow, TSummaryRow>) {
+    return (
+        <Input
+            className={'rdg-text-editor'}
+            ref={autoFocusAndSelect}
+            type="number"
+            value={row[column.key as keyof TRow] as unknown as string}
+            onChange={event =>
+                onRowChange({
+                    ...row,
+                    [column.key]: event.target.value !== '' ? Number(event.target.value) : '',
+                })
+            }
+            onBlur={() => onClose(true)}
+        />
+    );
+}
+
+export default TextEditor;

package/src/components/DataGrid/types.ts

@@ -0,0 +1,104 @@
+import { Maybe } from '@m4l/core';
+import type { Column, RowsChangeData, FormatterProps } from 'react-data-grid';
+
+import type { MenuAction } from '../mui_extended/MenuActions/types';
+
+import { ActionsProps } from './subcomponents/Actions/types';
+
+export type GridFormatterPropss<T, SR> = FormatterProps<T, SR>;
+
+export type {
+    columnUncertaintyFormatter,
+    columnPointsFormatter,
+    columnNestedValueFormatter,
+} from './formatters';
+
+export declare type ColumnType = 'string' | 'date' | 'number' | 'boolean' | 'custom';
+
+export declare type ColumnAlign = 'left' | 'center' | 'right';
+
+export declare interface GridRow {
+    id: number;
+}
+
+export declare type SortDirection = 'ASC' | 'DESC';
+
+export interface SortColumn {
+    readonly columnKey: string;
+    readonly direction: SortDirection;
+}
+
+declare module 'react-data-grid' {
+    // eslint-disable-next-line no-shadow
+    export interface Column<TRow, TSummaryRow = unknown> {
+        visible?: boolean; // visibilidad temporal
+        hidden?: boolean; // Invisible al usuario
+        fixed?: boolean;
+        type: ColumnType;
+        align?: ColumnAlign;
+        isDraggable?: boolean;
+        withFilter?: boolean;
+        withinHeaderRenderer?: React.FunctionComponent<HeaderRendererProps<TRow, TSummaryRow>>; // (props: HeaderRendererProps<R>) => JSX.Element;
+        customFilter?: (row: TRow, value: string) => boolean;
+        // isPrintable:?boolean;
+        // printRender:()
+        // (props: HeaderRendererProps<TRow, TSummaryRow>) => JSX.Element
+    }
+}
+
+export declare type RowKey = string | number;
+
+// export interface MenuAction {
+//     urlIcon: string;
+//     iconWidth?: number;
+//     iconHeight?: number;
+//     description: String;
+//     onClick: (props: any) => void;
+//     disabled: boolean;
+//     color?: string;
+// }
+
+export declare interface WithActionsProps {
+    withActions?: boolean;
+}
+
+export declare interface PagerState {
+    page: number;
+    rowsPerPage: number;
+    totalRecords: number;
+}
+
+export const initialPagerState: PagerState = {
+    page: 0,
+    rowsPerPage: 25,
+    totalRecords: 0,
+};
+export declare type RowHeightVariants = 'standard' | 'compact' | 'confortable';
+export declare type RowHeights = number | number[];
+export declare interface GridProps<TRow, TSummaryRow> {
+    id: RowKey;
+
+    withActions?: boolean;
+
+    columns: readonly Column<TRow, TSummaryRow>[];
+
+    rows: TRow[];
+    initialRowHeightVariant?: RowHeightVariants;
+    rowHeaderHeights?: RowHeights;
+    rowHeights?: RowHeights;
+    rowActionsGetter?: (row: TRow) => MenuAction[];
+    rowKeyGetter: (row: TRow) => RowKey;
+    //isMultipleSelect?: boolean;
+    selectedRows?: ReadonlySet<RowKey>;
+    onSelectedRowsChange?: (mapRowsSelected: ReadonlySet<RowKey>) => void;
+
+    checkedRows?: ReadonlySet<RowKey>;
+    onCheckedRowsChange?: (mapRowsSelected: ReadonlySet<RowKey>) => void;
+
+    onRowsChange?: Maybe<(rows: TRow[], data: RowsChangeData<TRow, TSummaryRow>) => void>;
+}
+
+export declare interface DataGridProps<TRow, TSummaryRow> extends GridProps<TRow, TSummaryRow> {
+    actionsProps: ActionsProps;
+    // dictionary: Dictionary | undefined;
+}

package/src/components/DataGrid/utils/getDataGridRowsFromSet.ts

@@ -0,0 +1,23 @@
+export const getDataGridRowsFromSet = <TRow, RowKey>(
+    set: ReadonlySet<RowKey>,
+    rows: TRow[],
+    rowKeyGetter: (row: TRow) => RowKey,
+) => {
+    const rowsFinded: TRow[] = [];
+
+    if (set) {
+        if (set.size > 0) {
+            const iterator = set.entries();
+            for (let i = 0; i < set.size; i++) {
+                const entry = iterator.next().value;
+                const key: RowKey = entry[1];
+                const row = rows.find(frow => rowKeyGetter(frow) === key);
+                if (row) {
+                    rowsFinded.push(row);
+                }
+            }
+        }
+    }
+
+    return rowsFinded;
+};

package/src/components/DraggableWindow/index.tsx

@@ -0,0 +1,30 @@
+import { useState } from 'react';
+import Drageable, { ControlPosition, DraggableData, DraggableEvent } from 'react-draggable';
+import { DraggableWindowProps } from './types';
+
+export const DraggableWindow = (props: DraggableWindowProps) => {
+    const {
+        children,
+        handle = 'm4l_draggable_handle',
+        cancel = '[class*="MuiDialogContent-root"]',
+        defaultPosition,
+        ...others
+    } = props;
+
+    const [position, setPosition] = useState<ControlPosition>(defaultPosition || { x: 0, y: 0 });
+
+    const onDrag = (_e: DraggableEvent, data: DraggableData) => {
+        const { x, y } = data;
+        const xPos = x < 0 ? 0 : Math.round(x);
+        const yPos = y < 0 ? 0 : Math.round(y);
+        setPosition({ x: xPos, y: yPos });
+    };
+
+    return (
+        <Drageable handle={handle} cancel={cancel} position={position} onDrag={onDrag} {...others}>
+            {children}
+        </Drageable>
+    );
+};
+
+export default DraggableWindow;

package/src/components/DraggableWindow/types.ts

@@ -0,0 +1,11 @@
+import { ReactNode } from 'react';
+import { DraggableProps } from 'react-draggable';
+// import type { DraggableEvent as DE, DraggableData as DD } from 'react-draggable';
+
+export interface DraggableWindowProps extends Partial<DraggableProps> {
+    children: ReactNode;
+}
+
+// export type DraggableEvent = DE;
+
+// export type DraggableData = DD;

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

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

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