group form checkboxes into single step

app/javascript/submission_form/form.vue

@@ -1,11 +1,11 @@
 <template>
   <FieldAreas
     ref="areas"
-    :fields="submitterFields"
+    :steps="stepFields"
     :values="values"
     :attachments-index="attachmentsIndex"
-    :current-field="currentField"
-    @focus-field="goToField($event, false, true)"
+    :current-step="currentStepFields"
+    @focus-step="goToStep($event, false, true)"
   />
   <form
     v-if="!isCompleted"
@@ -21,7 +21,7 @@
       :value="authenticityToken"
     >
     <input
-      v-if="currentStep === submitterFields.length - 1"
+      v-if="currentStep === stepFields.length - 1"
       type="hidden"
       name="completed"
       value="true"
@@ -42,12 +42,12 @@
           <input
             :id="currentField.uuid"
             v-model="values[currentField.uuid]"
-            autofocus
             class="base-input !text-2xl w-full"
             :required="currentField.required"
             placeholder="Type here..."
             type="text"
             :name="`values[${currentField.uuid}]`"
+            @focus="$refs.areas.scrollIntoField(currentField)"
           >
         </div>
       </div>
@@ -57,15 +57,15 @@
           :for="currentField.uuid"
           class="label text-2xl mb-2"
         >{{ currentField.name }}</label>
-        <div>
+        <div class="text-center">
           <input
             :id="currentField.uuid"
             v-model="values[currentField.uuid]"
-            class="base-input !text-2xl w-full text-center"
-            autofocus
+            class="base-input !text-2xl text-center w-full"
             :required="currentField.required"
             type="date"
             :name="`values[${currentField.uuid}]`"
+            @focus="$refs.areas.scrollIntoField(currentField)"
           >
         </div>
       </div>
@@ -81,6 +81,7 @@
           class="select base-input !text-2xl w-full text-center font-normal"
           :name="`values[${currentField.uuid}]`"
           @change="values[currentField.uuid] = $event.target.value"
+          @focus="$refs.areas.scrollIntoField(currentField)"
         >
           <option
             value=""
@@ -98,63 +99,73 @@
           </option>
         </select>
       </div>
-      <div v-else-if="currentField.type === 'radio' && currentField.options?.length">
+      <div v-else-if="currentField.type === 'radio'">
         <label
           v-if="currentField.name"
           :for="currentField.uuid"
           class="label text-2xl mb-2"
         >{{ currentField.name }}</label>
-        <div class="space-y-3.5">
-          <div
-            v-for="(option, index) in currentField.options"
-            :key="index"
-          >
-            <label
-              :for="currentField.uuid + option"
-              class="flex items-center space-x-3"
+        <div class="flex w-full">
+          <div class="space-y-3.5 mx-auto">
+            <div
+              v-for="(option, index) in currentField.options"
+              :key="index"
             >
-              <input
-                :id="currentField.uuid + option"
-                v-model="values[currentField.uuid]"
-                type="radio"
-                class="base-radio !h-7 !w-7"
-                :name="`values[${currentField.uuid}]`"
-                :value="option"
-                required
+              <label
+                :for="currentField.uuid + option"
+                class="flex items-center space-x-3"
               >
-              <span class="text-xl">
-                {{ option }}
-              </span>
-            </label>
+                <input
+                  :id="currentField.uuid + option"
+                  v-model="values[currentField.uuid]"
+                  type="radio"
+                  class="base-radio !h-7 !w-7"
+                  :name="`values[${currentField.uuid}]`"
+                  :value="option"
+                  required
+                >
+                <span class="text-xl">
+                  {{ option }}
+                </span>
+              </label>
+            </div>
           </div>
         </div>
       </div>
-      <CheckboxStep
-        v-else-if="currentField.type === 'checkbox' && currentField.options?.length"
+      <MultiSelectStep
+        v-else-if="currentField.type === 'multiple'"
         v-model="values[currentField.uuid]"
         :field="currentField"
       />
-      <div v-else-if="['radio', 'checkbox'].includes(currentField.type)">
-        <div class="flex justify-center">
-          <label
-            :for="currentField.uuid"
-            class="flex items-center space-x-3"
+      <div
+        v-else-if="currentField.type === 'checkbox'"
+        class="flex w-full"
+      >
+        <div
+          class="space-y-3.5 mx-auto"
+        >
+          <div
+            v-for="(field, index) in currentStepFields"
+            :key="field.uuid"
           >
