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

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/RolePermissionFormCreate.vue

@@ -88,10 +88,9 @@
                       @update:model-value="
                         toggleCategory(String(resourceKey), $event)
                       "
-                      color="accent"
+                      class="app-switch"
                       density="compact"
                       hide-details
-                      inset
                     />
                   </template>
                 </v-list-item>

package/components/RolePermissionFormPreviewUpdate.vue

@@ -47,10 +47,9 @@
                     <v-switch
                       :model-value="isCategoryEnabled(String(resourceKey))"
                       :disabled="!edit"
-                      color="accent"
+                      class="app-switch"
                       density="compact"
                       hide-details
-                      inset
                       @update:model-value="
                         toggleCategory(String(resourceKey), $event)
                       "

package/components/RolePermissionMain.vue

@@ -84,6 +84,7 @@
         :permissions="props.permissions"
         :org="props.orgId"
         :site-id="props.siteId"
+        :site-state="siteFieldShown"
         :web-only-resources="props.webOnlyResources"
         @success="success()"
         :type="props.type"
@@ -184,6 +185,9 @@
 </template>
 
 <script setup lang="ts">
+// Relative import: this layer's `utils/` is not auto-imported into consumers.
+import { showSiteField } from "../utils/role";
+
 const props = defineProps({
   orgId: {
     type: String,
@@ -197,6 +201,18 @@ const props = defineProps({
     type: String,
     default: "",
   },
+  /*
+   * Whether the Create-role dialog shows its (read-only) Site field.
+   * The dialog defaulted this to `true` but this component never declared or
+   * forwarded it, and its root is a `<div>`, so a fallthrough `site-state`
+   * attribute landed on that div instead of the dialog - no consuming app
+   * could switch the field off. Admin roles are never site-scoped, so the
+   * field drew permanently disabled and empty there (QA, admin PR #18).
+   */
+  siteState: {
+    type: Boolean,
+    default: true,
+  },
   type: {
     type: String,
     required: true,
@@ -296,6 +312,10 @@ function tableRowClickHandler(_: any, data: any) {
 
 const createDialog = ref(false);
 
+const siteFieldShown = computed(() =>
+  showSiteField(props.siteState, props.type)
+);
+
 function success() {
   createDialog.value = false;
   getRoles();

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/package.json

@@ -2,7 +2,7 @@
   "name": "@7365admin1/layer-common",
   "license": "MIT",
   "type": "module",
-  "version": "3.2.2-staging.194",
+  "version": "3.2.2-staging.196",
   "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/utils/role.test.ts

@@ -0,0 +1,69 @@
+import assert from "node:assert/strict";
+import { readFileSync } from "node:fs";
+import { test } from "node:test";
+
+import { showSiteField } from "./role.ts";
+
+/**
+ * QA on the admin app (PR #18) reported "no site options" on Create Role. The
+ * Site field is read-only by design - it shows the site a role belongs to -
+ * but an admin role has no site, so it drew permanently disabled and empty.
+ * `RolePermissionFormCreate` defaulted `siteState` to `true` and
+ * `RolePermissionMain` neither declared nor forwarded it, and its root is a
+ * `<div>`, so a fallthrough attribute could not reach the dialog either: no
+ * consuming app could switch the field off.
+ */
+test("an admin role never shows the site field", () => {
+  assert.equal(showSiteField(true, "admin"), false);
+  assert.equal(showSiteField(false, "admin"), false);
+});
+
+test("every other role type keeps what the app asked for", () => {
+  for (const type of [
+    "app",
+    "organization",
+    "security_agency",
+    "cleaning_services",
+  ]) {
+    assert.equal(showSiteField(true, type), true, type);
+    assert.equal(showSiteField(false, type), false, type);
+  }
+});
+
+test("RolePermissionMain declares site-state and forwards it to the dialog", () => {
+  const src = readFileSync(
+    new URL("../components/RolePermissionMain.vue", import.meta.url),
+    "utf8"
+  );
+
+  assert.match(src, /siteState:\s*\{/, "site-state must be a declared prop");
+  assert.match(
+    src,
+    /:site-state="siteFieldShown"/,
+    "the dialog must receive the resolved value, not a fallthrough attribute"
+  );
+});
+
+/**
+ * The category expand toggle carried no class, so it fell back to raw Vuetify
+ * `inset` styling: a white thumb on a white card, measured 1.02:1 light /
+ * 1.04:1 dark against the dialog surface. `.app-switch` (primitives.css) is
+ * this layer's switch shape and is what makes the thumb visible. `inset` is
+ * removed with it - Vuetify's inset dimensions beat the `.app-switch` rules on
+ * source order and collapse the control to zero width.
+ */
+for (const file of [
+  "RolePermissionFormCreate.vue",
+  "RolePermissionFormPreviewUpdate.vue",
+]) {
+  test(`${file} styles its category toggle with .app-switch`, () => {
+    const src = readFileSync(
+      new URL(`../components/${file}`, import.meta.url),
+      "utf8"
+    );
+    const sw = src.slice(src.indexOf("<v-switch"), src.indexOf("/>", src.indexOf("<v-switch")));
+
+    assert.ok(sw.includes('class="app-switch"'), "missing .app-switch");
+    assert.ok(!/\binset\b/.test(sw), "inset fights the .app-switch dimensions");
+  });
+}

package/utils/role.ts

@@ -0,0 +1,10 @@
+/**
+ * Whether the Create-role dialog should show its (read-only) Site field.
+ *
+ * An admin role is org-wide, never site-scoped, so there is no site to show -
+ * the field could only ever render empty and permanently disabled, which is
+ * what QA reported on the admin app. Every other role type keeps whatever the
+ * consuming app asked for.
+ */
+export const showSiteField = (siteState: boolean, type: string): boolean =>
+  siteState && type !== "admin";

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/,
+        );
+    });
+});