@m4l/components 0.1.40 → 0.1.41

package/components/areas/components/Window/subcomponents/MicroFrontend/subcomponents/MFLoader/index.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import { MicroFrontendProps } from '../../../../../Area/types';
+declare global {
+    interface Window {
+        [key: string]: any;
+    }
+}
+export declare function MFLoader(props: MicroFrontendProps): JSX.Element;
+export declare namespace MFLoader {
+    var defaultProps: {
+        document: Document;
+        window: Window & typeof globalThis;
+    };
+}
+export default MFLoader;

package/components/areas/components/Window/subcomponents/MicroFrontend/subcomponents/MFLoader/subcomponents/LoadingMF/index.d.ts

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

package/components/areas/components/Window/subcomponents/MicroFrontend/subcomponents/MFLoader/subcomponents/LoadingMF/styles.d.ts

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

package/components/areas/components/Window/subcomponents/MicroFrontend/subcomponents/MFLoader/subcomponents/LoadingMF/subcomponents/NotFound/index.d.ts

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

package/components/areas/components/Window/subcomponents/MicroFrontend/subcomponents/MFLoader/subcomponents/LoadingMF/subcomponents/NotFound/styles.d.ts

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

package/components/areas/components/Window/subcomponents/MicroFrontend/subcomponents/MFLoader/subcomponents/LoadingMF/subcomponents/NotFound/types.d.ts

@@ -0,0 +1,2 @@
+import { FallBackProps } from '../../types';
+export declare type FallBackNotFoundProps = Pick<FallBackProps, 'setNetworkRefresh'>;

package/components/areas/components/Window/subcomponents/MicroFrontend/subcomponents/MFLoader/subcomponents/LoadingMF/types.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export declare type FallBackStatus = '0' | '1';
+export interface FallBackProps {
+    loadingProgress: number;
+    setNetworkRefresh: React.Dispatch<React.SetStateAction<boolean>>;
+}

package/components/areas/components/WindowPopUp/index.214cf099.js

