@m4l/components 0.0.2 → 0.0.5

package/dist/components/DataGrid/styles.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare const WrapperGrid: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const OriginalGridWrapperStyled: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/components/DataGrid/types.d.ts

@@ -0,0 +1,56 @@
+/// <reference types="react" />
+import { MenuAction } from '@mui_extended/MenuActions/types';
+import { Column } from 'react-data-grid';
+import { ActionsProps } from './components/Actions/types';
+export declare type ColumnType = 'text' | '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' {
+    interface Column<TRow, TSummaryRow = unknown> {
+        visible?: boolean;
+        hidden?: boolean;
+        fixed?: boolean;
+        type: ColumnType;
+        align?: ColumnAlign;
+        isDraggable?: boolean;
+        withFilter?: boolean;
+        withinHeaderRenderer?: React.FunctionComponent<HeaderRendererProps<TRow, TSummaryRow>>;
+    }
+}
+export declare type RowKey = string | number;
+export declare interface WithActionsProps {
+    withActions?: boolean;
+}
+export declare interface PagerState {
+    page: number;
+    rowsPerPage: number;
+    totalRecords: number;
+}
+export declare const initialPagerState: PagerState;
+export declare type RowHeightVariants = 'standard' | 'compact' | 'confortable';
+export declare type RowHeights = number | number[];
+export declare interface GridProps<TRow, TSummaryRow> {
+    id: RowKey;
+    isSkeleton?: boolean;
+    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?: Set<RowKey>;
+    onRowsSelectedChange?: (mapRowsSelected: ReadonlySet<RowKey>, rawRowsSelected: TRow[]) => void;
+}
+export declare interface DataGridProps<TRow, TSummaryRow> extends GridProps<TRow, TSummaryRow> {
+    actionsProps: ActionsProps;
+}

package/dist/components/FormActions/dictionary.d.ts

@@ -0,0 +1,3 @@
+import type { Dictionary } from '@m4l/core';
+export declare function getActionnsComponentsDictionary(): string[];
+export declare const defaultActionsDictionary: Dictionary;

package/dist/components/FormActions/index.js

@@ -38,4 +38,7 @@ const FormActions = (props) => {
     })]
   });
 };
-export { FormActions as F };
+function getActionnsComponentsDictionary() {
+  return ["actions"];
+}
+export { FormActions as F, getActionnsComponentsDictionary as g };

package/dist/components/ModalDialog/dictionary.d.ts

@@ -0,0 +1,3 @@
+import { Dictionary } from "@m4l/core";
+export declare function getModalDialogComponentsDictionary(): string[];
+export declare const defaultModalDialogDictionary: Dictionary;

package/dist/components/ModalDialog/index.js

@@ -8,10 +8,11 @@ import { useEnvironment } from "@m4l/core";
 import { B as BoxIcon } from "../mui_extended/BoxIcon/index.js";
 import "../mui_extended/MenuPopover/index.js";
 import "react";
-import "react-router-dom";
 import { jsxs, jsx } from "react/jsx-runtime";
+import "react-router-dom";
 import "../mui_extended/MenuActions/index.js";
-import { F as FormActions } from "../FormActions/index.js";
+import "../mui_extended/Pager/index.js";
+import { F as FormActions, g as getActionnsComponentsDictionary } from "../FormActions/index.js";
 const WrapperDialog = styled(Dialog)(() => ({}));
 const Container = styled("div")(({ theme }) => ({
   display: "flex",
@@ -171,4 +172,10 @@ const ModalDialog = () => {
     }), !isDesktop && contentComnponent]
   });
 };
-export { ModalDialog as M };
+function getModalDialogComponentsDictionary() {
+  return ["modal_dialog"].concat(getActionnsComponentsDictionary());
+}
+const defaultModalDialogDictionary = {
+  modal_dialog: {}
+};
+export { ModalDialog as M, defaultModalDialogDictionary as d, getModalDialogComponentsDictionary as g };

package/dist/components/ObjectLogs/components/DetailDialog/index.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { DetailDialogProps } from './types';
+export declare function DetailDialog(props: DetailDialogProps): JSX.Element;

package/dist/components/ObjectLogs/components/DetailDialog/styles.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare const Container: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Text: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;

package/dist/components/ObjectLogs/components/DetailDialog/types.d.ts

@@ -0,0 +1,3 @@
+export interface DetailDialogProps {
+    log_id: number;
+}

package/dist/components/ObjectLogs/components/DetailFormatter/index.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { DetailFormatterProps } from './types';
+export declare function DetailFormatter(props: DetailFormatterProps): JSX.Element;

