@iservice365/layer-common 1.2.0 → 1.3.0

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @iservice365/layer-common
 
+## 1.3.0
+
+### Minor Changes
+
+- 88b8014: ## What's Changed
+
+  - 20089 add edit guest feature by @aguirremac17 in https://github.com/Seven365-Pte-Ltd/iservice365-layer-common/pull/156
+  - chore: remove deltefile integration in frontend by @aguirremac17 in https://github.com/Seven365-Pte-Ltd/iservice365-layer-common/pull/157
+  - Work Order subject form update by @Jerome7365 in https://github.com/Seven365-Pte-Ltd/iservice365-layer-common/pull/158
+  - chore: update query key to status by @aguirremac17 in https://github.com/Seven365-Pte-Ltd/iservice365-layer-common/pull/159
+  - 20114 update key type to status in visitor management by @aguirremac17 in https://github.com/Seven365-Pte-Ltd/iservice365-layer-common/pull/160
+  - Update Work Order Component And Composable by @Jerome7365 in https://github.com/Seven365-Pte-Ltd/iservice365-layer-common/pull/161
+
+  **Full Changelog**: https://github.com/Seven365-Pte-Ltd/iservice365-layer-common/compare/v1.2.0...1.3.0
+
 ## 1.2.0
 
 ### Minor Changes

package/components/Input/DateTimePicker.vue

@@ -97,15 +97,16 @@ watch(dateTime, (dateVal) => {
 
 }, { immediate: false })
 
+  watch(dateTimeUTC, () => {
+        handleInitialDate()
+  }, { immediate: true})
 
