@iservice365/layer-common 1.1.0 → 1.2.0

package/components/VisitorForm.vue

@@ -0,0 +1,712 @@
+<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"
+              :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>
+                    No results matching "<strong>{{
+                      contractorTypeInput
+                    }}</strong
+                    >". This value will be added as new option.
+                  </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('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 v-if="prop.type === 'delivery'" cols="12">
+              <InputLabel
+                class="text-capitalize"
+                title="Company Name"
+                required
+              />
+              <v-combobox
+                v-model="companyNameObj"
+                v-model:search="companyNameInput"
+                :hide-no-data="false"
+                @update:focused="handleFocusedCompanyName"
+                :items="companyNames"
+                :rules="[requiredRule]"
+                item-value="value"
+                @update:model-value="handleSelectCompanyName"
+                variant="outlined"
+                density="comfortable"
+                persistent-hint
+                small-chips
+              >
+                <template v-slot:no-data>
+                  <v-list-item>
+                    <v-list-item-title>
+                      No results matching "<strong>{{
+                        contractorTypeInput
+                      }}</strong
+                      >". This value will be added as new option.
+                    </v-list-item-title>
+                  </v-list-item>
+                </template>
+              </v-combobox>
+            </v-col>
+
+            <v-col v-else cols="12">
+              <v-row>
+                <v-col cols="12">
+                  <InputLabel
+                    class="text-capitalize"
+                    title="Company Name"
+                    required
+                  />
+                  <v-text-field
+                    v-model.trim="visitor.company"
+                    density="comfortable"
+                    :rules="[requiredRule]"
+                  />
+                </v-col>
+              </v-row>
+            </v-col>
+          </template>
+
+          <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.trim="visitor.nric"
+                  density="comfortable"
+                  :rules="[requiredRule]"
+                />
+              </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"/>
+          </v-col>
+
+          <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.trim="visitor.plateNumber"
+                  density="comfortable"
+                  :rules="[requiredRule]"
+                />
+              </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"
+              :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, formatDateISO8601 } = useUtils();
+const { getSiteById, getSiteLevels, getSiteUnits } = useSiteSettings();
+const { createVisitor, typeFieldMap, contractorTypes } = useVisitor();
+
+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<TDefaultOptionObj | 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 = computed(() => {
+  const arr: string[] = [
+    "Foodpanda",
+    "GrabFood",
+    "Deliveroo",
+    "Lazada",
+    "Amazon",
+    "RedMart",
+    "J&T",
+    "NTUC FairPrice",
+    "NinjaVan",
+    "Lalamove",
+    "SingPost",
+    "EasyParcel",
+    "DHL",
+    "FedEx",
+    "Oddle",
+    "UParcel",
+    "UPS",
+    "Park N Parcel",
+    "ParkXL",
+    "Airpak Express",
+    "Pandago",
+    "Qdelivery",
+    "iXpress Logistics",
+    "Blue Dart",
+    "GogoX",
+    "Others (Type in remarks)",
+  ];
+  return arr.map((x) => ({
+    title: x,
+    value: x,
+  }));
+});
+
+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 = "";
+  }
+}
+
+function handleSelectCompanyName(obj: { title: string; value: string }) {
+  visitor.company = obj.value ?? "";
+}
+
+function handleFocusedCompanyName() {
+  const obj = companyNameObj.value;
+  const matched = companyNames.value.some(
+    (x) => x.value === obj?.value && x.title === obj?.title
+  );
+  if (!matched) {
+    companyNameObj.value = null;
+    companyNameInput.value = "";
+    visitor.company = "";
+  }
+}
+
+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) });
+  }
+);
+
+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(
+  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 && Array.isArray(newVal)) {
+      const arr = newVal || [];
+      unitsArray.value = arr?.map((unit: any) => ({
+        title: unit?.name,
+        value: unit?._id,
+      }));
+    } else {
+      unitsArray.value = [];
+    }
+  },
+  { immediate: true }
+);
+
+
+function handleChangeBlock(value: any) {
+  visitor.level = "";
+  visitor.unit = "";
+  refreshLevelsData();
+}
+
+function handleChangeLevel(value: any) {
+  visitor.unit = "";
+  refreshUnitsData();
+}
+
+function handleUpdateUnit(value: any) {
+  const selectedUnit = unitsArray.value?.find((x: any) => x.value === value);
+  visitor.unitName = selectedUnit?.title || "";
+}
+
+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 "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>