From c0162bccc856da111e56c3817ceec8bb2f0eb0b1 Mon Sep 17 00:00:00 2001
From: Pete Matsyburka <pete.matsy@gmail.com>
Date: Wed, 15 Nov 2023 19:48:51 +0200
Subject: [PATCH] fix radio field type

---
 app/javascript/submission_form/area.vue   |  8 ++++----
 app/javascript/template_builder/field.vue | 11 ++++++++++-
 2 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/app/javascript/submission_form/area.vue b/app/javascript/submission_form/area.vue
index e363e800..004aeb39 100644
--- a/app/javascript/submission_form/area.vue
+++ b/app/javascript/submission_form/area.vue
@@ -97,11 +97,11 @@
         :value="false"
         class="aspect-square base-radio"
         :class="{ '!w-auto !h-full': area.w > area.h, '!w-full !h-auto': area.w <= area.h }"
-        :checked="modelValue && modelValue === field.options.find((o) => o.uuid === area.option_uuid)?.value"
+        :checked="!!modelValue && modelValue === field.options.find((o) => o.uuid === area.option_uuid)?.value"
         @click="$emit('update:model-value', field.options.find((o) => o.uuid === area.option_uuid)?.value)"
       >
       <IconCheck
-        v-else-if="modelValue && modelValue === field.options.find((o) => o.uuid === area.option_uuid)?.value"
+        v-else-if="!!modelValue && modelValue === field.options.find((o) => o.uuid === area.option_uuid)?.value"
         class="aspect-square"
         :class="{ '!w-auto !h-full': area.w > area.h, '!w-full !h-auto': area.w <= area.h }"
       />
@@ -116,11 +116,11 @@
         :value="false"
         class="aspect-square base-checkbox"
         :class="{ '!w-auto !h-full': area.w > area.h, '!w-full !h-auto': area.w <= area.h }"
-        :checked="modelValue && modelValue.includes(field.options.find((o) => o.uuid === area.option_uuid)?.value)"
+        :checked="!!modelValue && modelValue.includes(field.options.find((o) => o.uuid === area.option_uuid)?.value)"
         @change="updateMultipleSelectValue(field.options.find((o) => o.uuid === area.option_uuid)?.value)"
       >
       <IconCheck
-        v-else-if="modelValue && modelValue.includes(field.options.find((o) => o.uuid === area.option_uuid)?.value)"
+        v-else-if="!!modelValue && modelValue.includes(field.options.find((o) => o.uuid === area.option_uuid)?.value)"
         class="aspect-square"
         :class="{ '!w-auto !h-full': area.w > area.h, '!w-full !h-auto': area.w <= area.h }"
       />
diff --git a/app/javascript/template_builder/field.vue b/app/javascript/template_builder/field.vue
index 00a71345..8dc2739d 100644
--- a/app/javascript/template_builder/field.vue
+++ b/app/javascript/template_builder/field.vue
@@ -193,6 +193,7 @@
       </div>
       <div
         v-if="field.options"
+        ref="options"
         class="border-t border-base-300 mx-2 pt-2 space-y-1.5"
         draggable="true"
         @dragstart.prevent.stop
@@ -206,7 +207,7 @@
             {{ index + 1 }}.
           </span>
           <div
-            v-if="['radio', 'multiple'].includes(field.type) && (index > 0 || field.areas.find((a) => a.option_uuid)) && !field.areas.find((a) => a.option_uuid === option.uuid)"
+            v-if="['radio', 'multiple'].includes(field.type) && (index > 0 || field.areas.find((a) => a.option_uuid) || !field.areas.length) && !field.areas.find((a) => a.option_uuid === option.uuid)"
             class="items-center flex w-full"
           >
             <input
@@ -218,6 +219,7 @@
             >
             <button
               title="Draw"
+              tabindex="-1"
               @click.prevent="$emit('set-draw', { field, option })"
             >
               <IconNewSection
@@ -237,6 +239,7 @@
           >
           <button
             class="text-sm w-3.5"
+            tabindex="-1"
             @click="removeOption(option)"
           >
             &times;
@@ -345,6 +348,12 @@ export default {
     addOption () {
       this.field.options.push({ value: '', uuid: v4() })
 
+      this.$nextTick(() => {
+        const inputs = this.$refs.options.querySelectorAll('input')
+
+        inputs[inputs.length - 1]?.focus()
+      })
+
       this.save()
     },
     removeOption (option) {