Feature-8881: Unable to re-add language after deleting (#8904)

* feature-8881: Unable to re-add language after deleting

* fix-8881
unable to save after remove translation field

* fix-8881
fix issue not able to delete custom field while editing

* format code

* fix-8881

* fix-8881
fix speaker unable to add custom field

---------

Co-authored-by: cweitat <[email protected]>

Author: khangon

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

@@ -35,5 +35,8 @@ export default class CustomFormInputTranslation extends Component<Args> {
     if (this.args.onRemoveTranslation) {
       this.args.onRemoveTranslation(this.args.data)
     }
+    if (this.args.onChange) {
+      this.args.onChange(this.args.data, '')
+    }
   }
 }

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

@@ -62,8 +62,10 @@
     <div>
       {{#if (eq @form 'attendee')}}
         <button class="ui button h-full" {{action 'addTranslation'}} disabled={{this.disableAddTranslation}}>{{t 'Add Translation'}}</button>
+        <button class="ui button h-full" {{action @setEditingField}} {{action 'addFormField'}} disabled={{not this.validIdentifier}} >{{if @field (t 'Save') (t 'Add')}}</button>
+      {{else}}
+        <button class="ui button h-full" {{action 'addFormField'}} disabled={{not this.validIdentifier}} >{{if @field (t 'Save') (t 'Add')}}</button>
       {{/if}}
-      <button class="ui button h-full" {{action 'addFormField'}} disabled={{not this.validIdentifier}}>{{if @field (t 'Save') (t 'Add')}}</button>
     </div>  
   </div>
 </div>

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

@@ -127,7 +127,7 @@ export default class CustomFormInput extends Component<Args> {
     return getIdentifier(this.name, this.args.customForms);
   }
 
-  @computed('name', 'selectedLanguage.@each', '[email protected]')
+  @computed('name', 'selectedLanguage.@each', '[email protected]', '[email protected]')
   get validIdentifier(): boolean {
     const nameValid = this.identifier.trim().length > 0 && this.name.trim().length > 0;
     const transInValid = this.subForm.filter(field => !field.isDeleted && (!field.name || !field.selectedLang))
@@ -234,7 +234,9 @@ export default class CustomFormInput extends Component<Args> {
     if (old_code) {
       this.selectedLanguage.removeObject(old_code)
     }
-    this.selectedLanguage.pushObject(new_code)
+    if (new_code) {
+      this.selectedLanguage.pushObject(new_code)
+    }
   }
 
   @computed('[email protected]')

app/components/forms/wizard/custom-form-ticket.js

@@ -5,7 +5,8 @@ import EventWizardMixin from 'open-event-frontend/mixins/event-wizard';
 import { sortBy, union } from 'lodash-es';
 
 export default Component.extend(FormMixin, EventWizardMixin, {
-  currentSelected: [],
+  currentSelected     : [],
+  trackedfieldEditing : [],
   init() {
     this._super(...arguments);
     this.currentSelected = this.data.ticketsDetails;
@@ -54,9 +55,16 @@ export default Component.extend(FormMixin, EventWizardMixin, {
     return this.editableFields?.some(field => field.isComplex);
   }),
 
+  getEditingField: computed('fieldEditing', function() {
+    return this.fieldEditing;
+  }),
+
   actions: {
     removeField(field) {
       field.deleteRecord();
+    },
+    setEditingField(name) {
+      this.set('fieldEditing', name);
     }
   }
 });

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

@@ -125,13 +125,23 @@
           {{#if this.complexColumn}}
             <td class="border center aligned">
               {{#if field.isComplex}}
+              {{#if (eq @form 'attendee')}}
+                <button class="ui compact icon positive circular button" data-tooltip="{{t 'Edit'}}" {{action  @updateField field}} {{action @setEditingField field.name}}>
+                  <i class="pencil icon"></i>
+                </button>
+                <button class="ui compact icon negative circular button" disabled={{if  (eq @getEditingField field.name) true false}} data-tooltip="{{t 'Delete'}}" {{action (confirm (t "Are you sure you want to delete this?") (action @removeField field))}}>
+                  <i class="trash icon"></i>
+                </button>
+              {{else}}
                 <button class="ui compact icon positive circular button" data-tooltip="{{t 'Edit'}}" {{action  @updateField field}}>
                   <i class="pencil icon"></i>
                 </button>
                 <button class="ui compact icon negative circular button" data-tooltip="{{t 'Delete'}}" {{action (confirm (t "Are you sure you want to delete this?") (action @removeField field))}}>
                   <i class="trash icon"></i>
                 </button>
               {{/if}}
+                
+              {{/if}}
             </td>
           {{/if}}
       </DraggableObject>

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

@@ -61,6 +61,7 @@
       @event={{this.data.event}}
       @form="attendee"
       @field={{this.field}}
+      @setEditingField={{action (mut this.field) null}}
       @onSave={{action (mut this.field) null}} />
     {{else}}
       <div class="ui hidden divider"></div>

app/templates/components/forms/wizard/custom-form-ticket.hbs

@@ -36,6 +36,8 @@
       @fields={{this.editableFields}}
       @form={{"attendee"}}
       @removeField={{action "removeField"}}
+      @setEditingField={{action "setEditingField"}}
+      @getEditingField={{this.getEditingField}}
       @updateField={{action (mut this.ticketField)}} 
     />
   </div>
@@ -45,6 +47,7 @@
   @event={{this.event}}
   @form="attendee"
   @field={{this.ticketField}}
+  @setEditingField={{action "setEditingField"}}
   @formIdentifier={{this.id}}
   @onSave={{action (mut this.ticketField) null}} />
 <div class="ui hidden divider"></div>

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

@@ -241,6 +241,7 @@
           @headerText={{t "Collect Speaker Details"}}
           @fields={{this.customForm.speaker}}
           @updateField={{action (mut this.speakerField)}} 
+          @form="speaker"
           @removeField={{action "removeField"}}
         />
 
@@ -257,6 +258,7 @@
           @headerText={{t "Collect Session Details"}}
           @fields={{this.customForm.session}}
           @updateField={{action (mut this.sessionField)}} 
+          @form="session"
           @removeField={{action "removeField"}}
         />