@m4l/components 9.1.94 → 9.1.95

package/components/areas/components/AreasViewer/subcomponents/Area/subcomponents/AreaGridLayout/index.js

@@ -4,7 +4,7 @@ import { W as Window } from "../Window/index.js";
 import { u as useAreasStore } from "../../../../../../hooks/useAreas/index.js";
 import { a as areasViewerClasses } from "../../../../classes/index.js";
 import clsx from "clsx";
-import { R as RESPONSIVE_COLAPSED_HEIGHTS, a as RESPONSIVE_ROW_HEIGHTS, M as MARGIN_GRIDLAYOUT, P as PADDING_GRIDLAYOUT } from "../../../../../../contexts/AreasContext/helper.js";
+import { R as RESPONSIVE_COLAPSED_HEIGHTS, a as RESPONSIVE_ROW_HEIGHTS, M as MARGIN_GRIDLAYOUT, P as PADDING_GRIDLAYOUT } from "../../../../../../contexts/AreasContext/helpers/helper.js";
 import { w as withSizeProvider } from "../../../../../../../GridLayout/subcomponents/withSizeProvider/index.js";
 import { R as Responsive } from "../../../../../../../GridLayout/subcomponents/Responsive/index.js";
 const ResponsiveGridLayout = withSizeProvider(Responsive);

package/components/areas/components/AreasViewer/subcomponents/Area/subcomponents/Window/subcomponents/Header/index.js

