@m4l/components 9.1.127 → 9.1.128

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

@@ -1,158 +1,243 @@
 import { createStore } from "zustand";
-import { devtools } from "zustand/middleware";
 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) => {
   const startProps = {
     currentZindex: initProps.baseZindex,
     popupsIds: [],
     hashPopups: {},
+    windowActions: {
+      setActions: []
+      //getCookie: () => undefined,
+      //setCookie: () => {},
+      //saveModuleCookies: () => {},
+      //resetModuleCookies: () => {},
+    },
     getContainer: initProps.getContainerElement,
     ...initProps
   };
   return createStore(
-    devtools(
-      immer((set, get) => ({
-        ...startProps,
-        popupsActions: {
-          /**
-           * TODO: Documentar
-           */
-          init: (initialPopups) => {
-            set((state) => {
-              let maxZindex = state.baseZindex;
-              for (let index = 0; index < initialPopups.length; index++) {
-                state.hashPopups[initialPopups[index].popupId] = cloneDeep(initialPopups[index]);
-                state.popupsIds.push(initialPopups[index].popupId);
-                if (initialPopups[index].zIndex > maxZindex) {
-                  maxZindex = initialPopups[index].zIndex;
-                }
+    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) {
+                popupData.dynamicMFStore = createDynamicMFStore({
+                  dynamicMFParameters: popupData.dynamicParams,
+                  windowId: popupData.popupId
+                });
+              }
+              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;
-            });
-          },
-          /**
-           * TODO: Documentar
-           */
-          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";
-                });
-                state.hashPopups[popupProps.popupId] = {
-                  ...popupProps,
-                  status: "init",
-                  zIndex: state.currentZindex
-                };
-                state.popupsIds.push(popupProps.popupId);
-                state.currentZindex = state.currentZindex + 1;
+            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";
               });
+              state.hashPopups[popupProps.popupId] = {
+                ...popupProps,
+                status: "init",
+                zIndex: state.currentZindex
+              };
+              state.popupsIds.push(popupProps.popupId);
+              state.currentZindex = state.currentZindex + 1;
+            });
+          } else {
+            set((state) => {
+              state.hashPopups[popupProps.popupId] = {
+                ...popupProps,
+                status: "init",
+                zIndex: state.currentZindex
+              };
+              state.popupsIds.push(popupProps.popupId);
+              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 {
-              set((state) => {
-                state.hashPopups[popupProps.popupId] = {
-                  ...popupProps,
-                  status: "init",
-                  zIndex: state.currentZindex
-                };
-                state.popupsIds.push(popupProps.popupId);
-                state.currentZindex = state.currentZindex + 1;
-              });
+              state.currentZindex = state.currentZindex - 1;
             }
-          },
-          /**
-           * TODO: Documentar
-           */
-          removePopup: (popupId) => {
-            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;
             }
-            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;
-              }
-            });
-          },
-          /**
-           * TODO: Documentar
-           */
-          closePopup: (popupId) => {
-            if (!get().hashPopups[popupId]) {
-              return;
+          });
+        },
+        /**
+         * 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;
             }
-            set((state) => {
-              state.hashPopups[popupId].status = "closing";
-            });
-          },
-          /**
-           * TODO: Documentar
-           */
-          updatePopup: (popupId, popupProps) => {
-            if (!get().hashPopups[popupId]) {
-              return;
+          });
+        },
+        /**
+         * 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;
             }
-            set((state) => {
-              state.hashPopups[popupId] = { ...state.hashPopups[popupId], ...popupProps };
-            });
-          },
-          /**
-           * TODO: Documentar
-           */
-          showPopup: (popupId) => {
-            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;
             }
