@m4l/components 7.1.2 → 7.2.0

package/src/components/areas/contexts/AreasContext/store.ts

@@ -0,0 +1,1339 @@
+import { createStore } from 'zustand';
+import { devtools } from 'zustand/middleware';
+import { immer } from 'zustand/middleware/immer';
+
+import type { GetLabelType } from '@m4l/core';
+
+import type {
+  Area,
+  AreasState,
+  AreasStateWithActions,
+  ExternalOwnerState,
+  InitialAreasStoreProps,
+} from './types';
+
+// dictionary
+
+import { useAreasViewerUtilityClasses } from '../../components/AreasViewer/classes';
+import { useAreasAdminUtilityClasses } from '../../components/AreasAdmin/classes';
+import {
+  PADDING_GRIDLAYOUT,
+  COOKIE_BREAKPOINT_LAYOUTS,
+  COOKIE_WINDOWS,
+  DEBOUCED_SAVE_TIME,
+  MARGIN_GRIDLAYOUT,
+  RESPONSIVE_ROW_HEIGHTS,
+  addArea,
+  getDataFromResponse,
+  updateOwnerStateClasses,
+  DEFAULT_AREA,
+  getCookiesContainer,
+  deleteLayoutFromBreakPoints,
+  DEFAULT_WINDOW,
+  NORMALIZED_COLS,
+  setColapsedLayoutBreakPoints,
+  COOKIE_AREAS_ADMIN_CONTAINER_ID,
+  COOKIE_AREAS_ADMIN_ID,
+  getSelectedAreaIdFromCookies,
+} from './helper';
+import {
+  CookieType,
+  AreaWindowAction,
+  NewModalProps,
+  NewLayoutMoveableProps,
+  NewWindowProps,
+  NewLayoutMagnetizableProps,
+} from '../../types';
+import { createDynamicMFStore } from '../DynamicMFParmsContext/store';
+import cloneDeep from 'lodash.clonedeep';
+import debounce from 'lodash.debounce';
+import {
+  isEqualLayouts,
+  cloneLayouts,
+  addLayoutItemToBreakPoints,
+  ContainerChangeEvent,
+  Layout,
+  LayoutItem,
+  Layouts,
+} from '../../../GridLayout';
+import { deleteCookie, getCookie, setCookie } from '../../../../helpers/cookies';
+
+/**
+ * Crea el Store, por defecto inicia en estado 'init'
+ * @param initProps propiedades iniciales del store
+ * @returns
+ */
+export const createAreasStore = (initProps: InitialAreasStoreProps) => {
+  const startProps: AreasState = {
+    viwerClasses: useAreasViewerUtilityClasses(initProps.ownerState),
+    adminClasses: useAreasAdminUtilityClasses(initProps.ownerState),
+    currentAreaId: '',
+    currentModuleId: '',
+    areasIds: [],
+    hashAreas: {},
+    hashWindows: {},
+    hashWindowsModals: {},
+    windowsModals: [],
+    ...initProps,
+  };
+
+  return createStore<
+    AreasStateWithActions,
+    [['zustand/devtools', never], ['zustand/immer', never]]
+  >(
+    devtools(
+      immer((set, get) => ({
+        ...startProps,
+
+        areasActions: {
+          /**
+           * TODO: Documentar
+           */
+          init: () => {
+            /**
+             * Si ya fue llamado el init, retorna
+             * Es un caso que no veo posible.
+             */
+            if (get().ownerState.status !== 'init') {
+              return;
+            }
+
+            /**
+             * Si estaá desativado el uso de la red para descargar las areas de trabajo normalmente en isolation.
+             */
+            if (!get().loadAreasFromNetwork) {
+              /** Agregar un area de trabajo en blanco */
+              get().areasActions.addArea();
+
+              /**
+               * Actualizar el estado global de carga a 'loaded'
+               */
+              set(state => {
+                state.ownerState.status = 'loaded';
+                updateOwnerStateClasses(state);
+              });
+
+              return;
+            }
+
+            /**
+             * Cargar las areas de trabajo direactamente de la API
+             */
+            set(state => {
+              /** Poner el estado loading para el css */
+              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: string | undefined;
+
+            Promise.allSettled([areasPromise, cookiePromise])
+              .then(([areasResponse, cookieResponse]) => {
+                /**
+                 * cuando retorne la data hacer el set nuevamentee
+                 * Importante: No se puede reusar el set de la parte de arriba, por la asincronia del proces
+                 */
+                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: Area = {
+                          ...DEFAULT_AREA,
+                          ...areasData[i],
+                          loadWindows: true, //Se indica que si se carguen las ventas debido a que viene de la API
+                        };
+                        //Actualiizar el hash de áreas con la nueva área cargada
+                        state.hashAreas[newArea.id] = newArea;
+                        //Agregar al vector de areas.
+                        state.areasIds.push(newArea.id);
+                      }
+                    } else {
+                      //En caso de alguna corrupción de la data o no vengan áreas.
+                      //Se agrega una por defecto.
+                      addArea(state);
+                    }
+                  });
+                }
+
+                // Resolver el area Id seleccionado de la cookie
+                if (cookieResponse.status === 'fulfilled') {
+                  selectedAreaIdCookie = getSelectedAreaIdFromCookies(cookieResponse?.value);
+                }
+              })
+              .finally(() => {
+                //Se crea un nuevo set para termina el cargado de areas
+                set(state => {
+                  state.ownerState.status = 'loaded';
+                  updateOwnerStateClasses(state);
+                });
+                //Seleccionar el area por defecto, si no está seleccionada
+                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: string, newName: string) => {
+            set(state => {
+              if (state.hashAreas[areaId]) {
+                /**
+                 *  Cambiar el store del area por el nuevo nombre
+                 */
+                state.hashAreas[areaId].name = newName;
+
+                /**
+                 * Actualizar el backend
+                 */
+                if (state.loadAreasFromNetwork) {
+                  state.networkOperation({
+                    method: 'PATCH',
+                    endPoint: `areas/${areaId}`,
+                    data: { name: newName },
+                    toastSuccess: false,
+                    toastError: false,
+                  });
+                }
+              }
+            });
+          },
+          /**
+           * TODO: Documentar
+           */
+          deleteArea: (areaId: string) => {
+            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) {
+                // Borrar las ventanas de hasWindows que pertenezcan al área a borrar
+                for (const key in state.hashWindows) {
+                  if (state.hashWindows[key].areaId === areaId) {
+                    delete state.hashWindows[key];
+                  }
+                }
+
+                //Borrar del vector de areas
+                state.areasIds.splice(removeIndex, 1);
+                delete state.hashAreas[areaId];
+              }
+
+              /**
+               * Almacenar el nuevo Id de la nueva selected area, si la que está borrando
+               * es la misma actual
+               */
+              if (state.currentAreaId === areaId) {
+                selectNewAreaId = state.areasIds[0];
+                // if (state.areasIds.length > 0) {
+                // } else {
+                //     state.currentAreaId = '';
+                // }
+              }
+              /**
+               * Si se trabaja con la red, borrar el area en el backend
+               */
+              if (state.loadAreasFromNetwork) {
+                state.networkOperation({
+                  method: 'DELETE',
+                  endPoint: `areas/${areaId}`,
+                  parms: {},
+                  toastSuccess: false,
+                  toastError: false,
+                });
+              }
+            });
+            /**
+             * Si no se borró la actual
+             */
+            if (selectNewAreaId) {
+              get().areasActions.selectArea(selectNewAreaId);
+            }
+          },
+          /**
+           * TODO: Documentar
+           */
+          selectArea: (areaId: string) => {
+            set(state => {
+              /**
+               * Cambia el area actual
+               */
+              state.currentAreaId = areaId;
+              /**
+               * Actualiza el currentModuleId por el layout seleccionado del area que está seleccionado.
+               */
+              if (state.hashAreas[areaId].currentLayoutId) {
+                state.currentModuleId =
+                  state.hashWindows[state.hashAreas[areaId].currentLayoutId].moduleId;
+              } else {
+                /**
+                 * Si no tiene ningun layout el area, deja el modulo vacio, para deseleccionar el SideBar
+                 */
+                state.currentModuleId = '';
+              }
+            });
+            /**
+             *  Cargar las ventans de la API si está habilitado
+             */
+            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 !== undefined) {
+              // get().areaActions.resizeMaximixedLayout(areaId);
+            }
+
+            setCookie({
+              networkOperation: get().networkOperation,
+              endPoint: `${COOKIE_AREAS_ADMIN_CONTAINER_ID}/${COOKIE_AREAS_ADMIN_ID}`,
+              value: { selectedAreaId: areaId },
+            });
+          },
+          /**
+           * TODO: Documentar
+           */
+          setHandlerGetLabel: (newHandler: GetLabelType) => {
+            set(state => {
+              state.getLabel = newHandler;
+            });
+          },
+          /**
+           * TODO: Documentar
+           */
+          setExternalState: (newExternalState: ExternalOwnerState) => {
+            set(state => {
+              state.ownerState = { ...state.ownerState, ...newExternalState };
+              updateOwnerStateClasses(state);
+            });
+          },
+        },
+
+        areaActions: {
+          /**
+           * TODO: Documentar
+           */
+          addWindow: (newWindowProps: NewWindowProps) => {
+            /* console.log('se ejecutó addWindow') */
+            // Identificador de instancia que se va a asociar al microfronted.
+            const windowId = `${get().currentAreaId}_window_${new Date().getTime()}_${(
+              Math.random() * 1000
+            ).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: string,
+            windowId: string,
+            newWindowProps: NewLayoutMagnetizableProps | NewLayoutMoveableProps,
+          ) => {
+            // Almacena una copia del valor del identificador de la instancia para microfrontend.
+            let previousId = windowId;
+            // Evalúa la modalidad de apertura para determinar si va a tener la capcidad de moverse libremente en el componente de áreas.
+            const freeMove: boolean = newWindowProps.emergeType === 'popup';
+
+            // Prepara el objeto de información que será usado como propiedad del componente GridLayout
+            const newLayoutItem: LayoutItem = {
+              ...newWindowProps.layoutProps,
+              i: windowId,
+              isDraggable: true,
+              isResizable: true,
+              freeMove,
+            };
+
+            // Set es una función de la librería de zustand que permite actualizar el estado almacenado del store.
+            set(state => {
+              // Se almacena una copia para el valor del área actual seleccionada.
+              const area = state.hashAreas[areaId];
+              // En caso de no existir un área seleccionada finaliza el proceso.
+              if (!area) {
+                return;
+              }
+
+              /* console.log('state data', state)
+                            console.log('area data', area.layoutItemsIds) */
+              // Evalúa si el objeto de proporcionado por el lanzamiento de la ventana contiene información para reemplazar el identificador.
+              if (newWindowProps.replaceMeId) {
+                // Itera sobre el listado de layouts asociados al área actual.
+                for (let index = 0; index < area.layoutItemsIds.length; index++) {
+                  // Captura el valor identificador del delayout correspondiente a la iteración.
+                  const key = area.layoutItemsIds[index];
+                  // Captura la colección de datos del layout seleccionado por key.
+                  const WindoPopUp = state.hashWindows[key];
+                  // Busca al menos una coincidencia para poder realizar el cambio de información.
+                  if (WindoPopUp.replaceMeId === newWindowProps.replaceMeId) {
+                    // Asigna el valor del identificador del layout en la itereación actual.
+                    previousId = key;
+                    // Ejecuta la acción de cambio de información por medio de dynamicMFStore almacenado en el objeto.
+                    WindoPopUp.dynamicMFStore
+                      .getState()
+                      .actions.changeData(newWindowProps.dynamicParams);
+                    // area.hashWindowsPopups[key].dynamicMFStore.setState(() => ({
+                    //     dynamicMFParameters: newWindowPopupProps.dynamicParams,
+                    // }));
+
+                    break;
+                  }
+                }
+              }
+
+              // Realiza una protección que garantiza que el valor del nuevo identificador del layout a cargar,  no se haya modificado por un proceso anterior.
+              if (previousId === windowId) {
+                // En caso de tratarse de un nuevo layout genera un store con las propiedades proporcionadas.
+                const dynamicMFStore = createDynamicMFStore({
+                  dynamicMFParameters: newWindowProps.dynamicParams,
+                  windowId,
+                });
+
+                // Crea el objeto del nuevo layout y agrega sus propiedades.
+                state.hashWindows[windowId] = {
+                  ...newWindowProps,
+                  areaId,
+                  windowId,
+                  onClose: (removeLayoutId: string) => {
+                    get().areaActions.closeLayout(areaId, removeLayoutId);
+                  },
+                  ...DEFAULT_WINDOW,
+                  dynamicMFStore,
+                };
+
+                // Agrega el nuevo elemento a la lista de layouts para el área actual.
+                area.layoutItemsIds.push(windowId);
+
+                // Evalúa según el tipo de modalidad de apertura donde agregar el indentificador para el layout actual.
+                if (newWindowProps.emergeType === 'layout') {
+                  area.currentLayoutId = windowId;
+                } else {
+                  area.currentPopUpId = windowId;
+                }
+                if (area.maximizedId) {
+                  area.maximizedId = windowId;
+                }
+
+                //  Agrega el valor de los breakpoints correspondientes al nuevo layout para le objeto de area seleccionado.
+                area.layouts = addLayoutItemToBreakPoints(
+                  area.layouts,
+                  newLayoutItem,
+                  NORMALIZED_COLS,
+                  [MARGIN_GRIDLAYOUT, MARGIN_GRIDLAYOUT],
+                  [PADDING_GRIDLAYOUT, PADDING_GRIDLAYOUT],
+                  RESPONSIVE_ROW_HEIGHTS,
+                  area.containerHeight,
+                  area.currentBreakpoint,
+                );
+
+                // Evalúa si el tamaño del dispositivo el celular para obligar al nuevo layout a estar maximizado.
+                if (area.currentBreakpoint === 'xxs') {
+                  area.maximizedId = windowId;
+                }
+              }
+            });
+
+            get().areaActions.saveLayouts(areaId);
+            get().areaActions.bouncedSaveBreakpointsLayouts(areaId);
+            // get().areaActions.selectLayout(areaId, windowId);
+          },
+
+          /**
+           * TODO: Documentar
+           */
+          closeLayout: (areaId: string, removeLayoutId: string) => {
+            //Borrar todos los que depenen del layout
+
+            set(state => {
+              const area = state.hashAreas[areaId];
+
+              if (!area) {
+                return;
+              }
+
+              //Remover layoutItem
+              const removeIndex = area.layoutItemsIds.indexOf(removeLayoutId);
+
+              if (removeIndex > -1) {
+                area.layoutItemsIds.splice(removeIndex, 1);
+              }
+              //Remover layoutItem
+
+              deleteLayoutFromBreakPoints(area, removeLayoutId);
+
+              //Agregar la ventana al hash general de todas las ventanas
+              delete state.hashWindows[removeLayoutId];
+              // delete area.hashLayoutItems[removeLayoutId];
+            });
+
+            get().areaActions.saveLayouts(areaId);
+            if (get().hashAreas[areaId].maximizedId === removeLayoutId) {
+              get().areaActions.maximizeLayout(areaId);
+            }
+
+            //Borrar todas las que dependen del layout
+            for (let index = 0; index < get().hashAreas[areaId].layoutItemsIds.length; index++) {
+              const layoutItemId = get().hashAreas[areaId].layoutItemsIds[index];
+              // for (const layoutItemId in get().hashAreas[areaId].hashLayoutItems) {
+              const layoutItem = get().hashWindows[layoutItemId];
+              if (layoutItem.parentLayoutId === removeLayoutId) {
+                get().areaActions.closeLayout(areaId, layoutItem.windowId);
+              }
+            }
+          },
+
+          /**
+           * TODO: Documentar
+           */
+          saveLayouts: (areaId: string) => {
+            let nrKeys = 0;
+            const area = get().hashAreas[areaId];
+
+            if (!area) {
+              return;
+            }
+
+            const saveObjetc: Record<string, any> = {};
+            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: Record<string, any> = {};
+                for (const keyToSave in hasPropsToSave) {
+                  newElement[keyToSave] = (element as any)[keyToSave];
+                }
+
+                saveObjetc[key] = newElement;
+                nrKeys++;
+              }
+            }
+
+            if (nrKeys > 0) {
+              setCookie({
+                networkOperation: get().networkOperation,
+                endPoint: `${area.id}/${COOKIE_WINDOWS}`,
+                value: saveObjetc,
+              });
+            } else {
+              // Borra todas las cookies asociadas al area de trabajo
+              deleteCookie({
+                networkOperation: get().networkOperation,
+                data: { f: [{ n: 'container_id', o: 'c', o1: area.id }] },
+              });
+            }
+          },
+          /**
+           * TODO: Documentar
+           */
+          closeWindowModal: (removeModalId: string) => {
+            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: string,
+            windowId: string,
+            newWindowModalProps: NewModalProps,
+          ) => {
+            set(state => {
+              const dynamicMFStore = createDynamicMFStore({
+                dynamicMFParameters: newWindowModalProps.dynamicParams,
+                windowId: 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: string) => {
+              const purgedLayouts = {
+                ...get().hashAreas[areaId].layouts,
+              };
+
+              const finalLayouts: Record<string, any> = {};
+
+              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; //Solo grabar elementos que estan en los layouts actuales
+                  }
+                  return false;
+                });
+
+                if (purgedLayouts[key].length > 0) {
+                  finalLayouts[key] = purgedLayouts[key];
+                }
+              }
+
+              if (Object.keys(finalLayouts).length > 0) {
+                //Si hay algo para guardar
+                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: string,
+            _currentLayout: Layout,
+            newAllLayouts: Layouts,
+          ) => {
+            /**
+             * //TODO: Implementar una variante de layouts "state.hashAreas[areaId].userLayouts" donde se apliquen todos los cambios que vaya haciendo el usuario,
+             *  en vez de usa la variable "state.hashAreas[areaId].layouts"
+             *  para evitar re-rendeerizar el GridLayout cuando es un cambio que el mismo reportó.
+             *  Cuando se agregue o se borre un item, se usa la copia "state.hashAreas[areaId].userLayouts" y
+             *  en ese momento si se actualiza el store que es reactivo "state.hashAreas[areaId].layouts"
+             *
+             */
+            if (!isEqualLayouts(get().hashAreas[areaId].layouts, newAllLayouts)) {
+              //console.log('onBreakpointsLayoutsChangeFired');
+              // console.log('onBreakpointsLayoutsChange', areaId, newAllLayouts);
+              set(state => {
+                state.hashAreas[areaId].layouts = cloneLayouts(newAllLayouts);
+              });
+
+              if (!get().hashAreas[areaId].maximizedId) {
+                get().areaActions.bouncedSaveBreakpointsLayouts(areaId);
+              }
+            }
+          },
+          /**
+           * TODO: Documentar
+           */
+          onContainerChange: (areaId: string, e: ContainerChangeEvent) => {
+            /* console.log(
+                            `onContainerChange [${e.containerWidth}, ${e.containerHeight}] Store`,
+                            areaId,
+                            e.breakpoint,
+                        ); */
+            set(state => {
+              state.hashAreas[areaId].containerHeight = e.containerHeight;
+              state.hashAreas[areaId].currentBreakpoint = e.breakpoint;
+            });
+          },
+          /**
+           * TODO: Documentar
+           */
+          selectLayout: (areaId: string, layoutId: string) => {
+            set(state => {
+              const area = state.hashAreas[areaId];
+
+              if (state.hashWindows[layoutId].emergeType === 'layout') {
+                //Selecciionar el layout
+
+                area.currentLayoutId = layoutId;
+                state.currentModuleId = state.hashWindows[layoutId].moduleId;
+
+                //Si el poup seleccionado es de otro modulo, quitarlo
+                if (area.currentPopUpId !== '' && state.hashWindows[area.currentPopUpId]) {
+                  if (state.hashWindows[area.currentPopUpId].parentLayoutId !== layoutId) {
+                    area.currentPopUpId = '';
+                  }
+                }
+              } else {
+                //Es un popup
+
+                state.hashAreas[areaId].currentPopUpId = layoutId;
+
+                //Seleccionar el layout padre si lo tiene
+                const parentLayoutId = state.hashWindows[layoutId]?.parentLayoutId;
+
+                if (parentLayoutId && state.hashWindows[parentLayoutId]) {
+                  //Si esta establecido el padre y existe.
+                  area.currentLayoutId = parentLayoutId;
+                  state.currentModuleId = state.hashWindows[parentLayoutId].moduleId;
+                } else {
+                  //De lo contrario desseleccionar el layout y el modulo
+                  area.currentLayoutId = '';
+                  state.currentModuleId = '';
+                }
+              }
+            });
+          },
+          /**
+           * TODO: Documentar
+           */
+          unColapseLayoutItem: (areaId: string, layoutId: string) => {
+            set(state => {
+              setColapsedLayoutBreakPoints(state.hashAreas[areaId], layoutId, false);
+
+              // state.hashWindows[layoutId].colapsed = false;
+            });
+            /*
+
+
+                        if (
+                            get().hashWindows[layoutId] &&
+                            get().hashAreas[areaId].colapsedItems[layoutId]
+                        ) {
+                            set(state => {
+                                state.hashAreas[areaId].colapsedItems = {
+                                    ...state.hashAreas[areaId].colapsedItems,
+                                };
+
+                                delete state.hashAreas[areaId].colapsedItems[layoutId];
+                                state.hashWindows[layoutId].colapsed = false;
+                            });
+                        }
+
+
+                        */
+          },
+          /**
+           * TODO: Documentar
+           */
+          colapseLayoutItem: (areaId: string, layoutId: string) => {
+            if (!get().hashAreas[areaId].maximizedId && get().hashWindows[layoutId]) {
+              set(state => {
+                setColapsedLayoutBreakPoints(state.hashAreas[areaId], layoutId, true);
+
+                // state.hashAreas[areaId].colapsedItems = {
+                //     ...state.hashAreas[areaId].colapsedItems,
+                // };
+                // state.hashAreas[areaId].colapsedItems[layoutId] = true;
+                // state.hashWindows[layoutId].colapsed = true;
+                // if () {
+                //     newSet = new Set(state.hashAreas[areaId].colapsedItems);
+                // } else {
+                //     newSet = new Set();
+                // }
+
+                // if (!newSet.has(layoutId)) {
+                //     newSet.add(layoutId);
+                //     state.hashAreas[areaId].colapsedItems = newSet;
+                // }
+
+                // for (const breakPoint in newLayouts) {
+
+                //     const layout = newLayouts[breakPoint];
+
+                //     for (let index = 0; index < newLayouts[breakPoint].length; index++) {//LayoutItems
+                //         const li =  layout[index]
+                //         if (li.i === layoutId ){
+                //             li.colapsed = true;
+                //         }
+                //     }
+                // }
+              });
+            }
+          },
+          /**
+           * TODO: Documentar
+           */
+          maximizeLayout: (areaId: string, layoutId?: string) => {
+            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 !== undefined &&
+                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: string) => {
+            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 !== undefined &&
+                  index > -1 &&
+                  state.hashWindows[area.maximizedId].emergeType === 'popup'
+                ) {
+                  area.layouts['xxs'][index].visible = false;
+                }
+              }
+
+              area.maximizedId = undefined;
+            });
+          },
+          /**
+           * TODO: Documentar
+           */
+          loadWindowsFromApi: (areaId: string) => {
+            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;
+            }
+
+            //Consultar propiedades (cookies) del area de trabajo (Layouts y breakpoints)
+            set(state => {
+              state.hashAreas[areaId].status = 'loading';
+            });
+
+            getCookie({
+              networkOperation: get().networkOperation,
+              params: { f: [{ n: 'container_id', o: 'e', o1: areaId }] },
+            })
+              .then((response: any) => {
+                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;
+                  // if (area.viewMode === 'single') {
+                  //     area3.beforeMaximizebreakpointsLayouts =
+                  //         newBreakPointsLayouts;
+                  // }
+                  // area3.windowsLayoutIds = newWindowsLayoutsIds;
+                  area3.layoutItemsIds = newHashLayoutItems;
+
+                  area3.status = 'loaded';
+                });
+
+                // if (get().hashAreas[areaId].windowsLayoutIds.length > 0) {
+                //     get().areaActions.selectLayout(
+                //         areaId,
+                //         get().hashAreas[areaId].windowsLayoutIds[0],
+                //     );
+                // }
+                //TODO: Seleccionarr layout
+
+                // console.log('loadWindowsFromApi', area2.viewMode);
+                // if (area2.viewMode === 'single') {
+                //     get().areaActions.maximizeLayout(area2.id);
+                // }
+              })
+              .catch((_response: any) => {
+                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: string, newActions: AreaWindowAction[], version?: string) => {
+            set(state => {
+              //Se clona el objeto, porque Imer modifica los objetos y los pone en freeze, y ya no se pueden usar directamente.
+
+              if (state.hashWindows[windowId]) {
+                state.hashWindows[windowId].moduleActions = cloneDeep(newActions);
+                state.hashWindows[windowId].version = version;
+              }
+            });
+          },
+          /**
+           * TODO: Documentar
+           */
+          getCookie: (windowId: string, id: string) => {
+            // console.log(
+            //     'getCookie',
+            //     get().hashWindows[windowId].cookies.windowCookies[id],
+            //     get().hashWindows[windowId].cookies.moduleCookies[id],
+            // );
+            if (get().hashWindows[windowId]) {
+              return (
+                get().hashWindows[windowId].cookies.windowCookies[id] ||
+                get().hashWindows[windowId].cookies.moduleCookies[id]
+              );
+            }
+            return {};
+          },
+          /**
+           * TODO: Documentar
+           */
+          getCookies: (windowId: string, type: CookieType) => {
+            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: string,
+            id: string,
+            type: CookieType,
+            cookie: Record<string, any>,
+          ) => {
+            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: string) => {
+            const hW = get().hashWindows[windowId];
+            if (hW) {
+              const onClose = hW.onClose;
+              if (onClose) {
+                onClose(hW.windowId);
+              }
+            }
+          },
+          /**
+           * TODO: Documentar
+           */
+          startProgress: (windowId: string) => {
+            set(state => {
+              if (state.hashWindows[windowId]) {
+                state.hashWindows[windowId].loading = true;
+              }
+            });
+          },
+          /**
+           * TODO: Documentar
+           */
+          stopProgress: (windowId: string) => {
+            set(state => {
+              if (state.hashWindows[windowId]) {
+                state.hashWindows[windowId].loading = false;
+              }
+            });
+          },
+          /**
+           * TODO: Documentar
+           */
+          loadCookiesFromApi: (windowId: string) => {
+            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: any) => {
+                    set(state => {
+                      const hWs = state.hashWindows[windowId];
+                      if (hWs) {
+                        //Puede que el usuario haya borrrado la ventana antes de que llegue la respuesta
+                        hWs.cookies.moduleCookies = getCookiesContainer(
+                          response.data,
+                          hWs.moduleId,
+                        );
+                        hWs.cookies.windowCookies = getCookiesContainer(response.data, windowId);
+                        hWs.status = 'loaded';
+                      }
+                    });
+                  })
+                  .catch((_response: any) => {
+                    set(state => {
+                      if (state.hashWindows[windowId]) {
+                        state.hashWindows[windowId].status = 'loaded';
+                      }
+                    });
+                  });
+              }
+            }
+          },
+          /**
+           * TODO: Documentar
+           */
+          saveModuleCookies: (windowId: string) => {
+            //Graba las cookies que son de la ventana al modulo.
+            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: string) => {
+            const hW = get().hashWindows[windowId];
+
+            if (hW) {
+              deleteCookie({
+                networkOperation: get().networkOperation,
+                data: {
+                  f: [
+                    {
+                      n: 'id',
+                      o: 'c',
+                      o1: hW.moduleId,
+                    },
+                  ],
+                },
+              });
+            }
+          },
+          /**
+           * TODO: Documentar
+           */
+          setFnQueryClose: (windowId: string, fnQueryClose: () => void) => {
+            set(state => {
+              state.hashWindows[windowId].fnQueryClose = fnQueryClose;
+              // console.log('fnQueryClose', state.hashWindows[windowId].fnQueryClose);
+            });
+          },
+          /**
+           * TODO: Documentar
+           */
+          setWindowTitle: (windowId: string, title: string) => {
+            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 type AreasStore = ReturnType<typeof createAreasStore>;