Clear Icon for Payment Sync (#829)

* Clear Icon for Payment Sync * pr fixed * updated css class * fixed css
fylein · May 31, 2024 · d3fba3b · d3fba3b
1 parent 69a5376
commit d3fba3b
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 10 deletions.
diff --git a/...pp/integrations/qbo/qbo-shared/qbo-advanced-settings/qbo-advanced-settings.component.html b/...pp/integrations/qbo/qbo-shared/qbo-advanced-settings/qbo-advanced-settings.component.html
@@ -77,7 +77,8 @@
                     [label]="brandingContent.paymentSyncLabel"
                     [subLabel]="'When expense is marked paid in ' + brandingConfig.brandName + ' the transaction in QuickBooks Online will be automatically be updated to Paid and vice versa.'"
                     [placeholder]="'Select how payments should be synced for reimbursable expenses'"
-                    [formControllerName]="'paymentSync'">
+                    [formControllerName]="'paymentSync'"
+                    [showClearIcon]="true">
                 </app-configuration-select-field>
 
                 <app-configuration-select-field *ngIf="advancedSettingForm.value.paymentSync && advancedSettingForm.value.paymentSync === 'fyle_to_qbo'"

diff --git a/...onents/configuration/configuration-select-field/configuration-select-field.component.html b/...onents/configuration/configuration-select-field/configuration-select-field.component.html
@@ -51,22 +51,25 @@ <h5 *ngIf="formControllerName === 'cccExportType' && brandingConfig.brandId ===
                         'selectedItem': form.controls[formControllerName].value,
                         'filterDropdown': !form.controls[formControllerName].value,
                         'showClearIcon': showClearIcon && !isDisabled && form.controls[formControllerName].value
-                    }" [disabled]="isDisabled"
-                    >
+                    }" [disabled]="isDisabled">
+
                     <ng-template let-option pTemplate="item">
                         <div #textElement
                             [ngStyle]="{'white-space': 'nowrap', 'overflow': 'hidden', 'text-overflow': 'ellipsis', 'max-width': '16rem'}"
                             [pTooltip]="isOverflowing(textElement) ? option.label : null" tooltipPosition="top">
-                            {{ brandingConfig.brandId ==='co' ? (option.label| sentenceCase) : (option.label)}}
+                            {{ brandingConfig.brandId === 'co' ? (option.label | sentenceCase) : (option.label)}}
                         </div>
                     </ng-template>
+
                     <ng-template pTemplate="selectedItem" let-item>
-                        <span>
-                            {{ brandingConfig.brandId ==='co' ? (item.label| sentenceCase) : (item.label)}}
-                        </span>
-                        <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>
-                </p-dropdown>
+                        <div class="selected-item-container">
+                            <span class="selected-item-text">
+                                {{ brandingConfig.brandId === 'co' ? (item.label | sentenceCase) : (item.label)}}
+                            </span>
+                            <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>
+                        </div>
+                    </ng-template>                    
+                </p-dropdown>                
                     <div *ngIf="showExportPreview && form.controls[formControllerName].value" class="sub-text tw-text-pretty tw-pt-3-px">
                         <a class="tw-text-link-primary !tw-cursor-pointer" (click)="showExportPreviewDialog(form.controls[formControllerName].value)">Preview</a>
                         <span *ngIf="brandingConfig.brandId !== 'co'"> how it looks on {{appName}}</span>

diff --git a/...onents/configuration/configuration-select-field/configuration-select-field.component.scss b/...onents/configuration/configuration-select-field/configuration-select-field.component.scss
@@ -65,3 +65,12 @@
 :host ::ng-deep .p-disabled {
     @apply tw-text-input-read-only-text tw-bg-select-disabled-bg tw-border-select-disabled-border tw-border-solid tw-opacity-100 #{!important};
 }
+
+.selected-item-container {
+    @apply tw-flex tw-content-center tw-justify-between tw-w-full #{!important};
+}
+
+  .selected-item-text {
+    @apply tw-whitespace-nowrap tw-overflow-hidden tw-text-ellipsis #{!important};
+}
+