feat #8842: changed the attendee gender options (#8874)

Bekka592 · Rebekka Rossberg · cweitat · web-flow · commit 28ba17ff7307 · 2023-06-30T08:34:34.000+02:00
* feat #8842: changed the attendee gender options * remove "Open" as option --------- Co-authored-by: Rebekka Rossberg <rebekka.rossberg@uni-ulm.de> Co-authored-by: cweitat <cweitat@gmail.com>
diff --git a/app/components/forms/orders/order-form.js b/app/components/forms/orders/order-form.js
@@ -117,7 +117,7 @@ export default Component.extend(FormMixin, {
       rules: [
         {
           type   : 'empty',
-          prompt : this.l10n.t('Please select a gender.')
+          prompt : this.l10n.t('Please select categories that describe your gender identity.')
         }
       ]
     };
@@ -661,7 +661,7 @@ export default Component.extend(FormMixin, {
     return groupBy(requiredFixed.concat(customFields), field => field.get('form'));
   }),
 
-  genders         : orderBy(genders, 'name'),
+  genders         : orderBy(genders, 'position'),
   ageGroups       : orderBy(ageGroups, 'position'),
   countries       : orderBy(countries, 'name'),
   years           : orderBy(years, 'year'),
@@ -700,6 +700,9 @@ export default Component.extend(FormMixin, {
     },
     updateLanguageFormsSelection(checked, changed, selectedOptions, holder, field) {
       holder.set(field.fieldIdentifier, selectedOptions.map(select => select.value).join(','));
+    },
+    updateGendersSelection(checked, changed, selectedOptions, entity, field) {
+      entity.set(field.fieldIdentifier, selectedOptions.map(select => select.value).join(','));
     }
   }
 });
