@7365admin1/layer-common 3.2.1-staging.72 → 3.2.2

package/components/OnlineFormConfigurationForm.vue

@@ -1,427 +1,181 @@
 <template>
-  <v-card width="100%" style="display: flex; flex-direction: column; max-height: 92vh">
+  <v-card width="100%">
     <v-toolbar>
       <v-row no-gutters class="fill-height px-6" align="center">
         <span class="font-weight-bold text-h5">
-          {{ prop.mode === "edit" ? "Edit" : "New" }} Online Form
+          {{ prop.mode === "edit" ? "Edit" : "Add" }} Online Form
         </span>
       </v-row>
     </v-toolbar>
 
-    <v-card-text style="flex: 1; overflow-y: auto; padding: 0">
-      <v-form v-model="validForm">
-        <div class="pa-4 pb-0">
+    <v-card-text style="max-height: 76vh; overflow-y: auto" class="pa-0">
+      <v-form v-model="validForm" :disabled="disable">
 
-          <!-- Form Name -->
-          <div class="mb-3">
-            <InputLabel title="Form Name" />
-            <v-text-field
-              v-if="prop.mode !== 'edit'"
-              v-model="formName"
-              density="compact"
-              variant="outlined"
-              placeholder="e.g. Renovation Permit Application"
-              :rules="[v => !!v || 'Form name is required']"
-              hide-details="auto"
+        <!-- Form Type -->
+        <v-col cols="12" class="px-6 pt-4 pb-0">
+          <InputLabel title="Form Type" />
+
+          <!-- Add mode: selectable list -->
+          <v-list
+            v-if="prop.mode !== 'edit'"
+            density="compact"
+            lines="one"
+            max-height="220"
+            style="overflow-y: auto; border: 1px solid rgba(0,0,0,0.18); border-radius: 4px;"
+            class="pa-0"
+          >
+            <v-list-item
+              v-if="availableFormTypes.length === 0"
+              disabled
+              title="All forms have already been added for this site"
+              class="text-caption text-medium-emphasis"
             />
-            <v-chip v-else color="primary" variant="tonal" size="small">
-              {{ prop.onlineForm?.formType }}
-            </v-chip>
-          </div>
+            <v-list-item
+              v-for="name in availableFormTypes"
+              :key="name"
+              :title="name"
+              :active="selectedFormType === name"
+              active-color="primary"
+              class="text-caption"
+              @click="selectedFormType = name"
+            />
+          </v-list>
 
-          <!-- Load template (add mode only) -->
-          <div v-if="prop.mode !== 'edit'" class="mb-4">
-            <v-btn
-              size="small"
-              variant="text"
-              color="primary"
-              class="text-none pa-0"
-              prepend-icon="mdi-file-outline"
-              @click="showTemplatePicker = true"
-            >
-              Start from existing template
-            </v-btn>
-          </div>
+          <!-- Edit mode: read-only label -->
+          <v-chip v-else color="primary" variant="tonal" size="small">
+            {{ prop.onlineForm.formType }}
+          </v-chip>
+        </v-col>
 
-          <!-- Status (edit mode) -->
-          <div v-if="prop.mode === 'edit'" class="mb-3">
-            <InputLabel title="Status" />
-            <v-select
-              v-model="formStatus"
-              :items="['active', 'inactive']"
-              density="compact"
-              variant="outlined"
-              hide-details
-            />
-          </div>
+        <v-divider class="mt-4" />
 
-          <!-- Payment -->
-          <v-divider class="mb-3" />
-          <div class="d-flex align-center ga-3 mb-1">
-            <span class="text-body-2 font-weight-medium">Requires Payment</span>
-            <v-switch
-              v-model="requiresPayment"
-              density="compact"
-              hide-details
-              color="primary"
-              inset
-            />
-          </div>
-          <v-text-field
-            v-if="requiresPayment"
-            v-model.number="paymentAmount"
-            density="compact"
-            variant="outlined"
-            type="number"
-            min="1"
-            label="Payment Amount (SGD)"
-            prefix="$"
-            class="mb-3"
-            hide-details="auto"
-            :rules="requiresPayment ? [v => (v > 0) || 'Amount must be greater than 0'] : []"
+        <!-- Status (edit mode only) -->
+        <v-col v-if="prop.mode === 'edit'" cols="12" class="px-6 pt-3 pb-0">
+          <InputLabel title="Status" />
+          <v-select
+            v-model="formStatus"
+            :items="['active', 'inactive']"
+            density="comfortable"
           />
