enh: Gender as Dropdown in Attendee Form (#3180)

* Gender as Dropdown in Attendee Form

* Update order-form.hbs

Author: kushthedude

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

@@ -11,6 +11,7 @@ import {
   compulsoryProtocolValidUrlPattern, validTwitterProfileUrlPattern, validFacebookProfileUrlPattern,
   validGithubProfileUrlPattern
 } from 'open-event-frontend/utils/validators';
+import { genders } from 'open-event-frontend/utils/dictionary/genders';
 
 export default Component.extend(FormMixin, {
   router: service(),
@@ -466,6 +467,8 @@ export default Component.extend(FormMixin, {
     return orderBy(countries, 'name');
   }),
 
+  genders: orderBy(genders, 'name'),
+
   actions: {
     submit(data) {
       this.onValid(() => {

app/mixins/custom-form.js

@@ -286,7 +286,7 @@ export default Mixin.create(MutableArray, {
       this.store.createRecord('custom-form', {
         fieldIdentifier : 'gender',
         form            : 'attendee',
-        type            : 'text',
+        type            : 'select',
         isRequired      : false,
         isIncluded      : false,
         event           : parent

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

@@ -47,7 +47,7 @@
           <i class="user icon"></i>
           <label>{{t 'Ticket Holder '}}{{inc index}}{{t ' -for- '}}{{holder.ticket.name}}</label>
         </div>
-        {{# each allFields.attendee as |field|}}
+        {{#each allFields.attendee as |field|}}
           {{#if field.isIncluded}}
             <div class="field {{if
               (and sameAsBuyer (eq index 0) (or (eq field.fieldIdentifier 'firstname') (eq field.fieldIdentifier 'lastname') (eq field.fieldIdentifier 'email')))
@@ -57,9 +57,22 @@
                 {{#if field.isLongText}}
                   {{widgets/forms/rich-text-editor value=(mut (get holder field.fieldIdentifier))
                                                    name=(if field.isRequired (concat field.fieldIdentifier '_required_' index) (concat field.fieldIdentifier '_' index))}}
+                {{else if (eq field.fieldIdentifier 'gender')}}
+                  {{#ui-dropdown class='search selection' value=(mut (get holder field.fieldIdentifier)) onChange=(action (mut holder.gender)) as |execute mapper|}}
+                    <i class="dropdown icon"></i>
+                    <div class="default text">{{t 'Select your gender'}}</div>
+                    <div class="menu">
+                      {{#each genders as |gender|}}
+                        <div class="item" data-value="{{map-value mapper gender.name}}">
+                          {{gender.name}}
+                        </div>
+                      {{/each}}
+                    </div>
+                  {{/ui-dropdown}}
                 {{else}}
                   {{input type=field.type value=(mut (get holder field.fieldIdentifier))
                           name=(if field.isRequired (concat field.fieldIdentifier '_required_' index) (concat field.fieldIdentifier '_' index))}}
+
                 {{/if}}
               {{/if}}
             </div>