add required fields prop

app/javascript/template_builder/area.vue

@@ -68,7 +68,7 @@
         @keydown.enter.prevent="onNameEnter"
         @focus="onNameFocus"
         @blur="onNameBlur"
-      >{{ optionIndexText }} {{ field.name || defaultName }}</span>
+      >{{ optionIndexText }} {{ (defaultField ? (field.title || field.name) : field.name) || defaultName }}</span>
       <div
         v-if="isNameFocus && !['checkbox', 'phone'].includes(field.type)"
         class="flex items-center ml-1.5"

app/javascript/template_builder/builder.vue

@@ -37,7 +37,7 @@
             class="btn btn-primary btn-ghost text-base hidden md:flex"
             :target="template.submitters.length > 1 ? '' : '_blank'"
             :data-turbo-frame="template.submitters.length > 1 ? 'modal' : ''"
-            @click="maybeShowEmptyTemplateAlert"
+            @click="maybeShowErrorTemplateAlert"
           >
             <IconWritingSign
               width="22"
@@ -51,7 +51,7 @@
             :href="`/templates/${template.id}/submissions/new?with_link=true`"
             data-turbo-frame="modal"
             class="white-button md:!px-6"
-            @click="maybeShowEmptyTemplateAlert"
+            @click="maybeShowErrorTemplateAlert"
           >
             <IconUsersPlus
               width="20"
@@ -159,7 +159,7 @@
                 :selected-submitter="selectedSubmitter"
                 :document="document"
                 :is-drag="!!dragField"
-                :default-fields="defaultFields"
+                :default-fields="[...defaultRequiredFields, ...defaultFields]"
                 :allow-draw="!onlyDefinedFields"
                 :default-submitters="defaultSubmitters"
                 :draw-field="drawField"
@@ -242,7 +242,8 @@
             :with-help="withHelp"
             :default-submitters="defaultSubmitters"
             :draw-field-type="drawFieldType"
-            :default-fields="defaultFields"
+            :default-fields="[...defaultRequiredFields, ...defaultFields]"
+            :default-required-fields="defaultRequiredFields"
             :field-types="fieldTypes"
             :with-sticky-submitters="withStickySubmitters"
             :only-defined-fields="onlyDefinedFields"
@@ -273,7 +274,7 @@
       <MobileFields
         v-if="sortedDocuments.length && !drawField && editable"
         :fields="template.fields"
-        :default-fields="defaultFields"
+        :default-fields="[...defaultRequiredFields, ...defaultFields]"
         :field-types="fieldTypes"
         :selected-submitter="selectedSubmitter"
         @select="startFieldDraw($event)"
@@ -371,6 +372,11 @@ export default {
       required: false,
       default: () => []
     },
+    defaultRequiredFields: {
+      type: Array,
+      required: false,
+      default: () => []
+    },
     withSelectedFieldType: {
       type: Boolean,
       required: false,
@@ -425,6 +431,13 @@ export default {
         return () => {}
       }
     },
