@m4l/components 9.20.0 → 9.21.0

package/components/areas/components/AreasAdmin/AreasAdmin.js

@@ -1,139 +1,315 @@
-import { jsx as e, jsxs as I, Fragment as y } from "@emotion/react/jsx-runtime";
-import { useAreasStore as n } from "../../hooks/useAreas/index.js";
-import { useEnvironment as L, useModuleDictionary as P } from "@m4l/core";
-import j from "clsx";
-import { AreaChip as Y } from "./subcomponents/AreaChip/AreaChip.js";
-import { shallow as s } from "zustand/shallow";
-import { ICONS as w } from "../../icons.js";
-import { AreaChipMobile as B } from "./subcomponents/AreaChipMobile/AreaChipMobile.js";
-import { useRef as z } from "react";
-import { getAreasDictionary as l, AREAS_DICCTIONARY as u } from "../../dictionary.js";
-import { AreasAdminRootStyled as F, AreasAdminContentStyled as G, AreasContainerChipIconStyled as K, AreasContainerContentChipsStyled as U, IconButtonAddAreaStyled as q, AreaContentChipStyled as H, ContainerAdminWindowsStyled as J } from "./slots/AreasAdminSlots.js";
-import { useIsMobile as Q } from "@m4l/graphics";
-import { useComponentSize as V } from "../../../../hooks/useComponentSize/index.js";
-import { Typography as X } from "@m4l/base";
-import { AREAS_ADMIN_KEY_COMPONENT as S } from "./constants.js";
-import { getComponentSlotRoot as Z } from "../../../../utils/getComponentSlotRoot.js";
-import { getPropDataTestId as oo } from "../../../../test/getNameDataTestId.js";
-import { MenuActions as eo } from "../../../MenuActions/MenuActions.js";
-import { AreasAdminSlots as ro } from "./slots/AreasAdminEnum.js";
-const _o = (_) => {
+import { jsxs as u, jsx as t } from "@emotion/react/jsx-runtime";
+import { useModuleDictionary as Me } from "@m4l/core";
+import { useIsMobile as _e } from "@m4l/graphics";
+import { LayoutTableFill as be, ActionsEditOutlined as ge, ActionsTrashOutlined as Se, ActionsAddSquareOutlined as we } from "@m4l/icons";
+import { Tooltip as Ee, Icon as ve, Typography as ye } from "@m4l/base";
+import Le from "clsx";
+import * as Te from "yup";
+import { useState as h, useRef as Ce, useEffect as Oe } from "react";
+import { shallow as p } from "zustand/shallow";
+import { getComponentSlotRoot as De } from "../../../../utils/getComponentSlotRoot.js";
+import { getPropDataTestId as Pe } from "../../../../test/getNameDataTestId.js";
+import { useModal as xe } from "../../../../hooks/useModal/index.js";
+import { MenuDivider as Re } from "../../../extended/mui/MenuDivider/MenuDivider.js";
+import { getAreasDictionary as i, AREAS_DICCTIONARY as l } from "../../dictionary.js";
+import { useAreasStore as c } from "../../hooks/useAreas/index.js";
+import { AREAS_ADMIN_TOOLTIP_DELAY_PROPS as Ne, AREAS_MENU_MAX_VISIBLE_ITEMS as $e, AREAS_ADMIN_KEY_COMPONENT as W, DEFAULT_HORIZONTAL_MODULE_ITEM_LIMIT as ze, DEFAULT_VERTICAL_MODULE_ITEM_LIMIT as We } from "./constants.js";
+import { AreasAdminRootStyled as ke, AreasAdminContentStyled as Be, AreasTriggerButtonStyled as Fe, AreasMenuContentStyled as Ve, AreasMenuScrollAreaStyled as Ue, AreasMenuListStyled as He, AreaMenuItemActionsStyled as je, AreaMenuActionButtonStyled as k, AreasMenuFooterStyled as Ye, ButtonAddAreaStyled as qe, AreasSectionDividerStyled as Ke, EditAreaHeaderStyled as Xe } from "./slots/AreasAdminSlots.js";
+import { createValidationSchema as Ze, createValidationFullObject as Ge, createValidationPartialObject as Je } from "../../../hook-form/RHFormProvider/schema.js";
+import { ContainerModules as Qe } from "./subcomponents/ContainerModules/ContainerModules.js";
+import { RHFormProvider as et } from "../../../hook-form/RHFormProvider/RHFormProvider.js";
+import { RHFTextField as tt } from "../../../hook-form/RHFTextField/RHFTextField.js";
+import { ActionsContainer as rt } from "../../../CommonActions/components/ActionsContainer/ActionsContainer.js";
+import { Popover as B } from "../../../extended/mui/Popover/Popover.js";
+import { MenuItem as F } from "../../../extended/mui/MenuItem/MenuItem.js";
+import { ActionCancel as ot } from "../../../CommonActions/components/ActionCancel/ActionCancel.js";
+import { ActionIntro as nt } from "../../../CommonActions/components/ActionIntro/ActionIntro.js";
+import { AreasAdminSlots as at } from "./slots/AreasAdminEnum.js";
+import { WindowConfirm as it } from "../../../WindowConfirm/WindowConfirm.js";
+function lt(g, f) {
+  return f !== void 0 ? Math.max(f, 1) : g === "horizontal" ? ze : We;
+}
+const Nt = (g) => {
   const {
-    color: p = "primary",
-    size: g = "medium",
-    className: R,
-    dataTestId: b,
-    ...D
-  } = _, h = Q(), { currentSize: r } = V(g), N = n((o) => o.areasIds ?? [], s), a = n((o) => o.currentAreaId, s), $ = n((o) => o.ownerState?.status), x = n((o) => o.areasIds.length), { addArea: E } = n((o) => o.areasActions, s), { maximizeLayout: O } = n((o) => o.areaActions), A = n(
-    (o) => o.hashAreas[a] ? o.hashAreas[a].maximizedId : !1,
-    s
-  ), m = n(
-    (o) => o.hashAreas[o.currentAreaId]?.layoutItemsIds?.filter((t) => o.hashWindows[t].emergeType === "layout")?.map((t) => {
-      const i = o.hashWindows[t];
+    color: f = "primary",
+    size: o = "medium",
+    orientation: m = "vertical",
+    moduleItemLimit: V,
+    className: U,
+    dataTestId: H,
+    ...j
+  } = g, Y = _e(), { getLabel: n } = Me(), { openModal: q } = xe(), [I, T] = h(null), [S, C] = h(null), [K, O] = h(null), [A, D] = h(null), [w, E] = h(null), P = Ce(null), d = c(
+    (e) => e.areasIds.map((r) => ({ id: r, name: e.hashAreas[r].name })),
+    p
+  ), M = c((e) => e.currentAreaId, p), X = c((e) => e.ownerState?.status), { addArea: Z, deleteArea: G, editArea: J, selectArea: Q } = c((e) => e.areasActions, p), { maximizeLayout: ee } = c((e) => e.areaActions, p), te = c(
+    (e) => e.currentAreaId ? e.hashAreas[e.currentAreaId]?.currentLayoutId : ""
+  ), x = c(
+    (e) => e.currentAreaId ? e.hashAreas[e.currentAreaId]?.maximizedId : void 0
+  ), R = c(
+    (e) => e.hashAreas[e.currentAreaId]?.layoutItemsIds?.filter((r) => e.hashWindows[r].emergeType === "layout")?.map((r) => {
+      const a = e.hashWindows[r], s = a.moduleCount;
       return {
-        i: i.windowId,
-        url_icon: i.iconUrl,
-        title: i.title
+        iconUrl: a.iconUrl,
+        id: a.windowId,
+        label: `${a.title}${s ? `:${s}` : ""}`,
+        title: a.title
       };
     }) ?? [],
-    s
-  ), T = n((o) => m.reduce((t, i) => (t[i.i] = o.hashWindows[i.i]?.moduleCount, t), {}), s), { host_static_assets: f, environment_assets: C } = L(), { getLabel: c } = P(), v = z(null), M = z(null);
-  if ($ !== "loaded")
+    p
+  ), _ = !!I;
+  if (Oe(() => {
+    if (!_ || !w)
+      return;
+    const e = Array.from(
+      P.current?.querySelectorAll("[data-area-menu-item-id]") ?? []
+    ).find((r) => r.dataset.areaMenuItemId === w);
+    e && (e.scrollIntoView?.({ block: "nearest" }), E(null));
+  }, [d, _, w]), X !== "loaded")
     return null;
-  const d = {
-    isMobile: h,
-    color: p,
-    size: r
-  }, k = (o) => {
-    O(a, o);
-  }, W = m.map((o) => {
-    const t = T[o.i];
-    return {
-      type: "menuItem",
-      onClick: () => k(o.i),
-      label: `${o.title}${t ? `:${t}` : ""}`,
-      urlIcon: o.url_icon,
-      checkable: !0,
-      checked: A === o.i
-    };
-  });
-  return /* @__PURE__ */ e(
-    F,
+  const v = n(i(l.label_new_area)) || "Open areas menu", re = n(i(l.area_add_new)) || "Add area", N = n(i(l.label_edit_area)) || "Edit area", oe = n(i(l.label_delete_area)) || "Delete area", ne = n(i(l.label_delete_area_confirm_title)) || "Delete work area", ae = n(i(l.label_delete_area_confirm_message)) || "This action is irreversible. Do you want to permanently delete this work area?", $ = d.find((e) => e.id === M)?.name ?? "", ie = n(i(l.label_window)) || "Window", le = n(i(l.label_windows)) || "Windows", y = !!x && R.length > 1, de = lt(m, V), se = x || te || !1, L = {
+    color: f,
+    hasModules: y,
+    isMobile: Y,
+    orientation: m,
+    size: o
+  };
+  function ce(e) {
+    e.stopPropagation(), T(e.currentTarget);
+  }
+  function z() {
+    I?.blur(), T(null), E(null), b();
+  }
+  function me(e, r) {
+    e.stopPropagation();
+    const a = e.currentTarget.closest("li") ?? e.currentTarget, s = a.getBoundingClientRect();
+    C(a), O({ left: s.right, top: s.top + s.height / 2 }), D(r);
+  }
+  function b() {
+    C(null), O(null), D(null);
+  }
+  function ue(e) {
+    A && (J(A, e.inputEditArea), b());
+  }
+  function Ae(e, r) {
+    if (e.stopPropagation(), d.length > 1) {
+      const a = d.find((s) => s.id === r)?.name;
+      q({
+        variant: "warning",
+        window: /* @__PURE__ */ t(
+          it,
+          {
+            variant: "warning",
+            title: ne,
+            msg: `${ae} (${a})`,
+            onClickIntro: () => G(r),
+            size: o
+          }
+        )
+      });
+    }
+  }
+  function he(e) {
+    Q(e), z();
+  }
+  function pe() {
+    const e = Z();
+    e && E(e);
+  }
+  function fe(e) {
+    ee(M, e);
+  }
+  const Ie = Ze(
+    Ge(
+      Je({
+        inputEditArea: Te.string().required(
+          n(i(l.validation_edit_area))
+        )
+      })
+    )
+  );
+  return /* @__PURE__ */ u(
+    ke,
     {
-      className: j(Z(S), R),
-      ...oo(S, ro.root, b),
+      className: Le(De(W), U),
+      ownerState: L,
       role: "areas-admin-role",
-      ownerState: d,
-      ref: M,
-      ...D,
-      children: /* @__PURE__ */ e(
-        G,
-        {
-          size: r,
-          role: "presentation",
-          ref: v,
-          children: /* @__PURE__ */ e(
-            K,
+      ...Pe(W, at.root, H),
+      ...j,
+      children: [
+        /* @__PURE__ */ u(Be, { ownerState: L, children: [
+          /* @__PURE__ */ t(
+            Ee,
             {
-              size: r,
-              children: /* @__PURE__ */ e(
-                U,
+              ...Ne,
+              title: $ ? `${v}: ${$}` : v,
+              children: /* @__PURE__ */ t(
+                Fe,
                 {
-                  size: r,
-                  children: h ? /* @__PURE__ */ e(B, {}) : /* @__PURE__ */ I(y, { children: [
-                    /* @__PURE__ */ e(
-                      q,
+                  "aria-label": v,
+                  color: I ? "primary" : "default",
+                  icon: /* @__PURE__ */ t(be, {}),
+                  onClick: ce,
+                  size: o,
+                  selected: _,
+                  variant: "text"
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ t(
+            B,
+            {
+              anchorEl: I,
+              anchorOrigin: m === "vertical" ? { horizontal: "right", vertical: "top" } : { horizontal: "right", vertical: "bottom" },
+              arrowType: "right-top",
+              onClose: z,
+              open: _,
+              slotProps: {
+                paper: {
+                  sx: {
+                    // Pin the areas menu to a fixed, safe width so growing content
+                    // (long area names) can no longer widen or shift the popover.
+                    width: 230,
+                    maxWidth: 230,
+                    minWidth: 230,
+                    ...m === "vertical" ? { ml: 1.5 } : { mt: 1 }
+                  }
+                }
+              },
+              transformOrigin: m === "vertical" ? { horizontal: "left", vertical: "top" } : { horizontal: "right", vertical: "top" },
+              children: /* @__PURE__ */ u(Ve, { children: [
+                /* @__PURE__ */ t(
+                  Ue,
+                  {
+                    ref: P,
+                    ownerState: { ...L, maxVisibleItems: $e },
+                    children: /* @__PURE__ */ t(He, { children: d.length > 0 ? d.map((e) => /* @__PURE__ */ t(
+                      F,
                       {
-                        "aria-label": c(l(u.area_add_new)),
-                        size: r,
-                        variant: "contained",
-                        ownerState: d,
-                        src: `${f}/${C}/frontend/components/areas/assets/icons/${w.ADD_AREA}`,
-                        onClick: E,
-                        tooltip: c(l(u.area_add_new))
+                        "data-area-menu-item-id": e.id,
+                        endAdornment: e.id === M ? /* @__PURE__ */ u(je, { children: [
+                          /* @__PURE__ */ t(
+                            k,
+                            {
+                              "aria-label": `${N}: ${e.name}`,
+                              icon: /* @__PURE__ */ t(ge, {}),
+                              onClick: (r) => me(r, e.id),
+                              size: o,
+                              variant: "text"
+                            }
+                          ),
+                          /* @__PURE__ */ t(
+                            k,
+                            {
+                              "aria-label": `${oe}: ${e.name}`,
+                              color: "error",
+                              disabled: d.length === 1,
+                              icon: /* @__PURE__ */ t(Se, {}),
+                              onClick: (r) => Ae(r, e.id),
+                              size: o,
+                              variant: "text"
+                            }
+                          )
+                        ] }) : void 0,
+                        label: e.name,
+                        onClick: () => he(e.id),
+                        selected: e.id === M,
+                        size: o
+                      },
+                      e.id
+                    )) : /* @__PURE__ */ t(
+                      F,
+                      {
+                        disabled: !0,
+                        label: n(i(l.label_no_areas_available)) || "No areas available",
+                        size: o
                       }
-                    ),
-                    /* @__PURE__ */ e(
-                      H,
+                    ) })
+                  }
+                ),
+                /* @__PURE__ */ t(Re, { variant: "solid", size: o }),
+                /* @__PURE__ */ t(Ye, { children: /* @__PURE__ */ t(
+                  qe,
+                  {
+                    endIcon: /* @__PURE__ */ t(ve, { icon: /* @__PURE__ */ t(we, {}) }),
+                    label: re,
+                    onClick: pe,
+                    size: o,
+                    color: "default",
+                    variant: "contained",
+                    fullWidth: !0
+                  }
+                ) })
+              ] })
+            }
+          ),
+          m === "vertical" && y ? /* @__PURE__ */ t(
+            Ke,
+            {
+              customVariant: "solid",
+              "data-testid": "AreasAdminTriggerDivider",
+              orientation: "horizontal",
+              size: o
+            }
+          ) : null,
+          y ? /* @__PURE__ */ t(
+            Qe,
+            {
+              itemLimit: de,
+              items: R,
+              menuHeaderLabel: le,
+              onSelect: fe,
+              orientation: m,
+              overflowLabel: `More ${ie.toLowerCase()} modules`,
+              selectedItemId: se,
+              size: o
+            }
+          ) : null
+        ] }),
+        A ? /* @__PURE__ */ t(
+          B,
+          {
+            anchorEl: S,
+            anchorPosition: K ?? void 0,
+            anchorReference: "anchorPosition",
+            arrowType: "no-arrow",
+            container: S?.closest('[aria-label="Paper-popover-root"]'),
+            onClose: b,
+            open: !!S,
+            slotProps: { paper: { sx: { ml: 4, minWidth: 220 } } },
+            transformOrigin: { horizontal: "left", vertical: "center" },
+            children: /* @__PURE__ */ u(
+              et,
+              {
+                onSubmit: ue,
+                validationSchema: Ie,
+                values: {
+                  inputEditArea: d.find((e) => e.id === A)?.name ?? ""
+                },
+                children: [
+                  /* @__PURE__ */ t(Xe, { children: /* @__PURE__ */ t(ye, { color: "text.secondary", variant: "bodyDens", children: N }) }),
+                  /* @__PURE__ */ t(tt, { name: "inputEditArea" }),
+                  /* @__PURE__ */ u(rt, { children: [
+                    /* @__PURE__ */ t(
+                      ot,
                       {
-                        size: r,
-                        children: N.map((o) => /* @__PURE__ */ e(
-                          Y,
-                          {
-                            size: r,
-                            color: p,
-                            areaId: o,
-                            selected: o === a,
-                            disabled: x === 1
-                          },
-                          o
-                        ))
+                        onClick: b,
+                        size: o,
+                        variant: "contained"
                       }
                     ),
-                    A && m.length > 1 && /* @__PURE__ */ e(y, { children: /* @__PURE__ */ I(J, { size: r, ownerState: d, children: [
-                      /* @__PURE__ */ e(X, { size: r, skeletonWidth: "80px", children: c(l(u.label_window)) }),
-                      /* @__PURE__ */ e(
-                        eo,
-                        {
-                          size: r,
-                          icon: `${f}/${C}/frontend/components/areas_admin/assets/icons/${w.PENDING_ORDER}`,
-                          arrowType: "no-arrow",
-                          anchorOrigin: { vertical: "bottom", horizontal: "right" },
-                          transformOrigin: { vertical: "top", horizontal: "left" },
-                          menuActions: W
-                        }
-                      )
-                    ] }) })
+                    /* @__PURE__ */ t(nt, { size: o })
                   ] })
-                }
-              )
-            }
-          )
-        }
-      )
+                ]
+              },
+              A
+            )
+          }
+        ) : null
+      ]
     }
   );
 };
 export {
-  _o as AreasAdmin
+  Nt as AreasAdmin
 };

package/components/areas/components/AreasAdmin/AreasAdmin.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AreasAdmin.styles.d.ts","sourceRoot":"","sources":["../../../../../../../../packages/components/src/components/areas/components/AreasAdmin/AreasAdmin.styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAC3C,eAAO,MAAM,gBAAgB,EAAE,gBAgM9B,CAAC"}
+{"version":3,"file":"AreasAdmin.styles.d.ts","sourceRoot":"","sources":["../../../../../../../../packages/components/src/components/areas/components/AreasAdmin/AreasAdmin.styles.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAE3C,eAAO,MAAM,gBAAgB,EAAE,gBA8b9B,CAAC"}