@m4l/components 7.0.0 → 7.1.2

package/components/areas/contexts/AreasContext/store.js

@@ -0,0 +1,939 @@
+import { createStore } from "zustand";
+import { devtools } from "zustand/middleware";
+import { immer } from "zustand/middleware/immer";
+import { u as useAreasViewerUtilityClasses } from "../../components/AreasViewer/classes/index.js";
+import { u as useAreasAdminUtilityClasses } from "../../components/AreasAdmin/classes/index.js";
+import { u as updateOwnerStateClasses, C as COOKIE_AREAS_ADMIN_CONTAINER_ID, b as COOKIE_AREAS_ADMIN_ID, D as DEFAULT_AREA, c as addArea, g as getSelectedAreaIdFromCookies, d as DEFAULT_WINDOW, a as RESPONSIVE_ROW_HEIGHTS, P as PADDING_GRIDLAYOUT, M as MARGIN_GRIDLAYOUT, N as NORMALIZED_COLS, e as deleteLayoutFromBreakPoints, f as COOKIE_WINDOWS, h as COOKIE_BREAKPOINT_LAYOUTS, i as DEBOUCED_SAVE_TIME, s as setColapsedLayoutBreakPoints, j as getDataFromResponse, k as getCookiesContainer } from "./helper.js";
+import { c as createDynamicMFStore } from "../DynamicMFParmsContext/store.js";
+import cloneDeep from "lodash.clonedeep";
+import debounce from "lodash.debounce";
+import { g as getCookie, s as setCookie, d as deleteCookie } from "../../../../helpers/cookies/cookies.js";
+import { d as addLayoutItemToBreakPoints, e as cloneLayouts } from "../../../GridLayout/subcomponents/Responsive/responsiveUtils.js";
+import { k as isEqualLayouts } from "../../../GridLayout/utils.js";
+const createAreasStore = (initProps) => {
+  const startProps = {
+    viwerClasses: useAreasViewerUtilityClasses(initProps.ownerState),
+    adminClasses: useAreasAdminUtilityClasses(initProps.ownerState),
+    currentAreaId: "",
+    currentModuleId: "",
+    areasIds: [],
+    hashAreas: {},
+    hashWindows: {},
+    hashWindowsModals: {},
+    windowsModals: [],
+    ...initProps
+  };
+  return createStore(
+    devtools(
+      immer((set, get) => ({
+        ...startProps,
+        areasActions: {
+          /**
+           * TODO: Documentar
+           */
+          init: () => {
+            if (get().ownerState.status !== "init") {
+              return;
+            }
+            if (!get().loadAreasFromNetwork) {
+              get().areasActions.addArea();
+              set((state) => {
+                state.ownerState.status = "loaded";
+                updateOwnerStateClasses(state);
+              });
+              return;
+            }
+            set((state) => {
+              state.ownerState.status = "loading";
+              updateOwnerStateClasses(state);
+            });
+            const cookiePromise = getCookie({
+              networkOperation: get().networkOperation,
+              params: {
+                f: [
+                  { n: "container_id", o: "e", o1: COOKIE_AREAS_ADMIN_CONTAINER_ID },
+                  { n: "id", o: "e", o1: COOKIE_AREAS_ADMIN_ID }
+                ]
+              }
+            });
+            const areasPromise = get().networkOperation({
+              method: "GET",
+              endPoint: `areas`,
+              parms: {},
+              toastSuccess: false
+            });
+            let selectedAreaIdCookie;
+            Promise.allSettled([areasPromise, cookiePromise]).then(([areasResponse, cookieResponse]) => {
+              if (areasResponse?.status === "fulfilled") {
+                const areasData = areasResponse?.value?.data;
+                set((state) => {
+                  if (areasData && Array.isArray(areasData) && areasData.length > 0) {
+                    for (let i = 0; i < areasData.length; i++) {
+                      const newArea = {
+                        ...DEFAULT_AREA,
+                        ...areasData[i],
+                        loadWindows: true
+                        //Se indica que si se carguen las ventas debido a que viene de la API
+                      };
+                      state.hashAreas[newArea.id] = newArea;
+                      state.areasIds.push(newArea.id);
+                    }
+                  } else {
+                    addArea(state);
+                  }
+                });
+              }
+              if (cookieResponse.status === "fulfilled") {
+                selectedAreaIdCookie = getSelectedAreaIdFromCookies(cookieResponse?.value);
+              }
+            }).finally(() => {
+              set((state) => {
+                state.ownerState.status = "loaded";
+                updateOwnerStateClasses(state);
+              });
+              if (get().areasIds.length > 0 && get().currentAreaId === "") {
+                const selectedAreaId = selectedAreaIdCookie && get().areasIds?.includes?.(selectedAreaIdCookie) ? selectedAreaIdCookie : get().areasIds[0];
+                get().areasActions.selectArea(selectedAreaId);
+              }
+            });
+          },
+          /**
+           * TODO: Documentar
+           */
+          addArea: () => {
+            let newId = "";
+            set((state) => {
+              newId = addArea(state);
+            });
+            get().areasActions.selectArea(newId);
+            return newId;
+          },
+          /**
+           * TODO: Documentar
+           */
+          editArea: (areaId, newName) => {
+            set((state) => {
+              if (state.hashAreas[areaId]) {
+                state.hashAreas[areaId].name = newName;
+                if (state.loadAreasFromNetwork) {
+                  state.networkOperation({
+                    method: "PATCH",
+                    endPoint: `areas/${areaId}`,
+                    data: { name: newName },
+                    toastSuccess: false,
+                    toastError: false
+                  });
+                }
+              }
+            });
+          },
+          /**
+           * TODO: Documentar
+           */
+          deleteArea: (areaId) => {
+            let selectNewAreaId = "";
+            set((state) => {
+              const ha = state.hashAreas[areaId];
+              if (!ha || state.areasIds.length < 2) {
+                return;
+              }
+              const removeIndex = state.areasIds.indexOf(areaId);
+              if (removeIndex > -1) {
+                for (const key in state.hashWindows) {
+                  if (state.hashWindows[key].areaId === areaId) {
+                    delete state.hashWindows[key];
+                  }
+                }
+                state.areasIds.splice(removeIndex, 1);
+                delete state.hashAreas[areaId];
+              }
+              if (state.currentAreaId === areaId) {
+                selectNewAreaId = state.areasIds[0];
+              }
+              if (state.loadAreasFromNetwork) {
+                state.networkOperation({
+                  method: "DELETE",
+                  endPoint: `areas/${areaId}`,
+                  parms: {},
+                  toastSuccess: false,
+                  toastError: false
+                });
+              }
+            });
+            if (selectNewAreaId) {
+              get().areasActions.selectArea(selectNewAreaId);
+            }
+          },
+          /**
+           * TODO: Documentar
+           */
+          selectArea: (areaId) => {
+            set((state) => {
+              state.currentAreaId = areaId;
+              if (state.hashAreas[areaId].currentLayoutId) {
+                state.currentModuleId = state.hashWindows[state.hashAreas[areaId].currentLayoutId].moduleId;
+              } else {
+                state.currentModuleId = "";
+              }
+            });
+            if (get().hashAreas[areaId].status === "init") {
+              if (get().hashAreas[areaId].loadWindows) {
+                get().areaActions.loadWindowsFromApi(areaId);
+              } else {
+                set((state) => {
+                  state.hashAreas[areaId].status = "loaded";
+                });
+              }
+            }
+            if (get().hashAreas[areaId].maximizedId !== void 0) ;
+            setCookie({
+              networkOperation: get().networkOperation,
+              endPoint: `${COOKIE_AREAS_ADMIN_CONTAINER_ID}/${COOKIE_AREAS_ADMIN_ID}`,
+              value: { selectedAreaId: areaId }
+            });
+          },
+          /**
+           * TODO: Documentar
+           */
+          setHandlerGetLabel: (newHandler) => {
+            set((state) => {
+              state.getLabel = newHandler;
+            });
+          },
+          /**
+           * TODO: Documentar
+           */
+          setExternalState: (newExternalState) => {
+            set((state) => {
+              state.ownerState = { ...state.ownerState, ...newExternalState };
+              updateOwnerStateClasses(state);
+            });
+          }
+        },
+        areaActions: {
+          /**
+           * TODO: Documentar
+           */
+          addWindow: (newWindowProps) => {
+            const windowId = `${get().currentAreaId}_window_${(/* @__PURE__ */ new Date()).getTime()}_${(Math.random() * 1e3).toFixed(0)}`;
+            if (newWindowProps.emergeType === "layout" || newWindowProps.emergeType === "popup") {
+              get().areaActions.addLayout(get().currentAreaId, windowId, newWindowProps);
+            } else if (newWindowProps.emergeType === "modal") {
+              get().areaActions.addWindowModal(get().currentAreaId, windowId, newWindowProps);
+            }
+          },
+          /**
+           * TODO: Documentar
+           */
+          addLayout: (areaId, windowId, newWindowProps) => {
+            let previousId = windowId;
+            const freeMove = newWindowProps.emergeType === "popup";
+            const newLayoutItem = {
+              ...newWindowProps.layoutProps,
+              i: windowId,
+              isDraggable: true,
+              isResizable: true,
+              freeMove
+            };
+            set((state) => {
+              const area = state.hashAreas[areaId];
+              if (!area) {
+                return;
+              }
+              if (newWindowProps.replaceMeId) {
+                for (let index = 0; index < area.layoutItemsIds.length; index++) {
+                  const key = area.layoutItemsIds[index];
+                  const WindoPopUp = state.hashWindows[key];
+                  if (WindoPopUp.replaceMeId === newWindowProps.replaceMeId) {
+                    previousId = key;
+                    WindoPopUp.dynamicMFStore.getState().actions.changeData(newWindowProps.dynamicParams);
+                    break;
+                  }
+                }
+              }
+              if (previousId === windowId) {
+                const dynamicMFStore = createDynamicMFStore({
+                  dynamicMFParameters: newWindowProps.dynamicParams,
+                  windowId
+                });
+                state.hashWindows[windowId] = {
+                  ...newWindowProps,
+                  areaId,
+                  windowId,
+                  onClose: (removeLayoutId) => {
+                    get().areaActions.closeLayout(areaId, removeLayoutId);
+                  },
+                  ...DEFAULT_WINDOW,
+                  dynamicMFStore
+                };
+                area.layoutItemsIds.push(windowId);
+                if (newWindowProps.emergeType === "layout") {
+                  area.currentLayoutId = windowId;
+                } else {
+                  area.currentPopUpId = windowId;
+                }
+                if (area.maximizedId) {
+                  area.maximizedId = windowId;
+                }
+                area.layouts = addLayoutItemToBreakPoints(
+                  area.layouts,
+                  newLayoutItem,
+                  NORMALIZED_COLS,
+                  [MARGIN_GRIDLAYOUT, MARGIN_GRIDLAYOUT],
+                  [PADDING_GRIDLAYOUT, PADDING_GRIDLAYOUT],
+                  RESPONSIVE_ROW_HEIGHTS,
+                  area.containerHeight,
+                  area.currentBreakpoint
+                );
+                if (area.currentBreakpoint === "xxs") {
+                  area.maximizedId = windowId;
+                }
+              }
+            });
+            get().areaActions.saveLayouts(areaId);
+            get().areaActions.bouncedSaveBreakpointsLayouts(areaId);
+          },
+          /**
+           * TODO: Documentar
+           */
+          closeLayout: (areaId, removeLayoutId) => {
+            set((state) => {
+              const area = state.hashAreas[areaId];
+              if (!area) {
+                return;
+              }
+              const removeIndex = area.layoutItemsIds.indexOf(removeLayoutId);
+              if (removeIndex > -1) {
+                area.layoutItemsIds.splice(removeIndex, 1);
+              }
+              deleteLayoutFromBreakPoints(area, removeLayoutId);
+              delete state.hashWindows[removeLayoutId];
+            });
+            get().areaActions.saveLayouts(areaId);
+            if (get().hashAreas[areaId].maximizedId === removeLayoutId) {
+              get().areaActions.maximizeLayout(areaId);
+            }
+            for (let index = 0; index < get().hashAreas[areaId].layoutItemsIds.length; index++) {
+              const layoutItemId = get().hashAreas[areaId].layoutItemsIds[index];
+              const layoutItem = get().hashWindows[layoutItemId];
+              if (layoutItem.parentLayoutId === removeLayoutId) {
+                get().areaActions.closeLayout(areaId, layoutItem.windowId);
+              }
+            }
+          },
+          /**
+           * TODO: Documentar
+           */
+          saveLayouts: (areaId) => {
+            let nrKeys = 0;
+            const area = get().hashAreas[areaId];
+            if (!area) {
+              return;
+            }
+            const saveObjetc = {};
+            for (let index = 0; index < area.layoutItemsIds.length; index++) {
+              const key = area.layoutItemsIds[index];
+              if (get().hashWindows[key] && get().hashWindows[key].winType === "microfrontend") {
+                const element = get().hashWindows[key];
+                const hasPropsToSave = {
+                  winType: true,
+                  emergeType: true,
+                  title: true,
+                  url_icon: true,
+                  windowOptions: true,
+                  // layoutProps: false,
+                  moduleId: true,
+                  windowId: true,
+                  mfProps: true
+                };
+                const newElement = {};
+                for (const keyToSave in hasPropsToSave) {
+                  newElement[keyToSave] = element[keyToSave];
+                }
+                saveObjetc[key] = newElement;
+                nrKeys++;
+              }
+            }
+            if (nrKeys > 0) {
+              setCookie({
+                networkOperation: get().networkOperation,
+                endPoint: `${area.id}/${COOKIE_WINDOWS}`,
+                value: saveObjetc
+              });
+            } else {
+              deleteCookie({
+                networkOperation: get().networkOperation,
+                data: { f: [{ n: "container_id", o: "c", o1: area.id }] }
+              });
+            }
+          },
+          /**
+           * TODO: Documentar
+           */
+          closeWindowModal: (removeModalId) => {
+            set((state) => {
+              const removeIndex = state.windowsModals.findIndex((w) => w === removeModalId);
+              if (removeIndex > -1) {
+                state.windowsModals.splice(removeIndex, 1);
+              }
+              delete state.hashWindows[removeModalId];
+              delete state.hashWindowsModals[removeModalId];
+            });
+          },
+          /**
+           * TODO: Documentar
+           */
+          addWindowModal: (areaId, windowId, newWindowModalProps) => {
+            set((state) => {
+              const dynamicMFStore = createDynamicMFStore({
+                dynamicMFParameters: newWindowModalProps.dynamicParams,
+                windowId
+              });
+              state.windowsModals.push(windowId);
+              state.hashWindowsModals[windowId] = {
+                ...newWindowModalProps,
+                areaId,
+                windowId,
+                ...DEFAULT_WINDOW,
+                onClose: get().areaActions.closeWindowModal,
+                dynamicMFStore
+              };
+              state.hashWindows[windowId] = state.hashWindowsModals[windowId];
+            });
+          },
+          bouncedSaveBreakpointsLayouts: debounce(
+            (areaId) => {
+              const purgedLayouts = {
+                ...get().hashAreas[areaId].layouts
+              };
+              const finalLayouts = {};
+              for (const key in purgedLayouts) {
+                const element = purgedLayouts[key];
+                purgedLayouts[key] = element.filter((l) => {
+                  if (l.i === "none") {
+                    return false;
+                  }
+                  if (get().hashAreas[areaId].layoutItemsIds.indexOf(l.i) > -1) {
+                    return true;
+                  }
+                  return false;
+                });
+                if (purgedLayouts[key].length > 0) {
+                  finalLayouts[key] = purgedLayouts[key];
+                }
+              }
+              if (Object.keys(finalLayouts).length > 0) {
+                setCookie({
+                  networkOperation: get().networkOperation,
+                  endPoint: `${get().hashAreas[areaId].id}/${COOKIE_BREAKPOINT_LAYOUTS}`,
+                  value: finalLayouts
+                });
+              }
+            },
+            DEBOUCED_SAVE_TIME,
+            {
+              leading: true,
+              trailing: true
+            }
+          ),
+          /**
+           * TODO: Documentar
+           */
+          onBreakpointsLayoutsChange: (areaId, _currentLayout, newAllLayouts) => {
+            if (!isEqualLayouts(get().hashAreas[areaId].layouts, newAllLayouts)) {
+              set((state) => {
+                state.hashAreas[areaId].layouts = cloneLayouts(newAllLayouts);
+              });
+              if (!get().hashAreas[areaId].maximizedId) {
+                get().areaActions.bouncedSaveBreakpointsLayouts(areaId);
+              }
+            }
+          },
+          /**
+           * TODO: Documentar
+           */
+          onContainerChange: (areaId, e) => {
+            set((state) => {
+              state.hashAreas[areaId].containerHeight = e.containerHeight;
+              state.hashAreas[areaId].currentBreakpoint = e.breakpoint;
+            });
+          },
+          /**
+           * TODO: Documentar
+           */
+          selectLayout: (areaId, layoutId) => {
+            set((state) => {
+              const area = state.hashAreas[areaId];
+              if (state.hashWindows[layoutId].emergeType === "layout") {
+                area.currentLayoutId = layoutId;
+                state.currentModuleId = state.hashWindows[layoutId].moduleId;
+                if (area.currentPopUpId !== "" && state.hashWindows[area.currentPopUpId]) {
+                  if (state.hashWindows[area.currentPopUpId].parentLayoutId !== layoutId) {
+                    area.currentPopUpId = "";
+                  }
+                }
+              } else {
+                state.hashAreas[areaId].currentPopUpId = layoutId;
+                const parentLayoutId = state.hashWindows[layoutId]?.parentLayoutId;
+                if (parentLayoutId && state.hashWindows[parentLayoutId]) {
+                  area.currentLayoutId = parentLayoutId;
+                  state.currentModuleId = state.hashWindows[parentLayoutId].moduleId;
+                } else {
+                  area.currentLayoutId = "";
+                  state.currentModuleId = "";
+                }
+              }
+            });
+          },
+          /**
+           * TODO: Documentar
+           */
+          unColapseLayoutItem: (areaId, layoutId) => {
+            set((state) => {
+              setColapsedLayoutBreakPoints(state.hashAreas[areaId], layoutId, false);
+            });
+          },
+          /**
+           * TODO: Documentar
+           */
+          colapseLayoutItem: (areaId, layoutId) => {
+            if (!get().hashAreas[areaId].maximizedId && get().hashWindows[layoutId]) {
+              set((state) => {
+                setColapsedLayoutBreakPoints(state.hashAreas[areaId], layoutId, true);
+              });
+            }
+          },
+          /**
+           * TODO: Documentar
+           */
+          maximizeLayout: (areaId, layoutId) => {
+            set((state) => {
+              const area = state.hashAreas[areaId];
+              if (!area) {
+                return;
+              }
+              area.maximizedId = layoutId;
+              const index = area.layouts["xxs"]?.findIndex((li) => li.i === area.maximizedId);
+              if (index !== void 0 && index > -1 && layoutId && state.hashWindows[layoutId].emergeType === "popup") {
+                area.layouts["xxs"][index].visible = true;
+                area.layouts["xxs"][index].colapsed = false;
+              }
+            });
+            if (layoutId) {
+              get().areaActions.selectLayout(areaId, layoutId);
+            }
+          },
+          /**
+           * TODO: Documentar
+           */
+          normalizeLayouts: (areaId) => {
+            set((state) => {
+              const area = state.hashAreas[areaId];
+              if (!area) {
+                return;
+              }
+              if (area.maximizedId) {
+                const index = area.layouts["xxs"]?.findIndex((li) => li.i === area.maximizedId);
+                if (index !== void 0 && index > -1 && state.hashWindows[area.maximizedId].emergeType === "popup") {
+                  area.layouts["xxs"][index].visible = false;
+                }
+              }
+              area.maximizedId = void 0;
+            });
+          },
+          /**
+           * TODO: Documentar
+           */
+          loadWindowsFromApi: (areaId) => {
+            const area = get().hashAreas[areaId];
+            if (!area) {
+              return;
+            }
+            if (area.status !== "init") {
+              return;
+            }
+            if (!get().loadAreasFromNetwork || !area.loadWindows) {
+              set((state) => {
+                state.hashAreas[areaId].status = "loaded";
+              });
+              return;
+            }
+            set((state) => {
+              state.hashAreas[areaId].status = "loading";
+            });
+            getCookie({
+              networkOperation: get().networkOperation,
+              params: { f: [{ n: "container_id", o: "e", o1: areaId }] }
+            }).then((response) => {
+              const area2 = get().hashAreas[areaId];
+              if (!area2) {
+                return;
+              }
+              set((state) => {
+                const area3 = state.hashAreas[areaId];
+                const { newBreakPointsLayouts, newHashLayoutItems } = getDataFromResponse(
+                  response.data,
+                  state,
+                  areaId
+                );
+                area3.layouts = newBreakPointsLayouts;
+                area3.layoutItemsIds = newHashLayoutItems;
+                area3.status = "loaded";
+              });
+            }).catch((_response) => {
+              set((state) => {
+                state.hashAreas[areaId].status = "loaded";
+              });
+            });
+          }
+          // addWindowLayoutPendiente: (
+          //     areaId: string,
+          //     windowId: string,
+          //     newWindow: NewLayoutMagnetizableProps,
+          // ) => {
+          //     const newLayoutItem: WinLayoutItem = {
+          //         ...newWindow.layoutProps,
+          //         i: windowId,
+          //         isDraggable: true,
+          //         isResizable: true,
+          //         winType: newWindow.winType,
+          //         freeMove: false,
+          //     };
+          //     set(state => {
+          //         const area = state.hashAreas[areaId];
+          //         if (!area) {
+          //             return;
+          //         }
+          //         const dynamicMFStore = createDynamicMFStore({
+          //             dynamicMFParameters: newWindow.dynamicParams,
+          //             windowId,
+          //         });
+          //         area.windowsLayouts.push(newLayoutItem);
+          //         area.hashWindowsLayouts[windowId] = {
+          //             ...newWindow,
+          //             areaId,
+          //             windowId,
+          //             emergeType: 'layout',
+          //             onClose: (removeLayoutId: string) => {
+          //                 get().areaActions.closeWindowLayout(areaId, removeLayoutId);
+          //             },
+          //             ...DEFAULT_WINDOW,
+          //             dynamicMFStore,
+          //         };
+          //         area.baseResponsivelayoutItems.push({ i: windowId });
+          //         //Agregar la ventana al hash general de todas las ventanas
+          //         state.hashWindows[windowId] = area.hashWindowsLayouts[windowId];
+          //         setAddBreakPoints(area, newLayoutItem);
+          //     });
+          //     get().areaActions.selectLayout(areaId, windowId);
+          //     if (
+          //         get().hashAreas[areaId].viewMode === 'single' ||
+          //         newWindow?.openType === 'maximized'
+          //     ) {
+          //         get().areaActions.maximizeLayout(areaId, windowId);
+          //     }
+          //     get().areaActions.saveLayouts(areaId);
+          //     get().areaActions.bouncedSaveBreakpointsLayouts(areaId);
+          // },
+          // closeLayout: (areaId: string, removePopUpId: string) => {
+          //     set(state => {
+          //         const area = state.hashAreas[areaId];
+          //         if (!area) {
+          //             return;
+          //         }
+          //         const removeIndex = area.windowsPopUps.findIndex(
+          //             wpId => wpId === removePopUpId,
+          //         );
+          //         if (removeIndex > -1) {
+          //             area.windowsPopUps.splice(removeIndex, 1);
+          //         }
+          //         delete area.hashWindowsPopups[removePopUpId];
+          //         delete state.hashWindows[removePopUpId];
+          //     });
+          // },
+          // selectWindowPopUp: (areaId: string, popUpId: string) => {
+          //     set(state => {
+          //         state.hashAreas[areaId].zPopUpIndex++;
+          //         state.hashAreas[areaId].currentPopUpId = popUpId;
+          //         state.hashAreas[areaId].zPopUpIndex++;
+          //         state.hashAreas[areaId].currentPopUpId = popUpId;
+          //         state.hashAreas[areaId].hashWindowsPopups[popUpId].zIndex =
+          //             state.hashAreas[areaId].zPopUpIndex;
+          //         //Seleccionar el layout padre si lo tiene
+          //         if (
+          //             state.hashAreas[areaId].hashWindowsPopups[popUpId].parentLayoutId &&
+          //             state.hashAreas[areaId].hashWindowsPopups[popUpId]
+          //                 .parentLayoutId !== ''
+          //         ) {
+          //             state.hashAreas[areaId].currentLayoutId =
+          //                 state.hashAreas[areaId].hashWindowsPopups[
+          //                     popUpId
+          //                 ].parentLayoutId;
+          //         } else {
+          //             state.hashAreas[areaId].currentLayoutId = '';
+          //         }
+          //     });
+          //     //Enfocar el componente despues de la renderización.
+          //     setTimeout(() => {
+          //         //Asegurar visibilidad si es un reemplazo
+          //         const container = document.getElementsByClassName(
+          //             `${areasViewerClasses.areaGridLayoutPanelContainer}-${areaId}`,
+          //         )[0];
+          //         const element = document.getElementsByClassName(
+          //             `${areasViewerClasses.windowPopupRoot}-${popUpId}`,
+          //         )[0]; //`M4L_WindowPopUp_${popUpId}`,
+          //         //TODO: Proteeccion de los vectores
+          //         if (element && container) {
+          //             const { top, left } = element.getBoundingClientRect();
+          //             const { top: containerTop, left: containerLeft } =
+          //                 container.getBoundingClientRect();
+          //             container.scrollTop = container.scrollTop + top - containerTop;
+          //             container.scrollLeft = container.scrollLeft + left - containerLeft;
+          //         }
+          //     }, 100);
+          //     // windowsPopUps.findIndex(wp => wp.container_id === lookForThisId) > -1) {
+          //     // setSelectedWindow(newSeletectedId);
+          // },
+          // resizeMaximixedLayout: (areaId: string) => {
+          //     set(state => {
+          //         const area = state.hashAreas[areaId];
+          //         if (!area) return;
+          //         if (areaId !== state.currentAreaId) {
+          //             return;
+          //         }
+          //         if (area.viewMode === 'single' && area.currentLayoutId !== '') {
+          //             console.log('Rezigning', areaId);
+          //             const layoutsBreakPoints = area.layouts;
+          //             const container = document.getElementsByClassName(
+          //                 `${areasViewerClasses.areaGridLayout}-${area.id}`,
+          //             )[0];
+          //             window.dispatchEvent(new Event('resize'));
+          //             for (const key in layoutsBreakPoints) {
+          //                 const layoutBreakpoint = layoutsBreakPoints[key];
+          //                 if (layoutBreakpoint) {
+          //                     const clientHeight = container.clientHeight;
+          //                     //Formula que sale de despejar de acuerdo al grid layout en el codigo fuente: heigthpx = colOrRowSize * gridUnits + Math.max(0, gridUnits - 1) * marginPx
+          //                     const heigthUnits =
+          //                         (clientHeight +
+          //                             MARGIN_GRIDLAYOUT -
+          //                             2 * PADDING_GRIDLAYOUT) /
+          //                         (ROW_HEIGTH_GRIDLAYOUT + MARGIN_GRIDLAYOUT);
+          //                     for (
+          //                         let index = 0;
+          //                         index < layoutBreakpoint.length;
+          //                         index++
+          //                     ) {
+          //                         const l = layoutBreakpoint[index];
+          //                         if (l.i === area.currentLayoutId) {
+          //                             l.h = heigthUnits;
+          //                             l.maxH = heigthUnits;
+          //                         }
+          //                     }
+          //                 }
+          //             }
+          //         }
+          //         //TODO: Corregir cuando arranca en celular,
+          //         // no se han cargado las ventanas y no se puede encontrar
+          //         // Adicionalmente no se ha posicionado el panelWindows, y calcula
+          //         // state.cols = MAXIMIZED_COLS;
+          //     });
+          // },
+        },
+        windowActions: {
+          /**
+           * TODO: Documentar
+           */
+          setActions: (windowId, newActions, version) => {
+            set((state) => {
+              if (state.hashWindows[windowId]) {
+                state.hashWindows[windowId].moduleActions = cloneDeep(newActions);
+                state.hashWindows[windowId].version = version;
+              }
+            });
+          },
+          /**
+           * TODO: Documentar
+           */
+          getCookie: (windowId, id) => {
+            if (get().hashWindows[windowId]) {
+              return get().hashWindows[windowId].cookies.windowCookies[id] || get().hashWindows[windowId].cookies.moduleCookies[id];
+            }
+            return {};
+          },
+          /**
+           * TODO: Documentar
+           */
+          getCookies: (windowId, type) => {
+            if (get().hashWindows[windowId]) {
+              if (type === "window") {
+                return get().hashWindows[windowId].cookies.windowCookies;
+              } else {
+                return get().hashWindows[windowId].cookies.moduleCookies;
+              }
+            }
+            return {};
+          },
+          /**
+           * TODO: Documentar
+           */
+          setCookie: (windowId, id, type, cookie) => {
+            set((state) => {
+              const hW = state.hashWindows[windowId];
+              if (hW) {
+                setCookie({
+                  networkOperation: get().networkOperation,
+                  endPoint: `${type === "module" ? hW.moduleId : windowId}/${id}`,
+                  value: cookie
+                });
+                if (type === "window") {
+                  hW.cookies.windowCookies[id] = cookie;
+                } else {
+                  hW.cookies.moduleCookies[id] = cookie;
+                }
+              }
+            });
+          },
+          /**
+           * TODO: Documentar
+           */
+          close: (windowId) => {
+            const hW = get().hashWindows[windowId];
+            if (hW) {
+              const onClose = hW.onClose;
+              if (onClose) {
+                onClose(hW.windowId);
+              }
+            }
+          },
+          /**
+           * TODO: Documentar
+           */
+          startProgress: (windowId) => {
+            set((state) => {
+              if (state.hashWindows[windowId]) {
+                state.hashWindows[windowId].loading = true;
+              }
+            });
+          },
+          /**
+           * TODO: Documentar
+           */
+          stopProgress: (windowId) => {
+            set((state) => {
+              if (state.hashWindows[windowId]) {
+                state.hashWindows[windowId].loading = false;
+              }
+            });
+          },
+          /**
+           * TODO: Documentar
+           */
+          loadCookiesFromApi: (windowId) => {
+            const hW = get().hashWindows[windowId];
+            if (hW) {
+              if (hW.status === "init") {
+                set((state) => {
+                  state.hashWindows[windowId].status = "loading";
+                });
+                getCookie({
+                  networkOperation: get().networkOperation,
+                  params: {
+                    f: [
+                      { n: "container_id", o: "e", o1: hW.windowId },
+                      { n: "container_id", o: "e", o1: hW.moduleId }
+                    ]
+                  }
+                }).then((response) => {
+                  set((state) => {
+                    const hWs = state.hashWindows[windowId];
+                    if (hWs) {
+                      hWs.cookies.moduleCookies = getCookiesContainer(
+                        response.data,
+                        hWs.moduleId
+                      );
+                      hWs.cookies.windowCookies = getCookiesContainer(response.data, windowId);
+                      hWs.status = "loaded";
+                    }
+                  });
+                }).catch((_response) => {
+                  set((state) => {
+                    if (state.hashWindows[windowId]) {
+                      state.hashWindows[windowId].status = "loaded";
+                    }
+                  });
+                });
+              }
+            }
+          },
+          /**
+           * TODO: Documentar
+           */
+          saveModuleCookies: (windowId) => {
+            const hW = get().hashWindows[windowId];
+            if (hW) {
+              for (const key in hW.cookies.windowCookies) {
+                const cookie = hW.cookies.windowCookies[key];
+                setCookie({
+                  networkOperation: get().networkOperation,
+                  endPoint: `${hW.moduleId}/${key}`,
+                  value: cookie
+                });
+              }
+            }
+          },
+          /**
+           * TODO: Documentar
+           */
+          resetModuleCookies: (windowId) => {
+            const hW = get().hashWindows[windowId];
+            if (hW) {
+              deleteCookie({
+                networkOperation: get().networkOperation,
+                data: {
+                  f: [
+                    {
+                      n: "id",
+                      o: "c",
+                      o1: hW.moduleId
+                    }
+                  ]
+                }
+              });
+            }
+          },
+          /**
+           * TODO: Documentar
+           */
+          setFnQueryClose: (windowId, fnQueryClose) => {
+            set((state) => {
+              state.hashWindows[windowId].fnQueryClose = fnQueryClose;
+            });
+          },
+          /**
+           * TODO: Documentar
+           */
+          setWindowTitle: (windowId, title) => {
+            set((state) => {
+              state.hashWindows[windowId].title = title;
+            });
+          }
+        },
+        areaAdminActions: {
+          /**
+           * TODO: Documentar
+           */
+          setFocus: (newValue) => {
+            set((state) => {
+              state.ownerState = { ...state.ownerState, focus: newValue };
+              updateOwnerStateClasses(state);
+            });
+          }
+        }
+      })),
+      { name: `Areas store` }
+    )
+  );
+};
+export {
+  createAreasStore as c
+};