@7365admin1/layer-common 1.10.4 → 1.10.5

package/components/VehicleManagement.vue

@@ -0,0 +1,298 @@
+<template>
+  <v-row no-gutters>
+    <TableMain :headers="headers" :items="items" :loading="loading || getVehiclesPending" :page="page" :pages="pages"
+      :pageRange="pageRange" :extension-height="70" :canCreate="canCreateVehicle" @refresh="getVehiclesRefresh"
+      createLabel="Add Vehicle" show-header @row-click="handleRowClick" @create="dialog.showSelection = true"
+      @update:page="handleUpdatePage">
+
+      <template #extension>
+        <v-row no-gutters class="px-5 py-1 d-flex align-center justify-end ga-3">
+          <v-text-field v-model="searchInput" density="compact" placeholder="Search" clearable max-width="300"
+            append-inner-icon="mdi-magnify" hide-details />
+          <v-select v-model="vehicleType" density="compact" item-title="label" item-value="value"
+            placeholder="Filter by Type" clearable max-width="200" hide-details :items="typeOptions" />
+        </v-row>
+      </template>
+
+      <template #item.block="{ value }">
+        {{ value ? `blk ${value}` : "" }}
+      </template>
+      <template #item.status="{ value }">
+        <v-chip :color="formatVehicleStatus(value).color" size="x-small" dark>
+          {{ formatVehicleStatus(value).label }}
+        </v-chip>
+
+
+      </template>
+
+      <template #item.plateNumbers="{ value, item }">
+       <PlateNumberDisplay :plate-numbers="value" :default-value="item.plateNumber" />
+      </template>
+    </TableMain>
+
+    <!-- <Snackbar v-model="messageSnackbar" :text="message" :color="messageColor" /> -->
+
+    <v-dialog v-model="dialog.showSelection" width="450" persistent>
+      <VehicleAddSelection @cancel="dialog.showSelection = false" @select="handleSelectVehicleStatus" />
+    </v-dialog>
+
+    <v-dialog v-model="dialog.createVehicle" v-if="vehicleType" width="450" persistent>
+      <VehicleForm :type="vehicleType" mode="add" @back="handleBackToSelection" @done="handleAddVehicleComplete"
+        :org="org" :site="props.site" @close:all="handleCloseAll" />
+    </v-dialog>
+
+    <v-dialog v-model="dialog.updateVehicle" v-if="vehicleType" width="450" persistent>
+      <VehicleForm :type="vehicleType" mode="edit" :vehicle-data="selectedVehicleObject"
+        @back="dialog.updateVehicle = false" @close="dialog.updateVehicle = false" @done="handleUpdateVehicleComplete"
+        :org="org" :site="site" @close:all="handleCloseAll" />
+    </v-dialog>
+
+    <v-dialog v-if="canViewVehicleDetails" v-model="dialog.showMoreActions" width="450" persistent>
+      <DialogUpdateMoreAction title="Preview" :can-update="canUpdateVehicle" :can-delete="canDeleteVehicle"
+        @close="dialog.showMoreActions = false" edit-button-label="Edit Vehicle" delete-button-label="Delete Vehicle"
+        @delete="handleDeleteVehicleAction" @edit="handleEditVehicleAction">
+        <template v-slot:content>
+          <v-row no-gutters class="ga-1 mb-5">
+            
+            <template v-for="(label, key) in formattedFields" :key="key">
+              <v-col v-if="key === 'plateNumbers'" class="d-flex ga-2">
+                <span class="d-flex ga-3 align-center"><strong>{{ label }}:</strong></span>
+                <PlateNumberDisplay :plate-numbers="selectedVehicleObject[key]" :default-value="selectedVehicleObject.plateNumber" />  
+              </v-col>
+
+              <v-col v-else-if="selectedVehicleObject[key]" cols="12">
+                <span class="d-flex ga-3 align-center"><strong>{{ label }}:</strong> {{ formatValues(key,
+                  selectedVehicleObject[key])
+                  }}</span>
+              </v-col>
+            </template>
+          </v-row>
+        </template>
+      </DialogUpdateMoreAction>
+    </v-dialog>
+    <v-dialog v-model="dialog.deleteVehicle" persistent width="540">
+      <DialogDeleteConfirmation :message="message" prompt-title="Are you sure want to delete this vehicle?"
+        @delete="submitDelete" @close="closeDeleteDialog" />
+    </v-dialog>
+  </v-row>
+</template>
+
+<script lang="ts" setup>
+import useVehicle from '../composables/useVehicle';
+
+definePageMeta({
+  middleware: ["01-auth", "02-org"],
+  memberOnly: true,
+})
+
+
+const props = defineProps({
+  canCreateVehicle: { type: Boolean, default: false },
+  canUpdateVehicle: { type: Boolean, default: true },
+  canDeleteVehicle: { type: Boolean, default: true },
+  canViewVehicleDetails: { type: Boolean, default: true },
+  site: { type: String, required: true },
+  org: { type: String, required: true },
+});
+
+
+const headers = [
+      { title: "Name", value: "name" },
+      // { title: "Building", value: "buildingName" },
+      { title: "Vehicle Numbers", value: "plateNumbers" },
+      { title: "NRIC", value: "nric" },
+      { title: "Block", value: "block" },
+      { title: "Floor", value: "level" },
+      { title: "Category", value: "category" },
+      { title: "Type", value: "type" },
+      { title: "Status", value: "status" },
+    ]
+
+
+
+const { formatCamelCaseToWords, formatDate, debounce } = useUtils();
+const { getVehicles, deleteVehicle, formatVehicleStatus } = useVehicle();
+
+const items = ref<Array<Record<string, any>>>([]);
+const page = ref(1);
+const pages = ref(0);
+const pageRange = ref("-- - -- of --");
+
+const searchInput = ref("")
+
+const loading = ref(false);
+const selectedVehicleId = ref<string | null>(null)
+const vehicleType = ref<TVehicleType | null>(null);
+
+const message = ref("");
+const messageColor = ref("");
+const messageSnackbar = ref(false);
+const bypass = ref(false);
+
+function showMessage(msg: string, color: string) {
+  message.value = msg;
+  messageColor.value = color;
+  messageSnackbar.value = true;
+}
+
+const dialog = reactive({
+  createVehicle: false,
+  updateVehicle: false,
+  showSelection: false,
+  deleteVehicle: false,
+  showMoreActions: false,
+});
+
+const typeOptions = [
+  { label: "Whitelist", value: "whitelist" },
+  { label: "Blocklist", value: "blocklist" },
+  { label: "Season Pass", value: "seasonPass" },
+]
+
+const formattedFields: Partial<Record<keyof TVehicle, string>> = {
+  name: "Name",
+  plateNumbers: "Vehicle Numbers",
+  phoneNumber: "Phone Number",
+  nric: "NRIC",
+  block: "Block",
+  level: "Level",
+  unit: "Unit",
+  start: "Start",
+  end: "End",
+  category: "Category",
+  type: "Type",
+  remarks: "Remarks",
+}
+
+function formatValues(key: string, value: any) {
+  if (!value) return ""
+  switch (key) {
+    case "start":
+      return formatDate(value)
+    case "end":
+      return formatDate(value)
+    case "type":
+    case "category":
+      return String(value).charAt(0).toUpperCase() + String(value).slice(1).toLowerCase();
+  }
+
+  return value;
+}
+
+const closeDeleteDialog = () => {
+  dialog.deleteVehicle = false;
+};
+
+const handleCloseAll = () => {
+  dialog.createVehicle = false;
+  dialog.updateVehicle = false;
+  dialog.showSelection = false;
+  vehicleType.value = null;
+}
+
+const selectedVehicleObject = computed(() => {
+  return items.value.find(item => item?._id === selectedVehicleId.value) || {}
+})
+
+const { data: getVehiclesReq, refresh: getVehiclesRefresh, pending: getVehiclesPending } =
+  await useLazyAsyncData(
+    "get-all-vehicles",
+    () =>
+      getVehicles({
+        page: page.value,
+        search: searchInput.value,
+        type: vehicleType.value ?? "",
+      }),
+    {
+      watch: [page],
+    }
+  );
+
+
+watch(getVehiclesReq, (newData: any) => {
+    items.value = newData?.items || [];
+    pages.value = newData?.pages || 0;
+    pageRange.value = newData?.pageRange || "-- - -- of --";
+})
+
+function handleRowClick(data: any) {
+  selectedVehicleId.value = data?.item?._id;
+  dialog.showMoreActions = true;
+  message.value = "";
+}
+
+function handleEditVehicleAction() {
+  vehicleType.value = selectedVehicleObject.value?.type || null;
+  dialog.showSelection = false;
+  dialog.updateVehicle = true;
+}
+
+function handleDeleteVehicleAction() {
+  dialog.showMoreActions = false;
+  dialog.deleteVehicle = true;
+}
+
+function handleSelectVehicleStatus(value: TVehicleType) {
+  vehicleType.value = value;
+  dialog.showSelection = false;
+  dialog.createVehicle = true;
+}
+
+function handleBackToSelection() {
+  dialog.showSelection = true;
+  dialog.createVehicle = false;
+  vehicleType.value = null;
+}
+
+function handleAddVehicleComplete() {
+  dialog.showSelection = false;
+  dialog.createVehicle = false;
+  vehicleType.value = null;
+  getVehiclesRefresh();
+}
+
+function handleUpdateVehicleComplete() {
+  dialog.showSelection = false;
+  dialog.updateVehicle = false;
+  dialog.showMoreActions = false;
+  vehicleType.value = null;
+  getVehiclesRefresh();
+}
+
+function handleUpdatePage(newPageNum: number) {
+  page.value = newPageNum;
+}
+
+const formatPlateNumbers = (value: any) => {
+  if (!value || value.length === 0) return "";
+
+  const firstTwo = value.slice(0, 2).map((item: any) => item.plateNumber || "");
+  return firstTwo.join(", ");
+};
+
+async function submitDelete() {
+  bypass.value = false;
+
+  try {
+    const res = await deleteVehicle({ site: props.site, id: selectedVehicleId.value as string, recno: selectedVehicleObject.value.recno, type: selectedVehicleObject.value.type }
+    );
+    dialog.deleteVehicle = false;
+    dialog.showMoreActions = false;
+    selectedVehicleId.value = null
+    showMessage(res.message, "success");
+    getVehiclesRefresh();
+  } catch (error: any) {
+    console.error("Error deleting vehicle:", error);
+    message.value = error.response._data.message;
+    bypass.value = true;
+  }
+}
+
+const debouncedSearch = debounce(getVehiclesRefresh, 500);
+watch([searchInput, vehicleType], () => {
+  page.value = 1;
+  debouncedSearch()
+})
+
+
+</script>

