@7365admin1/layer-common 3.2.2-staging.182 → 3.2.2-staging.183

package/components/OnlineFormConfigurationForm.vue

@@ -336,7 +336,7 @@
                         <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: '' })">
+                    <v-btn size="x-small" variant="text" color="primary" class="text-none" prepend-icon="mdi-plus" @click="addCheckboxItem(block)">
                       Add checkbox
                     </v-btn>
                   </template>
@@ -351,7 +351,7 @@
                           density="compact"
                           variant="outlined"
                           hide-details
-                          @update:model-value="block.key = labelToKey($event)"
+                          @update:model-value="onSignatureLabelChange(block, $event)"
                         />
                       </v-col>
                       <v-col cols="12">
@@ -373,6 +373,15 @@
           </div>
         </div>
 
+        <!-- At least one fillable block is required — a form with only
+             headings/paragraphs/dividers has nothing for a resident to
+             actually submit. -->
+        <div v-if="blocks.length > 0 && !hasFillableBlock" class="px-4 pb-3">
+          <span class="text-caption text-error">
+            Add at least one Field, Checkbox Group, or Signature block before saving.
+          </span>
+        </div>
+
         <!-- Error -->
         <div v-if="message" class="px-4 pb-3">
           <span class="text-caption text-error">{{ message }}</span>
@@ -520,6 +529,39 @@ function labelToKey(label: string): string {
   );
 }
 
