@7365admin1/layer-common 1.10.7 → 1.10.8

package/components/UnitPersonCard.vue

@@ -3,22 +3,26 @@
     <v-row>
       <v-col cols="12" md="4" class="mt-2">
         <InputLabel class="font-weight-bold" title="Name" />
-        <v-text-field :model-value="person.name" density="compact" :readonly="readOnly" :class="{'no-pointer': readOnly}"/>
+        <v-text-field :model-value="person.name" density="compact" :readonly="readOnly"
+          :class="{ 'no-pointer': readOnly }" />
       </v-col>
 
       <v-col cols="12" md="4" class="mt-2">
         <InputLabel class="font-weight-bold" title="Email Address" />
-        <v-text-field :model-value="person.email" density="compact" :readonly="readOnly" :class="{'no-pointer': readOnly}"/>
+        <v-text-field :model-value="person.email" density="compact" :readonly="readOnly"
+          :class="{ 'no-pointer': readOnly }" />
       </v-col>
 
       <v-col cols="12" md="4" class="mt-2">
         <InputLabel class="font-weight-bold" title="NRIC" />
-        <v-text-field :model-value="person.nric" density="compact" :readonly="readOnly" :class="{'no-pointer': readOnly}"/>
+        <v-text-field :model-value="person.nric" density="compact" :readonly="readOnly"
+          :class="{ 'no-pointer': readOnly }" />
       </v-col>
 
       <v-col cols="12" md="4" class="mt-2">
         <InputLabel class="font-weight-bold" title="Mobile Number" />
-        <v-text-field :model-value="person.contact" density="compact" :readonly="readOnly" :class="{'no-pointer': readOnly}"/>
+        <v-text-field :model-value="person.contact" density="compact" :readonly="readOnly"
+          :class="{ 'no-pointer': readOnly }" />
       </v-col>
     </v-row>
 
@@ -26,25 +30,50 @@
       <v-col cols="12" md="4" class="mt-2">
         <InputLabel class="font-weight-bold" title="Other Documents and Files" :viewMode="readOnly" />
 
-        <p
-          v-if="!person.files?.length"
-          class="text-blue-darken-2 font-weight-thin text-caption ml-2 mt-5"
-        >
+        <p v-if="!person.files?.length" class="text-blue-darken-2 font-weight-thin text-caption ml-2 mt-5">
           **No documents to display**
         </p>
+        <v-list v-else dense nav class="mt-2">
+          <v-list-item v-for="file in person.files" :key="file.id" class="text-blue-darken-2"
+            :href="getFileUrl(file.id)" target="_blank">
+            <v-list-item-content>
+              <v-list-item-title class="d-flex align-center">
+                <span>
+                  <v-icon size="18" class="mr-1">mdi-file-document-outline</v-icon>
+                </span>
+                <span> {{ file.name }}</span>
+              </v-list-item-title>
+            </v-list-item-content>
+          </v-list-item>
+        </v-list>
 
-        <InputFileV2
-          v-if="person.files?.length"
-          :files="person.files"
-          :viewMode="true"
-        />
+      </v-col>
+
+      <v-col cols="0" md="4"></v-col>
+      <v-col v-if="prop.showOwnerOption" cols="12" md="4">
+        <v-checkbox :model-value="person.isOwner" readonly hide-details density="compact" @click="handleClick">
+          <template #label>
+            <span class="font-weight-bold text-subtitle-2 ml-2">Is Owner?</span>
+          </template>
+        </v-checkbox>
+
+        <span class="d-flex text-caption text-gray-5 ml-7">As owner, you will be receiving emails and updates
+                related to this unit.</span>
       </v-col>
     </v-row>
+
+    <v-dialog v-model="dialog.showPrompt" persistent width="540">
+      <DialogReusablePrompt :loading="loadingOwnerProcessing"
+        :prompt-title="`Are you sure want to ${person.isOwner ? 'remove' : 'add'} (${person.name}) as owner ?`"
+        @proceed="handleApprove(person)" @close="dialog.showPrompt = false" />
+    </v-dialog>
   </v-card-text>
 </template>
 
 <script setup lang="ts">
