@m4l/components 0.1.35 → 0.1.37

package/components/Icon/index.619fa9ad.js

@@ -1,96 +0,0 @@
-import { styled } from "@mui/material";
-import { useState, useMemo, useEffect } from "react";
-import { useTheme } from "@mui/material/styles";
-import { g as getPaletteColor } from "../../utils/index.f3bfdc22.js";
-import { jsx } from "react/jsx-runtime";
-const DivIcon = styled("div", {
-  shouldForwardProp: (props) => props !== "src" && props !== "size" && props !== "bgColor" && props !== "rotationAngle" && props !== "angleTransition"
-})(({
-  size,
-  src,
-  bgColor,
-  rotationAngle,
-  angleTransition
-}) => ({
-  maskPosition: "center!important",
-  maskRepeat: "no-repeat!important",
-  WebkitMaskRepeat: "no-repeat!important",
-  width: size,
-  height: size,
-  backgroundColor: bgColor,
-  mask: `url('data:image/svg+xml;base64,${src}')`,
-  WebkitMask: `url('data:image/svg+xml;base64,${src}')`,
-  ...rotationAngle && {
-    transform: `rotate(${rotationAngle}deg)`
-  },
-  ...angleTransition && rotationAngle && {
-    transition: `transform ${angleTransition}s ease-in-out`
-  }
-}));
-const WrapperPlaceHolder = styled("div")(() => ({
-  display: "flex",
-  justifyContent: "center",
-  alignItems: "center"
-}));
-function Icon(props) {
-  const {
-    src,
-    size = "small",
-    bgColor = "action.active",
-    rotationAngle,
-    angleTransition
-  } = props;
-  const [resource, setResource] = useState(void 0);
-  const theme = useTheme();
-  const finalSize = useMemo(() => {
-    switch (size) {
-      case "extra-small":
-        return "12px";
-      case "small":
-        return "16px";
-      case "medium":
-        return "18px";
-      case "large":
-        return "22px";
-    }
-    return size;
-  }, [size]);
-  useEffect(() => {
-    let mounted = true;
-    (async function networkOperation() {
-      await fetch(src).then((response) => {
-        return response.text() || "";
-      }).then((xml) => {
-        xml = xml.match(
-          /(<svg\b[^>]*\s*(viewBox="(\b[^"]*)").*?>([\s\S]*?)<\/svg>|<svg>([\s\S]*?)<\/svg>)/g
-        )?.toString() || "";
-        if (mounted) {
-          setResource(window.btoa(xml));
-        }
-      }).catch((_err) => {
-      });
-    })();
-    return function clenUp() {
-      mounted = false;
-    };
-  }, [src]);
-  const placeHolder = "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI2LjMuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNhcGFfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiCgkgdmlld0JveD0iMCAwIDcwIDcwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA3MCA3MDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPgoJLnN0MHtmaWxsOiM2MzczODE7fQo8L3N0eWxlPgo8Zz4KCTxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00NSw4LjdjMS40LTEuNSwzLjQtMi4zLDUuNC0yLjNzMy45LDAuOCw1LjQsMi4zczIuNCwzLjUsMi41LDUuN2MwLDIuMi0wLjksNC4yLTIuNCw1LjdzLTMuNSwyLjMtNS41LDIuMgoJCWMtMi4xLDAuMS00LTAuNy01LjUtMi4yYy0xLjQtMS41LTIuMy0zLjUtMi40LTUuN0M0Mi42LDEyLjIsNDMuNSwxMC4yLDQ1LDguN3oiLz4KCTxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik02OC40LDYyLjFjLTAuMywwLjUtMC43LDAuOC0xLjIsMS4xcy0xLDAuNC0xLjYsMC40SDQuM2MtMC42LDAtMS4xLTAuMS0xLjYtMC40cy0wLjktMC42LTEuMi0xLjEKCQljLTAuMi0wLjUtMC40LTEtMC40LTEuNXMwLjEtMS4xLDAuNC0xLjVsMjMtMzYuNGMwLjMtMC41LDAuNy0wLjgsMS4yLTEuMXMxLTAuNCwxLjYtMC40czEuMSwwLjEsMS42LDAuNHMwLjksMC42LDEuMiwxLjEKCQlsMTEuNSwxOC4yYzAuMiwwLjMsMC41LDAuNSwwLjgsMC43czAuNiwwLjMsMSwwLjNjMC4zLDAsMC43LTAuMSwxLTAuM3MwLjYtMC40LDAuOC0wLjdsMy4xLTQuOWMwLjMtMC41LDAuNy0wLjgsMS4yLTEuMQoJCXMxLTAuNCwxLjYtMC40czEuMSwwLjEsMS42LDAuNGMwLjUsMC4zLDAuOSwwLjYsMS4yLDEuMWwxNC42LDIzLjFjMC4zLDAuNSwwLjMsMSwwLjMsMS41UzY4LjcsNjEuNyw2OC40LDYyLjF6Ii8+CjwvZz4KPC9zdmc+Cg==";
-  return /* @__PURE__ */ jsx(WrapperPlaceHolder, {
-    className: "m4l_icon",
-    children: resource ? /* @__PURE__ */ jsx(DivIcon, {
-      src: resource,
-      size: finalSize,
-      bgColor: getPaletteColor(theme.palette, bgColor),
-      rotationAngle,
-      angleTransition
-    }) : /* @__PURE__ */ jsx("img", {
-      src: placeHolder,
-      alt: "icon_svg",
-      width: finalSize,
-      height: finalSize
-    })
-  });
-}
-export {
-  Icon as I
-};

