feature-9034: Fix organizer translation issues (#9041)

* feature-9034: Fix organizer translation issues

* feature-9034: Fix organizer translation issues

* feature-9034: Fix organizer interpretation channel issues

---------

Co-authored-by: Khang On - TMA <[email protected]>

Author: Hieu Lam - TMA

app/components/forms/events/view/videoroom-form.hbs

@@ -244,7 +244,7 @@
   {{/if}}
 
   <div class="ui divider"></div>
-  <div class="ui header">{{t 'Translation Channels'}}</div>
+  <div class="ui header">{{t 'Interpretation Channels'}}</div>
 
   <label>
     {{t 'Source URL'}}
@@ -256,11 +256,10 @@
 
   {{#each this.translationChannels as |channel index|}}
     <div class="field">
-      <div class="ui action input">
+      <div class="ui action input translate-channel">
         <Widgets::Forms::LinkField
           @value={{channel.url}}
-          @onChange={{action (mut channel.url)}}
-        />
+          @onChange={{action (mut channel.url)}}/>
         <div class="field">
           <div class="ui labeled action input">
             <UiDropdown
@@ -275,14 +274,11 @@
                 {{/each-in}}
               </div>
               <i style="margin-left: 0 !important;text-align: right;"
-                 class="dropdown icon"> </i>
+                class="dropdown icon"> </i>
             </UiDropdown>
             <button class="ml-2 ui icon red button" {{on "click" (fn this.removeChannel index channel.id )}}>
               <i class="remove icon"></i>
             </button>
-            <button class="ui icon blue button" {{on "click" (fn this.updateChannel index channel.id )}}  >
-              <i class="add icon"></i>
-            </button>
           </div>
         </div>
       </div>
@@ -291,7 +287,7 @@
 
   {{#each this.translationChannelsNew as |channel index|}}
     <div class="field">
-      <div class="ui action input">
+      <div class="ui action input translate-channel">
         <Widgets::Forms::LinkField
           @value={{channel.url}}
           @onChange={{action (mut channel.url)}} />
@@ -314,9 +310,6 @@
             <button class="ui icon red button" {{on "click" (fn this.removeChannel index channel.id )}}>
               <i class="remove icon"></i>
             </button>
-            <button class="ui icon blue button" {{on "click" (fn this.addNewChannel channel )}}>
-              <i class="add icon"></i>
-            </button>
           </div>
         </div>
       </div>

app/components/forms/events/view/videoroom-form.js

@@ -450,6 +450,10 @@ export default class VideoroomForm extends Component.extend(FormMixin) {
           this.addNewChannel(channel);
         }
 
+        this.translationChannels.forEach((channel, index) => {
+          this.updateChannel(index, channel.id);
+        });
+
         if (this.data.stream.extra?.bbb_options) {
           this.data.stream.extra.bbb_options.endCurrentMeeting = this
             .showUpdateOptions

app/styles/components/extras.scss

@@ -78,3 +78,9 @@ p.link-item {
     height: 3.4em;
   }
 }
+
+.translate-channel {
+  .field {
+    width: 40%;
+  }
+}