package/dist/components/ObjectLogs/components/DetailFormatter/types.d.ts

@@ -0,0 +1,3 @@
+export interface DetailFormatterProps {
+    log_id: number;
+}

package/dist/components/ObjectLogs/index.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { LogsProps } from './types';
+export declare function ObjectLogs(props: LogsProps): JSX.Element;

package/dist/components/ObjectLogs/index.js

@@ -0,0 +1,283 @@
+import { useState, useEffect, useCallback, useMemo } from "react";
+import { useNetwork, useModuleDictionary } from "@m4l/core";
+import { Tooltip, IconButton, TextField } from "@mui/material";
+import { LocalizationProvider, DateTimePicker } from "@mui/x-date-pickers";
+import AdapterDateFns from "@mui/lab/AdapterDateFns";
+import { styled, useTheme } from "@mui/material/styles";
+import { startOfMonth, endOfDay } from "date-fns";
+import { D as DateFormatter, a as DataGrid } from "../DataGrid/index.js";
+import { I as IconButton$1 } from "../mui_extended/IconButton/index.js";
+import { R as ReactJson } from "../../react-json-view.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { u as useModal } from "../../hooks/useModal/index.js";
+import { a as usePaginate } from "../../vendor.js";
+const Container$1 = styled("div")(() => ({
+  height: "100%",
+  width: "100%",
+  display: "flex",
+  flexDirection: "column",
+  justifyContent: "flex-start"
+}));
+const Actions = styled("div")(({
+  theme
+}) => ({
+  position: "relative",
+  height: "60px",
+  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)
+    }
+  }
+}));
+const GridWrapper = styled("div")(() => ({
+  position: "relative",
+  flexGrow: "1",
+  width: "100%"
+}));
+const Container = styled("div")(({ theme }) => ({
+  color: theme.palette.text.primary,
+  display: "flex",
+  flexDirection: "column",
+  height: "100%",
+  width: "100%"
+}));
+styled("span")(({ theme }) => ({
+  color: theme.palette.text.primary,
+  display: "flex",
+  flexDirection: "column",
+  height: "100%",
+  width: "100%"
+}));
+function DetailDialog(props) {
+  const {
+    log_id
+  } = props;
+  const {
+    networkOperation
+  } = useNetwork();
+  const [detail, setDetail] = useState({});
+  useEffect(() => {
+    let mounted = true;
+    networkOperation({
+      method: "GET",
+      endPoint: `logs/${log_id}`
+    }).then((response) => {
+      if (mounted) {
+        const parseData = JSON.parse(String(response.data.log_detail));
+        setDetail(parseData);
+      }
+    });
+    return function cleanUp() {
+      mounted = false;
+    };
+  }, []);
+  const detailTest = {
+    id: "id",
+    test: true,
+    number: 123
+  };
+  console.log("parseJson", detail, typeof detail);
+  console.log("parseJosnTest", detailTest, typeof detailTest);
+  return /* @__PURE__ */ jsx(Container, {
+    id: "objectLogsDetail",
+    children: /* @__PURE__ */ jsx(ReactJson, {
+      src: detail
+    })
+  });
+}
+function DetailFormatter(props) {
+  const {
+    log_id
+  } = props;
+  const {
+    openModal,
+    closeModal
+  } = useModal();
+  const {
+    getLabel
+  } = useModuleDictionary();
+  const onClickDetail = () => {
+    openModal({
+      onQueryClose: () => closeModal(),
+      title: getLabel("object_logs.modal_detail_title"),
+      iconComponent: /* @__PURE__ */ jsx("div", {
+        children: "Sin icono"
+      }),
+      contentComponent: /* @__PURE__ */ jsx(DetailDialog, {
+        log_id
+      })
+    });
+  };
+  return /* @__PURE__ */ jsx(Tooltip, {
+    title: "filtrar",
+    children: /* @__PURE__ */ jsx(IconButton, {
+      onClick: onClickDetail,
+      "aria-label": "filter",
+      children: /* @__PURE__ */ jsx("div", {
+        children: "Sin icono"
+      })
+    })
+  });
+}
+function ObjectLogs(props) {
+  const {
+    getLabel
+  } = useModuleDictionary();
+  const {
+    resource_id,
+    object_id
+  } = props;
+  const now = new Date();
+  const [startValue, setStartValue] = useState(startOfMonth(now));
+  const [endValue, setEndtValue] = useState(endOfDay(now));
+  const [queryParams, setQueryParams] = useState({
+    resource_id,
+    object_id,
+    init_date: startValue,
+    end_date: endValue
+  });
+  const [queryActive, setQueryActive] = useState(true);
+  const theme = useTheme();
+  const dateFormatterCreatedAt = useCallback((rowProps) => /* @__PURE__ */ jsx(DateFormatter, {
+    presentationType: "datetime",
+    dateTime: rowProps.row.created_at
+  }), []);
+  const DetailRowFormatter = useCallback((rowProps) => /* @__PURE__ */ jsx(DetailFormatter, {
+    log_id: rowProps.row.id
+  }), []);
+  const columns = useMemo(() => [
+    {
+      key: "created_at",
+      name: getLabel("object_logs.created_at"),
+      type: "date",
+      width: 300,
+      formatter: dateFormatterCreatedAt
+    },
+    {
+      key: "email",
+      name: getLabel("object_logs.email"),
+      type: "text",
+      width: 300
+    },
+    {
+      key: "resource_name",
+      name: getLabel("object_logs.resource_name"),
+      type: "text"
+    },
+    {
+      key: "preview",
+      name: getLabel("object_logs.preview"),
+      type: "text"
+    },
+    {
+      key: "Detail",
+      name: getLabel("object_logs.log_detail"),
+      type: "custom",
+      formatter: DetailRowFormatter
+    },
+    {
+      key: "ip",
+      name: getLabel("object_logs.ip"),
+      type: "text"
+    }
+  ], [getLabel]);
+  const {
+    pagerState,
+    rows,
+    onPageChange,
+    onRowsPerPageChange,
+    clearRows
+  } = usePaginate({
+    endPoint: "logs",
+    fireOnEnter: false,
+    queryParams
+  });
+  useEffect(() => {
+    setQueryActive(true);
+    clearRows();
+  }, [object_id]);
+  const onChangeDate = (date, which) => {
+    if (!date)
+      return;
+    if (which === "start") {
+      setStartValue(date);
+    } else {
+      setEndtValue(date);
+    }
+    setQueryActive(true);
+  };
+  const onClickFilter = () => {
+    setQueryParams({
+      resource_id,
+      object_id,
+      init_date: startValue,
+      end_date: endValue
+    });
+    setQueryActive(false);
+  };
+  return /* @__PURE__ */ jsxs(Container$1, {
+    children: [/* @__PURE__ */ jsxs(Actions, {
+      id: "objectLogsActions",
+      children: [/* @__PURE__ */ jsxs(LocalizationProvider, {
+        dateAdapter: AdapterDateFns,
+        children: [/* @__PURE__ */ jsx(DateTimePicker, {
+          value: startValue,
+          onChange: (newValue) => {
+            onChangeDate(newValue, "start");
+          },
+          renderInput: (params) => /* @__PURE__ */ jsx(TextField, {
+            ...params
+          })
+        }), /* @__PURE__ */ jsx(DateTimePicker, {
+          value: endValue,
+          onChange: (newValue) => {
+            onChangeDate(newValue, "end");
+          },
+          renderInput: (params) => /* @__PURE__ */ jsx(TextField, {
+            ...params
+          })
+        })]
+      }), /* @__PURE__ */ jsx(IconButton$1, {
+        dictionaryTooltip: "object_logs.search",
+        onClick: onClickFilter,
+        sx: {
+          color: queryActive ? theme.palette.primary.main : theme.palette.text.primary
+        },
+        disabled: object_id === void 0,
+        "aria-label": "searc",
+        src: "https://s3.amazonaws.com/static.made4labs/environments/d1/frontend/components/object_logs/assets/icons/search.svg"
+      })]
+    }), /* @__PURE__ */ jsx(GridWrapper, {
+      id: "GridWrapper",
+      children: /* @__PURE__ */ jsx(DataGrid, {
+        id: "users_logs_list",
+        columns,
+        rows,
+        rowKeyGetter: (row) => row.id,
+        isMultipleSelect: false,
+        withActions: true,
+        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
+          }
+        }
+      }, "users_list_logs")
+    })]
+  });
+}
+export { ObjectLogs as O };

