@m4l/components 0.1.12 → 0.1.13

package/components/ObjectLogs/index.js

@@ -1,284 +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.js";
-import { D as DateFormatter } from "../formatters/DateFormatter/index.js";
-import { Tooltip, IconButton } from "@mui/material";
-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 { I as Icon } from "../Icon/index.js";
-import { D as DynamicFilter, g as getDynamicFilterComponentsDictionary } from "../DynamicFilter/index.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 [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;
-    };
-  }, []);
-  return /* @__PURE__ */ jsx(Container, {
-    id: "objectLogsDetail",
-    children: /* @__PURE__ */ jsx(ReactJson, {
-      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 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
-      })
-    });
-  };
-  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"
-  }, {
-    key: "log_preview",
-    name: getLabel("object_logs.log_preview"),
-    type: "string"
-  }, {
-    key: "Detail",
-    name: getLabel("object_logs.log_detail"),
-    type: "custom",
-    formatter: DetailRowFormatter
-  }, {
-    key: "ip",
-    name: getLabel("object_logs.ip"),
-    type: "string"
-  }], [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,
-        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")
-    })]
-  });
-}
-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 };

package/components/Page/index.js

@@ -1,36 +0,0 @@
-import { forwardRef } from "react";
-import { Helmet } from "react-helmet-async";
-import { Box } from "@mui/material";
-import { useLocales } from "@m4l/graphics";
-import { useDomain, useModuleSkeleton } from "@m4l/core";
-import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-const Page = forwardRef((props, ref) => {
-  const {
-    children,
-    title,
-    meta,
-    ...other
-  } = props;
-  const {
-    currentLang
-  } = useLocales();
-  const {
-    name: domain_name
-  } = useDomain();
-  const isSkeleton = useModuleSkeleton();
-  return /* @__PURE__ */ jsxs(Fragment, {
-    children: [!isSkeleton && /* @__PURE__ */ jsxs(Helmet, {
-      children: [/* @__PURE__ */ jsx("title", {
-        children: `${title} | ${domain_name}`
-      }), /* @__PURE__ */ jsx("html", {
-        lang: currentLang.value
-      }), meta]
-    }), /* @__PURE__ */ jsx(Box, {
-      ref,
-      ...other,
-      children
-    })]
-  });
-});
-Page.displayName = "Page";
-export { Page as P };

package/components/PaperForm/index.js

