@7365admin1/layer-common 4.0.4-staging.241 → 4.1.0

package/components/PublicOnboarding/ContractorRegistrationForm.vue

@@ -0,0 +1,278 @@
+<template>
+  <v-form v-model="formValid" @submit.prevent="submit">
+    <v-row no-gutters>
+      <v-col cols="12" class="mb-4">
+        <p class="text-caption text-medium-emphasis mb-2">Arrival Date</p>
+        <InputDatePicker v-model="visitor.expectedCheckIn" placeholder="DD/MM/YYYY" :rules="[requiredRule]" />
+      </v-col>
+
+      <v-col cols="12" class="mb-4">
+        <v-select
+          v-model="visitor.contractorType"
+          :items="contractorTypes"
+          item-title="title"
+          item-value="value"
+          label="Contractor Type"
+          density="comfortable"
+          variant="outlined"
+          hide-details
+        />
+      </v-col>
+
+      <v-col cols="12" class="mb-4">
+        <v-text-field
+          v-model="visitor.name"
+          label="Name"
+          density="comfortable"
+          variant="outlined"
+          :rules="[requiredRule]"
+        />
+      </v-col>
+
+      <v-col cols="12" class="mb-4">
+        <v-text-field
+          v-model="visitor.nric"
+          label="NRIC / Passport No. (Optional)"
+          density="comfortable"
+          variant="outlined"
+          hide-details
+        />
+      </v-col>
+
+      <v-col cols="12" class="mb-4">
+        <v-text-field
+          v-model="visitor.email"
+          type="email"
+          label="Email"
+          density="comfortable"
+          variant="outlined"
+          hide-details
+        />
+      </v-col>
+
+      <v-col cols="12" class="mb-1">
+        <InputPhoneNumberV2 v-model="visitor.contact" density="comfortable" :rules="[requiredRule]" />
+      </v-col>
+      <v-col v-if="isContactPickerSupported" cols="12" class="mb-4 text-right">
+        <a href="#" class="text-caption" @click.prevent="fillFromContactPicker">
+          or select contact in your phone book
+        </a>
+      </v-col>
+
+      <v-col cols="12" class="mb-4">
+        <PublicOnboardingLocationFields
+          :site="site"
+          v-model:block="visitor.block"
+          v-model:level="visitor.level"
+          v-model:unit="visitor.unit"
+        />
+      </v-col>
+
+      <v-col cols="12" class="mb-4">
+        <v-text-field
+          v-model="visitor.company"
+          label="Company Name"
+          density="comfortable"
+          variant="outlined"
+          :rules="[requiredRule]"
+        />
+      </v-col>
+
+      <v-col cols="12" class="mb-4">
+        <v-text-field
+          v-model="visitor.plateNumber"
+          label="Vehicle Number (Optional)"
+          density="comfortable"
+          variant="outlined"
+          hide-details
+        />
+      </v-col>
+
+      <v-col cols="12" class="mb-4">
+        <v-btn variant="outlined" block class="justify-space-between" append-icon="mdi-pencil-outline" @click="showMembersDialog = true">
+          {{ members.length > 0 ? `${members.length} Member(s) Added` : "Add Member" }}
+        </v-btn>
+      </v-col>
+
+      <v-col cols="12" class="mb-4">
+        <v-textarea
+          v-model="visitor.remarks"
+          label="Remarks (optional)"
+          density="comfortable"
+          variant="outlined"
+          rows="3"
+          auto-grow
+        />
+      </v-col>
+
+      <v-col v-if="submitError" cols="12" class="mb-4">
+        <v-alert type="error" variant="tonal" density="compact">{{ submitError }}</v-alert>
+      </v-col>
+
+      <v-col cols="12">
+        <v-btn color="primary" variant="flat" block size="large" :loading="submitting" :disabled="!formValid" type="submit">
+          Submit
+        </v-btn>
+      </v-col>
+    </v-row>
+
+    <v-dialog v-model="showMembersDialog" max-width="420" persistent>
+      <v-card class="pa-4">
+        <div class="d-flex align-center mb-4">
+          <v-btn icon variant="text" @click="showMembersDialog = false">
+            <v-icon>mdi-chevron-left</v-icon>
+          </v-btn>
+          <span class="text-subtitle-1 ml-2">Members</span>
+        </div>
+
+        <div
+          v-for="(member, index) in draftMembers"
+          :key="index"
+          class="pa-3 mb-3 bordered-field"
+        >
+          <v-text-field
+            v-model="member.name"
+            label="Name"
+            density="comfortable"
+            variant="outlined"
+            hide-details
+            class="mb-2"
+          />
+          <v-text-field
+            v-model="member.nric"
+            label="NRIC / Passport No. (Optional)"
+            density="comfortable"
+            variant="outlined"
+            hide-details
+            class="mb-2"
+          />
+          <InputPhoneNumberV2 v-model="member.contact" density="comfortable" hide-details />
+        </div>
+
+        <v-btn variant="outlined" block class="mb-3" prepend-icon="mdi-plus" @click="addDraftMember">
+          Add
+        </v-btn>
+        <v-btn color="primary" variant="flat" block @click="saveMembers">Save</v-btn>
+      </v-card>
+    </v-dialog>
+  </v-form>
+</template>
+
+<script lang="ts" setup>
+const prop = defineProps({
+  site: { type: String, required: true },
+});
+
+const emit = defineEmits(["done"]);
+
+const { createVisitor } = usePublicVisitorOnboarding();
+const { isSupported: isContactPickerSupported, pickContact } = useContactPicker();
+
+const requiredRule = (v: any) => (v !== null && v !== undefined && v !== "") || "This field is required";
+
+const contractorTypes = [
+  { title: "Home Contractor", value: "home-contractor" },
+  { title: "House Mover", value: "house-mover" },
+  { title: "Estate Contractor", value: "estate-contractor" },
+  { title: "Property Agent", value: "property-agent" },
+];
+
+const visitor = reactive({
+  expectedCheckIn: null as string | null,
+  contractorType: "",
+  name: "",
+  nric: "",
+  email: "",
+  contact: "",
+  block: "",
+  level: "",
+  unit: "",
+  company: "",
+  plateNumber: "",
+  remarks: "",
+});
+
+type TDraftMember = { name: string; nric: string; contact: string };
+const members = ref<TDraftMember[]>([]);
+const draftMembers = ref<TDraftMember[]>([]);
+const showMembersDialog = ref(false);
+
+watch(showMembersDialog, (open) => {
+  if (open) {
+    draftMembers.value = members.value.length
+      ? members.value.map((m) => ({ ...m }))
+      : [{ name: "", nric: "", contact: "" }];
+  }
+});
+
+function addDraftMember() {
+  draftMembers.value.push({ name: "", nric: "", contact: "" });
+}
+
+function saveMembers() {
+  members.value = draftMembers.value.filter((m) => m.name && m.contact);
+  showMembersDialog.value = false;
+}
+
+const formValid = ref(false);
+const submitting = ref(false);
+const submitError = ref("");
+
+async function fillFromContactPicker() {
+  const contact = await pickContact();
+  if (!contact) return;
+  if (contact.name) visitor.name = contact.name;
+  if (contact.tel) visitor.contact = contact.tel;
+}
+
+async function submit() {
+  submitError.value = "";
+  submitting.value = true;
+  try {
+    const payload: Record<string, any> = {
+      type: "contractor",
+      contractorType: visitor.contractorType || undefined,
+      name: visitor.name,
+      contact: visitor.contact,
+      nric: visitor.nric || undefined,
+      email: visitor.email || undefined,
+      block: visitor.block || undefined,
+      level: visitor.level || undefined,
+      unit: visitor.unit || undefined,
+      company: visitor.company,
+      plateNumber: visitor.plateNumber || undefined,
+      remarks: visitor.remarks || undefined,
+      members: members.value.length ? members.value : undefined,
+    };
+
+    const res: any = await createVisitor(prop.site, payload);
+    emit("done", res?.status || "pending");
+  } catch (error: any) {
+    submitError.value =
+      error?.data?.message || error?.message || "Unable to submit your registration. Please try again.";
+  } finally {
+    submitting.value = false;
+  }
+}
+</script>
+
+<style scoped>
+/* Matches the surrounding v-text-field/InputPhoneNumberV2 fields' own
+   border color (Vuetify's border color/opacity token) - the per-member row
+   in the Members dialog isn't a real Vuetify field, so without this it was
+   the one inconsistent border on the form. */
+.bordered-field {
+  border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
+  border-radius: 4px;
+}
+
+/* InputDatePicker/InputPhoneNumberV2 hardcode `.filter-field` on their own
+   internal v-text-field/v-select, which sets border-radius: var(--r-inner)
+   globally (assets/css/screens.css) - overriding it just within this form
+   (including inside the teleported Members dialog; :deep()'s scoping
+   attribute stays on the element through teleport) rather than in the
+   shared components themselves, which are also used elsewhere. */
+:deep(.filter-field .v-field) {
+  border-radius: 4px;
+}
+</style>

