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

package/components/Dialog/DeleteConfirmation.vue

@@ -6,8 +6,15 @@
             <!-- `text-error` is Vuetify's own class over `--v-theme-error`,
                  which is the design's `--err` in both themes - already a token,
                  so it stays. -->
+            <!-- `message` is a FAILURE the caller wants read before the
+                 operator tries again. It used to append "Do you want to delete
+                 anyway?", which promises a force this dialog cannot perform -
+                 pressing Delete simply repeats the same request. No caller had
+                 ever passed `message`, so the sentence had never rendered.
+                 `VehicleManagement` is the first, and it passes the server's
+                 refusal when an ANPR revoke could not be confirmed. -->
             <div v-if="message" class="text-error mt-2">
-                {{ message }} Do you want to delete anyway?
+                {{ message }}
             </div>
         </v-card-text>
 

package/components/VehicleManagement.vue

@@ -36,6 +36,35 @@
       <template #item.plates="{ value, item }">
         <PlateNumberDisplay :plate-numbers="value" :default-value="item.plateNumber" />
       </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.
+      -->
+      <template #item.action="{ item }">
+        <v-menu v-if="rowPlate(item) && hasVehicleActions(rowPlate(item) as TPlateNumber)"
+          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)" />
+          </v-list>
+        </v-menu>
+      </template>
     </TableMain>
 
     <!-- <Snackbar v-model="messageSnackbar" :text="message" :color="messageColor" /> -->
@@ -97,7 +126,8 @@
                             <v-btn icon="mdi-dots-vertical" v-bind="menuProps" flat size="x-small" />
                           </template>
                           <v-list density="compact">
-                            <v-list-item v-if="(plateNumberItem as TPlateNumber)?.status == 'active'"
+                            <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
@@ -108,7 +138,7 @@
                               prepend-icon="mdi-restore" base-color="warning"
                               @click="handleRestoreVehicle(plateNumberItem as TPlateNumber)" />
                             <v-list-item
-                              v-if="((plateNumberItem as TPlateNumber)?.type === 'whitelist' || (plateNumberItem as TPlateNumber)?.type === 'blocklist') && plateNumberItem?.status == 'active'"
+                              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'"
@@ -140,8 +170,17 @@
       </DialogUpdateMoreAction>
     </v-dialog>
     <v-dialog v-model="dialog.deleteVehicle" persistent width="540">
-      <DialogDeleteConfirmation :loading="deletingVehicle"
-        :prompt-title="`Are you sure want to delete this vehicle - ${selectedPlateNumberObject?.plateNumber}?`"
+      <!--
+        A row is ONE plate document, not a person: the list groups sibling
+        plates by NRIC and keeps the first document's `_id` as the row's `_id`.
+        So the copy names the plate it is about to remove, says what removing
+        it actually does (revokes ANPR access), and says plainly that nothing
+        else on the record is touched. `message` carries the server's refusal
+        when the ANPR revoke could not be confirmed - the dialog stays open on
+        that path so the operator can read it and retry.
+      -->
+      <DialogDeleteConfirmation :loading="deletingVehicle" :message="deleteError"
+        :prompt-title="`Remove vehicle number ${selectedPlateNumberObject?.plateNumber} from this record? This revokes its ANPR access - it will no longer open the barrier. The resident and any other vehicle numbers on this record are not affected.`"
         @delete="submitDelete" @close="closeDeleteDialog" />
     </v-dialog>
     <v-dialog v-model="dialog.approveVehicle" persistent width="540">
@@ -191,6 +230,7 @@ const headers = [
   { title: "Category", value: "category" },
   // { title: "Type", value: "type" },
   // { title: "Status", value: "status" },
+  { title: "", value: "action" },
 ]
 
 const plateHeaders = [
@@ -205,10 +245,6 @@ const plateHeaders = [
 const { formatCamelCaseToWords, formatDate, debounce, maskNRIC } = useUtils();
 const { getVehicles, deleteVehicle, formatVehicleStatus, approveVehicle, updateVehicle, getSpecificVehicleById } = useVehicle();
 
-const canApproveVehicle = computed(() => {
-  return true;
-})
-
 const items = ref<Array<Record<string, any>>>([]);
 const page = ref(1);
 const pages = ref(0);
@@ -235,7 +271,10 @@ const selectedPlateNumberId = ref<string | null>(null); // individual plate numb
 const message = ref("");
 const messageColor = ref("");
 const messageSnackbar = ref(false);
-const bypass = ref(false);
+// The server's refusal when an ANPR revoke could not be confirmed. Rendered
+// 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("");
 
 function showMessage(msg: string, color: string) {
   message.value = msg;
@@ -298,6 +337,7 @@ function formatValues(key: string, value: any) {
 
 const closeDeleteDialog = () => {
   dialog.deleteVehicle = false;
+  deleteError.value = "";
 };
 
 const handleCloseAll = () => {
@@ -397,6 +437,34 @@ function handleUpdateType(item: TPlateNumber) {
   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.
+ */
+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
+  );
+}
+
+/**
+ * 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.
+ */
 function hasVehicleActions(item: TPlateNumber) {
   const isActive = item?.status === "active";
   const isPending = item?.status === "pending";
@@ -404,10 +472,10 @@ function hasVehicleActions(item: TPlateNumber) {
   const canUpdateType = item?.type === "whitelist" || item?.type === "blocklist";
 
   return (
-    isActive ||
+    (props.canUpdateVehicle && isActive) ||
     (props.canApproveVehicle && isPending) ||
     isDeleted ||
-    (canUpdateType && isActive) ||
+    (props.canUpdateVehicle && canUpdateType && isActive) ||
     (props.canDeleteVehicle && isActive)
   );
 }
@@ -469,14 +537,26 @@ async function submitDelete() {
 
   try {
     deletingVehicle.value = true;
+    deleteError.value = "";
     const res = await deleteVehicle({ site: props.site, recno: recNo, id: plateNumberId as string, type }
     );
     dialog.deleteVehicle = false;
     showMessage(res.message, "success");
     await getVehiclesRefresh();
   } catch (error: any) {
+    // The delete is fail-closed on the server: if the plate cannot be confirmed
+    // gone from every ANPR camera holding it, the record is left intact and the
+    // 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);
-    message.value = error.response._data.message;
+    deleteError.value =
+      error?.response?._data?.message ||
+      error?.data?.message ||
+      error?.message ||
+      "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 {
     deletingVehicle.value = false;
   }

package/package.json

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