-            set((state) => {
-              state.hashPopups[popupId].status = "init";
-            });
-          },
-          /**
-           * TODO: Documentar
-           */
-          hidePopup: (popupId) => {
-            if (!get().hashPopups[popupId]) {
-              return;
+          });
+        },
+        /**
+         * setFnQueryClose: Establece la función de cierre de la consulta
+         */
+        setFnQueryClose: (popupId, fn) => {
+          set((state) => {
+            if (state.hashPopups[popupId]) {
+              state.hashPopups[popupId].fnQueryClose = fn;
             }
-            set((state) => {
-              state.hashPopups[popupId].status = "hidden";
-            });
-          },
-          /**
-           * TODO: Documentar
-           */
-          setPopupOnFront: (popupId) => {
-            if (!get().hashPopups[popupId]) {
-              return;
+          });
+        },
+        /**
+         * setPopupTitle: Establece el título del popup
+         */
+        setPopupTitle: (popupId, title) => {
+          set((state) => {
+            if (state.hashPopups[popupId]) {
+              state.hashPopups[popupId].title = title;
             }
-            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;
-              }
-            });
-          },
-          /**
-           * TODO: Documentar
-           */
-          setHandlerGetLabel: (newHandler) => {
-            set((state) => {
-              state.getLabel = newHandler;
-            });
-          }
+          });
+        },
+        /**
+         * 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;
+            }
+          });
         }
-      })),
-      { name: `Popups store: ${initProps.storeId}` }
-    )
+      }
+    }))
   );
 };
 export {

package/components/popups/components/PopupsProvider/contexts/PopupsContext/types.d.ts

@@ -2,6 +2,7 @@ import { GetLabelType } from '@m4l/core';
 import { ReactNode } from 'react';
 import { DragResizeWindowProps } from '../../../../../DragResizeWindow/types';
 import { PopupStatus } from '../../../PopupsViewer/types';
+import { AreaWindowAction, MFBaseProps } from '../../../../../../../src/components/areas/types';
 export type PopupVariantType = 'normal' | 'small' | 'large';
 export interface PopupStoreProps extends Pick<DragResizeWindowProps, 'bounds' | 'defaultPosition'> {
     /**
@@ -58,6 +59,65 @@ export interface PopupStoreProps extends Pick<DragResizeWindowProps, 'bounds' |
      * "onMouseDown" Evento nativo del Draggable, para tomar acciones externamente
      */
     onMouseDown?: (e: MouseEvent) => void;
+    /**
+     * "mfProps" Propiedades de la ventana padre
+     */
+    mfProps?: MFBaseProps;
+    /**
+     * "winType" Tipo de ventana
+     */
+    winType?: 'microfrontend' | 'component';
+    /**
+     * "loading" Indica si el popup está cargando
+     */
+    loading?: boolean;
+    /**
+     * "actions" Acciones de la ventana
+     */
+    actions?: AreaWindowAction[];
+    /**
+     * "version" Versión de la ventana
+     */
+    version?: string;
+    /**
+     * "progress" Indica si el popup está en progreso
+     */
+    progress?: boolean;
+    /**
+     * "fnQueryClose" Función de cierre de la consulta
+     */
+    fnQueryClose?: (...args: any[]) => void;
+    /**
+     * "dynamicMFStore" Almacén de microfrontends din
+     */
+    dynamicMFStore?: Record<string, any>;
+    /**
+     * "emergeType" Tipo de emergencia
+     */
+    /**
+     * dynamic params
+     */
+    dynamicParams?: Record<string, any>;
+    /**
+     * "moduleActions" Acciones del módulo
+     */
+    moduleActions?: AreaWindowAction[];
+    /**
+     * "windowTools" Herramientas de la ventana
+     */
+    windowOptions?: Record<string, any>;
+    /**
+     * "collapsed" Indica si el popup está colapsado
+     */
+    collapsed?: boolean;
+    /**
+     * "maximized" Indica si el popup está maximizado
+     */
+    maximized?: boolean;
+    /**
+     * "component" Componente que se va a mostrar en el popup.
+     */
+    component?: React.FC<Record<string, any>>;
 }
 /**
  * Interface que define el store del componente (variables y funciones )
@@ -92,6 +152,8 @@ export interface PopupsStore {
      *  "getLabel" funcion que usará para traducir las etiquetas de diccionario
      */
     getContainer: () => HTMLElement;
+    dynamicMFStore?: Record<string, any>;
+    windowActions: Record<string, AreaWindowAction[]>;
 }
 export type OpenPopupOptions = {
     /**
@@ -108,6 +170,8 @@ export interface PopupsStateWithActions extends PopupsStore {
         /**
          * Agrega una un poupup nuevo al hash de popups y al array de ids,
          */
+        unColapseLayoutItem: (popupId: string) => void;
+        colapseLayoutItem: (popupId: string) => void;
         addPopup: (popupProps: Omit<PopupStoreProps, 'status' | 'zIndex'>, options?: OpenPopupOptions) => void;
         /**
          * Remueve el poupup del hash de poups y de arrays de ids
@@ -140,6 +204,17 @@ export interface PopupsStateWithActions extends PopupsStore {
          * @returns void
          */
         setHandlerGetLabel: (newHandler: GetLabelType) => void;
+        /**
+         * setFnQueryClose: Establece la función de cierre del popup
+         */
+        setFnQueryClose: (popupId: string, fn: () => void) => void;
+        /**
+         * setPopupTitle: Establece el título del popup
+         */
+        setPopupTitle: (popupId: string, title: string) => void;
+        startProgress: (popupId: string) => void;
+        stopProgress: (popupId: string) => void;
+        setActions: (popupId: string, actions: AreaWindowAction[], version?: string) => void;
     };
 }
 export type DefaultPopupsStoreProps = PopupsStore;

