@m4l/components 0.1.76 → 0.1.77

package/components/areas/components/AreasAdmin/{index.946eebb9.js → index.cc4cbf56.js}

@@ -1,63 +1,63 @@
-import { I as IconButton } from "../../../mui_extended/IconButton/index.1a9d4fa5.js";
-import { u as useAreasStore } from "../../hooks/useAreas/index.40917e99.js";
+import { I as IconButton } from "../../../mui_extended/IconButton/index.fc5b7c2d.js";
+import { u as useAreasStore } from "../../hooks/useAreas/index.3406a6cb.js";
 import { useEnvironment, useModuleDictionary } from "@m4l/core";
 import { useState, useRef, useMemo } from "react";
 import * as Yup from "yup";
 import { generateUtilityClasses, useTheme } from "@mui/material";
-import "../../../mui_extended/Accordion/index.3faafd8b.js";
-import { I as Icon } from "../../../Icon/index.9dae8337.js";
+import "../../../mui_extended/Accordion/index.12b1339a.js";
+import { I as Icon } from "../../../Icon/index.ecb63e65.js";
 import clsx from "clsx";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { T as Typography } from "../../../mui_extended/Typography/index.443590d6.js";
 import "../../../mui_extended/Avatar/index.75e6ed57.js";
 import "react-router-dom";
 import "@mui/material/Button";
-import "../../../mui_extended/Button/index.fdb5dcbd.js";
+import { B as Button } from "../../../mui_extended/Button/index.4288f9fc.js";
+import "../../../mui_extended/Badge/index.8c2b8b66.js";
 import "../../../Image/index.c18ebf5a.js";
 import "@mui/lab";
 import { P as Popover } from "../../../mui_extended/Popover/index.9f35d0eb.js";
-import { M as MenuActions } from "../../../mui_extended/MenuActions/index.ba1da3b3.js";
-import "../../../mui_extended/Pager/index.67bda2c5.js";
+import { M as MenuActions } from "../../../mui_extended/MenuActions/index.f5b1c022.js";
+import "../../../mui_extended/Pager/index.435af0df.js";
 import "../../../mui_extended/Tab/index.9e2f6e34.js";
 import "../../../mui_extended/Tooltip/index.5a795dcd.js";
 import { unstable_composeClasses } from "@mui/base";
-import { g as getComponentUtilityClass } from "../../../../utils/index.008b4c2a.js";
+import { g as getComponentUtilityClass } from "../../../../utils/index.c43a95f4.js";
 import { A as AREAS_ADMIN_CLASS_NAME } from "../../constants.66529246.js";
-import { I as ICONS } from "../../icons.19cde4b4.js";
+import { I as ICONS } from "../../icons.8266ccc8.js";
 import "../../contexts/DynamicMFParmsContext/index.1607c78e.js";
-import "../../../../contexts/ModalContext/index.699f95fa.js";
+import "../../../../contexts/ModalContext/index.dee85a61.js";
 import { R as RHFormProvider } from "../../../../contexts/RHFormContext/index.fe175bab.js";
 import "react-hook-form";
-import "../../../hook-form/RHFAutocomplete/index.a063dc44.js";
-import "../../../HelperText/index.9864f773.js";
+import "../../../hook-form/RHFAutocomplete/index.ac2b1fae.js";
+import "../../../HelperText/index.ef31df1f.js";
 import "lodash/debounce";
-import "../../../hook-form/RHFAutocompleteAsync/index.ddfd9cc9.js";
-import "../../../hook-form/RHFCheckbox/index.7e7f220b.js";
+import "../../../hook-form/RHFAutocompleteAsync/index.8b4ccc8d.js";
+import "../../../hook-form/RHFCheckbox/index.acef119c.js";
 import "@mui/x-date-pickers";
-import "../../../hook-form/RHFDateTime/index.d330709b.js";
+import "../../../hook-form/RHFDateTime/index.5b080342.js";
 import { useResponsiveDesktop } from "@m4l/graphics";
-import { R as RHFTextField } from "../../../hook-form/RHFTextField/index.e5336d09.js";
-import "../../../hook-form/RHFPeriod/index.e2b1293b.js";
-import "../../../Period/index.526791a3.js";
-import { A as Actions } from "../../../CommonActions/components/Actions/index.e376a68e.js";
-import { A as ActionCancel } from "../../../CommonActions/components/ActionCancel/index.453c2d24.js";
-import { A as ActionIntro } from "../../../CommonActions/components/ActionIntro/index.c653a266.js";
-import "../../../../react-draggable.6d7949a3.js";
-import "../../../ModalDialog/index.d9c5d400.js";
-import "../../../Resizeable/index.f6e48e56.js";
-import "../../../modal/index.1b25b61d.js";
+import { R as RHFTextField } from "../../../hook-form/RHFTextField/index.e751dca7.js";
+import "../../../hook-form/RHFPeriod/index.5304e3bd.js";
+import "../../../Period/index.711db043.js";
+import { A as Actions } from "../../../CommonActions/components/Actions/index.3eba9d91.js";
+import { A as ActionCancel } from "../../../CommonActions/components/ActionCancel/index.b748a38e.js";
+import { A as ActionIntro } from "../../../CommonActions/components/ActionIntro/index.a7d92e66.js";
+import "../../../../react-draggable.7abb5d0a.js";
+import "../../../Resizeable/index.9a9c79a4.js";
+import "../../../modal/index.a0978193.js";
 import { shallow } from "zustand/shallow";
 import { styled } from "@mui/material/styles";
 import { S as ScrollBar } from "../../../ScrollBar/index.bbe48f4d.js";