@@ -0,0 +1,120 @@
+import { useState } from "react";
+import "../../../Icon/index.8d754623.js";
+import "framer-motion";
+import "@mui/material";
+import { jsx } from "react/jsx-runtime";
+import { styled } from "@mui/material/styles";
+import "react-router-dom";
+import "../../../animate/LoadingScreen/index.1d0c4307.js";
+import "../../../animate/PropagateLoader/index.be5b02c3.js";
+import "../index.7d6cd649.js";
+import "../AreasAdmin/index.6794b22f.js";
+import "@m4l/core";
+import "../../contexts/AreasContext/index.cd8e4bee.js";
+import "../AreasContainer/index.a2f8899b.js";
+import "react-grid-layout/css/styles.css";
+import "../../../../react-resizable.1d00271d.js";
+import "react-hook-form";
+import "../../../hook-form/RHFAutocomplete/index.de93fe01.js";
+import "../../../Image/index.93d5f37f.js";
+import "lodash/debounce";
+import "../../../hook-form/RHFCheckbox/index.6dcec9e2.js";
+import "@mui/x-date-pickers";
+import "../../../hook-form/RHFDateTime/index.7f1cbd85.js";
+import "@m4l/graphics";
+import "../../../hook-form/RHFTextField/index.b17d68f4.js";
+import "../../../hook-form/RHFPeriod/index.3772295b.js";
+import "../../../ErrorLabel/index.c8615f16.js";
+import "../../../Period/index.abe445bd.js";
+import "../../../CommonActions/components/Actions/index.d3e1f36e.js";
+import "@mui/material/Button";
+import "../../../../contexts/ModalContext/index.b90eec94.js";
+import "../../../../react-draggable.84d6b038.js";
+import "../../../ModalDialog/index.a684827f.js";
+import { R as ResizeableWindow } from "../../../Resizeable/index.c96c0f09.js";
+import "../../contexts/DynamicMFParmsContext/index.668bc2e2.js";
+import "../../../modal/WindowConfirm.0b8a6818.js";
+import "../../../modal/WindowBase.04439b8e.js";
+import "@mui/lab";
+import "lodash/isString";
+import "react-dropzone";
+import "../../../hook-form/RHFUpload/index.d5cc7c13.js";
+import "../../../mui_extended/Accordion/index.a541c71c.js";
+import "../../../mui_extended/Avatar/index.fe06afd7.js";
+import "../../../mui_extended/Button/index.86a155a2.js";
+import "../../../mui_extended/Popover/index.53c77d23.js";
+import "../../../mui_extended/MenuActions/index.ee17bddd.js";
+import "../../../mui_extended/Pager/index.74d3f5fc.js";
+import "../../../mui_extended/Tab/index.e0653a0a.js";
+import "../../../DataGrid/index.67260455.js";
+import "react-dnd";
+import "react-dnd-html5-backend";
+import "../../../ScrollBar/index.39eeb2de.js";
+import "../../../DynamicFilter/index.071aa795.js";
+import "simplebar/dist/simplebar.min.css";
+import "@hookform/resolvers/yup";
+import "../../../../contexts/RHFormContext/index.d88e6e27.js";
+import "yup";
+import { DraggableWindow } from "../../../../index.js";
+import "../../../LanguagePopover/index.cbc4b282.js";
+import "../../../NoItemSelected/index.46d2f632.js";
+import "../../../ObjectLogs/index.4a859658.js";
+import "../../../../react-json-view.57125fcf.js";
+import "../../../PaperForm/index.c5948756.js";
+import "../../../Page/index.4237c241.js";
+import "../../../PropertyValue/index.dfcfe1ba.js";
+import "../../../../react-splitter-layout.8b1655c8.js";
+import "../../../SplitLayout/index.5a8355d8.js";
+import { a as useArea } from "../../hooks/useArea/index.9b85ce24.js";
+import { W as Window } from "../Window/index.252fbf4e.js";
+const WrapperPopUpWindow = styled("div")(() => ({
+  height: "100%",
+  "&.m4l_selected": {
+    borderTop: "1px solid green"
+  }
+}));
+const WindowPopUp = (props) => {
+  const {
+    zIndex,
+    windowProps: rect
+  } = props;
+  const {
+    isWindowSelected,
+    selectWindow,
+    getWindowPopUpZindex
+  } = useArea();
+  const [currentZIndex, setZindex] = useState(zIndex || getWindowPopUpZindex());
+  const isSelected = isWindowSelected(props.container_id);
+  const onTouch = () => {
+    if (!isSelected) {
+      selectWindow(props.container_id);
+      setZindex(getWindowPopUpZindex());
+    }
+  };
+  return /* @__PURE__ */ jsx(DraggableWindow, {
+    handle: ".m4l_draggable_handle",
+    cancel: "",
+    defaultPosition: rect,
+    children: /* @__PURE__ */ jsx(ResizeableWindow, {
+      width: rect.width,
+      height: rect.height,
+      style: {
+        zIndex: currentZIndex,
+        position: "absolute"
+      },
+      className: isSelected ? "m4l_selected" : "",
+      onResizeStart: () => {
+        onTouch();
+      },
+      children: /* @__PURE__ */ jsx(WrapperPopUpWindow, {
+        onMouseDown: onTouch,
+        children: /* @__PURE__ */ jsx(Window, {
+          ...props
+        })
+      })
+    })
+  });
+};
+export {
+  WindowPopUp as W
+};

package/components/areas/components/WindowPopUp/index.d.ts

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

package/components/areas/components/WindowPopUp/styles.d.ts

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

package/components/areas/components/index.7d6cd649.js

@@ -0,0 +1,67 @@
+import { A as AreaProvider } from "../contexts/AreaContext/index.4894cf23.js";
+import { G as GridLayout } from "./GridLayout/index.b9c1e846.js";
+import { u as useAreas } from "../hooks/useArea/index.9b85ce24.js";
+import { styled } from "@mui/material/styles";
+import { jsx } from "react/jsx-runtime";
+import "./AreasAdmin/index.6794b22f.js";
+import "react";
+import "@m4l/core";
+import "@mui/material";
+import "../../Icon/index.8d754623.js";
+import "../contexts/AreasContext/index.cd8e4bee.js";
+import "./AreasContainer/index.a2f8899b.js";
+import "react-grid-layout/css/styles.css";
+import "../../../react-resizable.1d00271d.js";
+const WrapperArea = styled("div")(() => ({
+  flexDirection: "column",
+  flexGrow: "1",
+  position: "absolute",
+  height: "100%",
+  width: "100%",
+  overflow: "auto",
+  justifyContent: "top",
+  alignItems: "flex-start",
+  border: "1px dashed black",
+  visibility: "hidden",
+  display: "none",
+  "&.active": {
+    display: "flex",
+    visibility: "visible"
+  },
+  "& .layout": {
+    overflow: "scroll",
+    minWidth: "100%",
+    minHeight: "100%"
+  },
+  "& .selected": {
+    borderTop: "1px solid green"
+  }
+}));
+const Area = (props) => {
+  const {
+    id,
+    active
+  } = props;
+  const {
+    setAreaRef
+  } = useAreas();
+  const setAreaProviderRef = (element) => {
+    console.log("setAreaProviderRef", element, id);
+    if (element) {
+      setAreaRef(id, element);
+    }
+  };
+  console.log("Render Area");
+  return /* @__PURE__ */ jsx(WrapperArea, {
+    className: active ? "active" : "",
+    children: /* @__PURE__ */ jsx(AreaProvider, {
+      ...props,
+      ref: setAreaProviderRef,
+      children: /* @__PURE__ */ jsx(GridLayout, {})
+    })
+  });
+};
+Area.displayName = "Area";
+export {
+  Area as A
+};

