@m4l/components 0.1.36 → 0.1.37

package/dist/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/dist/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/dist/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/dist/components/areas/contexts/AreasContext/index.cd8e4bee.js

@@ -0,0 +1,158 @@
+import { createContext, useState, useRef, useCallback, useEffect } from "react";
+import { useHostTools, useModuleDictionary, useNetwork, EmitEvents } from "@m4l/core";
+import { L as LABEL_NEW_AREA } from "../../index.d1bf612c.js";
+import { jsx } from "react/jsx-runtime";
+const AreasContext = createContext(null);
+function AreasProvider(props) {
+  const {
+    children,
+    activeAreasNetwork,
+    onLoad
+  } = props;
+  const [areas, setAreas] = useState([]);
+  const {
+    events_add_listener,
+    events_remove_listener
+  } = useHostTools();
+  const {
+    getLabel
+  } = useModuleDictionary();
+  const [status, setStatus] = useState("init");
+  const {
+    networkOperation
+  } = useNetwork();
+  const [currentArea, setCurrentArea] = useState(areas.length > 0 ? areas[0].id : "");
+  const currentAreaRef = useRef(areas.length > 0 ? areas[0].id : "");
+  const areaRefs = useRef({});
+  const addWindow = useCallback((newWindow) => {
+    let current;
+    console.log("addWindow raw");
+    if (areaRefs.current && areaRefs.current[currentAreaRef.current]) {
+      current = areaRefs.current[currentAreaRef.current];
+    }
+    if (current && current.addWindow) {
+      current.addWindow(newWindow);
+    }
+  }, []);
+  const addArea = useCallback(() => {
+    const newId = `area_${new Date().getTime()}_${(Math.random() * 1e3).toFixed(0)}`;
+    const newName = `${getLabel(LABEL_NEW_AREA)} ${areas.length + 1}`;
+    setAreas((lastAreas) => [...lastAreas, {
+      id: newId,
+      url_icon: "",
+      name: newName,
+      loadWindows: false
+    }]);
+    selectArea(newId);
+    if (activeAreasNetwork) {
+      networkOperation({
+        method: "POST",
+        endPoint: `areas`,
+        data: {
+          id: newId,
+          name: newName
+        },
+        toastSuccess: false,
+        toastError: false
+      });
+    }
+    return newId;
+  }, [getLabel]);
+  useEffect(() => {
+    events_add_listener(EmitEvents.EMMIT_EVENT_HOST_EMERGE_WINDOW, addWindow);
+    console.log("useEffect AreasProvider Emmiter");
+    return () => {
+      events_remove_listener(EmitEvents.EMMIT_EVENT_HOST_EMERGE_WINDOW, addWindow);
+    };
+  }, []);
+  useEffect(() => {
+    let mounted = true;
+    if (status === "init") {
+      if (activeAreasNetwork) {
+        setStatus("loading");
+        networkOperation({
+          method: "GET",
+          endPoint: `areas`,
+          parms: {},
+          toastSuccess: false
+        }).then((response) => {
+          if (mounted) {
+            if (response?.data && Array.isArray(response.data) && response.data.length > 0) {
+              setAreas(response.data);
+              selectArea(response.data[0].id);
+            } else {
+              addArea();
+            }
+          }
+        }).finally(() => {
+          setStatus("loaded");
+        });
+      } else {
+        addArea();
+        setStatus("loaded");
+      }
+    }
+    console.log("useEffect AreasProvider");
+    return () => {
+      console.log("useEffect cluanUp AreasProvider *** no deber\xEDa darse");
+      mounted = false;
+    };
+  }, []);
+  useEffect(() => {
+    if (status === "loaded") {
+      console.log("useEffect Areas loaded");
+      onLoad && onLoad();
+    }
+  }, [status]);
+  const selectArea = (newId) => {
+    currentAreaRef.current = newId;
+    setCurrentArea(newId);
+  };
+  const deleteArea = (areaId) => {
+    let newAreas = [];
+    setAreas((lastAreas) => {
+      newAreas = [...lastAreas];
+      newAreas = lastAreas.filter((area) => area.id !== areaId);
+      return newAreas;
+    });
+    if (currentAreaRef.current === areaId) {
+      if (newAreas.length > 0) {
+        selectArea(newAreas[0].id);
+      } else {
+        selectArea("");
+      }
+    }
+    if (activeAreasNetwork) {
+      networkOperation({
+        method: "DELETE",
+        endPoint: `areas/${areaId}`,
+        parms: {},
+        toastSuccess: false,
+        toastError: false
+      });
+    }
+  };
+  const setAreaRef = (areaId, ref) => {
+    console.log("setAreaRef", areaRefs.current[areaId] === ref, areaRefs.current[areaId]?.addWindow === ref?.addWindow, JSON.stringify(areaRefs.current[areaId]) === JSON.stringify(ref), areaRefs.current[areaId], ref);
+    if (areaRefs.current[areaId] !== ref) {
+      areaRefs.current[areaId] = ref;
+    }
+  };
+  return /* @__PURE__ */ jsx(AreasContext.Provider, {
+    value: {
+      status,
+      activeAreasNetwork,
+      areas,
+      currentArea,
+      addArea,
+      deleteArea,
+      selectArea,
+      setAreaRef
+    },
+    children
+  });
+}
+export {
+  AreasContext as A,
+  AreasProvider as a
+};

package/dist/components/areas/contexts/DynamicMFParmsContext/index.668bc2e2.js

@@ -0,0 +1,17 @@
+import { createContext } from "react";
+import { jsx } from "react/jsx-runtime";
+const DynamicMFParmsContext = createContext(null);
+function DynamicMFParmsProvider(props) {
+  const {
+    children,
+    ...other
+  } = props;
+  return /* @__PURE__ */ jsx(DynamicMFParmsContext.Provider, {
+    value: other,
+    children
+  });
+}
+export {
+  DynamicMFParmsProvider as D,
+  DynamicMFParmsContext as a
+};

package/dist/components/areas/contexts/index.f9196fb2.js

@@ -0,0 +1 @@
+import "./AreasContext/index.cd8e4bee.js";

package/dist/components/areas/hooks/useArea/index.9b85ce24.js

@@ -0,0 +1,19 @@
+import { useContext } from "react";
+import { A as AreasContext } from "../../contexts/AreasContext/index.cd8e4bee.js";
+import { a as AreaContext } from "../../contexts/AreaContext/index.4894cf23.js";
+function useAreas() {
+  const context = useContext(AreasContext);
+  if (!context)
+    throw new Error("useAreas context must be use inside AreasContext");
+  return context;
+}
+const useArea = () => {
+  const context = useContext(AreaContext);
+  if (!context)
+    throw new Error("useArea context must be use inside AreaContext");
+  return context;
+};
+export {
+  useArea as a,
+  useAreas as u
+};

package/dist/components/areas/hooks/useDynamicMFParameters/index.e6a44ae3.js

@@ -0,0 +1,11 @@
+import { useContext } from "react";
+import { a as DynamicMFParmsContext } from "../../contexts/DynamicMFParmsContext/index.668bc2e2.js";
+const useDynamicMFParameters = () => {
+  const context = useContext(DynamicMFParmsContext);
+  if (!context)
+    throw new Error("useDynamicMFParameters context must be use inside DynamicMFParmsContext");
+  return context;
+};
+export {
+  useDynamicMFParameters as u
+};