package/components/PublicOnboarding/LocationFields.vue

@@ -0,0 +1,125 @@
+<template>
+  <div>
+    <p class="text-caption text-medium-emphasis mb-2">Location</p>
+    <v-row no-gutters class="flex-nowrap">
+      <v-col cols="4" class="pr-1">
+        <v-autocomplete
+          v-model="block"
+          :items="blocksArray"
+          item-title="title"
+          item-value="value"
+          label="Block"
+          :loading="blocksLoading"
+          :rules="[requiredRule]"
+          density="comfortable"
+          variant="outlined"
+          hide-details="auto"
+          @update:model-value="onBlockChange"
+        />
+      </v-col>
+      <v-col cols="4" class="px-1">
+        <v-autocomplete
+          v-model="level"
+          :items="levelsArray"
+          item-title="title"
+          item-value="value"
+          label="Level"
+          :loading="levelsLoading"
+          :disabled="!block"
+          :rules="[requiredRule]"
+          density="comfortable"
+          variant="outlined"
+          hide-details="auto"
+          @update:model-value="onLevelChange"
+        />
+      </v-col>
+      <v-col cols="4" class="pl-1">
+        <v-autocomplete
+          v-model="unit"
+          :items="unitsArray"
+          item-title="title"
+          item-value="value"
+          label="Unit"
+          :loading="unitsLoading"
+          :disabled="!level"
+          :rules="[requiredRule]"
+          density="comfortable"
+          variant="outlined"
+          hide-details="auto"
+        />
+      </v-col>
+    </v-row>
+  </div>
+</template>
+
+<script lang="ts" setup>
+const prop = defineProps({
+  site: { type: String, required: true },
+});
+
+const block = defineModel<string>("block", { default: "" });
+const level = defineModel<string>("level", { default: "" });
+const unit = defineModel<string>("unit", { default: "" });
+
+const requiredRule = (v: any) => (v !== null && v !== undefined && v !== "") || "Required";
+
+const { getBlocks, getLevels, getUnits } = usePublicVisitorOnboarding();
+
+const blocksArray = ref<{ title: string; value: string }[]>([]);
+const levelsArray = ref<{ title: string; value: string }[]>([]);
+const unitsArray = ref<{ title: string; value: string }[]>([]);
+const blocksLoading = ref(false);
+const levelsLoading = ref(false);
+const unitsLoading = ref(false);
+
+function toArray(res: any) {
+  return Array.isArray(res?.data) ? res.data : Array.isArray(res) ? res : [];
+}
+
+async function loadBlocks() {
+  blocksLoading.value = true;
+  try {
+    const res = await getBlocks(prop.site);
+    blocksArray.value = toArray(res).map((b: any) => ({ title: b.name, value: b._id }));
+  } finally {
+    blocksLoading.value = false;
+  }
+}
+
+/**
+ * Takes the new value as an argument rather than reading `block.value` -
+ * this handler and `v-model="block"` are both bound to the same
+ * `update:model-value` event on the same element, and listener order
+ * between them isn't guaranteed, so `block.value` can still be the OLD
+ * value at the moment this runs.
+ */
+async function onBlockChange(newBlock: string | null) {
+  level.value = "";
+  unit.value = "";
+  unitsArray.value = [];
+  levelsArray.value = [];
+  if (!newBlock) return;
+  levelsLoading.value = true;
+  try {
+    const res = await getLevels(prop.site, newBlock);
+    levelsArray.value = toArray(res).map((l: any) => ({ title: l.name, value: l._id }));
+  } finally {
+    levelsLoading.value = false;
+  }
+}
+
+async function onLevelChange(newLevel: string | null) {
+  unit.value = "";
+  unitsArray.value = [];
+  if (!block.value || !newLevel) return;
+  unitsLoading.value = true;
+  try {
+    const res = await getUnits(prop.site, block.value, newLevel);
+    unitsArray.value = toArray(res).map((u: any) => ({ title: u.name, value: u._id }));
+  } finally {
+    unitsLoading.value = false;
+  }
+}
+
+onMounted(loadBlocks);
+</script>

