memo field fix (#833)

DhaaraniCIT · ruuushhh · commit c2da432272bc · 2024-06-05T14:40:37.000+05:30
* memo field fix

* default field fix
diff --git a/src/app/core/models/common/advanced-settings.model.ts b/src/app/core/models/common/advanced-settings.model.ts
@@ -72,7 +72,7 @@ export class AdvancedSettingsModel {
     return ['employee_email', 'merchant', 'purpose', 'category', 'spent_on', 'report_number', 'expense_link'];
   }
 
-  static formatMemoPreview(memoStructure: string[], defaultMemoOptions: string[]): string {
+  static formatMemoPreview(memoStructure: string[], defaultMemoOptions: string[]): [string, string[]] {
     const time = Date.now();
     const today = new Date(time);
 
@@ -87,19 +87,22 @@ export class AdvancedSettingsModel {
     };
     let memoPreviewText = '';
     const memo: string[] = [];
+    const originMemo: string[] = [];
     memoStructure.forEach((field, index) => {
       if (field in previewValues) {
         const defaultIndex = defaultMemoOptions.indexOf(memoStructure[index]);
         memo[defaultIndex] = previewValues[field];
+        originMemo[defaultIndex] = field;
       }
     });
+    memoStructure = originMemo.filter(item => item.trim() !== '');
     memo.forEach((field, index) => {
       memoPreviewText += field;
       if (index + 1 !== memo.length) {
         memoPreviewText = memoPreviewText + ' - ';
       }
     });
-    return memoPreviewText;
+    return [memoPreviewText, memoStructure];
   }
 
   static filterAdminEmails = (emailToSearch: string[], adminEmails: EmailOption[]) => {
diff --git a/src/app/core/models/netsuite/netsuite-configuration/netsuite-advanced-settings.model.ts b/src/app/core/models/netsuite/netsuite-configuration/netsuite-advanced-settings.model.ts
@@ -5,6 +5,7 @@ import { NetsuiteDefaultLevelOptions, NetsuitePaymentSyncDirection, QBOPaymentSy
 import { AdvancedSettingValidatorRule, AdvancedSettingsModel } from "../../common/advanced-settings.model";
 import { HelperUtility } from "../../common/helper.model";
 import { brandingConfig } from "src/app/branding/branding-config";
+import { environment } from "src/environments/environment";
 
 
 export type NetsuiteAdvancedSettingConfiguration = {
@@ -65,7 +66,7 @@ export type NetsuiteAdvancedSettingAddEmailModel = {
 
 export class NetsuiteAdvancedSettingModel extends HelperUtility {
   static getDefaultMemoOptions(): string[] {
-    return ['employee_email', 'purpose', 'category', 'spent_on', 'report_number'];
+    return ['employee_email', 'merchant', 'purpose', 'category', 'spent_on', 'report_number'];
   }
 
   static getPaymentSyncOptions(): SelectFormOption[] {
diff --git a/src/app/integrations/business-central/business-central-shared/business-central-advanced-settings/business-central-advanced-settings.component.html b/src/app/integrations/business-central/business-central-shared/business-central-advanced-settings/business-central-advanced-settings.component.html
@@ -61,7 +61,8 @@
                         [options]="defaultMemoOptions"
                         [iconPath]="'list'"
                         [placeholder]="'Set description'"
-                        [formControllerName]="'memoStructure'">
+                        [formControllerName]="'memoStructure'"
+                        (changeInMultiSelect)="onMultiSelectChange()">
                     </app-configuration-multi-select>
                     <div class="preview-text">
                         <h4 class="tw-text-form-label-text-color tw-mb-12-px">Preview of the Description Field</h4>
diff --git a/src/app/integrations/business-central/business-central-shared/business-central-advanced-settings/business-central-advanced-settings.component.ts b/src/app/integrations/business-central/business-central-shared/business-central-advanced-settings/business-central-advanced-settings.component.ts
@@ -98,12 +98,20 @@ export class BusinessCentralAdvancedSettingsComponent implements OnInit {
     this.helper.handleSkipExportFormInAdvancedSettingsUpdates(this.skipExportForm, formWatcher, this.advancedSettingForm);
   }
 
+  onMultiSelectChange() {
+    const memo = this.advancedSettingForm.controls.memoStructure.value;
+    const changedMemo = AdvancedSettingsModel.formatMemoPreview(memo, this.defaultMemoOptions)[1];
+    this.advancedSettingForm.controls.memoStructure.patchValue(changedMemo);
+  }
+
   private createMemoStructureWatcher(): void {
     this.memoStructure = this.advancedSettingForm.value.memoStructure;
-    this.memoPreviewText = AdvancedSettingsModel.formatMemoPreview(this.memoStructure, this.defaultMemoOptions);
+    const memo = AdvancedSettingsModel.formatMemoPreview(this.memoStructure, this.defaultMemoOptions);
+    this.memoPreviewText = memo[0];
+    this.advancedSettingForm.controls.memoStructure.patchValue(memo[1]);
     this.advancedSettingForm.controls.memoStructure.valueChanges.subscribe((memoChanges) => {
       this.memoStructure = memoChanges;
-      this.memoPreviewText = AdvancedSettingsModel.formatMemoPreview(this.memoStructure, this.defaultMemoOptions);
+      this.memoPreviewText = AdvancedSettingsModel.formatMemoPreview(this.memoStructure, this.defaultMemoOptions)[0];
     });
   }
 
diff --git a/src/app/integrations/netsuite/netsuite-shared/netsuite-advanced-settings/netsuite-advanced-settings.component.html b/src/app/integrations/netsuite/netsuite-shared/netsuite-advanced-settings/netsuite-advanced-settings.component.html
@@ -121,7 +121,8 @@
                     [options]="defaultMemoOptions"
                     [iconPath]="'list'"
                     [placeholder]="'Set description'"
-                    [formControllerName]="'memoStructure'">
+                    [formControllerName]="'memoStructure'"
+                    (changeInMultiSelect)="onMultiSelectChange()">
                 </app-configuration-multi-select>
                 <div class="preview-text">
                     <h4 class="tw-text-form-label-text-color tw-mb-12-px">{{brandingContent.previewDescriptionFieldLabel}}</h4>
diff --git a/src/app/integrations/netsuite/netsuite-shared/netsuite-advanced-settings/netsuite-advanced-settings.component.ts b/src/app/integrations/netsuite/netsuite-shared/netsuite-advanced-settings/netsuite-advanced-settings.component.ts
@@ -194,11 +194,19 @@ export class NetsuiteAdvancedSettingsComponent implements OnInit {
     return this.workspaceGeneralSettings.reimbursable_expenses_object && this.workspaceGeneralSettings.reimbursable_expenses_object !== NetsuiteReimbursableExpensesObject.JOURNAL_ENTRY;
   }
 
+  onMultiSelectChange() {
+    const memo = this.advancedSettingForm.controls.memoStructure.value;
+    const changedMemo = AdvancedSettingsModel.formatMemoPreview(memo, this.defaultMemoOptions)[1];
+    this.advancedSettingForm.controls.memoStructure.patchValue(changedMemo);
+  }
+
   private createMemoStructureWatcher(): void {
     this.memoStructure = this.advancedSetting.configuration.memo_structure;
-    this.memoPreviewText = AdvancedSettingsModel.formatMemoPreview(this.memoStructure, this.defaultMemoOptions);
+    const memo: [string, string[]] = AdvancedSettingsModel.formatMemoPreview(this.memoStructure, this.defaultMemoOptions);
+    this.memoPreviewText = memo[0];
+    this.advancedSettingForm.controls.memoStructure.patchValue(memo[1]);
     this.advancedSettingForm.controls.memoStructure.valueChanges.subscribe((memoChanges) => {
-       this.memoPreviewText = AdvancedSettingsModel.formatMemoPreview(memoChanges, this.defaultMemoOptions);
+      this.memoPreviewText = AdvancedSettingsModel.formatMemoPreview(memoChanges, this.defaultMemoOptions)[0];
     });
   }
 
diff --git a/src/app/integrations/qbo/qbo-onboarding/qbo-clone-settings/qbo-clone-settings.component.html b/src/app/integrations/qbo/qbo-onboarding/qbo-clone-settings/qbo-clone-settings.component.html
@@ -495,7 +495,8 @@
                         [iconPath]="'list'"
                         [placeholder]="'Set description'"
                         [formControllerName]="'memoStructure'"
-                        [isCloneSettingView]="true">
+                        [isCloneSettingView]="true"
+                        (changeInMultiSelect)="onMultiSelectChange()">
                     </app-configuration-multi-select>
                 </div>
                 <div class="clone-setting--dependent-field tw-text-14-px tw-font-400 tw-text-text-muted !tw-pl-40-px">
diff --git a/src/app/integrations/qbo/qbo-onboarding/qbo-clone-settings/qbo-clone-settings.component.ts b/src/app/integrations/qbo/qbo-onboarding/qbo-clone-settings/qbo-clone-settings.component.ts
@@ -340,11 +340,19 @@ export class QboCloneSettingsComponent implements OnInit {
     });
   }
 
+  onMultiSelectChange() {
+    const memo = this.advancedSettingForm.controls.memoStructure.value;
+    const changedMemo = AdvancedSettingsModel.formatMemoPreview(memo, this.defaultMemoOptions)[1];
+    this.advancedSettingForm.controls.memoStructure.patchValue(changedMemo);
+  }
+
   private createMemoStructureWatcher(): void {
     this.memoStructure = this.cloneSetting.advanced_configurations.workspace_general_settings.memo_structure;
-    this.memoPreviewText = AdvancedSettingsModel.formatMemoPreview(this.memoStructure, this.defaultMemoOptions);
+    const memo = AdvancedSettingsModel.formatMemoPreview(this.memoStructure, this.defaultMemoOptions);
+    this.memoPreviewText = memo[0];
+    this.advancedSettingForm.controls.memoStructure.patchValue(memo[1]);
     this.advancedSettingForm.controls.memoStructure.valueChanges.subscribe((memoChanges) => {
-       this.memoPreviewText = AdvancedSettingsModel.formatMemoPreview(memoChanges, this.defaultMemoOptions);
+       this.memoPreviewText = AdvancedSettingsModel.formatMemoPreview(memoChanges, this.defaultMemoOptions)[0];
     });
   }
 
diff --git a/src/app/integrations/qbo/qbo-shared/qbo-advanced-settings/qbo-advanced-settings.component.html b/src/app/integrations/qbo/qbo-shared/qbo-advanced-settings/qbo-advanced-settings.component.html
@@ -126,7 +126,8 @@
                     [options]="defaultMemoOptions"
                     [iconPath]="'list'"
                     [placeholder]="'Set description'"
-                    [formControllerName]="'memoStructure'">
+                    [formControllerName]="'memoStructure'"
+                    (changeInMultiSelect)="onMultiSelectChange()">
                 </app-configuration-multi-select>
                 <div class="preview-text">
                     <h4 class="tw-text-form-label-text-color tw-mb-12-px">{{brandingContent.previewDescriptionFieldLabel}}</h4>
diff --git a/src/app/integrations/qbo/qbo-shared/qbo-advanced-settings/qbo-advanced-settings.component.ts b/src/app/integrations/qbo/qbo-shared/qbo-advanced-settings/qbo-advanced-settings.component.ts
@@ -170,14 +170,23 @@ export class QboAdvancedSettingsComponent implements OnInit {
     return !this.workspaceGeneralSettings.import_vendors_as_merchants && (this.workspaceGeneralSettings.corporate_credit_card_expenses_object === QBOCorporateCreditCardExpensesObject.CREDIT_CARD_PURCHASE || this.workspaceGeneralSettings.corporate_credit_card_expenses_object === QBOCorporateCreditCardExpensesObject.DEBIT_CARD_EXPENSE || this.workspaceGeneralSettings.name_in_journal_entry === NameInJournalEntry.MERCHANT);
   }
 
+  onMultiSelectChange() {
+    const memo = this.advancedSettingForm.controls.memoStructure.value;
+    const changedMemo = AdvancedSettingsModel.formatMemoPreview(memo, this.defaultMemoOptions)[1];
+    this.advancedSettingForm.controls.memoStructure.patchValue(changedMemo);
+  }
+
   private createMemoStructureWatcher(): void {
-    this.memoStructure = this.advancedSetting.workspace_general_settings.memo_structure;
-    this.memoPreviewText = AdvancedSettingsModel.formatMemoPreview(this.memoStructure, this.defaultMemoOptions);
+    this.memoStructure = this.advancedSettingForm.value.memoStructure;
+    const memo = AdvancedSettingsModel.formatMemoPreview(this.memoStructure, this.defaultMemoOptions);
+    this.memoPreviewText = memo[0];
+    this.advancedSettingForm.controls.memoStructure.patchValue(memo[1]);
     this.advancedSettingForm.controls.memoStructure.valueChanges.subscribe((memoChanges) => {
-       this.memoPreviewText = AdvancedSettingsModel.formatMemoPreview(memoChanges, this.defaultMemoOptions);
+      this.memoPreviewText = AdvancedSettingsModel.formatMemoPreview(this.memoStructure, this.defaultMemoOptions)[0];
     });
   }
 
+
   skipExportWatcher(): void {
     const skipExportFormWatcherFields: SkipExportValidatorRule = {
       condition1: ['operator1', 'value1'],
diff --git a/src/app/shared/components/configuration/configuration-multi-select/configuration-multi-select.component.html b/src/app/shared/components/configuration/configuration-multi-select/configuration-multi-select.component.html
@@ -9,7 +9,10 @@ <h5 class="!tw-text-text-muted tw-text-14-px !tw-font-400 !tw-leading-4" [innerH
         </div>
     </div>
     <div class="tw-pl-34-px">
-        <p-multiSelect [options]="options" styleClass="tw-z-2 tw-py-8-px tw-px-12-px" [formControlName]="formControllerName" [defaultLabel]="placeholder" [ngClass]="[form.controls[formControllerName].invalid && isFieldMandatory ? 'error-box' : 'normal-box']" [dropdownIcon]="'pi pi-chevron-down ' + brandingConfig.brandId">
+        <p-multiSelect [options]="options" styleClass="tw-z-2 tw-py-8-px tw-px-12-px" [formControlName]="formControllerName" [defaultLabel]="placeholder" 
+        [ngClass]="[form.controls[formControllerName].invalid && isFieldMandatory ? 'error-box' : 'normal-box']" 
+        [dropdownIcon]="'pi pi-chevron-down ' + brandingConfig.brandId"
+        (onChange)="onMultiSelectChange()">
             <ng-template let-value pTemplate="selectedItems" >
                 <div *ngIf="form.value[formControllerName]?.length>0" class="tw-flex">
                     <p *ngFor="let name of value;let i = index">{{ name | titlecase | snakeCaseToSpaceCase }}<span *ngIf="i !== value?.length-1">,&nbsp;</span></p>
diff --git a/src/app/shared/components/configuration/configuration-multi-select/configuration-multi-select.component.ts b/src/app/shared/components/configuration/configuration-multi-select/configuration-multi-select.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { FormBuilder, FormGroup } from '@angular/forms';
 import { brandingConfig } from 'src/app/branding/branding-config';
 
@@ -31,6 +31,8 @@ export class ConfigurationMultiSelectComponent implements OnInit {
 
   @Input() isCloneSettingView: boolean;
 
+  @Output() changeInMultiSelect = new EventEmitter();
+
   currentlyDragging: string | null;
 
   selected: any[];
@@ -43,6 +45,10 @@ export class ConfigurationMultiSelectComponent implements OnInit {
     private formBuilder: FormBuilder
   ) { }
 
+  onMultiSelectChange() {
+    this.changeInMultiSelect.emit();
+  }
+
 //   DragStart(memo: string) {
 //     This.currentlyDragging = memo;
 // }
diff --git a/src/app/shared/components/configuration/configuration-select-field/configuration-select-field.component.html b/src/app/shared/components/configuration/configuration-select-field/configuration-select-field.component.html
@@ -145,9 +145,16 @@ <h5 *ngIf="formControllerName === 'cccExportType' && brandingConfig.brandId ===
             <div class="tw-pt-2 defaultFields">
                 <p-dropdown appendTo="body" [options]="destinationAttributes" optionLabel="name"
                 [formControlName]="formControllerName" [placeholder]="placeholder" [ngClass]="{'selectedItem': form.controls[formControllerName].value, 'filterDropdown': !form.controls[formControllerName].value, 'showClearIcon': showClearIcon && !isDisabled && form.controls[formControllerName].value}">
+                    <ng-template let-option pTemplate="item">
+                        <div #textElement
+                            [ngStyle]="{'white-space': 'nowrap', 'overflow': 'hidden', 'text-overflow': 'ellipsis', 'max-width': '16rem'}"
+                            [pTooltip]="isOverflowing(textElement) ? option.name : null" tooltipPosition="top">
+                            {{ brandingConfig.brandId === 'co' ? (option.name | sentenceCase) : (option.name)}}
+                        </div>
+                    </ng-template>
                     <ng-template pTemplate="selectedItem" let-item>
                         <p>
-                            {{ item.name }}
+                            {{ brandingConfig.brandId === 'co' ? (item.name | sentenceCase) : (item.name)}}
                         </p>
                         <app-svg-icon *ngIf="showClearIcon && !isDisabled" [svgSource]="'cross-medium'" [c1SvgSource]="'grv-cross-filled-medium'" (click)="removeFilter(form.controls[formControllerName])" [height]="'18px'" [width]="'18px'" [styleClasses]="'tw-mt-4-px'"></app-svg-icon>
                     </ng-template>
