configuration select field mapping dropdown and search fix (#564)

configuration select field mapping dropdown and search fix
fylein · Feb 15, 2024 · 64beb32 · 64beb32
1 parent 04c8709
commit 64beb32
Show file tree

Hide file tree

Showing 5 changed files with 8 additions and 4 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
@@ -28,11 +28,11 @@ <h5 *ngIf="(formControllerName === 'reimbursableExportType' || formControllerNam
                         <div #textElement
                             [ngStyle]="{'white-space': 'nowrap', 'overflow': 'hidden', 'text-overflow': 'ellipsis', 'max-width': '16rem'}"
                             [pTooltip]="isOverflowing(textElement) ? options.value: null" tooltipPosition="top">
-                            {{options.value}}
+                            {{options[optionLabel]}}
                         </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>
+                        <app-search [form]="form" [isDropdown]="true" [placeholder]="'Search'" [styleClasses]="'tw-w-[100%] tw-h-dropdown-option-height tw-bg-white'" (handleSimpleSearch)="simpleSearch($event)"></app-search>
                     </ng-template>
                 </p-dropdown>
             </div>

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
@@ -32,7 +32,7 @@
                         </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>
+                        <app-search [form]="form" [placeholder]="'Search'" [isDropdown]="true" [styleClasses]="'tw-w-[100%] tw-h-dropdown-option-height tw-bg-white'" (handleSimpleSearch)="simpleSearch($event)"></app-search>
                     </ng-template>
                 </p-dropdown>
             </td>

diff --git a/src/app/shared/components/input/search/search.component.html b/src/app/shared/components/input/search/search.component.html
@@ -1,5 +1,5 @@
 <span [formGroup]="form" [class]="'custom-search-field ' + styleClasses" [ngStyle]="{ 'border-color': isSearchFocused ? 'var(--search-focused-filled-border)' : 'var(--search-default-border)' }">
-    <app-svg-icon [svgSource]="'search-medium'" [width]="'18px'" [height]="'18px'" [styleClasses]="'tw-text-icon-muted tw-pr-8-px'"></app-svg-icon>
+    <app-svg-icon [isTextColorAllowed]="true" [svgSource]="'search-medium'" [width]="'18px'" [height]="'18px'" [styleClasses]="isSearchFocused && isDropdown ? '!tw-text-search-focused-search-icon !tw-pr-8-px' : '!tw-text-icon-muted !tw-pr-8-px'"></app-svg-icon>
     <input [formControlName]="formControllerName" class="tw-pb-1 tw-pt-1 tw-text-14-px tw-text-search-default-filled-text" type="text" (focus)="isSearchFocused = true" (blur)="isSearchFocused = false" [placeholder]="placeholder" />
     <app-svg-icon *ngIf="form.value[formControllerName]" (iconClick)="clearSearch()" [svgSource]="'cross-medium'" [c1SvgSource]="'grv-cross-filled-medium'" [width]="'18px'" [height]="'18px'" [styleClasses]="'tw-cursor-pointer tw-text-icon-muted'"></app-svg-icon>
 </span>
diff --git a/src/app/shared/components/input/search/search.component.ts b/src/app/shared/components/input/search/search.component.ts
@@ -16,6 +16,8 @@ export class SearchComponent implements OnInit {
 
   @Input() formControllerName: string = 'searchOption';
 
+  @Input() isDropdown:boolean = false;
+
   @Output() handleSimpleSearch = new EventEmitter<any>();
 
   isSearchFocused: boolean;

diff --git a/src/assets/themes/fyle/fdl.scss b/src/assets/themes/fyle/fdl.scss
@@ -336,5 +336,7 @@
     --calendar-date-default-text-color: var(--text-secondary);
 
     --tooltip-bg: var(--bg-secondary);
+
+    --search-focused-search-icon: var(--icon-muted);
   }
 }