@iservice365/layer-common 1.2.0 → 1.3.1

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/TableMain.vue

@@ -43,7 +43,7 @@
         <!-- Data Table -->
         <v-data-table :headers="headers" :items="items" :item-value="itemValue" :items-per-page="itemsPerPage"
           fixed-header hide-default-footer :hide-default-header="!showHeader"
-          @click:row="(_: any, data: any) => emits('row-click', data)" style="max-height: calc(100vh - (200px))">
+          @click:row="(_: any, data: any) => emits('row-click', data)" :style="`max-height: calc(100vh - (${offset}px))`">
           <template v-for="(_, slotName) in $slots" #[slotName]="slotProps">
             <slot :name="slotName" v-bind="slotProps" />
           </template>
@@ -103,6 +103,10 @@ const props = defineProps({
   extensionHeight: {
     type: Number,
     default: 50
+  },
+  offset: {
+    type: Number,
+    default: 200
   }
 });