CP-10360 - Add prefill dropdown

- Add available_ats_fields to template edit response payload
- Implement ATS field dropdown in field settings component
- Add prefill attribute to template fields for ATS integration
- Format ATS field names for user-friendly display in dropdown

app/controllers/templates_controller.rb

@@ -49,7 +49,8 @@ class TemplatesController < ApplicationController
         documents: @template.schema_documents.as_json(
           methods: %i[metadata signed_uuid],
           include: { preview_images: { methods: %i[url metadata filename] } }
-        )
+        ),
+        available_ats_fields: @available_ats_fields
       ).to_json
 
     render :edit, layout: 'plain'
@@ -129,7 +130,7 @@ class TemplatesController < ApplicationController
         external_data_fields: {},
         fields: [[:uuid, :question_id, :submitter_uuid, :name, :type,
                   :required, :readonly, :default_value,
-                  :title, :description,
+                  :title, :description, :prefill,
                   { preferences: {},
                     conditions: [%i[field_uuid value action operation]],
                     options: [%i[value uuid answer_id]],

app/javascript/template_builder/field_settings.vue

@@ -255,6 +255,40 @@
       {{ t('format') }}
     </label>
   </div>
+  <div
+    v-if="availableAtsFields && availableAtsFields.length > 0"
+    class="py-1.5 px-1 relative"
+    @click.stop
+  >
+    <select
+      :placeholder="t('ats_field')"
+      class="select select-bordered select-xs font-normal w-full max-w-xs !h-7 !outline-0 bg-transparent"
+      data-testid="ats-fields-dropdown"
+      @change="[field.prefill = $event.target.value || undefined, !field.prefill && delete field.prefill, save()]"
+    >
+      <option
+        value=""
+        :selected="!field.prefill"
+      >
+        {{ '' }}
+      </option>
+      <option
+        v-for="atsField in availableAtsFields"
+        :key="atsField"
+        :value="atsField"
+        :selected="field.prefill === atsField"
+      >
+        {{ formatAtsFieldName(atsField) }}
+      </option>
+    </select>
+    <label
+      :style="{ backgroundColor }"
+      class="absolute -top-1 left-2.5 px-1 h-4"
+      style="font-size: 8px"
+    >
+      {{ t('ats_field') }}
+    </label>
+  </div>
   <li
     v-if="withRequired && field.type !== 'phone' && field.type !== 'stamp' && field.type !== 'verification'"
     @click.stop
@@ -492,6 +526,15 @@ export default {
     }
   },
   computed: {
+    availableAtsFields () {
+      return this.template.available_ats_fields || []
+    },
+    availableAtsFieldsForType () {
+      if (!this.template.ats_fields_by_type || !this.field.type) {
+        return []
+      }
+      return this.template.ats_fields_by_type[this.field.type] || []
+    },
     schemaAttachmentsIndexes () {
       return (this.template.schema || []).reduce((acc, item, index) => {
         acc[item.attachment_uuid] = index
@@ -551,6 +594,13 @@ export default {
     }
   },
   methods: {
+    formatAtsFieldName (fieldName) {
+      // Convert snake_case to Title Case for display
+      return fieldName
+        .split('_')
+        .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+        .join(' ')
+    },
     onChangeValidation (event) {
       if (event.target.value === 'custom') {
         this.field.validation = { pattern: '' }