+        </v-col>
 
-          <v-divider class="mb-4" />
-        </div>
+        <!-- Attachment -->
+        <!-- <v-col cols="12" class="px-6 pt-3 pb-4">
+          <InputLabel title="Attachment (Optional)" />
 
-        <!-- Block Builder -->
-        <div class="px-4 pb-4">
-          <div class="d-flex align-center justify-space-between mb-3">
-            <span class="text-subtitle-2 font-weight-bold">Form Blocks</span>
-            <v-menu :close-on-content-click="true">
-              <template #activator="{ props: menuProps }">
-                <v-btn
-                  v-bind="menuProps"
-                  size="small"
-                  color="primary"
-                  variant="tonal"
-                  prepend-icon="mdi-plus"
-                  class="text-none"
-                >
-                  Add Block
-                </v-btn>
-              </template>
-              <v-list density="compact" min-width="220">
-                <v-list-subheader>Content</v-list-subheader>
-                <v-list-item title="Section Heading" prepend-icon="mdi-format-header-1" @click="addBlock('section-header')" />
-                <v-list-item title="Paragraph" prepend-icon="mdi-text" @click="addBlock('paragraph')" />
-                <v-list-item title="Numbered List" prepend-icon="mdi-format-list-numbered" @click="addBlock('ordered-list')" />
-                <v-list-item title="Bullet List" prepend-icon="mdi-format-list-bulleted" @click="addBlock('unordered-list')" />
-                <v-list-item title="Divider" prepend-icon="mdi-minus" @click="addBlock('divider')" />
-                <v-divider />
-                <v-list-subheader>Input Fields</v-list-subheader>
-                <v-list-item title="Text / Number / Date Field" prepend-icon="mdi-form-textbox" @click="addBlock('field')" />
-                <v-list-item title="Dropdown (Select)" prepend-icon="mdi-chevron-down-box-outline" @click="addBlock('field-select')" />
-                <v-list-item title="Checkbox Group" prepend-icon="mdi-checkbox-multiple-outline" @click="addBlock('checkbox-group')" />
-                <v-list-item title="Signature" prepend-icon="mdi-draw" @click="addBlock('signature-row')" />
-              </v-list>
-            </v-menu>
+          <div v-if="attachmentId" class="d-flex align-center" style="gap: 8px">
+            <v-card
+              variant="outlined"
+              border="thin"
+              class="px-3 flex-grow-1 text-caption"
+              height="40"
+              :href="getFileUrl(attachmentId)"
+              target="_blank"
+            >
+              <v-row no-gutters class="fill-height" align="center" style="gap: 6px">
+                <v-icon size="15">mdi-file-document-outline</v-icon>
+                {{ attachmentFileName || "View attachment" }}
+                <v-icon size="13" class="ml-auto">mdi-open-in-new</v-icon>
+              </v-row>
+            </v-card>
+            <v-btn
+              icon
+              variant="text"
+              size="small"
+              density="comfortable"
+              :disabled="disable"
+              @click="clearAttachment"
+            >
+              <v-icon size="17">mdi-close</v-icon>
+            </v-btn>
           </div>
 
-          <!-- Empty state -->
           <div
-            v-if="blocks.length === 0"
-            class="text-center pa-8 text-medium-emphasis text-caption"
-            style="border: 2px dashed #e0e0e0; border-radius: 8px"
+            v-else
+            class="upload-drop-zone"
+            :class="{ 'drag-over': isDragOver, 'is-uploading': isUploading }"
+            @dragover.prevent="isDragOver = true"
+            @dragleave.prevent="isDragOver = false"
+            @drop.prevent="handleDrop"
+            @click="fileInputRef?.click()"
           >