package/composables/useAccessManagement.ts

@@ -148,13 +148,20 @@ export default function useAccessManagement() {
     );
   }
 
-  function deleteCard(payload: { cardId: string }) {
+  function deleteCard(payload: { cardId: string; remarks: string }) {
     return useNuxtApp().$api(`/api/access-management/delete-card`, {
       method: "PATCH",
       body: payload,
     });
   }
 
+  function getCardHistory(cardId: string) {
+    return useNuxtApp().$api<Record<string, any>[]>(
+      `/api/access-management/card-history/${cardId}`,
+      { method: "GET" }
+    );
+  }
+
   return {
     getDoorAccessLevels,
     getLiftAccessLevels,
@@ -167,5 +174,6 @@ export default function useAccessManagement() {
     assignAccessCard,
     getAvailableAccessCards,
     deleteCard,
+    getCardHistory,
   };
 }

package/composables/useBulletin.ts

@@ -29,7 +29,8 @@ export default function(){
     sort?: 'asc' | 'desc'; 
     site?: string;
     status?: TAnnouncementStatus;
-    search?: string
+    search?: string;
+    recipients?: TAnnouncementRecipients;
   }
 
     async function getAll({
@@ -38,7 +39,8 @@ export default function(){
     sort = "asc",
     site,
     status,
-    search
+    search,
+    recipients
   } : TGetAllParams) {
     return await useNuxtApp().$api<Record<string, any>>(
       "/api/bulletin-boards",
@@ -50,8 +52,8 @@ export default function(){
           sort,
           site,
           status,
-          search
-  
+          search,
+          recipients
         },
       }
     );

package/composables/useVehicle.ts

@@ -0,0 +1,114 @@
+export default function useVehicle() {
+  async function getVehicles({
+    search = "",
+    page = 1,
+    limit = 10,
+    sort = "asc",
+    order = "",
+    type = "",
+    category = "",
+  } = {}) {
+    return await useNuxtApp().$api<Record<string, any>>("/api/vehicles", {
+      method: "GET",
+      query: { search, page, limit, sort, order, type, category },
+    });
+  }
+
+  async function getVehicleById(id: string) {
+    return await useNuxtApp().$api<Record<string, any>>(`/api/vehicles/${id}`, {
+      method: "GET",
+    });
+  }
+
+  async function addVehicle(payload: Partial<TVehiclePayload>) {
+    return await useNuxtApp().$api<Record<string, any>>("/api/vehicles", {
+      method: "POST",
+      body: payload,
+    });
+  }
+
+  async function updateVehicle(id: string, payload: Partial<TVehiclePayload>) {
+    return await useNuxtApp().$api<Record<string, any>>(`/api/vehicles/${id}`, {
+      method: "PUT",
+      body: payload,
+    });
+  }
+
+  async function getCustomSeasonPassTypes(site: string) {
+    return await useNuxtApp().$api<Record<string, any>>(
+      `/api/vehicles/site/${site}`,
+      {
+        method: "GET",
+      }
+    );
+  }
+
+  interface IDeleteVehicleParams {
+    site: string;
+    id: string;
+    recno: string;
+    type: "whitelist" | "blocklist";
+  }
+
+  async function deleteVehicle({ site, id, recno, type }: IDeleteVehicleParams) {
+    return await useNuxtApp().$api<Record<string, any>>(
+      `/api/vehicles/${id}`,
+      {
+        method: "PUT",
+        body: {
+          site,
+          recno,
+          type,
+        },
+      }
+    );
+  }
+
+  async function getVehicleByNRIC(search: string) {
+    return await useNuxtApp().$api<Record<string, any>>(
+      `/api/vehicles/nric`,
+      {
+        method: "GET",
+        query: {
+          search,
+        },
+      }
+    );
+  }
+
+
+  function formatVehicleStatus(status: string){
+    let label = ""
+    let color = ""
+    switch (status) {
+        case 'pending':
+            label = "Pending"
+            color = "orange"
+            break;
+        case 'active':
+            label = "Active"
+            color = "green"
+            break;
+        case 'rejected':
+            label = "Rejected"
+            color = "red"
+            break;
+        default:
+            label = status?.charAt(0).toUpperCase() + status?.slice(1) || ""
+            color = "grey"
+    }
+
+    return { label, color }
+}
+
+  return {
+    getVehicles,
+    addVehicle,
+    getCustomSeasonPassTypes,
+    getVehicleById,
+    updateVehicle,
+    deleteVehicle,
+    getVehicleByNRIC,
+    formatVehicleStatus
+  };
+}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@7365admin1/layer-common",
   "license": "MIT",
   "type": "module",
-  "version": "1.10.4",
+  "version": "1.10.5",
   "author": "7365admin1",
   "main": "./nuxt.config.ts",
   "publishConfig": {

package/types/vehicle.d.ts

@@ -0,0 +1,43 @@
+declare type TVehicle = {
+  plateNumber: string;
+  plateNumbers?: string[]; // For display purposes, the API will return an array of plate numbers if there are multiple associated with the same vehicle record
+  type: TVehicleType;
+  category: "resident" | "visitor";
+  direction: "entry" | "exit" | "both" | "none";
+  name: string;
+  phoneNumber?: string;
+  block: number | "";
+  level: string;
+  unit: string;
+  nric?: string | null;
+  remarks?: string;
+  seasonPassType?: string;
+  start?: string; // ISO date string
+  end?: string; // ISO date string
+  site?: string;
+  org?: string;
+  _id?: string;
+  recNo?: string;
+};
+
+declare type TVehicleType = "whitelist" | "blocklist" | "seasonpass";
+
+declare type TVehiclePayload = Pick<
+  TVehicle,
+  | "plateNumber"
+  | "type"
+  | "category"
+  | "direction"
+  | "name"
+  | "phoneNumber"
+  | "block"
+  | "level"
+  | "unit"
+  | "nric"
+  | "remarks"
+  | "seasonPassType"
+  | "start"
+  | "end"
+  | "site"
+  | "org"
+>;