From a2cf8fc5b5bdd18384ffb5469dd185d9ff8ab115 Mon Sep 17 00:00:00 2001
From: Alex Turchyn <lexfox777@gmail.com>
Date: Sat, 22 Jul 2023 20:00:28 +0300
Subject: [PATCH] fix checkboxes

---
 app/javascript/submission_form/area.vue     |  4 +--
 app/javascript/submission_form/form.vue     |  2 +-
 app/javascript/template_builder/area.vue    |  2 +-
 app/javascript/template_builder/builder.vue |  4 +--
 app/javascript/template_builder/field.vue   | 28 +++++++++++----------
 app/javascript/template_builder/fields.vue  |  2 +-
 6 files changed, 22 insertions(+), 20 deletions(-)

diff --git a/app/javascript/submission_form/area.vue b/app/javascript/submission_form/area.vue
index 76d33091..44960a8c 100644
--- a/app/javascript/submission_form/area.vue
+++ b/app/javascript/submission_form/area.vue
@@ -25,10 +25,10 @@
       class="absolute -top-7 rounded bg-base-content text-base-100 px-2 text-sm whitespace-nowrap"
     >
       {{ field.name || fieldNames[field.type] }}
-      <template v-if="field.type === 'checkbox'">
+      <template v-if="field.type === 'checkbox' && !field.name">
         {{ fieldIndex + 1 }}
       </template>
-      <template v-else-if="!field.required">
+      <template v-else-if="!field.required && field.type !== 'checkbox'">
         (optional)
       </template>
     </div>
diff --git a/app/javascript/submission_form/form.vue b/app/javascript/submission_form/form.vue
index 5ddf2080..4a27d62b 100644
--- a/app/javascript/submission_form/form.vue
+++ b/app/javascript/submission_form/form.vue
@@ -213,7 +213,7 @@
                     @click="[$refs.areas.scrollIntoField(field), values[field.uuid] = !values[field.uuid]]"
                   >
                   <span class="text-xl">
-                    {{ currentField.name || currentField.type + ' ' + (index + 1) }}
+                    {{ field.name || field.type + ' ' + (index + 1) }}
                   </span>
                 </label>
               </div>
diff --git a/app/javascript/template_builder/area.vue b/app/javascript/template_builder/area.vue
index 4e10d2f4..c0c52730 100644
--- a/app/javascript/template_builder/area.vue
+++ b/app/javascript/template_builder/area.vue
@@ -65,7 +65,7 @@
         @blur="onNameBlur"
       >{{ field.name || defaultName }}</span>
       <div
-        v-if="isNameFocus"
+        v-if="isNameFocus && field.type !== 'checkbox'"
         class="flex items-center ml-1.5"
       >
         <input
diff --git a/app/javascript/template_builder/builder.vue b/app/javascript/template_builder/builder.vue
index af98a659..cf666159 100644
--- a/app/javascript/template_builder/builder.vue
+++ b/app/javascript/template_builder/builder.vue
@@ -314,7 +314,7 @@ export default {
         const field = {
           name: '',
           uuid: v4(),
-          required: true,
+          required: type !== 'checkbox',
           type,
           submitter_uuid: this.selectedSubmitter.uuid,
           areas: [area]
@@ -333,7 +333,7 @@ export default {
         type: this.dragFieldType,
         uuid: v4(),
         submitter_uuid: this.selectedSubmitter.uuid,
-        required: true
+        required: this.dragFieldType !== 'checkbox'
       }
 
       if (['select', 'multiple', 'radio'].includes(this.dragFieldType)) {
diff --git a/app/javascript/template_builder/field.vue b/app/javascript/template_builder/field.vue
index 9368a620..e2000e1f 100644
--- a/app/javascript/template_builder/field.vue
+++ b/app/javascript/template_builder/field.vue
@@ -31,19 +31,21 @@
           v-if="isNameFocus"
           class="flex items-center relative"
         >
-          <input
-            :id="`required-checkbox-${field.uuid}`"
-            v-model="field.required"
-            type="checkbox"
-            class="checkbox checkbox-xs no-animation rounded"
-            @mousedown.prevent
-          >
-          <label
-            :for="`required-checkbox-${field.uuid}`"
-            class="label text-xs"
-            @click.prevent="field.required = !field.required"
-            @mousedown.prevent
-          >Required</label>
+          <template v-if="field.type !== 'checkbox'">
+            <input
+              :id="`required-checkbox-${field.uuid}`"
+              v-model="field.required"
+              type="checkbox"
+              class="checkbox checkbox-xs no-animation rounded"
+              @mousedown.prevent
+            >
+            <label
+              :for="`required-checkbox-${field.uuid}`"
+              class="label text-xs"
+              @click.prevent="field.required = !field.required"
+              @mousedown.prevent
+            >Required</label>
+          </template>
         </div>
         <div
           v-else
diff --git a/app/javascript/template_builder/fields.vue b/app/javascript/template_builder/fields.vue
index 489850f8..16e704cc 100644
--- a/app/javascript/template_builder/fields.vue
+++ b/app/javascript/template_builder/fields.vue
@@ -171,7 +171,7 @@ export default {
       const field = {
         name: '',
         uuid: v4(),
-        required: true,
+        required: type !== 'checkbox',
         submitter_uuid: this.selectedSubmitter.uuid,
         type
       }