@7365admin1/layer-common 3.2.2-staging.91 → 3.2.2-staging.93

package/utils/nav-sections.test.ts

@@ -28,16 +28,17 @@ const SECURITY = [
 ].map((title) => ({ title }));
 
 /**
- * THE RULE THAT MATTERS. A label is decoration; the menu is the product. If
- * this ever fails, someone has taught the sidebar to reorder itself.
+ * THE RULE THAT MATTERS. Grouping may reorder the rail; it may never change
+ * the menu. Same objects, same count - nothing added, hidden or duplicated.
  */
-test("the menu comes back in the order it went in, item for item", () => {
+test("every menu item comes back exactly once, and nothing else does", () => {
   const out = withSections(SECURITY);
 
   assert.equal(out.length, SECURITY.length);
-  out.forEach((entry, i) => {
-    assert.equal(entry.item, SECURITY[i], `position ${i}`);
-  });
+  assert.deepEqual(
+    new Set(out.map((e) => e.item)),
+    new Set(SECURITY)
+  );
 });
 
 test("Security is labelled the way the design draws it", () => {
@@ -102,10 +103,10 @@ test("an unmapped FIRST item prints no heading rather than a blank one", () => {
 
 /**
  * The applications do not agree on order: Landscape lists Feedbacks after its
- * equipment modules. The heading is printed again rather than left off, so no
- * item ever sits under a heading that is not its own.
+ * equipment modules. Those two Feedbacks/Work Orders items are collected under
+ * ONE SERVICE DESK heading instead of printing the heading twice.
  */
-test("a section that comes back later is labelled again, not orphaned", () => {
+test("a section that comes back later is grouped, not labelled twice", () => {
   const out = withSections([
     { title: "Feedbacks" },
     { title: "Equipment Items" },
@@ -113,8 +114,66 @@ test("a section that comes back later is labelled again, not orphaned", () => {
   ]);
 
   assert.deepEqual(
-    out.map((e) => e.section),
-    ["SERVICE DESK", "EQUIPMENT", "SERVICE DESK"]
+    out.map((e) => `${e.section}|${e.item.title}`),
+    [
+      "SERVICE DESK|Feedbacks",
+      "|Work Orders",
+      "EQUIPMENT|Equipment Items",
+    ]
+  );
+});
+
+/**
+ * Property Management is the screen that showed the defect: its own menu order
+ * printed SERVICE DESK, PROPERTY and SECURITY OPERATIONS twice each.
+ */
+test("Property Management prints each heading exactly once", () => {
+  const PM = [
+    "Dashboard",
+    "Service Providers",
+    "Feedbacks",
+    "Work Orders",
+    "Facility Mgmt",
+    "Pass & Key Mgmt",
+    "HID Face Reader",
+    "Online Forms",
+    "NFC Patrol",
+    "Bulletin Board",
+    "Bulletin Videos",
+    "Visitor Mgmt",
+    "Document Mgmt",
+    "Access Mgmt",
+  ].map((title) => ({ title }));
+
+  const out = withSections(PM);
+  const headings = out.map((e) => e.section).filter(Boolean);
+
+  assert.deepEqual(headings, [
+    "OVERVIEW",
+    "SERVICE DESK",
+    "PROPERTY",
+    "SECURITY OPERATIONS",
+    "COMMUNITY",
+  ]);
+  assert.equal(new Set(headings).size, headings.length);
+  assert.deepEqual(
+    out.map((e) => e.item.title),
+    [
+      "Dashboard",
+      "Service Providers",
+      "Feedbacks",
+      "Work Orders",
+      "Online Forms",
+      "Facility Mgmt",
+      "Pass & Key Mgmt",
+      "Visitor Mgmt",
+      "Document Mgmt",
+      "Access Mgmt",
+      "HID Face Reader",
+      "NFC Patrol",
+      "Bulletin Board",
+      "Bulletin Videos",
+    ]
   );
 });
 

package/utils/nav-sections.ts

@@ -1,29 +1,33 @@
 /**
- * THE GROUPED SIDEBAR - section labels, without touching the menu.
+ * THE GROUPED SIDEBAR - one heading per section, each printed once.
  *
  * The design draws the sidebar in labelled sections (OVERVIEW, SERVICE DESK,
  * PROPERTY, SECURITY OPERATIONS, COMMUNITY, WORKFORCE, ADMINISTRATION). Each
  * application builds its own menu array in its `layouts/default.vue`, gated
- * item by item on permissions, and that array is the product's navigation.
+ * item by item on permissions.
  *
- * So this file adds a LABEL and nothing else:
+ * The applications do not agree on the order they list their modules in
+ * (Property Management interleaves five sections; Landscape puts Feedbacks
+ * after Equipment). Walking that order and printing a heading whenever the
+ * section changed - what this file used to do - made Property Management draw
+ * SERVICE DESK, PROPERTY and SECURITY OPERATIONS TWICE each. It reads as a
+ * bug, so the items are now GROUPED:
  *
- *   - the order of the menu is the order the application gave us. Nothing is
- *     moved, sorted, merged, hidden or renamed. A label is inserted when the
- *     section CHANGES as we walk that existing order, which means the label is
- *     always true of the items under it.
- *   - a title this map has never heard of inherits the section above it, so a
- *     new menu item added by any of the eleven applications appears exactly
- *     where its author put it, under the heading it follows, rather than
- *     disappearing or forcing a stray heading.
- *   - the first item always gets its section printed, even if that section is
- *     "" (nothing) - a leading blank label is simply not rendered.
+ *   - every item is collected under its section, and each heading is printed
+ *     exactly once, in the order the design lists the sections (which is the
+ *     order they are declared in the map below).
+ *   - inside a section the application's own order is preserved, so items that
+ *     belong together stay in the sequence their author chose.
+ *   - a title this map has never heard of inherits the section of the item
+ *     above it, so a new menu item added by any of the eleven applications is
+ *     grouped with its neighbours rather than disappearing or forcing a stray
+ *     heading.
+ *   - an item with no section at all (an unmapped FIRST item) leads the rail
+ *     with no heading, exactly as before.
  *
- * A section may therefore appear twice in one sidebar. That is deliberate: the
- * applications do not all list their modules in the same order (Landscape puts
- * Feedbacks after Equipment; Property Management interleaves five sections),
- * and printing the heading again is honest, where suppressing it would leave a
- * run of items sitting under a heading that is not theirs.
+ * This changes what ORDER the items are drawn in and nothing else. No item is
+ * added, hidden, renamed, re-routed or re-gated - the array that comes out
+ * holds the same objects as the array that went in.
  */
 
 export const NAV_SECTIONS: Record<string, string> = {
@@ -110,19 +114,38 @@ export const NAV_SECTIONS: Record<string, string> = {
 
 export type TSectionedNavItem<T> = { item: T; section: string };
 
+/** The design's section order - the order they are declared above. */
+export const SECTION_ORDER: string[] = [
+  ...new Set(Object.values(NAV_SECTIONS)),
+];
+
 /**
- * Walks the menu IN THE ORDER GIVEN and tags each item with the section label
- * to print above it, or "" for no label. Same length, same order, same objects.
+ * Groups the menu by section and tags each item with the heading to print
+ * above it, or "" when the heading is already printed. Same length, same
+ * objects; only the order changes.
  */
 export function withSections<T extends { title?: string }>(
   items: T[]
 ): Array<TSectionedNavItem<T>> {
+  // An unmapped title inherits the section of the item above it.
   let current = "";
+  const resolved = items.map((item, index) => {
+    current = NAV_SECTIONS[String(item?.title ?? "")] ?? current;
+    return { item, section: current, index };
+  });
+
+  // Sectionless items (an unmapped first item) rank -1 and lead the rail.
+  // Inside a section the application's own order is kept.
+  const grouped = [...resolved].sort(
+    (a, b) =>
+      SECTION_ORDER.indexOf(a.section) - SECTION_ORDER.indexOf(b.section) ||
+      a.index - b.index
+  );
 
-  return items.map((item, index) => {
-    const section = NAV_SECTIONS[String(item?.title ?? "")] ?? current;
-    const changed = index === 0 || section !== current;
-    current = section;
-    return { item, section: changed ? section : "" };
+  let printed = "";
+  return grouped.map(({ item, section }) => {
+    const label = section === printed ? "" : section;
+    printed = section;
+    return { item, section: label };
   });
 }