@7365admin1/layer-common 4.97.1-staging.602 → 4.97.1-staging.604

package/components/AccessCardAddForm.vue

@@ -158,14 +158,27 @@
               :title="`Card No (${cardNoMaxLength} digits)`"
               required
             />
+            <!--
+              `hide-details="auto"`, not `hide-details`: the bare prop hides the
+              details slot ENTIRELY, messages included, so the rules below ran
+              and refused the form while the field said nothing about why.
+              "auto" keeps the slot collapsed until there is a message.
+
+              `type="text"` with a numeric keypad, not `type="number"`:
+              `maxlength` is ignored on a number input (it applies to text,
+              search, url, tel, email and password only), and a card number is a
+              ZERO-PADDED fixed-length string - "0000065535" is the leading
+              zeros plus the serial, and a number input is free to drop them.
+            -->
             <v-text-field
               v-model="card.cardNumber"
               density="compact"
-              hide-details
-              :rules="[requiredRule]"
+              hide-details="auto"
+              :rules="[requiredRule, cardNoRule]"
               :maxlength="cardNoMaxLength"
-              type="number"
-              hide-spin-buttons
+              type="text"
+              inputmode="numeric"
+              autocomplete="off"
               :suffix="`${card.cardNumber?.toString().length || 0}/${cardNoMaxLength}`"
               @input="limitCardNumber"
             >
@@ -407,6 +420,10 @@
   </v-card>
 </template>
 <script setup lang="ts">