package/components/Loadable/index.55b8adb7.js

@@ -1,14 +0,0 @@
-import { Suspense } from "react";
-import { P as PropagateLoader } from "../animate/PropagateLoader/index.d5c18992.js";
-import { jsx } from "react/jsx-runtime";
-const Loadable = (Component) => function EmbededLoadable(props) {
-  return /* @__PURE__ */ jsx(Suspense, {
-    fallback: /* @__PURE__ */ jsx(PropagateLoader, {}),
-    children: /* @__PURE__ */ jsx(Component, {
-      ...props
-    })
-  });
-};
-export {
-  Loadable as L
-};

package/components/ModalDialog/components/Header/types.d.ts

@@ -1,9 +0,0 @@
-import { ReactNode } from 'react';
-import { VariantColor } from '../../../../utils/types';
-export interface HeaderProps {
-    variant?: VariantColor;
-    title: string;
-    iconComponent?: ReactNode;
-    withClose?: boolean;
-    onCloseModal?: () => void;
-}

package/components/ModalDialog/index.d50c4a9d.js

@@ -1,186 +0,0 @@
-import { Dialog, IconButton, Paper } from "@mui/material";
-import { c as cjs } from "../../react-draggable.a09b624f.js";
-import { u as useModal } from "../../hooks/useModal/index.44ea7900.js";
-import { styled } from "@mui/material/styles";
-import { a as getThemeVariantColor } from "../../utils/index.f3bfdc22.js";
-import { R as Resizeable } from "../Resizeable/index.d27b0310.js";
-import { useResponsiveDesktop } from "@m4l/graphics";
-import { useEnvironment } from "@m4l/core";
-import { I as Icon } from "../Icon/index.619fa9ad.js";
-import { jsxs, jsx } from "react/jsx-runtime";
-import { b as Actions, g as getCommonActionsDictionary } from "../CommonActions/components/Actions/index.4b0d3293.js";
-const WrapperDialog = styled(Dialog)(() => ({}));
-const Container = styled("div")(({ theme }) => ({
-  display: "flex",
-  flexDirection: "column",
-  height: "100%",
-  overflow: "hidden",
-  padding: theme.spacing(3)
-}));
-const Header$1 = styled("div")(({ theme }) => ({
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "space-between",
-  minHeight: theme.spacing(5),
-  borderBottom: `1px solid ${theme.palette.divider}`,
-  overflow: "hidden"
-}));
-styled("div")(({ theme }) => ({
-  display: "flex",
-  flexDirection: "row",
-  flexGrow: 1,
-  alignItems: "center",
-  cursor: "move",
-  ...theme.typography.subtitle1,
-  color: theme.palette.text.primary
-}));
-const IconHeader = styled("div")(({ theme, variant }) => ({
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "center",
-  marginRight: theme.spacing(1.5),
-  "& > span": {
-    background: getThemeVariantColor(theme, variant)
-  }
-}));
-const Content = styled("div")(() => ({
-  flexGrow: 1,
-  position: "relative",
-  overflow: "auto"
-}));
-const ModalTitle = styled("div")(({ theme, variant }) => ({
-  ...theme.typography.subtitle1,
-  color: getThemeVariantColor(theme, variant),
-  width: "100%",
-  whiteSpace: "nowrap",
-  textOverflow: "ellipsis",
-  overflow: "hidden"
-}));
-const Header = (props) => {
-  const {
-    host_static_assets,
-    environment_assets
-  } = useEnvironment();
-  const {
-    variant,
-    title,
-    iconComponent,
-    withClose,
-    onCloseModal
-  } = props;
-  const iconSrcWarning = `${host_static_assets}/${environment_assets}/frontend/components/dialog/assets/icons/warning.svg`;
-  const iconSrcError = `${host_static_assets}/${environment_assets}/frontend/components/dialog/assets/icons/error.svg`;
-  const iconSrcInfo = `${host_static_assets}/${environment_assets}/frontend/components/dialog/assets/icons/info.svg`;
-  const iconDefault = `${host_static_assets}/${environment_assets}/frontend/components/dialog/assets/icons/icon_bar_title.svg`;
-  return /* @__PURE__ */ jsxs(Header$1, {
-    id: "Header",
-    className: "draggable-dialog-title",
-    children: [/* @__PURE__ */ jsx(IconHeader, {
-      variant,
-      children: !iconComponent ? /* @__PURE__ */ jsx(Icon, {
-        src: variant === "warning" ? iconSrcWarning : variant === "delete" ? iconSrcError : variant === "info" ? iconSrcInfo : iconDefault
-      }) : iconComponent
-    }), /* @__PURE__ */ jsx(ModalTitle, {
-      variant,
-      children: title
-    }), withClose && /* @__PURE__ */ jsx(IconButton, {
-      onClick: onCloseModal,
-      "aria-label": "click",
-      children: /* @__PURE__ */ jsx(Icon, {
-        src: `${host_static_assets}/${environment_assets}/frontend/components/dialog/assets/icons/close.svg`
-      })
-    })]
-  });
-};
-const DragabblePaperComponent = (props) => {
-  return /* @__PURE__ */ jsx(cjs.exports, {
-    handle: ".draggable-dialog-title",
-    cancel: '[class*="MuiDialogContent-root"]',
-    children: /* @__PURE__ */ jsx(Paper, {
-      sx: {
-        maxHeight: "unset",
-        maxWidth: "unset"
-      },
-      ...props
-    })
-  });
-};
-function PaperComponent(props) {
-  return /* @__PURE__ */ jsx(Paper, {
-    sx: {
-      maxHeight: "unset",
-      maxWidth: "unset",
-      height: "100%"
-    },
-    ...props
-  });
-}
-const ModalDialog = () => {
-  const {
-    open,
-    initialWidth = 600,
-    initialHeigth = 400,
-    maxWidth,
-    maxHeigth,
-    withClose = true,
-    onQueryClose,
-    contentComponent,
-    title,
-    closeModal,
-    iconComponent,
-    actions,
-    variant,
-    fullScreen
-  } = useModal();
-  const isDesktop = useResponsiveDesktop();
-  const onCloseModal = () => {
-    closeModal();
-  };
-  const contentComnponent = /* @__PURE__ */ jsxs(Container, {
-    id: "Container",
-    children: [
-      /* @__PURE__ */ jsx(Header, {
-        variant,
-        title,
-        iconComponent,
-        withClose,
-        onCloseModal
-      }),
-      /* @__PURE__ */ jsx(Content, {
-        id: "Content",
-        children: typeof contentComponent === "function" ? contentComponent() : contentComponent
-      }),
-      actions && /* @__PURE__ */ jsx(Actions, {
-        children: actions
-      })
-    ]
-  });
-  return /* @__PURE__ */ jsxs(WrapperDialog, {
-    open,
-    onClose: onQueryClose,
-    "aria-labelledby": "child-modal-title",
-    "aria-describedby": "child-modal-description",
-    PaperComponent: isDesktop ? DragabblePaperComponent : PaperComponent,
-    maxWidth: false,
-    fullWidth: !isDesktop,
-    fullScreen,
-    children: [isDesktop && /* @__PURE__ */ jsx(Resizeable, {
-      width: initialWidth,
-      height: initialHeigth,
-      maxWidth,
-      maxHeigth,
-      children: contentComnponent
-    }), !isDesktop && contentComnponent]
-  });
-};
-function getModalDialogComponentsDictionary() {
-  return ["modal_dialog"].concat(getCommonActionsDictionary());
-}
-const defaultModalDialogDictionary = {
-  modal_dialog: {}
-};
-export {
-  ModalDialog as M,
-  defaultModalDialogDictionary as d,
-  getModalDialogComponentsDictionary as g
-};

