@7365admin1/layer-common 3.2.2-staging.195 → 3.2.2-staging.197

package/assets/css/primitives.css

@@ -924,8 +924,18 @@ select option {
   inset: 0;
   width: var(--toggle-w);
   height: var(--toggle-h);
-  /* Vuetify's own slide. The design moves the thumb, not this box. */
-  transform: none;
+  /*
+   * Vuetify's own slide. The design moves the thumb, not this box - but the
+   * reset never landed: Vuetify ships it as
+   * `.v-locale--is-ltr .v-switch .v-selection-control__input` (THREE classes)
+   * and, when checked, `.v-locale--is-ltr .v-switch .v-selection-control--dirty
+   * .v-selection-control__input` (FOUR), both of which outrank this two-class
+   * rule. So every `.app-switch` in the layer drew its thumb 10px out: measured
+   * OFF thumb at `track.x - 8` (design: +2) and ON at `track.x + 28`
+   * (design: +18). `!important` rather than stacking four `.app-switch`
+   * selectors to out-specify it.
+   */
+  transform: none !important;
 }
 
 /* The 40px hover/ripple disc is bigger than the whole control in this shape. */

package/assets/css/screens.css

@@ -603,6 +603,18 @@
   border-radius: var(--r-card);
   box-shadow: var(--shadow);
   overflow: hidden;