-            No blocks yet. Click "Add Block" to start building your form.
+            <v-progress-circular
+              v-if="isUploading"
+              indeterminate
+              size="24"
+              width="2"
+              color="primary"
+              class="mb-1"
+            />
+            <v-icon
+              v-else
+              size="26"
+              :color="isDragOver ? 'primary' : undefined"
+              class="mb-1 text-medium-emphasis"
+            >
+              mdi-cloud-upload-outline
+            </v-icon>
+            <span class="text-caption text-medium-emphasis">
+              {{ isUploading ? "Uploading…" : "Drop file here or click to browse" }}
+            </span>
+            <input
+              ref="fileInputRef"
+              type="file"
+              accept=".pdf,application/pdf,image/*"
+              style="display: none"
+              @change="handleFileInputChange"
+            />
           </div>
 
-          <!-- Block list -->
-          <div
-            v-for="(block, idx) in blocks"
-            :key="block._uid"
-            class="mb-2"
-          >
-            <v-card variant="outlined" class="rounded-lg">
-              <!-- Header row -->
-              <div class="d-flex align-center px-3 py-2 ga-2">
-                <v-chip
-                  size="x-small"
-                  :color="blockTypeColor(block.type)"
-                  variant="flat"
-                  label
-                  style="min-width: 110px; justify-content: center; flex-shrink: 0"
-                >
-                  {{ blockTypeLabel(block.type) }}
-                </v-chip>
-                <span
-                  class="text-caption text-medium-emphasis flex-grow-1"
-                  style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap"
-                >
-                  {{ blockSummary(block) }}
-                </span>
-                <div class="d-flex align-center" style="gap: 2px; flex-shrink: 0">
-                  <v-btn icon size="x-small" variant="text" :disabled="idx === 0" @click="moveBlock(idx, -1)">
-                    <v-icon size="15">mdi-arrow-up</v-icon>
-                  </v-btn>
-                  <v-btn icon size="x-small" variant="text" :disabled="idx === blocks.length - 1" @click="moveBlock(idx, 1)">
-                    <v-icon size="15">mdi-arrow-down</v-icon>
-                  </v-btn>
-                  <v-btn icon size="x-small" variant="text" :color="editingIdx === idx ? 'primary' : undefined" @click="toggleEdit(idx)">
-                    <v-icon size="15">mdi-pencil</v-icon>
-                  </v-btn>
-                  <v-btn icon size="x-small" variant="text" color="error" @click="deleteBlock(idx)">
-                    <v-icon size="15">mdi-delete</v-icon>
-                  </v-btn>
-                </div>
-              </div>
-
-              <!-- Inline editor -->
-              <div v-if="editingIdx === idx">
-                <v-divider />
-                <div class="pa-3">
+          <span v-if="attachmentError" class="text-caption text-error d-block mt-1">
+            {{ attachmentError }}
+          </span>
+        </v-col> -->
 