+// Imported by name rather than left to auto-imports, the way
+// `VehicleBulkAddForm` reaches for `~/utils/phoneMasks`.
+import { normaliseCardNo, validateCardNo } from "~/utils/access-card-number";
+
 const prop = defineProps({
   mode: {
     type: String,
@@ -607,10 +624,12 @@ onMounted(async () => {
   }
 });
 
+/** Mirrors what core accepts - see `utils/access-card-number.ts` for why. */
+const cardNoRule = (value: string | number | null | undefined) =>
+  validateCardNo(value, cardNoMaxLength.value);
+
 function limitCardNumber() {
-  if (card.value.cardNumber && card.value.cardNumber.toString().length > cardNoMaxLength.value) {
-    card.value.cardNumber = card.value.cardNumber.toString().slice(0, cardNoMaxLength.value);
-  }
+  card.value.cardNumber = normaliseCardNo(card.value.cardNumber, cardNoMaxLength.value);
 }
 
 function limitPinNo() {

package/components/ClientMain.vue

@@ -226,7 +226,7 @@
                 <td class="td-muted" data-label="Email">{{ item.email }}</td>
                 <td data-label="App">{{ item.app }}</td>
                 <td class="td-muted" data-label="Role">{{ item.role }}</td>
-                <td data-label="Status"><span class="status-chip pending">{{ item.status }}</span></td>
+                <td data-label="Status"><span class="status-chip pending text-capitalize">{{ item.status }}</span></td>
                 <td data-label="Action">
                   <button
                     class="cancel-btn"

package/components/DocumentManagement.vue

@@ -34,7 +34,7 @@
         <v-menu v-model="filterMenu" offset-y>
           <template #activator="{ props }">
             <button v-bind="props" type="button" class="doc-filters__type">
-              <span>{{ selectedFileType || "Filter by File Type" }}</span>
+              <span>{{ selectedFileType ? fileTypeLabel(selectedFileType) : "Filter by File Type" }}</span>
               <v-icon size="18">mdi-chevron-down</v-icon>
             </button>
           </template>
@@ -48,7 +48,7 @@
                 class="filtertype-item"
               >
                 <v-list-item-title class="text-subtitle-2">
-                  {{ type }}
+                  {{ fileTypeLabel(type) }}
                 </v-list-item-title>
               </v-list-item>
             </v-list>
@@ -859,6 +859,9 @@ const currentFolderPath = computed(() => {
 });
 
 const fileTypes = ref(["all", "pdf", "csv", "doc"]);
+/** What each filter value reads as on screen; the value sent stays as is. */
+const FILE_TYPE_LABELS: Record<string, string> = { all: "All file types", pdf: "PDF", csv: "CSV", doc: "Word (DOC)" };
+const fileTypeLabel = (type: string) => FILE_TYPE_LABELS[type] ?? type.toUpperCase();
 const selectedFileType = ref("all");
 
 /**

package/components/OnlineFormConfigurationForm.vue

@@ -54,7 +54,7 @@
             <InputLabel title="Status" />
             <v-select
               v-model="formStatus"
-              :items="['active', 'inactive']"
+              :items="[{ title: 'Active', value: 'active' }, { title: 'Inactive', value: 'inactive' }]"
               density="compact"
               variant="outlined"
               hide-details

package/package.json

@@ -2,7 +2,7 @@
   "name": "@7365admin1/layer-common",
   "license": "MIT",
   "type": "module",
-  "version": "4.97.1-staging.602",
+  "version": "4.97.1-staging.604",
   "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/access-card-number.ts

@@ -0,0 +1,86 @@
+/**
+ * WHAT AN ACCESS CARD NUMBER IS.
+ *
+ * The server mints one as `randomInt(0, 65536).toString().padStart(10, "0")`
+ * (core `access-management.repo.ts generateCardNo`), so every number the system
+ * issues itself is TEN DIGITS, zero-padded, carrying a serial of at most 65535.
+ * A number typed in by hand has to be the same shape, because two places in
+ * core take it apart again and refuse anything else:
+ *
+ *   createQrData             `/^\d{10}$/`, then the LAST SIX digits as the
+ *   (access-management.repo)  serial (0-65535) and the FIRST FOUR as the
+ *                             facility code.
+ *   cardNumberToHex          `/^\d{10}$/`, then the whole value packed into
+ *   (rsa-encryption)          four bytes, so it cannot exceed 0xFFFFFFFF.
+ *
+ * Until now the Add Card form mirrored neither: the field carried a "Required"
+ * rule alone, so "7" passed the form and failed at the server - or was stored
+ * and only failed later, when a QR code had to be built from it.
+ *
+ * Both server rules are mirrored here so the form refuses exactly what the
+ * server would, and says so while the number is still on screen.
+ *
+ * The two ceilings are NOT redundant. `createQrData` bounds only the last six
+ * digits, which leaves the first four free up to 9999; `cardNumberToHex` bounds
+ * the whole ten-digit value at 4294967295, which caps those first four at 4294.
+ * A number such as "9999065535" satisfies the first and fails the second, so a
+ * form that checked only the serial would still hand the server a number it
+ * refuses.
+ */
+
+export const CARD_NO_DIGITS = 10;
+export const CARD_NO_SERIAL_DIGITS = 6;
+
+/** The 16-bit serial `generateCardNo` draws from, and `createQrData` bounds. */
+export const CARD_NO_MAX_SERIAL = 65535;
+
+/** Four bytes: `cardNumberToHex` packs the whole number into a uint32. */
+export const CARD_NO_MAX_VALUE = 0xffffffff;
+
+/**
+ * Digits only, clipped to length.
+ *
+ * The field is a text input so that leading zeros survive and `maxlength`
+ * applies (it is ignored on `type="number"`), which also lets letters through -
+ * so they are stripped here rather than left for the rule to reject something
+ * the user could not see was wrong.
+ */
+export function normaliseCardNo(
+  value: string | number | null | undefined,
+  digits: number = CARD_NO_DIGITS,
+): string {
+  return (value ?? "")
+    .toString()
+    .replace(/\D/g, "")
+    .slice(0, digits);
+}
+
+/**
+ * `true` when the number is one the server will accept, otherwise the message
+ * to show under the field.
+ *
+ * An EMPTY value passes: the field's own "Required" rule already speaks for it,
+ * and returning a message here too stacks two errors under one input.
+ */
+export function validateCardNo(
+  value: string | number | null | undefined,
+  digits: number = CARD_NO_DIGITS,
+): true | string {
+  const text = (value ?? "").toString();
+  if (!text) return true;
+
+  if (!new RegExp(`^\\d{${digits}}$`).test(text)) {
+    return `Card No must be exactly ${digits} digits`;
+  }
+
+  const serial = Number(text.slice(-CARD_NO_SERIAL_DIGITS));
+  if (serial > CARD_NO_MAX_SERIAL) {
+    return `The last ${CARD_NO_SERIAL_DIGITS} digits must be ${CARD_NO_MAX_SERIAL} or lower`;
+  }
+
+  if (Number(text) > CARD_NO_MAX_VALUE) {
+    return `Card No must be ${CARD_NO_MAX_VALUE} or lower`;
+  }
+
+  return true;
+}