-defineProps({
+import useFile from '../composables/useFile';
+
+const prop = defineProps({
   person: {
     type: Object as PropType<TPeople>,
     required: true,
@@ -53,7 +82,38 @@ defineProps({
     type: Boolean,
     default: false,
   },
+  showOwnerOption: {
+    type: Boolean,
+    default: false,
+  },
+  loadingOwnerProcessing: {
+    type: Boolean,
+    default: false,
+  }
+})
+
+const { getFileUrl } = useFile()
+
+const emit = defineEmits(['update:owner'])
+
+
+const dialog = reactive({
+  showPrompt: false,
 })
+
+
+
+
+
+const handleApprove = (person: TPeople) => {
+  dialog.showPrompt = false;
+  emit('update:owner', { person, isOwner: !person.isOwner })
+}
+
+const handleClick = () => {
+  dialog.showPrompt = true;
+}
+
 </script>
 
 <style lang="scss" scoped>

package/components/VisitorForm.vue

@@ -12,7 +12,7 @@
       <div class="w-100 d-flex justify-space-between ga-2">
         <span class="text-subtitle-1 w-100 font-weight-bold mb-3">{{
           formTitle
-          }}</span>
+        }}</span>
         <span v-if="prop.type === 'contractor'" class="text-subtitle-2 font-weight-bold" style="text-wrap: nowrap">Step
           <span class="text-primary-button">{{ contractorStep }}</span>/3</span>
       </div>
@@ -30,7 +30,7 @@
                   <v-list-item-title @click.stop="handleAddNewContractorType" class="d-flex align-center ga-1">
                     <span><v-icon icon="mdi-plus" /></span> Add "<strong>{{
                       contractorTypeInput
-                      }}</strong>" as custom contractor type.
+                    }}</strong>" as custom contractor type.
                   </v-list-item-title>
                 </v-list-item>
               </template>
@@ -54,8 +54,9 @@
           <v-col v-if="shouldShowField('nric')" cols="12">
             <v-row>
               <v-col cols="12">
-                <InputLabel class="text-capitalize" title="NRIC" required />
-                <InputNRICNumber v-model="visitor.nric" density="comfortable" :rules="[requiredRule]"
+                <InputLabel class="text-capitalize" title="NRIC" :required="requireNRIC" />
+                <InputNRICNumber v-model="visitor.nric" density="comfortable"
+                  :rules="[requireNRIC ? requiredRule : () => true]" :key="currentAutofillSource + 'nric-key'"
                   @update:model-value="handleUpdateNRIC" :loading="fetchPersonByNRICPending" />
               </v-col>
             </v-row>
@@ -63,8 +64,9 @@
 
           <v-col v-if="shouldShowField('contact')" cols="12">
             <InputLabel class="text-capitalize" title="Phone Number" required />
-            <InputPhoneNumberV2 v-model="visitor.contact" :rules="[requiredRule]" density="comfortable" :key="currentAutofillSource + 'phone-key'"
-              :loading="fetchPersonByContactPending" @update:model-value="handleUpdateContact" />
+            <InputPhoneNumberV2 v-model="visitor.contact" :rules="[requiredRule]" density="comfortable"
+              :key="currentAutofillSource + 'phone-key'" :loading="fetchPersonByContactPending"
+              @update:model-value="handleUpdateContact" />
           </v-col>
 
           <v-col v-if="shouldShowField('deliveryType')" cols="12">
@@ -132,6 +134,7 @@
               :loading="levelsStatus === 'pending'" @update:model-value="handleChangeLevel" :rules="[requiredRule]" />
           </v-col>
 
+
           <v-col v-if="shouldShowField('unit')" cols="12">
             <InputLabel class="text-capitalize" title="Unit" required />
             <v-select v-model="visitor.unit" :items="unitsArray" density="comfortable" item-title="title"
@@ -139,6 +142,11 @@
               @update:model-value="handleUpdateUnit" />
           </v-col>
 
+          <v-col v-if="shouldShowField('unit')" cols="12">
+            <InputLabel class="text-capitalize" title="Registered Unit Company Name" required />
+            <v-text-field v-model.trim="registeredUnitCompanyName" density="comfortable" :loading="buildingUnitDataPending" readonly class="no-pointer" />
+          </v-col>
+
           <v-col v-if="shouldShowField('remarks')" cols="12">
             <InputLabel class="text-capitalize" title="Remarks" />
             <v-textarea v-model="visitor.remarks" density="comfortable" :rows="3" no-resize />
@@ -146,7 +154,10 @@
 
           <v-col v-if="prop.type === 'contractor' && contractorStep === 2" cols="12">
             <PassInformation />