-                  <!-- section-header -->
-                  <template v-if="block.type === 'section-header'">
-                    <v-text-field v-model="block.text" label="Heading Text" density="compact" variant="outlined" hide-details />
-                  </template>
-
-                  <!-- paragraph -->
-                  <template v-else-if="block.type === 'paragraph'">
-                    <v-textarea v-model="block.text" label="Paragraph Text" density="compact" variant="outlined" rows="3" auto-grow hide-details />
-                  </template>
-
-                  <!-- ordered-list / unordered-list -->
-                  <template v-else-if="block.type === 'ordered-list' || block.type === 'unordered-list'">
-                    <v-text-field v-model="block.title" label="Section Title (optional)" density="compact" variant="outlined" class="mb-3" hide-details />
-                    <div class="text-caption font-weight-medium mb-2">Items:</div>
-                    <div
-                      v-for="(item, itemIdx) in block.items"
-                      :key="itemIdx"
-                      class="d-flex align-center ga-2 mb-2"
-                    >
-                      <span class="text-caption text-medium-emphasis" style="min-width: 20px; text-align: right">
-                        {{ block.type === 'ordered-list' ? `${itemIdx + 1}.` : '•' }}
-                      </span>
-                      <v-text-field
-                        :model-value="item"
-                        @update:model-value="block.items[itemIdx] = $event"
-                        density="compact"
-                        variant="outlined"
-                        hide-details
-                        class="flex-grow-1"
-                      />
-                      <v-btn icon size="x-small" variant="text" color="error" @click="block.items.splice(itemIdx, 1)">
-                        <v-icon size="13">mdi-close</v-icon>
-                      </v-btn>
-                    </div>
-                    <v-btn size="x-small" variant="text" color="primary" class="text-none" prepend-icon="mdi-plus" @click="block.items.push('')">
-                      Add item
-                    </v-btn>
-                  </template>
-
-                  <!-- divider -->
-                  <template v-else-if="block.type === 'divider'">
-                    <span class="text-caption text-medium-emphasis">Horizontal divider — no settings needed.</span>
-                  </template>
-
-                  <!-- field -->
-                  <template v-else-if="block.type === 'field'">
-                    <v-row dense>
-                      <v-col cols="12">
-                        <v-text-field
-                          v-model="block.field.label"
-                          label="Field Label"
-                          density="compact"
-                          variant="outlined"
-                          hide-details
-                          @update:model-value="onLabelChange(block, $event)"
-                        />
-                      </v-col>
-                      <v-col cols="7">
-                        <v-text-field
-                          v-model="block.field.key"
-                          label="Field Key"
-                          density="compact"
-                          variant="outlined"
-                          hint="Auto-generated · editable"
-                          persistent-hint
-                        />
-                      </v-col>
-                      <v-col cols="5">
-                        <v-select
-                          v-model="block.field.fieldType"
-                          :items="fieldTypeOptions"
-                          label="Type"
-                          density="compact"
-                          variant="outlined"
-                          hide-details
-                          @update:model-value="onFieldTypeChange(block, $event)"
-                        />
-                      </v-col>
-                      <v-col cols="12">
-                        <v-switch
-                          v-model="block.field.required"
-                          label="Required"
-                          density="compact"
-                          hide-details
-                          color="primary"
-                          inset
-                        />
-                      </v-col>
-                      <!-- Options for select type -->
-                      <v-col v-if="block.field.fieldType === 'select'" cols="12">
-                        <div class="text-caption font-weight-medium mb-2">Dropdown Options:</div>
-                        <div
-                          v-for="(opt, optIdx) in (block.field.options ?? [])"
-                          :key="optIdx"
-                          class="d-flex align-center ga-2 mb-2"
-                        >
-                          <v-text-field
-                            :model-value="opt"
-                            @update:model-value="block.field.options[optIdx] = $event"
-                            density="compact"
-                            variant="outlined"
-                            hide-details
-                            class="flex-grow-1"
-                            :label="`Option ${optIdx + 1}`"
-                          />
-                          <v-btn icon size="x-small" variant="text" color="error" @click="block.field.options.splice(optIdx, 1)">
-                            <v-icon size="13">mdi-close</v-icon>
-                          </v-btn>
-                        </div>
-                        <v-btn size="x-small" variant="text" color="primary" class="text-none" prepend-icon="mdi-plus" @click="(block.field.options ??= []).push('')">
-                          Add option
-                        </v-btn>
-                      </v-col>
-                    </v-row>
-                  </template>
-
-                  <!-- checkbox-group -->
-                  <template v-else-if="block.type === 'checkbox-group'">
-                    <v-text-field v-model="block.title" label="Section Title (optional)" density="compact" variant="outlined" class="mb-3" hide-details />
-                    <v-switch v-model="block.single" label="Single selection (radio behavior)" density="compact" hide-details color="primary" inset class="mb-3" />
-                    <div class="text-caption font-weight-medium mb-2">Checkboxes:</div>
-                    <div
-                      v-for="(item, itemIdx) in block.items"
-                      :key="itemIdx"
-                      class="d-flex align-center ga-2 mb-2"
-                    >
-                      <v-text-field
-                        v-model="item.label"
-                        density="compact"
-                        variant="outlined"
-                        hide-details
-                        label="Label"
-                        class="flex-grow-1"
-                        @update:model-value="onCheckboxLabelChange(item, $event)"
-                      />
-                      <v-text-field
-                        v-model="item.key"
-                        density="compact"
-                        variant="outlined"
-                        hide-details
-                        label="Key"
-                        style="max-width: 130px"
-                      />
-                      <v-btn icon size="x-small" variant="text" color="error" @click="block.items.splice(itemIdx, 1)">
-                        <v-icon size="13">mdi-close</v-icon>
-                      </v-btn>
-                    </div>
-                    <v-btn size="x-small" variant="text" color="primary" class="text-none" prepend-icon="mdi-plus" @click="block.items.push({ key: '', label: '' })">
-                      Add checkbox
-                    </v-btn>
-                  </template>
-
-                  <!-- signature-row -->
-                  <template v-else-if="block.type === 'signature-row'">
-                    <v-row dense>
-                      <v-col cols="12">
-                        <v-text-field
-                          v-model="block.label"
-                          label="Signature Label"
-                          density="compact"
-                          variant="outlined"
-                          hide-details
-                          @update:model-value="block.key = labelToKey($event)"
-                        />
-                      </v-col>
-                      <v-col cols="12">
-                        <v-text-field
-                          v-model="block.key"
-                          label="Key"
-                          density="compact"
-                          variant="outlined"
-                          hint="Unique identifier"
-                          persistent-hint
-                        />
-                      </v-col>
-                    </v-row>
-                  </template>
-
-                </div>
-              </div>
-            </v-card>
-          </div>
-        </div>
-
-        <!-- Error -->
-        <div v-if="message" class="px-4 pb-3">
+        <v-col v-if="message" cols="12" class="px-6">
           <span class="text-caption text-error">{{ message }}</span>
