https://sau.edu/media/developer-assets/js/application/ApplicationFilter.js

1// Test
2
3class ApplicationFilter {
4  delimiter = '/'; // separates multiple app cards in the concentration dropdown value
5  cards = []; // application cards
6  sauCard = null;
7  selectDegree = null;
8  selectSemester = null;
9  checkboxIsTransfer = false; // true removes common
10  selectedValues = {};
11
12  // below could be passed in by t4
13  // applicationTypes = ['sau', 'commons', 'caspa', 'csdcas', 'sophas', 'otcas', 'ptcsa'];
14  semesters = ['spring', 'summer', 'fall'];
15  ctaEndpoints = {
16    sau: 'https://admit.sau.edu/apply/',
17    ellucian: 'https://sau.elluciancrmrecruit.com/Apply/Account/Login',
18  };
19
20  constructor(el) {
21    this.root = el;
22
23    this.onSubmit = this.onSubmit.bind(this);
24    this.handleIsTransfer = this.handleIsTransfer.bind(this);
25    this.handleDegreeChange = this.handleDegreeChange.bind(this);
26    this.handleSemesterChange = this.handleSemesterChange.bind(this);
27    this.handleConcentrationChange = this.handleConcentrationChange.bind(this);
28
29    this.init();
30  }
31
32  filter() {
33    const ids = this.selectedValues.concentration.split(this.delimiter);
34
35    this.cards.forEach(card => {
36      const id = card.dataset.applicationType;
37
38      if (ids.includes(id)) {
39        card.style.display = 'block';
40      } else {
41        card.style.display = 'none';
42      }
43
44      if (this.isTransfer === true && id === 'commons') {
45        card.style.display = 'none';
46      }
47    });
48  }
49
50  hasCommonsApplication() {
51    this.getFormValues();
52    return this.selectedValues.concentration.split(this.delimiter).includes('commons');
53  }
54
55  getFormValues() {
56    this.selectedValues = {
57      degree: this.selectDegree.value,
58      concentration: this.concentrationDropdowns
59        .filter(dd => dd.id === `dropdown-${this.selectDegree.value}`)
60        .map(dd => dd.querySelector('.select-dropdown__value').value)[0],
61      semester: this.selectSemester.value,
62    };
63
64    this.isTransfer = this.checkboxIsTransfer.checked;
65  }
66
67  hideAllItems() {
68    this.cards.forEach(c => (c.style.display = 'none'));
69  }
70
71  validate({ hideErrorMessage } = { hideErrorMessage: false }) {
72    const isError = Object.values(this.selectedValues).some(v => !v);
73
74    if (!hideErrorMessage) {
75      this.errorMessage.style.display = isError ? 'block' : 'none';
76    }
77
78    return !isError;
79  }
80
81  onSubmit(e) {
82    e.preventDefault();
83    this.getFormValues();
84
85    if (!this.validate()) {
86      this.hideAllItems();
87      return;
88    }
89
90    this.filter();
91  }
92
93  handleDegreeChange(e) {
94    var val = e.target.value;
95
96    this.concentrationDropdowns.forEach(el => {
97      el.style.display = el.id === `dropdown-${val || 'bachelors'}` ? 'block' : 'none';
98      el.querySelector('.select-dropdown__selected-option').value = 'Select One...';
99      el.querySelector('.select-dropdown__value').value = '';
100    });
101
102    this.hideAllItems();
103  }
104
105  handleConcentrationChange(e) {
106    this.hideAllItems();
107  }
108
109  handleSemesterChange(e) {
110    let href = '';
111    const [semester, year] = e.target.value.split('/');
112
113    if (!year) {
114      return;
115    }
116
117    if (Number(year) < 2025) {
118      href = this.ctaEndpoints.ellucian;
119    } else if (Number(year) === 2025) {
120      href = this.semesters.indexOf(semester) === 0 ? this.ctaEndpoints.ellucian : this.ctaEndpoints.sau;
121    } else if (Number(year) > 2025) {
122      href = this.this.ctaEndpoints.sau;
123    }
124
125    const el = this.sauCard.querySelector('.card__cta');
126    if (el) el.href = href;
127  }
128
129  handleIsTransfer() {
130    if (!this.validate({ hideErrorMessage: true }) || !this.hasCommonsApplication()) {
131      return;
132    }
133
134    const el = this.root.querySelector('[data-application-type="commons"]');
135    el.style.display = this.checkboxIsTransfer.checked === true ? 'none' : 'block';
136  }
137
138  init() {
139    this.cards = [...this.root.querySelectorAll('.card--application')];
140    this.sauCard = this.root.querySelector('.card--sau');
141    this.concentrationDropdowns = [...this.root.querySelectorAll('.select-dropdown-container')];
142
143    this.form = this.root.querySelector('form');
144    this.selectDegree = document.getElementById('select-degree');
145    this.selectSemester = document.getElementById('select-semester');
146    this.selectConcentrations = document.querySelectorAll('.select-dropdown__value');
147    this.checkboxIsTransfer = document.getElementById('checkbox-is-transfer');
148    this.errorMessage = this.root.querySelector('.error-message');
149
150    this.form.addEventListener('submit', this.onSubmit);
151    this.selectDegree.addEventListener('change', this.handleDegreeChange);
152    this.selectSemester.addEventListener('change', this.handleSemesterChange);

153    [...this.selectConcentrations].forEach(el => {
154      el.addEventListener('change', this.handleConcentrationChange);
155    });
156    this.checkboxIsTransfer.addEventListener('change', this.handleIsTransfer);
157  }
158
159  destroy() {
160    this.form.removeEventListener('submit', this.onSubmit);
161    this.selectDegree.removeEventListener('change', this.handleDegreeChange);
162    this.selectSemester.removeEventListener('change', this.handleSemesterChange);
163    this.checkboxIsTransfer.removeEventListener('change', this.handleIsTransfer);
164    [...this.selectConcentrations].forEach(el => {
165      el.removeEventListener('change', this.handleConcentrationChange);
166    });
167  }
168}
169
170(function () {
171  const el = document.getElementById('application-filter');
172  el && registerGlobalModule('applicationFilter', new ApplicationFilter(el));
173})();