@7365admin1/layer-common 1.8.0

package/components/VisitorForm.vue

@@ -0,0 +1,659 @@
+<template>
+  <v-card width="100%" :loading="processing">
+    <v-toolbar>
+      <v-row no-gutters class="fill-height px-6" align="center">
+        <span class="font-weight-bold text-h5 text-capitalize">
+          {{ prop.mode }} {{ formatVisitorType(type) }}
+        </span>
+      </v-row>
+    </v-toolbar>
+    <v-card-text style="max-height: 100vh; overflow-y: auto" class="pa-5 my-3">
+      <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 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>
+      <v-form ref="formRef" v-model="validForm" :disabled="processing" @click="errorMessage = ''">
+        <v-row no-gutters class="pt-4">
+          <v-col v-if="shouldShowField('contractorType')" cols="12">
+            <InputLabel class="text-capitalize" title="Contractor Type" required />
+            <v-combobox v-model="contractorTypeObj" v-model:search="contractorTypeInput" ref="contractorTypeCombo"
+              autocomplete="off" :hide-no-data="false" @update:focused="handleFocusedContractorType"
+              :items="contractorTypes" :rules="[requiredRule]" item-value="value"
+              @update:model-value="handleSelectContractorType" variant="outlined" density="comfortable" persistent-hint
+              small-chips>
+              <template v-slot:no-data>
+                <v-list-item>
+                  <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.
+                  </v-list-item-title>
+                </v-list-item>
+              </template>
+            </v-combobox>
+          </v-col>
+
+          <v-col v-if="shouldShowField('attachments')" class="w-100">
+            <InputLabel class="text-capitalize" title="Attach Image" />
+            <InputFileV2 v-model="visitor.attachments" multiple :max-length="3" />
+          </v-col>
+
+          <v-col v-if="shouldShowField('name')" cols="12">
+            <v-row>
+              <v-col cols="12">
+                <InputLabel class="text-capitalize" title="Full Name" required />
+                <v-text-field v-model.trim="visitor.name" density="comfortable" :rules="[requiredRule]" />
+              </v-col>
+            </v-row>
+          </v-col>
+
+          <v-col v-if="shouldShowField('nric')" cols="12">
+            <v-row>
+              <v-col cols="12">
+                <InputLabel class="text-capitalize" title="NRIC/Passport/ID No." required />
+                <InputNRICNumber v-model="visitor.nric" density="comfortable" :rules="[requiredRule]"
+                  @update:model-value="handleUpdateNRIC" :loading="fetchPersonByNRICPending" />
+              </v-col>
+            </v-row>
+          </v-col>
+
+          <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"
+              :loading="fetchPersonByContactPending" @update:model-value="handleUpdateContact" />
+          </v-col>
+
+          <v-col v-if="shouldShowField('deliveryType')" cols="12">
+            <v-row>
+              <v-col cols="12">
+                <v-radio-group v-model="visitor.deliveryType" inline color="primary" :rules="[requiredRule]">
+                  <v-radio label="Food" value="Food"></v-radio>
+                  <v-radio label="Parcel" value="Parcel"></v-radio>
+                </v-radio-group>
+              </v-col>
+            </v-row>
+          </v-col>
+
+          <template v-if="shouldShowField('company')">
+            <v-col cols="12">
+              <InputLabel class="text-capitalize" title="Company Name" />
+              <v-combobox v-model="visitor.company" v-model:search="companyNameInput" ref="companyCombo"
+                autocomplete="off" :hide-no-data="false" :items="companyNames" item-value="value"
+                :loading="fetchCompanyListPending" @update:model-value="handleSelectCompanyName" variant="outlined"
+                density="comfortable" persistent-hint small-chips>
+                <template v-slot:no-data>
+                  <v-list-item>
+                    <v-list-item-title v-if="fetchCompanyListPending">
+                      <v-progress-circular indeterminate size="20" class="mr-3" />
+                      Searching companies…
+                    </v-list-item-title>
+                    <v-list-item-title v-else-if="companyNameInput" @click.stop="handleAddNewCompany"
+                      class="d-flex align-center ga-1">
+                      <span><v-icon icon="mdi-plus" /></span>Add "<strong>{{ companyNameInput }}</strong>" as new
+                      company.
+                    </v-list-item-title>
+                    <v-list-item-title v-else-if="!companyNameInput && companyNames.length === 0">
+                      Start typing to search for companies.
+                    </v-list-item-title>
+                    <v-list-item-title v-else>
+                      No companies available. Start typing to add a new one.
+                    </v-list-item-title>
+                  </v-list-item>
+                </template>
+              </v-combobox>
+            </v-col>
+          </template>
+
+
+          <v-col v-if="shouldShowField('plateNumber')" cols="12">
+            <v-row>
+              <v-col cols="12">
+                <InputLabel class="text-capitalize" title="Vehicle Number" required />
+                <!-- <v-text-field v-model.trim.uppercase="visitor.plateNumber" density="comfortable" /> -->
+                <InputVehicleNumber v-model="visitor.plateNumber" density="comfortable" />
+              </v-col>
+            </v-row>
+          </v-col>
+
+          <v-col v-if="shouldShowField('block')" cols="12">
+            <InputLabel class="text-capitalize" title="Block" required />
+            <v-select v-model="visitor.block" :items="blocksArray" item-value="value" item-title="title"
+              :loading="blockStatus === 'pending'" @update:model-value="handleChangeBlock" density="comfortable"
+              :rules="[requiredRule]" />
+          </v-col>
+
+          <v-col v-if="shouldShowField('level')" cols="12">
+            <InputLabel class="text-capitalize" title="Level" required />
+            <v-select v-model="visitor.level" :items="levelsArray" density="comfortable" :disabled="!visitor.block"
+              :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"
+              item-value="value" :disabled="!visitor.level"
+              :loading="unitsStatus === 'pending'" :rules="[requiredRule]" @update:model-value="handleUpdateUnit" />
+          </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 />
+          </v-col>
+
+          <v-col v-if="prop.type === 'contractor' && contractorStep === 2" cols="12">
+            <PassInformation />
+          </v-col>
+
+          <v-col v-if="prop.type === 'contractor' && contractorStep === 3" cols="12">
+            <MemberInformation v-model="visitor.members" />
+          </v-col>
+
+          <v-col v-if="prop.mode === 'add'" cols="12" class="mt-2">
+            <v-checkbox v-model="createMore" density="comfortable" hide-details>
+              <template #label>
+                <span class="text-subtitle-2 font-weight-bold">
+                  Create more
+                </span>
+              </template>
+            </v-checkbox>
+          </v-col>
+        </v-row>
+      </v-form>
+    </v-card-text>
+
+    <v-row no-gutters class="w-100" v-if="errorMessage">
+      <p class="text-error w-100 text-center text-subtitle-2">
+        {{ errorMessage }}
+      </p>
+    </v-row>
+    <v-toolbar density="compact">
+      <v-row no-gutters>
+        <v-col cols="6">
+          <v-btn v-if="
+            prop.mode === 'add' &&
+            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"
+            @click="backToSelection" text="Back to Selection" />
+          <v-btn v-else tile block variant="text" class="text-none" size="48" @click="close" 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"
+            size="48" :disabled="processing" @click="handleNextPage" :text="contractorStep === 3 ? 'Submit' : 'Next'" />
+          <v-btn v-else tile block variant="flat" color="black" class="text-none" size="48"
+            :disabled="!validForm || processing" @click="submit" :text="prop.mode == 'add' ? 'Submit' : 'Update'" />
+        </v-col>
+      </v-row>
+    </v-toolbar>
+  </v-card>
+</template>
+
+<script setup lang="ts">
+
+const prop = defineProps({
+  type: {
+    type: String as PropType<TVisitorType>,
+    required: true,
+  },
+  org: {
+    type: String,
+    required: true,
+  },
+  site: {
+    type: String,
+    required: true,
+  },
+  mode: {
+    type: String as PropType<"add" | "edit">,
+    default: "add",
+  },
+  visitorData: {
+    type: Object as PropType<Partial<TVisitor> | null>,
+    default: null,
+  },
+});
+
+const { requiredRule, debounce } = useUtils();
+const { getSiteById, getSiteLevels, getSiteUnits } = useSiteSettings();
+const { createVisitor, typeFieldMap, contractorTypes } = useVisitor();
+const { findPersonByNRIC, findPersonByContact, searchCompanyList } = usePeople()
+
+const emit = defineEmits([
+  "back",
+  "select",
+  "done",
+  "done:more",
+  "error",
+  "close",
+]);
+
+const visitor = reactive<Partial<TVisitorPayload>>({
+  contractorType: "",
+  name: "",
+  deliveryType: "",
+  company: "",
+  nric: "",
+  contact: "",
+  plateNumber: "",
+  block: "",
+  level: "",
+  unit: "",
+  unitName: "",
+  remarks: "",
+  attachments: [],
+  members: [],
+});
+
+const validForm = ref(false);
+const formRef = ref<HTMLFormElement | null>(null);
+const processing = ref(false);
+const message = ref("");
+const errorMessage = ref("");
+const createMore = ref(false);
+
+const contractorTypeInput = ref("");
+const contractorTypeObj = ref<TDefaultOptionObj | null>(null);
+const contractorStep = ref(1);
+
+const companyNameInput = ref("");
+const companyNameObj = ref<string | null>(null);
+
+
+const blocksArray = ref<TDefaultOptionObj[]>([]);
+const levelsArray = ref<TDefaultOptionObj[]>([]);
+const unitsArray = ref<TDefaultOptionObj[]>([]);
+
+const shouldShowField = (fieldKey: keyof TVisitorPayload) => {
+  if (prop.type !== "contractor" || contractorStep.value === 1) {
+    const visibleFields = typeFieldMap[prop.type];
+    return visibleFields?.includes(fieldKey);
+  }
+};
+
+const companyNames = ref<string[]>([])
+const companyAutofillDataArray = ref<{ companyName: string[], unit: string, block: number, level: string, unitName: string }[]>([])
+
+const formTitle = computed(() => {
+  const isContractorForm = prop.type === "contractor";
+  const step = contractorStep.value;
+  if (isContractorForm && step === 2) {
+    return "Pass & Keys Information";
+  } else if (isContractorForm && step === 3) {
+    return "Members Information";
+  } else return "General Information";
+});
+
+function handleSelectContractorType(obj: { title: string; value: string }) {
+  visitor.contractorType = obj.value ?? "";
+}
+
+function handleFocusedContractorType() {
+  // const obj = contractorTypeObj.value;
+  // const matched = contractorTypes.some(
+  //   (x) => x.value === obj?.value && x.title === obj?.title
+  // );
+  // if (!matched) {
+  //   contractorTypeObj.value = null;
+  //   contractorTypeInput.value = ""
+  //   visitor.contractorType = "";
+  // }
+}
+
+const contractorTypeCombo = ref(null)
+
+async function handleAddNewContractorType() {
+  visitor.contractorType = contractorTypeInput.value
+
+  const combo = contractorTypeCombo.value as any
+  await nextTick();
+
+  combo.isMenuActive = false;
+  combo.$el.querySelector("input")?.blur(); ``
+
+}
+
+async function handleSelectCompanyName(company: string) {
+  visitor.company = company
+
+  const selected = companyAutofillDataArray.value.find(x => x.companyName?.includes(company))
+  if (!selected) return
+
+  visitor.block = selected.block || ""
+  visitor.level = selected.level || ""
+  visitor.unit = selected.unit || ""
+  visitor.unitName = selected.unitName || ""
+
+}
+
+const companyCombo = ref(null)
+
+async function handleAddNewCompany() {
+  visitor.company = companyNameInput.value
+
+  const combo = companyCombo.value as any
+  await nextTick();
+
+  combo.isMenuActive = false;
+  combo.$el.querySelector("input")?.blur();
+}
+
+
+const {
+  data: fetchPersonByNRICReq,
+  refresh: fetchPersonByNRICRefresh,
+  pending: fetchPersonByNRICPending,
+} = useLazyAsyncData(`fetch-person`, () => {
+  const NRIC = visitor.nric;
+  if (!NRIC) return Promise.resolve(null)
+  return findPersonByNRIC(NRIC)
+}
+);
+
+watch(fetchPersonByNRICReq, (obj) => {
+  if (obj) {
+    companyNames.value = obj.companyName ?? []
+    visitor.name = obj.name
+    visitor.contact = obj.contact
+    if (!visitor.company) {
+      visitor.company = companyNames.value?.[0]
+    }
+    visitor.plateNumber = obj.plateNumber ?? ""
+    visitor.block = obj.block ?? ""
+    visitor.level = obj.level ?? ""
+    visitor.unit = obj.unit ?? ""
+  }
+})
+
+const {
+  data: fetchPersonByContactReq,
+  refresh: fetchPersonByContactRefresh,
+  pending: fetchPersonByContactPending,
+} = useLazyAsyncData(`fetch-contact`, () => {
+  const contact = visitor.contact;
+  if (!contact) return Promise.resolve(null)
+  return findPersonByContact(contact)
+}
+);
+
+watch(fetchPersonByContactReq, (obj) => {
+  if (obj) {
+    companyNames.value = obj.companyName ?? []
+    visitor.name = obj.name
+    if (!visitor.company) {
+      visitor.company = companyNames.value?.[0]
+    }
+    visitor.plateNumber = obj.plateNumber ?? ""
+    visitor.block = obj.block ?? ""
+    visitor.level = obj.level ?? ""
+    visitor.unit = obj.unit ?? ""
+    visitor.nric = obj.nric ?? ""
+  }
+})
+
+const {
+  data: fetchCompanyListReq,
+  refresh: fetchCompanyListRefresh,
+  pending: fetchCompanyListPending,
+
+} = useLazyAsyncData(`fetch-company-list`, () => {
+  if (!companyNameInput.value) return Promise.resolve(null)
+  return searchCompanyList(companyNameInput.value)
+})
+
+watch(fetchCompanyListReq, (arr) => {
+  if (Array.isArray(arr)) {
+    companyAutofillDataArray.value = arr;
+    companyNames.value = arr?.flatMap(x => x?.companyName)
+  }
+})
+
+const debounceFetchCompany = debounce(async () => fetchCompanyListRefresh(), 200)
+
+watch(companyNameInput, async (val) => {
+  if (!val) {
+    companyNames.value = []
+    return
+  }
+  await debounceFetchCompany()
+})
+
+
+
+const {
+  data: siteData,
+  refresh: refreshSiteData,
+  status: blockStatus,
+} = useLazyAsyncData(`fetch-site-data-${prop.site}`, () =>
+  getSiteById(prop.site)
+);
+
+const {
+  data: levelsData,
+  refresh: refreshLevelsData,
+  status: levelsStatus,
+} = useLazyAsyncData(
+  `fetch-levels-data-${prop.site}-${visitor.block}`,
+  async () => {
+    if (!visitor.block) return Promise.resolve(null);
+    return await getSiteLevels(prop.site, { block: Number(visitor.block) });
+  }, { watch: [() => visitor.block] }
+);
+
+const {
+  data: unitsData,
+  refresh: refreshUnitsData,
+  status: unitsStatus,
+} = useLazyAsyncData(
+  `fetch-units-data-${prop.site}-${visitor.level}`,
+  async () => {
+    if (!visitor.level) return Promise.resolve(null);
+    return await getSiteUnits(prop.site, Number(visitor.block), visitor.level);
+  }, { watch: [() => visitor.level] }
+);
+
+watch(
+  siteData,
+  (newVal) => {
+    const siteDataValue = newVal as any;
+    if (siteDataValue) {
+      const numberOfBlocks = siteDataValue.metadata?.block || 0;
+      for (let i = 1; i <= numberOfBlocks; i++) {
+        blocksArray.value.push({
+          title: `Block ${i}`,
+          value: i,
+        });
+      }
+    } else {
+      blocksArray.value = [];
+    }
+  },
+  { immediate: true }
+);
+
+watch(
+  levelsData,
+  (newVal: any) => {
+    if (newVal) {
+      const arr = newVal.levels || [];
+      levelsArray.value = arr?.map((level: any) => ({
+        title: level,
+        value: level,
+      }));
+    } else {
+      levelsArray.value = [];
+    }
+  },
+  { immediate: true }
+);
+
+watch(
+  unitsData,
+  (newVal: any) => {
+    if (!newVal) {
+      unitsArray.value = []
+      return
+    }
+
+    const mapped = newVal.map((unit: any) => ({
+      title: unit.name,
+      value: unit._id,
+    }))
+
+    // keep custom unit pushed from autofill
+    const selected = visitor.unit
+    const exists = mapped.some((u: TDefaultOptionObj) => u.value === selected)
+
+    if (!exists && visitor.unitName) {
+      mapped.push({
+        title: visitor.unitName,
+        value: selected,
+      })
+    }
+
+    unitsArray.value = mapped
+  },
+  { immediate: true }
+)
+
+
+function handleChangeBlock(value: any) {
+  visitor.level = "";
+  visitor.unit = "";
+}
+
+function handleChangeLevel(value: any) {
+  visitor.unit = "";
+}
+
+function handleUpdateUnit(value: any) {
+  const selectedUnit = unitsArray.value?.find((x: any) => x.value === value);
+  visitor.unitName = selectedUnit?.title || "";
+}
+
+const debounceFetchNRIC = debounce(fetchPersonByNRICRefresh, 500)
+const debounceFetchContact = debounce(fetchPersonByContactRefresh, 500)
+
+function handleUpdateNRIC() {
+  debounceFetchNRIC()
+}
+
+function handleUpdateContact() {
+  debounceFetchContact()
+}
+
+function backToSelection() {
+  emit("back");
+  message.value = "";
+}
+
+function handleGoToPreviousPage() {
+  if (contractorStep.value > 1) {
+    contractorStep.value--;
+  }
+}
+
+function close() {
+  emit("close");
+  message.value = "";
+}
+
+function formatVisitorType(type: TVisitorType): string {
+  switch (type) {
+    case "guest":
+      return "Guest";
+    case "contractor":
+      return "Contractor";
+    case "delivery":
+      return "Delivery";
+    case "walk-in":
+      return "Walk-In";
+    case "pick-up":
+      return "Pick-Up";
+    case "drop-off":
+      return "Drop-Off";
+    default:
+      return "";
+  }
+}
+
+async function handleNextPage() {
+  errorMessage.value = "";
+  formRef.value!.validate();
+  if (!validForm.value) {
+    errorMessage.value = "Please complete all required fields *";
+    return;
+  }
+  const step = contractorStep.value;
+  if (step < 3) contractorStep.value++;
+  else await submit();
+}
+
+async function submit() {
+  formRef.value!.validate();
+  errorMessage.value = "";
+  processing.value = true;
+
+  let payload: Partial<TVisitorPayload> = {
+    type: prop.type,
+    org: prop.org,
+    site: prop.site,
+  };
+
+  if (prop.mode === "add") {
+    const allowedFields = typeFieldMap[prop.type];
+    for (const key of allowedFields as (keyof TVisitorPayload)[]) {
+      if (visitor[key] !== undefined) {
+        payload = {
+          ...payload,
+          [key]: visitor[key],
+        };
+      }
+    }
+
+    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) {
+      if (createMore.value) {
+        emit("done:more");
+      } else emit("done");
+    }
+  } catch (error: any) {
+    const err = error?.data?.message;
+    errorMessage.value =
+      err ||
+      `Failed to ${prop.mode === "add" ? "add" : "update"
+      } visitor. Please try again.`;
+  } finally {
+    processing.value = false;
+  }
+}
+
+watch(
+  () => visitor.plateNumber,
+  (newVal) => {
+    visitor.plateNumber = newVal?.toUpperCase();
+  }
+);
+
+onMounted(() => {
+  contractorStep.value = 1;
+});
+</script>
+<style scoped>
+.button-outline-class {
+  border: 1px solid rgba(var(--v-theme-primary));
+}
+</style>