package/dist/components/ObjectLogs/styles.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const Container: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Actions: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const GridWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/components/ObjectLogs/types.d.ts

@@ -0,0 +1,18 @@
+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> {
+    init_date: Date;
+    end_date: Date;
+}

package/dist/components/index.d.ts

@@ -1,5 +1,9 @@
 export * from '../components/mui_extended';
+export * from '../components/DataGrid';
+export * from '../components/ObjectLogs';
 export * from '../components/FormActions';
 export * from '../components/ModalDialog';
+export * from '../components/ModalDialog/dictionary';
 export * from '../components/Resizeable';
 export * from '../components/SplitLayout';
+export type { SplitPosition } from '../components/SplitLayout/types';

package/dist/components/mui_extended/IconButton/index.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { IconButtonProps as MUIIconButtonProps } from '@mui/material';
+import { IconButtonProps } from './types';
+export declare function IconButton({ src, tooltip, size, dictionaryTooltip, ...other }: IconButtonProps & MUIIconButtonProps): JSX.Element;
+export default IconButton;

package/dist/components/mui_extended/IconButton/index.js

@@ -0,0 +1,37 @@
+import { useMemo } from "react";
+import { useModuleDictionary } from "@m4l/core";
+import { IconButton as IconButton$1, Tooltip } from "@mui/material";
+import { B as BoxIcon } from "../BoxIcon/index.js";
+import { jsx } from "react/jsx-runtime";
+function IconButton({
+  src,
+  tooltip,
+  size = "small",
+  dictionaryTooltip,
+  ...other
+}) {
+  const {
+    getLabel
+  } = useModuleDictionary();
+  const iconButton = useMemo(() => /* @__PURE__ */ jsx(IconButton$1, {
+    size,
+    ...other,
+    children: /* @__PURE__ */ jsx(BoxIcon, {
+      src
+    })
+  }), [size, other, src]);
+  const finalTooltip = useMemo(() => {
+    if (dictionaryTooltip && getLabel) {
+      return getLabel(dictionaryTooltip);
+    }
+    return tooltip;
+  }, [dictionaryTooltip, tooltip, getLabel]);
+  if (finalTooltip && !other.disabled) {
+    return /* @__PURE__ */ jsx(Tooltip, {
+      title: finalTooltip,
+      children: iconButton
+    });
+  }
+  return iconButton;
+}
+export { IconButton as I };

