improve checkboxes form

app/javascript/elements/turbo_modal.js

@@ -13,7 +13,7 @@ export default actionable(class extends HTMLElement {
     document.body.classList.remove('overflow-hidden')
 
     document.removeEventListener('keyup', this.onEscKey)
-    document.removeEventListener('turbo:submit-end', this.handleSubmit)
+    document.removeEventListener('turbo:submit-end', this.onSubmit)
     document.removeEventListener('turbo:before-cache', this.close)
   }
 

app/javascript/submission_form/area.vue

@@ -21,7 +21,7 @@
       </span>
     </div>
     <div
-      v-if="isActive"
+      v-if="isActive && withLabel"
       class="absolute -top-7 rounded bg-base-content text-base-100 px-2 text-sm whitespace-nowrap"
     >
       {{ field.name || fieldNames[field.type] }}
@@ -146,6 +146,11 @@ export default {
       required: false,
       default: false
     },
+    withLabel: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
     fieldIndex: {
       type: Number,
       required: false,

app/javascript/submission_form/areas.vue

@@ -22,6 +22,7 @@
             :submittable="true"
             :field-index="fieldIndex"
             :is-active="currentStep === step"
+            :with-label="withLabel"
             :is-value-set="step.some((f) => f.uuid in values)"
             :attachments-index="attachmentsIndex"
             @click="$emit('focus-step', step)"
@@ -56,6 +57,11 @@ export default {
       required: false,
       default: () => ({})
     },
+    withLabel: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
     currentStep: {
       type: Array,
       required: false,

app/javascript/submission_form/form.vue

@@ -4,6 +4,7 @@
     :steps="stepFields"
     :values="values"
     :attachments-index="attachmentsIndex"
+    :with-label="!isAnonymousChecboxes"
     :current-step="currentStepFields"
     @focus-step="[saveStep(), goToStep($event, false, true), currentField.type !== 'checkbox' ? isFormVisible = true : '']"
   />
@@ -182,7 +183,7 @@
           />
           <div
             v-else-if="currentField.type === 'checkbox'"
-            class="flex w-full"
+            class="flex w-full max-h-44 overflow-y-auto"
           >
             <input
               type="hidden"
@@ -192,6 +193,10 @@
             <div
               class="space-y-3.5 mx-auto"
             >
+              <template v-if="isAnonymousChecboxes">
+                Complete hightlighted checkboxes and click <span class="font-semibold">{{ stepFields.length === currentStep + 1 ? 'submit' : 'next' }}</span>.
+              </template>
+              <template v-else>
                 <div
                   v-for="(field, index) in currentStepFields"
                   :key="field.uuid"
@@ -217,6 +222,7 @@
                     </span>
                   </label>
                 </div>
+              </template>
             </div>
           </div>
           <ImageStep
@@ -374,6 +380,9 @@ export default {
     currentStepFields () {
       return this.stepFields[this.currentStep]
     },
+    isAnonymousChecboxes () {
+      return this.currentField.type === 'checkbox' && this.currentStepFields.every((e) => !e.name) && this.currentStepFields.length > 4
+    },
     isButtonDisabled () {
       return this.isSubmitting ||
         (this.currentField.required && ['image', 'file'].includes(this.currentField.type) && !this.values[this.currentField.uuid]?.length) ||