feat: Add field order to session and speaker forms

app/components/forms/session-speaker-form.js

@@ -7,6 +7,8 @@ import { compulsoryProtocolValidUrlPattern, protocolLessValidUrlPattern, validTw
 import { countries } from 'open-event-frontend/utils/dictionary/demography';
 import { languages } from 'open-event-frontend/utils/dictionary/languages';
 import { genders } from 'open-event-frontend/utils/dictionary/genders';
+import { sortCustomFormFields } from 'open-event-frontend/utils/sort';
+import { SPEAKER_FORM_ORDER, SESSION_FORM_ORDER } from 'open-event-frontend/models/custom-form';
 
 export default Component.extend(FormMixin, {
 
@@ -511,7 +513,12 @@ export default Component.extend(FormMixin, {
   genders: orderBy(genders, 'name'),
 
   allFields: computed('fields', function() {
-    return groupBy(this.fields.toArray(), field => field.get('form'));
+    const grouped = groupBy(this.fields.toArray(), field => field.get('form'));
+
+    grouped.speaker = sortCustomFormFields(grouped.speaker, SPEAKER_FORM_ORDER);
+    grouped.session = sortCustomFormFields(grouped.session, SESSION_FORM_ORDER);
+
+    return grouped;
   }),
 
   // Clicking on the add session button creates a blank record which increases the length of the speaker's list by 1.

app/components/forms/wizard/sessions-speakers-step.js

@@ -3,6 +3,8 @@ import { computed } from '@ember/object';
 import FormMixin from 'open-event-frontend/mixins/form';
 import EventWizardMixin from 'open-event-frontend/mixins/event-wizard';
 import { groupBy } from 'lodash-es';
+import { sortCustomFormFields } from 'open-event-frontend/utils/sort';
+import { SPEAKER_FORM_ORDER, SESSION_FORM_ORDER } from 'open-event-frontend/models/custom-form';
 
 export default Component.extend(EventWizardMixin, FormMixin, {
 
@@ -118,7 +120,12 @@ export default Component.extend(EventWizardMixin, FormMixin, {
   }),
 
   customForm: computed('data.customForms.[]', function() {
-    return groupBy(this.data.customForms.toArray(), customForm => customForm.get('form'));
+    const grouped = groupBy(this.data.customForms.toArray(), customForm => customForm.get('form'));
+
+    grouped.speaker = sortCustomFormFields(grouped.speaker, SPEAKER_FORM_ORDER);
+    grouped.session = sortCustomFormFields(grouped.session, SESSION_FORM_ORDER);
+
+    return grouped;
   }),
 
   microlocations: computed('data.microlocations.@each.isDeleted', function() {

app/models/custom-form.js

@@ -3,6 +3,49 @@ import attr from 'ember-data/attr';
 import ModelBase from 'open-event-frontend/models/base';
 import { belongsTo, hasMany } from 'ember-data/relationships';
 
+export const SPEAKER_FORM_FIELDS = {
+  name                : 'Name',
+  email               : 'Email',
+  position            : 'Position',
+  organisation        : 'Organisation',
+  address             : 'Address',
+  city                : 'City',
+  country             : 'Country',
+  mobile              : 'Mobile',
+  gender              : 'Gender',
+  shortBiography      : 'Short Biography',
+  longBiography       : 'Long Biography',
+  speakingExperience  : 'Speaking Experience',
+  photoUrl            : 'Photo',
+  website             : 'Website',
+  github              : 'GitHub',
+  facebook            : 'Facebook',
+  twitter             : 'Twitter',
+  instagram           : 'Instagram',
+  linkedin            : 'Linkedin',
+  heardFrom           : 'Heard From',
+  sponsorshipRequired : 'Sponsorship Required'
+};
+
+export const SPEAKER_FORM_ORDER = Object.keys(SPEAKER_FORM_FIELDS);
+
+export const SESSION_FORM_FIELDS = {
+  title         : 'Title',
+  subtitle      : 'Subtitle',
+  track         : 'Track',
+  sessionType   : 'Session Type',
+  shortAbstract : 'Short Abstract',
+  longAbstract  : 'Long Abstract',
+  language      : 'Language',
+  level         : 'Level',
+  slidesUrl     : 'Slides',
+  videoUrl      : 'Video',
+  audioUrl      : 'Audio',
+  comments      : 'Comments'
+};
+
+export const SESSION_FORM_ORDER = Object.keys(SESSION_FORM_FIELDS);
+
 export default ModelBase.extend({
 
   fieldIdentifier : attr('string'),
@@ -19,44 +62,9 @@ export default ModelBase.extend({
   event             : belongsTo('event'),
   customFormOptions : hasMany('customFormOptions'),
 
-  session: {
-    title         : 'Title',
-    subtitle      : 'Subtitle',
-    shortAbstract : 'Short Abstract',
-    longAbstract  : 'Long Abstract',
-    comments      : 'Comment',
-    track         : 'Track',
-    sessionType   : 'Session Type',
-    level         : 'Level',
-    language      : 'Language',
-    slidesUrl     : 'Slide',
-    videoUrl      : 'Video',
-    audioUrl      : 'Audio'
-  },
+  session: SESSION_FORM_FIELDS,
 
-  speaker: {
-    name                : 'Name',
-    email               : 'Email',
-    photoUrl            : 'Photo',
-    organisation        : 'Organisation',
-    position            : 'Position',
-    address             : 'Address',
-    country             : 'Country',
-    city                : 'City',
-    longBiography       : 'Long Biography',
-    shortBiography      : 'Short Biography',
-    speakingExperience  : 'Speaking Experience',
-    sponsorshipRequired : 'Sponsorship Required',
-    gender              : 'Gender',
-    heardFrom           : 'Heard From',
-    mobile              : 'Mobile',
-    website             : 'Website',
-    facebook            : 'Facebook',
-    twitter             : 'Twitter',
-    github              : 'GitHub',
-    linkedin            : 'Linkedin',
-    instagram           : 'Instagram'
-  },
+  speaker: SPEAKER_FORM_FIELDS,
 
   attendee: {
     firstname       : 'First Name',

app/routes/events/view/edit/sessions-speakers.js

@@ -32,7 +32,7 @@ export default class SessionsSpeakersRoute extends Route.extend(EventWizardMixin
     }];
     const customFormsPromise = data.event.query('customForms', {
       filter       : customFormFilterOptions,
-      sort         : 'field-identifier',
+      sort         : 'id',
       'page[size]' : 50
     });
 

app/routes/public/cfs/edit-session.js

@@ -12,6 +12,11 @@ export default class EditSessionRoute extends Route {
     return {
       event : eventDetails,
       forms : await eventDetails.query('customForms', {
+        filter: [{
+          name : 'form',
+          op   : 'eq',
+          val  : 'session'
+        }],
         sort         : 'id',
         'page[size]' : 0
       }),

app/routes/public/cfs/edit-speaker.js

@@ -12,6 +12,11 @@ export default class EditSpeakerRoute extends Route {
     return {
       event : eventDetails,
       forms : await eventDetails.query('customForms', {
+        filter: [{
+          name : 'form',
+          op   : 'eq',
+          val  : 'speaker'
+        }],
         sort         : 'id',
         'page[size]' : 0
       }),

app/utils/sort.ts

@@ -0,0 +1,11 @@
+import { sortBy } from 'lodash-es';
+
+interface CustomFormField {
+    fieldIdentifier: string,
+    isComplex: boolean
+}
+
+export function sortCustomFormFields(fields: CustomFormField[], fieldOrder: string[]): CustomFormField[] {
+    fieldOrder = [...fieldOrder].reverse();
+    return sortBy(fields, 'isComplex', item => -fieldOrder.indexOf(item.fieldIdentifier));
+}

package.json

@@ -40,6 +40,7 @@
     "@types/ember-data": "^3.16.2",
     "@types/ember-qunit": "^3.4.9",
     "@types/ember__test-helpers": "^1.7.0",
+    "@types/lodash-es": "^4.17.3",
     "@types/qunit": "^2.9.1",
     "@types/rsvp": "^4.0.3",
     "async": "^3.2.0",

tests/unit/utils/sort-test.ts

@@ -0,0 +1,10 @@
+import { sortCustomFormFields } from 'open-event-frontend/utils/sort';
+import { module, test } from 'qunit';
+
+module('Unit | Sort | Custom Form Fields', function() {
+  test('test custom form fields sort', function(assert) {
+    const items = [{fieldIdentifier: 'age', isComplex: false}, {fieldIdentifier: 'job', isComplex: false}, {fieldIdentifier: 'majama', isComplex: true}, {fieldIdentifier: 'name', isComplex: false}, {fieldIdentifier: 'hay', isComplex: true}, {fieldIdentifier: 'trust', isComplex: false}, {fieldIdentifier: 'company', isComplex: false}];
+    const order = ['name', 'age', 'company'];
+    assert.equal(JSON.stringify(sortCustomFormFields(items, order)), JSON.stringify([{fieldIdentifier:"name",isComplex:false},{fieldIdentifier:"age",isComplex:false},{fieldIdentifier:"company",isComplex:false},{fieldIdentifier:"job",isComplex:false},{fieldIdentifier:"trust",isComplex:false},{fieldIdentifier:"majama",isComplex:true},{fieldIdentifier:"hay",isComplex:true}]));
+  });
+});

yarn.lock

@@ -1873,6 +1873,18 @@
   resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.5.tgz#dcce4430e64b443ba8945f0290fb564ad5bac6dd"
   integrity sha512-7+2BITlgjgDhH0vvwZU/HZJVyk+2XUlvxXe8dFMedNX/aMkaOq++rMAFXc0tM7ij15QaWlbdQASBR9dihi+bDQ==
 
+"@types/lodash-es@^4.17.3":
+  version "4.17.3"
+  resolved "https://registry.yarnpkg.com/@types/lodash-es/-/lodash-es-4.17.3.tgz#87eb0b3673b076b8ee655f1890260a136af09a2d"
+  integrity sha512-iHI0i7ZAL1qepz1Y7f3EKg/zUMDwDfTzitx+AlHhJJvXwenP682ZyGbgPSc5Ej3eEAKVbNWKFuwOadCj5vBbYQ==
+  dependencies:
+    "@types/lodash" "*"
+
+"@types/lodash@*":
+  version "4.14.157"
+  resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.157.tgz#fdac1c52448861dfde1a2e1515dbc46e54926dc8"
+  integrity sha512-Ft5BNFmv2pHDgxV5JDsndOWTRJ+56zte0ZpYLowp03tW+K+t8u8YMOzAnpuqPgzX6WO1XpDIUm7u04M8vdDiVQ==
+
 "@types/mime@*":
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/@types/mime/-/mime-2.0.1.tgz#dc488842312a7f075149312905b5e3c0b054c79d"