@m4l/components 9.2.0 → 9.2.2

package/components/popups/components/PopupsProvider/contexts/PopupsContext/store.js

@@ -1,243 +1,310 @@
 import { createStore } from "zustand";
 import { immer } from "zustand/middleware/immer";
 import cloneDeep from "lodash-es/cloneDeep";
-import { c as createDynamicMFStore } from "../../../../../areas/contexts/DynamicMFParmsContext/store.js";
-const createPopupsStore = (initProps) => {
+import { c as createDynamicMFStore } from "../../../../../WindowBase/contexts/DynamicMFParmsContext/store.js";
+import { devtools } from "zustand/middleware";
+const createDevtools = (immerMiddlewere, config) => {
+  const { enabled = false } = config;
+  if (enabled && process.env.NODE_ENV === "development") {
+    return devtools(immerMiddlewere, config);
+  }
+  return immerMiddlewere;
+};
+const createPopupsStore = (initProps, storeDevtoolsEnabled = false) => {
   const startProps = {
+    ...initProps,
     currentZindex: initProps.baseZindex,
     popupsIds: [],
     hashPopups: {},
-    windowActions: {
-      setActions: []
-      //getCookie: () => undefined,
-      //setCookie: () => {},
-      //saveModuleCookies: () => {},
-      //resetModuleCookies: () => {},
-    },
-    getContainer: initProps.getContainerElement,
-    ...initProps
+    hashGroups: {}
   };
   return createStore(
-    immer((set, get) => ({
-      ...startProps,
-      popupsActions: {
-        /**
-         * init: Inicializa los popups
-         */
-        init: (initialPopups) => {
-          set((state) => {
-            let maxZindex = state.baseZindex;
-            for (let index = 0; index < initialPopups.length; index++) {
-              const popupData = cloneDeep(initialPopups[index]);
-              if (!popupData.dynamicMFStore && popupData.dynamicParams) {
+    createDevtools(
+      immer((set, get) => ({
+        ...startProps,
+        popupsActions: {
+          /**
+           * init: Inicializa los popups
+           */
+          init: (initialPopups) => {
+            set((state) => {
+              let maxZindex = state.baseZindex;
+              for (let index = 0; index < initialPopups.length; index++) {
+                const popupData = cloneDeep(initialPopups[index]);
+                popupData.dynamicParams = popupData.dynamicParams || {};
                 popupData.dynamicMFStore = createDynamicMFStore({
-                  dynamicMFParameters: popupData.dynamicParams,
-                  windowId: popupData.popupId
+                  dynamicMFParameters: popupData.dynamicParams
                 });
+                state.hashPopups[initialPopups[index].popupId] = {
+                  ...popupData
+                };
+                state.popupsIds.push(initialPopups[index].popupId);
+                if (initialPopups[index].zIndex > maxZindex) {
+                  maxZindex = initialPopups[index].zIndex;
+                }
+                if (!state.hashGroups[initialPopups[index].groupId]) {
+                  state.hashGroups[initialPopups[index].groupId] = {
+                    id: initialPopups[index].groupId,
+                    count: 0
+                  };
+                }
+                state.hashGroups[initialPopups[index].groupId].count += 1;
               }
-              state.hashPopups[initialPopups[index].popupId] = {
-                ...popupData
-                // component: popupData.functionComponent,
-              };
-              state.popupsIds.push(initialPopups[index].popupId);
-              if (initialPopups[index].zIndex > maxZindex) {
-                maxZindex = initialPopups[index].zIndex;
-              }
+              state.currentZindex = maxZindex + 1;
+            });
+          },
+          /**
+           * addPopup: Añade un popup
+           */
+          addPopup: (popupProps, options) => {
+            const { popupId, dynamicParams, dynamicMFStore, groupId = "global" } = popupProps;
+            if (get().hashPopups[popupId]) {
+              throw new Error(`Popup with id ${popupId} already exists`);
             }
-            state.currentZindex = maxZindex + 1;
-          });
-        },
-        /**
-         * addPopup: Añade un popup
-         */
-        addPopup: (popupProps, options) => {
-          if (get().hashPopups[popupProps.popupId]) {
-            throw new Error(`Poupup with id ${popupProps.popupId} already exists`);
-          }
-          if (options?.closeOthers) {
             set((state) => {
-              state.popupsIds.forEach((popupId) => {
-                state.hashPopups[popupId].status = "closing";
+              if (options?.closeOthers) {
+                state.popupsIds.forEach((pId) => {
+                  if (state.hashPopups[pId].groupId === groupId) {
+                    state.hashPopups[pId].status = "closing";
+                  }
+                });
+              }
+              const finalMFStore = dynamicMFStore || createDynamicMFStore({
+                dynamicMFParameters: dynamicParams || {}
               });
-              state.hashPopups[popupProps.popupId] = {
+              state.hashPopups[popupId] = {
                 ...popupProps,
+                groupId,
                 status: "init",
-                zIndex: state.currentZindex
+                zIndex: state.currentZindex,
+                dynamicMFStore: finalMFStore
               };
-              state.popupsIds.push(popupProps.popupId);
-              state.currentZindex = state.currentZindex + 1;
+              state.popupsIds.push(popupId);
+              state.currentZindex += 1;
+              if (!state.hashGroups[groupId]) {
+                state.hashGroups[groupId] = {
+                  id: groupId,
+                  count: 0
+                };
+              }
+              state.hashGroups[groupId].count += 1;
+              state.hashGroups[groupId].selectedPopupId = popupId;
+              state.hashPopups[popupId].onSelectedPopupIdChange?.(state.hashPopups[popupId].groupId, popupId, "add");
             });
-          } else {
+          },
+          /**
+           * removePopup: Elimina un popup
+           */
+          removePopup: (popupId) => {
+            if (!get().hashPopups[popupId]) {
+              return;
+            }
             set((state) => {
-              state.hashPopups[popupProps.popupId] = {
-                ...popupProps,
-                status: "init",
-                zIndex: state.currentZindex
-              };
-              state.popupsIds.push(popupProps.popupId);
-              state.currentZindex = state.currentZindex + 1;
+              if (state.hashPopups[popupId]?.onRemove) {
+                state.hashPopups[popupId].onRemove(popupId);
+              }
+              state.popupsIds.splice(state.popupsIds.indexOf(popupId), 1);
+              if (state.hashGroups[state.hashPopups[popupId].groupId].selectedPopupId === popupId) {
+                state.hashGroups[state.hashPopups[popupId].groupId].selectedPopupId = void 0;
+                state.hashPopups[popupId].onSelectedPopupIdChange?.(state.hashPopups[popupId].groupId, void 0, "remove");
+              }
+              state.hashGroups[state.hashPopups[popupId].groupId].count -= 1;
+              if (state.hashGroups[state.hashPopups[popupId].groupId].count === 0) {
+                delete state.hashGroups[state.hashPopups[popupId].groupId];
+              }
+              delete state.hashPopups[popupId];
+              if (state.popupsIds.length === 0) {
+                state.currentZindex = state.baseZindex;
+              } else {
+                state.currentZindex = state.currentZindex - 1;
+              }
             });
-          }
-        },
-        /**
-         * removePopup: Elimina un popup
-         */
-        removePopup: (popupId) => {
-          if (!get().hashPopups[popupId]) {
-            return;
-          }
-          set((state) => {
-            state.popupsIds.splice(state.popupsIds.indexOf(popupId), 1);
-            delete state.hashPopups[popupId];
-            if (state.popupsIds.length === 0) {
-              state.currentZindex = state.baseZindex;
-            } else {
-              state.currentZindex = state.currentZindex - 1;
+          },
+          /**
+           * bringPopupOnFront: Establece el popup con mayor zindex
+           */
+          bringPopupOnFront: (popupId, withEnforceVisible) => {
+            if (!get().hashPopups[popupId]) {
+              return;
             }
-          });
-        },
-        /**
-         * closePopup: Cierra un popup
-         */
-        closePopup: (popupId) => {
-          if (!get().hashPopups[popupId]) {
-            return;
-          }
-          set((state) => {
-            state.hashPopups[popupId].status = "closing";
-          });
-        },
-        /**
-         * updatePopup: Actualiza un popup
-         */
-        updatePopup: (popupId, popupProps) => {
-          if (!get().hashPopups[popupId]) {
-            return;
-          }
-          set((state) => {
-            state.hashPopups[popupId] = { ...state.hashPopups[popupId], ...popupProps };
-          });
-        },
-        /**
-         * showPopup: Muestra un popup
-         */
-        showPopup: (popupId) => {
-          if (!get().hashPopups[popupId]) {
-            return;
-          }
-          set((state) => {
-            state.hashPopups[popupId].status = "init";
-          });
-        },
-        /**
-         * hidePopup: Oculta un popup
-         */
-        hidePopup: (popupId) => {
-          if (!get().hashPopups[popupId]) {
-            return;
-          }
-          set((state) => {
-            state.hashPopups[popupId].status = "hidden";
-          });
-        },
-        /**
-         * setActions: Establece las acciones del popup
-         */
-        setActions: (popupId, actions, version) => {
-          set((state) => {
-            if (state.hashPopups[popupId]) {
-              state.hashPopups[popupId].moduleActions = actions;
-              state.hashPopups[popupId].version = version;
-            }
-          });
-        },
-        /**
-         * setPopupOnTop: Establece el popup con mayor zindex
-         */
-        setPopupOnFront: (popupId) => {
-          if (!get().hashPopups[popupId]) {
-            return;
+            set((state) => {
+              const maxIndex = state.popupsIds.reduce((max, _pId, cIndex) => {
+                return state.hashPopups[state.popupsIds[cIndex]].zIndex > max ? state.hashPopups[state.popupsIds[cIndex]].zIndex : max;
+              }, state.hashPopups[state.popupsIds[0]].zIndex);
+              if (state.hashPopups[popupId].zIndex !== maxIndex) {
+                state.hashPopups[popupId].zIndex = state.currentZindex;
+                state.currentZindex = state.currentZindex + 1;
+              }
+              if (withEnforceVisible) {
+                state.hashPopups[popupId].enforceVisibleCount = (state.hashPopups[popupId].enforceVisibleCount || 0) + 1;
+              }
+              state.hashGroups[state.hashPopups[popupId].groupId].selectedPopupId = popupId;
+              state.hashPopups[popupId].onSelectedPopupIdChange?.(state.hashPopups[popupId].groupId, popupId, "select");
+            });
+          },
+          /**
+           * setFnQueryClose: Establece la función de cierre de la consulta
+           */
+          setFnQueryClose: (popupId, fn) => {
+            set((state) => {
+              if (state.hashPopups[popupId]) {
+                state.hashPopups[popupId].fnQueryClose = fn;
+              }
+            });
+          },
+          /**
+           * unColapseLayoutItem
+           */
+          unColapseLayoutItem: (popupId) => {
+            set((state) => {
+              if (state.hashPopups[popupId]) {
+                state.hashPopups[popupId].collapsed = false;
+              }
+            });
+          },
+          /**
+           * colapseLayoutItem
+           */
+          colapseLayoutItem: (popupId) => {
+            set((state) => {
+              if (state.hashPopups[popupId]) {
+                state.hashPopups[popupId].collapsed = true;
+              }
+            });
+          },
+          /**
+           * removePopupsByGroupId: Elimina los popups de un grupo
+           */
+          closePopupsByGroupId: (groupId) => {
+            set((state) => {
+              const popupsToRemove = state.popupsIds.filter((popupId) => {
+                const popup = state.hashPopups[popupId];
+                return popup.groupId === groupId;
+              });
+              popupsToRemove.forEach((popupId) => {
+                state.hashPopups[popupId].status = "closing";
+              });
+            });
+          },
+          /**
+           * removeAllPopupsByGroupId: Elimina todos los popups de un grupo
+           */
+          removeAllPopupsByGroupId: (groupId) => {
+            set((state) => {
+              const popupsToRemove = state.popupsIds.filter((popupId) => {
+                const popup = state.hashPopups[popupId];
+                return popup.groupId === groupId;
+              });
+              state.popupsIds = state.popupsIds.filter((pId) => state.hashPopups[pId].groupId !== groupId);
+              popupsToRemove.forEach((popupId) => {
+                delete state.hashPopups[popupId];
+              });
+              delete state.hashGroups[groupId];
+            });
+          },
+          /**
+           * closeAllPopupsByParentId: Cierra todos los popups que dependan de un popup padre
+           */
+          closeAllPopupsByParentId: (parentId) => {
+            set((state) => {
+              state.popupsIds.forEach((popupId) => {
+                if (state.hashPopups[popupId].parentId === parentId) {
+                  state.hashPopups[popupId].status = "closing";
+                }
+              });
+            });
+          },
+          /**
+           * setSelectedPopupId: Establece el popup seleccionado
+           */
+          setSelectedPopupId: (groupId, popupId) => {
+            set((state) => {
+              if (state.hashGroups[groupId]) {
+                state.hashGroups[groupId].selectedPopupId = popupId;
+              }
+            });
           }
-          set((state) => {
-            const maxIndex = state.popupsIds.reduce((max, _pId, cIndex) => {
-              return state.hashPopups[state.popupsIds[cIndex]].zIndex > max ? state.hashPopups[state.popupsIds[cIndex]].zIndex : max;
-            }, state.hashPopups[state.popupsIds[0]].zIndex);
-            if (state.hashPopups[popupId].zIndex !== maxIndex) {
-              state.hashPopups[popupId].zIndex = state.currentZindex;
-              state.currentZindex = state.currentZindex + 1;
-            }
-          });
-        },
-        /**
-         * setHandlerGetLabel: Establece el manejador de etiquetas
-         */
-        setHandlerGetLabel: (newHandler) => {
-          set((state) => {
-            state.getLabel = newHandler;
-          });
         },
-        /**
-         * startProgress: Marca el popup como cargando (loading: true)
-         */
-        startProgress: (popupId) => {
-          set((state) => {
-            if (state.hashPopups[popupId]) {
-              state.hashPopups[popupId].loading = true;
+        popupActions: {
+          /**
+           * updatePopup: Actualiza un popup
+           */
+          update: (popupId, popupProps) => {
+            if (!get().hashPopups[popupId]) {
+              return;
             }
-          });
-        },
-        /**
-         * stopProgress: Marca el popup como finalizado (loading: false)
-         */
-        stopProgress: (popupId) => {
-          set((state) => {
-            if (state.hashPopups[popupId]) {
-              state.hashPopups[popupId].loading = false;
-            }
-          });
-        },
-        /**
-         * setFnQueryClose: Establece la función de cierre de la consulta
-         */
-        setFnQueryClose: (popupId, fn) => {
-          set((state) => {
-            if (state.hashPopups[popupId]) {
-              state.hashPopups[popupId].fnQueryClose = fn;
-            }
-          });
-        },
-        /**
-         * setPopupTitle: Establece el título del popup
-         */
-        setPopupTitle: (popupId, title) => {
-          set((state) => {
-            if (state.hashPopups[popupId]) {
-              state.hashPopups[popupId].title = title;
+            set((state) => {
+              state.hashPopups[popupId] = { ...state.hashPopups[popupId], ...popupProps };
+            });
+          },
+          /**
+           * showPopup: Muestra un popup
+           */
+          show: (popupId) => {
+            if (!get().hashPopups[popupId]) {
+              return;
             }
-          });
-        },
-        /**
-         * unColapseLayoutItem
-         */
-        unColapseLayoutItem: (popupId) => {
-          set((state) => {
-            if (state.hashPopups[popupId]) {
-              state.hashPopups[popupId].collapsed = false;
+            set((state) => {
+              state.hashPopups[popupId].status = "init";
+            });
+          },
+          /**
+           * hidePopup: Oculta un popup
+           */
+          hide: (popupId) => {
+            if (!get().hashPopups[popupId]) {
+              return;
             }
-          });
-        },
-        /**
-         * colapseLayoutItem
-         */
-        colapseLayoutItem: (popupId) => {
-          set((state) => {
-            if (state.hashPopups[popupId]) {
-              state.hashPopups[popupId].collapsed = true;
+            set((state) => {
+              state.hashPopups[popupId].status = "hidden";
+            });
+          },
+          /**
+           * closePopup: Cierra un popup
+           */
+          close: (popupId) => {
+            if (!get().hashPopups[popupId]) {
+              return;
             }
-          });
+            set((state) => {
+              state.hashPopups[popupId].status = "closing";
+            });
+          },
+          /**
+           * setActions: Establece las acciones del popup
+           */
+          setActions: (popupId, actions, version) => {
+            set((state) => {
+              if (state.hashPopups[popupId]) {
+                state.hashPopups[popupId].moduleActions = actions;
+                state.hashPopups[popupId].version = version;
+              }
+            });
+          },
+          /**
+           * startProgress: Marca el popup como cargando (loading: true)
+           */
+          startProgress: (popupId) => {
+            set((state) => {
+              if (state.hashPopups[popupId]) {
+                state.hashPopups[popupId].loading = true;
+              }
+            });
+          },
+          /**
+           * stopProgress: Marca el popup como finalizado (loading: false)
+           */
+          stopProgress: (popupId) => {
+            set((state) => {
+              if (state.hashPopups[popupId]) {
+                state.hashPopups[popupId].loading = false;
+              }
+            });
+          }
         }
-      }
-    }))
+      })),
+      { name: `PopupsStore: ${initProps.storeId}`, enabled: storeDevtoolsEnabled }
+    )
   );
 };
 export {

package/components/popups/components/PopupsProvider/contexts/PopupsContext/tests/PopupContext.test.d.ts

@@ -0,0 +1 @@
+export {};

package/components/popups/components/PopupsProvider/contexts/PopupsContext/tests/PopusContext.store.test.d.ts

@@ -0,0 +1 @@
+export {};

package/components/popups/components/PopupsProvider/contexts/PopupsContext/tests/__mocks__/storeMock.d.ts

@@ -0,0 +1,29 @@
+export declare const initMock: import('vitest').Mock<(...args: any[]) => any>;
+export declare const createPopupsStoreMock: import('vitest').Mock<() => {
+    getState: import('vitest').Mock<() => {
+        popupsActions: {
+            init: import('vitest').Mock<(...args: any[]) => any>;
+            addPopup: import('vitest').Mock<(...args: any[]) => any>;
+            removePopup: import('vitest').Mock<(...args: any[]) => any>;
+            bringPopupOnFront: import('vitest').Mock<(...args: any[]) => any>;
+        };
+        popupActions: {
+            update: import('vitest').Mock<(...args: any[]) => any>;
+            show: import('vitest').Mock<(...args: any[]) => any>;
+            hide: import('vitest').Mock<(...args: any[]) => any>;
+            close: import('vitest').Mock<(...args: any[]) => any>;
+        };
+        popupsIds: string[];
+        hashPopups: {
+            popup1: {
+                popupId: string;
+                title: string;
+            };
+            popup2: {
+                popupId: string;
+                title: string;
+            };
+        };
+    }>;
+    subscribe: import('vitest').Mock<() => () => void>;
+}>;