-        </div>
+        </v-col>
       </v-form>
     </v-card-text>
 
-    <!-- Action bar -->
     <v-toolbar density="compact">
       <v-row no-gutters>
         <v-col cols="6">
-          <v-btn tile block variant="text" class="text-none" size="48" @click="emit('cancel')">Cancel</v-btn>
+          <v-btn
+            tile
+            block
+            variant="text"
+            class="text-none"
+            size="48"
+            @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="!canSubmit || loading"
-            :loading="loading"
+            tile
+            block
+            variant="flat"
+            color="black"
+            class="text-none"
+            size="48"
+            :disabled="!canSubmit || disable"
+            :loading="disable"
             @click="submit"
           >
-            {{ prop.mode === "edit" ? "Update" : "Create Form" }}
+            {{ prop.mode === "edit" ? "Update" : "Submit" }}
           </v-btn>
         </v-col>
       </v-row>
     </v-toolbar>
-
-    <!-- Template picker dialog -->
-    <v-dialog v-model="showTemplatePicker" width="520" scrollable>
-      <v-card>
-        <v-toolbar density="compact">
-          <span class="pl-4 font-weight-medium text-subtitle-1">Load Template</span>
-        </v-toolbar>
-        <div class="pt-3 px-4 pb-2 text-caption text-medium-emphasis" style="white-space: normal">
-          Select a template to pre-populate form blocks. You can customise them after loading.
-        </div>
-        <v-card-text style="max-height: 55vh; overflow-y: auto; padding: 0">
-          <v-list density="compact">
-            <v-list-item
-              v-if="sortedTemplateNames.length === 0"
-              disabled
-              title="All templates have already been added for this site"
-              class="text-caption text-medium-emphasis"
-            />
-            <v-list-item
-              v-for="name in sortedTemplateNames"
-              :key="name"
-              :title="name"
-              class="text-caption"
-              @click="loadTemplate(name)"
-            />
-          </v-list>
-        </v-card-text>
-        <v-toolbar density="compact">
-          <v-btn tile block variant="text" class="text-none" size="48" @click="showTemplatePicker = false">Close</v-btn>
-        </v-toolbar>
-      </v-card>
-    </v-dialog>
   </v-card>
 </template>
-
 <script setup lang="ts">
+import useFile from "../composables/useFile";
 import useOnlineFormConfiguration from "../composables/useOnlineFormConfiguration";
 import useOnlineFormPages from "../composables/useOnlineFormPages";
 
