feat: add custom form widget (#3501)

Author: abhinavk96

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

@@ -128,6 +128,10 @@ export default Component.extend(EventWizardMixin, FormMixin, {
     return this.get('data.event.microlocations').filterBy('isDeleted', false);
   }),
 
+  complexCustomForms: computed('[email protected]', function() {
+    return this.data.customForms.filterBy('isComplex', true);
+  }),
+
   fieldChanged(field) {
     if (!field.get('isIncluded')) {
       field.set('isRequired', false);
@@ -174,6 +178,12 @@ export default Component.extend(EventWizardMixin, FormMixin, {
           break;
       }
     },
+    addCustomField() {
+      this.data.customForms.addObject(this.store.createRecord('customForm', {
+        event     : this.data.event,
+        isComplex : true
+      }));
+    },
     onChange() {
       this.onValid(() => {});
     }

app/models/custom-form.js

@@ -84,14 +84,15 @@ export default ModelBase.extend({
 
   name: computed('fieldIdentifier', 'form', function() {
     let name = this.fieldIdentifier;
-    if (this.form === 'session') {
-      name = this.get(`session.${name}`);
-    } else if (this.form === 'speaker') {
-      name = this.get(`speaker.${name}`);
-    } else {
-      name = this.get(`attendee.${name}`);
+    if (!this.isComplex) {
+      if (this.form === 'session') {
+        name = this.get(`session.${name}`);
+      } else if (this.form === 'speaker') {
+        name = this.get(`speaker.${name}`);
+      } else {
+        name = this.get(`attendee.${name}`);
+      }
     }
-
     return name;
   }),
 

app/templates/components/forms/session-speaker-form.hbs

@@ -362,7 +362,6 @@
 
 
 
-
   <button type="submit" class="ui teal submit button update-changes">
     {{t 'Submit'}}
   </button>

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

@@ -317,6 +317,45 @@
     <div class="spacer-50"></div>
   {{/if}}
 
+  {{#each complexCustomForms as |form|}}
+    {{form.isComplex}}
+    <div class="fields">
+      <div class="two wide field">
+        <label>{{t 'Name'}}</label>
+        {{input type='text' value=form.fieldIdentifier name='name'}}
+      </div>
+      <div class = "two wide field">
+        <label>{{t 'Form'}}</label>
+        {{input type='text' value=form.form name='form'}}
+      </div>
+      <div class = "two wide field">
+        <label>{{t 'Type'}}</label>
+        {{input type='text' value=form.type name='type'}}
+      </div>
+      <div class="five wide field">
+        <label class="required">{{t 'Description'}}</label>
+        {{input type='text' value=form.description name='desciption'}}
+      </div>
+      <div class="five wide field">
+        <label class="required">{{t 'Required'}}</label>
+        {{ui-checkbox class='slider'
+                      checked=form.isRequired
+                      onChange=(action (mut form.isRequired))
+                      label=(t 'Required')}}
+      </div>
+      <div class="five wide field">
+        <label class="required">{{t 'Included'}}</label>
+        {{ui-checkbox class='slider'
+                      checked=form.isIncluded
+                      onChange=(action (mut form.isIncluded))
+                      label=(t 'Included')}}
+      </div>
+    </div>
+  {{/each}}
+
+  <button type="button" class="ui primary {{if device.isMobile 'small'}} button" {{action 'addCustomField'}}>{{t 'Add another custom field'}}</button>
+
+
   <div class="ui fields buttons {{if device.isMobile 'mini three' 'right floated large'}}">
     <button class="ui three field left labeled icon button {{if isLoading 'disabled'}}" type="button" {{action 'move' 'backwards'}}>
       {{t 'Previous'}}