https://careers.adairs.com.au/assets/sites/controllers/call_to_action/form_controller-b1f2d6d1.js

1import BaseController from 'common/controllers/base_controller'
2import {UrlUtils} from 'sites/url_utils'
3
4export default class extends BaseController {
5  static targets = ['callToActionContainer', 'createSection', 'verifySection', 'form', 'formHp', 'submitButton', 'requiredCheckboxSet']
6  static values = {uid: String, kind: String}
7
8  connect() {
9    this.markConnected()
10  }
11
12  // This code is executed when the Turbo Stream renders the verification form.
13  verifySectionTargetConnected(element) {
14    const input = element.querySelector('form input.form-control')
15    if (input) {
16      input.focus()
17    }
18  }
19
20  submitVerifyStart(event) {
21    this.changeSubmitButtonState(event.detail.formSubmission.formElement, 'in-progress')
22  }
23
24  submitVerifyEnd(event) {
25    const form = event.detail.formSubmission.formElement
26    if (event.detail.success) {
27      this.changeSubmitButtonState(form, 'finished')
28    } else {
29      this.changeSubmitButtonState(form, 'start')
30      form.querySelector('input.form-control').classList.add('error')
31    }
32  }
33
34  toggleCandidateReferrals(e) {
35    e.preventDefault()
36    const referralFieldDiv = e.target.closest('.form-template-field-candidate-referral').querySelector('.candidate-referral-fields');
37    referralFieldDiv.classList.toggle('d-none');
38    const inputFields = referralFieldDiv.querySelectorAll('input.form-control');
39    const hidden = referralFieldDiv.classList.contains('d-none');
40    for (let inputField of inputFields) {
41      inputField.required = !hidden;
42      inputField.disabled = hidden;
43    }
44  }
45
46  changeSubmitButtonState(container, state) {
47    for (const submitState of container.querySelectorAll('.submit-state')) {
48      submitState.style.display = 'none'
49    }
50    container.querySelector(`.submit-${state}`).style.display = 'block'
51  }
52
53  sendFormSubmission(e) {
54    this.handleRequiredCheckboxSetValidation()
55    if (!this.formTarget.reportValidity()) {
56      e.preventDefault()
57    }
58  }
59
60  submitFormStart(event) {
61    this.submitButtonTarget.disabled = true
62    this.formHpTarget.disabled = true
63    this.changeSubmitButtonState(this.formTarget, 'in-progress')
64  }
65
66  submitFormEnd(event) {
67    const form = event.detail.formSubmission.formElement
68    if (event.detail.success) {
69      this.changeSubmitButtonState(form, 'finished')
70      this.submitButtonTarget.classList.add('btn-success')
71    } else {
72      // In the event that something goes wrong, show this error message
73      const errorHtml = `
74       <turbo-stream action="update" targets="#${this.callToActionContainerTarget.id} .call-to-action-create .errors">
75          <template>
76            <div class="error-explanation" data-controller="focus">
77              <h6>${js_vars.i18n.form_error}</h6>
78          </div>        
79         </template>   
80       </turbo-stream>`
81      Turbo.renderStreamMessage(errorHtml)
82      this.changeSubmitButtonState(form, 'start')
83    }
84    this.submitButtonTarget.disabled = false
85  }
86
87  handleRequiredCheckboxSetValidation() {
88    for (const requiredCheckboxSet of this.requiredCheckboxSetTargets) {
89      const checkboxes = Array.from(requiredCheckboxSet.querySelectorAll("input[type='checkbox']"))
90      if (checkboxes.length > 0) {
91        for (const checkbox of checkboxes) { //reset
92          checkbox.required = false
93          if (checkbox.dataset.invalidityMessage) {
94            checkbox.setCustomValidity('')
95          }
96        }
97        if (checkboxes.every((checkbox) => !checkbox.checked)) {
98          const firstCheckbox = checkboxes[0]
99          firstCheckbox.required = true
100          if (firstCheckbox.dataset.invalidityMessage) {
101            firstCheckbox.setCustomValidity(firstCheckbox.dataset.invalidityMessage)
102          }
103        }
104      }
105    }
106  }
107}