+/**
+ * Every field key currently in use across the form, so a newly-generated key
+ * never collides with a sibling's — otherwise two fields left blank (or given
+ * the same label) end up bound to the same value in the resident app, and
+ * filling one silently fills the other.
+ */
+function collectUsedKeys(excludeRef?: any): Set<string> {
+  const keys = new Set<string>();
+  for (const b of blocks.value) {
+    if (b.type === "field" && b.field && b.field !== excludeRef && b.field.key) {
+      keys.add(b.field.key);
+    }
+    if (b.type === "checkbox-group" && Array.isArray(b.items)) {
+      for (const item of b.items) {
+        if (item !== excludeRef && item?.key) keys.add(item.key);
+      }
+    }
+    if (b.type === "signature-row" && b !== excludeRef && b.key) {
+      keys.add(b.key);
+    }
+  }
+  return keys;
+}
+
+/** `base` (or "field" when blank) made unique against `used` via a numeric suffix. */
+function uniqueKey(base: string, used: Set<string>): string {
+  const root = base || "field";
+  if (!used.has(root)) return root;
+  let i = 2;
+  while (used.has(`${root}${i}`)) i++;
+  return `${root}${i}`;
+}
+
 const fieldTypeOptions = [
   { title: "Text", value: "text" },
   { title: "Textarea (multi-line)", value: "textarea" },
@@ -603,18 +645,26 @@ function addBlock(type: string) {
     case "divider":
       b = { _uid: nextUid(), type: "divider" };
       break;
-    case "field":
-      b = { _uid: nextUid(), type: "field", field: { key: "", label: "", fieldType: "text", required: false } };
+    case "field": {
+      const uid = nextUid();
+      b = { _uid: uid, type: "field", field: { key: uniqueKey(`field${uid}`, collectUsedKeys()), label: "", fieldType: "text", required: false } };
       break;
-    case "field-select":
-      b = { _uid: nextUid(), type: "field", field: { key: "", label: "", fieldType: "select", required: false, options: [] } };
+    }
+    case "field-select": {
+      const uid = nextUid();
+      b = { _uid: uid, type: "field", field: { key: uniqueKey(`field${uid}`, collectUsedKeys()), label: "", fieldType: "select", required: false, options: [] } };
       break;
-    case "checkbox-group":
-      b = { _uid: nextUid(), type: "checkbox-group", title: "", single: false, items: [{ key: "", label: "" }] };
+    }
+    case "checkbox-group": {
+      const uid = nextUid();
+      b = { _uid: uid, type: "checkbox-group", title: "", single: false, items: [{ key: uniqueKey(`item${uid}`, collectUsedKeys()), label: "" }] };
       break;
-    case "signature-row":
-      b = { _uid: nextUid(), type: "signature-row", label: "", key: "" };
+    }
+    case "signature-row": {
+      const uid = nextUid();
+      b = { _uid: uid, type: "signature-row", label: "", key: uniqueKey(`signature${uid}`, collectUsedKeys()) };
       break;
+    }
     default:
       return;
   }
@@ -624,7 +674,9 @@ function addBlock(type: string) {
 
 // Auto-generate key from label (field blocks)
 function onLabelChange(block: AnyBlock, newLabel: string) {
-  if (!block._keyEdited) block.field.key = labelToKey(newLabel);
+  if (!block._keyEdited) {
+    block.field.key = uniqueKey(labelToKey(newLabel), collectUsedKeys(block.field));
+  }
 }
 
 function onFieldTypeChange(block: AnyBlock, newType: string) {
@@ -633,7 +685,16 @@ function onFieldTypeChange(block: AnyBlock, newType: string) {
 
 // Auto-generate key from label (checkbox items)
 function onCheckboxLabelChange(item: AnyBlock, newLabel: string) {
-  if (!item._keyEdited) item.key = labelToKey(newLabel);
+  if (!item._keyEdited) item.key = uniqueKey(labelToKey(newLabel), collectUsedKeys(item));
+}
+
+function addCheckboxItem(block: AnyBlock) {
+  block.items.push({ key: uniqueKey(`item${nextUid()}`, collectUsedKeys()), label: "" });
+}
+
+// Auto-generate key from label (signature-row)
+function onSignatureLabelChange(block: AnyBlock, newLabel: string) {
+  block.key = uniqueKey(labelToKey(newLabel), collectUsedKeys(block));
 }
 
 // ── Template loading ──────────────────────────────────────────────────────────
@@ -650,10 +711,18 @@ function loadTemplate(name: string) {
 }
 
 // ── Computed ──────────────────────────────────────────────────────────────────
+// Only these block types actually collect something from the resident — a
+// form built entirely out of headings/paragraphs/dividers has nothing to
+// submit, so it isn't a usable form yet.
+const FILLABLE_BLOCK_TYPES = ["field", "checkbox-group", "signature-row"];
+const hasFillableBlock = computed(() =>
+  blocks.value.some((b) => FILLABLE_BLOCK_TYPES.includes(b.type)),
+);
+
 const canSubmit = computed(() => {
   const nameOk = prop.mode === "edit" || !!formName.value.trim();
   const payOk = !requiresPayment.value || paymentAmount.value > 0;
-  return nameOk && payOk && !loading.value;
+  return nameOk && payOk && hasFillableBlock.value && !loading.value;
 });
 
 // ── Payload builder ───────────────────────────────────────────────────────────

package/components/OnlineFormFill.vue

@@ -9,9 +9,12 @@
       <slot name="title-actions" />
     </v-card-title>
 
-    <!-- Submission metadata bar (readonly only) -->
+    <!-- Submission metadata bar (readonly only). Shown for an actual
+         submission (submissionStatus) OR a pure template preview that
+         requires payment — a preview has no submission yet, but should
+         still tell the admin the form carries a fee. -->
     <div
-      v-if="readonly && (submissionStatus)"
+      v-if="readonly && (submissionStatus || requiresPayment)"
       class="online-form-fill__meta px-6 py-2 d-flex align-center ga-4"
     >
       <!-- `StatusChip` IS the design's status pill: it maps the WORD to a tone
@@ -35,9 +38,16 @@
       </span>
       <template v-if="requiresPayment">
         <!-- The payment pair is not a status WORD the shared map knows, so the
-             tone is given directly - the same pill, the same measured pair. -->
+             tone is given directly - the same pill, the same measured pair.
+             A preview has no submission to be paid/unpaid yet, so it shows
+             the configured fee instead of a status that doesn't apply. -->
         <StatusChip
-          v-if="initialManagementValues?.paymentStatus"
+          v-if="!submissionStatus"
+          tone="info"
+          :label="`Requires Payment: $${paymentAmount}`"
+        />
+        <StatusChip
+          v-else-if="initialManagementValues?.paymentStatus"
           tone="ok"
           :label="`Payment ${initialManagementValues.paymentStatus}`"
         />

package/package.json

@@ -2,7 +2,7 @@
   "name": "@7365admin1/layer-common",
   "license": "MIT",
   "type": "module",
-  "version": "3.2.2-staging.182",
+  "version": "3.2.2-staging.183",
   "author": "7365admin1",
   "main": "./nuxt.config.ts",
   "//files": "What a consumer extending this layer actually loads. Without this npm ships the whole working tree - the changesets, the CI workflows, the render harness in tools/ and any scratch directory that happened to exist at publish time. Nuxt resolves a layer by directory, so every runtime directory below has to stay listed; adding a new top-level runtime directory means adding it here too.",