feat: Add speaker and session custom form wizard (#4540)

app/components/forms/wizard/attendee-step.js

@@ -1,25 +1,7 @@
 import Component from '@ember/component';
 import FormMixin from 'open-event-frontend/mixins/form';
-import { slugify } from 'open-event-frontend/utils/text';
-import { computed } from '@ember/object';
-
-function getIdentifier(name, fields) {
-  const fieldIdentifiers = new Set(fields.map(field => field.fieldIdentifier));
-  let identifier = slugify(name, '_');
-  while (fieldIdentifiers.has(identifier)) {
-    identifier += '_';
-  }
-
-  return identifier;
-}
 
 export default Component.extend(FormMixin, {
-  identifier: computed('data.newFormField.name', 'data.customForms', function() {
-    return getIdentifier(this.data.newFormField.name, this.data.customForms);
-  }),
-  validIdentifier: computed('data.newFormField.name', 'identifier', function() {
-    return this.identifier.trim().length > 0 && this.data.newFormField.name.trim().length > 0;
-  }),
   actions: {
     saveDraft() {
       this.onValid(() => {
@@ -37,21 +19,6 @@ export default Component.extend(FormMixin, {
         this.set('data.event.state', 'published');
         this.sendAction('save', this.data);
       });
-    },
-    addFormField() {
-      if (!this.validIdentifier) {
-        return;
-      }
-      this.data.customForms.pushObject(this.store.createRecord('custom-form', {
-        fieldIdentifier : this.identifier,
-        name            : this.data.newFormField.name,
-        form            : 'attendee',
-        type            : this.data.newFormField.type,
-        isRequired      : false,
-        isIncluded      : false,
-        event           : this.data.event
-      }));
-      this.set('data.newFormField.name', '');
     }
   }
 });

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

@@ -0,0 +1,21 @@
+<div class="ui hidden divider"></div>
+<h3 class="ui dividing header">
+  <i class="checkmark box icon"></i>
+  <div class="content">
+    {{t 'Add Custom Form Field'}}
+  </div>
+</h3>
+<div class="ui action input" style="width: inherit;">
+  <Input type="text" placeholder="Field Name" @value={{@newFormField.name}} />
+  <UiDropdown class="ui selection dropdown" @selected={{@newFormField.type}} @onChange={{action (mut @newFormField.type)}}>
+    <div class="default text">
+      {{ @newFormField.type}}
+    </div>
+    <i class="dropdown icon"></i>
+    <div class="menu">
+      <div class="item" data-value="text">Text</div>
+      <div class="item" data-value="number">Number</div>
+    </div>
+  </UiDropdown>
+  <button class="ui button" {{action 'addFormField'}} disabled={{not this.validIdentifier}}>Add</button>
+</div>

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

@@ -0,0 +1,61 @@
+import Component from '@glimmer/component';
+import { slugify } from 'open-event-frontend/utils/text';
+import { action } from '@ember/object';
+import { computed } from '@ember/object';
+import { inject as service } from '@ember/service';
+import { set } from '@ember/object';
+import DS from 'ember-data';
+
+interface CustomForm { fieldIdentifier: string }
+
+function getIdentifier(name: string, fields: CustomForm[]): string {
+  const fieldIdentifiers = new Set(fields.map(field => field.fieldIdentifier));
+  let identifier = slugify(name, '_');
+  while (fieldIdentifiers.has(identifier)) {
+    identifier += '_';
+  }
+
+  return identifier;
+}
+
+interface Args {
+  newFormField: { 
+    name: string, 
+    type: string 
+  }, 
+  customForms: CustomForm[], 
+  form: string, 
+  event: any
+}
+
+export default class CustomFormInput extends Component<Args> {
+
+  @service
+  store!: DS.Store;
+
+  get identifier(): string {
+    return getIdentifier(this.args.newFormField.name, this.args.customForms);
+  }
+
+  @computed('args.newFormField.name')
+  get validIdentifier(): boolean {
+    return this.identifier.trim().length > 0 && this.args.newFormField.name.trim().length > 0;
+  }
+
+  @action
+  addFormField() {
+    if (!this.validIdentifier) {
+      return;
+    }
+    this.args.customForms.pushObject(this.store.createRecord('custom-form', {
+      fieldIdentifier : this.identifier,
+      name            : this.args.newFormField.name,
+      form            : this.args.form,
+      type            : this.args.newFormField.type,
+      isRequired      : false,
+      isIncluded      : false,
+      event           : this.args.event
+    }));
+    set(this.args.newFormField, 'name', '');
+  }
+}

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

@@ -43,7 +43,15 @@ export default class SessionsSpeakersRoute extends Route.extend(EventWizardMixin
       microlocations,
       sessionTypes,
       speakersCall,
-      customForms
+      customForms,
+      newSpeakerForm: {
+        name : '',
+        type : 'text'
+      },
+      newSessionForm: {
+        name : '',
+        type : 'text'
+      }
     };
   }
 }

app/templates/components/forms/wizard/attendee-step.hbs

@@ -92,27 +92,11 @@
       </div>
     </div>
   {{/if}}
-  <div class="ui hidden divider"></div>
-  <h3 class="ui dividing header">
-    <i class="checkmark box icon"></i>
-    <div class="content">
-      {{t 'Add Custom Form Field'}}
-    </div>
-  </h3>
-  <div class="ui action input">
-    <Input type="text" placeholder="Field Name" @value={{this.data.newFormField.name}} />
-    <UiDropdown class="ui selection dropdown" @selected={{this.data.newFormField.type}} @onChange={{action (mut this.data.newFormField.type)}}>
-      <div class="default text">
-        {{ this.data.newFormField.type}}
-      </div>
-      <i class="dropdown icon"></i>
-      <div class="menu">
-        <div class="item" data-value="text">Text</div>
-        <div class="item" data-value="number">Number</div>
-      </div>
-    </UiDropdown>
-    <button class="ui button" {{action 'addFormField'}} disabled={{not this.validIdentifier}}>Add</button>
-  </div>
+  <Forms::Wizard::CustomFormInput
+    @newFormField={{this.data.newFormField}}
+    @customForms={{this.data.customForms}}
+    @event={{this.data.event}}
+    @form="attendee" />
   <div class="spacer-50"></div>
   <div class="{{if this.device.isMobile 'mini four' 'right floated large'}} ui fields buttons">
     <button class="ui three field left labeled icon button {{if this.isLoading 'disabled'}}" type="button" {{action 'move' 'backwards'}}>

app/templates/components/forms/wizard/sessions-speakers-step.hbs

@@ -186,7 +186,7 @@
         <table class="ui selectable celled table">
           <thead>
             <tr>
-              <th colspan="3" class="text center aligned">
+              <th colspan="4" class="text center aligned">
                 {{t 'Collect Speaker Details'}}
               </th>
             </tr>
@@ -199,6 +199,9 @@
                 <th class="right aligned">
                   {{t 'Option'}}
                 </th>
+                <th class="center aligned">
+                  {{t 'Type'}}
+                </th>
                 <th class="center aligned">
                   {{t 'Include'}}
                 </th>
@@ -216,6 +219,9 @@
                     {{field.name}}
                   </label>
                 </td>
+                <td class="center aligned">
+                  {{field.type}}
+                </td>
                 <td class="center aligned">
                   <UiCheckbox @class="slider" @checked={{field.isIncluded}} @disabled={{field.isFixed}} @onChange={{action (mut field.isIncluded)}} @label={{if this.device.isMobile (t "Include")}} />
                 </td>
@@ -227,12 +233,18 @@
           </tbody>
         </table>
 
+        <Forms::Wizard::CustomFormInput
+          @newFormField={{this.data.newSpeakerForm}}
+          @customForms={{this.data.customForms}}
+          @event={{this.data.event}}
+          @form="speaker" />
+
       </div>
       <div class="column">
         <table class="ui selectable celled table">
           <thead>
             <tr>
-              <th colspan="3" class="text center aligned">
+              <th colspan="4" class="text center aligned">
                 {{t 'Collect Session Details'}}
               </th>
             </tr>
@@ -245,6 +257,9 @@
                 <th class="right aligned">
                   {{t 'Option'}}
                 </th>
+                <th class="center aligned">
+                  {{t 'Type'}}
+                </th>
                 <th class="center aligned">
                   {{t 'Include'}}
                 </th>
@@ -262,6 +277,9 @@
                     {{field.name}}
                   </label>
                 </td>
+                <td class="center aligned">
+                  {{field.type}}
+                </td>
                 <td class="center aligned">
                   <UiCheckbox @class="slider" @checked={{field.isIncluded}} @disabled={{field.isFixed}} @onChange={{action (mut field.isIncluded)}} @label={{if this.device.isMobile (t "Include")}} />
                 </td>
@@ -272,6 +290,12 @@
             {{/each}}
           </tbody>
         </table>
+
+        <Forms::Wizard::CustomFormInput
+          @newFormField={{this.data.newSessionForm}}
+          @customForms={{this.data.customForms}}
+          @event={{this.data.event}}
+          @form="session" />
       </div>
     </div>
     <div class="spacer-50"></div>