package/components/areas/components/index.d.ts

@@ -0,0 +1,4 @@
+export * from './Area';
+export * from './AreasAdmin';
+export * from './AreasContainer';
+export type { NewWindowProps as NewWindow, MicroFrontendProps } from './Area/types';

package/components/areas/contexts/AreaContext/index.4894cf23.js

@@ -0,0 +1,286 @@
+import React__default, { createContext, forwardRef, useState, useRef, useImperativeHandle, useCallback, useEffect } from "react";
+import isEqual from "lodash/isEqual";
+import debounce from "lodash/debounce";
+import { W as Window } from "../../components/Window/index.252fbf4e.js";
+import { u as useModal } from "../../../../hooks/useModal/index.d14edee3.js";
+import { useNetwork } from "@m4l/core";
+import { u as useAreas } from "../../hooks/useArea/index.9b85ce24.js";
+import { jsx } from "react/jsx-runtime";
+const AreaContext = createContext(null);
+const getParmsFromValue = (key, data) => {
+  try {
+    if (Array.isArray(data)) {
+      let ob = data.find((f) => f.id === key);
+      if (ob) {
+        ob = JSON.parse(ob.value);
+      }
+      return ob;
+    }
+  } catch (error) {
+  }
+  return void 0;
+};
+const AreaProvider = forwardRef((props, ref) => {
+  const {
+    children,
+    id,
+    active
+  } = props;
+  const {
+    networkOperation
+  } = useNetwork();
+  const [status, setStatus] = useState("init");
+  const [layouts, setLayouts] = useState([]);
+  const [allLayouts, setAllLayouts] = useState({});
+  const [hashWindowsLayouts, setHashhWindowsLayouts] = useState({});
+  const windowsLayoutsBack = useRef({});
+  const [windowsPopUps, setWindowsPopUps] = useState([]);
+  const [, setSelectedWindow] = useState("");
+  const {
+    openModal,
+    closeModal
+  } = useModal();
+  const {
+    activeAreasNetwork
+  } = useAreas();
+  useImperativeHandle(ref, () => ({
+    addWindow
+  }), []);
+  const WindowPopUpZindex = useRef(999);
+  const getWindowPopUpZindex = useCallback(() => {
+    WindowPopUpZindex.current++;
+    return WindowPopUpZindex.current;
+  }, []);
+  useEffect(() => {
+    console.log("useEffect AreaProvider");
+    return () => {
+      console.log("useEffect cluanUp AreaProvider****");
+    };
+  }, []);
+  useEffect(() => {
+    if (active && status === "init") {
+      setStatus("load");
+    }
+  }, [active]);
+  console.log("Rendeer AreaProvider status", status, activeAreasNetwork);
+  useEffect(() => {
+    let mounted = true;
+    if (status === "load") {
+      if (activeAreasNetwork) {
+        console.log("useEffect Load Cargarcokies");
+        networkOperation({
+          method: "GET",
+          endPoint: `cookies`,
+          parms: {
+            f: [{
+              n: "container_id",
+              o: "c",
+              o1: id
+            }]
+          },
+          toastSuccess: false,
+          toastError: false
+        }).then((_response) => {
+          if (mounted) {
+            const layoutParms = getParmsFromValue("layout_parms", _response.data);
+            const windows = getParmsFromValue("windows", _response.data);
+            if (layoutParms) {
+              setAllLayouts(layoutParms);
+            }
+            if (windows) {
+              const newLayouts = [];
+              const newHashLayouts = {};
+              for (const key in windows) {
+                const element = windows[key];
+                if (element && element["layoutProps"] && element["mfProps"] && element["emergeType"] === "layout" && element["winType"] === "microfrontend") {
+                  element["layoutProps"].i = key;
+                  newLayouts.push(element["layoutProps"]);
+                  newHashLayouts[key] = {
+                    ...element,
+                    container_id: key,
+                    emergeType: "layout",
+                    onClose: onCloseWindowLayout
+                  };
+                }
+              }
+              console.log("GET cookies", layoutParms, newHashLayouts);
+              setLayouts(newLayouts);
+              setHashhWindowsLayouts(newHashLayouts);
+            }
+            setStatus("loaded");
+          }
+        }).catch((_response) => {
+          setStatus("loaded");
+        });
+      } else {
+        setStatus("loaded");
+      }
+    }
+    return () => {
+      mounted = false;
+    };
+  }, [status]);
+  useEffect(() => {
+    console.log("useEffect SaveWindow", status, hashWindowsLayouts);
+    if (status === "loaded") {
+      let nrKeys = 0;
+      const saveObjetc = {};
+      for (const key in hashWindowsLayouts) {
+        const element = hashWindowsLayouts[key];
+        const newElement = {
+          ...element
+        };
+        delete newElement.onClose;
+        if (element.winType === "microfrontend") {
+          saveObjetc[key] = newElement;
+          nrKeys++;
+        }
+      }
+      console.log("saveWindows", nrKeys, saveObjetc, JSON.stringify(saveObjetc));
+      if (activeAreasNetwork && nrKeys > 0) {
+        networkOperation({
+          method: "PUT",
+          endPoint: `cookies/windows/${id}/nomodule`,
+          data: {
+            value: JSON.stringify(saveObjetc)
+          },
+          toastSuccess: false,
+          toastError: false
+        });
+      }
+    }
+  }, [hashWindowsLayouts]);
+  const debouncedLayoutChange = useCallback(debounce((currentLayouts, newAllLayouts) => {
+    currentLayouts.forEach((layout) => {
+      const {
+        i
+      } = layout;
+      if (i === "none")
+        return;
+      if (isEqual(layout, windowsLayoutsBack.current[i]))
+        return;
+    });
+    setAllLayouts(newAllLayouts);
+    if (activeAreasNetwork) {
+      networkOperation({
+        method: "PUT",
+        endPoint: `cookies/layout_parms/${id}/nomodule`,
+        data: {
+          value: JSON.stringify(newAllLayouts)
+        },
+        toastSuccess: false,
+        toastError: false
+      });
+    }
+  }, 2e3), [layouts]);
+  const onLayoutChange = useCallback((currentLayouts, newAllLayouts) => {
+    debouncedLayoutChange(currentLayouts, newAllLayouts);
+  }, [debouncedLayoutChange]);
+  const onCloseWindowLayout = useCallback((removeLayoutId) => {
+    setHashhWindowsLayouts((lastHashhWL) => {
+      const newLayouts = {
+        ...lastHashhWL
+      };
+      delete newLayouts[removeLayoutId];
+      return newLayouts;
+    });
+    delete windowsLayoutsBack.current[removeLayoutId];
+  }, []);
+  const onCloseWindowPopUp = useCallback((removePopUpId) => {
+    setWindowsPopUps((lastPopUpsMfs) => {
+      const newPopUps = [...lastPopUpsMfs];
+      return newPopUps.filter((p) => p.container_id !== removePopUpId);
+    });
+  }, []);
+  const onCloseWindowModal = useCallback((_removePopUpId) => {
+    closeModal();
+  }, []);
+  const addWindowPopUp = useCallback((container_id, newWindowPopupProps) => {
+    setWindowsPopUps((lastPopUpsMfs) => {
+      return [{
+        ...newWindowPopupProps,
+        emergeType: "popup",
+        container_id,
+        onClose: onCloseWindowPopUp
+      }, ...lastPopUpsMfs];
+    });
+  }, []);
+  const addWindowModal = useCallback((container_id, newWindowProps) => {
+    openModal({
+      window: /* @__PURE__ */ jsx(Window, {
+        ...newWindowProps,
+        container_id,
+        onClose: onCloseWindowModal
+      })
+    });
+  }, []);
+  const addWindowLayout = useCallback((container_id, newWindow) => {
+    const newLayout = {
+      ...newWindow.layoutProps,
+      i: container_id,
+      isDraggable: true,
+      isResizable: true,
+      winType: newWindow.winType
+    };
+    setLayouts((lastLayout) => [...lastLayout, newLayout]);
+    setHashhWindowsLayouts((lastHashWindowsLayouts) => {
+      return {
+        ...lastHashWindowsLayouts,
+        [container_id]: {
+          ...newWindow,
+          container_id,
+          emergeType: "layout",
+          onClose: onCloseWindowLayout
+        }
+      };
+    });
+    windowsLayoutsBack.current[container_id] = {
+      ...newLayout
+    };
+  }, []);
+  const addWindow = useCallback((newWindow) => {
+    const newId = `${id}_window_${new Date().getTime()}_${(Math.random() * 1e3).toFixed(0)}`;
+    console.log("addWindow", newWindow.winType, newWindow.emergeType, newId);
+    if (newWindow.emergeType === "layout") {
+      addWindowLayout(newId, newWindow);
+    } else if (newWindow.emergeType === "popup") {
+      addWindowPopUp(newId, newWindow);
+    } else if (newWindow.emergeType === "modal") {
+      addWindowModal(newId, newWindow);
+    }
+    return newId;
+  }, []);
+  const isWindowSelected = useCallback((lookForThisId) => {
+    if (windowsPopUps.findIndex((wp) => wp.container_id === lookForThisId) > -1) {
+      return true;
+    }
+    return false;
+  }, [hashWindowsLayouts, windowsPopUps]);
+  const selectWindow = useCallback((newSeletectedId) => {
+    setSelectedWindow(newSeletectedId);
+  }, []);
+  return /* @__PURE__ */ jsx(AreaContext.Provider, {
+    value: {
+      id,
+      status,
+      isWindowSelected,
+      selectWindow,
+      getWindowPopUpZindex,
+      allLayouts,
+      layouts,
+      hashWindowsLayouts,
+      addWindow,
+      onCloseWindowLayout,
+      onLayoutChange,
+      windowsPopUps,
+      onCloseWindowPopUp
+    },
+    children
+  });
+});
+AreaProvider.displayName = "AreaProvider";
+React__default.memo(AreaProvider);
+export {
+  AreaProvider as A,
+  AreaContext as a
+};