@@ -18,7 +18,7 @@ import { I as IconButton } from "../../../../../../../../../mui_extended/IconBut
 import { I as Icon } from "../../../../../../../../../Icon/Icon.js";
 function Header(props) {
   const { areaId, windowId, emergeType } = props;
-  const [url_icon, title, moduleActions, onClose, version, windowOptions, fnQueryClose] = useAreasStore((state) => {
+  const [url_icon, title, moduleActions, onClose, version, windowOptions, fnQueryClose, moduleCount] = useAreasStore((state) => {
     const window = state.hashWindows[windowId];
     return [
       window.iconUrl,
@@ -27,7 +27,8 @@ function Header(props) {
       window.onClose,
       window.version,
       window.windowOptions,
-      window.fnQueryClose
+      window.fnQueryClose,
+      window.moduleCount
     ];
   }, shallow);
   const { saveModuleCookies, resetModuleCookies } = useAreasStore(
@@ -88,7 +89,10 @@ function Header(props) {
     /* @__PURE__ */ jsx(LinearProgressIndeterminate, {}),
     /* @__PURE__ */ jsxs("div", { className: areasViewerClasses.windowHeaderContent, children: [
       /* @__PURE__ */ jsx(Icon, { src: url_icon, size: "medium" }),
-      /* @__PURE__ */ jsx(Typography, { className: areasViewerClasses.windowHeaderTitle, variant: "h5", children: title }),
+      /* @__PURE__ */ jsxs(Typography, { className: areasViewerClasses.windowHeaderTitle, variant: "h5", children: [
+        title,
+        moduleCount ? `:${moduleCount}` : null
+      ] }),
       /* @__PURE__ */ jsxs("div", { className: areasViewerClasses.windowHeaderCancelHandle, children: [
         !collapsed && /* @__PURE__ */ jsx(MainActions, { windowId }),
         !collapsed && menuActions.length > 0 && /* @__PURE__ */ jsx(

package/components/areas/contexts/AreasContext/helpers/generateModuleCount.d.ts

@@ -0,0 +1,9 @@
+import { WindowStateProps } from '../../../types';
+/**
+ * Función que genera un string con el número de módulos repetidos en una misma área.
+ * Esta función recibe un hash de ventanas y evalúa cada ventana para contar cuántas veces se repite un módulo en una misma área
+ * y genera un number que representa el 'moduleCount' de la ventana.
+ * @param hashWindows
+ * @returns number con el número de módulos repetidos en una mista area
+ */
+export declare const generateModuleCount: (areaId: string, moduleId: string, hashWindows: Record<string, WindowStateProps>) => number;

package/components/areas/contexts/AreasContext/helpers/generateModuleCount.js

@@ -0,0 +1,16 @@
+const generateModuleCount = (areaId, moduleId, hashWindows) => {
+  let moduleCount = 1;
+  const windows = Object.values(hashWindows);
+  const windowsInArea = windows.filter((window) => window.areaId === areaId);
+  const sameWindows = windowsInArea.filter((window) => window.moduleId === moduleId);
+  sameWindows.sort((a, b) => (a?.moduleCount ?? 0) - (b?.moduleCount ?? 0));
+  sameWindows.forEach((window) => {
+    if (window?.moduleCount === moduleCount) {
+      moduleCount++;
+    }
+  });
+  return moduleCount;
+};
+export {
+  generateModuleCount as g
+};

package/components/areas/contexts/AreasContext/{helper.d.ts → helpers/helper.d.ts}

@@ -1,7 +1,7 @@
 import { WritableDraft } from 'immer/dist/internal';
-import { Area, AreasStateWithActions } from './types';
-import { WindowState } from '../../types';
-import { Layouts } from '../../../GridLayout/types';
+import { Area, AreasStateWithActions } from '../types';
+import { WindowState } from '../../../types';
+import { Layouts } from '../../../../GridLayout/types';
 export declare const PADDING_GRIDLAYOUT = 11;
 export declare const MARGIN_GRIDLAYOUT = 11;
 export declare const DEBOUCED_SAVE_TIME = 500;

package/components/areas/contexts/AreasContext/{helper.js → helpers/helper.js}

@@ -1,8 +1,8 @@
-import { u as useAreasViewerUtilityClasses } from "../../components/AreasViewer/classes/index.js";
-import { u as useAreasAdminUtilityClasses } from "../../components/AreasAdmin/classes/index.js";
-import { c as createDynamicMFStore } from "../DynamicMFParmsContext/store.js";
-import { g as getAreasDictionary, A as AREAS_DICCTIONARY } from "../../dictionary.js";
-import { c as addLayoutItemToBreakPointIfNoExists } from "../../../GridLayout/subcomponents/Responsive/responsiveUtils.js";
+import { u as useAreasViewerUtilityClasses } from "../../../components/AreasViewer/classes/index.js";
+import { u as useAreasAdminUtilityClasses } from "../../../components/AreasAdmin/classes/index.js";
+import { c as createDynamicMFStore } from "../../DynamicMFParmsContext/store.js";
+import { g as getAreasDictionary, A as AREAS_DICCTIONARY } from "../../../dictionary.js";
+import { c as addLayoutItemToBreakPointIfNoExists } from "../../../../GridLayout/subcomponents/Responsive/responsiveUtils.js";
 const PADDING_GRIDLAYOUT = 11;
 const MARGIN_GRIDLAYOUT = 11;
 const DEBOUCED_SAVE_TIME = 500;

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

@@ -3,7 +3,7 @@ import { createContext, useRef, useCallback, useEffect } from "react";
 import { useStore } from "zustand";
 import { shallow } from "zustand/shallow";
 import { useResponsiveDesktop, useFirstRender } from "@m4l/graphics";
-import { useHostTools, useModuleDictionary, useNetwork, useModuleSkeleton, EmitEvents } from "@m4l/core";
+import { useHostTools, useModuleDictionary, useNetwork, useModuleSkeleton, useFlagsStore, CommonFlags, EmitEvents } from "@m4l/core";
 import { c as createAreasStore } from "./store.js";
 const AreasContext = createContext(null);
 function AreasProvider(props) {
@@ -14,6 +14,7 @@ function AreasProvider(props) {
   const isDesktop = useResponsiveDesktop();
   const isSkeleton = useModuleSkeleton();
   const isFirstRender = useFirstRender([getLabel]);
+  const { addFlag } = useFlagsStore((state) => state.flagsActions);
   const areasStoreRef = useRef();
   if (!areasStoreRef.current) {
     areasStoreRef.current = createAreasStore({
@@ -28,7 +29,6 @@ function AreasProvider(props) {
         isSkeleton,
         focus: false
       }
-      // onLoad,
     });
     areasStoreRef.current?.getState().areasActions.init();
   }
@@ -50,6 +50,7 @@ function AreasProvider(props) {
   useEffect(() => {
     if (status === "loaded") {
       onLoad && onLoad();
+      addFlag(CommonFlags.FLAG_AREAS_LOADED);
     }
   }, [status]);
   useEffect(() => {

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

@@ -3,10 +3,11 @@ import { devtools } from "zustand/middleware";
 import { immer } from "zustand/middleware/immer";
 import { u as useAreasViewerUtilityClasses } from "../../components/AreasViewer/classes/index.js";
 import { u as useAreasAdminUtilityClasses } from "../../components/AreasAdmin/classes/index.js";
-import { u as updateOwnerStateClasses, C as COOKIE_AREAS_ADMIN_CONTAINER_ID, b as COOKIE_AREAS_ADMIN_ID, D as DEFAULT_AREA, c as addArea, g as getSelectedAreaIdFromCookies, d as DEFAULT_WINDOW, a as RESPONSIVE_ROW_HEIGHTS, P as PADDING_GRIDLAYOUT, M as MARGIN_GRIDLAYOUT, N as NORMALIZED_COLS, e as deleteLayoutFromBreakPoints, f as COOKIE_WINDOWS, h as COOKIE_BREAKPOINT_LAYOUTS, i as DEBOUCED_SAVE_TIME, s as setColapsedLayoutBreakPoints, j as getDataFromResponse, k as getCookiesContainer } from "./helper.js";
+import { u as updateOwnerStateClasses, C as COOKIE_AREAS_ADMIN_CONTAINER_ID, b as COOKIE_AREAS_ADMIN_ID, D as DEFAULT_AREA, c as addArea, g as getSelectedAreaIdFromCookies, d as DEFAULT_WINDOW, a as RESPONSIVE_ROW_HEIGHTS, P as PADDING_GRIDLAYOUT, M as MARGIN_GRIDLAYOUT, N as NORMALIZED_COLS, e as deleteLayoutFromBreakPoints, f as COOKIE_WINDOWS, h as COOKIE_BREAKPOINT_LAYOUTS, i as DEBOUCED_SAVE_TIME, s as setColapsedLayoutBreakPoints, j as getDataFromResponse, k as getCookiesContainer } from "./helpers/helper.js";
 import { c as createDynamicMFStore } from "../DynamicMFParmsContext/store.js";
 import cloneDeep from "lodash-es/cloneDeep";
 import debounce from "lodash-es/debounce";
+import { g as generateModuleCount } from "./helpers/generateModuleCount.js";
 import { g as getCookie, s as setCookie, d as deleteCookie } from "../../../../helpers/cookies/cookies.js";
 import { d as addLayoutItemToBreakPoints, e as cloneLayouts } from "../../../GridLayout/subcomponents/Responsive/responsiveUtils.js";
 import { k as isEqualLayouts } from "../../../GridLayout/utils.js";
@@ -102,11 +103,7 @@ const createAreasStore = (initProps) => {
             });
           },
           /**
-           * Store Add Area
-           * @createdAt 2024-12-30 14:36:06 - automatic
-           * @updatedAt 2025-01-29 16:33:53 - automatic
-           * @updatedUser cesar - automatic
-           * @author cesar - automatic
+           * Acción encargada de añadir un área de trabajo en blanco
            */
           addArea: () => {
             let newId = "";
@@ -160,11 +157,12 @@ const createAreasStore = (initProps) => {
                     delete state.hashWindows[key];
                   }
                 }
+                const indexDeleteArea = state.areasIds.findIndex((elementAreaId) => elementAreaId === areaId);
                 state.areasIds.splice(removeIndex, 1);
                 delete state.hashAreas[areaId];
-              }
-              if (state.currentAreaId === areaId) {
-                selectNewAreaId = state.areasIds[0];
+                if (state.currentAreaId === areaId) {
+                  selectNewAreaId = state.areasIds[indexDeleteArea <= state.areasIds.length - 1 ? indexDeleteArea : state.areasIds.length - 1];
+                }
               }
               if (state.loadAreasFromNetwork) {
                 state.networkOperation({
@@ -264,6 +262,7 @@ const createAreasStore = (initProps) => {
           addLayout: (areaId, windowId, newWindowProps) => {
             let previousId = windowId;
             const freeMove = newWindowProps.emergeType === "popup";
+            const moduleCount = generateModuleCount(get().currentAreaId, newWindowProps.moduleId, get().hashWindows);
             const newLayoutItem = {
               ...newWindowProps.layoutProps,
               i: windowId,
@@ -300,7 +299,8 @@ const createAreasStore = (initProps) => {
                     get().areaActions.closeLayout(areaId, removeLayoutId);
                   },
                   ...DEFAULT_WINDOW,
-                  dynamicMFStore
+                  dynamicMFStore,
+                  moduleCount
                 };
                 area.layoutItemsIds.push(windowId);
                 if (newWindowProps.emergeType === "layout") {
@@ -442,13 +442,15 @@ const createAreasStore = (initProps) => {
                 windowId
               });
               state.windowsModals.push(windowId);
+              const moduleCount = generateModuleCount(get().currentAreaId, newWindowModalProps.moduleId, get().hashWindows);
               state.hashWindowsModals[windowId] = {
                 ...newWindowModalProps,
                 areaId,
                 windowId,
                 ...DEFAULT_WINDOW,
                 onClose: get().areaActions.closeWindowModal,
-                dynamicMFStore
+                dynamicMFStore,
+                moduleCount
               };
               state.hashWindows[windowId] = state.hashWindowsModals[windowId];
             });

package/components/areas/contexts/AreasContext/tests/Store.test.d.ts

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

package/components/areas/types.d.ts

@@ -111,6 +111,11 @@ export type WindowState = {
      * @updatedUser cesar - automatic
      */
     fnQueryClose?: () => void;
+    /**
+     * moduleCount representa el identificador de
+     * la ventana cuando se repite un módulo en una misma área
+     */
+    moduleCount?: number;
 };
 /**
  * Opciones para la ventana.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m4l/components",
-  "version": "9.1.94",
+  "version": "9.1.95",
   "license": "UNLICENSED",
   "lint-staged": {
     "*.{js,ts,tsx}": "eslint --fix --max-warnings 0"
@@ -53,7 +53,7 @@
     "zustand": "4.3.6"
   },
   "peerDependencies": {
-    "@m4l/core": "^2.0.15",
+    "@m4l/core": "^2.0.18",
     "@m4l/graphics": "^7.0.8",
     "@m4l/styles": "^7.1.18",
     "@mui/lab": "5.0.0-alpha.173",