From fd96cb5bd983fd339eec8d4e0a05fcc5680cadfe Mon Sep 17 00:00:00 2001
From: Abhinav Khare <abhinav.khare31@gmail.com>
Date: Tue, 29 Oct 2019 22:27:29 -0400
Subject: [PATCH] feat: add custom form widget (#3501)

---
 .../forms/wizard/sessions-speakers-step.js    | 10 +++++
 app/models/custom-form.js                     | 15 +++----
 .../components/forms/session-speaker-form.hbs |  1 -
 .../forms/wizard/sessions-speakers-step.hbs   | 39 +++++++++++++++++++
 4 files changed, 57 insertions(+), 8 deletions(-)

diff --git a/app/components/forms/wizard/sessions-speakers-step.js b/app/components/forms/wizard/sessions-speakers-step.js
index 8c7e8436ee3..a1ba6e59dca 100644
--- a/app/components/forms/wizard/sessions-speakers-step.js
+++ b/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('data.customForms.@each.isComplex', 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(() => {});
     }
diff --git a/app/models/custom-form.js b/app/models/custom-form.js
index 6e005c4814d..1716ed427d5 100644
--- a/app/models/custom-form.js
+++ b/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;
   }),
 
diff --git a/app/templates/components/forms/session-speaker-form.hbs b/app/templates/components/forms/session-speaker-form.hbs
index 8762d94ade6..b09d5cf11f7 100644
--- a/app/templates/components/forms/session-speaker-form.hbs
+++ b/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>
diff --git a/app/templates/components/forms/wizard/sessions-speakers-step.hbs b/app/templates/components/forms/wizard/sessions-speakers-step.hbs
index 5f43a8729f4..fb1783286b8 100644
--- a/app/templates/components/forms/wizard/sessions-speakers-step.hbs
+++ b/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'}}