add cell field type

app/javascript/submission_form/area.vue

@@ -82,6 +82,19 @@
         :class="{ '!w-auto !h-full': area.w > area.h, '!w-full !h-auto': area.w <= area.h }"
       />
     </div>
+    <div
+      v-else-if="field.type === 'cells'"
+      class="w-full flex items-center"
+    >
+      <div
+        v-for="(char, index) in modelValue"
+        :key="index"
+        class="text-center flex-none"
+        :style="{ width: (area.cell_w / area.w * 100) + '%' }"
+      >
+        {{ char }}
+      </div>
+    </div>
     <div
       v-else
       class="flex items-center px-0.5"
@@ -100,7 +113,7 @@
 </template>
 
 <script>
-import { IconTextSize, IconWritingSign, IconCalendarEvent, IconPhoto, IconCheckbox, IconPaperclip, IconSelect, IconCircleDot, IconChecks, IconCheck } from '@tabler/icons-vue'
+import { IconTextSize, IconWritingSign, IconCalendarEvent, IconPhoto, IconCheckbox, IconPaperclip, IconSelect, IconCircleDot, IconChecks, IconCheck, IconColumns3 } from '@tabler/icons-vue'
 
 export default {
   name: 'FieldArea',
@@ -153,6 +166,7 @@ export default {
     fieldNames () {
       return {
         text: 'Text',
+        cells: 'Text',
         signature: 'Signature',
         date: 'Date',
         image: 'Image',
@@ -173,6 +187,7 @@ export default {
         select: IconSelect,
         checkbox: IconCheckbox,
         radio: IconCircleDot,
+        cells: IconColumns3,
         multiple: IconChecks
       }
     },

app/javascript/submission_form/form.vue

@@ -33,7 +33,7 @@
         type="hidden"
       >
       <div class="mt-4">
-        <div v-if="currentField.type === 'text'">
+        <div v-if="['cells', 'text'].includes(currentField.type)">
           <label
             v-if="currentField.name"
             :for="currentField.uuid"
@@ -369,10 +369,14 @@ export default {
       })
     },
     saveStep () {
-      return fetch(this.submitPath, {
-        method: 'POST',
-        body: new FormData(this.$refs.form)
-      })
+      if (this.isCompleted) {
+        return Promise.resolve({})
+      } else {
+        return fetch(this.submitPath, {
+          method: 'POST',
+          body: new FormData(this.$refs.form)
+        })
+      }
     },
     async submitStep () {
       this.isSubmitting = true