@m4l/components 0.1.39 → 0.1.41

package/src/components/ObjectLogs/dictionary.ts

@@ -1,21 +0,0 @@
-import { Dictionary } from '@m4l/core';
-import { getDataGridComponentsDictionary } from '../DataGrid/dictionary';
-import { getDynamicFilterComponentsDictionary } from '../DynamicFilter/dictionary';
-
-export function getObjectLogsComponentsDictionary() {
-    return ['object_logs']
-        .concat(getDataGridComponentsDictionary())
-        .concat(getDynamicFilterComponentsDictionary());
-}
-
-export const defaultObjectLogDictionary: Dictionary = {
-    object_logs: {
-        created_at: 'Start date',
-        user: 'User/email',
-        resource_name: 'Resource',
-        privilege_name: 'Privilege',
-        log_preview: 'Log',
-        log_detail: 'Detail',
-        ip: 'Ip',
-    },
-};

package/src/components/ObjectLogs/index.tsx

@@ -1,184 +0,0 @@
-// react
-import { useCallback, useEffect, useMemo, useState } from 'react';
-//m4l
-import { useModuleDictionary } from '@m4l/core';
-// mui
-
-// import AdapterDateFns from '@mui/lab/AdapterDateFns';
-
-// external libraries
-import { Column } from 'react-data-grid';
-// componentes estilados
-
-import { Container, Actions, GridWrapper } from './styles';
-// internal components
-import { DataGrid } from '../DataGrid';
-
-// sub components
-
-// types
-import { LogsProps, QueryParams, RowLog } from './types';
-import { DateFormatter } from '../formatters/DateFormatter';
-import { DetailFormatter } from './components/DetailFormatter';
-
-// hooks
-import { usePaginate, useEnvironment } from '@m4l/core';
-import { DynamicFilter } from '../DynamicFilter';
-import { InitialFilterFieldApply, RawFilterFieldApply } from '../DynamicFilter/types';
-
-export function ObjectLogs(props: LogsProps) {
-    const { resource_id, object_id } = props;
-    const { getLabel } = useModuleDictionary();
-    const { host_static_assets, environment_assets } = useEnvironment();
-
-    const [queryParams, setQueryParams] = useState<QueryParams>({
-        resource_id,
-        object_id,
-    });
-    const dateFormatterCreatedAt = useCallback(
-        (rowProps: any) => (
-            <DateFormatter presentationType="datetime" value={rowProps.row.created_at} />
-        ),
-        [],
-    );
-    const DetailRowFormatter = useCallback(
-        (rowProps: any) => <DetailFormatter log_id={rowProps.row.id} />,
-        [],
-    );
-
-    const columns: Column<RowLog, unknown>[] = useMemo(
-        () => [
-            {
-                key: 'created_at',
-                name: getLabel('object_logs.created_at'),
-                type: 'date',
-                width: 300,
-                formatter: dateFormatterCreatedAt,
-            },
-            { key: 'email', name: getLabel('object_logs.email'), type: 'string', width: 300 },
-            {
-                key: 'resource_name',
-                name: getLabel('object_logs.resource_name'),
-                type: 'string',
-                width: 120,
-            },
-            {
-                key: 'log_preview',
-                name: getLabel('object_logs.log_preview'),
-                type: 'string',
-                width: 250,
-            },
-            {
-                key: 'Detail',
-                name: getLabel('object_logs.log_detail'),
-                type: 'custom',
-                formatter: DetailRowFormatter,
-            },
-            { key: 'ip', name: getLabel('object_logs.ip'), type: 'string', width: 120 },
-        ],
-        [getLabel],
-    );
-
-    const { pagerState, rows, onPageChange, onRowsPerPageChange, clearRows, Refresh } =
-        usePaginate<RowLog>({
-            endPoint: 'logs',
-            fireOnChangeParms: false,
-            queryParams,
-        });
-
-    useEffect(() => {
-        clearRows();
-        setQueryParams(oldParms => ({ ...oldParms, object_id }));
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [object_id]);
-
-    const onChangeFilter = (
-        _initFilters: Array<InitialFilterFieldApply>,
-        rawFilters: Array<RawFilterFieldApply>,
-    ) => {
-        setQueryParams(oldParms => ({ ...oldParms, f: rawFilters }));
-        Refresh();
-    };
-
-    /// /
-
-    return (
-        <Container>
-            <Actions id="objectLogsActions">
-                <DynamicFilter
-                    withAllField={true}
-                    onChangeFilter={onChangeFilter}
-                    automatic={false}
-                    fields={[
-                        {
-                            name: 'user_logs.created_at',
-                            label: getLabel('object_logs.created_at'),
-                            type: 'datetime',
-                            multiple: false,
-                            presence: 'fixed',
-                            urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/object_logs/assets/icons/email.svg`,
-                            // defaultOperand1: startOfMonth(now),
-                            // defaultOperand2: endOfDay(new Date()),
-                        },
-                        {
-                            name: 'users.email',
-                            label: getLabel('object_logs.email'),
-                            type: 'string',
-                            multiple: true,
-                            presence: 'optional',
-                            urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/object_logs/assets/icons/email.svg`,
-                            // defaultOperand1: startOfMonth(now),
-                            // defaultOperand2: endOfDay(new Date()),
-                        },
-                        {
-                            name: 'user_logs.log_preview',
-                            label: getLabel('object_logs.log_preview'),
-                            type: 'string',
-                            multiple: true,
-                            presence: 'optional',
-                            urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/object_logs/assets/icons/log_preview.svg`,
-                            // defaultOperand1: startOfMonth(now),
-                            // defaultOperand2: endOfDay(new Date()),
-                        },
-                        {
-                            name: 'user_logs.log_detail',
-                            label: getLabel('object_logs.log_detail'),
-                            type: 'string',
-                            multiple: true,
-                            presence: 'optional',
-                            urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/object_logs/assets/icons/log_detail.svg`,
-                        },
-                    ]}
-                    initialFilters={[]}
-                />
-            </Actions>
-            <GridWrapper id="GridWrapper">
-                <DataGrid
-                    key="users_list_logs"
-                    id="users_logs_list"
-                    // columns
-                    columns={columns}
-                    // rows
-                    rows={rows}
-                    // rowHeaderHeights={60}
-                    rowKeyGetter={(row: RowLog) => row.id}
-                    // actions
-                    withActions
-                    actionsProps={{
-                        withPager: true,
-                        withLocalFilters: true,
-                        pagerOptions: {
-                            records: rows.length,
-                            totalRecords: pagerState.totalRecords,
-                            rowsPerPageOptions: [1, 2, 3, 4, 5, 10, 25],
-                            page: pagerState.page,
-                            rowsPerPage: pagerState.rowsPerPage,
-                            onPageChange,
-                            onRowsPerPageChange,
-                        },
-                    }}
-                />
-            </GridWrapper>
-        </Container>
-    );
-}

package/src/components/ObjectLogs/styles.tsx

@@ -1,43 +0,0 @@
-import { styled } from '@mui/material/styles';
-
-export const Container = styled('div')(() => ({
-    height: '100%',
-    width: '100%',
-    display: 'flex',
-    flexDirection: 'column',
-    justifyContent: 'flex-start',
-}));
-export const Actions = styled('div')(({ theme }) => ({
-    position: 'relative',
-    height: 'auto',
-    display: 'flex',
-    flexDirection: 'row',
-    justifyContent: 'flex-start',
-    alignItems: 'center',
-
-    '& .MuiFormControl-root': {
-        flexGrow: 1,
-    },
-
-    [theme.breakpoints.up('sm')]: {
-        '& .MuiFormControl-root:nth-of-type(1)': {
-            marginRight: theme.spacing(3),
-        },
-    },
-}));
-export const GridWrapper = styled('div')(() => ({
-    position: 'relative',
-    flexGrow: '1',
-    width: '100%',
-}));
-
-// export const TabContent = styled('div')(({ theme }) => ({
-//     flexGrow: '1',
-//     position: 'relative',
-
-//     top: '0px',
-//     bottom: '0px',
-//     left: '0px',
-//     right: '0px',
-//     margin: '10px',
-// }));

package/src/components/ObjectLogs/types.tsx

@@ -1,18 +0,0 @@
-import { Maybe } from '@m4l/core';
-
-export interface RowLog {
-    id: number;
-    created_at: string;
-    email: string;
-    resource_name: string;
-    privilege_name: string;
-    preview: string;
-    ip: string;
-}
-
-export interface LogsProps {
-    resource_id: number;
-    object_id: Maybe<number>;
-}
-
-export interface QueryParams extends LogsProps, Record<string, unknown> {}

package/src/components/PaperForm/components/Header.tsx

@@ -1,26 +0,0 @@
-import { useModuleSkeleton } from '@m4l/core';
-import { Skeleton } from '@mui/material';
-import { Icon } from '../../Icon';
-import { HeaderContainer, IconHeader, IconTitleContainer, SkTPaperFormHeader } from '../styles';
-import { HeaderProps } from '../types';
-
-export const Header = (props: HeaderProps) => {
-    const { urlIcon, title } = props;
-    const isSkeleton = useModuleSkeleton();
-
-    return isSkeleton ? (
-        <SkTPaperFormHeader>
-            <Skeleton variant="circular" width={16} height={16} />
-            <Skeleton variant="text" width={68} height={14} />
-        </SkTPaperFormHeader>
-    ) : (
-        <HeaderContainer id="Header">
-            <IconTitleContainer className="m4l_draggable_handle">
-                <IconHeader>
-                    <Icon src={urlIcon} />
-                </IconHeader>
-                {title}
-            </IconTitleContainer>
-        </HeaderContainer>
-    );
-};

package/src/components/PaperForm/index.tsx

@@ -1,26 +0,0 @@
-// react
-
-// mui
-
-// external libraries
-
-// componentes estilados
-
-import { Content, WrapperPaper } from './styles';
-import { Header } from './components/Header';
-// internal components
-// sub components
-
-// types
-import { PaperFormProps } from './types';
-
-export function PaperForm(props: PaperFormProps) {
-    const { urlIcon, title, children } = props;
-
-    return (
-        <WrapperPaper id="ContainerPropertyValue">
-            <Header urlIcon={urlIcon} title={title} />
-            <Content id="Content">{children}</Content>
-        </WrapperPaper>
-    );
-}

package/src/components/PaperForm/styles.tsx

@@ -1,64 +0,0 @@
-// import { Paper } from "@mui/material";
-import { styled } from '@mui/material/styles';
-
-export const WrapperPaper = styled('div')(({ theme }) => ({
-    display: 'flex',
-    flexDirection: 'column',
-    padding: theme.spacing(1),
-
-    [theme.breakpoints.up('sm')]: {
-        margin: `${theme.spacing(1.5)}  ${theme.spacing(1.5)}  ${theme.spacing(3)}  ${theme.spacing(
-            1.5,
-        )}`,
-        borderRadius: theme.spacing(2),
-        boxShadow: (theme as any).customShadows.z8,
-        padding: theme.spacing(3),
-        backgroundColor: theme.palette.background.paper,
-    },
-
-    // backgroundColor: theme.palette.background.default,
-}));
-
-export const HeaderContainer = styled('div')(({ theme }) => ({
-    display: 'flex',
-    flexDirection: 'row',
-    alignItems: 'center',
-    // height: theme.spacing(5),
-    borderBottom: `1px solid ${theme.palette.divider}`,
-    paddingBottom: theme.spacing(3),
-    marginBottom: theme.spacing(2),
-    overflow: 'hidden',
-}));
-
-export const IconTitleContainer = styled('div')(({ theme }) => ({
-    display: 'flex',
-    flexDirection: 'row',
-    flexGrow: 1,
-    alignItems: 'center',
-    cursor: 'move',
-    ...theme.typography.subtitle1,
-    color: theme.palette.text.primary,
-}));
-export const IconHeader = styled('div')(({ theme }) => ({
-    // width: "24px",
-    // height: "24px",
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    marginRight: theme.spacing(1.5),
-}));
-
-export const Content = styled('div')(() => ({
-    flexGrow: 1,
-    position: 'relative',
-}));
-
-export const SkTPaperFormHeader = styled('div')(({ theme }) => ({
-    width: 'auto',
-    display: 'grid',
-    gridTemplateColumns: `${theme.spacing(2)} auto`,
-    gridGap: `${theme.spacing(1.5)}`,
-    paddingBottom: `${theme.spacing(3)}`,
-    borderBottom: `1px solid ${theme.palette.divider}`,
-    marginBottom: `${theme.spacing(3)}`,
-}));

package/src/components/PaperForm/types.ts

@@ -1,9 +0,0 @@
-import type { ReactNode } from 'react';
-
-export interface PaperFormProps {
-    urlIcon: string;
-    title: string;
-    children: ReactNode;
-}
-
-export type HeaderProps = Omit<PaperFormProps, 'children'>;

package/src/components/Period/dictionary.ts

@@ -1,18 +0,0 @@
-import { Dictionary } from '@m4l/core';
-import { getCommonActionsDictionary } from '../CommonActions';
-
-export function getPeriodComponetsDictionary() {
-    return ['period'].concat(getCommonActionsDictionary());
-}
-
-export const defaultPeriodDictionary: Dictionary = {
-    period: {
-        years: 'Years',
-        months: 'Months',
-        days: 'Days',
-    },
-};
-
-export const LABEL_YEARS = 'label_years';
-export const LABEL_MONTHS = 'label_months';
-export const LABEL_DAYS = 'label_days';

package/src/components/Period/index.tsx

@@ -1,165 +0,0 @@
-import { useEnvironment, useModuleDictionary, useModuleSkeleton } from '@m4l/core';
-
-import { Gap, SKTWrapper, ContainerPeriod, FieldPeriod, FieldValue } from './styles';
-import { PeriodType, ETimePeriods, PeriodTime, PeriodProps } from './types';
-import { Autocomplete, Skeleton, TextField } from '@mui/material';
-import { useMemo } from 'react';
-import { Icon } from '../Icon';
-
-const getSelPeriodTime = (period?: PeriodType): ETimePeriods => {
-    if (!period) return ETimePeriods.YEARS;
-
-    if (period.selPeriodTime) return period.selPeriodTime;
-
-    if (period.years && period.years > 0) return ETimePeriods.YEARS;
-
-    if (period.months && period.months > 0) return ETimePeriods.MONTHS;
-
-    if (period.days && period.days > 0) return ETimePeriods.DAYS;
-
-    return ETimePeriods.YEARS;
-};
-
-const getSingleValue = (period?: PeriodType): number | '' => {
-    if (!period) return '';
-
-    if (period.singleValue !== undefined) return period.singleValue;
-
-    if (period.years && period.years > 0) return period.years;
-
-    if (period.months && period.months > 0) return period.months;
-
-    if (period.days && period.days > 0) return period.days;
-
-    return '';
-};
-
-export const Period = (props: PeriodProps) => {
-    const {
-        value,
-        onChange,
-        error = false,
-        readOnly = false,
-        skeletonWidth = '100%',
-        skeletonHeight = '18px',
-    } = props;
-
-    const { getLabel } = useModuleDictionary();
-    const isSkeleton = useModuleSkeleton();
-
-    const selPeriodTime = getSelPeriodTime(value);
-    const singleValue = getSingleValue(value);
-
-    const onTotalChange = (newPeriodTime: ETimePeriods, newValue: number | '') => {
-        const newPeriod: PeriodType = {
-            selPeriodTime: newPeriodTime,
-            singleValue: newValue,
-        };
-        if (newValue !== '' && newValue > 0) {
-            newPeriod.years = 0;
-            newPeriod.months = 0;
-            newPeriod.days = 0;
-            if (newPeriodTime === ETimePeriods.YEARS) newPeriod.years = newValue;
-            if (newPeriodTime === ETimePeriods.MONTHS) newPeriod.months = newValue;
-            if (newPeriodTime === ETimePeriods.DAYS) newPeriod.days = newValue;
-        }
-        onChange(newPeriod);
-    };
-    const onChangeTime = (newPeriodTime: PeriodTime | null) => {
-        if (newPeriodTime) {
-            onTotalChange(newPeriodTime.id, singleValue);
-        }
-    };
-
-    const { host_static_assets, environment_assets } = useEnvironment();
-
-    const options: Array<PeriodTime> = useMemo(
-        () => [
-            {
-                id: 0,
-                label: getLabel('period.label_days'),
-            },
-            {
-                id: 1,
-                label: getLabel('period.label_months'),
-            },
-            {
-                id: 2,
-                label: getLabel('period.label_years'),
-            },
-        ],
-        [getLabel],
-    );
-
-    if (isSkeleton) {
-        return (
-            <SKTWrapper readOnly={readOnly}>
-                <Skeleton variant="text" width={'50%'} height={skeletonHeight} />
-                <Gap />
-                <Skeleton variant="text" width={skeletonWidth} height={skeletonHeight} />
-                <Skeleton
-                    variant="circular"
-                    width={20}
-                    sx={{ minWidth: '20px', minHeight: '20px' }}
-                />
-            </SKTWrapper>
-        );
-    }
-
-    if (readOnly) {
-        <ContainerPeriod error={false} readOnly={readOnly}>
-            <FieldPeriod>{value.selPeriodTime}</FieldPeriod>
-            <Gap />
-            <FieldValue>{value.singleValue}</FieldValue>
-            <Icon
-                src={`${host_static_assets}/${environment_assets}/frontend/components/period/assets/icons/clock.svg`}
-            />
-        </ContainerPeriod>;
-    }
-
-    return (
-        <ContainerPeriod error={error} readOnly={readOnly}>
-            <Autocomplete
-                options={options}
-                value={options[selPeriodTime]}
-                disableClearable
-                onChange={(_event, autcValue) => {
-                    onChangeTime(autcValue);
-                }}
-                renderInput={params => {
-                    return (
-                        <TextField
-                            key={`tx_async_${params.id}`}
-                            {...params}
-                            // label={label}
-                            fullWidth
-                            variant="standard"
-                            SelectProps={{ native: true }}
-                            InputProps={{
-                                disableUnderline: true,
-                                ...params.InputProps,
-                            }}
-                            autoComplete="off"
-                        />
-                    );
-                }}
-            />
-            <Gap />
-            <TextField
-                type={'number'}
-                variant="standard"
-                value={singleValue}
-                InputProps={{ disableUnderline: true }}
-                onChange={e => {
-                    onTotalChange(
-                        selPeriodTime,
-                        e.target.value === '' ? '' : parseInt(e.target.value),
-                    );
-                }}
-            />
-            <Icon
-                src={`${host_static_assets}/${environment_assets}/frontend/components/period/assets/icons/clock.svg`}
-            />
-        </ContainerPeriod>
-    );
-};

package/src/components/Period/styles.tsx

@@ -1,67 +0,0 @@
-import { styled } from '@mui/material';
-import { SKTWrapperProps, WrapperProps } from './types';
-
-export const ContainerPeriod = styled('div')<WrapperProps>(({ theme, error, readOnly }) => ({
-    display: 'flex',
-    width: '100%',
-    height: 'auto',
-    alignItems: 'center',
-    gap: theme.spacing(1),
-    border: error ? `1px solid ${theme.palette.error.main}` : `1px solid ${theme.palette.divider}`,
-    padding: theme.spacing(0.5, 1),
-    borderRadius: '4px',
-    ...(readOnly && {
-        border: '0px',
-    }),
-    '& .MuiAutocomplete-root, & .MuiTextField-root': {
-        width: '100%',
-    },
-    '& .MuiAutocomplete-root .MuiTextField-root': {
-        width: '100%',
-    },
-    '& .MuiTextField-root .MuiInput-input': {
-        padding: '5px!important',
-    },
-}));
-
-export const Gap = styled('div')(({ theme }) => ({
-    width: '1px',
-    height: '20px',
-    backgroundColor: theme.palette.divider,
-}));
-
-export const SKTWrapper = styled('div', {
-    shouldForwardProp: props => props !== 'readOnly',
-})<SKTWrapperProps>(({ theme, readOnly }) => ({
-    display: 'flex',
-    width: '100%',
-    height: '37.5px',
-    alignItems: 'center',
-    gap: theme.spacing(1),
-    border: `1px solid ${theme.palette.divider}`,
-    ...(readOnly && {
-        border: '0px',
-    }),
-    padding: theme.spacing(0.5, 1),
-    borderRadius: '4px',
-}));
-
-export const FieldPeriod = styled('div')(({ theme }) => ({
-    ...theme.typography.body2,
-    width: '100%',
-    display: 'flex',
-    textOverflow: 'elipsis',
-    overflow: 'hidden',
-    padding: '5px',
-    textAlign: 'left',
-}));
-
-export const FieldValue = styled('div')(({ theme }) => ({
-    ...theme.typography.body2,
-    width: '70px',
-    display: 'flex',
-    textOverflow: 'elipsis',
-    overflow: 'hidden',
-    padding: '5px',
-    textAlign: 'left',
-}));

package/src/components/Period/types.ts

@@ -1,39 +0,0 @@
-export enum ETimePeriods {
-    YEARS = 0,
-    MONTHS = 1,
-    DAYS = 2,
-}
-
-export type PeriodVariant = 'monoperiod' | 'multiperiod';
-
-export type PeriodTime = {
-    id: number;
-    label: string;
-};
-export interface WrapperProps extends Pick<PeriodProps, 'readOnly'> {
-    error: boolean;
-}
-
-export type SKTWrapperProps = Pick<PeriodProps, 'readOnly'>;
-
-export type PeriodType = {
-    selPeriodTime: ETimePeriods;
-    singleValue: number | '';
-    years?: number;
-    months?: number;
-    days?: number;
-};
-
-export interface PeriodProps {
-    value: PeriodType;
-    onChange: (newValue: PeriodType) => void;
-    error?: boolean;
-    readOnly?: boolean;
-    variant?: PeriodVariant;
-    skeletonWidth?: string | number;
-    skeletonHeight?: string | number;
-}
-
-export interface WrapperProps {
-    error: boolean;
-}