@eintrek/erp-shell 0.1.57 → 0.1.58

package/dist/index.js

@@ -778,10 +778,23 @@ function longestMatch(path, modules) {
 function getActiveModule(pathname, modules) {
     return longestMatch(pathBelowCode(pathname), modules)?.module.id ?? null;
 }
-/** Find the active sub-module id from `pathname`, by the same rule. */
+/**
+ * Find the active sub-module id from `pathname`: the page whose own URL — or
+ * one of whose listed `subPages` — is the path itself (below the org code,
+ * ignoring a trailing slash). A record, a create or an edit page below a page
+ * is no page of the menu, so it has no active sub-module (0.1.58); the module
+ * (`getActiveModule`) still says where it belongs.
+ *
+ * Equal URLs in two modules go to the active module's page.
+ */
 function getActiveSubModule(pathname, modules) {
-    // Null when the module's own URL is the best match: no page of it is.
-    return longestMatch(pathBelowCode(pathname), modules)?.sub?.id ?? null;
+    const path = strip(pathBelowCode(pathname));
+    const isPage = (url) => isMenuPath(url) && strip(url) === path;
+    const pagesOf = (m) => (m.subModules ?? []).filter(sub => isPage(sub.url) || (sub.subPages ?? []).some(p => isPage(p.url)));
+    const moduleId = getActiveModule(pathname, modules);
+    const own = modules.find(m => m.id === moduleId);
+    const hit = (own ? pagesOf(own)[0] : undefined) ?? modules.flatMap(pagesOf)[0];
+    return hit?.id ?? null;
 }
 /** Prepend `code` (org code) to a relative URL so `/sales` → `/O25.../sales`.
  * Absolute `http(s)://` URLs are left intact; optional `{code}` placeholder is replaced.
@@ -804,100 +817,138 @@ function buildUrlWithCode(code, url) {
     return `${base}${query}${hash}`;
 }
 const strip = (p) => (p.length > 1 ? p.replace(/\/+$/, "") : p);
+/** A URL the path can be compared with: not query-only, not another site. */
+const isMenuPath = (url) => !!url && !url.includes("?") && !/^https?:\/\//i.test(url);
 /** Same check as `isPathActive`: the page itself or one below it. */
 const pathIsAtOrBelow = (pathname, url) => pathname === url || pathname.startsWith(url + "/");
 /** "/O1/" and "/O1" are the same page; a query string never is. */
 function samePage(pathname, url) {
     if (url.includes("?"))
         return false;
-    return strip(pathname) === strip(url);
+    return strip(pathname.split("?")[0]) === strip(url);
 }
 /**
- * How long the URL that makes `url` cover `pathname` is — or -1 when it does
- * not. The organisation's home ("/" → "/O1") covers only itself: every page
- * sits below it, and a dashboard is not the parent of every page.
+ * How long `url` is when it is the page `pathname` shows (ignoring a trailing
+ * slash), or -1. Compared with and without the org code, as the menu URLs
+ * are written either way.
  */
-function coverLength(pathname, url, code) {
+function pageLength(pathname, url, code) {
+    if (!isMenuPath(url))
+        return -1;
     const built = buildUrlWithCode(code, url);
-    const isRoot = url === "/" || (!!code && strip(built) === `/${code}`);
-    if (isRoot) {
-        return samePage(pathname, built) || samePage(pathname, url)
-            ? strip(built).length
-            : -1;
-    }
-    if (pathIsAtOrBelow(pathname, built))
+    if (samePage(pathname, built))
+        return strip(built).length;
+    if (samePage(pathname, url))
+        return strip(url).length;
+    return -1;
+}
+/**
+ * How long the URL that makes `url` cover `pathname` is — the page itself or
+ * one below it — or -1. The organisation's home ("/" → "/O1") covers only
+ * itself: every page sits below it, and a dashboard is not the parent of
+ * every page.
+ */
+function coverLength(pathname, url, code) {
+    if (!isMenuPath(url))
+        return -1;
+    const path = strip(pathname.split("?")[0]);
+    const built = strip(buildUrlWithCode(code, url));
+    const isRoot = url === "/" || (!!code && built === `/${code}`);
+    if (isRoot)
+        return pageLength(path, url, code);
+    if (pathIsAtOrBelow(path, built))
         return built.length;
-    if (pathIsAtOrBelow(pathname, url))
-        return url.length;
+    const raw = strip(url);
+    if (pathIsAtOrBelow(path, raw))
+        return raw.length;
     return -1;
 }
 /**
- * Pick the single sidebar entry for `pathname`: the longest URL that covers
- * the path, across every group. Before 0.1.57 the longest match was taken in
- * each group separately, so /project/schedule lit both "โครงการ" (/project,
- * under โครงการ) and "ภาพรวมแผน" (/project/schedule, under แผนงาน).
+ * Where `pathname` sits in the sidebar: the entry to light and the group to
+ * open.
+ *
+ * Lit (0.1.58): only the entry whose own page this is — its URL or one of its
+ * `subPages`, exactly. A record, a create or an edit page below a menu page
+ * (Plannex /project/detail/<id>/schedule under "โครงการ" /project) lights
+ * nothing; an app lists such a page in `subPages` when it should keep its
+ * entry lit. At most one entry across every group (0.1.57).
+ *
+ * Open: the lit entry's group, or else the group with the deepest URL the
+ * path sits below.
  *
  * Equal lengths go to the group the app marks active (`item.isActive`, from
  * its `activeModule`), then to a page over a group row, then to the first in
  * menu order.
  */
-function resolveActiveNav(items, pathname, { code, workspace = false, highlightActiveModule = false } = {}) {
-    const path = pathname ?? "";
+function resolveSidebarNav(items, pathname, { code, highlightActiveModule = false } = {}) {
+    const path = (pathname ?? "").split("?")[0];
     // The app named a one-line module as the current one: that is the answer.
     if (highlightActiveModule) {
         const leaf = items.findIndex(item => !item.subModules?.length && !!item.isActive);
-        if (leaf >= 0)
-            return { item: leaf, sub: null, subPage: null };
-    }
-    let best = null;
-    const consider = (c) => {
-        if (!best) {
-            best = c;
-            return;
-        }
-        if (c.length !== best.length) {
-            if (c.length > best.length)
-                best = c;
-            return;
+        if (leaf >= 0) {
+            return {
+                active: { item: leaf, sub: null, subPage: null },
+                open: { item: leaf, sub: null },
+            };
         }
+    }
+    const better = (c, best) => {
+        if (!best)
+            return true;
+        if (c.length !== best.length)
+            return c.length > best.length;
         const cActive = !!items[c.item].isActive;
         const bActive = !!items[best.item].isActive;
-        if (cActive !== bActive) {
-            if (cActive)
-                best = c;
+        if (cActive !== bActive)
+            return cActive;
+        // The same sub-item by its own URL and by a listed page: the page.
+        if (c.item === best.item && c.sub === best.sub) {
+            return c.subPage !== null && best.subPage === null;
+        }
+        return c.sub !== null && best.sub === null;
+    };
+    let exact = null;
+    let within = null;
+    const consider = (c, isExact) => {
+        if (c.length < 0)
             return;
+        if (isExact) {
+            if (better(c, exact))
+                exact = c;
+        }
+        else if (better(c, within)) {
+            within = c;
         }
-        if (c.sub !== null && best.sub === null)
-            best = c;
     };
     items.forEach((item, i) => {
-        const itemUrl = buildUrlWithCode(code, item.url);
         const subs = item.subModules ?? [];
+        const row = { item: i, sub: null, subPage: null };
         // The row itself: only on its own URL. A one-line item under
         // highlightActiveModule is lit by isActive alone (handled above).
         if (!(highlightActiveModule && subs.length === 0)) {
-            const own = workspace ? samePage(path, itemUrl) : path === itemUrl;
-            if (own)
-                consider({ item: i, sub: null, subPage: null, length: strip(itemUrl).length });
+            consider({ ...row, length: pageLength(path, item.url, code) }, true);
         }
+        consider({ ...row, length: coverLength(path, item.url, code) }, false);
         subs.forEach((sub, j) => {
-            // The sub-item counts by its own URL or by the longest of its pages.
-            let subPage = null;
-            let pageLength = -1;
+            const entry = { item: i, sub: j };
+            consider({ ...entry, subPage: null, length: pageLength(path, sub.url, code) }, true);
+            consider({ ...entry, subPage: null, length: coverLength(path, sub.url, code) }, false);
             (sub.subPages ?? []).forEach((page, k) => {
-                const l = coverLength(path, page.url, code);
-                if (l > pageLength) {
-                    pageLength = l;
-                    subPage = k;
-                }
+                consider({ ...entry, subPage: k, length: pageLength(path, page.url, code) }, true);
+                consider({ ...entry, subPage: k, length: coverLength(path, page.url, code) }, false);
             });
-            const length = Math.max(coverLength(path, sub.url, code), pageLength);
-            if (length >= 0)
-                consider({ item: i, sub: j, subPage, length });
         });
     });
-    const found = best;
-    return found ? { item: found.item, sub: found.sub, subPage: found.subPage } : null;
+    const lit = exact;
+    const holder = lit ?? within;
+    return {
+        active: lit ? { item: lit.item, sub: lit.sub, subPage: lit.subPage } : null,
+        open: holder ? { item: holder.item, sub: holder.sub } : null,
+    };
+}
+/** The entry lit for `pathname` — `resolveSidebarNav(...).active`. */
+function resolveActiveNav(items, pathname, options = {}) {
+    return resolveSidebarNav(items, pathname, options).active;
 }
 
 function NavTools({ tools, closeOnNavigation = false }) {
@@ -1384,7 +1435,7 @@ function platformApiBase(app) {
  * This package's version, attached to help messages so the back office can
  * tell which shell a report came from. Keep in step with package.json.
  */
-const SHELL_VERSION = "0.1.57";
+const SHELL_VERSION = "0.1.58";
 
 const HELP_APP_LABEL = {
     platform: "แพลตฟอร์ม",
@@ -1942,12 +1993,11 @@ function NavMain({ items, orgCode, closeOnNavigation = false, approvalCounts, ch
             setOpen(false);
     };
     const code = orgCode ?? params?.code;
-    // The one entry that stands for this page — the longest matching URL
-    // across every group, not per group (which lit /project and
-    // /project/schedule together).
-    const active = resolveActiveNav(items, pathname, {
+    // The one entry lit for this page — only on that entry's own page, never
+    // on a record or a form below it — and the group holding the page, which
+    // opens either way.
+    const { active, open } = resolveSidebarNav(items, pathname, {
         code,
-        workspace,
         highlightActiveModule,
     });
     const states = items.map((item, i) => {
@@ -1957,36 +2007,32 @@ function NavMain({ items, orgCode, closeOnNavigation = false, approvalCounts, ch
             itemUrl,
             activeSub: mine?.sub ?? null,
             activeSubPage: mine?.subPage ?? null,
-            hasActiveSubItem: mine?.sub != null,
+            openSub: open?.item === i ? open.sub : null,
             isItemActive: !!mine && mine.sub === null,
         };
     });
-    // A group opens when its page becomes current and otherwise stays as the
+    // A group opens when the page moves into it and otherwise stays as the
     // user left it. defaultOpen alone decided once, on the first render — and
     // on a direct load the sub-items arrive after permissions do, so the group
     // holding the current page stayed shut.
-    const activeKey = items
-        .filter((_, i) => states[i].isItemActive || states[i].hasActiveSubItem)
-        .map(item => item.id)
-        .join(",");
-    const [openIds, setOpenIds] = React__namespace.useState(() => new Set(activeKey ? activeKey.split(",") : []));
+    const openId = open ? (items[open.item]?.id ?? "") : "";
+    const [openIds, setOpenIds] = React__namespace.useState(() => new Set(openId ? [openId] : []));
     React__namespace.useEffect(() => {
-        if (!activeKey)
+        if (!openId)
             return;
         setOpenIds(prev => {
-            const ids = activeKey.split(",");
-            if (ids.every(id => prev.has(id)))
+            if (prev.has(openId))
                 return prev;
             const next = new Set(prev);
-            ids.forEach(id => next.add(id));
+            next.add(openId);
             return next;
         });
-    }, [activeKey]);
-    const setItemOpen = (id, open) => setOpenIds(prev => {
-        if (prev.has(id) === open)
+    }, [openId]);
+    const setItemOpen = (id, isOpen) => setOpenIds(prev => {
+        if (prev.has(id) === isOpen)
             return prev;
         const next = new Set(prev);
-        if (open)
+        if (isOpen)
             next.add(id);
         else
             next.delete(id);
@@ -1997,7 +2043,7 @@ function NavMain({ items, orgCode, closeOnNavigation = false, approvalCounts, ch
                     item.group &&
                     item.group !== items[index - 1]?.group ? (jsxRuntime.jsx("li", { className: "list-none px-3 pb-2.5 text-xs text-muted-foreground" +
                         (index > 0 ? " pt-5" : ""), children: item.group }, `group-${item.id}`)) : null;
-                const { itemUrl, activeSub, activeSubPage, isItemActive } = states[index];
+                const { itemUrl, activeSub, activeSubPage, openSub, isItemActive } = states[index];
                 const IconComp = item.icon;
                 const workspaceButton = workspace
                     ? "h-auto gap-3 rounded-[10px] px-3 py-2.5 text-xs " +
@@ -2007,7 +2053,7 @@ function NavMain({ items, orgCode, closeOnNavigation = false, approvalCounts, ch
                     : "";
                 const icon = workspace && IconComp ? (jsxRuntime.jsx(IconComp, { className: "size-[18px] shrink-0" })) : null;
                 const badge = workspace && item.badge !== undefined && item.badge !== "" ? (jsxRuntime.jsx("span", { className: "ml-auto min-w-5 rounded-[5px] bg-primary/15 px-1 text-center text-xs leading-5 font-bold tabular-nums text-primary", children: item.badge })) : null;
-                return (jsxRuntime.jsxs(React__namespace.Fragment, { children: [groupHeading, jsxRuntime.jsx(erpTheme.Collapsible, { asChild: true, open: openIds.has(item.id), onOpenChange: open => setItemOpen(item.id, open), className: "group/collapsible", children: jsxRuntime.jsxs(SidebarMenuItem, { children: [jsxRuntime.jsx(erpTheme.CollapsibleTrigger, { asChild: true, children: jsxRuntime.jsx(SidebarMenuButton, { asChild: !item.subModules || item.subModules.length === 0, isActive: isItemActive, className: "data-[state=open]:text-sidebar-accent-foreground " +
+                return (jsxRuntime.jsxs(React__namespace.Fragment, { children: [groupHeading, jsxRuntime.jsx(erpTheme.Collapsible, { asChild: true, open: openIds.has(item.id), onOpenChange: isOpen => setItemOpen(item.id, isOpen), className: "group/collapsible", children: jsxRuntime.jsxs(SidebarMenuItem, { children: [jsxRuntime.jsx(erpTheme.CollapsibleTrigger, { asChild: true, children: jsxRuntime.jsx(SidebarMenuButton, { asChild: !item.subModules || item.subModules.length === 0, isActive: isItemActive, className: "data-[state=open]:text-sidebar-accent-foreground " +
                                                 workspaceButton, children: item.subModules && item.subModules.length > 0 ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [icon, jsxRuntime.jsx("span", { id: item.id, children: item.titleTh }), jsxRuntime.jsx(lucideReact.ChevronRight, { className: "ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" })] })) : (jsxRuntime.jsxs(Link, { href: itemUrl, prefetch: false, className: "flex items-center w-full min-w-0 flex-1 " +
                                                     (workspace ? "gap-3" : "gap-2"), onClick: handleNavLinkClick, "aria-current": isItemActive ? "page" : undefined, children: [icon, jsxRuntime.jsx("span", { id: item.id, className: "flex-1 truncate", title: item.titleTh, children: item.titleTh }), badge] })) }) }), item.subModules && item.subModules.length > 0 && (jsxRuntime.jsx(erpTheme.CollapsibleContent, { children: jsxRuntime.jsx(SidebarMenuSub, { className: workspace
                                                 ? "mx-0 mt-1 mb-3 ml-[21px] gap-0.5 border-l border-sidebar-border pl-2.5 [&_a]:h-auto [&_a]:gap-[11px] [&_a]:px-3 [&_a]:py-2 [&_a]:text-xs [&_svg]:!size-[17px]"
@@ -2021,7 +2067,7 @@ function NavMain({ items, orgCode, closeOnNavigation = false, approvalCounts, ch
                                                 if (subItem.isCollapsible &&
                                                     subItem.subPages &&
                                                     subItem.subPages.length > 0) {
-                                                    return (jsxRuntime.jsx(erpTheme.Collapsible, { asChild: true, defaultOpen: isSubItemActive, className: "group/sub-collapsible", children: jsxRuntime.jsxs(SidebarMenuSubItem, { children: [jsxRuntime.jsx(erpTheme.CollapsibleTrigger, { asChild: true, children: jsxRuntime.jsxs(SidebarMenuSubButton, { className: "w-full", isActive: isSubItemActive, children: [SubIcon && (jsxRuntime.jsx(SubIcon, { className: "sidebar-submodule-icon flex-shrink-0" })), jsxRuntime.jsx("span", { className: "flex-1 truncate", title: subItem.titleTh, children: subItem.titleTh }), jsxRuntime.jsx(lucideReact.ChevronDown, { className: "ml-auto size-4 transition-transform duration-200 group-data-[state=open]/sub-collapsible:rotate-180" })] }) }), jsxRuntime.jsx(erpTheme.CollapsibleContent, { children: jsxRuntime.jsx(SidebarMenuSub, { className: "ml-4", children: subItem.subPages.map((subPage, subPageIndex) => {
+                                                    return (jsxRuntime.jsx(erpTheme.Collapsible, { asChild: true, defaultOpen: isSubItemActive || openSub === subIndex, className: "group/sub-collapsible", children: jsxRuntime.jsxs(SidebarMenuSubItem, { children: [jsxRuntime.jsx(erpTheme.CollapsibleTrigger, { asChild: true, children: jsxRuntime.jsxs(SidebarMenuSubButton, { className: "w-full", isActive: isSubItemActive, children: [SubIcon && (jsxRuntime.jsx(SubIcon, { className: "sidebar-submodule-icon flex-shrink-0" })), jsxRuntime.jsx("span", { className: "flex-1 truncate", title: subItem.titleTh, children: subItem.titleTh }), jsxRuntime.jsx(lucideReact.ChevronDown, { className: "ml-auto size-4 transition-transform duration-200 group-data-[state=open]/sub-collapsible:rotate-180" })] }) }), jsxRuntime.jsx(erpTheme.CollapsibleContent, { children: jsxRuntime.jsx(SidebarMenuSub, { className: "ml-4", children: subItem.subPages.map((subPage, subPageIndex) => {
                                                                             const subPageUrl = buildUrlWithCode(code, subPage.url);
                                                                             const isSubPageActive = isSubItemActive &&
                                                                                 activeSubPage === subPageIndex;
@@ -3810,6 +3856,7 @@ exports.normalizePathnameForPermissionRules = normalizePathnameForPermissionRule
 exports.openHelp = openHelp;
 exports.parseMyRoles = parseMyRoles;
 exports.resolveActiveNav = resolveActiveNav;
+exports.resolveSidebarNav = resolveSidebarNav;
 exports.resolveUiRoutePermission = resolveUiRoutePermission;
 exports.roleSummary = roleSummary;
 exports.runGlobalRequestPrecheck = runGlobalRequestPrecheck;