@7365admin1/layer-common 3.0.3 → 3.0.6

package/components/OnlineFormFill.vue

@@ -0,0 +1,456 @@
+<template>
+  <v-card width="100%">
+    <!-- Title bar -->
+    <v-toolbar color="grey-darken-3" style="min-height: 56px">
+      <v-row no-gutters class="fill-height px-6" align="center">
+        <span
+          class="font-weight-bold text-subtitle-1 text-white text-uppercase"
+          style="letter-spacing: 0.5px; line-height: 1.3"
+        >
+          {{ definition.title }}
+        </span>
+        <v-spacer v-if="$slots['title-actions']" />
+        <slot name="title-actions" />
+      </v-row>
+    </v-toolbar>
+
+    <!-- Scrollable body -->
+    <v-card-text
+      style="max-height: 76vh; overflow-y: auto"
+      class="pa-6"
+    >
+      <v-form v-model="validForm">
+        <template v-for="(block, i) in definition.blocks" :key="i">
+
+          <!-- ADDRESS BLOCK -->
+          <div
+            v-if="block.type === 'address'"
+            class="mb-4 pa-3"
+            style="background: #f5f5f5; border-radius: 6px"
+          >
+            <v-row no-gutters>
+              <v-col cols="5">
+                <span class="text-body-2">
+                  <strong>Date&nbsp;:&nbsp;</strong>{{ todayDate }}
+                </span>
+              </v-col>
+              <v-col cols="7">
+                <span class="text-body-2">
+                  <strong>To&nbsp;&nbsp;&nbsp;:&nbsp;</strong>{{ resolveText(block.to) }}
+                </span>
+              </v-col>
+            </v-row>
+          </div>
+
+          <!-- FIELD ROW (2–3 fields side by side) -->
+          <v-row v-else-if="block.type === 'row'" class="mb-0" dense>
+            <v-col
+              v-for="field in block.fields"
+              :key="field.key"
+              :cols="field.cols || 6"
+            >
+              <InputLabel :title="field.label" />
+              <v-text-field
+                v-if="field.fieldType === 'text'"
+                v-model="values[field.key]"
+                density="comfortable"
+                :disabled="readonly"
+                :rules="!readonly && field.required ? [requiredRule] : []"
+              />
+              <v-text-field
+                v-else-if="field.fieldType === 'number'"
+                v-model.number="values[field.key]"
+                type="number"
+                density="comfortable"
+                :disabled="readonly"
+                :rules="!readonly && field.required ? [requiredRule] : []"
+              />
+              <v-text-field
+                v-else-if="field.fieldType === 'date'"
+                v-model="values[field.key]"
+                type="date"
+                density="comfortable"
+                :disabled="readonly"
+                :rules="!readonly && field.required ? [requiredRule] : []"
+              />
+              <v-select
+                v-else-if="field.fieldType === 'select'"
+                v-model="values[field.key]"
+                :items="field.options || []"
+                density="comfortable"
+                :disabled="readonly"
+                :rules="!readonly && field.required ? [requiredRule] : []"
+              />
+              <v-textarea
+                v-else-if="field.fieldType === 'textarea'"
+                v-model="values[field.key]"
+                density="comfortable"
+                rows="3"
+                auto-grow
+                :disabled="readonly"
+                :rules="!readonly && field.required ? [requiredRule] : []"
+              />
+            </v-col>
+          </v-row>
+
+          <!-- SINGLE FULL-WIDTH FIELD -->
+          <div v-else-if="block.type === 'field'" class="mb-0">
+            <InputLabel :title="block.field.label" />
+            <v-text-field
+              v-if="block.field.fieldType === 'text'"
+              v-model="values[block.field.key]"
+              density="comfortable"
+              :disabled="readonly"
+              :rules="!readonly && block.field.required ? [requiredRule] : []"
+            />
+            <v-text-field
+              v-else-if="block.field.fieldType === 'number'"
+              v-model.number="values[block.field.key]"
+              type="number"
+              density="comfortable"
+              :disabled="readonly"
+              :rules="!readonly && block.field.required ? [requiredRule] : []"
+            />
+            <v-text-field
+              v-else-if="block.field.fieldType === 'date'"
+              v-model="values[block.field.key]"
+              type="date"
+              density="comfortable"
+              :disabled="readonly"
+              :rules="!readonly && block.field.required ? [requiredRule] : []"
+            />
+            <v-select
+              v-else-if="block.field.fieldType === 'select'"
+              v-model="values[block.field.key]"
+              :items="block.field.options || []"
+              density="comfortable"
+              :disabled="readonly"
+              :rules="!readonly && block.field.required ? [requiredRule] : []"
+            />
+            <v-textarea
+              v-else-if="block.field.fieldType === 'textarea'"
+              v-model="values[block.field.key]"
+              density="comfortable"
+              rows="3"
+              auto-grow
+              :disabled="readonly"
+              :rules="!readonly && block.field.required ? [requiredRule] : []"
+            />
+          </div>
+
+          <!-- SECTION HEADER -->
+          <div
+            v-else-if="block.type === 'section-header'"
+            class="mt-4 mb-2"
+          >
+            <span
+              class="text-body-2 font-weight-bold"
+              style="text-decoration: underline; text-underline-offset: 3px"
+            >
+              {{ resolveText(block.text) }}
+            </span>
+          </div>
+
+          <!-- CHECKBOX GROUP -->
+          <div
+            v-else-if="block.type === 'checkbox-group'"
+            class="mb-2"
+          >
+            <div
+              v-if="block.title"
+              class="text-body-2 font-weight-bold mb-1"
+              style="text-decoration: underline; text-underline-offset: 3px"
+            >
+              {{ block.title }}
+            </div>
+            <div
+              v-for="item in block.items"
+              :key="item.key"
+              class="d-flex align-center"
+              style="gap: 4px; min-height: 32px"
+            >
+              <v-checkbox
+                v-model="values[item.key]"
+                density="compact"
+                hide-details
+                class="mt-0 pt-0 flex-shrink-0"
+                :disabled="readonly"
+              />
+              <div class="flex-grow-1">
+                <span class="text-body-2" style="line-height: 1.4">{{ item.label }}</span>
+                <v-text-field
+                  v-if="item.elaborateKey && values[item.key]"
+                  v-model="values[item.elaborateKey]"
+                  density="compact"
+                  placeholder="Please elaborate..."
+                  class="mt-1"
+                  style="max-width: 360px"
+                />
+              </div>
+            </div>
+          </div>
+
+          <!-- PARAGRAPH (terms / info text) -->
+          <p
+            v-else-if="block.type === 'paragraph'"
+            class="text-body-2 mb-3"
+            style="
+              line-height: 1.65;
+              color: #333;
+              text-align: justify;
+              border-left: 3px solid #ddd;
+              padding-left: 10px;
+            "
+          >
+            {{ resolveText(block.text) }}
+          </p>
+
+          <!-- DIVIDER -->
+          <v-divider v-else-if="block.type === 'divider'" class="my-4" />
+
+          <!-- SIGNATURE ROW -->
+          <div
+            v-else-if="block.type === 'signature-row' && !readonly"
+            class="mt-4 mb-4"
+          >
+            <SignaturePad
+              v-model="values[block.key]"
+              :label="block.label"
+            />
+          </div>
+          <div
+            v-else-if="block.type === 'signature-row' && readonly"
+            class="mt-4 mb-2"
+          >
+            <div
+              style="border-bottom: 1px dashed #bbb; height: 56px; background: #fafafa; border-radius: 4px"
+            />
+            <span class="text-caption text-medium-emphasis">{{ block.label }}</span>
+          </div>
+
+          <!-- ACKNOWLEDGEMENT -->
+          <div
+            v-else-if="block.type === 'acknowledgement'"
+            class="mb-4 pa-3"
+            style="background: #f9f9f9; border-radius: 6px; border: 1px solid #eee"
+          >
+            <span class="text-body-2 font-weight-medium">{{ resolveText(block.text) }}</span>
+          </div>
+
+          <!-- MANAGEMENT USE (read-only, shown at bottom) -->
+          <div
+            v-else-if="block.type === 'management-use'"
+            class="pa-4 mt-2"
+            style="background: #f0f0f0; border-radius: 6px; opacity: 0.75"
+          >
+            <v-row no-gutters class="mb-2">
+              <span class="text-caption font-weight-bold text-medium-emphasis">
+                FOR MANAGEMENT USE ONLY
+              </span>
+            </v-row>
+            <v-row no-gutters style="gap: 16px">
+              <div
+                v-for="(item, idx) in block.items"
+                :key="idx"
+                style="min-width: 160px"
+              >
+                <div class="text-caption text-medium-emphasis mb-1">{{ item }}</div>
+                <div
+                  style="border-bottom: 1px solid #aaa; min-width: 120px; height: 22px"
+                />
+              </div>
+            </v-row>
+          </div>
+
+        </template>
+
+        <!-- Error message -->
+        <v-row v-if="message" no-gutters justify="center" class="mt-3">
+          <span class="text-caption text-error">{{ message }}</span>
+        </v-row>
+      </v-form>
+    </v-card-text>
+
+    <!-- Action bar -->
+    <v-toolbar density="compact">
+      <v-row no-gutters>
+        <!-- Readonly: single Close button -->
+        <template v-if="readonly">
+          <v-col cols="12">
+            <v-btn
+              tile
+              block
+              variant="text"
+              class="text-none"
+              size="48"
+              @click="emit('cancel')"
+            >
+              Close
+            </v-btn>
+          </v-col>
+        </template>
+        <!-- Interactive: Cancel + Submit -->
+        <template v-else>
+          <v-col cols="6">
+            <v-btn
+              tile
+              block
+              variant="text"
+              class="text-none"
+              size="48"
+              :disabled="submitting"
+              @click="emit('cancel')"
+            >
+              Cancel
+            </v-btn>
+          </v-col>
+          <v-col cols="6">
+            <v-btn
+              tile
+              block
+              variant="flat"
+              color="black"
+              class="text-none"
+              size="48"
+              :disabled="!validForm || submitting"
+              :loading="submitting"
+              @click="submit"
+            >
+              Submit
+            </v-btn>
+          </v-col>
+        </template>
+      </v-row>
+    </v-toolbar>
+  </v-card>
+</template>
+<script setup lang="ts">
+import SignaturePad from "./SignaturePad.vue";
+import useOnlineForm from "../composables/useOnlineForm";
+import useLocalAuth from "../composables/useLocalAuth";
+import type { FormDefinition, FormFieldDef } from "../composables/useOnlineFormPages";
+
+const props = defineProps({
+  definition: {
+    type: Object as PropType<FormDefinition>,
+    required: true,
+  },
+  siteId: { type: String, required: true },
+  orgId: { type: String, required: true },
+  siteName: { type: String, default: "" },
+  readonly: { type: Boolean, default: false },
+  /** Optional custom submit handler. Receives the collected form values.
+   *  If omitted the component submits to /api/online-forms automatically. */
+  submitFn: {
+    type: Function as PropType<(values: Record<string, any>) => Promise<void>>,
+    default: null,
+  },
+});
+
+const emit = defineEmits(["cancel", "success"]);
+
+function resolveText(text: string): string {
+  return text.replace(/\{siteName\}/g, props.siteName || "the Management");
+}
+
+const { add } = useOnlineForm();
+const { currentUser } = useLocalAuth();
+
+const validForm = ref(false);
+const submitting = ref(false);
+const message = ref("");
+const values = ref<Record<string, any>>({});
+
+const requiredRule = (v: any) => (v !== null && v !== undefined && v !== "") || "This field is required";
+
+// Today's date formatted DD MMM YYYY
+const todayDate = computed(() => {
+  const d = new Date();
+  return d.toLocaleDateString("en-SG", { day: "2-digit", month: "short", year: "numeric" });
+});
+
+// Collect all field keys from all blocks and initialise values
+function initValues(def: FormDefinition) {
+  const init: Record<string, any> = {};
+  for (const block of def.blocks) {
+    if (block.type === "row") {
+      for (const f of block.fields) init[f.key] = f.fieldType === "number" ? null : "";
+    } else if (block.type === "field") {
+      const f = block.field;
+      init[f.key] = f.fieldType === "number" ? null : "";
+    } else if (block.type === "checkbox-group") {
+      for (const item of block.items) {
+        init[item.key] = false;
+        if (item.elaborateKey) init[item.elaborateKey] = "";
+      }
+    } else if (block.type === "signature-row") {
+      init[block.key] = ""; // stores base64 PNG string
+    }
+  }
+  return init;
+}
+
+values.value = initValues(props.definition);
+
+const NAME_LABELS = new Set([
+  "name",
+  "owner name",
+  "unit owner name",
+  "unit owner / tenant name",
+  "owner / tenant name",
+  "resident name",
+  "marketing agent name",
+]);
+
+function prePopulate(u: any) {
+  if (!u) return;
+  const allFields: FormFieldDef[] = [];
+  for (const block of props.definition.blocks) {
+    if (block.type === "row") allFields.push(...block.fields);
+    else if (block.type === "field") allFields.push(block.field);
+  }
+  for (const f of allFields) {
+    const label = f.label.toLowerCase();
+    if (NAME_LABELS.has(label)) {
+      values.value[f.key] = u.name || "";
+    } else if (!values.value[f.key] && (label.includes("contact") || label === "hp" || label === "mobile")) {
+      values.value[f.key] = u.contact || u.primaryPhone || u.mobilePhone || "";
+    } else if (label === "email" || label === "email address") {
+      values.value[f.key] = u.email || "";
+    }
+  }
+}
+
+watch(currentUser, (u) => { if (u) prePopulate(u); }, { immediate: true });
+
+async function submit() {
+  submitting.value = true;
+  message.value = "";
+  try {
+    const payload = { ...values.value };
+
+    if (props.submitFn) {
+      await props.submitFn(payload);
+    } else {
+      const unitEntry = Object.entries(payload).find(
+        ([k]) => k.toLowerCase().includes("unitno")
+      );
+      const unitNumber = unitEntry ? String(unitEntry[1] || "") : "";
+      await add({
+        typeOfForm: props.definition.title,
+        unitNumber,
+        fields: payload,
+        status: "pending",
+        site: props.siteId,
+      });
+    }
+
+    emit("success");
+  } catch (error: any) {
+    message.value =
+      error?.response?._data?.message || "Failed to submit form. Please try again.";
+  } finally {
+    submitting.value = false;
+  }
+}
+</script>