@7365admin1/layer-common 4.2.2-staging.263 → 4.2.2-staging.264

package/components/VehicleForm.vue

@@ -327,7 +327,15 @@
         Back to Selection
       </AppButton>
       <AppButton v-else variant="ghost" @click="close">Close</AppButton>
-      <AppButton :disabled="!validForm || processing" @click="submit">
+      <!--
+        NOT disabled on `validForm`. It used to be, and on a record with no
+        Block/Level/Unit - which exist, e.g. BEN21 on staging - the Update
+        button was simply dead: Vuetify does not mark a field invalid until it
+        has been validated, so there was no red field, no message, and no way
+        to find out why. The click now runs the validation, which paints every
+        offending field and writes the reason above.
+      -->
+      <AppButton :disabled="processing" @click="submit">
         {{ prop.mode == "add" ? "Submit" : "Update" }}
       </AppButton>
     </div>
@@ -751,6 +759,18 @@ function showMessage(msg: string, color: string) {
 
 async function submit() {
   errorMessage.value = "";
+
+  // Ask the form first. `validate()` marks each failing field, so the person
+  // filling it in can see WHICH details are missing rather than meeting a
+  // button that does nothing.
+  const result = await (formRef.value as any)?.validate?.();
+  if (result && result.valid === false) {
+    errorMessage.value =
+      "Some required details are missing or not valid. The fields marked in " +
+      "red above need to be filled in before this can be saved.";
+    return;
+  }
+
   processing.value = true;
   try {
     const SPTVal = vehicle?.seasonPassType as string;
@@ -828,19 +848,26 @@ async function submit() {
       };
     }
 
+    // Say what the SERVER says happened, not a hardcoded sentence. The server
+    // reports whether the plate actually reached an ANPR camera - a site whose
+    // camera is switched off saves the vehicle but registers nothing, and this
+    // used to announce "Vehicle added successfully." over the top of that.
     if (prop.mode === "add") {
-      await addVehicle(payload);
-      showMessage("Vehicle added successfully.", "success");
+      const res: any = await addVehicle(payload);
+      showMessage(res?.data || res?.message || "Vehicle added successfully.", "success");
     } else if (prop.mode === "edit") {
       const plateNumberId = prop.plateNumberId as string;
-      await updateVehicle(plateNumberId, payload);
-      showMessage("Vehicle updated successfully.", "success");
+      const res: any = await updateVehicle(plateNumberId, payload);
+      showMessage(res?.data || res?.message || "Vehicle updated successfully.", "success");
     }
     emit("done");
   } catch (error: any) {
-    const err = error?.data?.message;
+    // A refused create is fail-closed on the server and its message names the
+    // camera that would not take the plate. `$fetch` puts it on `data`, `ofetch`
+    // on `response._data`; reading only one of them dropped the reason.
     errorMessage.value =
-      err ||
+      error?.data?.message ||
+      error?.response?._data?.message ||
       `Failed to ${
         prop.mode === "add" ? "add" : "update"
       } vehicle. Please try again.`;
@@ -1023,7 +1050,6 @@ function handleCloseMatchDialog() {
 
 onMounted(() => {
   setTimeout(() => {
-    console.log("VehicleForm mounted with props:", prop);
     if (prop.mode === "edit" && prop.vehicleData) {
       // In edit mode, we only want to check for matching people records if there is a pre-filled unit value. If there is no unit value, we can assume that this vehicle record is not linked to any existing people record and skip the check.
       vehicle.seasonPassType = prop.vehicleData.seasonPassType || "";

package/components/VehicleManagement.vue

@@ -38,30 +38,40 @@
       </template>
 
       <!--
-        Edit and Delete were already built and already shipping, but only two
-        clicks deep: click the row -> the read-only "Preview" dialog -> the
-        kebab on the NESTED plate table. Nothing on the row itself said the
-        actions existed. This is the same kebab every other table in this
-        package draws (`AppButton variant="row"` as a `v-menu` activator, see
-        `MemberMain.vue`), and it calls the SAME handlers the nested menu calls,
-        so there is exactly one code path per operation.
-
-        `@click.stop` because the row carries `@row-click`; without it the
-        kebab would open the Preview dialog underneath the menu.
+        The row kebab. Same activator every other table in this package draws
+        (`AppButton variant="row"` as a `v-menu` activator, see
+        `MemberMain.vue`). `@click.stop` because the row also carries
+        `@row-click`; without it the kebab would open the Preview dialog
+        underneath the menu.
+
+        A row can stand for MORE THAN ONE vehicle. The list groups sibling
+        plates by NRIC, so Test Res 3 on staging is one row holding TEST123 and
+        TEST124 - two separate documents. The menu used to resolve a single
+        plate and act on it silently; now every plate on the row is listed
+        under its own number and the operator picks the one they mean.
+
+        The items themselves come from `vehiclePlateActions`, the same function
+        the Preview dialog's menu uses, so the two can no longer disagree - and
+        the kebab's own `v-if` asks that function too, so an empty menu cannot
+        be drawn.
       -->
       <template #item.action="{ item }">
-        <v-menu v-if="rowPlate(item) && hasVehicleActions(rowPlate(item) as TPlateNumber)"
-          location="bottom end">
+        <v-menu v-if="rowHasVehicleActions(item, vehiclePermissions)" location="bottom end">
           <template #activator="{ props: menuProps }">
             <AppButton v-bind="menuProps" variant="row" icon="mdi-dots-vertical" aria-label="Vehicle actions"
               @click.stop />
           </template>
           <v-list density="compact">
-            <v-list-item v-if="canUpdateVehicle && rowPlate(item)?.status === 'active'" title="Edit Vehicle"
-              prepend-icon="mdi-pencil" @click="handleEditVehicleAction(rowPlate(item) as TPlateNumber)" />
-            <v-list-item v-if="canDeleteVehicle && rowPlate(item)?.status === 'active'" title="Delete"
-              prepend-icon="mdi-delete" base-color="error"
-              @click="handleDeleteVehicleAction(rowPlate(item) as TPlateNumber)" />
+            <template v-for="plate in rowPlates(item)" :key="plate._id ?? plate.plateNumber">
+              <template v-if="vehiclePlateActions(plate, vehiclePermissions).length">
+                <v-list-subheader v-if="rowPlates(item).length > 1">
+                  {{ plate.plateNumber }}
+                </v-list-subheader>
+                <v-list-item v-for="action in vehiclePlateActions(plate, vehiclePermissions)" :key="action.key"
+                  :title="action.title" :prepend-icon="action.icon" :base-color="action.color"
+                  @click="runVehicleAction(action.key, plate as TPlateNumber)" />
+              </template>
+            </template>
           </v-list>
         </v-menu>
       </template>
@@ -120,34 +130,17 @@
                           {{ formatVehicleStatus(value).label }}
                         </v-chip>
                       </template>
-                      <template #item.action="{ item: plateNumberItem, value }">
-                        <v-menu v-if="hasVehicleActions(plateNumberItem as TPlateNumber)">
+                      <template #item.action="{ item: plateNumberItem }">
+                        <v-menu v-if="vehiclePlateActions(plateNumberItem, vehiclePermissions).length">
                           <template #activator="{ props: menuProps }">
                             <v-btn icon="mdi-dots-vertical" v-bind="menuProps" flat size="x-small" />
                           </template>
                           <v-list density="compact">
                             <v-list-item
-                              v-if="canUpdateVehicle && (plateNumberItem as TPlateNumber)?.status == 'active'"
-                              title="Edit Vehicle" prepend-icon="mdi-pencil"
-                              @click="handleEditVehicleAction(plateNumberItem as TPlateNumber)" />
-                            <v-list-item
-                              v-if="canApproveVehicle && (plateNumberItem as TPlateNumber)?.status == 'pending'"
-                              title="Approve" prepend-icon="mdi-check-circle" base-color="success"
-                              @click="handleApproveVehicle(plateNumberItem as TPlateNumber)" />
-                            <v-list-item v-if="(plateNumberItem as TPlateNumber)?.status == 'deleted'" title="Restore"
-                              prepend-icon="mdi-restore" base-color="warning"
-                              @click="handleRestoreVehicle(plateNumberItem as TPlateNumber)" />
-                            <v-list-item
-                              v-if="canUpdateVehicle && ((plateNumberItem as TPlateNumber)?.type === 'whitelist' || (plateNumberItem as TPlateNumber)?.type === 'blocklist') && plateNumberItem?.status == 'active'"
-                              :title="(plateNumberItem as TPlateNumber)?.type === 'blocklist' ? 'Unblock' : 'Block'"
-                              prepend-icon="mdi-swap-horizontal"
-                              :base-color="(plateNumberItem as TPlateNumber)?.type === 'blocklist' ? 'primary' : 'error'"
-                              @click="handleUpdateType(plateNumberItem as TPlateNumber)" />
-
-                            <v-list-item
-                              v-if="canDeleteVehicle && (plateNumberItem as TPlateNumber)?.status == 'active'"
-                              title="Delete" prepend-icon="mdi-delete" base-color="error"
-                              @click="handleDeleteVehicleAction(plateNumberItem as TPlateNumber)" />
+                              v-for="action in vehiclePlateActions(plateNumberItem, vehiclePermissions)"
+                              :key="action.key" :title="action.title" :prepend-icon="action.icon"
+                              :base-color="action.color"
+                              @click="runVehicleAction(action.key, plateNumberItem as TPlateNumber)" />
                           </v-list>
                         </v-menu>
                       </template>
@@ -184,19 +177,25 @@
         @delete="submitDelete" @close="closeDeleteDialog" />
     </v-dialog>
     <v-dialog v-model="dialog.approveVehicle" persistent width="540">
-      <DialogReusablePrompt :loading="approvingVehicle"
+      <!--
+        `message` carries the server's refusal. Approve talks to the ANPR
+        cameras, so a failure here is a sentence about a camera that the
+        operator has to read and act on - it was going to a five-second
+        snackbar, along with the device's raw `{"ErrorCode":...}` reply.
+      -->
+      <DialogReusablePrompt :loading="approvingVehicle" :message="actionError"
         :prompt-title="`Are you sure want to approve this vehicle - ${selectedPlateNumberObject?.plateNumber}?`"
-        @proceed="submitApprove" @close="dialog.approveVehicle = false" />
+        @proceed="submitApprove" @close="closeActionDialog('approveVehicle')" />
     </v-dialog>
     <v-dialog v-model="dialog.restoreVehicle" persistent width="540">
-      <DialogReusablePrompt :loading="restoringVehicle"
+      <DialogReusablePrompt :loading="restoringVehicle" :message="actionError"
         :prompt-title="`Are you sure want to restore this vehicle - ${selectedPlateNumberObject?.plateNumber}?`"
-        @proceed="submitRestore" @close="dialog.restoreVehicle = false" />
+        @proceed="submitRestore" @close="closeActionDialog('restoreVehicle')" />
     </v-dialog>
     <v-dialog v-model="dialog.updateVehicleType" persistent width="540">
-      <DialogReusablePrompt :loading="updatingType"
+      <DialogReusablePrompt :loading="updatingType" :message="actionError"
         :prompt-title="`Are you sure want to update the type of this vehicle - ${selectedPlateNumberObject?.plateNumber}?`"
-        @proceed="submitUpdateType" @close="dialog.updateVehicleType = false" />
+        @proceed="submitUpdateType" @close="closeActionDialog('updateVehicleType')" />
     </v-dialog>
     <Snackbar v-model="messageSnackbar" :text="message" :color="messageColor" />
   </v-row>
@@ -205,6 +204,12 @@
 <script lang="ts" setup>
 import useUtils from '../composables/useUtils';
 import useVehicle from '../composables/useVehicle';
+import {
+  rowHasVehicleActions,
+  rowPlates,
+  vehiclePlateActions,
+  type VehicleActionKey,
+} from '../utils/vehicle-actions';
 
 
 
@@ -275,6 +280,29 @@ const messageSnackbar = ref(false);
 // inside the delete dialog rather than a 5-second toast: it names the camera
 // that failed and the operator needs it in front of them to retry.
 const deleteError = ref("");
+// The same thing for Approve / Restore / Block, which also talk to the cameras
+// and whose refusals were being thrown at a snackbar that times out.
+const actionError = ref("");
+
+function closeActionDialog(key: "approveVehicle" | "restoreVehicle" | "updateVehicleType") {
+  dialog[key] = false;
+  actionError.value = "";
+}
+
+/**
+ * The server's own sentence, or a plain fallback.
+ *
+ * `error.response._data` is undefined on a network failure, so reading it
+ * unguarded threw out of the catch and the operator saw nothing at all.
+ */
+function readServerMessage(error: any, fallback: string) {
+  return (
+    error?.response?._data?.message ||
+    error?.data?.message ||
+    error?.message ||
+    fallback
+  );
+}
 
 function showMessage(msg: string, color: string) {
   message.value = msg;
@@ -425,59 +453,48 @@ function handleDeleteVehicleAction(item: TPlateNumber) {
 
 function handleApproveVehicle(item: TPlateNumber) {
   selectedPlateNumberObject.value = item || null;
+  actionError.value = "";
   dialog.approveVehicle = true;
 }
 function handleRestoreVehicle(item: TPlateNumber) {
   selectedPlateNumberObject.value = item || null;
+  actionError.value = "";
   dialog.restoreVehicle = true;
 }
 
 function handleUpdateType(item: TPlateNumber) {
   selectedPlateNumberObject.value = item || null;
+  actionError.value = "";
   dialog.updateVehicleType = true;
 }
 
 /**
- * The plate document a MAIN-table row actually is.
- *
- * `vehicle.repo.ts` groups sibling plates by non-empty NRIC and keeps the FIRST
- * document's `_id` as the row's `_id` (`vehicleId: { $first: "$_id" }`), then
- * `$addToSet`s the group into `plates`. The row itself carries no
- * `plateNumber`, `type`, `recNo` or `status` - only `plates[]` does - so a row
- * action has to resolve its own plate out of that array before it can name it
- * or delete it.
+ * The three gates the action list is decided by, passed straight through from
+ * the host app's `useLocalPermission()`.
  */
-function rowPlate(item: any): TPlateNumber | null {
-  const plates = (item?.plates ?? []) as Array<TPlateNumber>;
-  return (
-    plates.find((plate) => String(plate?._id) === String(item?._id)) ??
-    plates[0] ??
-    null
-  );
-}
+const vehiclePermissions = computed(() => ({
+  canUpdateVehicle: props.canUpdateVehicle,
+  canDeleteVehicle: props.canDeleteVehicle,
+  canApproveVehicle: props.canApproveVehicle,
+}));
 
 /**
- * True when at least one menu item would render. It has to be the exact union
- * of the five `v-if`s below it, or the kebab appears over an empty menu.
- *
- * `isActive` used to stand alone here, which was the Edit item's test - but
- * Edit is now gated on `canUpdateVehicle`, and Block/Unblock only offers itself
- * for a whitelist/blocklist plate, so a read-only role or a plate of another
- * type would have opened nothing.
+ * One entry point for every menu item, in both menus, so a new action can only
+ * be added in one place and cannot be forgotten in the other.
  */
-function hasVehicleActions(item: TPlateNumber) {
-  const isActive = item?.status === "active";
-  const isPending = item?.status === "pending";
-  const isDeleted = item?.status === "deleted";
-  const canUpdateType = item?.type === "whitelist" || item?.type === "blocklist";
-
-  return (
-    (props.canUpdateVehicle && isActive) ||
-    (props.canApproveVehicle && isPending) ||
-    isDeleted ||
-    (props.canUpdateVehicle && canUpdateType && isActive) ||
-    (props.canDeleteVehicle && isActive)
-  );
+function runVehicleAction(key: VehicleActionKey, plate: TPlateNumber) {
+  switch (key) {
+    case "edit":
+      return handleEditVehicleAction(plate);
+    case "approve":
+      return handleApproveVehicle(plate);
+    case "restore":
+      return handleRestoreVehicle(plate);
+    case "toggle-type":
+      return handleUpdateType(plate);
+    case "delete":
+      return handleDeleteVehicleAction(plate);
+  }
 }
 
 function handleSelectVehicleStatus(value: TVehicleType) {
@@ -549,12 +566,7 @@ async function submitDelete() {
     // request is refused. Say so. This used to assign to `message` WITHOUT
     // raising the snackbar - and `error.response._data` throws on a network
     // error - so a refused delete showed the operator nothing at all.
-    console.error("Error deleting vehicle:", error);
-    deleteError.value =
-      error?.response?._data?.message ||
-      error?.data?.message ||
-      error?.message ||
-      "Failed to delete vehicle.";
+    deleteError.value = readServerMessage(error, "Failed to delete vehicle.");
     // The dialog stays open and the row stays in the table - nothing is removed
     // optimistically, so what is on screen still matches the database.
   } finally {
@@ -575,17 +587,15 @@ async function submitRestore() {
 
   try {
     restoringVehicle.value = true;
+    actionError.value = "";
     // reactivate and restore will use the same endpoint, just with different payload
     const res = await approveVehicle({ site: props.site, org: props.org, id: vehicleId as string }
     );
-    dialog.restoreVehicle = false;
+    closeActionDialog("restoreVehicle");
     showMessage(res.message, "success");
     await getVehiclesRefresh();
   } catch (error: any) {
-    console.error("Error restoring vehicle:", error);
-    const errMessage = error?.response?._data?.message || "Failed to restore vehicle";
-    showMessage(errMessage, "error");
-    // message.value = error.response._data.message;
+    actionError.value = readServerMessage(error, "Failed to restore vehicle.");
   } finally {
     restoringVehicle.value = false;
   }
@@ -626,15 +636,13 @@ async function submitUpdateType() {
 
   try {
     updatingType.value = true;
+    actionError.value = "";
     const res = await updateVehicle(vehicleId as string, payload);
-    dialog.updateVehicleType = false;
+    closeActionDialog("updateVehicleType");
     showMessage(res.message, "success");
     await getVehiclesRefresh();
   } catch (error: any) {
-    console.error("Error updating vehicle type:", error);
-    const errMessage = error?.response?._data?.message || "Failed to update vehicle type";
-    showMessage(errMessage, "error");
-    // message.value = error.response._data.message;
+    actionError.value = readServerMessage(error, "Failed to update vehicle type.");
   } finally {
     updatingType.value = false;
   }
@@ -651,16 +659,15 @@ async function submitApprove() {
 
   try {
     approvingVehicle.value = true;
+    actionError.value = "";
     const res = await approveVehicle({ site: props.site, org: props.org, id: plateNumberId as string }
 
     );
-    dialog.approveVehicle = false;
+    closeActionDialog("approveVehicle");
     showMessage(res.message, "success");
     await getVehiclesRefresh();
   } catch (error: any) {
-    console.error("Error approving vehicle:", error);
-    const errMessage = error?.response?._data?.message || "Failed to approve vehicle";
-    showMessage(errMessage, "error");
+    actionError.value = readServerMessage(error, "Failed to approve vehicle.");
   } finally {
     approvingVehicle.value = false;
   }

package/package.json

@@ -2,7 +2,7 @@
   "name": "@7365admin1/layer-common",
   "license": "MIT",
   "type": "module",
-  "version": "4.2.2-staging.263",
+  "version": "4.2.2-staging.264",
   "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/vehicle-actions.ts

@@ -0,0 +1,141 @@
+/**
+ * Which actions a vehicle plate offers, in one place.
+ *
+ * The reason this exists rather than a list of `v-if`s: the row menu and the
+ * Preview dialog's menu each had their OWN copy of the conditions, and they
+ * drifted. On staging, 1 Sep 2026:
+ *
+ *  - a PENDING plate's row kebab opened an EMPTY menu - Approve was only ever
+ *    written into the Preview copy;
+ *  - an INACTIVE (blocked) plate had no kebab at all and no action in Preview
+ *    either, because every condition in both copies tested for
+ *    active / pending / deleted, so there was no way to restore it.
+ *
+ * With the decision in one function, "the kebab shows" and "the menu has
+ * something in it" are the same question, and an empty menu cannot be drawn.
+ */
+
+export type VehicleActionKey =
+  | "edit"
+  | "approve"
+  | "restore"
+  | "toggle-type"
+  | "delete";
+
+export type VehicleActionPermissions = {
+  canUpdateVehicle?: boolean;
+  canDeleteVehicle?: boolean;
+  canApproveVehicle?: boolean;
+};
+
+export type VehicleAction = {
+  key: VehicleActionKey;
+  title: string;
+  icon: string;
+  /** Vuetify `base-color`; undefined means the list's default. */
+  color?: string;
+};
+
+/** The shape a plate is read as. Only the three fields the decision uses. */
+export type VehicleActionPlate = {
+  status?: string | null;
+  type?: string | null;
+  plateNumber?: string | null;
+};
+
+/**
+ * `inactive` is the status a blocked vehicle carries, and `deleted` is a
+ * soft-deleted one. Both are "not currently working, and someone should be
+ * able to put it back".
+ */
+const RESTORABLE = new Set(["inactive", "deleted", "rejected"]);
+
+export function vehiclePlateActions(
+  plate: VehicleActionPlate | null | undefined,
+  permissions: VehicleActionPermissions = {},
+): VehicleAction[] {
+  if (!plate) return [];
+
+  const status = String(plate.status ?? "").toLowerCase();
+  const type = String(plate.type ?? "").toLowerCase();
+
+  const isActive = status === "active";
+  const isPending = status === "pending";
+  const isRestorable = RESTORABLE.has(status);
+  const isTogglableType = type === "whitelist" || type === "blocklist";
+
+  const actions: VehicleAction[] = [];
+
+  if (permissions.canUpdateVehicle && isActive) {
+    actions.push({ key: "edit", title: "Edit Vehicle", icon: "mdi-pencil" });
+  }
+
+  if (permissions.canApproveVehicle && isPending) {
+    actions.push({
+      key: "approve",
+      title: "Approve",
+      icon: "mdi-check-circle",
+      color: "success",
+    });
+  }
+
+  // Restore is deliberately NOT gated on `canUpdateVehicle`: it was ungated
+  // before this change and narrowing a gate is a separate, role-data decision.
+  // What changes is that a blocked vehicle now offers it at all.
+  if (isRestorable) {
+    actions.push({
+      key: "restore",
+      title: status === "inactive" ? "Unblock" : "Restore",
+      icon: "mdi-restore",
+      color: "warning",
+    });
+  }
+
+  if (permissions.canUpdateVehicle && isTogglableType && isActive) {
+    actions.push({
+      key: "toggle-type",
+      title: type === "blocklist" ? "Unblock" : "Block",
+      icon: "mdi-swap-horizontal",
+      color: type === "blocklist" ? "primary" : "error",
+    });
+  }
+
+  if (permissions.canDeleteVehicle && isActive) {
+    actions.push({
+      key: "delete",
+      title: "Delete",
+      icon: "mdi-delete",
+      color: "error",
+    });
+  }
+
+  return actions;
+}
+
+/**
+ * Every plate a MAIN-table row stands for.
+ *
+ * `vehicle.repo.ts` groups sibling plates by non-empty NRIC and keeps the FIRST
+ * document's `_id` as the row's `_id`, then collects the group into `plates`.
+ * Test Res 3 on staging is one row holding TEST123 (whitelist) and TEST124
+ * (blocklist) - two separate vehicle documents. The row menu used to resolve a
+ * single plate and silently act on TEST123, with no way to reach TEST124.
+ */
+export function rowPlates(row: any): any[] {
+  const plates = Array.isArray(row?.plates) ? row.plates : [];
+  if (plates.length) return plates;
+
+  // A row that carries its own plate fields and no group (the shape the older
+  // list endpoints return) is a single plate.
+  return row?.plateNumber ? [row] : [];
+}
+
+/** True when at least one plate on the row offers at least one action. */
+export function rowHasVehicleActions(
+  row: any,
+  permissions: VehicleActionPermissions = {},
+): boolean {
+  return rowPlates(row).some(
+    (plate) => vehiclePlateActions(plate, permissions).length > 0,
+  );
+}