@iservice365/layer-common 1.2.0 → 1.3.1

package/components/VisitorManagement.vue

@@ -1,95 +1,33 @@
 <template>
   <v-row no-gutters>
-    <TableMain
-      :headers="headers"
-      :items="items"
-      :loading="getVisitorPending"
-      :page="page"
-      :pages="pages"
-      :extension-height="110"
-      :pageRange="pageRange"
-      :canCreate="canAddVisitor"
-      @refresh="getVisitorRefresh"
-      @update:page="handleUpdatePage"
-      createLabel="Add Visitor"
-      show-header
-      @row-click="handleRowClick"
-      @create="dialog.showSelection = true"
-    >
+    <TableMain :headers="headers" :items="items" :loading="getVisitorPending" :page="page" :pages="pages"
+      :extension-height="110" :offset="300" :pageRange="pageRange" :canCreate="canAddVisitor"
+      @refresh="getVisitorRefresh" @update:page="handleUpdatePage" createLabel="Add Visitor" show-header
+      @row-click="handleRowClick" @create="dialog.showSelection = true">
       <template #extension>
         <v-row no-gutters class="w-100 d-flex flex-column">
-          <v-tabs
-            v-model="activeTab"
-            color="primary"
-            :height="40"
-            @update:model-value="toRoute"
-            class="w-100"
-          >
-            <v-tab
-              v-for="tab in tabOptions"
-              :value="tab.type"
-              :key="tab.type"
-              class="text-capitalize"
-            >
+          <v-tabs v-model="activeTab" color="primary" :height="40" @update:model-value="toRoute" class="w-100">
+            <v-tab v-for="tab in tabOptions" :value="tab.status" :key="tab.status" class="text-capitalize">
               {{ tab.name }}
             </v-tab>
           </v-tabs>
 
-          <v-card
-            class="w-100 px-3 d-flex align-center ga-5 py-2"
-            flat
-            :height="60"
-          >
-            <v-text-field
-              v-model="searchInput"
-              density="compact"
-              placeholder="Search"
-              clearable
-              max-width="300"
-              append-inner-icon="mdi-magnify"
-              hide-details
-            />
-            <v-checkbox
-              v-model="displayCheckedOutOnly"
-              class="text-subtitle-2"
-              hide-details
-            >
+          <v-card class="w-100 px-3 d-flex align-center ga-5 py-2" flat :height="60">
+            <v-text-field v-model="searchInput" density="compact" placeholder="Search" clearable max-width="300"
+              append-inner-icon="mdi-magnify" hide-details />
+            <v-checkbox v-model="displayCheckedOutOnly" class="text-subtitle-2" hide-details>
               <template #label>
                 <span class="text-caption">Not Checked Out</span>
               </template>
             </v-checkbox>
-            <InputDateTimePicker
-              v-model:utc="dateFrom"
-              density="compact"
-              hide-details
-            />
-            <InputDateTimePicker
-              v-model:utc="dateTo"
-              density="compact"
-              hide-details
-            />
-            <v-select
-              v-model="filterTypes"
-              label="Filter by types"
-              item-title="label"
-              item-value="value"
-              :items="visitorSelection"
-              density="compact"
-              clearable
-              multiple
-              max-width="200"
-              hide-details
-            >
+            <InputDateTimePicker v-model:utc="dateFrom" density="compact" hide-details />
+            <InputDateTimePicker v-model:utc="dateTo" density="compact" hide-details />
+            <v-select v-model="filterTypes" label="Filter by types" item-title="label" item-value="value"
+              :items="visitorSelection" density="compact" clearable multiple max-width="200" hide-details>
               <template v-slot:selection="{ item, index }">
                 <div class="d-flex align-center text-caption text-nowrap">
-                  <v-chip
-                    v-if="index === 0"
-                    color="error"
-                    :text="filterTypeSelectionLabel()"
-                    size="x-small"
-                    variant="tonal"
-                    class="ml-2"
-                  />
+                  <v-chip v-if="index === 0" color="error" :text="filterTypeSelectionLabel()" size="x-small"
+                    variant="tonal" class="ml-2" />
                 </div>
               </template>
             </v-select>
@@ -111,7 +49,7 @@
           <v-icon icon="mdi-user" size="15" />
           <span v-if="item.type === 'contractor'" class="text-capitalize">{{
             formatCamelCaseToWords(item.contractorType)
-          }}</span>
+            }}</span>
           <span v-else class="text-capitalize">{{ formatType(item) }}</span>
         </span>
         <span class="d-flex align-center ga-2">
