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

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/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.196",
+  "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;
+}