c1: QA fixes - Calendar (#551)

* C1: QA Fixes - 4 | Multiselect * fix bg * c1: QA Fixes - Toggle (#538) * C1 qa toast (#540) * c1: QA Fixes - Toggle * c1: Toast * c1: QA fixes | Chips (#542) * fix travelperk btn * c1: QA fixes | list views * c1: QA fixes - Border * c1: QA fixes | list views (#548) * C1 qa borders (#549) * c1: QA fixes | list views * c1: QA fixes - Border * c1: QA fixes - Calendar * fix search * comment out stuffs * fix icon * few more
fylein · Feb 14, 2024 · 86563b7 · 86563b7
1 parent 004b0d6
commit 86563b7
Show file tree

Hide file tree

Showing 18 changed files with 157 additions and 20 deletions.
diff --git a/src/app/integrations/bamboo-hr/configuration/configuration.component.html b/src/app/integrations/bamboo-hr/configuration/configuration.component.html
@@ -48,13 +48,17 @@
                                 <ng-template pTemplate="filter" let-options="options">
                                     <div *ngIf="emails.length" class="p-inputgroup">
                                         <div class="p-input-icon-left">
-                                            <app-svg-icon [svgSource]="'search-medium'" [height]="'18px'" [width]="'18px'"></app-svg-icon>
+                                            <i>
+                                                <app-svg-icon [svgSource]="'search-medium'" [height]="'18px'" [width]="'18px'"></app-svg-icon>
+                                            </i>
                                             <input type="text" class="!tw-h-32-px !tw-w-300-px" (keyup)="options.filter($event)"
                                                 pInputText placeholder="Search by Name / Email" formControlName="search" />
-                                            <app-svg-icon [svgSource]="'cross'" [width]="'24px'" [height]="'24px'"
-                                                [styleClasses]="'tw-text-faded-text-color tw-absolute tw-top-10-px tw-right-12-px tw-cursor-pointer'"
-                                                (iconClick)="clearSearch(options)">
-                                            </app-svg-icon>
+                                            <i>
+                                                <app-svg-icon [svgSource]="'cross'" [width]="'24px'" [height]="'24px'"
+                                                    [styleClasses]="'tw-text-faded-text-color tw-absolute tw-top-10-px tw-right-12-px tw-cursor-pointer'"
+                                                    (iconClick)="clearSearch(options)">
+                                                </app-svg-icon>
+                                            </i>
                                         </div>
                                     </div>
                                 </ng-template>

diff --git a/...components/configuration/email-multi-select-field/email-multi-select-field.component.html b/...components/configuration/email-multi-select-field/email-multi-select-field.component.html
@@ -31,10 +31,14 @@ <h5 class="!tw-text-faded-text-color tw-text-14-px tw-pt-8-px !tw-font-400 !tw-l
             <ng-template pTemplate="filter" let-options="options">
                 <div *ngIf="emails.length" class="p-inputgroup">
                     <div class="p-input-icon-left p-input-icon-right">
-                        <app-svg-icon [svgSource]="'search-medium'" height]="'18px'" [width]="'18px'"></app-svg-icon>
+                        <i>
+                            <app-svg-icon [svgSource]="'search-medium'" [height]="'18px'" [width]="'18px'"></app-svg-icon>
+                        </i>
                         <input type="text" class="!tw-h-32-px !tw-w-270-px" (keyup)="options.filter($event)"
                             pInputText placeholder="Search by Name / Email" formControlName="search" />
-                        <app-svg-icon [svgSource]="'cross-medium'" class="tw-cursor-pointer tw-text-16-px" (click)="clearSearch(options)" [height]="'16px'" [width]="'16px'"></app-svg-icon>
+                        <i>
+                            <app-svg-icon [svgSource]="'cross-medium'" class="tw-cursor-pointer tw-text-16-px" (click)="clearSearch(options)" [height]="'16px'" [width]="'16px'"></app-svg-icon>
+                        </i>
                     </div>
                 </div>
             </ng-template>

diff --git a/src/app/shared/components/core/svg-icon/svg-icon.component.ts b/src/app/shared/components/core/svg-icon/svg-icon.component.ts
@@ -10,11 +10,13 @@ const ICON_MAPPING = {
   'arrow-tail-down': 'grv-arrow-down',
   'arrow-tail-left-medium': 'grv-arrow-left-medium',
   'arrow-tail-right-medium': 'grv-arrow-right-medium',
+  'arrow-tail-right-small': 'grv-arrow-right-small',
   'arrow-tail-up-down': 'grv-sort',
   'arrow-tail-up-medium': 'grv-arrow-up-medium',
   'arrow-tail-up': 'grv-arrow-up',
   'bin': 'grv-trash',
   'calendar': 'grv-calendar',
+  'calendar-medium': 'grv-calendar-medium',
   'check-circle-outline-small': 'grv-checkmark-encircled-small',
   'check-circle-outline': 'grv-checkmark-encircled',
   'check-circle-outline-medium': 'grv-checkmark-encircled-medium',

diff --git a/src/app/shared/components/export-log/export-log-filter/export-log-filter.component.html b/src/app/shared/components/export-log/export-log-filter/export-log-filter.component.html
@@ -5,6 +5,49 @@
         <div>
             <app-svg-icon [svgSource]="'calendar'" [width]="'24px'" [height]="'24px'" [styleClasses]="'tw-text-placeholder'"></app-svg-icon>
         </div>
+        <!-- <p-calendar (click)="showCalendar($event)" placeholder="Custom dates" formControlName="start" (onClose)="getDates()" [touchUI]="isCalendarVisible" selectionMode="range" [readonlyInput]="true" inputId="range">
+            <ng-template pTemplate="header">
+                <div class="tw-flex tw-items-center tw-justify-center">
+                    <div class="tw-pr-8-px">
+                        <button type="button" class="p-button outline-sm tw-font-nav-link-font-weight">
+                            This week
+                        </button>
+                    </div>
+                    <div>
+                        <button type="button" class="p-button outline-sm tw-font-nav-link-font-weight">
+                            Last week
+                        </button>
+                    </div>
+                </div>
+                <div class="tw-pt-10-px tw-flex tw-items-center tw-justify-center">
+                    <div class="tw-pr-8-px">
+                        <button type="button" class="p-button outline-sm tw-whitespace-nowrap tw-font-nav-link-font-weight">
+                            This month
+                        </button>
+                    </div>
+                    <div>
+                        <button type="button" class="p-button outline-sm tw-whitespace-nowrap tw-font-nav-link-font-weight">
+                            Last month
+                        </button>
+                    </div>
+                </div>
+
+                <div class="tw-pt-14-px tw-h-32-px tw-rounded-4-px">
+                    <span class="tw-text-calendar-day-text-color tw-text-12-px tw-font-nav-link-font-weight">
+                        Or, Select Date range
+                    </span>
+                </div>
+
+                <div class="tw-pt-16-px tw-pb-8-px">
+                    <div class="tw-flex tw-items-center tw-text-date-picker-placeholder-text tw-border-1-px tw-border-solid tw-border-date-picker-border tw-py-4-px tw-px-12-px">
+                        <p class="tw-pr-18-px">Start date</p>
+                        <app-svg-icon [svgSource]="'arrow-tail-right-small'" [width]="'12px'" [height]="'12px'" [styleClasses]="'tw-text-date-picker-placeholder-text tw-pr-10-px'" [isTextColorAllowed]="true"></app-svg-icon>
+                        <p>End date</p>
+                        <app-svg-icon [svgSource]="'calendar-medium'" [width]="'18px'" [height]="'18px'" [styleClasses]="'tw-text-date-picker-placeholder-text tw-pl-22-px'" [isTextColorAllowed]="true"></app-svg-icon>
+                    </div>
+                </div>
+            </ng-template>
+        </p-calendar> -->
         <p-dropdown placeholder="Select date range" appendTo="body" [options]="dateOptions"
         formControlName="dateRange" (click)="dropDownWatcher()" (onFocus)="isDateFieldFocused = true" (onBlur)="isDateFieldFocused = false"
         [ngClass]="{'selectedItem': exportLogForm.controls.dateRange.value, 'filterDropdown': !exportLogForm.controls.dateRange.value}">
@@ -27,10 +70,11 @@
             </ng-template>
             <ng-template let-date pTemplate="item">
                 <div>
-                    <p-calendar (click)="showCalendar($event)" placeholder="Custom dates" formControlName="start" (onClose)="getDates()" [touchUI]="isCalendarVisible" *ngIf="date.dateRange === presentDate" selectionMode="range" [readonlyInput]="true" inputId="range"></p-calendar>
+                    <p-calendar (click)="showCalendar($event)" placeholder="Custom dates" formControlName="start" (onClose)="getDates()" [touchUI]="isCalendarVisible" *ngIf="date.dateRange === presentDate" selectionMode="range" [readonlyInput]="true" inputId="range">
+                    </p-calendar>
                     <p class="tw-text-sub-text-color tw-text-14-px" [ngClass]="{'!tw-text-mandatory-field-color' : exportLogForm.controls.dateRange.value === date }" *ngIf="date.dateRange !== presentDate">{{ date.dateRange | titlecase | snakeCaseToSpaceCase }}</p>
-                    <p class="tw-text-sub-text-color tw-text-12-px" *ngIf="date.dateRange !== presentDate && date.dateRange !== 'Today'">{{date.startDate | date : 'MMM dd, yyyy'}} - {{date.endDate | date : 'MMM dd, yyyy'}}</p>
-                    <p class="tw-text-sub-text-color tw-text-12-px" *ngIf="date.dateRange === 'Today'">{{date.startDate | date : 'MMM dd, yyyy'}}</p>
+                    <!-- <p class="tw-text-sub-text-color tw-text-12-px" *ngIf="date.dateRange !== presentDate && date.dateRange !== 'Today'">{{date.startDate | date : 'MMM dd, yyyy'}} - {{date.endDate | date : 'MMM dd, yyyy'}}</p> -->
+                    <!-- <p class="tw-text-sub-text-color tw-text-12-px" *ngIf="date.dateRange === 'Today'">{{date.startDate | date : 'MMM dd, yyyy'}}</p> -->
                 </div>
             </ng-template> 
         </p-dropdown>

diff --git a/src/app/shared/components/export-log/export-log-filter/export-log-filter.component.scss b/src/app/shared/components/export-log/export-log-filter/export-log-filter.component.scss
@@ -36,4 +36,8 @@
 
 :host ::ng-deep .p-dialog {
     @apply tw-max-h-full tw-m-0 #{!important};
+}
+
+:host ::ng-deep .p-button.outline-sm {
+    @apply tw-w-100-px tw-justify-center #{!important};
 }
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
@@ -25,13 +25,7 @@
                     [filter]="true"
                     filterBy="value">
                     <ng-template pTemplate="filter" let-options="options">
-                        <div class="p-inputgroup">
-                            <div class="p-input-icon-left">
-                                <app-svg-icon [svgSource]="'search-medium'" [width]="'18px'" [height]="'18px'"></app-svg-icon>
-                                <input type="text" class="!tw-h-32-px !tw-w-260-px" 
-                                (keyup)="options.filter($event)" pInputText />
-                            </div>
-                        </div>
+                        <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>
                 </p-dropdown>
             </td>

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
@@ -1,4 +1,5 @@
 import { Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';
+import { FormControl, FormGroup } from '@angular/forms';
 import { brandingFeatureConfig } from 'src/app/branding/branding-config';
 import { DestinationAttribute } from 'src/app/core/models/db/destination-attribute.model';
 import { ExtendedGenericMapping } from 'src/app/core/models/db/extended-generic-mapping.model';
@@ -40,7 +41,11 @@ export class GenericMappingTableComponent implements OnInit {
 
   @Input() isDashboardMappingResolve: boolean;
 
-  isSearchFocused: boolean;
+  optionsCopy: DestinationAttribute[];
+
+  form: FormGroup = new FormGroup({
+    searchOption: new FormControl('')
+  });
 
   readonly brandingFeatureConfig = brandingFeatureConfig;
 
@@ -57,6 +62,10 @@ export class GenericMappingTableComponent implements OnInit {
     }
   }
 
+  simpleSearch(query: string) {
+    this.destinationOptions = this.optionsCopy.filter(attribute => attribute.value.toLowerCase().includes(query.toLowerCase()));
+  }
+
   getDropdownValue(genericMapping: ExtendedGenericMapping) {
     if (genericMapping.employeemapping?.length) {
       if (this.employeeFieldMapping===FyleField.VENDOR) {
@@ -134,6 +143,7 @@ export class GenericMappingTableComponent implements OnInit {
   }
 
   ngOnInit(): void {
+    this.optionsCopy = this.destinationOptions.concat();
   }
 
 }
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)' }">
-    <i class="pi pi-search"></i>
+    <app-svg-icon [svgSource]="'search-medium'" [width]="'18px'" [height]="'18px'" [styleClasses]="'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/assets/icons/arrow-tail-right-small.svg b/src/assets/icons/arrow-tail-right-small.svg
diff --git a/src/assets/icons/calendar-medium.svg b/src/assets/icons/calendar-medium.svg
diff --git a/src/assets/icons/co/grv-arrow-right.svg → ...ssets/icons/co/grv-arrow-right-medium.svg b/src/assets/icons/co/grv-arrow-right.svg → ...ssets/icons/co/grv-arrow-right-medium.svg
diff --git a/src/assets/icons/co/grv-arrow-right-small.svg b/src/assets/icons/co/grv-arrow-right-small.svg
diff --git a/src/assets/icons/co/grv-calendar-medium.svg b/src/assets/icons/co/grv-calendar-medium.svg
diff --git a/src/assets/sprites/sprite.svg b/src/assets/sprites/sprite.svg
diff --git a/src/assets/themes/co/c1dl.scss b/src/assets/themes/co/c1dl.scss
@@ -859,5 +859,7 @@
     --toggle-width: 38px;
 
     --toggle-height: 22px;
+
+    --border-date-picker-border: var(--border-primary);
   }
 }
diff --git a/src/assets/themes/fyle/fdl.scss b/src/assets/themes/fyle/fdl.scss
@@ -324,5 +324,15 @@
     --lv-table-header-border-color: var(--border-secondary);
 
     --lv-table-border-color: var(--border-tertiary);
+
+    --calendar-day-text-color: var(--text-label);
+
+    --border-date-picker-border: var(--border-secondary);
+
+    --date-picker-placeholder-text: var(--text-placeholder);
+
+    --calendar-header-text-color: var(--text-primary);
+
+    --calendar-date-default-text-color: var(--text-secondary);
   }
 }