+  /*
+   * `.table-card__loading` below is `position: absolute`, and nothing in the
+   * chain above it - not `.app-card`, not `.table-card` - established a
+   * containing block, so the bar resolved against the VIEWPORT: measured
+   * 1440x2 pinned to `top: 0` of the window while its card sat at `y: 61.5`.
+   * Every `TableMain` screen in all 11 apps drew its busy bar across the top
+   * of the browser instead of the top of the card. This is the anchor it
+   * always needed. Safe by construction: the card is already
+   * `overflow: hidden`, so nothing inside it could have been anchored to an
+   * ancestor OUTSIDE it and still be visible.
+   */
+  position: relative;
 }
 
 /**

package/components/QrTemplate/PrintDialog.vue

@@ -815,6 +815,10 @@ const props = defineProps<{
   start: any;
 }>();
 
+// Relative import, never Nuxt auto-import: this layer's `utils/` are auto-imported
+// into the consuming apps but not reliably into the layer's own components.
+import { pickRouteName } from "../../utils/route-name";
+
 const route = useRoute();
 const router = useRouter();
 const emit = defineEmits(["update:close"]);
@@ -990,12 +994,25 @@ const closeDialog = async (type?: string, tabType?: string) => {
       dialogType.value = "generate";
       generatePass.value = true;
     } else {
-      router.push({
-        name: "keys-visitor-pass-add",
-        query: {
-          site: route.params.site as string,
-        },
-      });
+      // Two faults here. The name is only correct in an app whose keys pages
+      // sit at the root - every consumer that renders this dialog nests them
+      // under [org]/[site], so `router.push` threw on an unknown name and the
+      // dialog's Generate action died. And `org` / `site` are PATH params on
+      // the destination, so sending `site` as a query left both unfilled.
+      const passAdd = pickRouteName(
+        router,
+        "org-site-keys-visitor-pass-add",
+        "keys-visitor-pass-add"
+      );
+      if (passAdd) {
+        router.push({
+          name: passAdd,
+          params: {
+            org: route.params.org as string,
+            site: route.params.site as string,
+          },
+        });
+      }
     }
     resetPrintState();
     snackbarStartRange.value = false;

package/components/ServiceProviderMain.vue

@@ -16,14 +16,16 @@
     -->
     <PageHeader title="Service Providers">
       <template #actions>
+        <!--
+          `showBillingButton` defaults to true, so this button rendered in every
+          app that mounts this screen - but only property-management has a
+          service-provider-mgmt/billing page, so everywhere else the click threw
+          on an unknown route name. Render it only where the page exists.
+        -->
         <AppButton
-          v-if="showBillingButton"
+          v-if="showBillingButton && billingRouteName"
           variant="ghost"
-          @click="
-            useRouter().push({
-              name: 'org-site-service-provider-mgmt-billing',
-            })
-          "
+          @click="useRouter().push({ name: billingRouteName })"
         >
           Billing
         </AppButton>
@@ -656,6 +658,7 @@ import useUser from "../composables/useUser";
 import useVerification from "../composables/useVerification";
 // import useRole from "../composables/useRole";
 import { errorConverter } from "../utils/data";
+import { pickRouteName } from "../utils/route-name";
 
 type ListTab = "active" | "pending" | "inactive";
 
@@ -734,6 +737,14 @@ const props = defineProps({
   },
 });
 
+// Only property-management contributes a service-provider-mgmt/billing page;
+// null in every other consumer, which hides the button instead of throwing.
+const billingRouteName = pickRouteName(
+  useRouter(),
+  "org-site-service-provider-mgmt-billing",
+  "service-provider-mgmt-billing"
+);
+
 const headers = [
   {
     title: "Company name",

package/components/TableMain.vue

@@ -129,7 +129,30 @@
           </template>
 
           <template #left>
-            <v-btn fab icon density="comfortable" variant="text" @click="emits('refresh')">
+            <!--
+              THE REFRESH BUTTON HAD NO BUSY STATE.
+
+              It emitted `refresh` and then looked identical for the whole
+              request. When the reload returned the same rows, NOTHING on the
+              screen changed - so there was no way to tell whether the click
+              had registered, which is exactly what QA reported on Work Orders
+              and on the Duty Officer Book (both fire the request; neither
+              showed it). `loading` is the caller's own in-flight flag, the
+              same one the bar above already reads: while it is true the button
+              is disabled, so the click is acknowledged and a second one cannot
+              stack another request on the first.
+
+              A caller that passes no `loading` renders exactly what it renders
+              today (the prop defaults to false).
+            -->
+            <v-btn
+              fab
+              icon
+              density="comfortable"
+              variant="text"
+              :disabled="loading"
+              @click="emits('refresh')"
+            >
               <v-icon>mdi-refresh</v-icon>
             </v-btn>
             <slot name="prepend-additional" />

package/components/WorkOrder/Main.vue

@@ -208,6 +208,9 @@
 
 <script setup lang="ts">
 import { useTheme } from "vuetify";
+// Relative import, never Nuxt auto-import: this layer's `utils/` are auto-imported
+// into the consuming apps but not reliably into the layer's own components.
+import { pickRouteName } from "../../utils/route-name";
 const emit = defineEmits(["click:create", "update:pagination"]);
 
 const props = defineProps({
@@ -363,14 +366,23 @@ function handleRowClick(row: any) {
   const org = useRoute().params.org || "defaultOrg";
   const site = useRoute().params.site || "defaultSite";
   const id = row._id;
-  useRouter().push({
-    name: "work-order-details",
-    params: {
-      org,
-      site,
-      id,
-    },
-  });
+  // `work-order-details` is not a route in any consuming app; the detail screen
+  // is `pages/[org]/[site]/work-orders/[id].vue` -> `org-site-work-orders-id`.
+  const details = pickRouteName(
+    useRouter(),
+    "org-site-work-orders-id",
+    "work-orders-id"
+  );
+  if (details) {
+    useRouter().push({
+      name: details,
+      params: {
+        org,
+        site,
+        id,
+      },
+    });
+  }
 }
 
 function resetWorkOrderForm() {

package/package.json

@@ -2,7 +2,7 @@
   "name": "@7365admin1/layer-common",
   "license": "MIT",
   "type": "module",
-  "version": "3.2.2-staging.195",
+  "version": "3.2.2-staging.197",
   "author": "7365admin1",
   "main": "./nuxt.config.ts",
   "//files": "What a consumer extending this layer actually loads. Without this npm ships the whole working tree - the changesets, the CI workflows, the render harness in tools/ and any scratch directory that happened to exist at publish time. Nuxt resolves a layer by directory, so every runtime directory below has to stay listed; adding a new top-level runtime directory means adding it here too.",

package/pages/require-customer.vue

@@ -36,6 +36,10 @@
 </template>
 
 <script setup lang="ts">
+// Relative import, never Nuxt auto-import: this layer's `utils/` are auto-imported
+// into the consuming apps but not reliably into the layer's own components.
+import { pickRouteName } from "../utils/route-name";
+
 definePageMeta({
   layout: "plain",
 });
@@ -53,9 +57,19 @@ authenticate();
 const { currentUser } = useLocalAuth();
 
 function createCustomer() {
-  if (APP_NAME.toLowerCase() === "org") {
+  // The org app's page is `pages/org/[organization]/customers/add.vue`, whose
+  // route name is `org-organization-customers-add` - singular. The plural spelt
+  // here matched nothing, so the only way off this dead-end page threw. The
+  // `hasRoute` check also keeps a mis-set APP_NAME from taking this branch in an
+  // app that has no such page; that app falls through to the cross-app URL.
+  const customerAdd = pickRouteName(
+    useRouter(),
+    "org-organization-customers-add",
+    "organizations-customers-add"
+  );
+  if (APP_NAME.toLowerCase() === "org" && customerAdd) {
     navigateTo({
-      name: "org-organizations-customers-add",
+      name: customerAdd,
       params: { organization: currentUser.value?.defaultOrg },
     });
   } else {

package/utils/route-name.test.ts

@@ -0,0 +1,85 @@
+import assert from "node:assert/strict";
+import { readFileSync, readdirSync } from "node:fs";
+import { join } from "node:path";
+import { fileURLToPath } from "node:url";
+import { test } from "node:test";
+
+import { pickRouteName } from "./route-name.ts";
+
+const routerWith = (...names: string[]) => ({
+  hasRoute: (name: string) => names.includes(name),
+});
+
+test("picks the first candidate this app actually has", () => {
+  const router = routerWith("org-site-keys-visitor-pass-add");
+  assert.equal(
+    pickRouteName(router, "org-site-keys-visitor-pass-add", "keys-visitor-pass-add"),
+    "org-site-keys-visitor-pass-add"
+  );
+});
+
+test("falls through to a later candidate for a flatter app", () => {
+  const router = routerWith("keys-visitor-pass-add");
+  assert.equal(
+    pickRouteName(router, "org-site-keys-visitor-pass-add", "keys-visitor-pass-add"),
+    "keys-visitor-pass-add"
+  );
+});
+
+test("candidate order wins when an app has both", () => {
+  const router = routerWith("keys-visitor-pass-add", "org-site-keys-visitor-pass-add");
+  assert.equal(
+    pickRouteName(router, "org-site-keys-visitor-pass-add", "keys-visitor-pass-add"),
+    "org-site-keys-visitor-pass-add"
+  );
+});
+
+test("null when the app has no such page - the caller hides the control", () => {
+  assert.equal(pickRouteName(routerWith("org-site-work-orders"), "org-site-work-orders-id"), null);
+  assert.equal(pickRouteName(routerWith()), null);
+});
+
+// The five names two app-side audits found dead. Each is now resolved through
+// `pickRouteName`, so none may reappear as a literal anywhere in the layer.
+// `organizations-create` is deliberately absent: it is real in web-app-org and
+// is only reached there, so it was never dead.
+const DEAD_NAMES = [
+  "keys-visitor-pass-add",
+  "org-organizations-customers-add",
+  "work-order-details",
+  "org-site-service-provider-mgmt-billing",
+];
+
+function sourceFiles(dir: string, out: string[] = []): string[] {
+  for (const entry of readdirSync(dir, { withFileTypes: true })) {
+    const path = join(dir, entry.name);
+    if (entry.isDirectory()) sourceFiles(path, out);
+    else if (/\.(vue|ts)$/.test(entry.name)) out.push(path);
+  }
+  return out;
+}
+
+test("no dead route name survives as a literal in the layer", () => {
+  const root = fileURLToPath(new URL("..", import.meta.url));
+  const files = ["components", "pages", "layouts", "composables", "middleware", "plugins"]
+    .flatMap((d) => sourceFiles(join(root, d)))
+    .filter((f) => !f.endsWith(".test.ts"));
+
+  assert.ok(files.length > 100, `expected to scan the layer, scanned ${files.length} files`);
+
+  const offenders: string[] = [];
+  for (const file of files) {
+    const source = readFileSync(file, "utf8");
+    for (const dead of DEAD_NAMES) {
+      // Only a `name:` BINDING counts. The same string also appears as a bare
+      // argument in a `pickRouteName(...)` candidate list, which is the fix, not
+      // the fault. Plain string matching on purpose - a backslash class inside a
+      // template literal silently loses its escape and matches nothing.
+      const bound = [`"${dead}"`, `'${dead}'`].some(
+        (quoted) => source.includes(`name: ${quoted}`) || source.includes(`name:${quoted}`)
+      );
+      if (bound) offenders.push(`${file.slice(root.length)} -> ${dead}`);
+    }
+  }
+  assert.deepEqual(offenders, [], `dead route names still bound:\n${offenders.join("\n")}`);
+});

package/utils/route-name.ts

@@ -0,0 +1,24 @@
+/**
+ * Pick the route name the RUNNING app actually has.
+ *
+ * This layer is extended by apps whose pages sit at different depths, so the
+ * same screen has a different Nuxt route name in each of them - the service
+ * apps produce `org-site-keys-visitor-pass-add` from
+ * `pages/[org]/[site]/keys/visitor/pass/add.vue`, while a flatter app would
+ * produce `keys-visitor-pass-add`. A literal name hard-coded in the layer is
+ * therefore correct in some consumers and throws in the rest, because
+ * `router.push({ name })` on an unknown name is a hard error.
+ *
+ * Pass the candidates most-specific-first. Returns the first one this app has,
+ * or `null` when it has none - and `null` means "this app has no such page",
+ * which is the caller's cue to hide the control rather than navigate somewhere
+ * wrong.
+ *
+ * ponytail: vue-router's own `hasRoute`, no name table to keep in sync.
+ */
+export function pickRouteName(
+  router: { hasRoute: (name: string) => boolean },
+  ...candidates: string[]
+): string | null {
+  return candidates.find((name) => router.hasRoute(name)) ?? null;
+}