diff --git a/app/components/widgets/forms/ui-checkbox-group.js b/app/components/widgets/forms/ui-checkbox-group.js
@@ -56,7 +56,7 @@ export default class UiCheckboxGroupComponent extends Component {
     for (let i = 0; i < this.args.options.length; i++) {
       const item = this.args.options[i];
       const label = item.name;
-      const value = item.code;
+      const value = item.code ? item.code : item.name;
       const checked = this.isOptionChecked(value);
       const obj = EmberObject.create({
         label,
diff --git a/app/mixins/custom-form.js b/app/mixins/custom-form.js
@@ -446,7 +446,7 @@ export default Mixin.create(MutableArray, {
         fieldIdentifier : 'gender',
         formID          : _formID,
         form            : 'attendee',
-        type            : 'select',
+        type            : 'checkbox',
         isRequired      : false,
         isIncluded      : false,
         isPublic        : false,
diff --git a/app/models/custom-form.js b/app/models/custom-form.js
@@ -103,7 +103,7 @@ export default ModelBase.extend({
     instagram                   : tn.t('Instagram'),
     linkedin                    : tn.t('LinkedIn'),
     mastodon                    : tn.t('Mastodon'),
-    gender                      : tn.t('Gender'),
+    gender                      : tn.t('Which of these categories describe your gender identity? (check all that apply)'),
     acceptReceiveEmails         : tn.t('Email consent'),
     acceptVideoRecording        : tn.t('Photo & video & text consent'),
     acceptShareDetails          : tn.t('Partner contact consent'),
diff --git a/app/templates/components/forms/orders/attendee-list.hbs b/app/templates/components/forms/orders/attendee-list.hbs
@@ -52,7 +52,7 @@
                     {{else if (eq field.type 'select')}}
                       <span class="word-break">{{get holder field.identifierPath}}</span>
                     {{else if (eq field.type 'checkbox')}}
-                      {{#if (or (eq field.fieldIdentifier "language_form_1") (eq field.fieldIdentifier "language_form_2"))}}
+                      {{#if (or (eq field.fieldIdentifier "language_form_1") (eq field.fieldIdentifier "language_form_2") (eq field.fieldIdentifier "gender"))}}
                         <span class="word-break">{{get holder (concat field.fieldIdentifier '_name_mapping')}}</span>
                       {{else}}
                         <span class="word-break">
diff --git a/app/templates/components/forms/orders/order-form.hbs b/app/templates/components/forms/orders/order-form.hbs
@@ -122,23 +122,12 @@
                     {{/if}}
                   {{/if}}
                 {{else if (eq field.fieldIdentifier 'gender')}}
-                  <UiDropdown
-                    @class="search selection"
-                    @selected={{get holder field.identifierPath}}
-                    @onChange={{action (mut holder.gender)}} as |execute mapper|>
-                    <Input
-                      @type="hidden"
-                      @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 gender'}}</div>
-                    <div class="menu">
-                      {{#each this.genders as |gender|}}
-                        <div class="item" data-value="{{map-value mapper gender.name}}">
-                          {{gender.name}}
-                        </div>
-                      {{/each}}
-                    </div>
-                  </UiDropdown>
+                  <Widgets::Forms::UiCheckboxGroup 
+                    @options={{genders}}
+                    @onChange={{action "updateGendersSelection"}}
+                    @entity={{holder}}
+                    @field={{field}}
+                  />
                 {{else if (eq field.fieldIdentifier 'country')}}
                   <UiDropdown
                     @class="search selection"
diff --git a/app/utils/dictionary/genders.ts b/app/utils/dictionary/genders.ts
@@ -1,17 +1,30 @@
 export const genders = [
   {
-    name: 'Female'
+    name      : 'Man',
+    isChecked : false
   },
   {
-    name: 'Male'
+    name      : 'Woman',
+    isChecked : false
   },
   {
-    name: 'Diverse / Non-binary'
+    name      : 'Transgender',
+    isChecked : false
   },
   {
-    name: 'Other'
+    name      : 'Non-binary',
+    isChecked : false
   },
   {
-    name: 'Prefer not to share'
+    name      : 'Genderqueer',
+    isChecked : false
+  },
+  {
+    name      : 'An identity not listed here',
+    isChecked : false
+  },
+  {
+    name      : 'I prefer not to say',
+    isChecked : false
   }
 ];
diff --git a/tests/integration/components/public/featured-speaker-list-test.js b/tests/integration/components/public/featured-speaker-list-test.js
@@ -16,7 +16,7 @@ module('Integration | Component | public/featured speaker list', function(hooks)
         photoUrl             : 'https://image.ibb.co/ffRqs5/avatar.png',
         website              : 'https://johndoe.com',
         city                 : 'Delhi',
-        gender               : 'female',
+        gender               : 'Woman',
         country              : 'India',
         positionOrganisation : 'FOSSASIA',
         isFeatured           : true,
@@ -33,7 +33,7 @@ module('Integration | Component | public/featured speaker list', function(hooks)
         photoUrl             : 'https://image.ibb.co/ffRqs5/avatar.png',
         website              : 'https://johndoe.com',
         city                 : 'Mumbai',
-        gender               : 'male',
+        gender               : 'Man',
         country              : 'India',
         positionOrganisation : 'FOSSASIA',
         isFeatured           : true,
diff --git a/tests/integration/components/public/speaker-item-test.js b/tests/integration/components/public/speaker-item-test.js
@@ -13,7 +13,7 @@ module('Integration | Component | public/speaker item', function(hooks) {
     photoUrl             : 'https://image.ibb.co/ffRqs5/avatar.png',
     website              : 'https://johndoe.com',
     city                 : 'Delhi',
-    gender               : 'female',
+    gender               : 'Woman',
     country              : 'India',
     positionOrganisation : 'FOSSASIA',
     isFeatured           : false,
diff --git a/tests/integration/components/public/speaker-list-test.js b/tests/integration/components/public/speaker-list-test.js
@@ -16,7 +16,7 @@ module('Integration | Component | public/speaker list', function(hooks) {
         photoUrl             : 'https://image.ibb.co/ffRqs5/avatar.png',
         website              : 'https://johndoe.com',
         city                 : 'Delhi',
-        gender               : 'female',
+        gender               : 'Woman',
         country              : 'India',
         positionOrganisation : 'FOSSASIA',
         isFeatured           : false,
@@ -33,7 +33,7 @@ module('Integration | Component | public/speaker list', function(hooks) {
         photoUrl             : 'https://image.ibb.co/ffRqs5/avatar.png',
         website              : 'https://johndoe.com',
         city                 : 'Mumbai',
-        gender               : 'male',
+        gender               : 'Man',
         country              : 'India',
         positionOrganisation : 'FOSSASIA',
         isFeatured           : false,

Original file line number	Diff line number	Diff line change
`@@ -117,7 +117,7 @@ export default Component.extend(FormMixin, {`
`117`	`117`	`rules: [`
`118`	`118`	`{`
`119`	`119`	`type : 'empty',`
`120`		`- prompt : this.l10n.t('Please select a gender.')`
	`120`	`+ prompt : this.l10n.t('Please select categories that describe your gender identity.')`
`121`	`121`	`}`
`122`	`122`	`]`
`123`	`123`	`};`
`@@ -661,7 +661,7 @@ export default Component.extend(FormMixin, {`
`661`	`661`	`return groupBy(requiredFixed.concat(customFields), field => field.get('form'));`
`662`	`662`	`}),`
`663`	`663`
`664`		`- genders : orderBy(genders, 'name'),`
	`664`	`+ genders : orderBy(genders, 'position'),`
`665`	`665`	`ageGroups : orderBy(ageGroups, 'position'),`
`666`	`666`	`countries : orderBy(countries, 'name'),`
`667`	`667`	`years : orderBy(years, 'year'),`
`@@ -700,6 +700,9 @@ export default Component.extend(FormMixin, {`
`700`	`700`	`},`
`701`	`701`	`updateLanguageFormsSelection(checked, changed, selectedOptions, holder, field) {`
`702`	`702`	`holder.set(field.fieldIdentifier, selectedOptions.map(select => select.value).join(','));`
	`703`	`+ },`
	`704`	`+ updateGendersSelection(checked, changed, selectedOptions, entity, field) {`
	`705`	`+ entity.set(field.fieldIdentifier, selectedOptions.map(select => select.value).join(','));`
`703`	`706`	`}`
`704`	`707`	`}`
`705`	`708`	`});`