-import "../AreasViewer/index.bf4191ea.js";
-import "../../../LinearProgressIndeterminate/index.d34d398f.js";
-import { g as getAreasDictionary, D as DICCTIONARY } from "../../dictionary.3fabae50.js";
-import "../../contexts/AreasContext/index.f0397b7c.js";
+import { g as getAreasDictionary, D as DICCTIONARY } from "../../dictionary.afb7e3d9.js";
+import "../AreasViewer/index.9c2aaaeb.js";
+import "../../../LinearProgressIndeterminate/index.60dabc06.js";
+import "../../contexts/AreasContext/index.c8147e8e.js";
 import "../../contexts/WindowToolsMFContext/index.8f3e2a04.js";
 import "zustand";
 import "lodash/isString";
 import "react-dropzone";
-import "../../../hook-form/RHFUpload/index.17e7f9eb.js";
+import "../../../hook-form/RHFUpload/index.25db0511.js";
 const areasAdminClasses = generateUtilityClasses(AREAS_ADMIN_CLASS_NAME, [
   "root",
   "areaChipRoot",
@@ -71,6 +71,8 @@ const areasAdminClasses = generateUtilityClasses(AREAS_ADMIN_CLASS_NAME, [
   "areaChipMobileIconContainer",
   "areaIconLayer",
   "areaChipEditButton",
+  "areasPopoverMobileOptions",
+  "areasPopoverListWindows",
   "selected",
   "isMobile",
   "disabled"
@@ -88,7 +90,9 @@ const useAreasAdminUtilityClasses = (ownerState) => {
     areaContainerChipEditButton: ["areaContainerChipEditButton"],
     areaChipDeleteButton: ["areaChipDeleteButton"],
     areaChipEditButton: ["areaChipEditButton"],
-    areasAddButton: ["areasAddButton"]
+    areasAddButton: ["areasAddButton"],
+    areasPopoverMobileOptions: ["areasPopoverMobileOptions"],
+    areasPopoverListWindows: ["areasPopoverListWindows"]
   };
   return unstable_composeClasses(slots, getComponentUtilityClass(AREAS_ADMIN_CLASS_NAME), {});
 };
@@ -164,7 +168,6 @@ const AreaChip = (props) => {
   const {
     areaId,
     selected,
-    areaName,
     disabled
   } = props;
   const {
@@ -176,6 +179,7 @@ const AreaChip = (props) => {
     selectArea,
     editArea
   } = useAreasStore((state) => state.areasActions);
+  const areaName = useAreasStore((state) => state.hashAreas[areaId].name, shallow);
   const [open, setOpen] = useState(false);
   const {
     getLabel
@@ -199,7 +203,7 @@ const AreaChip = (props) => {
     inputEditArea: areaName
   };
   const validationSchema = useMemo(() => Yup.object().shape({
-    inputEditArea: Yup.string().required(getLabel(getAreasDictionary("validation_edit_area")))
+    inputEditArea: Yup.string().required(getLabel(getAreasDictionary(DICCTIONARY.validation_edit_area)))
   }), [getLabel]);
   return /* @__PURE__ */ jsxs("div", {
     role: "presentation",
@@ -251,7 +255,7 @@ const AreaChip = (props) => {
         validationSchema,
         children: [/* @__PURE__ */ jsxs(EditAreaHeader, {
           children: [/* @__PURE__ */ jsx(Typography, {
-            children: getLabel(getAreasDictionary(DICCTIONARY.label_edit_area))
+            children: getLabel(DICCTIONARY.label_edit_area)
           }), /* @__PURE__ */ jsx(IconButton, {
             src: `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS.CLOSE}`,
             size: "small",
@@ -292,12 +296,70 @@ const AreasAdminRoot = styled("div")`
 
  
 `;
+const PanelWindowPopUp = (props) => {
+  const {
+    currentAreaId
+  } = props;
+  const {
+    host_static_assets,
+    environment_assets
+  } = useEnvironment();
+  const windowsLayouts = useAreasStore((state) => state.hashAreas[currentAreaId].hashLayoutItems.filter((li) => state.hashWindows[li].emergeType === "layout").map((lim) => {
+    const w = state.hashWindows[lim];
+    return {
+      i: w.windowId,
+      url_icon: w.url_icon,
+      title: w.title
+    };
+  }), shallow);
+  const theme = useTheme();
+  const {
+    maximizeLayout
+  } = useAreasStore((state) => state.areaActions);
+  const onTouched = (layoutId) => {
+    maximizeLayout(currentAreaId, layoutId);
+  };
+  const menuActions = windowsLayouts.map((element) => {
+    return {
+      onClick: () => onTouched(element.i),
+      label: element.title,
+      urlIcon: element.url_icon
+    };
+  });
+  return /* @__PURE__ */ jsx(MenuActions, {
+    urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS.MODULE}`,
+    arrowType: "no-arrow",
+    marginTop: "12px!important",
+    marginLeft: "14px!important",
+    anchorOrigin: {
+      vertical: "bottom",
+      horizontal: "right"
+    },
+    transformOrigin: {
+      vertical: "top",
+      horizontal: "right"
+    },
+    menuActions,
+    className: areasAdminClasses.areasPopoverListWindows,
+    menuActionSx: theme.components?.M4LAreasAdminMobilePopoverOptions?.styleOverrides
+  });
+};
 const AreaChipMobile = () => {
-  const areas = useAreasStore((state) => state.areas, shallow);
+  const areas = useAreasStore((state) => state.areas.map((a) => ({
+    id: a,
+    name: state.hashAreas[a].name
+  })), shallow);
   const {
     selectArea
   } = useAreasStore((state) => state.areasActions);
   const currentAreaId = useAreasStore((state) => state.currentAreaId, shallow);
+  const {
+    addArea
+  } = useAreasStore((state) => state.areasActions, shallow);
+  const {
+    getLabel
+  } = useModuleDictionary();
+  const theme = useTheme();
   const currentArea = areas.find((area) => area.id === currentAreaId);
   const {
     host_static_assets,
@@ -316,11 +378,12 @@ const AreaChipMobile = () => {
     children: [currentArea ? /* @__PURE__ */ jsx(AreaChip, {
       areaId: currentArea.id,
       selected: true,
-      areaName: currentArea.name,
       disabled: true
-    }, currentArea.id) : null, menuActions.length > 0 ? /* @__PURE__ */ jsx("div", {
+    }, currentArea.id) : null, menuActions.length > 0 ? /* @__PURE__ */ jsxs("div", {
       className: areasAdminClasses.areaChipMobileIconContainer,
-      children: /* @__PURE__ */ jsx(MenuActions, {
+      children: [currentArea ? /* @__PURE__ */ jsx(PanelWindowPopUp, {
+        currentAreaId: currentArea.id
+      }) : null, /* @__PURE__ */ jsx(MenuActions, {
         urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS.CHEVRON_DOWN}`,
         arrowType: "no-arrow",
         marginTop: "12px!important",
@@ -333,8 +396,18 @@ const AreaChipMobile = () => {
           vertical: "top",
           horizontal: "right"
         },
-        menuActions
-      })
+        menuActions,
+        className: areasAdminClasses.areasPopoverMobileOptions,
+        menuActionSx: theme.components?.M4LAreasAdminMobilePopoverOptions?.styleOverrides,
+        endListElement: /* @__PURE__ */ jsx(Button, {
+          onClick: addArea,
+          variant: "outlined",
+          startIcon: /* @__PURE__ */ jsx(Icon, {
+            src: `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS.ADD_AREA}`
+          }),
+          children: getLabel(getAreasDictionary(DICCTIONARY.area_add_new))
+        })
+      })]
     }) : null]
   });
 };
@@ -342,6 +415,7 @@ function AreasAdmin() {
   const areas = useAreasStore((state) => state.areas, shallow);
   const currentArea = useAreasStore((state) => state.currentAreaId, shallow);
   const status = useAreasStore((state) => state.ownerState.status);
+  const testStore = useAreasStore((state) => state);
   const classesRoot = useAreasStore((state) => state.adminClasses.root);
   const areasLength = useAreasStore((state) => state.areas.length);
   const isDesktop = useResponsiveDesktop();
@@ -352,6 +426,7 @@ function AreasAdmin() {
     host_static_assets,
     environment_assets
   } = useEnvironment();
+  console.log("test areas estore bruce", testStore);
   console.log("Render AreasAdmin", areas);
   if (status !== "loaded") {
     return null;
@@ -368,19 +443,18 @@ function AreasAdmin() {
       children: isDesktop ? /* @__PURE__ */ jsx(ScrollBar, {
         children: /* @__PURE__ */ jsx(Fragment, {
           children: areas.map((area) => /* @__PURE__ */ jsx(AreaChip, {
-            areaId: area.id,
-            selected: area.id === currentArea,
-            areaName: area.name,
+            areaId: area,
+            selected: area === currentArea,
             disabled: areasLength === 1
-          }, area.id))
+          }, area))
         })
       }) : /* @__PURE__ */ jsx(AreaChipMobile, {})
-    }), /* @__PURE__ */ jsx(IconButton, {
+    }), isDesktop ? /* @__PURE__ */ jsx(IconButton, {
       className: areasAdminClasses.areasAddButton,
       src: `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS.ADD_AREA}`,
       size: "small",
       onClick: addArea
-    })]
+    }) : null]
   });
 }
 export {

package/components/areas/components/AreasAdmin/subcomponents/AreaChip/types.d.ts

@@ -1,7 +1,6 @@
 import { FieldValues } from 'react-hook-form';
 export interface AreaChipProps {
     areaId: string;
-    areaName: string;
     selected: boolean;
     disabled: boolean;
 }

package/components/areas/components/AreasAdmin/subcomponents/AreaChipMobile/subcomponents/PanelWindowPopUp/index.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { PanelWindowPopUpProps } from "./types";
+export declare const PanelWindowPopUp: (props: PanelWindowPopUpProps) => import("react").JSX.Element;

package/components/areas/components/AreasAdmin/subcomponents/AreaChipMobile/subcomponents/PanelWindowPopUp/types.d.ts

@@ -0,0 +1,3 @@
+export interface PanelWindowPopUpProps {
+    currentAreaId: string;
+}

package/components/areas/components/AreasViewer/classes/index.d.ts

@@ -1,5 +1,5 @@
 import { AreasViewerClasses } from './types';
 import { OwnerState } from '../../../contexts/AreasContext/types';
 export declare const areasViewerClasses: AreasViewerClasses;
-export declare const useAreasViewerUtilityClasses: (ownerState: OwnerState) => Record<"root" | "windowLinearProgressBar" | "areaRoot" | "areasLoadingErrorRoot" | "areasLoadingErrorLoading" | "areasLoadingError" | "areasLoadingErrorIcon" | "areasLoadingErrorTitle" | "areasLoadingErrorDescription" | "areasLoadingErrorDivider" | "areaGridLayoutPanelContainer" | "areaGridLayout" | "areaGridLayoutPopupsContainer" | "windowRoot" | "windowRootContainer" | "windowHeader" | "windowHeaderTitle" | "windowHeaderMainActions" | "windowContent" | "windowLinearProgressRoot" | "windowPopupRoot" | "windowModalRoot" | "selectedWindow" | "windowToastiesContainer" | "windowToastiesContainerTostys" | "windowToastyMeesageButtonsContainer" | "windowToastyMessage" | "windowToastyButtonsContainer" | "windowToastyPin" | "windowToastyClose" | "panelWindowsRoot" | "panelWindowsButtonContainer" | "windowToastyContainer", string>;
+export declare const useAreasViewerUtilityClasses: (ownerState: OwnerState) => Record<"root" | "windowLinearProgressBar" | "areaRoot" | "areasLoadingErrorRoot" | "areasLoadingErrorLoading" | "areasLoadingError" | "areasLoadingErrorIcon" | "areasLoadingErrorTitle" | "areasLoadingErrorDescription" | "areasLoadingErrorDivider" | "areaGridLayoutPanelContainer" | "areaGridLayout" | "areaGridLayoutPopupsContainer" | "areasWindowPopUpList" | "windowRoot" | "windowRootContainer" | "windowHeader" | "windowHeaderTitle" | "windowHeaderMainActions" | "windowContent" | "windowLinearProgressRoot" | "windowPopupRoot" | "windowModalRoot" | "selectedWindow" | "windowToastiesContainer" | "windowToastiesContainerTostys" | "windowToastyMeesageButtonsContainer" | "windowToastyMessage" | "windowToastyButtonsContainer" | "windowToastyPin" | "windowToastyClose" | "panelWindowsRoot" | "panelWindowsButtonContainer" | "windowToastyContainer", string>;
 export declare type ViwerClasses = ReturnType<typeof useAreasViewerUtilityClasses>;

package/components/areas/components/AreasViewer/classes/types.d.ts

@@ -12,6 +12,7 @@ export interface AreasViewerClasses {
     areaGridLayoutPanelContainer: string;
     areaGridLayout: string;
     areaGridLayoutPopupsContainer: string;
+    areasWindowPopUpList: string;
     windowRoot: string;
     windowHeader: string;
     windowHeaderContent: string;
@@ -35,6 +36,7 @@ export interface AreasViewerClasses {
     panelWindowsButtonContainer: string;
     selected: string;
     selectedWindow: string;
+    colapsed: string;
     isMobile: string;
     loading: string;
     pinIn: string;