feature-8983: Showing <br> tag in custom field when organizer tries … (#8993)

* feature-8983:  Showing <br> tag in custom field when organizer tries to add custom question

* feature-8983:Showing <br> tag in custom field when organizer tries to add custom question

* feature-8983:Showing <br> tag in custom field when organizer tries to add custom question

* feature-8983: Showing <br> tag in custom field when organizer tries to add custom question

Author: ntthitrinh

app/components/forms/wizard/badge-field-form.js

@@ -13,10 +13,13 @@ export default Component.extend(FormMixin, {
   booleanTextType    : orderBy(booleanTextType, 'position'),
 
   getCustomFields: computed('includeCustomField', function() {
-    const validForms = this.includeCustomField.map(item => item.name);
-    if (this.data.custom_field) {
-      validForms.push(this.data.custom_field);
-    }
+    const validForms = this.includeCustomField.map(item => {
+      if (item.isComplex) {
+        return { 'isComplex': item.name };
+      } else {
+        return { 'isFixed': item.name };
+      }
+    });
     return union(validForms);
   }),
 
@@ -42,6 +45,25 @@ export default Component.extend(FormMixin, {
     return warningFields;
   }),
 
+  getFieldComplex: computed('data.custom_field', function() {
+    const { custom_field } = this.data;
+    let isComplex = false;
+    if (custom_field !== 'QR') {
+      this.selectedTickets.forEach(ticket => {
+        const listCFields = this.customForms.filter(form => (ticket.formID === form.formID) && form.isIncluded || form.isFixed);
+        if (custom_field) {
+          listCFields.forEach(field => {
+            const { isComplex: fieldIsComplex } = field;
+            if (field.name === custom_field) {
+              isComplex = fieldIsComplex;
+            }
+          });
+        }
+      });
+    }
+    return isComplex;
+  }),
+
   getWarningQRFields: computed('data.qr_custom_field.@each', 'selectedTickets', function() {
     if (this.data.qr_custom_field) {
       const warningFields      = [];

app/components/forms/wizard/badge-forms/badge-preview.hbs

@@ -54,7 +54,9 @@
                     </div>
                     {{else}}
                         <p class="field-style" style={{_field.getFieldStyle}}>
-                            {{_field.custom_field}}
+                          {{#if _field.custom_field }}
+                            {{ rich-text-link  _field.custom_field}}
+                          {{/if}}
                         </p>
                     {{/if}}
                   {{/if}}

app/components/widgets/forms/rich-text-editor.js

@@ -62,10 +62,10 @@ export default Component.extend({
 
       const updateValue = () => {
         debounce(this, () => {
-          let value = String(this.editor.getValue()).replace(/(<br>)*$/g, '');
-          if (navigator.userAgent.indexOf('Firefox') !== -1) {
-            value = value + '<br>';
-          }
+          let value = String(this.editor.getValue()).replace(/(<br>)*$/g, '').replace(/&nbsp;/g, ' ');
+          // if (navigator.userAgent.indexOf('Firefox') !== -1) {
+          //   value = value + '<br>';
+          // }
           let trimmedValue = new String('');
           let i = value.length;
           while (i--) {

app/components/widgets/forms/rich-text-link.js

@@ -62,10 +62,10 @@ export default Component.extend({
 
       const updateValue = () => {
         debounce(this, () => {
-          let value = String(this.editor.getValue()).replace(/(<br>)*$/g, '');
-          if (navigator.userAgent.indexOf('Firefox') !== -1) {
-            value = value + '<br>';
-          }
+          let value = String(this.editor.getValue()).replace(/(<br>)*$/g, '').replace(/&nbsp;/g, ' ');
+          // if (navigator.userAgent.indexOf('Firefox') !== -1) {
+          //   value = value + '<br>';
+          // }
           let trimmedValue = new String('');
           let i = value.length;
           while (i--) {

app/helpers/warning-badge-ticket.js

@@ -0,0 +1,19 @@
+import { helper } from '@ember/component/helper';
+import { htmlSafe } from '@ember/string';
+
+export function warningBadgeTicket(data) {
+  let field = '';
+  let fieldName = '';
+
+  if (data[0]) {
+    field = `'${data[0]}' is not available in ticket`;
+  }
+
+  if (data[1]) {
+    fieldName = `${field} '${data[1]}'`;
+  }
+
+  return htmlSafe(`<span>${fieldName}</span>`);
+}
+
+export default helper(warningBadgeTicket);

app/templates/components/forms/orders/editable-fields.hbs

@@ -1,5 +1,11 @@
 <div>
-    <label class="{{if @field.isRequired 'required'}}" for="name">{{t-var @field.transName}}</label>
+    <label class="{{if @field.isRequired 'required'}}" for="name">
+        {{#if @field.isComplex}}
+            {{rich-text-link @field.transName}}
+        {{else}}
+            {{t-var @field.transName}}
+        {{/if}}
+    </label>
 </div>
 {{#if (eq @field.type 'paragraph')}}
     {{#if @editFields}}

app/templates/components/forms/wizard/badge-field-form.hbs

@@ -4,8 +4,13 @@
     <h3 class="lh-2r">
       {{t 'Row'}} {{inc @index}}
       {{#if @data.custom_field }}
-      - {{@data.custom_field}}
+        {{#if this.getFieldComplex}}
+          - {{rich-text-link @data.custom_field}}
+        {{else}}
+          - {{t-var @data.custom_field}}
+        {{/if}}
       {{/if}}
+      
     </h3>
     <div class="btn-row">
       <button type="button" class="ui compact icon button right floated" {{action 'toggleSetting' }}>
@@ -36,15 +41,23 @@
           <div class="default text">{{t 'Custom field'}}</div>
           <div class="menu">
             {{#each this.getCustomFields as |cfield|}}
-            <div class="item" data-value="{{cfield}}">
-              {{t-var cfield}}
-            </div>
+              {{#if cfield.isFixed}}
+                <div class=" item fixed-item" data-value="{{cfield.isFixed}}">
+                  {{cfield.isFixed}}
+                </div>
+              {{else}}
+                {{#if cfield.isComplex}}
+                  <div class=" item complex-item" data-value="{{cfield.isComplex}}">
+                    {{rich-text-link cfield.isComplex}}
+                  </div>
+                {{/if}}
+              {{/if}}
             {{/each}}
           </div>
         </UiDropdown>
           {{#if this.getWarningFields}}
             {{#each this.getWarningFields as |warning|}}
-            <label class="warning">{{concat '\'' warning.field '\' is not available in ticket \'' warning.ticket '\''}}</label>
+            <label class="warning">{{warning-badge-ticket  warning.field  warning.ticket}}</label>
             {{!-- <UiPopup
               @tagName="i"
               @class="info circle icon"