package/components/ModalDialog/types.d.ts

@@ -1,6 +0,0 @@
-import { VariantColor } from '../../utils/types';
-export interface ModalDialogProps {
-}
-export interface VariantProps {
-    variant?: VariantColor;
-}

package/components/ObjectLogs/index.4e4ae4f4.js

@@ -1,298 +0,0 @@
-import { useState, useEffect, useCallback, useMemo } from "react";
-import { useNetwork, useModuleDictionary, useEnvironment, usePaginate } from "@m4l/core";
-import { styled } from "@mui/material/styles";
-import { D as DataGrid, g as getDataGridComponentsDictionary } from "../DataGrid/index.69d0fcea.js";
-import { D as DateFormatter } from "../formatters/DateFormatter/index.80522f69.js";
-import { Tooltip, IconButton } from "@mui/material";
-import { useHostTheme, useResponsiveDesktop } from "@m4l/graphics";
-import { R as ReactJson } from "../../react-json-view.57125fcf.js";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { u as useModal } from "../../hooks/useModal/index.44ea7900.js";
-import { I as Icon } from "../Icon/index.619fa9ad.js";
-import { D as DynamicFilter, g as getDynamicFilterComponentsDictionary } from "../DynamicFilter/index.68bcbc88.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: "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%"
-}));
-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 {
-    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(Container, {
-    id: "objectLogsDetail",
-    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,
-    closeModal
-  } = useModal();
-  const {
-    getLabel
-  } = useModuleDictionary();
-  const {
-    host_static_assets,
-    environment_assets
-  } = useEnvironment();
-  const isDesktop = useResponsiveDesktop();
-  const onClickDetail = () => {
-    openModal({
-      onQueryClose: () => closeModal(),
-      title: getLabel("object_logs.modal_detail_title"),
-      iconComponent: /* @__PURE__ */ jsx(Icon, {
-        src: `${host_static_assets}/${environment_assets}/frontend/components/object_logs/assets/icons/search.svg`
-      }),
-      contentComponent: /* @__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
-  } = 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$1, {
-    children: [/* @__PURE__ */ jsx(Actions, {
-      id: "objectLogsActions",
-      children: /* @__PURE__ */ jsx(DynamicFilter, {
-        withAllField: true,
-        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`
-        }, {
-          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`
-        }, {
-          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`
-        }, {
-          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: []
-      })
-    }), /* @__PURE__ */ jsx(GridWrapper, {
-      id: "GridWrapper",
-      children: /* @__PURE__ */ jsx(DataGrid, {
-        id: "users_logs_list",
-        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")
-    })]
-  });
-}
-function getObjectLogsComponentsDictionary() {
-  return ["object_logs"].concat(getDataGridComponentsDictionary()).concat(getDynamicFilterComponentsDictionary());
-}
-const defaultObjectLogDictionary = {
-  object_logs: {
-    created_at: "Start date",
-    user: "User/email",
-    resource_name: "Resource",
-    privilege_name: "Privilege",
-    log_preview: "Log",
-    log_detail: "Detail",
-    ip: "Ip"
-  }
-};
-export {
-  ObjectLogs as O,
-  defaultObjectLogDictionary as d,
-  getObjectLogsComponentsDictionary as g
-};