package/components/PublicOnboarding/TypeSelectCard.vue

@@ -0,0 +1,34 @@
+<template>
+  <v-card class="pa-0" elevation="2">
+    <v-card-title class="px-4 py-3">Self-service onboarding portal</v-card-title>
+    <v-divider />
+    <v-list class="pa-3">
+      <v-list-item
+        v-for="option in options"
+        :key="option.value"
+        class="mb-2 rounded-lg"
+        style="border: 1px solid rgba(128,128,128,0.3)"
+        @click="emit('select', option.value)"
+      >
+        <template #prepend>
+          <v-avatar color="grey-darken-3" class="mr-3">
+            <v-icon color="white">{{ option.icon }}</v-icon>
+          </v-avatar>
+        </template>
+        <v-list-item-title>{{ option.label }}</v-list-item-title>
+        <template #append>
+          <v-icon>mdi-chevron-right</v-icon>
+        </template>
+      </v-list-item>
+    </v-list>
+  </v-card>
+</template>
+
+<script lang="ts" setup>
+const emit = defineEmits(["select"]);
+
+const options = [
+  { label: "Visitor", value: "guest", icon: "mdi-walk" },
+  { label: "Contractor", value: "contractor", icon: "mdi-account-hard-hat-outline" },
+];
+</script>