@@ -149,100 +87,57 @@
           <v-icon icon="mdi-clock-time-four-outline" color="green" size="20" />
           <span class="text-capitalize">{{
             UTCToLocalTIme(item.checkIn) || "-"
-          }}</span>
+            }}</span>
         </span>
         <span class="d-flex align-center ga-2">
           <v-icon icon="mdi-clock-time-eight-outline" color="red" size="20" v-if="item.checkOut" />
           <template v-if="item.checkOut">
             <span class="text-capitalize">{{
               UTCToLocalTIme(item.checkOut) || "_"
-            }}</span>
+              }}</span>
             <span v-if="item?.manualCheckout">
-              <TooltipInfo
-                text="Manual Checkout"
-                density="compact"
-                size="x-small"
-              />
+              <TooltipInfo text="Manual Checkout" density="compact" size="x-small" />
             </span>
           </template>
           <span v-else>
-            <v-btn
-              size="x-small"
-              class="text-capitalize"
-              color="red"
-              text="Checkout"
-              :loading="loading.checkingOut && item?._id === selectedVisitorId"
-              @click.stop="handleCheckout(item._id)"
-              v-if="canCheckoutVisitor"
-            />
+            <v-btn size="x-small" class="text-capitalize" color="red" text="Checkout"
+              :loading="loading.checkingOut && item?._id === selectedVisitorId" @click.stop="handleCheckout(item._id)"
+              v-if="canCheckoutVisitor" />
           </span>
         </span>
       </template>
     </TableMain>
 
     <v-dialog v-model="dialog.showSelection" width="450" persistent>
-      <VisitorFormSelection
-        @cancel="dialog.showSelection = false"
-        @select="handleSelectVisitorType"
-      />
+      <VisitorFormSelection @cancel="dialog.showSelection = false" @select="handleSelectVisitorType" />
     </v-dialog>
 
-    <v-dialog
-      v-model="dialog.addVisitor"
-      v-if="activeVisitorFormType"
-      width="450"
-      persistent
-    >
-      <VisitorForm
-        mode="add"
-        :org="orgId"
-        :site="siteId"
-        :type="activeVisitorFormType"
-        @back="handleClickBack"
-        @done="handleVisitorFormDone"
-        @done:more="handleVisitorFormCreateMore"
-      />
+    <v-dialog v-model="dialog.addVisitor" v-if="activeVisitorFormType" width="450" persistent>
+      <VisitorForm mode="add" :org="orgId" :site="siteId" :type="activeVisitorFormType" @back="handleClickBack"
+        @done="handleVisitorFormDone" @done:more="handleVisitorFormCreateMore" />
     </v-dialog>
 
     <v-dialog v-model="dialog.viewVisitor" width="450" persistent>
-      <VehicleUpdateMoreAction
-        title="Preview"
-        :can-update="canUpdateVisitor"
-        :can-delete="canDeleteVisitor"
-        @close="dialog.viewVisitor = false"
-        edit-button-label="Edit Visitor"
-        delete-button-label="Delete Visitor"
-        @delete="handleDeleteVisitor"
-      >
+      <VehicleUpdateMoreAction title="Preview" :can-update="canUpdateVisitor" :can-delete="canDeleteVisitor"
+        @close="dialog.viewVisitor = false" edit-button-label="Edit Visitor" delete-button-label="Delete Visitor"
+        @delete="handleDeleteVisitor">
         <template v-slot:content>
           <v-row no-gutters class="mb-4">
             <v-col v-for="(label, key) in formattedFields" :key="key" cols="12">
-              <span
-                v-if="key === 'checkOut' && !selectedVisitorObject[key] && canCheckoutVisitor"
-                class="d-flex align-center"
-              >
+              <span v-if="
+                key === 'checkOut' &&
+                !selectedVisitorObject[key] &&
+                canCheckoutVisitor
+              " class="d-flex align-center">
                 <strong>{{ label }}:</strong>
-                <v-btn
-                  size="x-small"
-                  class="ml-3 text-capitalize"
-                  color="red"
-                  text="Checkout"
-                  :disabled="loading.checkingOut"
-                  @click="handleCheckout(selectedVisitorId as string)"
-                />
+                <v-btn size="x-small" class="ml-3 text-capitalize" color="red" text="Checkout"
+                  :disabled="loading.checkingOut" @click="handleCheckout(selectedVisitorId as string)" />
               </span>
 
-              <span
-                v-else-if="selectedVisitorObject[key]"
-                class="d-flex ga-3 align-center"
-                ><strong>{{ label }}:</strong>
+              <span v-else-if="selectedVisitorObject[key]" class="d-flex ga-3 align-center"><strong>{{ label
+                  }}:</strong>
                 {{ formatValues(key, selectedVisitorObject[key]) }}
