feature-8784:Add type year drop down custom from field (#8796)

* feature-8784:Add type year drop down custom from field

* feature-8784: Update code Add type year drop down custom from field

* feature-8784: Add type year drop down custom from field

* feature-8784:Add type year drop down custom from field

* feature-8784:Add type year drop down custom from field

* feature-8784: Change start year in dropdown list

---------

Co-authored-by: cweitat <[email protected]>

Author: khangon

app/components/forms/orders/order-form.js

@@ -13,7 +13,7 @@ import {
 import { genders } from 'open-event-frontend/utils/dictionary/genders';
 import { ageGroups } from 'open-event-frontend/utils/dictionary/age-groups';
 import { countries } from 'open-event-frontend/utils/dictionary/demography';
-
+import { years } from 'open-event-frontend/utils/dictionary/year-list';
 
 export default Component.extend(FormMixin, {
   router             : service(),
@@ -593,6 +593,7 @@ export default Component.extend(FormMixin, {
   genders   : orderBy(genders, 'name'),
   ageGroups : orderBy(ageGroups, 'age'),
   countries : orderBy(countries, 'name'),
+  years     : orderBy(years, 'year'),
 
   actions: {
     submit(data) {

app/components/forms/wizard/custom-form-input.hbs

@@ -32,6 +32,7 @@
       <div class="item" data-value="text">{{t "Short Answer"}}</div>
       <div class="item" data-value="paragraph">{{t "Paragraph"}}</div>
       <div class="item" data-value="number">{{t "Number"}}</div>
+      <div class="item" data-value="year">{{t "Year"}}</div>
       <div class="item" data-value="boolean">{{t "Yes/No"}}</div>
       <div class="item" data-value="richtextlink">{{t "Rich Text Links"}}</div>
     </div>

app/templates/components/forms/orders/order-form.hbs

@@ -198,6 +198,26 @@
                     @name={{if field.isRequired (concat field.fieldIdentifier "_required_" index) (concat field.fieldIdentifier "_" index)}}       
                     @onChange={{action (mut holder.acceptVideoRecording)}}/> 
                 {{/if}}
+                {{#if (eq field.type 'year')}}
+                  <UiDropdown
+                    @class="search selection"
+                    @selected={{mut (get holder field.identifier)}}
+                    @onChange={{action (mut holder.year)}}>
+                    <Input
+                      @type="hidden"
+                      @value={{get holder field.identifierPath}}
+                      @name={{if field.isRequired (concat field.fieldIdentifier "_required_" index) (concat field.fieldIdentifier "_" index)}} />
+                    <i class="dropdown icon"></i>
+                    <div class="default text">{{t 'Select your year'}}</div>
+                    <div class="menu">
+                      {{#each this.years as |years|}}
+                        <div class="item" data-value="{{@years.year}}">
+                          {{years.year}}
+                        </div>
+                      {{/each}}
+                    </div>
+                  </UiDropdown>
+                {{/if}}
               </div>
             {{/if}}
           {{/if}}

app/utils/dictionary/year-list.ts

@@ -0,0 +1,11 @@
+let year: number = new Date().getFullYear();
+const earliestYear = 1930;
+const dateDropdown = [];
+while (year >= earliestYear) {
+  const data = {
+    year
+  }
+  dateDropdown.push(data)
+  year -= 1;
+}
+export const years = dateDropdown;