@m4l/layouts 0.1.39 → 0.1.41

package/contexts/AuthContext/index.6f966215.js

@@ -1,130 +1,160 @@
-import { createContext as T, useReducer as y, useEffect as d } from "react";
-import { useHostTools as E, useNetwork as S, useEnvironment as v, useLocalStorageWithListener as N, EmitEvents as O, getLocalStorage as w, setLocalStorage as r } from "@m4l/core";
-import { jsx as D } from "react/jsx-runtime";
-var n = /* @__PURE__ */ ((e) => (e.Initial = "INITIALIZE", e.Login = "LOGIN", e.Logout = "LOGOUT", e))(n || {});
-const _ = {
-  isAuthenticated: !1,
-  isInitialized: !1,
+import { createContext, useReducer, useEffect } from "react";
+import { useHostTools, useNetwork, useEnvironment, useLocalStorageWithListener, EmitEvents, getLocalStorage, setLocalStorage } from "@m4l/core";
+import { jsx } from "react/jsx-runtime";
+var EnumTypes = /* @__PURE__ */ ((EnumTypes2) => {
+  EnumTypes2["Initial"] = "INITIALIZE";
+  EnumTypes2["Login"] = "LOGIN";
+  EnumTypes2["Logout"] = "LOGOUT";
+  return EnumTypes2;
+})(EnumTypes || {});
+const initialState = {
+  isAuthenticated: false,
+  isInitialized: false,
   user: null
-}, P = (e, t) => {
-  switch (t.type) {
+};
+const JWTReducer = (state, action) => {
+  switch (action.type) {
     case "INITIALIZE":
       return {
-        isAuthenticated: t.payload.isAuthenticated,
-        isInitialized: !0,
-        user: t.payload.user
+        isAuthenticated: action.payload.isAuthenticated,
+        isInitialized: true,
+        user: action.payload.user
       };
     case "LOGIN":
       return {
-        ...e,
-        isAuthenticated: !0,
-        user: t.payload.user
+        ...state,
+        isAuthenticated: true,
+        user: action.payload.user
       };
     case "LOGOUT":
       return {
-        ...e,
-        isAuthenticated: !1,
+        ...state,
+        isAuthenticated: false,
         user: null
       };
     default:
-      return e;
+      return state;
   }
-}, x = T(null);
-function z(e) {
-  e({
-    type: n.Initial,
+};
+const AuthContext = createContext(null);
+function dispatchInitial(dispatch) {
+  dispatch({
+    type: EnumTypes.Initial,
     payload: {
-      isAuthenticated: !1,
+      isAuthenticated: false,
       user: null
     }
   });
 }
-function R(e) {
+function AuthProvider(props) {
+  const {
+    children
+  } = props;
+  const [state, dispatch] = useReducer(JWTReducer, initialState);
+  const {
+    events_add_listener
+  } = useHostTools();
   const {
-    children: t
-  } = e, [h, s] = y(P, _), {
-    events_add_listener: I
-  } = E(), {
-    networkOperation: u
-  } = S(), {
-    domain_token: m
-  } = v(), [f, l] = N(
+    networkOperation
+  } = useNetwork();
+  const {
+    domain_token
+  } = useEnvironment();
+  const [nextValSession, setNextValSession] = useLocalStorageWithListener(
     "vSession",
     new Date().getTime() + ""
   );
-  d(() => {
-    (async () => {
-      u({
+  useEffect(() => {
+    const initialize = async () => {
+      networkOperation({
         method: "GET",
-        endPoint: "auth/login",
+        endPoint: `auth/login`,
         parms: {
-          user_data: !0
+          user_data: true
         },
-        checkUnAuthorized: !1
-      }).then((a) => {
-        s({
-          type: n.Initial,
+        checkUnAuthorized: false
+      }).then((response) => {
+        dispatch({
+          type: EnumTypes.Initial,
           payload: {
-            isAuthenticated: !0,
-            user: a.user
+            isAuthenticated: true,
+            user: response.user
           }
-        }), w("userData", {
-          email: a.user.email,
-          remember: !0
-        })?.email !== a.user.email && r("userData", {
-          email: a.user.email
-        }, !0);
+        });
+        const useSaved = getLocalStorage("userData", {
+          email: response.user.email,
+          remember: true
+        });
+        if (useSaved?.email !== response.user.email) {
+          setLocalStorage("userData", {
+            email: response.user.email
+          }, true);
+        }
       }).catch(() => {
-        z(s);
+        dispatchInitial(dispatch);
       });
-    })();
-  }, [f]);
-  const g = async (i, a, o) => {
-    await u({
-      endPoint: "auth/login",
+    };
+    initialize();
+  }, [nextValSession]);
+  const login = async (email, password, remember) => {
+    await networkOperation({
+      endPoint: `auth/login`,
       method: "POST",
       data: {
-        email: i,
-        password: a,
-        domain_token: m
+        email,
+        password,
+        domain_token
+      }
+    }).then((response) => {
+      const user = response.data;
+      if (remember) {
+        setLocalStorage("userData", {
+          email,
+          remember
+        });
+      } else {
+        setLocalStorage("userData", {
+          email: "",
+          remember
+        });
       }
-    }).then((A) => {
-      const L = A.data;
-      o ? r("userData", {
-        email: i,
-        remember: o
-      }) : r("userData", {
-        email: "",
-        remember: o
-      }), s({
-        type: n.Login,
+      dispatch({
+        type: EnumTypes.Login,
         payload: {
-          user: L
+          user
         }
-      }), l(new Date().getTime() + "");
+      });
+      setNextValSession(new Date().getTime() + "");
+    });
+  };
+  const logout = async (isAuthenticated) => {
+    if (isAuthenticated) {
+      await networkOperation({
+        endPoint: `auth/logout`,
+        method: "POST"
+      });
+    }
+    dispatch({
+      type: EnumTypes.Logout
     });
-  }, c = async (i) => {
-    i && await u({
-      endPoint: "auth/logout",
-      method: "POST"
-    }), s({
-      type: n.Logout
-    }), l(new Date().getTime() + "");
-  }, p = () => {
-    c(!1);
+    setNextValSession(new Date().getTime() + "");
+  };
+  const onNetserviceUnautorized = () => {
+    logout(false);
   };
-  return d(() => {
-    I(O.EMMIT_EVENT_NET_SERVICE_UNAUTHORIZED, p);
-  }, []), /* @__PURE__ */ D(x.Provider, {
+  useEffect(() => {
+    events_add_listener(EmitEvents.EMMIT_EVENT_NET_SERVICE_UNAUTHORIZED, onNetserviceUnautorized);
+  }, []);
+  return /* @__PURE__ */ jsx(AuthContext.Provider, {
     value: {
-      ...h,
-      login: g,
-      logout: c
+      ...state,
+      login,
+      logout
     },
-    children: t
+    children
   });
 }
 export {
-  R as A,
-  x as a
+  AuthProvider as A,
+  AuthContext as a
 };

package/hooks/index.33191825.js

@@ -0,0 +1,4 @@
+import "react";
+import "../layouts/MasterDetailLayout/index.fe6ac47b.js";
+import "../contexts/AuthContext/index.6f966215.js";
+import "../layouts/ModuleLayout/index.e7218171.js";

package/hooks/useAuth/index.cb6a3420.js

@@ -1,11 +1,11 @@
-import { useContext as o } from "react";
-import { a as e } from "../../contexts/AuthContext/index.6f966215.js";
-const n = () => {
-  const t = o(e);
-  if (!t)
+import { useContext } from "react";
+import { a as AuthContext } from "../../contexts/AuthContext/index.6f966215.js";
+const useAuth = () => {
+  const context = useContext(AuthContext);
+  if (!context)
     throw new Error("Auth context must be use inside AuthProvider");
-  return t;
+  return context;
 };
 export {
-  n as u
+  useAuth as u
 };

package/hooks/useMasterDetail/index.be4908d9.js

@@ -0,0 +1,6 @@
+import { useContext } from "react";
+import { M as MasterDetailContext } from "../../layouts/MasterDetailLayout/index.fe6ac47b.js";
+const useMasterDetail = () => useContext(MasterDetailContext);
+export {
+  useMasterDetail as u
+};

package/hooks/useModule/index.b5f598b1.js

@@ -0,0 +1,11 @@
+import { useContext } from "react";
+import { M as ModuleContext } from "../../layouts/ModuleLayout/index.e7218171.js";
+const useModule = () => {
+  const context = useContext(ModuleContext);
+  if (!context)
+    throw new Error("useModule context must be use inside ModuleContext");
+  return context;
+};
+export {
+  useModule as u
+};

package/index.js

@@ -1,13 +1,13 @@
-import { M as f } from "./components/MFIsolationApp/index.e36cf308.js";
-import { M as D } from "./components/MFHostApp/index.420c2626.js";
-import { B as L } from "./components/BaseModule/index.6309486a.js";
-import { a as g, A as h } from "./contexts/AuthContext/index.6f966215.js";
-import { a as N, d as B, g as F } from "./layouts/ModuleLayout/index.850f7dcf.js";
-import { a as H, d as I, g as P } from "./layouts/MasterDetailLayout/index.bca0fce5.js";
-import { N as j, d as k, g as q } from "./layouts/NoAuthModuleLayout/index.eabf38c1.js";
-import { u as z } from "./hooks/useMasterDetail/index.927c0c26.js";
-import { u as G } from "./hooks/useAuth/index.cb6a3420.js";
-import { u as K } from "./hooks/useModule/index.edcd7b28.js";
+import { M } from "./components/MFIsolationApp/index.e36cf308.js";
+import { M as M2 } from "./components/MFHostApp/index.420c2626.js";
+import { B } from "./components/BaseModule/index.6309486a.js";
+import { a, A } from "./contexts/AuthContext/index.6f966215.js";
+import { a as a2, d, g } from "./layouts/ModuleLayout/index.e7218171.js";
+import { a as a3, d as d2, g as g2 } from "./layouts/MasterDetailLayout/index.fe6ac47b.js";
+import { N, d as d3, g as g3 } from "./layouts/NoAuthModuleLayout/index.2808fa44.js";
+import { u } from "./hooks/useMasterDetail/index.be4908d9.js";
+import { u as u2 } from "./hooks/useAuth/index.cb6a3420.js";
+import { u as u3 } from "./hooks/useModule/index.b5f598b1.js";
 import "react";
 import "react-router-dom";
 import "react-toastify";
@@ -21,22 +21,24 @@ import "react/jsx-runtime";
 import "nprogress";
 import "@m4l/components";
 import "@mui/material/styles";
+import "@mui/material";
+import "@mui/base";
 export {
-  g as AuthContext,
-  h as AuthProvider,
-  L as BaseModule,
-  D as MFHostApp,
-  f as MFIsolationApp,
-  H as MasterDetailLayout,
-  N as ModuleLayout,
-  j as NoAuthModuleLayout,
-  I as defaultMasterDetailDictionary,
-  B as defaultModuleLayoutDictionary,
-  k as defaultNoAuthModuleLayoutDictionary,
-  P as getMasterDetailLayoutComponentsDictionary,
-  F as getModuleLayoutComponentsDictionary,
-  q as getNoAuthModuleLayoutComponentsDictionary,
-  G as useAuth,
-  z as useMasterDetail,
-  K as useModule
+  a as AuthContext,
+  A as AuthProvider,
+  B as BaseModule,
+  M2 as MFHostApp,
+  M as MFIsolationApp,
+  a3 as MasterDetailLayout,
+  a2 as ModuleLayout,
+  N as NoAuthModuleLayout,
+  d2 as defaultMasterDetailDictionary,
+  d as defaultModuleLayoutDictionary,
+  d3 as defaultNoAuthModuleLayoutDictionary,
+  g2 as getMasterDetailLayoutComponentsDictionary,
+  g as getModuleLayoutComponentsDictionary,
+  g3 as getNoAuthModuleLayoutComponentsDictionary,
+  u2 as useAuth,
+  u as useMasterDetail,
+  u3 as useModule
 };

package/layouts/MasterDetailLayout/classes/constants.d.ts

@@ -0,0 +1 @@
+export declare const componentName = "M4LMasterDetailLayout";

package/layouts/MasterDetailLayout/classes/index.d.ts

@@ -0,0 +1,6 @@
+import { MasterDetailLayoutClassesType } from './types';
+export declare const masterDetailLayoutClasses: MasterDetailLayoutClassesType;
+export declare function getMasterDetailLayoutUtilityClass(slot: string): string;
+export declare const useMasterDetailLayoutUtilityClasses: () => {
+    root: string;
+};

package/layouts/MasterDetailLayout/classes/types.d.ts

@@ -0,0 +1,6 @@
+import { useMasterDetailLayoutUtilityClasses } from ".";
+export interface MasterDetailLayoutClassesType {
+    root: string;
+}
+export declare type MasterDetailLayoutClassesKey = keyof MasterDetailLayoutClassesType;
+export declare type Classes = ReturnType<typeof useMasterDetailLayoutUtilityClasses>;

package/layouts/MasterDetailLayout/index.fe6ac47b.js

@@ -0,0 +1,163 @@
+import { createContext, useState, useRef, useMemo, useCallback } from "react";
+import { voidFunction, useEnvironment, useModuleDictionary } from "@m4l/core";
+import { WindowBase, SplitLayout } from "@m4l/components";
+import { a as ModuleLayout, g as getModuleLayoutComponentsDictionary } from "../ModuleLayout/index.e7218171.js";
+import { jsx } from "react/jsx-runtime";
+import { useResponsiveDesktop } from "@m4l/graphics";
+import { generateUtilityClasses, generateUtilityClass, styled } from "@mui/material";
+import { unstable_composeClasses } from "@mui/base";
+const initialState = {
+  masterSelection: void 0,
+  onChangeMasterSelection: voidFunction
+};
+const MasterDetailContext = createContext(initialState);
+function MasterDetailProvider(props) {
+  const {
+    children
+  } = props;
+  const [masterSelection, setMasterSelection] = useState(void 0);
+  return /* @__PURE__ */ jsx(MasterDetailContext.Provider, {
+    value: {
+      masterSelection,
+      onChangeMasterSelection: setMasterSelection
+    },
+    children
+  });
+}
+const componentName = "M4LMasterDetailLayout";
+generateUtilityClasses(componentName, [
+  "root"
+]);
+function getMasterDetailLayoutUtilityClass(slot) {
+  return generateUtilityClass(componentName, slot);
+}
+const useMasterDetailLayoutUtilityClasses = () => {
+  const slots = {
+    root: ["root"]
+  };
+  const composedClasses = unstable_composeClasses(slots, getMasterDetailLayoutUtilityClass, {});
+  return {
+    ...composedClasses
+  };
+};
+const MasterDetailLayoutRoot = styled("div")(({ theme }) => ({
+  ...theme.components?.M4LMasterDetailLayout?.styleOverrides
+}));
+function getTotalModuleActions(splitActions, moduleActions = [], viewDetailAction, isDesktop) {
+  let totalActions = isDesktop !== void 0 && isDesktop ? [...splitActions] : [viewDetailAction];
+  totalActions = moduleActions.concat(totalActions);
+  return totalActions;
+}
+function MasterDetailLayout(props) {
+  const {
+    moduleId,
+    masterComponent,
+    detailComponent,
+    moduleActions,
+    version
+  } = props;
+  const {
+    host_static_assets,
+    environment_assets
+  } = useEnvironment();
+  const [splitPosition, setSplitPosition] = useState("vertical");
+  const isDesktop = useResponsiveDesktop();
+  const moduleLayoutRef = useRef(null);
+  const {
+    getLabel
+  } = useModuleDictionary();
+  const splitActions = useMemo(() => [{
+    urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/masterdetaillayout/assets/icons/split_vertical.svg`,
+    onClick: () => onChangePostionInternal("vertical"),
+    visibility: "main",
+    label: getLabel("master_detail_layout.split_vertical"),
+    tag: "vertical",
+    className: "splitactions",
+    disabled: splitPosition === "vertical",
+    key: "vertical"
+  }, {
+    urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/masterdetaillayout/assets/icons/split_horizontal.svg`,
+    onClick: () => onChangePostionInternal("horizontal"),
+    visibility: "main",
+    label: getLabel("master_detail_layout.split_horizontal"),
+    tag: "horizontal",
+    className: "splitactions",
+    disabled: splitPosition === "horizontal",
+    key: "horizontal"
+  }, {
+    urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/masterdetaillayout/assets/icons/no_split.svg`,
+    onClick: () => onChangePostionInternal("none"),
+    visibility: "main",
+    label: getLabel("master_detail_layout.no_split"),
+    tag: "none",
+    className: "splitactions",
+    disabled: splitPosition === "none",
+    key: "none"
+  }], [getLabel, splitPosition]);
+  const onChangePostionInternal = useCallback((newPostion) => {
+    setSplitPosition(newPostion);
+  }, []);
+  const onClickViewDetail = useCallback(() => {
+    moduleLayoutRef.current?.openModal({
+      initialWidth: 500,
+      initialHeigth: 680,
+      window: /* @__PURE__ */ jsx(
+        WindowBase,
+        {
+          title: getLabel("master_detail_layout.view_detail"),
+          children: typeof detailComponent === "function" ? detailComponent({}) : detailComponent
+        }
+      )
+    });
+  }, [detailComponent, getLabel]);
+  const viewDetailAction = useMemo(() => {
+    return {
+      urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/masterdetaillayout/assets/icons/view_detail.svg`,
+      onClick: onClickViewDetail,
+      disabled: false,
+      visibility: "allways",
+      label: getLabel("master_detail_layout.view_detail"),
+      tag: "none",
+      className: "",
+      key: "detail"
+    };
+  }, [environment_assets, onClickViewDetail]);
+  const finalModuleActions = useMemo(() => {
+    const actions = getTotalModuleActions(splitActions, moduleActions, viewDetailAction, isDesktop);
+    return actions;
+  }, [splitActions, moduleActions, isDesktop, viewDetailAction]);
+  const classes = useMasterDetailLayoutUtilityClasses();
+  return /* @__PURE__ */ jsx(MasterDetailProvider, {
+    children: /* @__PURE__ */ jsx(MasterDetailLayoutRoot, {
+      className: classes.root,
+      children: /* @__PURE__ */ jsx(ModuleLayout, {
+        ref: moduleLayoutRef,
+        moduleId,
+        moduleActions: finalModuleActions,
+        version,
+        children: /* @__PURE__ */ jsx(SplitLayout, {
+          splitPosition: isDesktop ? splitPosition : "none",
+          firstPart: masterComponent,
+          secondPart: detailComponent
+        })
+      })
+    })
+  });
+}
+function getMasterDetailLayoutComponentsDictionary() {
+  return ["master_detail_layout"].concat(getModuleLayoutComponentsDictionary());
+}
+const defaultMasterDetailDictionary = {
+  master_detail_layout: {
+    split_vertical: "Split vertically",
+    split_horizontal: "Split horizontally",
+    no_split: "No split",
+    view_detail: "View detail"
+  }
+};
+export {
+  MasterDetailContext as M,
+  MasterDetailLayout as a,
+  defaultMasterDetailDictionary as d,
+  getMasterDetailLayoutComponentsDictionary as g
+};

package/layouts/MasterDetailLayout/styles.d.ts

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

package/layouts/ModuleLayout/classes/constants.d.ts

@@ -0,0 +1 @@
+export declare const componentName = "M4LModuleLayout";

package/layouts/ModuleLayout/classes/index.d.ts

@@ -0,0 +1,7 @@
+import { ModuleLayoutClassesType } from './types';
+export declare const moduleLayoutClasses: ModuleLayoutClassesType;
+export declare function getModuleLayoutUtilityClass(slot: string): string;
+export declare const useModuleLayoutUtilityClasses: () => {
+    root: string;
+    moduleContent: string;
+};

package/layouts/ModuleLayout/classes/types.d.ts

@@ -0,0 +1,7 @@
+import { useModuleLayoutUtilityClasses } from ".";
+export interface ModuleLayoutClassesType {
+    root: string;
+    moduleContent: string;
+}
+export declare type ModuleLayoutClassesKey = keyof ModuleLayoutClassesType;
+export declare type Classes = ReturnType<typeof useModuleLayoutUtilityClasses>;