-                <TooltipInfo
-                  v-if="key === 'checkOut'"
-                  text="Manual Checkout"
-                  density="compact"
-                  size="x-small"
-                />
+                <TooltipInfo v-if="key === 'checkOut'" text="Manual Checkout" density="compact" size="x-small" />
               </span>
             </v-col>
           </v-row>
@@ -251,12 +146,9 @@
     </v-dialog>
 
     <v-dialog v-model="dialog.deleteConfirmation" width="450" persistent>
-      <CardDeleteConfirmation
-        prompt-title="Are you sure want to delete this visitor?"
-        :loading="loading.deletingVisitor"
-        @close="dialog.deleteConfirmation = false"
-        @delete="handleProceedDeleteVisitor"
-      />
+      <CardDeleteConfirmation prompt-title="Are you sure want to delete this visitor?"
+        :loading="loading.deletingVisitor" @close="dialog.deleteConfirmation = false"
+        @delete="handleProceedDeleteVisitor" />
     </v-dialog>
 
     <Snackbar v-model="messageSnackbar" :text="message" :color="messageColor" />
@@ -309,26 +201,29 @@ const {
 const { debounce, formatCamelCaseToWords, formatDate, UTCToLocalTIme } =
   useUtils();
 const { formatLocation } = useSecurityUtils();
-const { type: visitorType } = useRoute().query;
-const { org: orgId, site: siteId } = useRoute().params as {
+// const { status: visitorStatus, search } = useRoute().query as { status: string, search: string};
+
+const route = useRoute()
+const router = useRouter()
+const { org: orgId, site: siteId } = route.params as {
   org: string;
   site: string;
 };
-const routeName = useRoute().name;
+const routeName = route.name;
 
 const items = ref<Array<Record<string, any>>>([]);
 const page = ref(1);
 const pages = ref(0);
 const pageRange = ref("-- - -- of --");
-const activeTab = ref(visitorType ?? "registered");
+const activeTab = ref("registered");
 const activeVisitorFormType = ref<TVisitorType | null>(null);
 const selectedVisitorId = ref<string | null>(""); // selected visitor for viewing/actions
 
 //filter states
 const searchInput = ref("");
-const dateFrom = ref(getUTCDates().dateYesterday);
+const dateFrom = ref("");
 const dateTo = ref("");
-const filterTypes = ref([]);
+const filterTypes = ref<TVisitorType[]>([]);
 const displayCheckedOutOnly = ref<boolean>(false);
 
 const message = ref("");
@@ -349,8 +244,8 @@ const dialog = reactive({
 });
 
 const tabOptions = [
-  { name: "Registered", type: "registered" },
-  { name: "Unregistered", type: "unregistered" },
+  { name: "Registered", status: "registered" },
+  { name: "Unregistered", status: "unregistered" },
 ];
 
 const formatType = (item: any) =>
@@ -374,8 +269,8 @@ function filterTypeSelectionLabel() {
   return `${length} selected ${length === 1 ? "type" : "types"}` as string;
 }
 
-function toRoute(type: any) {
-  const obj = tabOptions.find((x) => x.type === type);
+function toRoute(status: any) {
+  const obj = tabOptions.find((x) => x.status === status);
   if (!obj) return;
   navigateTo({
     name: routeName,
@@ -383,7 +278,7 @@ function toRoute(type: any) {
       org: orgId,
     },
     query: {
-      type: obj.type,
+      status: obj.status,
     },
   });
 }
@@ -393,20 +288,20 @@ const {
   refresh: getVisitorRefresh,
   pending: getVisitorPending,
 } = await useLazyAsyncData(
-  `get-all-visitors-${visitorType}`,
+  `get-all-visitors-${activeTab.value}-${page.value}`
+,
   () =>
     getVisitors({
       page: page.value,
-      org: orgId,
       site: siteId,
       search: searchInput.value,
       dateTo: dateTo.value,
       dateFrom: dateFrom.value,
       type: filterTypes.value.filter(Boolean).join(","),
-      displayNoCheckOut: displayCheckedOutOnly.value,
+      status: activeTab.value as string,
     }),
   {
-    watch: [page],
+    watch: [page, () => route.query],
   }
 );
 
@@ -419,9 +314,9 @@ watch(getVisitorReq, (newData: any) => {
 });
 
 const selectedVisitorObject = computed(() => {
-  const obj = items.value.find((x) => x?._id === selectedVisitorId.value);
+  const obj = items.value.find((x: any) => x?._id === selectedVisitorId.value);
   if (!obj) return {};
-  const type = obj?.type;
+  const type = obj?.type as TVisitorType | undefined;
   if (!type) return {};
   let includedKeys: string[] = ["checkIn", "checkOut"];
   includedKeys.unshift(...(typeFieldMap[type] ?? []));
@@ -553,16 +448,42 @@ function getUTCDates() {
   return { dateYesterday, dateToday };
 }
 
-// filter debounce search
-const debounceSearch = debounce(getVisitorRefresh, 500);
+
+const updateRouteQuery = debounce(
+  (search: string, from: string, to: string, types: string[], status) => {
+    router.replace({
+      query: {
+        ...route.query,
+        search: search || undefined,
+        dateFrom: from || undefined,
+        dateTo: to || undefined,
+        type: types.filter(Boolean).join(",") || undefined,
+        status: status || undefined,
+      },
+    });
+  },
+  500 // wait 500ms after last input
+);
 
 watch(
-  [searchInput, dateTo, dateFrom, displayCheckedOutOnly, filterTypes],
-  ([]) => {
-    debounceSearch();
+  [searchInput, dateFrom, dateTo, filterTypes, activeTab],
+  ([search, from, to, types, status]) => {
+    updateRouteQuery(search, from, to, types, status)
+
   },
-  { immediate: false, deep: true }
+  { deep: true }
 );
+
+
+
+onMounted(() => {
+  activeTab.value = (route.query.status as string) || "unregistered"
+  searchInput.value = (route.query.search as string) || "";
+  dateFrom.value = (route.query.dateFrom as string) || "";
+  dateTo.value = (route.query.dateTo as string) || "";
+  filterTypes.value = ((route.query.type as string)?.split(",") || []).filter(Boolean) as TVisitorType[];
+
+})
 </script>
 
 <style scoped></style>

package/components/WorkOrder/Create.vue

@@ -16,18 +16,27 @@
       @errored="onImageError"
     />
 
-    <v-text-field
+    <v-autocomplete
+      v-model="workOrder.subject"
+      :items="subjects"
+      item-title="title"
+      item-value="value"
+      item-props
       label="Subject"
       variant="outlined"
       density="compact"
-      v-model="workOrder.subject"
-      class="mb-1"
-      dense
+      class="mb-2"
+      :clearable="
+        props.createdFrom === 'feedback' && workOrder.subject !== ''
+          ? false
+          : true
+      "
       :readonly="
         props.createdFrom === 'feedback' && workOrder.subject !== ''
           ? true
           : false
       "
+      :custom-filter="customFilter"
     />
 
     <v-autocomplete
@@ -239,4 +248,13 @@ watch(workOrderUnit, (val: string) => {
     }
   }
 });
+
+const { subjects } = useLocal();
+
+const customFilter = (value: string, query: string, item: any) => {
+  const title = item?.raw?.title?.toLowerCase() || "";
+  const subtitle = item?.raw?.subtitle?.toLowerCase() || "";
+  const search = query.toLowerCase();
+  return title.includes(search) || subtitle.includes(search);
+};
 </script>

package/components/WorkOrder/Main.vue

@@ -133,6 +133,10 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  category: {
+    type: String,
+    default: "",
+  },
 });
 
 const theme = useTheme().name;
@@ -193,11 +197,11 @@ const {
   data: getAllWorkOrderReq,
   refresh: getAllReqRefresh,
   status: getAllReqStatus,
-} = useLazyAsyncData("get-all-work-orders", () =>
+} = useLazyAsyncData("get-all-work-orders-" + props.category, () =>
   _getWorkOrders({
     page: page.value,
-    organization: route.params.org as string,
     site: route.params.site as string,
+    category: props.category,
   })
 );
 
@@ -286,7 +290,7 @@ watchEffect(() => {
     serviceProviders.value = getAllReq.value.map((i: any) => ({
       title: i.nature.replace(/_/g, " "),
       subtitle: i.title,
-      value: i._id.org,
+      value: i.nature
     }));
   }
 });

package/composables/useBuilding.ts

@@ -222,7 +222,7 @@ export default function useBuilding() {
 
   function updateById(
     id: string,
-    data: Pick<TBuilding, "name" | "block" | "levels">
+    data: Pick<TBuilding, "name" | "block" | "levels" | "buildingFloorPlan">
   ) {
     return useNuxtApp().$api(`/api/buildings/id/${id}`, {
       method: "PATCH",

package/composables/usePeople.ts

@@ -19,6 +19,12 @@ export default function(){
       });
   }
 
+  async function findPersonByNRIC(nric: string): Promise<null | Partial<TPeople>> {
+      return await $fetch<Record<string, any>>(`/api/people/nric/${nric}`, {
+        method: "GET",
+      });
+  }
+
     async function create(payload: Partial<TPeoplePayload>){
       return await useNuxtApp().$api<Record<string, any>>("/api/people", {
         method: "POST",
@@ -39,10 +45,12 @@ export default function(){
       }); 
     }
 
+
     return {
         create,
         getAll,
         updateById,
-        deleteById
+        deleteById,
+        findPersonByNRIC
     }
 }