-            <input
-              :id="currentField.uuid"
-              :model-value="values[currentField.uuid]"
-              :type="currentField.type"
-              :name="`values[${currentField.uuid}]`"
-              :value="true"
-              class="!h-7 !w-7"
-              :class="{'base-radio' : currentField.type === 'radio', 'base-checkbox': currentField.type === 'checkbox'}"
-              :checked="!!values[currentField.uuid]"
-              @click="values[currentField.uuid] = !values[currentField.uuid]"
+            <label
+              :for="field.uuid"
+              class="flex items-center space-x-3"
             >
-            <span class="text-xl">
-              {{ currentField.name || currentField.type }}
-            </span>
-          </label>
+              <input
+                :id="field.uuid"
+                type="checkbox"
+                :name="`values[${field.uuid}]`"
+                :value="false"
+                class="base-checkbox !h-7 !w-7"
+                :checked="!!values[field.uuid]"
+                @click="values[field.uuid] = !values[field.uuid]"
+              >
+              <span class="text-xl">
+                {{ currentField.name || currentField.type + ' ' + (index + 1) }}
+              </span>
+            </label>
+          </div>
         </div>
       </div>
       <ImageStep
@@ -199,12 +210,12 @@
     <div class="flex justify-center">
       <div class="flex items-center mt-5 mb-1">
         <a
-          v-for="(field, index) in submitterFields"
-          :key="field.uuid"
+          v-for="(step, index) in stepFields"
+          :key="step[0].uuid"
           href="#"
           class="inline border border-base-300 h-3 w-3 rounded-full mx-1"
           :class="{ 'bg-base-200': index === currentStep, 'bg-base-content': index < currentStep, 'bg-white': index > currentStep }"
-          @click.prevent="goToField(field, true)"
+          @click.prevent="goToStep(step, true)"
         />
       </div>
     </div>
@@ -220,7 +231,7 @@ import FieldAreas from './areas'
 import ImageStep from './image_step'
 import SignatureStep from './signature_step'
 import AttachmentStep from './attachment_step'
-import CheckboxStep from './checkbox_step'
+import MultiSelectStep from './multi_select_step'
 import FormCompleted from './completed'
 
 export default {
@@ -230,7 +241,7 @@ export default {
     ImageStep,
     SignatureStep,
     AttachmentStep,
-    CheckboxStep,
+    MultiSelectStep,
     FormCompleted
   },
   props: {
@@ -270,12 +281,28 @@ export default {
     }
   },
   computed: {
+    currentStepFields () {
+      return this.stepFields[this.currentStep]
+    },
     currentField () {
-      return this.submitterFields[this.currentStep]
+      return this.currentStepFields[0]
     },
     submitterFields () {
       return this.fields.filter((f) => f.submitter_uuid === this.submitterUuid)
     },
+    stepFields () {
+      return this.submitterFields.reduce((acc, f) => {
+        const prevStep = acc[acc.length - 1]
+
+        if (f.type === 'checkbox' && Array.isArray(prevStep) && prevStep[0].type === 'checkbox') {
+          prevStep.push(f)
+        } else {
+          acc.push([f])
+        }
+
+        return acc
+      }, [])
+    },
     attachmentsIndex () {
       return this.attachments.reduce((acc, a) => {
         acc[a.uuid] = a
@@ -289,17 +316,17 @@ export default {
   },
   mounted () {
     this.currentStep = Math.min(
-      this.submitterFields.indexOf([...this.submitterFields].reverse().find((field) => !!this.values[field.uuid])) + 1,
-      this.submitterFields.length - 1
+      this.stepFields.indexOf([...this.stepFields].reverse().find((fields) => fields.some((f) => !!this.values[f.uuid]))) + 1,
+      this.stepFields.length - 1
     )
   },
   methods: {
-    goToField (field, scrollToArea = false, clickUpload = false) {
-      this.currentStep = this.submitterFields.indexOf(field)
+    goToStep (step, scrollToArea = false, clickUpload = false) {
+      this.currentStep = this.stepFields.indexOf(step)
 
       this.$nextTick(() => {
         if (scrollToArea) {
-          this.$refs.areas.scrollIntoField(field)
+          this.$refs.areas.scrollIntoField(step[0])
         }
 
         this.$refs.form.querySelector('input[type="date"], input[type="text"], select')?.focus()
@@ -322,10 +349,10 @@ export default {
         method: 'POST',
         body: new FormData(this.$refs.form)
       }).then(response => {
-        const nextField = this.submitterFields[this.currentStep + 1]
+        const nextStep = this.stepFields[this.currentStep + 1]
 
-        if (nextField) {
-          this.goToField(this.submitterFields[this.currentStep + 1], true)
+        if (nextStep) {
+          this.goToStep(this.stepFields[this.currentStep + 1], true)
         } else {
           this.isCompleted = true
         }