@7365admin1/layer-common 4.112.0 → 4.113.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @iservice365/layer-common
 
+## 4.113.0
+
+### Minor Changes
+
+- 92f08bca: Vehicle Mgmt: new "QR sticker" column (Linked / None / n of m) and an All / With sticker / Without sticker filter, shown only while the site's QR switch is on
+
 ## 4.112.0
 
 ### Minor Changes

package/components/VehicleManagement.vue

@@ -48,9 +48,18 @@
 
       <!-- Search joins the toolbar row rather than stacking a second one. -->
       <template #prepend-additional>
+        <v-select v-if="qrEnabled" v-model="qrStickerFilter" :items="qrStickerFilterItems" label="QR sticker"
+          density="compact" variant="outlined" hide-details class="vehicle-qr-filter" style="max-width: 190px"
+          data-test="vehicle-qr-filter" />
         <AppField v-model="searchInput" search compact placeholder="Search" klass="app-toolbar__search" />
       </template>
 
+      <template #item.qrSticker="{ item }">
+        <v-chip size="small" variant="tonal" :color="qrStickerSummary(rowPlates(item)).color" data-test="vehicle-qr-cell">
+          {{ qrStickerSummary(rowPlates(item)).label }}
+        </v-chip>
+      </template>
+
       <template #item.category="{ value }">
         {{ formatValues("category", value) }}
       </template>
@@ -439,7 +448,7 @@ import {
 // `error.message` put ofetch's own developer string in the delete dialog:
 // `[PUT] "/api/vehicles/6a9691f25648d7633171c9e3": 502`.
 import { errorConverter } from '../utils/data';
-import { stickerCodeHint } from '../utils/vehicle-qr-blank';
+import { qrStickerSummary, stickerCodeHint } from '../utils/vehicle-qr-blank';
 import { isPermissionRefusalError } from '../utils/permission-refusal';
 
 
@@ -456,9 +465,11 @@ const props = defineProps({
 });
 
 
-const headers = [
+const headers = computed(() => [
   { title: "Name", value: "name" },
   { title: "Vehicle Numbers", value: "plates" },
+  // Only while the site's QR switch is on (like the print button).
+  ...(qrEnabled.value ? [{ title: "QR sticker", value: "qrSticker", sortable: false }] : []),
   { title: "NRIC", value: "nric" },
   { title: "Block", value: "block.name" },
   { title: "Floor", value: "level.name" },
@@ -467,7 +478,7 @@ const headers = [
   // { title: "Type", value: "type" },
   // { title: "Status", value: "status" },
   { title: "", value: "action" },
-]
+])
 
 const plateHeaders = [
   { title: "Plate Number", value: "plateNumber" },
@@ -546,6 +557,12 @@ const { getVehicles, deleteVehicle, formatVehicleStatus, approveVehicle, blockVe
 // Vehicle QR stickers: the site's switch (Settings) decides whether the print
 // and re-issue actions exist; only people who may update vehicles get them.
 const qrEnabled = ref(false);
+const qrStickerFilter = ref("");
+const qrStickerFilterItems = [
+  { title: "All", value: "" },
+  { title: "With sticker", value: "with" },
+  { title: "Without sticker", value: "without" },
+];
 const qrStickersOn = computed(() => qrEnabled.value && props.canUpdateVehicle);
 const qrVehicleIds = ref<string[]>([]);
 const qrReissuePlate = ref<TPlateNumber | null>(null);
@@ -838,6 +855,7 @@ const { data: getVehiclesReq, refresh: getVehiclesRefresh, pending: getVehiclesP
         search: searchInput.value,
         view: activeTab.value,
         site: props.site,
+        qrSticker: qrEnabled.value ? qrStickerFilter.value : "",
       }),
     {
       watch: [page],
@@ -1321,6 +1339,11 @@ watch(searchInput, () => {
   debouncedSearch()
 })
 
+watch(qrStickerFilter, () => {
+  page.value = 1;
+  getVehiclesRefresh();
+})
+
 // A new tab starts from its first page and loads straight away.
 watch(activeTab, () => {
   page.value = 1;

package/composables/useVehicle.ts

@@ -9,12 +9,13 @@ export default function useVehicle() {
     site = "",
     status = "",
     view = "",
+    qrSticker = "",
   } = {}) {
     // `view` is the screen's tab: residents, season-passes or block-listed.
     // Every status comes back unless `status` narrows it.
     return await useNuxtApp().$api<Record<string, any>>("/api/vehicles", {
       method: "GET",
-      query: { search, page, limit, order, type, category, site, status, view },
+      query: { search, page, limit, order, type, category, site, status, view, qrSticker },
     });
   }
 

package/package.json

@@ -2,7 +2,7 @@
   "name": "@7365admin1/layer-common",
   "license": "MIT",
   "type": "module",
-  "version": "4.112.0",
+  "version": "4.113.0",
   "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/types/people.d.ts

@@ -48,7 +48,7 @@ declare type TOccupancyRoleOption = {
   description: string;
 };
 
-declare type TPlateNumber = { plateNumber: string, recNo?: string, _id?: string, status: TVehicleStatus, type: TVehicleType, anprCameras?: TVehicleAnprCamera[] };
+declare type TPlateNumber = { plateNumber: string, recNo?: string, _id?: string, status: TVehicleStatus, type: TVehicleType, anprCameras?: TVehicleAnprCamera[], hasQrSticker?: boolean };
 
 
 // `""` is the FORM's "nothing picked yet" - it is stripped from the payload

package/utils/vehicle-qr-blank.ts

@@ -52,3 +52,12 @@ export const isBlankCode = (plate: unknown): boolean => /^([0-9A-Z]{4}-){5}[0-9A
 export function plateLines(plate: string): string[] {
   return isBlankCode(plate) ? [plate.slice(0, 14), plate.slice(15)] : [plate];
 }
+
+/** The list's "QR sticker" cell for one row: how many of its plates already hold a sticker. */
+export function qrStickerSummary(plates: Array<{ hasQrSticker?: boolean }>): { label: string; color: string } {
+  const total = plates.length;
+  const linked = plates.filter((p) => p?.hasQrSticker === true).length;
+  if (!total || !linked) return { label: "None", color: "grey" };
+  if (linked === total) return { label: "Linked", color: "success" };
+  return { label: `${linked} of ${total}`, color: "warning" };
+}