-            <EntryPassInformation v-if="entryPassSettings?.data?.settings?.nfcPass" v-model="passType" v-model:quantity="passQuantity" v-model:cards="passCards" :settings="entryPassSettings" :loading="entryPassSettingsPending" @scan:barcode="$emit('scan:barcode')" @scan:camera="$emit('scan:camera')" />
+            <EntryPassInformation v-if="entryPassSettings?.data?.settings?.nfcPass" v-model="passType"
+              v-model:quantity="passQuantity" v-model:cards="passCards" :settings="entryPassSettings"
+              :loading="entryPassSettingsPending" @scan:barcode="$emit('scan:barcode')"
+              @scan:camera="$emit('scan:camera')" />
           </v-col>
 
           <v-col v-if="prop.type === 'contractor' && contractorStep === 3" cols="12">
@@ -179,9 +190,9 @@
             prop.type === 'contractor' &&
             contractorStep > 1
           " tile block variant="text" class="text-none" size="48" @click="handleGoToPreviousPage" text="Back" />
-          <v-btn v-else-if="prop.mode === 'add'" tile block variant="text" class="text-none" size="48"
+          <v-btn v-else-if="prop.mode === 'add' || prop.mode === 'register'" tile block variant="text" class="text-none" size="48"
             @click="backToSelection" text="Back to Selection" />
-          <v-btn v-else tile block variant="text" class="text-none" size="48" @click="close" text="Close" />
+          <v-btn v-else tile block variant="text" class="text-none" size="48" @click="emit('close:all')" text="Close" />
         </v-col>
         <v-col cols="6">
           <v-btn v-if="prop.type === 'contractor'" tile block variant="flat" color="primary-button" class="text-none"
@@ -192,14 +203,18 @@
       </v-row>
     </v-toolbar>
 
-    <v-dialog v-model="dialog.vehicleNumberUsersList" v-if="vehicleNumberUserItems.length > 0" persistent max-width="600">
-      <SearchVehicleNumberUser :vehicle-number="visitor.plateNumber ?? ''" :vehicle-number-users-list="vehicleNumberUserItems"
-        @close="dialog.vehicleNumberUsersList = false" @update:people="handleAutofillDataViaVehicleNumber" />
+    <v-dialog v-model="dialog.vehicleNumberUsersList" v-if="vehicleNumberUserItems.length > 0" persistent
+      max-width="600">
+      <SearchVehicleNumberUser :vehicle-number="visitor.plateNumber ?? ''"
+        :vehicle-number-users-list="vehicleNumberUserItems" @close="dialog.vehicleNumberUsersList = false"
+        @update:people="handleAutofillDataViaVehicleNumber" />
     </v-dialog>
   </v-card>
 </template>
 
 <script setup lang="ts">