package/components/areas/contexts/AreaContext/index.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { AreaContextProps, AreaProviderProps, AreaProviderRef } from './types';
+declare const AreaContext: React.Context<AreaContextProps | null>;
+declare const AreaProvider: React.ForwardRefExoticComponent<AreaProviderProps & React.RefAttributes<AreaProviderRef>>;
+declare const MemonizedAreaProvider: React.MemoExoticComponent<React.ForwardRefExoticComponent<AreaProviderProps & React.RefAttributes<AreaProviderRef>>>;
+export { AreaProvider, AreaContext, MemonizedAreaProvider };

package/components/areas/contexts/AreaContext/types.d.ts

@@ -0,0 +1,28 @@
+import { ReactNode } from 'react';
+import type { Layout, Layouts } from 'react-grid-layout';
+import { NewWindowProps, PopUpProps, WinType } from '../../components/Area/types';
+import { AreaProps, HashWindowsByLayouts } from '../../components/Area/types';
+export declare type AreaStatus = 'init' | 'load' | 'loaded' | 'error';
+export interface AreaProviderProps extends AreaProps {
+    children: ReactNode;
+}
+export declare type WinLayout = Layout & {
+    winType: WinType;
+};
+export declare type AreaProviderRef = {
+    addWindow: (newWindowMF: NewWindowProps) => string;
+};
+export interface AreaContextProps extends Omit<AreaProps, 'children' | 'active'> {
+    status: AreaStatus;
+    isWindowSelected: (id: string) => boolean;
+    selectWindow: (newSeletectedId: string) => void;
+    getWindowPopUpZindex: () => number;
+    allLayouts: Layouts;
+    layouts: Layout[];
+    hashWindowsLayouts: HashWindowsByLayouts;
+    addWindow: (newWindow: NewWindowProps) => string;
+    onCloseWindowLayout: (removeLayoutId: string) => void;
+    onLayoutChange: (currentLayouts: Layout[], allLayouts: Layouts) => void;
+    windowsPopUps: PopUpProps[];
+    onCloseWindowPopUp: (removePopUpId: string) => void;
+}