@@ -1,110 +0,0 @@
-import { styled } from "@mui/material/styles";
-import { useModuleSkeleton } from "@m4l/core";
-import { Skeleton } from "@mui/material";
-import { I as Icon } from "../Icon/index.js";
-import { jsxs, jsx } from "react/jsx-runtime";
-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.customShadows.z8,
-    padding: theme.spacing(3),
-    backgroundColor: theme.palette.background.paper
-  }
-}));
-const HeaderContainer = styled("div")(({
-  theme
-}) => ({
-  display: "flex",
-  flexDirection: "row",
-  alignItems: "center",
-  borderBottom: `1px solid ${theme.palette.divider}`,
-  paddingBottom: theme.spacing(3),
-  marginBottom: theme.spacing(2),
-  overflow: "hidden"
-}));
-const IconTitleContainer = 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
-}) => ({
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "center",
-  marginRight: theme.spacing(1.5)
-}));
-const Content = styled("div")(() => ({
-  flexGrow: 1,
-  position: "relative"
-}));
-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)}`
-}));
-const Header = (props) => {
-  const {
-    urlIcon,
-    title
-  } = props;
-  const isSkeleton = useModuleSkeleton();
-  return isSkeleton ? /* @__PURE__ */ jsxs(SkTPaperFormHeader, {
-    children: [/* @__PURE__ */ jsx(Skeleton, {
-      variant: "circular",
-      width: 16,
-      height: 16
-    }), /* @__PURE__ */ jsx(Skeleton, {
-      variant: "text",
-      width: 68,
-      height: 14
-    })]
-  }) : /* @__PURE__ */ jsx(HeaderContainer, {
-    id: "Header",
-    children: /* @__PURE__ */ jsxs(IconTitleContainer, {
-      className: "draggable-dialog-title",
-      children: [/* @__PURE__ */ jsx(IconHeader, {
-        children: /* @__PURE__ */ jsx(Icon, {
-          src: urlIcon
-        })
-      }), title]
-    })
-  });
-};
-function PaperForm(props) {
-  const {
-    urlIcon,
-    title,
-    children
-  } = props;
-  return /* @__PURE__ */ jsxs(WrapperPaper, {
-    id: "ContainerPropertyValue",
-    children: [/* @__PURE__ */ jsx(Header, {
-      urlIcon,
-      title
-    }), /* @__PURE__ */ jsx(Content, {
-      id: "Content",
-      children
-    })]
-  });
-}
-export { PaperForm as P };

package/components/Period/index.js

@@ -1,230 +0,0 @@
-import { useModuleDictionary, useModuleSkeleton, useEnvironment } from "@m4l/core";
-import { styled, Skeleton, Autocomplete, TextField } from "@mui/material";
-import { useMemo } from "react";
-import { I as Icon } from "../Icon/index.js";
-import { jsxs, jsx } from "react/jsx-runtime";
-import { g as getCommonActionsDictionary } from "../CommonActions/components/Actions/index.js";
-import "@mui/material/Button";
-import "../mui_extended/Button/index.js";
-import "react-hook-form";
-import "react-router-dom";
-import "../../contexts/ModalContext/index.js";
-import "@mui/lab";
-const ContainerPeriod = styled("div")(({
-  theme,
-  error
-}) => ({
-  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",
-  "& .MuiAutocomplete-root, & .MuiTextField-root": {
-    width: "100%"
-  },
-  "& .MuiAutocomplete-root .MuiTextField-root": {
-    width: "100%"
-  },
-  "& .MuiTextField-root .MuiInput-input": {
-    padding: "5px!important"
-  }
-}));
-const Gap = styled("div")(({
-  theme
-}) => ({
-  width: "1px",
-  height: "20px",
-  backgroundColor: theme.palette.divider
-}));
-const SKTWrapper = styled("div")(({
-  theme
-}) => ({
-  display: "flex",
-  width: "auto",
-  height: "37.5px",
-  alignItems: "center",
-  gap: theme.spacing(1),
-  border: `1px solid ${theme.palette.divider}`,
-  padding: theme.spacing(0.5, 1),
-  borderRadius: "4px"
-}));
-const FieldPeriod = styled("div")(({
-  theme
-}) => ({
-  ...theme.typography.body2,
-  width: "100%",
-  display: "flex",
-  textOverflow: "elipsis",
-  overflow: "hidden",
-  padding: "5px",
-  textAlign: "left"
-}));
-const FieldValue = styled("div")(({
-  theme
-}) => ({
-  ...theme.typography.body2,
-  width: "70px",
-  display: "flex",
-  textOverflow: "elipsis",
-  overflow: "hidden",
-  padding: "5px",
-  textAlign: "left"
-}));
-var ETimePeriods = /* @__PURE__ */ ((ETimePeriods2) => {
-  ETimePeriods2[ETimePeriods2["YEARS"] = 0] = "YEARS";
-  ETimePeriods2[ETimePeriods2["MONTHS"] = 1] = "MONTHS";
-  ETimePeriods2[ETimePeriods2["DAYS"] = 2] = "DAYS";
-  return ETimePeriods2;
-})(ETimePeriods || {});
-const getSelPeriodTime = (period) => {
-  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) => {
-  if (!period)
-    return "";
-  if (period.singleValue !== void 0)
-    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 "";
-};
-const Period = (props) => {
-  const {
-    value,
-    onChange,
-    error = false,
-    readOnly = false
-  } = props;
-  const {
-    getLabel
-  } = useModuleDictionary();
-  const isSkeleton = useModuleSkeleton();
-  const selPeriodTime = getSelPeriodTime(value);
-  const singleValue = getSingleValue(value);
-  const onTotalChange = (newPeriodTime, newValue) => {
-    const newPeriod = {
-      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) => {
-    if (newPeriodTime) {
-      onTotalChange(newPeriodTime.id, singleValue);
-    }
-  };
-  const {
-    host_static_assets,
-    environment_assets
-  } = useEnvironment();
-  const options = useMemo(() => [{
-    id: 0,
-    label: getLabel("period.years")
-  }, {
-    id: 1,
-    label: getLabel("period.months")
-  }, {
-    id: 2,
-    label: getLabel("period.days")
-  }], [getLabel]);
-  if (isSkeleton) {
-    return /* @__PURE__ */ jsxs(SKTWrapper, {
-      children: [/* @__PURE__ */ jsx(Skeleton, {
-        variant: "rounded",
-        width: "100%"
-      }), /* @__PURE__ */ jsx(Gap, {}), /* @__PURE__ */ jsx(Skeleton, {
-        variant: "rounded",
-        width: "100%"
-      }), /* @__PURE__ */ jsx(Skeleton, {
-        variant: "circular",
-        width: 20,
-        sx: {
-          minWidth: "20px",
-          minHeight: "20px"
-        }
-      })]
-    });
-  }
-  if (readOnly) {
-    /* @__PURE__ */ jsxs(ContainerPeriod, {
-      error: false,
-      children: [/* @__PURE__ */ jsx(FieldPeriod, {
-        children: value.selPeriodTime
-      }), /* @__PURE__ */ jsx(Gap, {}), /* @__PURE__ */ jsx(FieldValue, {
-        children: value.singleValue
-      }), /* @__PURE__ */ jsx(Icon, {
-        src: `${host_static_assets}/${environment_assets}/frontend/components/period/assets/icons/clock.svg`
-      })]
-    });
-  }
-  return /* @__PURE__ */ jsxs(ContainerPeriod, {
-    error,
-    children: [/* @__PURE__ */ jsx(Autocomplete, {
-      options,
-      value: options[selPeriodTime],
-      disableClearable: true,
-      onChange: (_event, autcValue) => {
-        onChangeTime(autcValue);
-      },
-      renderInput: (params) => {
-        return /* @__PURE__ */ jsx(TextField, {
-          ...params,
-          fullWidth: true,
-          variant: "standard",
-          SelectProps: {
-            native: true
-          },
-          InputProps: {
-            disableUnderline: true,
-            ...params.InputProps
-          },
-          autoComplete: "off"
-        }, `tx_async_${params.id}`);
-      }
-    }), /* @__PURE__ */ jsx(Gap, {}), /* @__PURE__ */ jsx(TextField, {
-      type: "number",
-      variant: "standard",
-      value: singleValue,
-      InputProps: {
-        disableUnderline: true
-      },
-      onChange: (e) => {
-        onTotalChange(selPeriodTime, e.target.value === "" ? "" : parseInt(e.target.value));
-      }
-    }), /* @__PURE__ */ jsx(Icon, {
-      src: `${host_static_assets}/${environment_assets}/frontend/components/period/assets/icons/clock.svg`
-    })]
-  });
-};
-function getPeriodComponetsDictionary() {
-  return ["period"].concat(getCommonActionsDictionary());
-}
-export { Period as P, getPeriodComponetsDictionary as g };