+import useBuildingUnit from '../composables/useBuildingUnit';
+
 
 const prop = defineProps({
   type: {
@@ -215,7 +230,7 @@ const prop = defineProps({
     required: true,
   },
   mode: {
-    type: String as PropType<"add" | "edit">,
+    type: String as PropType<"add" | "edit" | "register">,
     default: "add",
   },
   visitorData: {
@@ -233,6 +248,7 @@ const { getSiteById, getSiteLevels, getSiteUnits } = useSiteSettings();
 const { createVisitor, typeFieldMap, contractorTypes } = useVisitor();
 const { getBySiteId: getEntryPassSettingsBySiteId } = useSiteEntryPassSettings();
 const { findPersonByNRIC, findPersonByContact, searchCompanyList, findUsersByPlateNumber } = usePeople()
+const { getById: getUnitDataById} = useBuildingUnit()
 
 const emit = defineEmits([
   "back",
@@ -265,6 +281,8 @@ const passType = ref("");
 const passQuantity = ref<number | null>(null);
 const passCards = ref<string[]>([]);
 
+const registeredUnitCompanyName = ref('N/A')
+
 const dialog = reactive({
   vehicleNumberUsersList: false,
 });
@@ -299,6 +317,10 @@ const shouldShowField = (fieldKey: keyof TVisitorPayload) => {
   }
 };
 
+const requireNRIC = computed(() => {
+  return prop.type !== 'walk-in' && prop.type !== 'guest';
+})
+
 const companyNames = ref<string[]>([])
 const companyAutofillDataArray = ref<{ companyName: string[], unit: string, block: number, level: string, unitName: string }[]>([])
 
@@ -417,7 +439,7 @@ watch(fetchPersonByContactReq, (obj) => {
       visitor.company = companyNames.value?.[0]
     }
     visitor.block = visitor.block ?? obj.block ?? ""
-    visitor.level = visitor.level ??  obj.level ?? ""
+    visitor.level = visitor.level ?? obj.level ?? ""
     visitor.unit = visitor.unit ?? obj.unit ?? ""
     visitor.nric = visitor.nric ?? obj.nric ?? ""
 
@@ -481,15 +503,15 @@ const debounceSearchVehicleUsers = debounce(() => {
     return;
   }
   fetchVehicleNumberUserRefresh();
-}, 300); 
+}, 300);
 
 watch(() => visitor.plateNumber, (newVal) => {
-  if(currentAutofillSource.value && currentAutofillSource.value !== "vehicleNumber") return;
+  if (currentAutofillSource.value && currentAutofillSource.value !== "vehicleNumber") return;
   debounceSearchVehicleUsers();
 });
 
 
-function handleAutofillDataViaVehicleNumber(item: TPeople){
+function handleAutofillDataViaVehicleNumber(item: TPeople) {
 
   currentAutofillSource.value = "vehicleNumber";
 
@@ -620,6 +642,25 @@ watch(
 )
 
 
+const { data: buildingUnitData, refresh: refreshBuildingUnitData, pending: buildingUnitDataPending } = useLazyAsyncData(`building-unit-data-${visitor.unit}`, () => {
+  if (!visitor.unit) return Promise.resolve(null);
+  return getUnitDataById(visitor.unit);
+})
+
+// trigger refresh of building unit data when unit changes, to get the latest unit name in case there are changes in the backend
+watch(() => visitor.unit, () => {
+  if (visitor.unit) {
+    refreshBuildingUnitData();
+  } else {
+    registeredUnitCompanyName.value = 'N/A';
+  }
+})
+
+watch(buildingUnitData, (newVal: any) => {
+  registeredUnitCompanyName.value = newVal?.data?.buildingUnit?.companyName || 'N/A';
+})
+
+
 function handleChangeBlock(value: any) {
   visitor.level = "";
   visitor.unit = "";
@@ -666,7 +707,7 @@ function close() {
 function formatVisitorType(type: TVisitorType): string {
   switch (type) {
     case "guest":
-      return "Guest";
+      return "Drive-In";
     case "contractor":
       return "Contractor";
     case "delivery":
@@ -715,16 +756,22 @@ async function submit() {
         };
       }
     }
+  } else if (prop.mode === 'register') {
+    payload = {
+      ...payload,
+      status: "registered",
+    }
+  }
+
 
-    if (prop.type === "contractor") {
+
+  if (prop.type === "contractor") {
       // contractor type logic payload
       payload = {
         ...payload,
         members: visitor.members,
       };
     }
-  } else if (prop.mode === "edit") {
-  }
   try {
     const res = await createVisitor(payload);
     if (res) {
@@ -753,10 +800,19 @@ watch(
 onMounted(() => {
   contractorStep.value = 1;
   currentAutofillSource.value = null;
+
+  if(prop.mode === 'register' && prop.visitorData) {
+    console.log('Register mode, prefill visitor data', prop.visitorData?.plateNumber )
+   visitor.plateNumber = prop.visitorData?.plateNumber || ""
+  }
 });
 </script>
 <style scoped>
 .button-outline-class {
   border: 1px solid rgba(var(--v-theme-primary));
 }
+
+.no-pointer {
+  pointer-events: none;
+}
 </style>

package/components/VisitorFormSelection.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">
-          Add Visitor
+          {{ mode }} Visitor
         </span>
       </v-row>
     </v-toolbar>
@@ -11,7 +11,7 @@
     <v-card-text style="max-height: 100vh; overflow-y: auto" class="pa-5 my-5">
       <span class="text-subtitle-2 w-100 font-weight-medium d-flex justify-center mb-3">Please Select Visitor Type</span>
       <template v-for="item in selection" :key="item.value">
-        <v-btn color="primary-button" block variant="flat" rounded="md" size="48" :text="item.label" @click="select(item.value)" class="my-2 text-capitalize text-subtitle-2" />
+        <v-btn v-if="showSelection(item)" color="primary-button" block variant="flat" rounded="md" size="48" :text="item.label" @click="select(item.value)" class="my-2 text-capitalize text-subtitle-2" />
       </template>
     </v-card-text>
 
@@ -36,6 +36,10 @@
 
 <script setup lang="ts">
 const prop = defineProps({
+  mode: {
+    type: String as PropType<"add" | "edit" | "register">,
+    default: "add",
+  }
 });
 
 const emit = defineEmits(['cancel', 'select']);
@@ -50,4 +54,11 @@ function cancel() {
 function select(value: string) {
   emit("select", value);
 }
+
+function showSelection(item: any) {
+  if(item.value === 'walk-in' && prop.mode === 'register') {
+    return false ;
+  } return true;
+  
+}
 </script>