package/components/popups/components/PopupsProvider/hooks/useHeaderActionsPopups/helper.d.ts

@@ -0,0 +1,28 @@
+import { GetLabelType } from '@m4l/core';
+import { AreaWindowAction, WindowOptions } from '../../../../../../../src/components/areas/types';
+/**
+ * Obtiene las acciones principales para un popup.
+ * @param isDesktop Indica si se está en un dispositivo de escritorio.
+ * @param moduleActions Acciones definidas para el módulo.
+ * @returns Array de acciones principales.
+ */
+export declare function getMainActionsForPopups(isDesktop: boolean | undefined, moduleActions: AreaWindowAction[]): AreaWindowAction[];
+type GetMenuActionsForPopupsType = {
+    popupId: string;
+    isDesktop?: boolean;
+    moduleActions: AreaWindowAction[];
+    urlPrefix: string;
+    version?: string;
+    windowOptions?: WindowOptions;
+    getLabel: GetLabelType;
+    saveModuleCookies: (wd: string) => void;
+    resetModuleCookies: (wd: string) => void;
+};
+/**
+ * Obtiene las acciones del menú para un popup.
+ * A diferencia del helper para áreas, aquí no se agregan acciones relacionadas con cookies.
+ * @param options Objeto con las opciones para construir las acciones.
+ * @returns Array de acciones para el menú.
+ */
+export declare function getMenuActionsForPopups(options: GetMenuActionsForPopupsType): AreaWindowAction[];
+export {};

package/components/popups/components/PopupsProvider/hooks/useHeaderActionsPopups/helper.js

@@ -0,0 +1,44 @@
+import { g as getAreasDictionary, A as AREAS_DICCTIONARY } from "../../../../../areas/dictionary.js";
+import { I as ICONS } from "../../../../../areas/icons.js";
+function getMenuActionsForPopups(options) {
+  const {
+    popupId,
+    isDesktop,
+    moduleActions,
+    urlPrefix,
+    saveModuleCookies,
+    resetModuleCookies,
+    getLabel,
+    windowOptions = { allowPersistCookies: false }
+  } = options;
+  let menuActions = [...moduleActions.filter((action) => action.visibility !== "allways")];
+  if (isDesktop !== void 0 && isDesktop) {
+    menuActions = menuActions.filter((action) => action.visibility === "normal");
+  }
+  if (windowOptions.allowPersistCookies) {
+    const saveCookiesAction = {
+      type: "menuItem",
+      startIcon: `${urlPrefix}/frontend/components/areas/assets/icons/${ICONS.SAVE_COOKIES}`,
+      onClick: () => saveModuleCookies(popupId),
+      disabled: false,
+      visibility: "normal",
+      label: getLabel(getAreasDictionary(AREAS_DICCTIONARY.label_persist_module_cookies)),
+      key: "save_cookies"
+    };
+    menuActions.push(saveCookiesAction);
+    const resetCookiesAction = {
+      type: "menuItem",
+      startIcon: `${urlPrefix}/frontend/components/areas/assets/icons/${ICONS.RESET_COOKIES}`,
+      onClick: () => resetModuleCookies(popupId),
+      disabled: false,
+      visibility: "normal",
+      label: getLabel(getAreasDictionary(AREAS_DICCTIONARY.label_reset_module_cookies)),
+      key: "reset_cookes"
+    };
+    menuActions.push(resetCookiesAction);
+  }
+  return menuActions;
+}
+export {
+  getMenuActionsForPopups as g
+};

package/components/popups/components/PopupsProvider/hooks/useHeaderActionsPopups/useHeaderActionsPopups.d.ts

@@ -0,0 +1,21 @@
+import { WindowBaseAction } from '../../../../../../../src/components/WindowBase';
+interface UseHeaderActionsPopupsParams {
+    /** Identificador de la ventana (popup) */
+    popupId: string;
+    /** Acciones adicionales a incluir en el menú del header */
+    menuActions?: WindowBaseAction[];
+}
+/**
+ * Hook useHeaderActionsPopups
+ *
+ * Este hook configura las acciones del header para un popup utilizando el store de popups,
+ * el diccionario e íconos propios y helpers para construir las acciones "main" e "inside".
+ * @param {UseHeaderActionsPopupsParams} params - Parámetros que incluyen el popupId y, opcionalmente, acciones adicionales.
+ * @returns Objeto con leftActions, menuActions y rightActions.
+ */
+export declare const useHeaderActionsPopups: ({ popupId, menuActions, }: UseHeaderActionsPopupsParams) => {
+    leftActions: WindowBaseAction[];
+    menuActions: WindowBaseAction[];
+    rightActions: WindowBaseAction[];
+};
+export {};