@m4l/components 0.2.35 → 1.0.0

package/components/NoItemSelected/{index.3a479c64.js → index.418c8316.js}

@@ -1,21 +1,19 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { useEnvironment, useModuleDictionary, useModuleSkeleton } from "@m4l/core";
-import { styled, generateUtilityClasses, generateUtilityClass, Skeleton } from "@mui/material";
-import { I as Image } from "../Image/index.b799c514.js";
+import { I as Image } from "../Image/index.36a3d440.js";
+import { styled } from "@mui/material/styles";
+import { generateUtilityClasses, generateUtilityClass, Skeleton } from "@mui/material";
 import { useMemo } from "react";
 import { unstable_composeClasses } from "@mui/base";
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-const WrapperNoItemSelected = styled("div")(({
-  theme
-}) => ({
+import { Q as componentName } from "../areas/constants.5387d83e.js";
+const WrapperNoItemSelected = styled("div")(({ theme }) => ({
   ...theme.components?.M4LNoItemSelected?.styleOverrides
 }));
 const Img = styled(Image)(() => ({
   display: "flex"
 }));
-const Label = styled("span")(({
-  theme
-}) => ({
-  ...theme.typography.body,
+const Label = styled("span")(({ theme }) => ({
+  ...theme.colorSchemes.finalTheme.typography.body,
   padding: `${theme.spacing(1.5)} ${theme.spacing(1)} ${theme.spacing(1)} ${theme.spacing(1)}`
 }));
 const WrapperSKTNoItemSelected = styled("div")(() => ({
@@ -26,10 +24,12 @@ const WrapperSKTNoItemSelected = styled("div")(() => ({
   mask: `url("data:image/svg+xml,%3Csvg version='1.1' id='Capa_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 70 70' style='enable-background:new 0 0 70 70%3B' xml:space='preserve'%3E%3Cg%3E%3Cpath d='M45 8.7c1.4-1.5 3.4-2.3 5.4-2.3s3.9 0.8 5.4 2.3s2.4 3.5 2.5 5.7c0 2.2-0.9 4.2-2.4 5.7s-3.5 2.3-5.5 2.2c-2.1 0.1-4-0.7-5.5-2.2c-1.4-1.5-2.3-3.5-2.4-5.7C42.6 12.2 43.5 10.2 45 8.7z'/%3E%3Cpath d='M68.4 62.1c-0.3 0.5-0.7 0.8-1.2 1.1s-1 0.4-1.6 0.4H4.3c-0.6 0-1.1-0.1-1.6-0.4s-0.9-0.6-1.2-1.1c-0.2-0.5-0.4-1-0.4-1.5s0.1-1.1 0.4-1.5l23-36.4c0.3-0.5 0.7-0.8 1.2-1.1c0.5-0.3 1-0.4 1.6-0.4c0.6 0 1.1 0.1 1.6 0.4c0.5 0.3 0.9 0.6 1.2 1.1l11.5 18.2c0.2 0.3 0.5 0.5 0.8 0.7c0.3 0.2 0.6 0.3 1 0.3c0.3 0 0.7-0.1 1-0.3c0.3-0.2 0.6-0.4 0.8-0.7l3.1-4.9c0.3-0.5 0.7-0.8 1.2-1.1c0.5-0.3 1-0.4 1.6-0.4c0.6 0 1.1 0.1 1.6 0.4c0.5 0.3 0.9 0.6 1.2 1.1l14.6 23.1c0.3 0.5 0.3 1 0.3 1.5S68.7 61.7 68.4 62.1z'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain`,
   WebkitMask: `url("data:image/svg+xml,%3Csvg version='1.1' id='Capa_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 70 70' style='enable-background:new 0 0 70 70%3B' xml:space='preserve'%3E%3Cg%3E%3Cpath d='M45 8.7c1.4-1.5 3.4-2.3 5.4-2.3s3.9 0.8 5.4 2.3s2.4 3.5 2.5 5.7c0 2.2-0.9 4.2-2.4 5.7s-3.5 2.3-5.5 2.2c-2.1 0.1-4-0.7-5.5-2.2c-1.4-1.5-2.3-3.5-2.4-5.7C42.6 12.2 43.5 10.2 45 8.7z'/%3E%3Cpath d='M68.4 62.1c-0.3 0.5-0.7 0.8-1.2 1.1s-1 0.4-1.6 0.4H4.3c-0.6 0-1.1-0.1-1.6-0.4s-0.9-0.6-1.2-1.1c-0.2-0.5-0.4-1-0.4-1.5s0.1-1.1 0.4-1.5l23-36.4c0.3-0.5 0.7-0.8 1.2-1.1c0.5-0.3 1-0.4 1.6-0.4c0.6 0 1.1 0.1 1.6 0.4c0.5 0.3 0.9 0.6 1.2 1.1l11.5 18.2c0.2 0.3 0.5 0.5 0.8 0.7c0.3 0.2 0.6 0.3 1 0.3c0.3 0 0.7-0.1 1-0.3c0.3-0.2 0.6-0.4 0.8-0.7l3.1-4.9c0.3-0.5 0.7-0.8 1.2-1.1c0.5-0.3 1-0.4 1.6-0.4c0.6 0 1.1 0.1 1.6 0.4c0.5 0.3 0.9 0.6 1.2 1.1l14.6 23.1c0.3 0.5 0.3 1 0.3 1.5S68.7 61.7 68.4 62.1z'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain`
 }));
-const componentName = "M4LNoItemSelected";
-generateUtilityClasses(componentName, [
-  "root"
-]);
+generateUtilityClasses(
+  componentName,
+  [
+    "root"
+  ]
+);
 function getNoItemSelectedUtilityClass(slot) {
   return generateUtilityClass(componentName, slot);
 }
@@ -43,54 +43,19 @@ const useNoItemSelectedUtilityClasses = () => {
   };
 };
 function NoItemSelected(props) {
-  const {
-    image,
-    message
-  } = props;
-  const {
-    host_static_assets,
-    environment_assets
-  } = useEnvironment();
-  const {
-    getLabel
-  } = useModuleDictionary();
+  const { image, message } = props;
+  const { host_static_assets, environment_assets } = useEnvironment();
+  const { getLabel } = useModuleDictionary();
   const isSkeleton = useModuleSkeleton();
   const defaultImage = useMemo(() => {
     return `${host_static_assets}/${environment_assets}/frontend/components/no_item_selected/assets/icons/no_selected.svg`;
   }, []);
   const classes = useNoItemSelectedUtilityClasses();
-  return /* @__PURE__ */ jsx(WrapperNoItemSelected, {
-    className: classes.root,
-    children: !isSkeleton ? /* @__PURE__ */ jsxs(Fragment, {
-      children: [!message ? /* @__PURE__ */ jsx(Label, {
-        children: getLabel("no_item_selected.message")
-      }) : /* @__PURE__ */ jsx(Label, {
-        children: message
-      }), !image ? /* @__PURE__ */ jsx(Img, {
-        src: defaultImage
-      }) : /* @__PURE__ */ jsx(Img, {
-        src: image
-      })]
-    }) : /* @__PURE__ */ jsx(WrapperSKTNoItemSelected, {
-      id: "WrapperSKTNoItemSelected",
-      children: /* @__PURE__ */ jsx(Skeleton, {
-        variant: "rectangular",
-        width: "100%",
-        height: "100%"
-      })
-    })
-  });
+  return /* @__PURE__ */ jsx(WrapperNoItemSelected, { className: classes.root, children: !isSkeleton ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    !message ? /* @__PURE__ */ jsx(Label, { children: getLabel("no_item_selected.message") }) : /* @__PURE__ */ jsx(Label, { children: message }),
+    !image ? /* @__PURE__ */ jsx(Img, { src: defaultImage }) : /* @__PURE__ */ jsx(Img, { src: image })
+  ] }) : /* @__PURE__ */ jsx(WrapperSKTNoItemSelected, { id: "WrapperSKTNoItemSelected", children: /* @__PURE__ */ jsx(Skeleton, { variant: "rectangular", width: "100%", height: "100%" }) }) });
 }
-function getNoItemSelectedComponentsDictionary() {
-  return ["no_item_selected"];
-}
-const defaultNoItemSelectedDictionary = {
-  no_item_selected: {
-    message: "Please select a item to show detail"
-  }
-};
 export {
-  NoItemSelected as N,
-  defaultNoItemSelectedDictionary as d,
-  getNoItemSelectedComponentsDictionary as g
+  NoItemSelected as N
 };

package/components/NoItemSelected/styles.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const WrapperNoItemSelected: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Img: import("@emotion/styled").StyledComponent<import("../Image").ImageProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
+export declare const Label: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const WrapperSKTNoItemSelected: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/components/ObjectLogs/index.bfa7dad3.js

@@ -0,0 +1,236 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useCallback, useMemo } from "react";
+import { useNetwork, useModuleDictionary, useEnvironment, usePaginate } from "@m4l/core";
+import { styled } from "@mui/material/styles";
+import { S as Stack, D as DateFormatter, g as DataGrid } from "../../vendor.a1ce6777.js";
+import { Tooltip, IconButton } from "@mui/material";
+import { useHostTheme, useResponsiveDesktop } from "@m4l/graphics";
+import { R as ReactJson } from "../../react-json-view.57125fcf.js";
+import { S as ScrollBar } from "../ScrollBar/index.adf0eade.js";
+import { u as useModal } from "../../hooks/useModal/index.ef54bcf2.js";
+import { I as Icon } from "../Icon/index.d5fed418.js";
+import { W as WindowBase } from "../modal/WindowBase.a3ac7adc.js";
+import { D as DynamicFilter } from "../DynamicFilter/index.d9168c12.js";
+import { T as TEST_PROP_ID } from "../areas/constants.5387d83e.js";
+const Container = styled("div")(() => ({
+  height: "100%",
+  width: "100%",
+  display: "flex",
+  flexDirection: "column",
+  justifyContent: "flex-start",
+  gap: "4px"
+}));
+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)
+    }
+  }
+}));
+const GridWrapper = styled("div")(() => ({
+  position: "relative",
+  flexGrow: "1",
+  width: "100%"
+}));
+function DetailDialog(props) {
+  const { log_id } = props;
+  const { networkOperation } = useNetwork();
+  const { hostThemeOptions } = useHostTheme();
+  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 modeTheme = hostThemeOptions.palette?.mode;
+  return /* @__PURE__ */ jsx(ScrollBar, { children: /* @__PURE__ */ jsx(
+    ReactJson,
+    {
+      theme: modeTheme === "dark" ? "summerfruit" : "rjv-default",
+      name: null,
+      sortKeys: true,
+      displayDataTypes: false,
+      quotesOnKeys: false,
+      src: detail
+    }
+  ) });
+}
+function DetailFormatter(props) {
+  const { log_id } = props;
+  const { openModal } = useModal();
+  const { getLabel } = useModuleDictionary();
+  const { host_static_assets, environment_assets } = useEnvironment();
+  const isDesktop = useResponsiveDesktop();
+  const onClickDetail = () => {
+    openModal({
+      window: /* @__PURE__ */ jsx(WindowBase, { title: getLabel("data_grid.settings_title"), children: /* @__PURE__ */ jsx(Stack, { direction: "column", flexGrow: 1, children: /* @__PURE__ */ jsx(DetailDialog, { log_id }) }) }),
+      fullScreen: !isDesktop ? true : false
+    });
+  };
+  return /* @__PURE__ */ jsx(Tooltip, { title: getLabel("object_logs.view_log_detail"), children: /* @__PURE__ */ jsx(IconButton, { onClick: onClickDetail, "aria-label": "filter", children: /* @__PURE__ */ jsx(
+    Icon,
+    {
+      src: `${host_static_assets}/${environment_assets}/frontend/components/object_logs/assets/icons/search.svg`
+    }
+  ) }) });
+}
+function ObjectLogs(props) {
+  const { resource_id, object_id, dataTestId = "" } = props;
+  const { getLabel } = useModuleDictionary();
+  const { host_static_assets, environment_assets } = useEnvironment();
+  const [queryParams, setQueryParams] = useState({
+    resource_id,
+    object_id
+  });
+  const dateFormatterCreatedAt = useCallback(
+    (rowProps) => /* @__PURE__ */ jsx(DateFormatter, { presentationType: "datetime", value: 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: "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({
+    endPoint: "logs",
+    fireOnChangeParms: false,
+    queryParams
+  });
+  useEffect(() => {
+    clearRows();
+    setQueryParams((oldParms) => ({ ...oldParms, object_id }));
+  }, [object_id]);
+  const onChangeFilter = (_initFilters, rawFilters) => {
+    setQueryParams((oldParms) => ({ ...oldParms, f: rawFilters }));
+    Refresh();
+  };
+  return /* @__PURE__ */ jsxs(
+    Container,
+    {
+      ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: `m4ldatagrid-${dataTestId}` } : {},
+      children: [
+        /* @__PURE__ */ jsx(Actions, { id: "objectLogsActions", children: /* @__PURE__ */ jsx(
+          DynamicFilter,
+          {
+            withAllField: true,
+            onChangeFilters: onChangeFilter,
+            automatic: false,
+            fields: [
+              {
+                name: "user_logs.created_at",
+                dictionaryId: "object_logs.created_at",
+                type: "datetime",
+                multiple: false,
+                presence: "fixed",
+                urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/object_logs/assets/icons/email.svg`
+              },
+              {
+                name: "users.email",
+                dictionaryId: "object_logs.email",
+                type: "string",
+                multiple: true,
+                presence: "optional",
+                urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/object_logs/assets/icons/email.svg`
+              },
+              {
+                name: "user_logs.log_preview",
+                dictionaryId: "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`
+              },
+              {
+                name: "user_logs.log_detail",
+                dictionaryId: "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`
+              }
+            ],
+            initialAppliedFilters: []
+          }
+        ) }),
+        /* @__PURE__ */ jsx(GridWrapper, { id: "GridWrapper", children: /* @__PURE__ */ jsx(
+          DataGrid,
+          {
+            id: "users_logs_list",
+            dataTestId,
+            columns,
+            rows,
+            rowKeyGetter: (row) => row.id,
+            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/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/components/PDFViewer/classes/types.d.ts

@@ -1,4 +1,4 @@
-import { pdfviewerUtilityClasses } from ".";
+import { pdfviewerUtilityClasses } from '.';
 export interface PDFViewerClassesType {
     root: string;
     buttonDownload: string;

package/components/PDFViewer/{index.88c6ff6a.js → index.bb2eca5a.js}

@@ -1,11 +1,11 @@
+import { jsxs, jsx } from "react/jsx-runtime";
 import { styled, generateUtilityClasses, generateUtilityClass } from "@mui/material";
 import { unstable_composeClasses } from "@mui/base";
-import { jsxs, jsx } from "react/jsx-runtime";
-import { B as Button } from "../mui_extended/Button/index.c3084916.js";
+import { R as componentName } from "../areas/constants.5387d83e.js";
+import { B as Button } from "../../vendor.a1ce6777.js";
 const PDFVeiwerRoot = styled("div")(({ theme }) => ({
   ...theme.components?.M4LPDFViewer?.styleOverrides
 }));
-const componentName = "M4LPDFViewer";
 generateUtilityClasses(componentName, [
   "root",
   "buttonDownload"
@@ -24,9 +24,7 @@ const pdfviewerUtilityClasses = () => {
   };
 };
 const PDFViewer = (props) => {
-  const {
-    pdfUrl
-  } = props;
+  const { pdfUrl } = props;
   const handleDownload = async () => {
     try {
       const response = await fetch(pdfUrl);
@@ -43,19 +41,10 @@ const PDFViewer = (props) => {
     }
   };
   const classes = pdfviewerUtilityClasses();
-  return /* @__PURE__ */ jsxs(PDFVeiwerRoot, {
-    className: classes.root,
-    children: [/* @__PURE__ */ jsx("embed", {
-      src: pdfUrl,
-      type: "application/pdf",
-      width: "100%",
-      height: "100%"
-    }), /* @__PURE__ */ jsx(Button, {
-      onClick: handleDownload,
-      variant: "contained",
-      children: "Descargar PDF"
-    })]
-  });
+  return /* @__PURE__ */ jsxs(PDFVeiwerRoot, { className: classes.root, children: [
+    /* @__PURE__ */ jsx("embed", { src: pdfUrl, type: "application/pdf", width: "100%", height: "100%" }),
+    /* @__PURE__ */ jsx(Button, { onClick: handleDownload, variant: "contained", children: "Descargar PDF" })
+  ] });
 };
 export {
   PDFViewer as P

package/components/PDFViewer/styles.d.ts

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