+    onChange: {
+      type: Function,
+      required: false,
+      default () {
+        return () => {}
+      }
+    },
     withStickySubmitters: {
       type: Boolean,
       required: false,
@@ -522,6 +535,11 @@ export default {
 
       return areas
     },
+    isAllRequiredFieldsAdded () {
+      return !this.defaultRequiredFields?.some((f) => {
+        return !this.template.fields?.some((field) => field.name === f.name)
+      })
+    },
     selectedField () {
       return this.template.fields.find((f) => f.areas?.includes(this.selectedAreaRef.value))
     },
@@ -1093,7 +1111,13 @@ export default {
 
       this.save()
     },
-    maybeShowEmptyTemplateAlert (e) {
+    maybeShowErrorTemplateAlert (e) {
+      if (!this.isAllRequiredFieldsAdded) {
+        e.preventDefault()
+
+        return alert(this.t('add_all_required_fields_to_continue'))
+      }
+
       if (!this.template.fields.length) {
         e.preventDefault()
 
@@ -1101,6 +1125,10 @@ export default {
       }
     },
     onSaveClick () {
+      if (!this.isAllRequiredFieldsAdded) {
+        return alert(this.t('add_all_required_fields_to_continue'))
+      }
+
       if (this.template.fields.length) {
         this.isSaving = true
 
@@ -1131,6 +1159,10 @@ export default {
       })
     },
     save ({ force } = { force: false }) {
+      if (this.onChange) {
+        this.onChange(this.template)
+      }
+
       if (!this.autosave && !force) {
         return Promise.resolve({})
       }

app/javascript/template_builder/description_modal.vue

@@ -34,6 +34,7 @@
                 v-model="description"
                 dir="auto"
                 class="base-textarea !text-base w-full"
+                :readonly="!editable"
                 @input="resizeTextarea"
               />
             </div>
@@ -49,6 +50,7 @@
                 id="title_field"
                 v-model="title"
                 dir="auto"
+                :readonly="!editable"
                 class="base-input !text-base w-full"
               >
             </div>
@@ -73,6 +75,11 @@ export default {
       type: Object,
       required: true
     },
+    editable: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
     buildDefaultName: {
       type: Function,
       required: true

app/javascript/template_builder/field.vue

@@ -21,7 +21,7 @@
           />
           <Contenteditable
             ref="name"
-            :model-value="field.name || defaultName"
+            :model-value="(defaultField ? (field.title || field.name) : field.name) || defaultName"
             :editable="editable && !defaultField"
             :icon-inline="true"
             :icon-width="18"
@@ -235,6 +235,7 @@
                   <input
                     v-model="field.required"
                     type="checkbox"
+                    :disabled="!editable || defaultField"
                     class="toggle toggle-xs"
                     @update:model-value="save"
                   >
@@ -481,6 +482,7 @@
     >
       <FormulaModal
         :field="field"
+        :editable="editable && !defaultField"
         :build-default-name="buildDefaultName"
         @close="isShowFormulaModal = false"
       />
@@ -501,6 +503,7 @@
     >
       <DescriptionModal
         :field="field"
+        :editable="editable && !defaultField"
         :build-default-name="buildDefaultName"
         @close="isShowDescriptionModal = false"
       />

app/javascript/template_builder/fields.vue

@@ -86,9 +86,16 @@
                 :button-width="20"
               />
               <span class="block pl-0.5">
-                {{ field.name }}
+                {{ field.title || field.name }}
               </span>
             </div>
+            <span
+              v-if="defaultRequiredFields.includes(field)"
+              :data-tip="t('required')"
+              class="text-red-400 text-3xl pr-1.5 tooltip tooltip-left h-8"
+            >
+              *
+            </span>
           </div>
         </div>
       </template>
@@ -210,6 +217,11 @@ export default {
       required: false,
       default: () => []
     },
+    defaultRequiredFields: {
+      type: Array,
+      required: false,
+      default: () => []
+    },
     onlyDefinedFields: {
       type: Boolean,
       required: false,

app/javascript/template_builder/formula_modal.vue

@@ -49,6 +49,7 @@
               ref="textarea"
               v-model="formula"
               class="base-textarea !rounded-xl !text-base font-mono w-full !outline-0 !ring-0 !px-3"
+              :readonly="!editable"
               required="true"
               @input="resizeTextarea"
             />
@@ -134,6 +135,11 @@ export default {
       type: Object,
       required: true
     },
+    editable: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
     buildDefaultName: {
       type: Function,
       required: true

app/javascript/template_builder/i18n.js

@@ -3,6 +3,7 @@ const en = {
   field_not_found: 'Field not found',
   clear: 'Clear',
   align: 'Align',
+  add_all_required_fields_to_continue: 'Add all required fields to continue',
   left: 'Left',
   right: 'Right',
   center: 'Center',