package/utils/table-card.test.ts

@@ -0,0 +1,84 @@
+/**
+ * REGRESSION GUARDS FOR THE TABLE CARD'S BUSY SIGNAL.
+ *
+ * Both faults here are a CSS declaration and a template binding, not a pure
+ * function, and this repo has no component test runner (adding one is a
+ * dependency change). So these assert the SOURCE CONTRACT: the exact
+ * declarations whose absence caused the defect. They fail the moment someone
+ * deletes the anchor or the disabled binding again.
+ *
+ * The behavioural proof is the driven browser measurement recorded on the PR -
+ * bar 1440x2 at `top: 0` of the WINDOW before, 1406x2 at the card's own top
+ * edge after; refresh button `false -> false -> false` before,
+ * `false -> true -> false` after.
+ */
+import { describe, it } from "node:test";
+import assert from "node:assert/strict";
+import { readFileSync } from "node:fs";
+import { fileURLToPath } from "node:url";
+
+const read = (rel: string) =>
+    readFileSync(fileURLToPath(new URL(`../${rel}`, import.meta.url)), "utf8");
+
+/** The declaration block for a selector, comments stripped. */
+const ruleFor = (css: string, selector: string) => {
+    const at = css.indexOf(`\n${selector} {`);
+    assert.notEqual(at, -1, `no rule for "${selector}"`);
+    const open = css.indexOf("{", at);
+    const close = css.indexOf("}", open);
+    return css
+        .slice(open + 1, close)
+        .replace(/\/\*[\s\S]*?\*\//g, "")
+        .trim();
+};
+
+describe("the loading bar's containing block", () => {
+    const screens = read("assets/css/screens.css");
+
+    it("anchors .table-card__loading to its card, not the viewport", () => {
+        // The bar is absolute. Without this the nearest positioned ancestor is
+        // the initial containing block, i.e. the browser window: the bar was
+        // measured 1440x2 at top:0 while its card sat 61.5px lower.
+        assert.match(ruleFor(screens, ".table-card"), /position:\s*relative/);
+    });
+
+    it("still positions the bar out of flow, so a load causes no 2px jump", () => {
+        assert.match(ruleFor(screens, ".table-card__loading"), /position:\s*absolute/);
+    });
+});
+
+describe("TableMain's refresh button", () => {
+    const sfc = read("components/TableMain.vue");
+    // The one `v-btn` carrying the refresh emit.
+    const refreshBtn = (() => {
+        const at = sfc.indexOf(`@click="emits('refresh')"`);
+        assert.notEqual(at, -1, "no refresh button in TableMain");
+        const open = sfc.lastIndexOf("<v-btn", at);
+        return sfc.slice(open, at);
+    })();
+
+    it("is disabled while the caller's request is in flight", () => {
+        // Without this, clicking refresh on a list that comes back identical
+        // changed zero pixels - the Work Orders / Duty Officer Book report.
+        assert.match(refreshBtn, /:disabled="loading"/);
+    });
+
+    it("reads the same `loading` prop the bar reads, so the two cannot diverge", () => {
+        assert.match(sfc, /v-if="loading"[\s\S]{0,200}table-card__loading/);
+        assert.match(sfc, /loading:\s*\{\s*type:\s*Boolean,\s*default:\s*false,?\s*\}/);
+    });
+});
+
+describe(".app-switch's thumb", () => {
+    const primitives = read("assets/css/primitives.css");
+
+    it("beats Vuetify's 3- and 4-class slide on the input", () => {
+        // `.v-locale--is-ltr .v-switch .v-selection-control__input` and its
+        // `--dirty` twin outrank a 2-class rule, so the plain reset never
+        // applied and every thumb sat 10px out of its track.
+        assert.match(
+            ruleFor(primitives, ".app-switch .v-selection-control__input"),
+            /transform:\s*none\s*!important/,
+        );
+    });
+});