-onMounted(async () => {
 
-    handleInitialDate()
+onMounted(async () => {
     await nextTick()
     isInitialLoad.value = false
-
     // Wait until Vuetify renders its internal input
-    const nativeInput = dateTimePickerRef.value?.$el?.querySelector('input')
+    const nativeInput = (dateTimePickerRef.value as any)?.$el?.querySelector('input')
     if (nativeInput) {
         nativeInput.addEventListener('click', (e: MouseEvent) => {
             e.stopPropagation()

package/components/Input/FileV2.vue

@@ -74,11 +74,6 @@ async function handleRemove(removedFile: File) {
 
   idsArray.value = filesCollection.value.map((x) => x.id)
 
-  try {
-    await deleteFile(removedItem.id)
-  } catch (err) {
-    console.warn('Failed to delete file', err)
-  }
 }
 
 async function handleUpdateValue(value: File[]) {

package/components/Input/InputPhoneNumberV2.vue

@@ -69,7 +69,6 @@ const currentMask = computed(() => {
 
 
 const validatePhone = (value: string): boolean | string => {
-    console.log('value', value)
     if (!value) {
         errorMessage.value = ''
         return true;

package/components/Input/VehicleNumber.vue

@@ -7,6 +7,8 @@
     :counter="maxlength"
     @input="onInput"
     outlined
+    :disabled="disabled"
+    :readonly="readonly"
     clearable
   />
 </template>
@@ -25,6 +27,12 @@ const props = defineProps({
   maxlength: {
     type: [Number, String],
     default: false
+  },
+  disabled: {
+    type: Boolean,
+  },
+  readonly: {
+    type: Boolean,
   }
 })
 

package/components/PeopleForm.vue

@@ -3,7 +3,7 @@
     <v-toolbar>
       <v-row no-gutters class="fill-height px-6" align="center">
         <span class="font-weight-bold text-h5 text-capitalize">
-          {{ prop.mode }} {{  prop.type === 'visitor' ? 'Guest' : prop.type }}
+          {{ prop.mode }} {{ prop.type === 'visitor' ? 'Guest' : prop.type }}
         </span>
       </v-row>
     </v-toolbar>
@@ -34,15 +34,14 @@
               <v-row>
                 <v-col cols="12">
                   <InputLabel class="text-capitalize" title="NRIC/Passport/ID No." />
-                  <InputNRICNumber v-model.trim="form.nric" density="comfortable" />
+                  <InputNRICNumber v-model.trim="form.nric"  density="comfortable" />
                 </v-col>
               </v-row>
             </v-col>
 
             <v-col cols="12">
               <InputLabel class="text-capitalize" title="Phone Number" required />
-              <InputPhoneNumberV2 v-model="form.contact"
-                density="comfortable" :rules="[requiredRule]" />
+              <InputPhoneNumberV2 v-model="form.contact" density="comfortable" :rules="[requiredRule]" />
             </v-col>
 
             <v-col cols="12">
@@ -65,19 +64,18 @@
 
             <v-col cols="12">
               <InputLabel class="text-capitalize" title="Unit" required />
-              <v-select v-model="form.unit" :items="unitsArray" @update:model-value="handleUpdateUnit" density="comfortable" :disabled="!form.level"
-                :loading="unitsStatus === 'pending'" :rules="[requiredRule]" />
+              <v-select v-model="form.unit" :items="unitsArray" @update:model-value="handleUpdateUnit"
+                density="comfortable" :disabled="!form.level" :loading="unitsStatus === 'pending'"
+                :rules="[requiredRule]" />
             </v-col>
 
             <v-col cols="12">
               <InputLabel class="text-capitalize" title="Start Date" required />
-              <InputDateTimePicker v-model:utc="form.start" ref="startDateRef" 
-                :rules="[validStartDateRule]" />
+              <InputDateTimePicker v-model:utc="form.start" ref="startDateRef" name="start_date" :rules="[validStartDateRule]" />
             </v-col>
             <v-col cols="12">
               <InputLabel class="text-capitalize" title="End Date" required />
-              <InputDateTimePicker v-model:utc="form.end" ref="endDateRef"
-                :rules="[validExpiryDateRule]" />
+              <InputDateTimePicker v-model:utc="form.end" ref="endDateRef" name="end_date" :rules="[validExpiryDateRule]" />
             </v-col>
 
             <v-col cols="12">
@@ -144,12 +142,20 @@ const prop = defineProps({
   type: {
     type: String as PropType<TPeopleType>,
     required: true
+  },
+  activeId: {
+    type: String as PropType<string | null>, // id of person you are trying to update
+    default: null
+  },
+  people: {
+    type: Object as PropType<TPeople>,
+    required: false
   }
 });
 
 const { requiredRule, formatDateISO8601 } = useUtils();
 const { getSiteById, getSiteLevels, getSiteUnits } = useSiteSettings();
-const { create } = usePeople();
+const { create, updateById } = usePeople();
 
 const emit = defineEmits(['back', 'select', 'done', 'done:more', 'error', 'close']);
 
@@ -164,7 +170,7 @@ const form = reactive<Partial<TPeoplePayload>>({
   unit: "",
   unitName: "",
   remarks: "",
-  start: dateToday() || "",
+  start: "",
   end: "",
   type: prop.type
 })
@@ -199,21 +205,21 @@ const contractorTypes = [
 
 const { data: siteData, refresh: refreshSiteData, status: blockStatus } = useLazyAsyncData(
   `fetch-site-data-${prop.site}`,
-  () => getSiteById(prop.site));
+  () => getSiteById(prop.site),);
 
 const { data: levelsData, refresh: refreshLevelsData, status: levelsStatus } = useLazyAsyncData(
   `fetch-levels-data-${prop.site}-${form.block}`,
   async () => {
     if (!form.block) return Promise.resolve(null);
     return await getSiteLevels(prop.site, { block: Number(form.block) })
-  });
+  }, { watch: [() => form.block],});
 
 const { data: unitsData, refresh: refreshUnitsData, status: unitsStatus } = useLazyAsyncData(
   `fetch-units-data-${prop.site}-${form.level}`,
   async () => {
     if (!form.level) return Promise.resolve(null);
     return await getSiteUnits(prop.site, Number(form.block), form.level)
-  });
+  }, { watch: [()=> form.level]});
 
 watch(
   siteData,
@@ -267,12 +273,10 @@ watch(
 function handleChangeBlock(value: any) {
   form.level = '';
   form.unit = '';
-  refreshLevelsData();
 }
 
 function handleChangeLevel(value: any) {
   form.unit = '';
-  refreshUnitsData();
 }
 
 function handleUpdateUnit(value: any) {
@@ -280,7 +284,7 @@ function handleUpdateUnit(value: any) {
   form.unitName = selectedUnit?.title || ''
 }
 
-function dateToday(){
+function dateToday() {
   const today = new Date()
   return today.toISOString()
 }
@@ -362,33 +366,44 @@ async function submit() {
   errorMessage.value = '';
   processing.value = true;
 
-  let payload: Partial<TPeoplePayload> = {
-    org: prop.org,
-    site: prop.site
-  }
+  let payload: Partial<TPeoplePayload> = {}
 
   if (prop.mode === 'add') {
     payload = {
       ...payload,
+      org: prop.org,
+      site: prop.site,
       ...form,
     }
 
   } else if (prop.mode === 'edit') {
+    const { type, ...rest } = form
+    payload = {
+      ...payload,
+      ...rest
+    }
 
   }
   try {
+    if (prop.mode === 'add') {
+      await create(payload)
+    } else if (prop.mode === 'edit'){
+      const userId = prop.activeId
+      if(!userId) {
+        throw new Error('User Id prop is not defined')
+      }
 
-    const res = await create(payload)
-    if (res) {
-      if (createMore.value) {
-        resetForm()
-        step.value = 1;
-        errorMessage.value = ""
-        emit("done:more")
-        createMore.value = false
-      } else emit("done")
+      await updateById(userId, payload)
     }
 
+    if (createMore.value) {
+      resetForm()
+      step.value = 1;
+      errorMessage.value = ""
+      emit("done:more")
+      createMore.value = false
+    } else emit("done")
+
   } catch (error: any) {
     const err = error?.data?.message
     errorMessage.value = err || `Failed to ${prop.mode === 'add' ? 'add' : 'update'} ${prop.type}. Please try again.`;
@@ -406,9 +421,27 @@ watch(() => [form.end, form.start], () => {
   (startDateRef.value as any)?.validate();
 });
 
+async function mountExistingData() {
+  setTimeout(() => {
+    const people = prop.people
+    if (!people) return
+
+    (Object.keys(form) as (keyof typeof form)[]).forEach((key) => {
+      if (key in people) {
+        form[key] = people[key as keyof TPeople]
+      }
+    })
+  }, 100)
+}
+
 onMounted(() => {
   step.value = 1;
   createMore.value = false;
+  if(prop.mode === 'edit'){
+    mountExistingData()
+  } else {
+    form.start = dateToday()
+  }
 })
 
 </script>
@@ -416,5 +449,4 @@ onMounted(() => {
 .button-outline-class {
   border: 1px solid rgba(var(--v-theme-primary));
 }
-
 </style>

package/components/VisitorManagement.vue

@@ -27,8 +27,8 @@
           >
             <v-tab
               v-for="tab in tabOptions"
-              :value="tab.type"
-              :key="tab.type"
+              :value="tab.status"
+              :key="tab.status"
               class="text-capitalize"
             >
               {{ tab.name }}
@@ -309,7 +309,7 @@ const {
 const { debounce, formatCamelCaseToWords, formatDate, UTCToLocalTIme } =
   useUtils();
 const { formatLocation } = useSecurityUtils();
-const { type: visitorType } = useRoute().query;
+const { status: visitorStatus } = useRoute().query;
 const { org: orgId, site: siteId } = useRoute().params as {
   org: string;
   site: string;
@@ -320,13 +320,13 @@ 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(visitorStatus ?? "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 displayCheckedOutOnly = ref<boolean>(false);
@@ -349,8 +349,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 +374,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 +383,7 @@ function toRoute(type: any) {
       org: orgId,
     },
     query: {
-      type: obj.type,
+      status: obj.status,
     },
   });
 }
@@ -393,7 +393,7 @@ const {
   refresh: getVisitorRefresh,
   pending: getVisitorPending,
 } = await useLazyAsyncData(
-  `get-all-visitors-${visitorType}`,
+  `get-all-visitors-${visitorStatus}`,
   () =>
     getVisitors({
       page: page.value,
@@ -404,9 +404,10 @@ const {
       dateFrom: dateFrom.value,
       type: filterTypes.value.filter(Boolean).join(","),
       displayNoCheckOut: displayCheckedOutOnly.value,
+      status: activeTab.value as string
     }),
   {
-    watch: [page],
+    watch: [page, activeTab],
   }
 );
 

package/components/WorkOrder/Create.vue

@@ -16,18 +16,23 @@
       @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
       :readonly="
         props.createdFrom === 'feedback' && workOrder.subject !== ''
           ? true
           : false
       "
+      :custom-filter="customFilter"
     />
 
     <v-autocomplete
@@ -239,4 +244,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/usePeople.ts

@@ -13,28 +13,28 @@ export default function(){
       type="",
       displayNoCheckOut=false
       } = {}) {
-      return await useNuxtApp().$api<Record<string, any>>("/api/people", {
+      return await $fetch<Record<string, any>>("/api/people", {
         method: "GET",
         query: { page, limit, sort, search, org, site, dateTo, dateFrom, type }
       });
   }
 
     async function create(payload: Partial<TPeoplePayload>){
-      return await useNuxtApp().$api<Record<string, any>>("/api/people", {
+      return await $fetch<Record<string, any>>("/api/people", {
         method: "POST",
         body: payload,
       });
     }
 
     async function updateById(_id: string, payload: Partial<TPeoplePayload>){
-      return await useNuxtApp().$api<Record<string, any>>(`/api/people/id/${_id}`, {
+      return await $fetch<Record<string, any>>(`/api/people/id/${_id}`, {
         method: "PUT",
         body: payload,
       }); 
     }
 
     async function deleteById(_id: string){
-      return await useNuxtApp().$api<Record<string, any>>(`/api/people/id/${_id}`, {
+      return await $fetch<Record<string, any>>(`/api/people/id/${_id}`, {
         method: "DELETE",
       }); 
     }

package/composables/useVisitor.ts

@@ -39,7 +39,8 @@ export default function(){
       dateTo = "",
       dateFrom = "",
       type="",
-      displayNoCheckOut=false
+      displayNoCheckOut=false,
+      // status = "registered"
       } = {}) {
       return await useNuxtApp().$api<Record<string, any>>("/api/visitor-transactions", {
         method: "GET",

package/composables/useWorkOrder.ts

@@ -32,18 +32,18 @@ export default function useWorkOrder() {
 
   async function getWorkOrders({
     page = 1,
-    organization = "",
     site = "",
     status = "to-do",
     search = "",
     limit = 10,
+    category = "",
   } = {}) {
     try {
       return useNuxtApp().$api<Record<string, any>>(
-        `/api/work-orders/organization/${organization}/site/${site}/status/${status}`,
+        `/api/work-orders/site/${site}/status/${status}`,
         {
           method: "GET",
-          query: { page, search, limit },
+          query: { page, search, limit, category },
         }
       );
     } catch (err) {

package/package.json

@@ -2,7 +2,7 @@
   "name": "@iservice365/layer-common",
   "license": "MIT",
   "type": "module",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "main": "./nuxt.config.ts",
   "scripts": {
     "dev": "nuxi dev .playground",

package/types/people.d.ts

@@ -4,15 +4,15 @@ declare type TPeople = {
   level?: string;
   unit?: string | Partial<TBuildingUnit>;
   unitName?: string;
-  contact: string;
-  plateNumber: string;
+  contact?: string;
+  plateNumber?: string;
   nric?: string;
   contact?: string;
   remarks?: string;
-  start: string;
-  end: string;
-  org: string;
-  site: string,
+  start?: string;
+  end?: string;
+  org?: string;
+  site?: string,
   type?: TPeoplePayload;
 };