-type AnyBlock = Record<string, any>;
-
 const prop = defineProps({
   mode: { type: String, default: "add" },
   onlineForm: {
@@ -434,289 +188,139 @@ const emit = defineEmits(["cancel", "success"]);
 
 const { formPages } = useOnlineFormPages();
 const { create: _add, updateById: _update, getAll: _getAll } = useOnlineFormConfiguration();
+const { addFile, getFileUrl } = useFile();
 
 const route = useRoute();
 const siteId = route.params.site as string;
 const orgId = route.params.org as string;
 
-// ── Form-level settings ──────────────────────────────────────────────────────
-const formName = ref("");
-const formStatus = ref<string>(prop.onlineForm?.status || "active");
-const requiresPayment = ref(false);
-const paymentAmount = ref<number>(0);
-const validForm = ref(false);
-const loading = ref(false);
-const message = ref("");
-
-// ── Blocks ───────────────────────────────────────────────────────────────────
-let _uid = 0;
-function nextUid() { return `b${++_uid}`; }
+// --- form type selection (add mode) ---
+const selectedFormType = ref("");
 
-const blocks = ref<AnyBlock[]>([]);
-const editingIdx = ref<number | null>(null);
-
-// ── Template picker ───────────────────────────────────────────────────────────
-const showTemplatePicker = ref(false);
-const existingFormTypes = ref<string[]>([]);
-const sortedTemplateNames = computed(() =>
-  Object.keys(formPages)
-    .filter((name) => !existingFormTypes.value.includes(name))
-    .sort((a, b) => a.localeCompare(b))
+const { data: existingFormsData } = useLazyAsyncData(
+  `online-form-config-existing-${siteId}`,
+  () => _getAll({ site: siteId, org: orgId, status: "active", limit: 100 })
 );
 
-async function loadExistingFormTypes() {
-  try {
-    const res = await _getAll({ status: "active", org: orgId, site: siteId, limit: 100 });
-    existingFormTypes.value = (res?.items ?? []).map((c: any) => c.formType);
-  } catch (error) {
-    console.error("Failed to load existing form types for template filtering", error);
-  }
-}
-
-// ── Init ──────────────────────────────────────────────────────────────────────
-onMounted(() => {
-  if (prop.mode === "edit") {
-    if (prop.onlineForm?.fields?.blocks) {
-      try {
-        const parsed = JSON.parse(prop.onlineForm.fields.blocks);
-        blocks.value = (parsed as any[]).map((b) => ({ ...b, _uid: nextUid() }));
-      } catch {}
-    }
-    const pa = Number(prop.onlineForm?.fields?.paymentAmount ?? 0);
-    if (pa > 0) { requiresPayment.value = true; paymentAmount.value = pa; }
-  } else {
-    loadExistingFormTypes();
-  }
-});
-
-// ── Helpers ───────────────────────────────────────────────────────────────────
-function labelToKey(label: string): string {
-  const words = label
-    .replace(/[^a-zA-Z0-9 ]/g, "")
-    .trim()
-    .split(/\s+/)
-    .filter(Boolean);
-  if (!words.length) return "";
-  return (
-    words[0].toLowerCase() +
-    words
-      .slice(1)
-      .map((w) => w.charAt(0).toUpperCase() + w.slice(1).toLowerCase())
-      .join("")
+const availableFormTypes = computed(() => {
+  const existing = new Set(
+    existingFormsData.value?.items?.map((f: any) => f.formType) ?? []
   );
-}
-
-const fieldTypeOptions = [
-  { title: "Text", value: "text" },
-  { title: "Textarea (multi-line)", value: "textarea" },
-  { title: "Number", value: "number" },
-  { title: "Date", value: "date" },
-  { title: "Dropdown (Select)", value: "select" },
-];
-
-function blockTypeLabel(type: string): string {
-  const map: Record<string, string> = {
-    "section-header": "Heading",
-    paragraph: "Paragraph",
-    "ordered-list": "Numbered List",
-    "unordered-list": "Bullet List",
-    divider: "Divider",
-    field: "Field",
-    "checkbox-group": "Checkboxes",
-    "signature-row": "Signature",
-  };
-  return map[type] ?? type;
-}
-
-function blockTypeColor(type: string): string {
-  const map: Record<string, string> = {
-    "section-header": "blue-grey",
-    paragraph: "grey",
-    "ordered-list": "indigo",
-    "unordered-list": "indigo",
-    divider: "grey",
-    field: "teal",
-    "checkbox-group": "purple",
-    "signature-row": "orange",
-  };
-  return map[type] ?? "grey";
-}
-
-function blockSummary(block: AnyBlock): string {
-  switch (block.type) {
-    case "section-header":
-    case "paragraph":
-      return (block.text ?? "").slice(0, 70) || "(empty)";
-    case "ordered-list":
-    case "unordered-list":
-      return block.title || `${block.items?.length ?? 0} item${block.items?.length === 1 ? "" : "s"}`;
-    case "divider":
-      return "──────────────";
-    case "field":
-      return block.field?.label
-        ? `${block.field.label} · ${block.field.fieldType}`
-        : "(no label)";
-    case "checkbox-group":
-      return block.title || `${block.items?.length ?? 0} checkbox${block.items?.length === 1 ? "" : "es"}`;
-    case "signature-row":
-      return block.label || "(no label)";
-    default:
-      return "";
-  }
-}
+  return Object.keys(formPages)
+    .filter((name) => !existing.has(name))
+    .sort((a, b) => a.localeCompare(b));
+});
 
-// ── Block operations ──────────────────────────────────────────────────────────
-function toggleEdit(idx: number) {
-  editingIdx.value = editingIdx.value === idx ? null : idx;
-}
+// --- status (edit mode) ---
+const formStatus = ref<string>(prop.onlineForm?.status || "active");
 
-function moveBlock(idx: number, dir: -1 | 1) {
-  const target = idx + dir;
-  if (target < 0 || target >= blocks.value.length) return;
-  const copy = [...blocks.value];
-  [copy[idx], copy[target]] = [copy[target], copy[idx]];
-  blocks.value = copy;
-  editingIdx.value = null;
+// --- attachment ---
+const attachmentId = ref<string>(prop.onlineForm?.attachment || prop.onlineForm?.fields?.attachment || "");
+const attachmentFileName = ref("");
+const attachmentError = ref("");
+const isDragOver = ref(false);
+const isUploading = ref(false);
+const fileInputRef = ref<HTMLInputElement | null>(null);
+
+function handleDrop(e: DragEvent) {
+  isDragOver.value = false;
+  const file = e.dataTransfer?.files[0];
+  if (file) uploadAttachment(file);
 }
 
-function deleteBlock(idx: number) {
-  blocks.value.splice(idx, 1);
-  if (editingIdx.value === idx) editingIdx.value = null;
-  else if (editingIdx.value !== null && editingIdx.value > idx) editingIdx.value--;
+function handleFileInputChange(e: Event) {
+  const file = (e.target as HTMLInputElement).files?.[0];
+  if (file) uploadAttachment(file);
 }
 
-function addBlock(type: string) {
-  let b: AnyBlock;
-  switch (type) {
-    case "section-header":
-      b = { _uid: nextUid(), type: "section-header", text: "" };
-      break;
-    case "paragraph":
-      b = { _uid: nextUid(), type: "paragraph", text: "" };
-      break;
-    case "ordered-list":
-      b = { _uid: nextUid(), type: "ordered-list", title: "", items: [""] };
-      break;
-    case "unordered-list":
-      b = { _uid: nextUid(), type: "unordered-list", title: "", items: [""] };
-      break;
-    case "divider":
-      b = { _uid: nextUid(), type: "divider" };
-      break;
-    case "field":
-      b = { _uid: nextUid(), type: "field", field: { key: "", label: "", fieldType: "text", required: false } };
-      break;
-    case "field-select":
-      b = { _uid: nextUid(), type: "field", field: { key: "", label: "", fieldType: "select", required: false, options: [] } };
-      break;
-    case "checkbox-group":
-      b = { _uid: nextUid(), type: "checkbox-group", title: "", single: false, items: [{ key: "", label: "" }] };
-      break;
-    case "signature-row":
-      b = { _uid: nextUid(), type: "signature-row", label: "", key: "" };
-      break;
-    default:
-      return;
+async function uploadAttachment(file: File) {
+  isUploading.value = true;
+  attachmentError.value = "";
+  try {
+    const res = await addFile(file);
+    attachmentId.value = res.id;
+    attachmentFileName.value = file.name;
+  } catch (e: any) {
+    attachmentError.value = e?.message || "Upload failed. Please try again.";
+  } finally {
+    isUploading.value = false;
   }
-  blocks.value.push(b);
-  editingIdx.value = blocks.value.length - 1;
-}
-
-// Auto-generate key from label (field blocks)
-function onLabelChange(block: AnyBlock, newLabel: string) {
-  if (!block._keyEdited) block.field.key = labelToKey(newLabel);
 }
 
-function onFieldTypeChange(block: AnyBlock, newType: string) {
-  if (newType === "select" && !block.field.options) block.field.options = [];
+function clearAttachment() {
+  attachmentId.value = "";
+  attachmentFileName.value = "";
+  attachmentError.value = "";
+  if (fileInputRef.value) fileInputRef.value.value = "";
 }
 
-// Auto-generate key from label (checkbox items)
-function onCheckboxLabelChange(item: AnyBlock, newLabel: string) {
-  if (!item._keyEdited) item.key = labelToKey(newLabel);
-}
-
-// ── Template loading ──────────────────────────────────────────────────────────
-function loadTemplate(name: string) {
-  const def = formPages[name];
-  if (!def) return;
-  formName.value = name;
-  blocks.value = def.blocks.map((b) => ({
-    ...JSON.parse(JSON.stringify(b)),
-    _uid: nextUid(),
-  }));
-  showTemplatePicker.value = false;
-  editingIdx.value = null;
-}
-
-// ── Computed ──────────────────────────────────────────────────────────────────
-const canSubmit = computed(() => {
-  const nameOk = prop.mode === "edit" || !!formName.value.trim();
-  const payOk = !requiresPayment.value || paymentAmount.value > 0;
-  return nameOk && payOk && !loading.value;
-});
+// --- submit ---
+const validForm = ref(false);
+const disable = ref(false);
+const message = ref("");
 
-// ── Payload builder ───────────────────────────────────────────────────────────
-function buildCleanBlocks(): Record<string, any>[] {
-  return blocks.value.map((b) => {
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const { _uid, _keyEdited, ...rest } = b;
-    if (rest.field) {
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      const { _keyEdited: _fke, ...fieldRest } = rest.field;
-      rest.field = fieldRest;
-    }
-    if (Array.isArray(rest.items)) {
-      rest.items = rest.items.map((item: any) => {
-        if (item && typeof item === "object") {
-          // eslint-disable-next-line @typescript-eslint/no-unused-vars
-          const { _keyEdited: _ike, ...itemRest } = item;
-          return itemRest;
-        }
-        return item;
-      });
-    }
-    return rest;
-  });
-}
+const canSubmit = computed(() =>
+  prop.mode === "edit" ? true : selectedFormType.value !== ""
+);
 
-function buildFields(): Record<string, string> {
-  const fields: Record<string, string> = {
-    blocks: JSON.stringify(buildCleanBlocks()),
-  };
-  if (requiresPayment.value && paymentAmount.value > 0) {
-    fields.paymentAmount = String(paymentAmount.value);
-  }
+function buildFields(formType: string): Record<string, string> {
+  const def = formPages[formType];
+  const fields: Record<string, string> = {};
+  if (def) fields.blocks = JSON.stringify(def.blocks);
+  if (attachmentId.value) fields.attachment = attachmentId.value;
   return fields;
 }
 
-// ── Submit ────────────────────────────────────────────────────────────────────
 async function submit() {
+  disable.value = true;
   message.value = "";
-  loading.value = true;
   try {
     if (prop.mode === "add") {
-      const name = formName.value.trim();
       await _add({
-        formType: name,
-        fields: buildFields(),
+        formType: selectedFormType.value,
+        fields: buildFields(selectedFormType.value),
         status: "active",
         org: orgId,
         site: siteId,
       });
     } else {
-      const formType = prop.onlineForm?.formType as string;
-      await _update(prop.onlineForm?._id ?? "", {
+      const formType = prop.onlineForm.formType as string;
+      await _update(prop.onlineForm._id ?? "", {
         formType,
-        fields: buildFields(),
+        fields: buildFields(formType),
         status: formStatus.value,
       });
     }
     emit("success");
   } catch (error: any) {
-    message.value = error?.response?._data?.message || "Failed to save form. Please try again.";
+    message.value = error?.response?._data?.message || "Failed to save form";
   } finally {
-    loading.value = false;
+    disable.value = false;
   }
 }
 </script>
+
+<style scoped>
+.upload-drop-zone {
+  border: 2px dashed rgba(0, 0, 0, 0.2);
+  border-radius: 8px;
+  padding: 18px 12px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  min-height: 80px;
+  transition: border-color 0.2s, background-color 0.2s;
+  user-select: none;
+}
+.upload-drop-zone:hover,
+.upload-drop-zone.drag-over {
+  border-color: rgb(var(--v-theme-primary));
+  background-color: rgba(var(--v-theme-primary), 0.04);
+}
+.upload-drop-zone.is-uploading {
+  pointer-events: none;
+  opacity: 0.65;
+}
+</style>