package/dist/components/mui_extended/IconButton/types.d.ts

@@ -0,0 +1,5 @@
+export interface IconButtonProps {
+    src: string;
+    tooltip?: string;
+    dictionaryTooltip?: string;
+}

package/dist/components/mui_extended/MenuActions/index.d.ts

@@ -1,3 +1,4 @@
 /// <reference types="react" />
 import { MenuActionsProps } from './types';
-export default function MenuActions(props: MenuActionsProps): JSX.Element;
+export declare function MenuActions(props: MenuActionsProps): JSX.Element;
+export default MenuActions;

package/dist/components/mui_extended/MenuActions/styles.d.ts

@@ -6,7 +6,7 @@ export declare const WrapperMenuActions: import("@emotion/styled").StyledCompone
     disabled?: boolean | undefined;
     disableFocusRipple?: boolean | undefined;
     edge?: false | "end" | "start" | undefined;
-    size?: "small" | "medium" | "large" | undefined;
+    size?: "small" | "large" | "medium" | undefined;
     sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
 } & Omit<{
     action?: import("react").Ref<import("@mui/material").ButtonBaseActions> | undefined;
@@ -26,5 +26,5 @@ export declare const WrapperMenuActions: import("@emotion/styled").StyledCompone
     touchRippleRef?: import("react").Ref<import("@mui/material/ButtonBase/TouchRipple").TouchRippleActions> | undefined;
 }, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof import("react").ButtonHTMLAttributes<HTMLButtonElement>> & {
     ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
-}, "color" | "sx" | "children" | keyof import("@mui/material/OverridableComponent").CommonProps | "tabIndex" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "size" | "edge"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+}, "color" | "children" | "sx" | keyof import("@mui/material/OverridableComponent").CommonProps | "tabIndex" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "size" | "edge"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
 export declare const LabelMemuItem: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/components/mui_extended/Pager/components/PagerActions/index.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { PagerActionsProps } from './types';
+export declare function PagerActions(props: PagerActionsProps): JSX.Element;

package/dist/components/mui_extended/Pager/components/PagerActions/styles.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const WrapperPagerActions: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/components/mui_extended/Pager/components/PagerActions/types.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export interface PagerActionsProps {
+    count: number;
+    page: number;
+    rowsPerPage: number;
+    onPageChange: (event: React.MouseEvent<HTMLButtonElement>, newPage: number) => void;
+}

package/dist/components/mui_extended/Pager/dicctionary.d.ts

@@ -0,0 +1,3 @@
+import { Dictionary } from '@m4l/core';
+export declare function getPagerComponentsDictionary(): string[];
+export declare const defaultPagerDictionary: Dictionary;

package/dist/components/mui_extended/Pager/index.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { PagerProps } from './types';
+export declare function Pager(props: PagerProps): JSX.Element;
+export default Pager;