feat: Edit Custom Form Fields

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

@@ -4,14 +4,18 @@ import FormMixin from 'open-event-frontend/mixins/form';
 
 export default Component.extend(FormMixin, {
 
-  fixedFields: computed('data.customForms', function() {
+  fixedFields: computed('data.customForms.@each', function() {
     return this.data.customForms?.filter(field => field.isFixed);
   }),
 
-  editableFields: computed('data.customForms', function() {
+  editableFields: computed('data.customForms.@each', function() {
     return this.data.customForms?.filter(field => !field.isFixed);
   }),
 
+  showEditColumn: computed('editableFields.@each', function() {
+    return this.editableFields?.some(field => field.isComplex);
+  }),
+
   actions: {
     saveDraft() {
       this.onValid(() => {

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

@@ -5,17 +5,17 @@
     {{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 {{did-update this.updated @field}} class="ui action input" style="width: inherit;">
+  <Input type="text" placeholder="Field Name" @value={{this.name}} />
+  <UiDropdown class="ui selection dropdown" @selected={{this.type}} @onChange={{action (mut this.type)}}>
     <div class="default text">
-      {{ @newFormField.type}}
+      {{ this.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>
+  <button class="ui button" {{action 'addFormField'}} disabled={{not this.validIdentifier}}>{{t (if @field 'Save' 'Add')}}</button>
 </div>

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

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

app/templates/components/forms/wizard/custom-forms/table.hbs → app/components/forms/wizard/custom-forms/table.hbs

@@ -1,5 +1,12 @@
 <table class="ui selectable celled table">
   <thead>
+    {{#if @headerText}}
+      <tr>
+        <th colspan="{{if this.editColumn '5' '4'}}" class="text center aligned">
+          {{t @headerText}}
+        </th>
+      </tr>
+    {{/if}}
     <tr>
       {{#if this.device.isMobile}}
         <th class="center aligned">
@@ -18,6 +25,11 @@
         <th class="center aligned">
           {{t 'Require'}}
         </th>
+        {{#if this.editColumn}}
+          <th class="center aligned">
+            {{t 'Actions'}}
+          </th>
+        {{/if}}
       {{/if}}
     </tr>
   </thead>
@@ -27,6 +39,11 @@
         <td class="{{if this.device.isMobile 'center' 'right'}} aligned">
           <label class="{{if field.isFixed 'required'}}">
             {{field.name}}
+            {{#if field.isComplex}}
+              <div class="ui icon d-inline" data-tooltip="Custom Field">
+                <i class="info icon"></i>
+              </div>
+            {{/if}}
           </label>
         </td>
         <td class="center aligned">
@@ -48,6 +65,19 @@
             @onChange={{action (mut field.isRequired)}}
             @label={{if this.device.isMobile (t "Require")}} />
         </td>
+        {{#if this.editColumn}}
+          <td class="center aligned">
+            {{#if field.isComplex}}
+              <button class="ui compact icon positive circular button" data-tooltip="{{t 'Edit'}}" {{action  @updateField field}}>
+                <i class="pencil icon"></i>
+              </button>
+              {{!-- Hiding till implemented --}}
+              <button class="ui compact icon negative circular button hidden-item" data-tooltip="{{t 'Delete'}}">
+                <i class="trash icon"></i>
+              </button>
+            {{/if}}
+          </td>
+        {{/if}}
       </tr>
     {{/each}}
   </tbody>

app/components/forms/wizard/custom-forms/table.ts

@@ -0,0 +1,15 @@
+import Component from '@glimmer/component';
+
+
+interface CustomForm { isComplex: boolean }
+
+interface Args {
+  fields: CustomForm[],
+  updateField: (field: CustomForm) => void
+}
+
+export default class CustomFormTable extends Component<Args> {
+  get editColumn(): boolean {
+    return this.args.fields?.some(field => field.isComplex);
+  }
+}

app/routes/events/view/edit/attendee.js

@@ -22,11 +22,7 @@ export default class AttendeeRoute extends Route.extend(CustomFormMixin) {
         filter       : filterOptions,
         sort         : 'id',
         'page[size]' : 50
-      })).toArray().filter(field => field.form === 'attendee'),
-      newFormField: {
-        name : '',
-        type : 'text'
-      }
+      })).toArray().filter(field => field.form === 'attendee')
     };
 
     return data;

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

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

app/styles/libs/_helpers.scss

@@ -66,3 +66,7 @@ $spacer-heights: 50 100 200 300 400 500 600 700 800 900;
 .d-flex.wrap {
   flex-wrap: wrap;
 }
+
+.d-inline {
+  display: inline;
+}

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

@@ -48,14 +48,16 @@
     <div class="ui two column stackable grid">
       <div class="column">
         <Forms::Wizard::CustomForms::Table
-          @fields={{this.editableFields}} />
+          @fields={{this.editableFields}}
+          @updateField={{action (mut this.field)}} />
       </div>
     </div>
     <Forms::Wizard::CustomFormInput
-      @newFormField={{this.data.newFormField}}
       @customForms={{this.data.customForms}}
       @event={{this.data.event}}
-      @form="attendee" />
+      @form="attendee"
+      @field={{this.field}}
+      @onSave={{action (mut this.field) null}} />
   {{/if}}
   <div class="spacer-50"></div>
   <div class="{{if this.device.isMobile 'mini four' 'right floated large'}} ui fields buttons">