Mapping dropdown fix (#558)

Mapping dropdown fix
fylein · Feb 15, 2024 · 04c8709 · 04c8709
1 parent 3653c25
commit 04c8709
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 2 deletions.
diff --git a/...onents/configuration/configuration-select-field/configuration-select-field.component.html b/...onents/configuration/configuration-select-field/configuration-select-field.component.html
@@ -24,6 +24,13 @@ <h5 *ngIf="(formControllerName === 'reimbursableExportType' || formControllerNam
                     (onHide)="clearSearch()" 
                     [emptyFilterMessage]="isOptionSearchInProgress ? 'Searching...' : 'No results found'" 
                     [dropdownIcon]="isOptionSearchInProgress ? 'pi pi-spinner pi-spin' : 'pi pi-chevron-down ' + brandingConfig.brandId">
+                    <ng-template let-options pTemplate="item">
+                        <div #textElement
+                            [ngStyle]="{'white-space': 'nowrap', 'overflow': 'hidden', 'text-overflow': 'ellipsis', 'max-width': '16rem'}"
+                            [pTooltip]="isOverflowing(textElement) ? options.value: null" tooltipPosition="top">
+                            {{options.value}}
+                        </div>
+                    </ng-template>
                     <ng-template *ngIf="!isAdvanceSearchEnabled" pTemplate="filter" let-dropdownOptions="options">
                         <app-search [form]="form" [placeholder]="'Search'" [styleClasses]="'tw-w-[100%] tw-h-dropdown-option-height tw-bg-white'" (handleSimpleSearch)="simpleSearch($event)"></app-search>
                     </ng-template>

diff --git a/...ared/components/helper/mapping/generic-mapping-table/generic-mapping-table.component.html b/...ared/components/helper/mapping/generic-mapping-table/generic-mapping-table.component.html
@@ -24,6 +24,13 @@
                     (onChange)="save(mapping, $event); getDropdownValue(mapping)"
                     [filter]="true"
                     filterBy="value">
+                    <ng-template let-options pTemplate="item">
+                        <div #textElement
+                            [ngStyle]="{'white-space': 'nowrap', 'overflow': 'hidden', 'text-overflow': 'ellipsis', 'max-width': '16rem'}"
+                            [pTooltip]="isOverflowing(textElement) ? options.value: null" tooltipPosition="top">
+                            {{options.value}}
+                        </div>
+                    </ng-template>
                     <ng-template pTemplate="filter" let-options="options">
                         <app-search [form]="form" [placeholder]="'Search'" [styleClasses]="'tw-w-[100%] tw-h-dropdown-option-height tw-bg-white'" (handleSimpleSearch)="simpleSearch($event)"></app-search>
                     </ng-template>

diff --git a/...shared/components/helper/mapping/generic-mapping-table/generic-mapping-table.component.ts b/...shared/components/helper/mapping/generic-mapping-table/generic-mapping-table.component.ts
@@ -55,6 +55,10 @@ export class GenericMappingTableComponent implements OnInit {
     private workspaceService: WorkspaceService
   ) { }
 
+  isOverflowing(element: any): boolean {
+    return element.offsetWidth < element.scrollWidth;
+  }
+
   tableDropdownWidth() {
     const element = document.querySelector('.p-dropdown-panel.p-component.ng-star-inserted') as HTMLElement;
     if (element) {

diff --git a/src/assets/sprites/sprite.svg b/src/assets/sprites/sprite.svg
diff --git a/src/styles.scss b/src/styles.scss
@@ -263,7 +263,7 @@ p {
 
 .p-dropdown-panel .p-dropdown-items .p-dropdown-item, 
 .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight {
-    @apply tw-h-dropdown-option-height tw-py-8-px tw-pl-14-px tw-text-14-px tw-rounded-4-px  #{!important};
+    @apply tw-h-dropdown-option-height tw-flex tw-items-center tw-py-8-px tw-pl-14-px tw-text-14-px tw-rounded-4-px  #{!important};
 }
 
 .p-dropdown.p-focus {