tango-app-ui-analyse-trax 3.6.0 → 3.6.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2022/lib/components/add-checklist/add-checklist.component.mjs +5 -3
- package/esm2022/lib/components/checklist-configure/checklist-configure.component.mjs +2 -2
- package/esm2022/lib/components/export-gallery/export-gallery.component.mjs +7 -2
- package/esm2022/lib/components/eye-test-audit/eye-test/eye-test.component.mjs +11 -17
- package/esm2022/lib/components/eye-test-audit/group-select/group-select.component.mjs +3 -3
- package/esm2022/lib/components/eye-test-audit/reactive-select/reactive-select.component.mjs +3 -3
- package/esm2022/lib/components/gallery/gallery.component.mjs +169 -42
- package/esm2022/lib/components/task-configure/task-configure.component.mjs +2 -2
- package/esm2022/lib/services/trax.service.mjs +4 -1
- package/fesm2022/{tango-app-ui-analyse-trax-eye-test-audit.module-mp5zGDN4.mjs → tango-app-ui-analyse-trax-eye-test-audit.module-cw94cqNa.mjs} +17 -23
- package/fesm2022/tango-app-ui-analyse-trax-eye-test-audit.module-cw94cqNa.mjs.map +1 -0
- package/fesm2022/{tango-app-ui-analyse-trax-tango-app-ui-analyse-trax-DKvlR9IQ.mjs → tango-app-ui-analyse-trax-tango-app-ui-analyse-trax-oG6ldS2p.mjs} +186 -49
- package/fesm2022/tango-app-ui-analyse-trax-tango-app-ui-analyse-trax-oG6ldS2p.mjs.map +1 -0
- package/fesm2022/tango-app-ui-analyse-trax.mjs +1 -1
- package/lib/components/eye-test-audit/eye-test-audit/start-audit/start-audit.component.d.ts +2 -2
- package/lib/components/flags/flags.component.d.ts +2 -2
- package/lib/components/flags-info/flags-info.component.d.ts +3 -3
- package/lib/components/flags-new/flags-new.component.d.ts +2 -2
- package/lib/components/gallery/gallery.component.d.ts +23 -2
- package/lib/components/manage-task/manage-task.component.d.ts +1 -1
- package/lib/components/orders/orders.component.d.ts +1 -1
- package/lib/components/reports/reports.component.d.ts +2 -2
- package/lib/components/task-configure/task-configure.component.d.ts +1 -1
- package/lib/services/trax.service.d.ts +1 -0
- package/package.json +1 -1
- package/fesm2022/tango-app-ui-analyse-trax-eye-test-audit.module-mp5zGDN4.mjs.map +0 -1
- package/fesm2022/tango-app-ui-analyse-trax-tango-app-ui-analyse-trax-DKvlR9IQ.mjs.map +0 -1
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Injectable, forwardRef, EventEmitter,
|
|
2
|
+
import { Injectable, forwardRef, EventEmitter, Component, Input, Output, HostListener, ChangeDetectionStrategy, ViewChild, NgModule } from '@angular/core';
|
|
3
3
|
import * as i6 from '@angular/common';
|
|
4
4
|
import { CommonModule } from '@angular/common';
|
|
5
5
|
import * as i1$2 from '@angular/router';
|
|
@@ -10,7 +10,7 @@ import 'dayjs/locale/en';
|
|
|
10
10
|
import { BehaviorSubject, takeUntil, Subject } from 'rxjs';
|
|
11
11
|
import * as i1$1 from '@angular/forms';
|
|
12
12
|
import { NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule } from '@angular/forms';
|
|
13
|
-
import { T as TraxService } from './tango-app-ui-analyse-trax-tango-app-ui-analyse-trax-
|
|
13
|
+
import { T as TraxService } from './tango-app-ui-analyse-trax-tango-app-ui-analyse-trax-oG6ldS2p.mjs';
|
|
14
14
|
import * as FileSaver from 'file-saver';
|
|
15
15
|
import * as XLSX from 'xlsx';
|
|
16
16
|
import * as i1 from '@angular/common/http';
|
|
@@ -204,11 +204,11 @@ class ReactiveSelectComponent {
|
|
|
204
204
|
this.apiService.dropDownTrigger.next(this.instanceId);
|
|
205
205
|
}
|
|
206
206
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ReactiveSelectComponent, deps: [{ token: EyeTestAuditService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
207
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ReactiveSelectComponent, selector: "lib-reactive-select", inputs: { idField: "idField", nameField: "nameField", label: "label", data: "data" }, outputs: { itemChange: "itemChange" }, host: { listeners: { "document:click": "onClick($event)" } }, providers: [SELECT_CONTROL_VALUE_ACCESSOR], ngImport: i0, template: "<div class=\"custom-select\">\r\n <div class=\"form-group\">\r\n <label *ngIf=\"label\" class=\"form-label\">{{label}}</label>\r\n <div class=\"position-relative\">\r\n <div (click)=\"openDropdown()\" [ngClass]=\"isDisabled ? 'disable' : ''\" class=\"form-select dropselect ellipse1\">\r\n {{selected?.[nameField]}}</div>\r\n <div *ngIf=\"isOpened\" class=\"card py-2 w-100 position-absolute
|
|
207
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ReactiveSelectComponent, selector: "lib-reactive-select", inputs: { idField: "idField", nameField: "nameField", label: "label", data: "data" }, outputs: { itemChange: "itemChange" }, host: { listeners: { "document:click": "onClick($event)" } }, providers: [SELECT_CONTROL_VALUE_ACCESSOR], ngImport: i0, template: "<div class=\"custom-select\">\r\n <div class=\"form-group\">\r\n <label *ngIf=\"label\" class=\"form-label\">{{label}}</label>\r\n <div class=\"position-relative\">\r\n <div (click)=\"openDropdown()\" [ngClass]=\"isDisabled ? 'disable' : ''\" class=\"form-select dropselect ellipse1\">\r\n {{selected?.[nameField]}}</div>\r\n <div *ngIf=\"isOpened\" class=\"card py-2 w-100 position-absolute start-0 z-1 drop-list\">\r\n <ul class=\"list-unstyled mb-2\">\r\n <li *ngFor=\"let item of data\" (click)=\"onSelect(item)\"\r\n [ngClass]=\"item?.[idField] === selected?.[idField] ? 'active' : ''\"\r\n class=\"text px-5 items cursor-pointer py-4 \">\r\n {{item?.[nameField]}}\r\n </li>\r\n </ul>\r\n </div>\r\n </div>\r\n </div>\r\n</div>", styles: [".custom-select{min-width:auto}.custom-select .items:hover,.custom-select .tems.focus,.custom-select .items.active,.custom-select .camera.focus-visible{background:var(--Gray-50, #F9FAFB)}.custom-select .drop-list{max-height:300px;overflow-y:auto}.custom-select .dropselect{color:var(--Gray-500, #667085);font-family:Inter;font-size:16px;font-style:normal;font-weight:400;line-height:24px;height:45px!important;cursor:default;white-space:nowrap;overflow:hidden}.custom-select .text{color:var(--Gray-700, #344054);font-size:14px;font-weight:500;line-height:20px}.custom-select .disable{pointer-events:none;background-color:#f9fafb!important}.ellipse1{min-width:auto;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"], dependencies: [{ kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
208
208
|
}
|
|
209
209
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ReactiveSelectComponent, decorators: [{
|
|
210
210
|
type: Component,
|
|
211
|
-
args: [{ selector: 'lib-reactive-select', providers: [SELECT_CONTROL_VALUE_ACCESSOR], template: "<div class=\"custom-select\">\r\n <div class=\"form-group\">\r\n <label *ngIf=\"label\" class=\"form-label\">{{label}}</label>\r\n <div class=\"position-relative\">\r\n <div (click)=\"openDropdown()\" [ngClass]=\"isDisabled ? 'disable' : ''\" class=\"form-select dropselect ellipse1\">\r\n {{selected?.[nameField]}}</div>\r\n <div *ngIf=\"isOpened\" class=\"card py-2 w-100 position-absolute
|
|
211
|
+
args: [{ selector: 'lib-reactive-select', providers: [SELECT_CONTROL_VALUE_ACCESSOR], template: "<div class=\"custom-select\">\r\n <div class=\"form-group\">\r\n <label *ngIf=\"label\" class=\"form-label\">{{label}}</label>\r\n <div class=\"position-relative\">\r\n <div (click)=\"openDropdown()\" [ngClass]=\"isDisabled ? 'disable' : ''\" class=\"form-select dropselect ellipse1\">\r\n {{selected?.[nameField]}}</div>\r\n <div *ngIf=\"isOpened\" class=\"card py-2 w-100 position-absolute start-0 z-1 drop-list\">\r\n <ul class=\"list-unstyled mb-2\">\r\n <li *ngFor=\"let item of data\" (click)=\"onSelect(item)\"\r\n [ngClass]=\"item?.[idField] === selected?.[idField] ? 'active' : ''\"\r\n class=\"text px-5 items cursor-pointer py-4 \">\r\n {{item?.[nameField]}}\r\n </li>\r\n </ul>\r\n </div>\r\n </div>\r\n </div>\r\n</div>", styles: [".custom-select{min-width:auto}.custom-select .items:hover,.custom-select .tems.focus,.custom-select .items.active,.custom-select .camera.focus-visible{background:var(--Gray-50, #F9FAFB)}.custom-select .drop-list{max-height:300px;overflow-y:auto}.custom-select .dropselect{color:var(--Gray-500, #667085);font-family:Inter;font-size:16px;font-style:normal;font-weight:400;line-height:24px;height:45px!important;cursor:default;white-space:nowrap;overflow:hidden}.custom-select .text{color:var(--Gray-700, #344054);font-size:14px;font-weight:500;line-height:20px}.custom-select .disable{pointer-events:none;background-color:#f9fafb!important}.ellipse1{min-width:auto;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"] }]
|
|
212
212
|
}], ctorParameters: () => [{ type: EyeTestAuditService }, { type: i0.ChangeDetectorRef }], propDecorators: { idField: [{
|
|
213
213
|
type: Input
|
|
214
214
|
}], nameField: [{
|
|
@@ -583,11 +583,11 @@ class GroupSelectComponent {
|
|
|
583
583
|
return this.filteredValues.every((item) => item.isSelected);
|
|
584
584
|
}
|
|
585
585
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: GroupSelectComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: EyeTestAuditService }], target: i0.ɵɵFactoryTarget.Component });
|
|
586
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: GroupSelectComponent, selector: "lib-group-select", inputs: { items: "items", searchField: "searchField", multi: "multi", idField: "idField", selectedValues: "selectedValues", disabled: "disabled", label: "label" }, outputs: { selected: "selected" }, host: { listeners: { "document:click": "onClick($event)" } }, usesOnChanges: true, ngImport: i0, template: "<div class=\"outer-container\">\r\n <div [ngClass]=\"disabled ? 'disable-input':''\" (click)=\"openDropdown($event)\" class=\"form-select\">\r\n <ng-container *ngIf=\"multi\" >\r\n <span *ngIf=\"selectedValues?.length\" class=\"select-value mx-2\"> <img class=\"me-2\" alt=\"Pic\" src=\"./assets/tango/Image/users-teams.svg\">{{selectedValues?.[0]?.[searchField]}}</span> \r\n <!-- <span *ngIf=\"selectedValues?.length > 1\" class=\"select-value mx-2\"><img class=\"me-2\" alt=\"Pic\" src=\"./assets/tango/Image/users-teams.svg\">{{selectedValues?.[1]?.[searchField]}}</span> -->\r\n <span class=\"select-value mx-2\" *ngIf=\"selectedValues?.length > 1\">+{{selectedValues?.length -1}}</span> {{label}} \r\n </ng-container>\r\n <ng-container *ngIf=\"!multi\" >\r\n {{selectedValues?.[0]?.[searchField]}}\r\n </ng-container>\r\n </div>\r\n <div [ngClass]=\"showDropdown ? '' : 'd-none'\" class=\"input-container dropdown\" >\r\n <div class=\"w-100 input-wrapper\">\r\n <input [(ngModel)]=\"searchValue\" placeholder=\"Search\" (input)=\"onInput($event)\" type=\"text\"> \r\n <svg class=\"search-icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"17\" viewBox=\"0 0 16 17\" fill=\"none\">\r\n <path d=\"M14 14.5L11.1 11.6M12.6667 7.83333C12.6667 10.7789 10.2789 13.1667 7.33333 13.1667C4.38781 13.1667 2 10.7789 2 7.83333C2 4.88781 4.38781 2.5 7.33333 2.5C10.2789 2.5 12.6667 4.88781 12.6667 7.83333Z\" stroke=\"#667085\" stroke-width=\"1.3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg> \r\n </div>\r\n <ul>\r\n <li *ngIf=\"multi && filteredValues?.length\">\r\n <label class=\"form-check\" [for]=\"instanceId\" >\r\n <input (change)=\"onSelectAll($event)\" [checked]=\"checkIfAllSelected()\" class=\"form-check-input me-3\" type=\"checkbox\"\r\n [id]=\"instanceId\">\r\n <span class=\"form-check-label\" >\r\n Select All\r\n </span>\r\n </label>\r\n </li>\r\n <li *ngFor=\"let item of filteredValues\" [ngClass]=\"item.isSelected && !multi ? 'selected' : ''\" >\r\n <label [for]=\"item[idField] + instanceId\" [ngClass]=\"multi ? '': 'ps-0'\" class=\"form-check\">\r\n <input [ngClass]=\"multi ? '': 'd-none'\" (change)=\"onSelect($event, item)\" [(ngModel)]=\"item.isSelected\" class=\"form-check-input me-3\" type=\"checkbox\" value=\"\"\r\n [id]=\"item[idField] + instanceId\">\r\n <span class=\"form-check-label\" >\r\n {{item[searchField]}}\r\n </span>\r\n </label>\r\n </li>\r\n <li *ngIf=\"!filteredValues?.length\" >\r\n <span class=\"d-flex align-items-center justify-content-center\" >No data found</span>\r\n </li>\r\n </ul> \r\n </div> \r\n \r\n</div>", styles: [":host{width:100%;height:100%}.outer-container{position:relative;background-color:#fff}.outer-container .form-select{font-size:1.1rem;font-weight:600;border-radius:8px!important;color:var(--Gray-500, #344054);border:1px solid var(--Gray-300, #D0D5DD)!important;height:42.5px}.outer-container .disable-input{pointer-events:none;background-color:#f9fafb!important}.outer-container .input-container{position:absolute;width:100%;z-index:1}.outer-container .input-container .input-wrapper{padding:8px 10px;background-color:#fff;border-top-right-radius:8px;border-top-left-radius:8px;border-top:1px solid rgba(16,24,40,.08);border-right:1px solid rgba(16,24,40,.08);border-left:1px solid rgba(16,24,40,.08)}.outer-container .input-container .input-wrapper input{width:100%;border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF);box-shadow:0 1px 2px #1018280d;padding:10px 14px 10px 30px;outline:none}.outer-container .input-container .input-wrapper input ::placeholder{color:var(--Gray-500, #667085);font-family:Inter;font-size:14px;font-weight:500;line-height:20px}.outer-container .input-container .input-wrapper .search-icon{position:absolute;left:20px;top:20px}.outer-container .input-container ul{position:relative;background-color:#fff;margin:0;padding:0;max-height:200px;min-height:auto;overflow-y:auto;border-bottom-right-radius:8px;border-bottom-left-radius:8px;border-bottom:1px solid rgba(16,24,40,.08);border-right:1px solid rgba(16,24,40,.08);border-left:1px solid rgba(16,24,40,.08)}.outer-container .input-container ul .selected{background:#f9fafb}.outer-container .input-container ul li{list-style:none;padding:10px 16px;cursor:pointer}.outer-container .input-container ul li label{cursor:pointer}.outer-container .input-container ul li:hover{background:#f9fafb}.form-check{display:flex;align-items:center}.form-check-input{height:16px;width:16px;border-radius:4px;border:1px solid var(--Primary-600, #00A3FF)}.form-check-input:checked{--bs-form-check-bg-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAICAYAAADA+m62AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAB4SURBVHgBhY7NDUBQEIRnqcJNKXTg6qYTStCB+Isy6IQSNMDa9SLh5eWZZPcw+81kCX/quABhD73QyKXsGoyIvNCJSto2hEhNtY4N9cwYeMXEsVqB1GaSauRQOpty2tSmO3FgloAmF5nEhgyoesMO6CuFW66fn2xdFyA3ZzcRLrMAAAAASUVORK5CYII=);background-color:#eaf8ff;border-color:#00a3ff}.form-check-label{color:var(--Gray-700, #344054);font-family:Inter;font-size:14px;font-style:normal;font-weight:500;line-height:20px}.select-value{border-radius:16px!important;background:var(--Gray-100, #F2F4F7)!important;mix-blend-mode:multiply;color:var(--Gray-700, #344054)!important;text-align:center;font-size:14px;font-style:normal;font-weight:500;line-height:20px;padding:4px 12px 4px 6px}\n"], dependencies: [{ kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
|
|
586
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: GroupSelectComponent, selector: "lib-group-select", inputs: { items: "items", searchField: "searchField", multi: "multi", idField: "idField", selectedValues: "selectedValues", disabled: "disabled", label: "label" }, outputs: { selected: "selected" }, host: { listeners: { "document:click": "onClick($event)" } }, usesOnChanges: true, ngImport: i0, template: "<div class=\"outer-container\">\r\n <div [ngClass]=\"disabled ? 'disable-input':''\" (click)=\"openDropdown($event)\" class=\"form-select\">\r\n <ng-container *ngIf=\"multi\" >\r\n <span *ngIf=\"selectedValues?.length\" class=\"select-value w-50 mx-2\"> <img class=\"me-2\" alt=\"Pic\" src=\"./assets/tango/Image/users-teams.svg\">{{selectedValues?.[0]?.[searchField]}}</span> \r\n <!-- <span *ngIf=\"selectedValues?.length > 1\" class=\"select-value mx-2\"><img class=\"me-2\" alt=\"Pic\" src=\"./assets/tango/Image/users-teams.svg\">{{selectedValues?.[1]?.[searchField]}}</span> -->\r\n <span class=\"select-value mx-2\" *ngIf=\"selectedValues?.length > 1\">+{{selectedValues?.length -1}}</span> {{label}} \r\n </ng-container>\r\n <ng-container *ngIf=\"!multi\" >\r\n {{selectedValues?.[0]?.[searchField]}}\r\n </ng-container>\r\n </div>\r\n <div [ngClass]=\"showDropdown ? '' : 'd-none'\" class=\"input-container dropdown\" >\r\n <div class=\"w-100 input-wrapper\">\r\n <input [(ngModel)]=\"searchValue\" placeholder=\"Search\" (input)=\"onInput($event)\" type=\"text\"> \r\n <svg class=\"search-icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"17\" viewBox=\"0 0 16 17\" fill=\"none\">\r\n <path d=\"M14 14.5L11.1 11.6M12.6667 7.83333C12.6667 10.7789 10.2789 13.1667 7.33333 13.1667C4.38781 13.1667 2 10.7789 2 7.83333C2 4.88781 4.38781 2.5 7.33333 2.5C10.2789 2.5 12.6667 4.88781 12.6667 7.83333Z\" stroke=\"#667085\" stroke-width=\"1.3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg> \r\n </div>\r\n <ul>\r\n <li *ngIf=\"multi && filteredValues?.length\">\r\n <label class=\"form-check\" [for]=\"instanceId\" >\r\n <input (change)=\"onSelectAll($event)\" [checked]=\"checkIfAllSelected()\" class=\"form-check-input me-3\" type=\"checkbox\"\r\n [id]=\"instanceId\">\r\n <span class=\"form-check-label\" >\r\n Select All\r\n </span>\r\n </label>\r\n </li>\r\n <li *ngFor=\"let item of filteredValues\" [ngClass]=\"item.isSelected && !multi ? 'selected' : ''\" >\r\n <label [for]=\"item[idField] + instanceId\" [ngClass]=\"multi ? '': 'ps-0'\" class=\"form-check\">\r\n <input [ngClass]=\"multi ? '': 'd-none'\" (change)=\"onSelect($event, item)\" [(ngModel)]=\"item.isSelected\" class=\"form-check-input me-3\" type=\"checkbox\" value=\"\"\r\n [id]=\"item[idField] + instanceId\">\r\n <span class=\"form-check-label\" >\r\n {{item[searchField]}}\r\n </span>\r\n </label>\r\n </li>\r\n <li *ngIf=\"!filteredValues?.length\" >\r\n <span class=\"d-flex align-items-center justify-content-center\" >No data found</span>\r\n </li>\r\n </ul> \r\n </div> \r\n \r\n</div>", styles: [":host{width:100%;height:100%}.outer-container{position:relative;background-color:#fff}.outer-container .form-select{font-size:1.1rem;font-weight:600;border-radius:8px!important;color:var(--Gray-500, #344054);border:1px solid var(--Gray-300, #D0D5DD)!important;height:42.5px}.outer-container .disable-input{pointer-events:none;background-color:#f9fafb!important}.outer-container .input-container{position:absolute;width:100%;z-index:1}.outer-container .input-container .input-wrapper{padding:8px 10px;background-color:#fff;border-top-right-radius:8px;border-top-left-radius:8px;border-top:1px solid rgba(16,24,40,.08);border-right:1px solid rgba(16,24,40,.08);border-left:1px solid rgba(16,24,40,.08)}.outer-container .input-container .input-wrapper input{width:100%;border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF);box-shadow:0 1px 2px #1018280d;padding:10px 14px 10px 30px;outline:none}.outer-container .input-container .input-wrapper input ::placeholder{color:var(--Gray-500, #667085);font-family:Inter;font-size:14px;font-weight:500;line-height:20px}.outer-container .input-container .input-wrapper .search-icon{position:absolute;left:20px;top:20px}.outer-container .input-container ul{position:relative;background-color:#fff;margin:0;padding:0;max-height:200px;min-height:auto;overflow-y:auto;border-bottom-right-radius:8px;border-bottom-left-radius:8px;border-bottom:1px solid rgba(16,24,40,.08);border-right:1px solid rgba(16,24,40,.08);border-left:1px solid rgba(16,24,40,.08)}.outer-container .input-container ul .selected{background:#f9fafb}.outer-container .input-container ul li{list-style:none;padding:10px 16px;cursor:pointer}.outer-container .input-container ul li label{cursor:pointer}.outer-container .input-container ul li:hover{background:#f9fafb}.form-check{display:flex;align-items:center}.form-check-input{height:16px;width:16px;border-radius:4px;border:1px solid var(--Primary-600, #00A3FF)}.form-check-input:checked{--bs-form-check-bg-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAICAYAAADA+m62AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAB4SURBVHgBhY7NDUBQEIRnqcJNKXTg6qYTStCB+Isy6IQSNMDa9SLh5eWZZPcw+81kCX/quABhD73QyKXsGoyIvNCJSto2hEhNtY4N9cwYeMXEsVqB1GaSauRQOpty2tSmO3FgloAmF5nEhgyoesMO6CuFW66fn2xdFyA3ZzcRLrMAAAAASUVORK5CYII=);background-color:#eaf8ff;border-color:#00a3ff}.form-check-label{color:var(--Gray-700, #344054);font-family:Inter;font-size:14px;font-style:normal;font-weight:500;line-height:20px}.select-value{border-radius:16px!important;background:var(--Gray-100, #F2F4F7)!important;mix-blend-mode:multiply;color:var(--Gray-700, #344054)!important;text-align:center;font-size:14px;font-style:normal;font-weight:500;line-height:20px;padding:4px 12px 4px 6px}\n"], dependencies: [{ kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
|
|
587
587
|
}
|
|
588
588
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: GroupSelectComponent, decorators: [{
|
|
589
589
|
type: Component,
|
|
590
|
-
args: [{ selector: 'lib-group-select', template: "<div class=\"outer-container\">\r\n <div [ngClass]=\"disabled ? 'disable-input':''\" (click)=\"openDropdown($event)\" class=\"form-select\">\r\n <ng-container *ngIf=\"multi\" >\r\n <span *ngIf=\"selectedValues?.length\" class=\"select-value mx-2\"> <img class=\"me-2\" alt=\"Pic\" src=\"./assets/tango/Image/users-teams.svg\">{{selectedValues?.[0]?.[searchField]}}</span> \r\n <!-- <span *ngIf=\"selectedValues?.length > 1\" class=\"select-value mx-2\"><img class=\"me-2\" alt=\"Pic\" src=\"./assets/tango/Image/users-teams.svg\">{{selectedValues?.[1]?.[searchField]}}</span> -->\r\n <span class=\"select-value mx-2\" *ngIf=\"selectedValues?.length > 1\">+{{selectedValues?.length -1}}</span> {{label}} \r\n </ng-container>\r\n <ng-container *ngIf=\"!multi\" >\r\n {{selectedValues?.[0]?.[searchField]}}\r\n </ng-container>\r\n </div>\r\n <div [ngClass]=\"showDropdown ? '' : 'd-none'\" class=\"input-container dropdown\" >\r\n <div class=\"w-100 input-wrapper\">\r\n <input [(ngModel)]=\"searchValue\" placeholder=\"Search\" (input)=\"onInput($event)\" type=\"text\"> \r\n <svg class=\"search-icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"17\" viewBox=\"0 0 16 17\" fill=\"none\">\r\n <path d=\"M14 14.5L11.1 11.6M12.6667 7.83333C12.6667 10.7789 10.2789 13.1667 7.33333 13.1667C4.38781 13.1667 2 10.7789 2 7.83333C2 4.88781 4.38781 2.5 7.33333 2.5C10.2789 2.5 12.6667 4.88781 12.6667 7.83333Z\" stroke=\"#667085\" stroke-width=\"1.3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg> \r\n </div>\r\n <ul>\r\n <li *ngIf=\"multi && filteredValues?.length\">\r\n <label class=\"form-check\" [for]=\"instanceId\" >\r\n <input (change)=\"onSelectAll($event)\" [checked]=\"checkIfAllSelected()\" class=\"form-check-input me-3\" type=\"checkbox\"\r\n [id]=\"instanceId\">\r\n <span class=\"form-check-label\" >\r\n Select All\r\n </span>\r\n </label>\r\n </li>\r\n <li *ngFor=\"let item of filteredValues\" [ngClass]=\"item.isSelected && !multi ? 'selected' : ''\" >\r\n <label [for]=\"item[idField] + instanceId\" [ngClass]=\"multi ? '': 'ps-0'\" class=\"form-check\">\r\n <input [ngClass]=\"multi ? '': 'd-none'\" (change)=\"onSelect($event, item)\" [(ngModel)]=\"item.isSelected\" class=\"form-check-input me-3\" type=\"checkbox\" value=\"\"\r\n [id]=\"item[idField] + instanceId\">\r\n <span class=\"form-check-label\" >\r\n {{item[searchField]}}\r\n </span>\r\n </label>\r\n </li>\r\n <li *ngIf=\"!filteredValues?.length\" >\r\n <span class=\"d-flex align-items-center justify-content-center\" >No data found</span>\r\n </li>\r\n </ul> \r\n </div> \r\n \r\n</div>", styles: [":host{width:100%;height:100%}.outer-container{position:relative;background-color:#fff}.outer-container .form-select{font-size:1.1rem;font-weight:600;border-radius:8px!important;color:var(--Gray-500, #344054);border:1px solid var(--Gray-300, #D0D5DD)!important;height:42.5px}.outer-container .disable-input{pointer-events:none;background-color:#f9fafb!important}.outer-container .input-container{position:absolute;width:100%;z-index:1}.outer-container .input-container .input-wrapper{padding:8px 10px;background-color:#fff;border-top-right-radius:8px;border-top-left-radius:8px;border-top:1px solid rgba(16,24,40,.08);border-right:1px solid rgba(16,24,40,.08);border-left:1px solid rgba(16,24,40,.08)}.outer-container .input-container .input-wrapper input{width:100%;border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF);box-shadow:0 1px 2px #1018280d;padding:10px 14px 10px 30px;outline:none}.outer-container .input-container .input-wrapper input ::placeholder{color:var(--Gray-500, #667085);font-family:Inter;font-size:14px;font-weight:500;line-height:20px}.outer-container .input-container .input-wrapper .search-icon{position:absolute;left:20px;top:20px}.outer-container .input-container ul{position:relative;background-color:#fff;margin:0;padding:0;max-height:200px;min-height:auto;overflow-y:auto;border-bottom-right-radius:8px;border-bottom-left-radius:8px;border-bottom:1px solid rgba(16,24,40,.08);border-right:1px solid rgba(16,24,40,.08);border-left:1px solid rgba(16,24,40,.08)}.outer-container .input-container ul .selected{background:#f9fafb}.outer-container .input-container ul li{list-style:none;padding:10px 16px;cursor:pointer}.outer-container .input-container ul li label{cursor:pointer}.outer-container .input-container ul li:hover{background:#f9fafb}.form-check{display:flex;align-items:center}.form-check-input{height:16px;width:16px;border-radius:4px;border:1px solid var(--Primary-600, #00A3FF)}.form-check-input:checked{--bs-form-check-bg-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAICAYAAADA+m62AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAB4SURBVHgBhY7NDUBQEIRnqcJNKXTg6qYTStCB+Isy6IQSNMDa9SLh5eWZZPcw+81kCX/quABhD73QyKXsGoyIvNCJSto2hEhNtY4N9cwYeMXEsVqB1GaSauRQOpty2tSmO3FgloAmF5nEhgyoesMO6CuFW66fn2xdFyA3ZzcRLrMAAAAASUVORK5CYII=);background-color:#eaf8ff;border-color:#00a3ff}.form-check-label{color:var(--Gray-700, #344054);font-family:Inter;font-size:14px;font-style:normal;font-weight:500;line-height:20px}.select-value{border-radius:16px!important;background:var(--Gray-100, #F2F4F7)!important;mix-blend-mode:multiply;color:var(--Gray-700, #344054)!important;text-align:center;font-size:14px;font-style:normal;font-weight:500;line-height:20px;padding:4px 12px 4px 6px}\n"] }]
|
|
590
|
+
args: [{ selector: 'lib-group-select', template: "<div class=\"outer-container\">\r\n <div [ngClass]=\"disabled ? 'disable-input':''\" (click)=\"openDropdown($event)\" class=\"form-select\">\r\n <ng-container *ngIf=\"multi\" >\r\n <span *ngIf=\"selectedValues?.length\" class=\"select-value w-50 mx-2\"> <img class=\"me-2\" alt=\"Pic\" src=\"./assets/tango/Image/users-teams.svg\">{{selectedValues?.[0]?.[searchField]}}</span> \r\n <!-- <span *ngIf=\"selectedValues?.length > 1\" class=\"select-value mx-2\"><img class=\"me-2\" alt=\"Pic\" src=\"./assets/tango/Image/users-teams.svg\">{{selectedValues?.[1]?.[searchField]}}</span> -->\r\n <span class=\"select-value mx-2\" *ngIf=\"selectedValues?.length > 1\">+{{selectedValues?.length -1}}</span> {{label}} \r\n </ng-container>\r\n <ng-container *ngIf=\"!multi\" >\r\n {{selectedValues?.[0]?.[searchField]}}\r\n </ng-container>\r\n </div>\r\n <div [ngClass]=\"showDropdown ? '' : 'd-none'\" class=\"input-container dropdown\" >\r\n <div class=\"w-100 input-wrapper\">\r\n <input [(ngModel)]=\"searchValue\" placeholder=\"Search\" (input)=\"onInput($event)\" type=\"text\"> \r\n <svg class=\"search-icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"17\" viewBox=\"0 0 16 17\" fill=\"none\">\r\n <path d=\"M14 14.5L11.1 11.6M12.6667 7.83333C12.6667 10.7789 10.2789 13.1667 7.33333 13.1667C4.38781 13.1667 2 10.7789 2 7.83333C2 4.88781 4.38781 2.5 7.33333 2.5C10.2789 2.5 12.6667 4.88781 12.6667 7.83333Z\" stroke=\"#667085\" stroke-width=\"1.3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg> \r\n </div>\r\n <ul>\r\n <li *ngIf=\"multi && filteredValues?.length\">\r\n <label class=\"form-check\" [for]=\"instanceId\" >\r\n <input (change)=\"onSelectAll($event)\" [checked]=\"checkIfAllSelected()\" class=\"form-check-input me-3\" type=\"checkbox\"\r\n [id]=\"instanceId\">\r\n <span class=\"form-check-label\" >\r\n Select All\r\n </span>\r\n </label>\r\n </li>\r\n <li *ngFor=\"let item of filteredValues\" [ngClass]=\"item.isSelected && !multi ? 'selected' : ''\" >\r\n <label [for]=\"item[idField] + instanceId\" [ngClass]=\"multi ? '': 'ps-0'\" class=\"form-check\">\r\n <input [ngClass]=\"multi ? '': 'd-none'\" (change)=\"onSelect($event, item)\" [(ngModel)]=\"item.isSelected\" class=\"form-check-input me-3\" type=\"checkbox\" value=\"\"\r\n [id]=\"item[idField] + instanceId\">\r\n <span class=\"form-check-label\" >\r\n {{item[searchField]}}\r\n </span>\r\n </label>\r\n </li>\r\n <li *ngIf=\"!filteredValues?.length\" >\r\n <span class=\"d-flex align-items-center justify-content-center\" >No data found</span>\r\n </li>\r\n </ul> \r\n </div> \r\n \r\n</div>", styles: [":host{width:100%;height:100%}.outer-container{position:relative;background-color:#fff}.outer-container .form-select{font-size:1.1rem;font-weight:600;border-radius:8px!important;color:var(--Gray-500, #344054);border:1px solid var(--Gray-300, #D0D5DD)!important;height:42.5px}.outer-container .disable-input{pointer-events:none;background-color:#f9fafb!important}.outer-container .input-container{position:absolute;width:100%;z-index:1}.outer-container .input-container .input-wrapper{padding:8px 10px;background-color:#fff;border-top-right-radius:8px;border-top-left-radius:8px;border-top:1px solid rgba(16,24,40,.08);border-right:1px solid rgba(16,24,40,.08);border-left:1px solid rgba(16,24,40,.08)}.outer-container .input-container .input-wrapper input{width:100%;border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF);box-shadow:0 1px 2px #1018280d;padding:10px 14px 10px 30px;outline:none}.outer-container .input-container .input-wrapper input ::placeholder{color:var(--Gray-500, #667085);font-family:Inter;font-size:14px;font-weight:500;line-height:20px}.outer-container .input-container .input-wrapper .search-icon{position:absolute;left:20px;top:20px}.outer-container .input-container ul{position:relative;background-color:#fff;margin:0;padding:0;max-height:200px;min-height:auto;overflow-y:auto;border-bottom-right-radius:8px;border-bottom-left-radius:8px;border-bottom:1px solid rgba(16,24,40,.08);border-right:1px solid rgba(16,24,40,.08);border-left:1px solid rgba(16,24,40,.08)}.outer-container .input-container ul .selected{background:#f9fafb}.outer-container .input-container ul li{list-style:none;padding:10px 16px;cursor:pointer}.outer-container .input-container ul li label{cursor:pointer}.outer-container .input-container ul li:hover{background:#f9fafb}.form-check{display:flex;align-items:center}.form-check-input{height:16px;width:16px;border-radius:4px;border:1px solid var(--Primary-600, #00A3FF)}.form-check-input:checked{--bs-form-check-bg-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAICAYAAADA+m62AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAB4SURBVHgBhY7NDUBQEIRnqcJNKXTg6qYTStCB+Isy6IQSNMDa9SLh5eWZZPcw+81kCX/quABhD73QyKXsGoyIvNCJSto2hEhNtY4N9cwYeMXEsVqB1GaSauRQOpty2tSmO3FgloAmF5nEhgyoesMO6CuFW66fn2xdFyA3ZzcRLrMAAAAASUVORK5CYII=);background-color:#eaf8ff;border-color:#00a3ff}.form-check-label{color:var(--Gray-700, #344054);font-family:Inter;font-size:14px;font-style:normal;font-weight:500;line-height:20px}.select-value{border-radius:16px!important;background:var(--Gray-100, #F2F4F7)!important;mix-blend-mode:multiply;color:var(--Gray-700, #344054)!important;text-align:center;font-size:14px;font-style:normal;font-weight:500;line-height:20px;padding:4px 12px 4px 6px}\n"] }]
|
|
591
591
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: EyeTestAuditService }], propDecorators: { onClick: [{
|
|
592
592
|
type: HostListener,
|
|
593
593
|
args: ['document:click', ['$event']]
|
|
@@ -875,9 +875,7 @@ class EyeTestComponent {
|
|
|
875
875
|
}
|
|
876
876
|
if (this.eyeTestForm.value.auditType === 'all')
|
|
877
877
|
this.eyeTestForm.value.auditType = ["adult", "kid"];
|
|
878
|
-
|
|
879
|
-
const searchAfter = this.eyeTestData ? (this.sortOrder == -1 ? this.eyeTestData[0]?.sort : this.eyeTestData?.pop().sort) : [];
|
|
880
|
-
console.log('searchAfter', searchAfter);
|
|
878
|
+
// const searchAfter = this.eyeTestData ? (this.sortOrder == -1 ? this.eyeTestData[0]?.sort : this.eyeTestData?.pop().sort) : []
|
|
881
879
|
let requestData = {
|
|
882
880
|
clientId: this.headerFilters?.client,
|
|
883
881
|
fromDate: this.eyeTestForm.value.fromDate,
|
|
@@ -889,7 +887,7 @@ class EyeTestComponent {
|
|
|
889
887
|
: [this.eyeTestForm.value.auditType]
|
|
890
888
|
}),
|
|
891
889
|
storeId: finalStores,
|
|
892
|
-
searchAfter: searchAfter,
|
|
890
|
+
// searchAfter: searchAfter,
|
|
893
891
|
limit: 10,
|
|
894
892
|
offset: 1,
|
|
895
893
|
searchValue: this.searchValue,
|
|
@@ -949,13 +947,11 @@ class EyeTestComponent {
|
|
|
949
947
|
}
|
|
950
948
|
if (this.eyeTestForm.value.auditType === 'all')
|
|
951
949
|
this.eyeTestForm.value.auditType = ["adult", "kid"];
|
|
952
|
-
|
|
953
|
-
const searchAfter = this.eyeTestData ? (this.sortOrder == -1 ? this.eyeTestData[0]?.sort : this.eyeTestData?.pop().sort) : [];
|
|
954
|
-
console.log('searchAfter', searchAfter);
|
|
950
|
+
// const searchAfter = this.eyeTestData ? (this.sortOrder == -1 ? this.eyeTestData[0]?.sort : this.eyeTestData?.pop().sort) : []
|
|
955
951
|
let requestData = {
|
|
956
952
|
clientId: this.headerFilters?.client,
|
|
957
953
|
fromDate: this.eyeTestForm.value.fromDate,
|
|
958
|
-
toDate: this.eyeTestForm.value.
|
|
954
|
+
toDate: this.eyeTestForm.value.toDate,
|
|
959
955
|
type: this.eyeTestForm.value.type,
|
|
960
956
|
...(this.eyeTestForm.value.type !== 'remote' && {
|
|
961
957
|
demographics: Array.isArray(this.eyeTestForm.value.auditType)
|
|
@@ -965,7 +961,7 @@ class EyeTestComponent {
|
|
|
965
961
|
storeId: finalStores,
|
|
966
962
|
limit: this.limit,
|
|
967
963
|
offset: this.offset,
|
|
968
|
-
searchAfter: searchAfter,
|
|
964
|
+
// searchAfter: searchAfter,
|
|
969
965
|
searchValue: this.searchValue,
|
|
970
966
|
isExport: false,
|
|
971
967
|
sortOrder: this.sortOrder,
|
|
@@ -1016,13 +1012,11 @@ class EyeTestComponent {
|
|
|
1016
1012
|
}
|
|
1017
1013
|
if (this.eyeTestForm.value.auditType === 'all')
|
|
1018
1014
|
this.eyeTestForm.value.auditType = ["adult", "kid"];
|
|
1019
|
-
|
|
1020
|
-
const searchAfter = this.eyeTestData ? (this.sortOrder == -1 ? this.eyeTestData[0]?.sort : this.eyeTestData?.pop().sort) : [];
|
|
1021
|
-
console.log('searchAfter', searchAfter);
|
|
1015
|
+
// const searchAfter = this.eyeTestData ? (this.sortOrder == -1 ? this.eyeTestData[0]?.sort : this.eyeTestData?.pop().sort) : []
|
|
1022
1016
|
let requestData = {
|
|
1023
1017
|
clientId: this.headerFilters?.client,
|
|
1024
1018
|
fromDate: this.eyeTestForm.value.fromDate,
|
|
1025
|
-
toDate: this.eyeTestForm.value.
|
|
1019
|
+
toDate: this.eyeTestForm.value.toDate,
|
|
1026
1020
|
type: this.eyeTestForm.value.type,
|
|
1027
1021
|
...(this.eyeTestForm.value.type !== 'remote' && {
|
|
1028
1022
|
demographics: Array.isArray(this.eyeTestForm.value.auditType)
|
|
@@ -1032,7 +1026,7 @@ class EyeTestComponent {
|
|
|
1032
1026
|
storeId: finalStores,
|
|
1033
1027
|
limit: this.limit,
|
|
1034
1028
|
offset: this.offset,
|
|
1035
|
-
searchAfter: searchAfter,
|
|
1029
|
+
// searchAfter: searchAfter,
|
|
1036
1030
|
searchValue: this.searchValue,
|
|
1037
1031
|
isExport: false,
|
|
1038
1032
|
sortOrder: this.sortOrder,
|
|
@@ -1085,11 +1079,11 @@ class EyeTestComponent {
|
|
|
1085
1079
|
this.router.navigate(['/manage/trax/audit/start'], { queryParams: { type: this.eyeTestForm.value.type, storeId: data?._source?.storeId, _id: data._id } });
|
|
1086
1080
|
}
|
|
1087
1081
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EyeTestComponent, deps: [{ token: i2.PageInfoService }, { token: i1$1.FormBuilder }, { token: TraxService }, { token: EyeTestAuditService }, { token: i1$2.Router }, { token: i0.ChangeDetectorRef }, { token: i2.GlobalStateService }, { token: i3.ToastService }, { token: i1$2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component });
|
|
1088
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: EyeTestComponent, selector: "lib-eye-test", ngImport: i0, template: "<div class=\"card mb-2\">\r\n <form [formGroup]=\"eyeTestForm\">\r\n <div class=\"row\">\r\n <div class=\"col-md-12 mt-7 mb-3\">\r\n <div class=\"row px-3\">\r\n <div class=\"col-md-3 mb-0\">\r\n <div class=\"position-relative\">\r\n <span style=\"top: 20%;\" class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path\r\n d=\"M13.3333 1.66663V4.99996M6.66667 1.66663V4.99996M2.5 8.33329H17.5M4.16667 3.33329H15.8333C16.7538 3.33329 17.5 4.07948 17.5 4.99996V16.6666C17.5 17.5871 16.7538 18.3333 15.8333 18.3333H4.16667C3.24619 18.3333 2.5 17.5871 2.5 16.6666V4.99996C2.5 4.07948 3.24619 3.33329 4.16667 3.33329Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <input class=\"fx-date-range form-control ps-14 z-2\" style=\"min-width: 230px !important;\"\r\n type=\"text\" matInput ngxDaterangepickerMd [drops]=\"'down'\"\r\n [opens]=\"'right'\" [alwaysShowCalendars]=\"false\" [keepCalendarOpeningWithRange]=\"true\"\r\n [showCancel]=\"false\" autocomplete=\"off\" [(ngModel)]=\"selectedDateRange\"\r\n [ngModelOptions]=\"{standalone: true}\" (datesUpdated)=\"datechange($event)\" (click)=\"resetValidation()\" \r\n (startDateChanged)=\"onStartDateChange($event)\" [isCustomDate]=\"isCustomDate\" [autoApply]=\"true\" \r\n [locale]=\"{ format: 'DD-MM-YYYY', firstDay: 1, monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] }\"\r\n name=\"daterange\" [readonly]=\"true\" />\r\n </div>\r\n </div>\r\n <div [ngClass]=\"eyeTestForm.get('type')?.value ==='remote' ? 'col-md-3 mb-4' : 'col-md-2 mb-4'\" class=\"col-md-2 mb-4\">\r\n <lib-reactive-select formControlName=\"type\" [idField]=\"'value'\" [nameField]=\"'label'\"\r\n [data]=\"type\" (itemChange)=\"typeChange($event)\"></lib-reactive-select>\r\n </div>\r\n <div *ngIf=\"eyeTestForm.get('type')?.value !=='remote'\" class=\"col-md-1 mb-4\">\r\n <lib-reactive-select formControlName=\"auditType\" [idField]=\"'value'\" [nameField]=\"'label'\"\r\n [data]=\"auditType\" (itemChange)=\"auditTypeChange($event)\"></lib-reactive-select>\r\n </div>\r\n <div class=\"col-md-2 mb-4\" >\r\n <div class=\"select-wrapper\">\r\n <div class=\"placeholder-overlay\" *ngIf=\"!(eyeTestForm.get('ClusterList')?.value?.length)\">\r\n Select cluster\r\n </div>\r\n <lib-group-select [items]=\"ClusterList\" [disabled]=\"false\" [multi]=\"true\" [searchField]=\"'groupName'\"\r\n [idField]=\"'groupName'\" (selected)=\"ongroupSelect($event)\"\r\n [selectedValues]=\"eyeTestForm.get('ClusterList')?.value\">\r\n </lib-group-select>\r\n </div>\r\n \r\n </div>\r\n <div class=\"col-md-3 mb-4\" >\r\n <div class=\"select-wrapper\">\r\n <div class=\"placeholder-overlay\" *ngIf=\"!(eyeTestForm.get('storeList')?.value?.length)\">\r\n Select Stores\r\n </div>\r\n <lib-stores-select [items]=\"storeList\" [disabled]=\"false\" [multi]=\"true\" [searchField]=\"'storeName'\"\r\n [idField]=\"'storeId'\" (selected)=\"onStoreSelect($event)\"\r\n [selectedValues]=\"eyeTestForm.get('storeList')?.value\"></lib-stores-select>\r\n </div>\r\n </div>\r\n <div class=\"col-md-1\">\r\n <a (click)=\"onSubmit()\" type=\"submit\" class=\"btn btn-primary px-4 \"><span>Apply</span></a>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </form>\r\n</div>\r\n\r\n<div class=\"card my-3\">\r\n <div class=\"card-header border-0 py-1\">\r\n <h3 class=\"card-title dashed w-100 align-items-start flex-column\">\r\n <span class=\"title-text\"><span class=\"mx-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\">\r\n <rect width=\"32\" height=\"32\" rx=\"16\" fill=\"#FEE4E2\"/>\r\n <g clip-path=\"url(#clip0_235_24234)\">\r\n <path d=\"M16 13.3335V16.0002M16 18.6668H16.0067M22.6667 16.0002C22.6667 19.6821 19.6819 22.6668 16 22.6668C12.3181 22.6668 9.33337 19.6821 9.33337 16.0002C9.33337 12.3183 12.3181 9.3335 16 9.3335C19.6819 9.3335 22.6667 12.3183 22.6667 16.0002Z\" stroke=\"#D92D20\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_235_24234\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" transform=\"translate(8 8)\"/>\r\n </clipPath>\r\n </defs>\r\n </svg></span><span class=\"dashed-desc\">Eye test video preview is available for 7 days. Audit data remains accessible, but videos will not be retained beyond this period.</span></span>\r\n </h3>\r\n </div> \r\n</div>\r\n\r\n<div class=\"card mt-3\">\r\n <div class=\"card-header border-0 pt-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"title-text mb-2\">Eye Test <span *ngIf=\"this.totalItems\" class=\"badge badge-light-primary\">{{this.totalItems}} Total</span>\r\n </span>\r\n <span class=\"text-sub mb-2\">Based on {{ headDate | date: 'MMM d' }} - {{\r\n headDateEnd | date: 'MMM d, y' }}</span>\r\n </h3>\r\n <div class=\"card-toolbar\">\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-center position-relative my-1\">\r\n <span class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\r\n fill=\"none\">\r\n <rect opacity=\"0.5\" x=\"17.0365\" y=\"15.1223\" width=\"8.15546\" height=\"2\" rx=\"1\"\r\n transform=\"rotate(45 17.0365 15.1223)\" fill=\"currentColor\"></rect>\r\n <path\r\n d=\"M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z\"\r\n fill=\"currentColor\"></path>\r\n </svg>\r\n </span>\r\n <input (change)=\"searchData()\" [(ngModel)]=\"searchValue\" type=\"text\" class=\"form-control ps-14 me-2\" autocomplete=\"off\" placeholder=\"Search\" />\r\n\r\n \r\n \r\n <button *ngIf=\"!noData && !loading\" type=\"button\" (click)=\"exportXLSX()\"\r\n class=\"btn btn-default mx-2 btn-outline btn-outline-default rounded-3 text-nowrap border-val\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path\r\n d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg><span class=\"ms-2\">Export</span> </button>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"loading\" class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"noData\" class=\"row\">\r\n <div class=\"col-lg-12 mb-3\">\r\n <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-nodata-table\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodata-title\">No data found</div>\r\n <div class=\"nodata-sub\">There is no result for this eye test table</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"!noData && !loading\" class=\"card-body\">\r\n <div class=\"table-responsive\">\r\n <table class=\"w-100 table bottom-border text-nowrap\">\r\n <thead>\r\n <tr>\r\n <th class=\"text-start\">\r\n <span class=\"cursor-pointer\" (click)=\"onSort('date')\"> Date <svg \r\n [ngClass]=\"sortedColumn === 'date' && sortOrder === 1 ? 'rotate' : ''\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortedColumn === 'date' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span>\r\n </th>\r\n <th><span class=\"cursor-pointer\" (click)=\"onSort('storeName')\">Store Name <svg \r\n [ngClass]=\"sortedColumn === 'storeName' && sortOrder === 1 ? 'rotate' : ''\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortedColumn === 'storeName' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span></th>\r\n <th><span class=\"cursor-pointer\" (click)=\"onSort('storeId')\">Store ID <svg \r\n [ngClass]=\"sortedColumn === 'storeId' && sortOrder === 1 ? 'rotate' : ''\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortedColumn === 'storeId' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span></th>\r\n <th *ngIf=\"this.typeValue ==='remote'\" class=\"text-start\">Engagement ID</th>\r\n <th *ngIf=\"this.typeValue !=='remote'\" class=\"text-start\">Optom ID</th>\r\n <th *ngIf=\"this.typeValue !=='remote'\" class=\"text-start\">Queue ID</th>\r\n <th class=\"text-start\">Compliance Score</th>\r\n <th><span class=\"cursor-pointer\" (click)=\"onSort('coveredStepsAI')\">Steps Covered By AI <svg \r\n [ngClass]=\"sortedColumn === 'coveredStepsAI' && sortOrder === 1 ? 'rotate' : ''\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortedColumn === 'coveredStepsAI' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span> </th>\r\n \r\n <th><span class=\"cursor-pointer\" (click)=\"onSort('trustScore')\">Trust Score <svg \r\n [ngClass]=\"sortedColumn === 'trustScore' && sortOrder === 1 ? 'rotate' : ''\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortedColumn === 'trustScore' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span> </th>\r\n\r\n <th *ngIf=\"this.typeValue !=='remote'\"><span class=\"cursor-pointer\" (click)=\"onSort('visitorsType')\">Visitor Type <svg \r\n [ngClass]=\"sortedColumn === 'visitorsType' && sortOrder === 1 ? 'rotate' : ''\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortedColumn === 'visitorsType' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span> </th>\r\n <th class=\"text-start\">Test Duration</th>\r\n <th><span class=\"cursor-pointer\" (click)=\"onSort('auditStatus')\">Audit Status <svg \r\n [ngClass]=\"sortedColumn === 'auditStatus' && sortOrder === 1 ? 'rotate' : ''\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortedColumn === 'auditStatus' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span></th>\r\n <th class=\"text-start\">Audited By</th>\r\n <th class=\"text-start\">Action</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let obj of eyeTestData; let i=index;\">\r\n <td>{{obj?._source?.date}}</td>\r\n <td>{{obj?._source?.storeName}}</td>\r\n <td>{{obj?._source?.storeId}}</td>\r\n <td *ngIf=\"this.typeValue ==='remote'\" class=\"engage-text\">{{obj?._source?.engagementId}}</td>\r\n <td *ngIf=\"this.typeValue !=='remote'\">{{obj?._source?.optumId ? obj?._source?.optumId :''}}</td>\r\n <td *ngIf=\"this.typeValue !=='remote'\" class=\"engage-text\">{{obj?._source?.queueId ? obj?._source?.queueId:''}}</td>\r\n <td>{{obj?._source?.complianceScore ? obj?._source?.complianceScore :'--'}}<span *ngIf=\"obj?._source?.complianceScore\">%</span></td>\r\n <td>{{obj?._source?.coveredStepsAI ? obj?._source?.coveredStepsAI:'--'}}</td>\r\n <td>{{obj?._source?.trustScore ? obj?._source?.trustScore:'--'}}</td>\r\n <td *ngIf=\"this.typeValue !=='remote'\">{{obj?._source?.visitorsType ? obj?._source?.visitorsType:'--'}}</td>\r\n <td>{{obj?._source?.min ? obj?._source?.min :'0'}} mins {{obj?._source?.sec ? obj?._source?.sec:'0'}} secs</td>\r\n <td><span class=\"badge badge-light-primary\" *ngIf=\"obj?._source?.auditStatus ==='Yet-to-Audit'\">{{obj?._source?.auditStatus}}</span>\r\n <span class=\"badge badge-light-warning\" *ngIf=\"obj?._source?.auditStatus ==='Re-Audited'\">{{obj?._source?.auditStatus}}</span>\r\n <span class=\"badge badge-light-success\" *ngIf=\"obj?._source?.auditStatus ==='Audited'\">{{obj?._source?.auditStatus}}</span>\r\n <span class=\"badge badge-light-info\" *ngIf=\"obj?._source?.auditStatus ==='In-Progress'\">{{obj?._source?.auditStatus}}</span></td>\r\n <td>{{obj?._source?.auditedBy?obj?._source?.auditedBy:\"-\"}}</td>\r\n <td class=\"cursor-pointer\" (click)=\"eyeTestView(obj)\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"16\" viewBox=\"0 0 20 16\" fill=\"none\">\r\n <path d=\"M0.833496 8.00016C0.833496 8.00016 4.16683 1.3335 10.0002 1.3335C15.8335 1.3335 19.1668 8.00016 19.1668 8.00016C19.1668 8.00016 15.8335 14.6668 10.0002 14.6668C4.16683 14.6668 0.833496 8.00016 0.833496 8.00016Z\" stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n <path d=\"M10.0002 10.5002C11.3809 10.5002 12.5002 9.38087 12.5002 8.00016C12.5002 6.61945 11.3809 5.50016 10.0002 5.50016C8.61945 5.50016 7.50016 6.61945 7.50016 8.00016C7.50016 9.38087 8.61945 10.5002 10.0002 10.5002Z\" stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg></td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n\r\n</div>\r\n</div>\r\n<div class=\"card-footer\" *ngIf=\"!noData && !loading\">\r\n <lib-pagination [itemsPerPage]=\"pageSize\" [currentPage]=\"offset\" [totalItems]=\"totalItems\"\r\n [paginationSizes]=\"paginationSizes\" [pageSize]=\"pageSize\" (pageChange)=\"onPageChange($event)\"\r\n (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n</div>\r\n</div>", styles: [":host::ng-deep .md-drppicker .btn{line-height:10px!important}:host::ng-deep .md-drppicker.shown.drops-down-right{transform-origin:0 0;width:560px!important}:host::ng-deep .daterangepicker-input+.ngx-daterangepicker-material .applyBtn{display:none}:host::ng-deep .md-drppicker.drops-down-right.ltr.show-ranges.shown{top:65px!important}:host::ng-deep .md-drppicker.drops-down-right.ltr.double.show-ranges.shown{top:65px!important;right:-475px!important;left:unset!important;height:400px!important}:host::ng-deep .md-drppicker .btn{border-radius:8px!important;border:1px solid var(--Primary-600, #00A3FF)!important;background:var(--Primary-600, #00A3FF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--White, #FFF)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}:host::ng-deep .md-drppicker .ranges ul li button{padding:12px 16px;width:160px;color:var(--Gray-700, #344054);font-size:14px;font-weight:400;line-height:20px;background:none;border:none;text-align:left;cursor:pointer}:host::ng-deep .md-drppicker td.active,:host::ng-deep .md-drppicker td.active:hover{background-color:#029cf4!important;border-radius:20px!important;color:var(--White, #FFF)!important;text-align:center!important;font-size:14px!important;font-weight:500!important;line-height:20px}:host::ng-deep .md-drppicker.ltr .ranges{float:left;margin-top:10px!important}:host::ng-deep .md-drppicker td.in-range{background:var(--Primary-50, #EAF8FF)}:host::ng-deep .md-drppicker .ranges ul li button.active{background:var(--Primary-50, #EAF8FF)!important;border-radius:8px!important;color:var(--Primary-700, #009BF3);font-size:14px!important;font-weight:500!important;line-height:20px!important}:host::ng-deep table th,:host::ng-deep table td{width:40px!important;height:40px!important;padding:10px 8px!important}:host::ng-deep .md-drppicker td.available.prev,:host::ng-deep .md-drppicker th.available.prev{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep .md-drppicker td.available.next,:host::ng-deep .md-drppicker th.available.next{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep table th{border-bottom:0px solid var(--Gray-200, #EAECF0)!important;background:transparent!important;color:var(--Gray-700, #344054)!important;text-align:center;font-size:16px!important;font-weight:500!important;line-height:24px}:host::ng-deep .md-drppicker .btn.btn-default{border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize;margin-right:10px!important}:host::ng-deep .md-drppicker td.available.invalid-date{text-decoration:line-through;pointer-events:none;color:#a9a9a9}:host::ng-deep .md-drppicker td.available.today:not(.invalid-date){text-decoration:unset;pointer-events:unset;color:unset}.select-wrapper{position:relative;display:inline-block;width:100%}.placeholder-overlay{position:absolute;color:var(--Gray-500, #667085);font-family:Inter;font-size:16px!important;font-style:normal;font-weight:400;top:10px;left:15px;pointer-events:none;font-size:1.1rem;z-index:1}table th,table td{height:44px!important;padding:12px 24px!important;gap:12px;align-self:stretch}table th{border-bottom:1px solid var(--Gray-200, #EAECF0)!important;background:var(--Gray-50, #F9FAFB)!important;color:var(--Gray-500, #667085)!important;font-size:12px!important;font-weight:500!important;line-height:18px}table td{color:var(--Gray-900, #667085);font-size:14px!important;font-weight:500!important;line-height:20px}.bottom-border td{border-bottom:1px solid var(--Gray-200, #EAECF0)!important}.rotate{rotate:180deg;transition:1s}.engage-text{color:var(--Primary-700, #009BF3)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-decoration-line:underline;text-decoration-style:solid;text-decoration-skip-ink:none;text-decoration-thickness:auto;text-underline-offset:auto;text-underline-position:from-font;text-transform:capitalize}.dashed{border-radius:4px;border:1px dashed var(--Error-500, #F04438)!important;background:var(--Error-25, #FFFBFA)}.dashed-desc{color:var(--Error-600, #D92D20)!important;font-size:16px;font-weight:400;line-height:24px}\n"], dependencies: [{ kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.PaginationComponent, selector: "lib-pagination", inputs: ["collection", "itemsPerPage", "currentPage", "totalItems", "directionLinks", "pageSize", "paginationSizes"], outputs: ["pageChange", "pageSizeChange"] }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i8.DaterangepickerDirective, selector: "input[ngxDaterangepickerMd]", inputs: ["minDate", "maxDate", "autoApply", "alwaysShowCalendars", "showCustomRangeLabel", "linkedCalendars", "dateLimit", "singleDatePicker", "showWeekNumbers", "showISOWeekNumbers", "showDropdowns", "isInvalidDate", "isCustomDate", "isTooltipDate", "showClearButton", "customRangeDirection", "ranges", "opens", "drops", "firstMonthDayClass", "lastMonthDayClass", "emptyWeekRowClass", "emptyWeekColumnClass", "firstDayOfNextMonthClass", "lastDayOfPreviousMonthClass", "keepCalendarOpeningWithRange", "showRangeLabelOnInput", "showCancel", "lockStartDate", "timePicker", "timePicker24Hour", "timePickerIncrement", "timePickerSeconds", "closeOnAutoApply", "endKeyHolder", "startKey", "locale", "endKey"], outputs: ["change", "rangeClicked", "datesUpdated", "startDateChanged", "endDateChanged", "clearClicked"] }, { kind: "component", type: ReactiveSelectComponent, selector: "lib-reactive-select", inputs: ["idField", "nameField", "label", "data"], outputs: ["itemChange"] }, { kind: "component", type: CustomSelectComponent, selector: "lib-stores-select", inputs: ["items", "searchField", "multi", "idField", "selectedValues", "disabled", "label"], outputs: ["selected"] }, { kind: "component", type: GroupSelectComponent, selector: "lib-group-select", inputs: ["items", "searchField", "multi", "idField", "selectedValues", "disabled", "label"], outputs: ["selected"] }, { kind: "pipe", type: i6.DatePipe, name: "date" }] });
|
|
1082
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: EyeTestComponent, selector: "lib-eye-test", ngImport: i0, template: "<div class=\"card mb-2\">\r\n <form [formGroup]=\"eyeTestForm\">\r\n <div class=\"row\">\r\n <div class=\"col-md-12 mt-7 mb-3\">\r\n <div class=\"row px-3\">\r\n <div class=\"col-md-6\">\r\n <div class=\"row\">\r\n <div class=\"col-6 mb-0\">\r\n <div class=\"position-relative\">\r\n <span style=\"top: 20%;\" class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path\r\n d=\"M13.3333 1.66663V4.99996M6.66667 1.66663V4.99996M2.5 8.33329H17.5M4.16667 3.33329H15.8333C16.7538 3.33329 17.5 4.07948 17.5 4.99996V16.6666C17.5 17.5871 16.7538 18.3333 15.8333 18.3333H4.16667C3.24619 18.3333 2.5 17.5871 2.5 16.6666V4.99996C2.5 4.07948 3.24619 3.33329 4.16667 3.33329Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <input class=\"fx-date-range form-control ps-14 z-2\" style=\"min-width: 230px !important;\"\r\n type=\"text\" matInput ngxDaterangepickerMd [drops]=\"'down'\"\r\n [opens]=\"'right'\" [alwaysShowCalendars]=\"false\" [keepCalendarOpeningWithRange]=\"true\"\r\n [showCancel]=\"false\" autocomplete=\"off\" [(ngModel)]=\"selectedDateRange\"\r\n [ngModelOptions]=\"{standalone: true}\" (datesUpdated)=\"datechange($event)\" (click)=\"resetValidation()\" \r\n (startDateChanged)=\"onStartDateChange($event)\" [isCustomDate]=\"isCustomDate\" [autoApply]=\"true\" \r\n [locale]=\"{ format: 'DD-MM-YYYY', firstDay: 1, monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] }\"\r\n name=\"daterange\" [readonly]=\"true\" />\r\n </div>\r\n </div>\r\n <div [ngClass]=\"eyeTestForm.get('type')?.value ==='remote' ? 'col-6 mb-4' : 'col-4 mb-4'\" class=\"col-2 mb-4\">\r\n <lib-reactive-select formControlName=\"type\" [idField]=\"'value'\" [nameField]=\"'label'\"\r\n [data]=\"type\" (itemChange)=\"typeChange($event)\"></lib-reactive-select>\r\n </div>\r\n <div *ngIf=\"eyeTestForm.get('type')?.value !=='remote'\" class=\"col-2 mb-4\">\r\n <lib-reactive-select formControlName=\"auditType\" [idField]=\"'value'\" [nameField]=\"'label'\"\r\n [data]=\"auditType\" (itemChange)=\"auditTypeChange($event)\"></lib-reactive-select>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-md-6\">\r\n <div class=\"row\">\r\n <div class=\"mb-4\" style=\"width: 45% !important;\">\r\n <div class=\"select-wrapper\">\r\n <div class=\"placeholder-overlay\" *ngIf=\"!(eyeTestForm.get('ClusterList')?.value?.length)\">\r\n Select cluster\r\n </div>\r\n <lib-group-select [items]=\"ClusterList\" [disabled]=\"false\" [multi]=\"true\" [searchField]=\"'groupName'\"\r\n [idField]=\"'groupName'\" (selected)=\"ongroupSelect($event)\"\r\n [selectedValues]=\"eyeTestForm.get('ClusterList')?.value\">\r\n </lib-group-select>\r\n </div>\r\n \r\n </div>\r\n <div class=\"mb-4\" style=\"width: 40% !important;\">\r\n <div class=\"select-wrapper\">\r\n <div class=\"placeholder-overlay\" *ngIf=\"!(eyeTestForm.get('storeList')?.value?.length)\">\r\n Select Stores\r\n </div>\r\n <lib-stores-select [items]=\"storeList\" [disabled]=\"false\" [multi]=\"true\" [searchField]=\"'storeName'\"\r\n [idField]=\"'storeId'\" (selected)=\"onStoreSelect($event)\"\r\n [selectedValues]=\"eyeTestForm.get('storeList')?.value\"></lib-stores-select>\r\n </div>\r\n </div>\r\n <div style=\"width: 15% !important;\">\r\n <a (click)=\"onSubmit()\" type=\"submit\" class=\"btn btn-primary px-4 py-3\"><span>Apply</span></a>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </form>\r\n</div>\r\n\r\n<div class=\"card my-3\">\r\n <div class=\"card-header border-0 py-1\">\r\n <h3 class=\"card-title dashed w-100 align-items-start flex-column\">\r\n <span class=\"title-text\"><span class=\"mx-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\">\r\n <rect width=\"32\" height=\"32\" rx=\"16\" fill=\"#FEE4E2\"/>\r\n <g clip-path=\"url(#clip0_235_24234)\">\r\n <path d=\"M16 13.3335V16.0002M16 18.6668H16.0067M22.6667 16.0002C22.6667 19.6821 19.6819 22.6668 16 22.6668C12.3181 22.6668 9.33337 19.6821 9.33337 16.0002C9.33337 12.3183 12.3181 9.3335 16 9.3335C19.6819 9.3335 22.6667 12.3183 22.6667 16.0002Z\" stroke=\"#D92D20\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_235_24234\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" transform=\"translate(8 8)\"/>\r\n </clipPath>\r\n </defs>\r\n </svg></span><span class=\"dashed-desc\">Eye test video preview is available for 7 days. Audit data remains accessible, but videos will not be retained beyond this period.</span></span>\r\n </h3>\r\n </div> \r\n</div>\r\n\r\n<div class=\"card mt-3\">\r\n <div class=\"card-header border-0 pt-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"title-text mb-2\">Eye Test <span *ngIf=\"this.totalItems\" class=\"badge badge-light-primary\">{{this.totalItems}} Total</span>\r\n </span>\r\n <span class=\"text-sub mb-2\">Based on {{ headDate | date: 'MMM d' }} - {{\r\n headDateEnd | date: 'MMM d, y' }}</span>\r\n </h3>\r\n <div class=\"card-toolbar\">\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-center position-relative my-1\">\r\n <span class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\r\n fill=\"none\">\r\n <rect opacity=\"0.5\" x=\"17.0365\" y=\"15.1223\" width=\"8.15546\" height=\"2\" rx=\"1\"\r\n transform=\"rotate(45 17.0365 15.1223)\" fill=\"currentColor\"></rect>\r\n <path\r\n d=\"M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z\"\r\n fill=\"currentColor\"></path>\r\n </svg>\r\n </span>\r\n <input (change)=\"searchData()\" [(ngModel)]=\"searchValue\" type=\"text\" class=\"form-control ps-14 me-2\" autocomplete=\"off\" placeholder=\"Search\" />\r\n\r\n \r\n \r\n <button *ngIf=\"!noData && !loading\" type=\"button\" (click)=\"exportXLSX()\"\r\n class=\"btn btn-default mx-2 btn-outline btn-outline-default rounded-3 text-nowrap border-val\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path\r\n d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg><span class=\"ms-2\">Export</span> </button>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"loading\" class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"noData\" class=\"row\">\r\n <div class=\"col-lg-12 mb-3\">\r\n <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-nodata-table\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodata-title\">No data found</div>\r\n <div class=\"nodata-sub\">There is no result for this eye test table</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"!noData && !loading\" class=\"card-body\">\r\n <div class=\"table-responsive\">\r\n <table class=\"w-100 table bottom-border text-nowrap\">\r\n <thead>\r\n <tr>\r\n <th class=\"text-start\">\r\n <span class=\"cursor-pointer\" (click)=\"onSort('date')\"> Date <svg \r\n [ngClass]=\"sortedColumn === 'date' && sortOrder === 1 ? 'rotate' : ''\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortedColumn === 'date' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span>\r\n </th>\r\n <th><span class=\"cursor-pointer\" (click)=\"onSort('storeName')\">Store Name <svg \r\n [ngClass]=\"sortedColumn === 'storeName' && sortOrder === 1 ? 'rotate' : ''\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortedColumn === 'storeName' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span></th>\r\n <th><span class=\"cursor-pointer\" (click)=\"onSort('storeId')\">Store ID <svg \r\n [ngClass]=\"sortedColumn === 'storeId' && sortOrder === 1 ? 'rotate' : ''\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortedColumn === 'storeId' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span></th>\r\n <th *ngIf=\"this.typeValue ==='remote'\" class=\"text-start\">Engagement ID</th>\r\n <th *ngIf=\"this.typeValue !=='remote'\" class=\"text-start\">Optom ID</th>\r\n <th *ngIf=\"this.typeValue !=='remote'\" class=\"text-start\">Queue ID</th>\r\n <th class=\"text-start\">Compliance Score</th>\r\n <th><span class=\"cursor-pointer\" (click)=\"onSort('coveredStepsAI')\">Steps Covered By AI <svg \r\n [ngClass]=\"sortedColumn === 'coveredStepsAI' && sortOrder === 1 ? 'rotate' : ''\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortedColumn === 'coveredStepsAI' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span> </th>\r\n \r\n <th><span class=\"cursor-pointer\" (click)=\"onSort('trustScore')\">Trust Score <svg \r\n [ngClass]=\"sortedColumn === 'trustScore' && sortOrder === 1 ? 'rotate' : ''\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortedColumn === 'trustScore' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span> </th>\r\n\r\n <th *ngIf=\"this.typeValue !=='remote'\"><span class=\"cursor-pointer\" (click)=\"onSort('visitorsType')\">Visitor Type <svg \r\n [ngClass]=\"sortedColumn === 'visitorsType' && sortOrder === 1 ? 'rotate' : ''\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortedColumn === 'visitorsType' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span> </th>\r\n <th class=\"text-start\">Test Duration</th>\r\n <th><span class=\"cursor-pointer\" (click)=\"onSort('auditStatus')\">Audit Status <svg \r\n [ngClass]=\"sortedColumn === 'auditStatus' && sortOrder === 1 ? 'rotate' : ''\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortedColumn === 'auditStatus' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span></th>\r\n <th class=\"text-start\">Audited By</th>\r\n <th class=\"text-start\">Action</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let obj of eyeTestData; let i=index;\">\r\n <td>{{obj?._source?.date}}</td>\r\n <td>{{obj?._source?.storeName}}</td>\r\n <td>{{obj?._source?.storeId}}</td>\r\n <td *ngIf=\"this.typeValue ==='remote'\" class=\"engage-text\">{{obj?._source?.engagementId}}</td>\r\n <td *ngIf=\"this.typeValue !=='remote'\">{{obj?._source?.optumId ? obj?._source?.optumId :''}}</td>\r\n <td *ngIf=\"this.typeValue !=='remote'\" class=\"engage-text\">{{obj?._source?.queueId ? obj?._source?.queueId:''}}</td>\r\n <td>{{obj?._source?.complianceScore ? obj?._source?.complianceScore :'--'}}<span *ngIf=\"obj?._source?.complianceScore\">%</span></td>\r\n <td>{{obj?._source?.coveredStepsAI ? obj?._source?.coveredStepsAI:'--'}}</td>\r\n <td>{{obj?._source?.trustScore ? obj?._source?.trustScore:'--'}}</td>\r\n <td *ngIf=\"this.typeValue !=='remote'\">{{obj?._source?.visitorsType ? obj?._source?.visitorsType:'--'}}</td>\r\n <td>{{obj?._source?.min ? obj?._source?.min :'0'}} mins {{obj?._source?.sec ? obj?._source?.sec:'0'}} secs</td>\r\n <td><span class=\"badge badge-light-primary\" *ngIf=\"obj?._source?.auditStatus ==='Yet-to-Audit'\">{{obj?._source?.auditStatus}}</span>\r\n <span class=\"badge badge-light-warning\" *ngIf=\"obj?._source?.auditStatus ==='Re-Audited'\">{{obj?._source?.auditStatus}}</span>\r\n <span class=\"badge badge-light-success\" *ngIf=\"obj?._source?.auditStatus ==='Audited'\">{{obj?._source?.auditStatus}}</span>\r\n <span class=\"badge badge-light-info\" *ngIf=\"obj?._source?.auditStatus ==='In-Progress'\">{{obj?._source?.auditStatus}}</span></td>\r\n <td>{{obj?._source?.auditedBy?obj?._source?.auditedBy:\"-\"}}</td>\r\n <td class=\"cursor-pointer\" (click)=\"eyeTestView(obj)\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"16\" viewBox=\"0 0 20 16\" fill=\"none\">\r\n <path d=\"M0.833496 8.00016C0.833496 8.00016 4.16683 1.3335 10.0002 1.3335C15.8335 1.3335 19.1668 8.00016 19.1668 8.00016C19.1668 8.00016 15.8335 14.6668 10.0002 14.6668C4.16683 14.6668 0.833496 8.00016 0.833496 8.00016Z\" stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n <path d=\"M10.0002 10.5002C11.3809 10.5002 12.5002 9.38087 12.5002 8.00016C12.5002 6.61945 11.3809 5.50016 10.0002 5.50016C8.61945 5.50016 7.50016 6.61945 7.50016 8.00016C7.50016 9.38087 8.61945 10.5002 10.0002 10.5002Z\" stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg></td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n\r\n</div>\r\n</div>\r\n<div class=\"card-footer\" *ngIf=\"!noData && !loading\">\r\n <lib-pagination [itemsPerPage]=\"pageSize\" [currentPage]=\"offset\" [totalItems]=\"totalItems\"\r\n [paginationSizes]=\"paginationSizes\" [pageSize]=\"pageSize\" (pageChange)=\"onPageChange($event)\"\r\n (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n</div>\r\n</div>", styles: [":host::ng-deep .md-drppicker .btn{line-height:10px!important}:host::ng-deep .md-drppicker.shown.drops-down-right{transform-origin:0 0;width:560px!important}:host::ng-deep .daterangepicker-input+.ngx-daterangepicker-material .applyBtn{display:none}:host::ng-deep .md-drppicker.drops-down-right.ltr.show-ranges.shown{top:65px!important}:host::ng-deep .md-drppicker.drops-down-right.ltr.double.show-ranges.shown{top:65px!important;right:-475px!important;left:unset!important;height:400px!important}:host::ng-deep .md-drppicker .btn{border-radius:8px!important;border:1px solid var(--Primary-600, #00A3FF)!important;background:var(--Primary-600, #00A3FF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--White, #FFF)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}:host::ng-deep .md-drppicker .ranges ul li button{padding:12px 16px;width:160px;color:var(--Gray-700, #344054);font-size:14px;font-weight:400;line-height:20px;background:none;border:none;text-align:left;cursor:pointer}:host::ng-deep .md-drppicker td.active,:host::ng-deep .md-drppicker td.active:hover{background-color:#029cf4!important;border-radius:20px!important;color:var(--White, #FFF)!important;text-align:center!important;font-size:14px!important;font-weight:500!important;line-height:20px}:host::ng-deep .md-drppicker.ltr .ranges{float:left;margin-top:10px!important}:host::ng-deep .md-drppicker td.in-range{background:var(--Primary-50, #EAF8FF)}:host::ng-deep .md-drppicker .ranges ul li button.active{background:var(--Primary-50, #EAF8FF)!important;border-radius:8px!important;color:var(--Primary-700, #009BF3);font-size:14px!important;font-weight:500!important;line-height:20px!important}:host::ng-deep table th,:host::ng-deep table td{width:40px!important;height:40px!important;padding:10px 8px!important}:host::ng-deep .md-drppicker td.available.prev,:host::ng-deep .md-drppicker th.available.prev{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep .md-drppicker td.available.next,:host::ng-deep .md-drppicker th.available.next{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep table th{border-bottom:0px solid var(--Gray-200, #EAECF0)!important;background:transparent!important;color:var(--Gray-700, #344054)!important;text-align:center;font-size:16px!important;font-weight:500!important;line-height:24px}:host::ng-deep .md-drppicker .btn.btn-default{border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize;margin-right:10px!important}:host::ng-deep .md-drppicker td.available.invalid-date{text-decoration:line-through;pointer-events:none;color:#a9a9a9}:host::ng-deep .md-drppicker td.available.today:not(.invalid-date){text-decoration:unset;pointer-events:unset;color:unset}.select-wrapper{position:relative;display:inline-block;width:100%}.placeholder-overlay{position:absolute;color:var(--Gray-500, #667085);font-family:Inter;font-size:16px!important;font-style:normal;font-weight:400;top:10px;left:15px;pointer-events:none;font-size:1.1rem;z-index:1}table th,table td{height:44px!important;padding:12px 24px!important;gap:12px;align-self:stretch}table th{border-bottom:1px solid var(--Gray-200, #EAECF0)!important;background:var(--Gray-50, #F9FAFB)!important;color:var(--Gray-500, #667085)!important;font-size:12px!important;font-weight:500!important;line-height:18px}table td{color:var(--Gray-900, #667085);font-size:14px!important;font-weight:500!important;line-height:20px}.bottom-border td{border-bottom:1px solid var(--Gray-200, #EAECF0)!important}.rotate{rotate:180deg;transition:1s}.engage-text{color:var(--Primary-700, #009BF3)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-decoration-line:underline;text-decoration-style:solid;text-decoration-skip-ink:none;text-decoration-thickness:auto;text-underline-offset:auto;text-underline-position:from-font;text-transform:capitalize}.dashed{border-radius:4px;border:1px dashed var(--Error-500, #F04438)!important;background:var(--Error-25, #FFFBFA)}.dashed-desc{color:var(--Error-600, #D92D20)!important;font-size:16px;font-weight:400;line-height:24px}\n"], dependencies: [{ kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.PaginationComponent, selector: "lib-pagination", inputs: ["collection", "itemsPerPage", "currentPage", "totalItems", "directionLinks", "pageSize", "paginationSizes"], outputs: ["pageChange", "pageSizeChange"] }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i8.DaterangepickerDirective, selector: "input[ngxDaterangepickerMd]", inputs: ["minDate", "maxDate", "autoApply", "alwaysShowCalendars", "showCustomRangeLabel", "linkedCalendars", "dateLimit", "singleDatePicker", "showWeekNumbers", "showISOWeekNumbers", "showDropdowns", "isInvalidDate", "isCustomDate", "isTooltipDate", "showClearButton", "customRangeDirection", "ranges", "opens", "drops", "firstMonthDayClass", "lastMonthDayClass", "emptyWeekRowClass", "emptyWeekColumnClass", "firstDayOfNextMonthClass", "lastDayOfPreviousMonthClass", "keepCalendarOpeningWithRange", "showRangeLabelOnInput", "showCancel", "lockStartDate", "timePicker", "timePicker24Hour", "timePickerIncrement", "timePickerSeconds", "closeOnAutoApply", "endKeyHolder", "startKey", "locale", "endKey"], outputs: ["change", "rangeClicked", "datesUpdated", "startDateChanged", "endDateChanged", "clearClicked"] }, { kind: "component", type: ReactiveSelectComponent, selector: "lib-reactive-select", inputs: ["idField", "nameField", "label", "data"], outputs: ["itemChange"] }, { kind: "component", type: CustomSelectComponent, selector: "lib-stores-select", inputs: ["items", "searchField", "multi", "idField", "selectedValues", "disabled", "label"], outputs: ["selected"] }, { kind: "component", type: GroupSelectComponent, selector: "lib-group-select", inputs: ["items", "searchField", "multi", "idField", "selectedValues", "disabled", "label"], outputs: ["selected"] }, { kind: "pipe", type: i6.DatePipe, name: "date" }] });
|
|
1089
1083
|
}
|
|
1090
1084
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EyeTestComponent, decorators: [{
|
|
1091
1085
|
type: Component,
|
|
1092
|
-
args: [{ selector: 'lib-eye-test', template: "<div class=\"card mb-2\">\r\n <form [formGroup]=\"eyeTestForm\">\r\n <div class=\"row\">\r\n <div class=\"col-md-12 mt-7 mb-3\">\r\n <div class=\"row px-3\">\r\n <div class=\"col-md-3 mb-0\">\r\n <div class=\"position-relative\">\r\n <span style=\"top: 20%;\" class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path\r\n d=\"M13.3333 1.66663V4.99996M6.66667 1.66663V4.99996M2.5 8.33329H17.5M4.16667 3.33329H15.8333C16.7538 3.33329 17.5 4.07948 17.5 4.99996V16.6666C17.5 17.5871 16.7538 18.3333 15.8333 18.3333H4.16667C3.24619 18.3333 2.5 17.5871 2.5 16.6666V4.99996C2.5 4.07948 3.24619 3.33329 4.16667 3.33329Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <input class=\"fx-date-range form-control ps-14 z-2\" style=\"min-width: 230px !important;\"\r\n type=\"text\" matInput ngxDaterangepickerMd [drops]=\"'down'\"\r\n [opens]=\"'right'\" [alwaysShowCalendars]=\"false\" [keepCalendarOpeningWithRange]=\"true\"\r\n [showCancel]=\"false\" autocomplete=\"off\" [(ngModel)]=\"selectedDateRange\"\r\n [ngModelOptions]=\"{standalone: true}\" (datesUpdated)=\"datechange($event)\" (click)=\"resetValidation()\" \r\n (startDateChanged)=\"onStartDateChange($event)\" [isCustomDate]=\"isCustomDate\" [autoApply]=\"true\" \r\n [locale]=\"{ format: 'DD-MM-YYYY', firstDay: 1, monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] }\"\r\n name=\"daterange\" [readonly]=\"true\" />\r\n </div>\r\n </div>\r\n <div [ngClass]=\"eyeTestForm.get('type')?.value ==='remote' ? 'col-md-3 mb-4' : 'col-md-2 mb-4'\" class=\"col-md-2 mb-4\">\r\n <lib-reactive-select formControlName=\"type\" [idField]=\"'value'\" [nameField]=\"'label'\"\r\n [data]=\"type\" (itemChange)=\"typeChange($event)\"></lib-reactive-select>\r\n </div>\r\n <div *ngIf=\"eyeTestForm.get('type')?.value !=='remote'\" class=\"col-md-1 mb-4\">\r\n <lib-reactive-select formControlName=\"auditType\" [idField]=\"'value'\" [nameField]=\"'label'\"\r\n [data]=\"auditType\" (itemChange)=\"auditTypeChange($event)\"></lib-reactive-select>\r\n </div>\r\n <div class=\"col-md-2 mb-4\" >\r\n <div class=\"select-wrapper\">\r\n <div class=\"placeholder-overlay\" *ngIf=\"!(eyeTestForm.get('ClusterList')?.value?.length)\">\r\n Select cluster\r\n </div>\r\n <lib-group-select [items]=\"ClusterList\" [disabled]=\"false\" [multi]=\"true\" [searchField]=\"'groupName'\"\r\n [idField]=\"'groupName'\" (selected)=\"ongroupSelect($event)\"\r\n [selectedValues]=\"eyeTestForm.get('ClusterList')?.value\">\r\n </lib-group-select>\r\n </div>\r\n \r\n </div>\r\n <div class=\"col-md-3 mb-4\" >\r\n <div class=\"select-wrapper\">\r\n <div class=\"placeholder-overlay\" *ngIf=\"!(eyeTestForm.get('storeList')?.value?.length)\">\r\n Select Stores\r\n </div>\r\n <lib-stores-select [items]=\"storeList\" [disabled]=\"false\" [multi]=\"true\" [searchField]=\"'storeName'\"\r\n [idField]=\"'storeId'\" (selected)=\"onStoreSelect($event)\"\r\n [selectedValues]=\"eyeTestForm.get('storeList')?.value\"></lib-stores-select>\r\n </div>\r\n </div>\r\n <div class=\"col-md-1\">\r\n <a (click)=\"onSubmit()\" type=\"submit\" class=\"btn btn-primary px-4 \"><span>Apply</span></a>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </form>\r\n</div>\r\n\r\n<div class=\"card my-3\">\r\n <div class=\"card-header border-0 py-1\">\r\n <h3 class=\"card-title dashed w-100 align-items-start flex-column\">\r\n <span class=\"title-text\"><span class=\"mx-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\">\r\n <rect width=\"32\" height=\"32\" rx=\"16\" fill=\"#FEE4E2\"/>\r\n <g clip-path=\"url(#clip0_235_24234)\">\r\n <path d=\"M16 13.3335V16.0002M16 18.6668H16.0067M22.6667 16.0002C22.6667 19.6821 19.6819 22.6668 16 22.6668C12.3181 22.6668 9.33337 19.6821 9.33337 16.0002C9.33337 12.3183 12.3181 9.3335 16 9.3335C19.6819 9.3335 22.6667 12.3183 22.6667 16.0002Z\" stroke=\"#D92D20\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_235_24234\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" transform=\"translate(8 8)\"/>\r\n </clipPath>\r\n </defs>\r\n </svg></span><span class=\"dashed-desc\">Eye test video preview is available for 7 days. Audit data remains accessible, but videos will not be retained beyond this period.</span></span>\r\n </h3>\r\n </div> \r\n</div>\r\n\r\n<div class=\"card mt-3\">\r\n <div class=\"card-header border-0 pt-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"title-text mb-2\">Eye Test <span *ngIf=\"this.totalItems\" class=\"badge badge-light-primary\">{{this.totalItems}} Total</span>\r\n </span>\r\n <span class=\"text-sub mb-2\">Based on {{ headDate | date: 'MMM d' }} - {{\r\n headDateEnd | date: 'MMM d, y' }}</span>\r\n </h3>\r\n <div class=\"card-toolbar\">\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-center position-relative my-1\">\r\n <span class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\r\n fill=\"none\">\r\n <rect opacity=\"0.5\" x=\"17.0365\" y=\"15.1223\" width=\"8.15546\" height=\"2\" rx=\"1\"\r\n transform=\"rotate(45 17.0365 15.1223)\" fill=\"currentColor\"></rect>\r\n <path\r\n d=\"M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z\"\r\n fill=\"currentColor\"></path>\r\n </svg>\r\n </span>\r\n <input (change)=\"searchData()\" [(ngModel)]=\"searchValue\" type=\"text\" class=\"form-control ps-14 me-2\" autocomplete=\"off\" placeholder=\"Search\" />\r\n\r\n \r\n \r\n <button *ngIf=\"!noData && !loading\" type=\"button\" (click)=\"exportXLSX()\"\r\n class=\"btn btn-default mx-2 btn-outline btn-outline-default rounded-3 text-nowrap border-val\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path\r\n d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg><span class=\"ms-2\">Export</span> </button>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"loading\" class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"noData\" class=\"row\">\r\n <div class=\"col-lg-12 mb-3\">\r\n <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-nodata-table\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodata-title\">No data found</div>\r\n <div class=\"nodata-sub\">There is no result for this eye test table</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"!noData && !loading\" class=\"card-body\">\r\n <div class=\"table-responsive\">\r\n <table class=\"w-100 table bottom-border text-nowrap\">\r\n <thead>\r\n <tr>\r\n <th class=\"text-start\">\r\n <span class=\"cursor-pointer\" (click)=\"onSort('date')\"> Date <svg \r\n [ngClass]=\"sortedColumn === 'date' && sortOrder === 1 ? 'rotate' : ''\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortedColumn === 'date' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span>\r\n </th>\r\n <th><span class=\"cursor-pointer\" (click)=\"onSort('storeName')\">Store Name <svg \r\n [ngClass]=\"sortedColumn === 'storeName' && sortOrder === 1 ? 'rotate' : ''\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortedColumn === 'storeName' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span></th>\r\n <th><span class=\"cursor-pointer\" (click)=\"onSort('storeId')\">Store ID <svg \r\n [ngClass]=\"sortedColumn === 'storeId' && sortOrder === 1 ? 'rotate' : ''\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortedColumn === 'storeId' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span></th>\r\n <th *ngIf=\"this.typeValue ==='remote'\" class=\"text-start\">Engagement ID</th>\r\n <th *ngIf=\"this.typeValue !=='remote'\" class=\"text-start\">Optom ID</th>\r\n <th *ngIf=\"this.typeValue !=='remote'\" class=\"text-start\">Queue ID</th>\r\n <th class=\"text-start\">Compliance Score</th>\r\n <th><span class=\"cursor-pointer\" (click)=\"onSort('coveredStepsAI')\">Steps Covered By AI <svg \r\n [ngClass]=\"sortedColumn === 'coveredStepsAI' && sortOrder === 1 ? 'rotate' : ''\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortedColumn === 'coveredStepsAI' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span> </th>\r\n \r\n <th><span class=\"cursor-pointer\" (click)=\"onSort('trustScore')\">Trust Score <svg \r\n [ngClass]=\"sortedColumn === 'trustScore' && sortOrder === 1 ? 'rotate' : ''\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortedColumn === 'trustScore' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span> </th>\r\n\r\n <th *ngIf=\"this.typeValue !=='remote'\"><span class=\"cursor-pointer\" (click)=\"onSort('visitorsType')\">Visitor Type <svg \r\n [ngClass]=\"sortedColumn === 'visitorsType' && sortOrder === 1 ? 'rotate' : ''\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortedColumn === 'visitorsType' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span> </th>\r\n <th class=\"text-start\">Test Duration</th>\r\n <th><span class=\"cursor-pointer\" (click)=\"onSort('auditStatus')\">Audit Status <svg \r\n [ngClass]=\"sortedColumn === 'auditStatus' && sortOrder === 1 ? 'rotate' : ''\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortedColumn === 'auditStatus' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span></th>\r\n <th class=\"text-start\">Audited By</th>\r\n <th class=\"text-start\">Action</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let obj of eyeTestData; let i=index;\">\r\n <td>{{obj?._source?.date}}</td>\r\n <td>{{obj?._source?.storeName}}</td>\r\n <td>{{obj?._source?.storeId}}</td>\r\n <td *ngIf=\"this.typeValue ==='remote'\" class=\"engage-text\">{{obj?._source?.engagementId}}</td>\r\n <td *ngIf=\"this.typeValue !=='remote'\">{{obj?._source?.optumId ? obj?._source?.optumId :''}}</td>\r\n <td *ngIf=\"this.typeValue !=='remote'\" class=\"engage-text\">{{obj?._source?.queueId ? obj?._source?.queueId:''}}</td>\r\n <td>{{obj?._source?.complianceScore ? obj?._source?.complianceScore :'--'}}<span *ngIf=\"obj?._source?.complianceScore\">%</span></td>\r\n <td>{{obj?._source?.coveredStepsAI ? obj?._source?.coveredStepsAI:'--'}}</td>\r\n <td>{{obj?._source?.trustScore ? obj?._source?.trustScore:'--'}}</td>\r\n <td *ngIf=\"this.typeValue !=='remote'\">{{obj?._source?.visitorsType ? obj?._source?.visitorsType:'--'}}</td>\r\n <td>{{obj?._source?.min ? obj?._source?.min :'0'}} mins {{obj?._source?.sec ? obj?._source?.sec:'0'}} secs</td>\r\n <td><span class=\"badge badge-light-primary\" *ngIf=\"obj?._source?.auditStatus ==='Yet-to-Audit'\">{{obj?._source?.auditStatus}}</span>\r\n <span class=\"badge badge-light-warning\" *ngIf=\"obj?._source?.auditStatus ==='Re-Audited'\">{{obj?._source?.auditStatus}}</span>\r\n <span class=\"badge badge-light-success\" *ngIf=\"obj?._source?.auditStatus ==='Audited'\">{{obj?._source?.auditStatus}}</span>\r\n <span class=\"badge badge-light-info\" *ngIf=\"obj?._source?.auditStatus ==='In-Progress'\">{{obj?._source?.auditStatus}}</span></td>\r\n <td>{{obj?._source?.auditedBy?obj?._source?.auditedBy:\"-\"}}</td>\r\n <td class=\"cursor-pointer\" (click)=\"eyeTestView(obj)\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"16\" viewBox=\"0 0 20 16\" fill=\"none\">\r\n <path d=\"M0.833496 8.00016C0.833496 8.00016 4.16683 1.3335 10.0002 1.3335C15.8335 1.3335 19.1668 8.00016 19.1668 8.00016C19.1668 8.00016 15.8335 14.6668 10.0002 14.6668C4.16683 14.6668 0.833496 8.00016 0.833496 8.00016Z\" stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n <path d=\"M10.0002 10.5002C11.3809 10.5002 12.5002 9.38087 12.5002 8.00016C12.5002 6.61945 11.3809 5.50016 10.0002 5.50016C8.61945 5.50016 7.50016 6.61945 7.50016 8.00016C7.50016 9.38087 8.61945 10.5002 10.0002 10.5002Z\" stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg></td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n\r\n</div>\r\n</div>\r\n<div class=\"card-footer\" *ngIf=\"!noData && !loading\">\r\n <lib-pagination [itemsPerPage]=\"pageSize\" [currentPage]=\"offset\" [totalItems]=\"totalItems\"\r\n [paginationSizes]=\"paginationSizes\" [pageSize]=\"pageSize\" (pageChange)=\"onPageChange($event)\"\r\n (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n</div>\r\n</div>", styles: [":host::ng-deep .md-drppicker .btn{line-height:10px!important}:host::ng-deep .md-drppicker.shown.drops-down-right{transform-origin:0 0;width:560px!important}:host::ng-deep .daterangepicker-input+.ngx-daterangepicker-material .applyBtn{display:none}:host::ng-deep .md-drppicker.drops-down-right.ltr.show-ranges.shown{top:65px!important}:host::ng-deep .md-drppicker.drops-down-right.ltr.double.show-ranges.shown{top:65px!important;right:-475px!important;left:unset!important;height:400px!important}:host::ng-deep .md-drppicker .btn{border-radius:8px!important;border:1px solid var(--Primary-600, #00A3FF)!important;background:var(--Primary-600, #00A3FF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--White, #FFF)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}:host::ng-deep .md-drppicker .ranges ul li button{padding:12px 16px;width:160px;color:var(--Gray-700, #344054);font-size:14px;font-weight:400;line-height:20px;background:none;border:none;text-align:left;cursor:pointer}:host::ng-deep .md-drppicker td.active,:host::ng-deep .md-drppicker td.active:hover{background-color:#029cf4!important;border-radius:20px!important;color:var(--White, #FFF)!important;text-align:center!important;font-size:14px!important;font-weight:500!important;line-height:20px}:host::ng-deep .md-drppicker.ltr .ranges{float:left;margin-top:10px!important}:host::ng-deep .md-drppicker td.in-range{background:var(--Primary-50, #EAF8FF)}:host::ng-deep .md-drppicker .ranges ul li button.active{background:var(--Primary-50, #EAF8FF)!important;border-radius:8px!important;color:var(--Primary-700, #009BF3);font-size:14px!important;font-weight:500!important;line-height:20px!important}:host::ng-deep table th,:host::ng-deep table td{width:40px!important;height:40px!important;padding:10px 8px!important}:host::ng-deep .md-drppicker td.available.prev,:host::ng-deep .md-drppicker th.available.prev{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep .md-drppicker td.available.next,:host::ng-deep .md-drppicker th.available.next{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep table th{border-bottom:0px solid var(--Gray-200, #EAECF0)!important;background:transparent!important;color:var(--Gray-700, #344054)!important;text-align:center;font-size:16px!important;font-weight:500!important;line-height:24px}:host::ng-deep .md-drppicker .btn.btn-default{border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize;margin-right:10px!important}:host::ng-deep .md-drppicker td.available.invalid-date{text-decoration:line-through;pointer-events:none;color:#a9a9a9}:host::ng-deep .md-drppicker td.available.today:not(.invalid-date){text-decoration:unset;pointer-events:unset;color:unset}.select-wrapper{position:relative;display:inline-block;width:100%}.placeholder-overlay{position:absolute;color:var(--Gray-500, #667085);font-family:Inter;font-size:16px!important;font-style:normal;font-weight:400;top:10px;left:15px;pointer-events:none;font-size:1.1rem;z-index:1}table th,table td{height:44px!important;padding:12px 24px!important;gap:12px;align-self:stretch}table th{border-bottom:1px solid var(--Gray-200, #EAECF0)!important;background:var(--Gray-50, #F9FAFB)!important;color:var(--Gray-500, #667085)!important;font-size:12px!important;font-weight:500!important;line-height:18px}table td{color:var(--Gray-900, #667085);font-size:14px!important;font-weight:500!important;line-height:20px}.bottom-border td{border-bottom:1px solid var(--Gray-200, #EAECF0)!important}.rotate{rotate:180deg;transition:1s}.engage-text{color:var(--Primary-700, #009BF3)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-decoration-line:underline;text-decoration-style:solid;text-decoration-skip-ink:none;text-decoration-thickness:auto;text-underline-offset:auto;text-underline-position:from-font;text-transform:capitalize}.dashed{border-radius:4px;border:1px dashed var(--Error-500, #F04438)!important;background:var(--Error-25, #FFFBFA)}.dashed-desc{color:var(--Error-600, #D92D20)!important;font-size:16px;font-weight:400;line-height:24px}\n"] }]
|
|
1086
|
+
args: [{ selector: 'lib-eye-test', template: "<div class=\"card mb-2\">\r\n <form [formGroup]=\"eyeTestForm\">\r\n <div class=\"row\">\r\n <div class=\"col-md-12 mt-7 mb-3\">\r\n <div class=\"row px-3\">\r\n <div class=\"col-md-6\">\r\n <div class=\"row\">\r\n <div class=\"col-6 mb-0\">\r\n <div class=\"position-relative\">\r\n <span style=\"top: 20%;\" class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path\r\n d=\"M13.3333 1.66663V4.99996M6.66667 1.66663V4.99996M2.5 8.33329H17.5M4.16667 3.33329H15.8333C16.7538 3.33329 17.5 4.07948 17.5 4.99996V16.6666C17.5 17.5871 16.7538 18.3333 15.8333 18.3333H4.16667C3.24619 18.3333 2.5 17.5871 2.5 16.6666V4.99996C2.5 4.07948 3.24619 3.33329 4.16667 3.33329Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <input class=\"fx-date-range form-control ps-14 z-2\" style=\"min-width: 230px !important;\"\r\n type=\"text\" matInput ngxDaterangepickerMd [drops]=\"'down'\"\r\n [opens]=\"'right'\" [alwaysShowCalendars]=\"false\" [keepCalendarOpeningWithRange]=\"true\"\r\n [showCancel]=\"false\" autocomplete=\"off\" [(ngModel)]=\"selectedDateRange\"\r\n [ngModelOptions]=\"{standalone: true}\" (datesUpdated)=\"datechange($event)\" (click)=\"resetValidation()\" \r\n (startDateChanged)=\"onStartDateChange($event)\" [isCustomDate]=\"isCustomDate\" [autoApply]=\"true\" \r\n [locale]=\"{ format: 'DD-MM-YYYY', firstDay: 1, monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] }\"\r\n name=\"daterange\" [readonly]=\"true\" />\r\n </div>\r\n </div>\r\n <div [ngClass]=\"eyeTestForm.get('type')?.value ==='remote' ? 'col-6 mb-4' : 'col-4 mb-4'\" class=\"col-2 mb-4\">\r\n <lib-reactive-select formControlName=\"type\" [idField]=\"'value'\" [nameField]=\"'label'\"\r\n [data]=\"type\" (itemChange)=\"typeChange($event)\"></lib-reactive-select>\r\n </div>\r\n <div *ngIf=\"eyeTestForm.get('type')?.value !=='remote'\" class=\"col-2 mb-4\">\r\n <lib-reactive-select formControlName=\"auditType\" [idField]=\"'value'\" [nameField]=\"'label'\"\r\n [data]=\"auditType\" (itemChange)=\"auditTypeChange($event)\"></lib-reactive-select>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-md-6\">\r\n <div class=\"row\">\r\n <div class=\"mb-4\" style=\"width: 45% !important;\">\r\n <div class=\"select-wrapper\">\r\n <div class=\"placeholder-overlay\" *ngIf=\"!(eyeTestForm.get('ClusterList')?.value?.length)\">\r\n Select cluster\r\n </div>\r\n <lib-group-select [items]=\"ClusterList\" [disabled]=\"false\" [multi]=\"true\" [searchField]=\"'groupName'\"\r\n [idField]=\"'groupName'\" (selected)=\"ongroupSelect($event)\"\r\n [selectedValues]=\"eyeTestForm.get('ClusterList')?.value\">\r\n </lib-group-select>\r\n </div>\r\n \r\n </div>\r\n <div class=\"mb-4\" style=\"width: 40% !important;\">\r\n <div class=\"select-wrapper\">\r\n <div class=\"placeholder-overlay\" *ngIf=\"!(eyeTestForm.get('storeList')?.value?.length)\">\r\n Select Stores\r\n </div>\r\n <lib-stores-select [items]=\"storeList\" [disabled]=\"false\" [multi]=\"true\" [searchField]=\"'storeName'\"\r\n [idField]=\"'storeId'\" (selected)=\"onStoreSelect($event)\"\r\n [selectedValues]=\"eyeTestForm.get('storeList')?.value\"></lib-stores-select>\r\n </div>\r\n </div>\r\n <div style=\"width: 15% !important;\">\r\n <a (click)=\"onSubmit()\" type=\"submit\" class=\"btn btn-primary px-4 py-3\"><span>Apply</span></a>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </form>\r\n</div>\r\n\r\n<div class=\"card my-3\">\r\n <div class=\"card-header border-0 py-1\">\r\n <h3 class=\"card-title dashed w-100 align-items-start flex-column\">\r\n <span class=\"title-text\"><span class=\"mx-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\">\r\n <rect width=\"32\" height=\"32\" rx=\"16\" fill=\"#FEE4E2\"/>\r\n <g clip-path=\"url(#clip0_235_24234)\">\r\n <path d=\"M16 13.3335V16.0002M16 18.6668H16.0067M22.6667 16.0002C22.6667 19.6821 19.6819 22.6668 16 22.6668C12.3181 22.6668 9.33337 19.6821 9.33337 16.0002C9.33337 12.3183 12.3181 9.3335 16 9.3335C19.6819 9.3335 22.6667 12.3183 22.6667 16.0002Z\" stroke=\"#D92D20\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_235_24234\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" transform=\"translate(8 8)\"/>\r\n </clipPath>\r\n </defs>\r\n </svg></span><span class=\"dashed-desc\">Eye test video preview is available for 7 days. Audit data remains accessible, but videos will not be retained beyond this period.</span></span>\r\n </h3>\r\n </div> \r\n</div>\r\n\r\n<div class=\"card mt-3\">\r\n <div class=\"card-header border-0 pt-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"title-text mb-2\">Eye Test <span *ngIf=\"this.totalItems\" class=\"badge badge-light-primary\">{{this.totalItems}} Total</span>\r\n </span>\r\n <span class=\"text-sub mb-2\">Based on {{ headDate | date: 'MMM d' }} - {{\r\n headDateEnd | date: 'MMM d, y' }}</span>\r\n </h3>\r\n <div class=\"card-toolbar\">\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-center position-relative my-1\">\r\n <span class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\r\n fill=\"none\">\r\n <rect opacity=\"0.5\" x=\"17.0365\" y=\"15.1223\" width=\"8.15546\" height=\"2\" rx=\"1\"\r\n transform=\"rotate(45 17.0365 15.1223)\" fill=\"currentColor\"></rect>\r\n <path\r\n d=\"M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z\"\r\n fill=\"currentColor\"></path>\r\n </svg>\r\n </span>\r\n <input (change)=\"searchData()\" [(ngModel)]=\"searchValue\" type=\"text\" class=\"form-control ps-14 me-2\" autocomplete=\"off\" placeholder=\"Search\" />\r\n\r\n \r\n \r\n <button *ngIf=\"!noData && !loading\" type=\"button\" (click)=\"exportXLSX()\"\r\n class=\"btn btn-default mx-2 btn-outline btn-outline-default rounded-3 text-nowrap border-val\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path\r\n d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg><span class=\"ms-2\">Export</span> </button>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"loading\" class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"noData\" class=\"row\">\r\n <div class=\"col-lg-12 mb-3\">\r\n <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-nodata-table\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodata-title\">No data found</div>\r\n <div class=\"nodata-sub\">There is no result for this eye test table</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"!noData && !loading\" class=\"card-body\">\r\n <div class=\"table-responsive\">\r\n <table class=\"w-100 table bottom-border text-nowrap\">\r\n <thead>\r\n <tr>\r\n <th class=\"text-start\">\r\n <span class=\"cursor-pointer\" (click)=\"onSort('date')\"> Date <svg \r\n [ngClass]=\"sortedColumn === 'date' && sortOrder === 1 ? 'rotate' : ''\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortedColumn === 'date' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span>\r\n </th>\r\n <th><span class=\"cursor-pointer\" (click)=\"onSort('storeName')\">Store Name <svg \r\n [ngClass]=\"sortedColumn === 'storeName' && sortOrder === 1 ? 'rotate' : ''\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortedColumn === 'storeName' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span></th>\r\n <th><span class=\"cursor-pointer\" (click)=\"onSort('storeId')\">Store ID <svg \r\n [ngClass]=\"sortedColumn === 'storeId' && sortOrder === 1 ? 'rotate' : ''\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortedColumn === 'storeId' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span></th>\r\n <th *ngIf=\"this.typeValue ==='remote'\" class=\"text-start\">Engagement ID</th>\r\n <th *ngIf=\"this.typeValue !=='remote'\" class=\"text-start\">Optom ID</th>\r\n <th *ngIf=\"this.typeValue !=='remote'\" class=\"text-start\">Queue ID</th>\r\n <th class=\"text-start\">Compliance Score</th>\r\n <th><span class=\"cursor-pointer\" (click)=\"onSort('coveredStepsAI')\">Steps Covered By AI <svg \r\n [ngClass]=\"sortedColumn === 'coveredStepsAI' && sortOrder === 1 ? 'rotate' : ''\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortedColumn === 'coveredStepsAI' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span> </th>\r\n \r\n <th><span class=\"cursor-pointer\" (click)=\"onSort('trustScore')\">Trust Score <svg \r\n [ngClass]=\"sortedColumn === 'trustScore' && sortOrder === 1 ? 'rotate' : ''\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortedColumn === 'trustScore' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span> </th>\r\n\r\n <th *ngIf=\"this.typeValue !=='remote'\"><span class=\"cursor-pointer\" (click)=\"onSort('visitorsType')\">Visitor Type <svg \r\n [ngClass]=\"sortedColumn === 'visitorsType' && sortOrder === 1 ? 'rotate' : ''\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortedColumn === 'visitorsType' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span> </th>\r\n <th class=\"text-start\">Test Duration</th>\r\n <th><span class=\"cursor-pointer\" (click)=\"onSort('auditStatus')\">Audit Status <svg \r\n [ngClass]=\"sortedColumn === 'auditStatus' && sortOrder === 1 ? 'rotate' : ''\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortedColumn === 'auditStatus' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span></th>\r\n <th class=\"text-start\">Audited By</th>\r\n <th class=\"text-start\">Action</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let obj of eyeTestData; let i=index;\">\r\n <td>{{obj?._source?.date}}</td>\r\n <td>{{obj?._source?.storeName}}</td>\r\n <td>{{obj?._source?.storeId}}</td>\r\n <td *ngIf=\"this.typeValue ==='remote'\" class=\"engage-text\">{{obj?._source?.engagementId}}</td>\r\n <td *ngIf=\"this.typeValue !=='remote'\">{{obj?._source?.optumId ? obj?._source?.optumId :''}}</td>\r\n <td *ngIf=\"this.typeValue !=='remote'\" class=\"engage-text\">{{obj?._source?.queueId ? obj?._source?.queueId:''}}</td>\r\n <td>{{obj?._source?.complianceScore ? obj?._source?.complianceScore :'--'}}<span *ngIf=\"obj?._source?.complianceScore\">%</span></td>\r\n <td>{{obj?._source?.coveredStepsAI ? obj?._source?.coveredStepsAI:'--'}}</td>\r\n <td>{{obj?._source?.trustScore ? obj?._source?.trustScore:'--'}}</td>\r\n <td *ngIf=\"this.typeValue !=='remote'\">{{obj?._source?.visitorsType ? obj?._source?.visitorsType:'--'}}</td>\r\n <td>{{obj?._source?.min ? obj?._source?.min :'0'}} mins {{obj?._source?.sec ? obj?._source?.sec:'0'}} secs</td>\r\n <td><span class=\"badge badge-light-primary\" *ngIf=\"obj?._source?.auditStatus ==='Yet-to-Audit'\">{{obj?._source?.auditStatus}}</span>\r\n <span class=\"badge badge-light-warning\" *ngIf=\"obj?._source?.auditStatus ==='Re-Audited'\">{{obj?._source?.auditStatus}}</span>\r\n <span class=\"badge badge-light-success\" *ngIf=\"obj?._source?.auditStatus ==='Audited'\">{{obj?._source?.auditStatus}}</span>\r\n <span class=\"badge badge-light-info\" *ngIf=\"obj?._source?.auditStatus ==='In-Progress'\">{{obj?._source?.auditStatus}}</span></td>\r\n <td>{{obj?._source?.auditedBy?obj?._source?.auditedBy:\"-\"}}</td>\r\n <td class=\"cursor-pointer\" (click)=\"eyeTestView(obj)\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"16\" viewBox=\"0 0 20 16\" fill=\"none\">\r\n <path d=\"M0.833496 8.00016C0.833496 8.00016 4.16683 1.3335 10.0002 1.3335C15.8335 1.3335 19.1668 8.00016 19.1668 8.00016C19.1668 8.00016 15.8335 14.6668 10.0002 14.6668C4.16683 14.6668 0.833496 8.00016 0.833496 8.00016Z\" stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n <path d=\"M10.0002 10.5002C11.3809 10.5002 12.5002 9.38087 12.5002 8.00016C12.5002 6.61945 11.3809 5.50016 10.0002 5.50016C8.61945 5.50016 7.50016 6.61945 7.50016 8.00016C7.50016 9.38087 8.61945 10.5002 10.0002 10.5002Z\" stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg></td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n\r\n</div>\r\n</div>\r\n<div class=\"card-footer\" *ngIf=\"!noData && !loading\">\r\n <lib-pagination [itemsPerPage]=\"pageSize\" [currentPage]=\"offset\" [totalItems]=\"totalItems\"\r\n [paginationSizes]=\"paginationSizes\" [pageSize]=\"pageSize\" (pageChange)=\"onPageChange($event)\"\r\n (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n</div>\r\n</div>", styles: [":host::ng-deep .md-drppicker .btn{line-height:10px!important}:host::ng-deep .md-drppicker.shown.drops-down-right{transform-origin:0 0;width:560px!important}:host::ng-deep .daterangepicker-input+.ngx-daterangepicker-material .applyBtn{display:none}:host::ng-deep .md-drppicker.drops-down-right.ltr.show-ranges.shown{top:65px!important}:host::ng-deep .md-drppicker.drops-down-right.ltr.double.show-ranges.shown{top:65px!important;right:-475px!important;left:unset!important;height:400px!important}:host::ng-deep .md-drppicker .btn{border-radius:8px!important;border:1px solid var(--Primary-600, #00A3FF)!important;background:var(--Primary-600, #00A3FF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--White, #FFF)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}:host::ng-deep .md-drppicker .ranges ul li button{padding:12px 16px;width:160px;color:var(--Gray-700, #344054);font-size:14px;font-weight:400;line-height:20px;background:none;border:none;text-align:left;cursor:pointer}:host::ng-deep .md-drppicker td.active,:host::ng-deep .md-drppicker td.active:hover{background-color:#029cf4!important;border-radius:20px!important;color:var(--White, #FFF)!important;text-align:center!important;font-size:14px!important;font-weight:500!important;line-height:20px}:host::ng-deep .md-drppicker.ltr .ranges{float:left;margin-top:10px!important}:host::ng-deep .md-drppicker td.in-range{background:var(--Primary-50, #EAF8FF)}:host::ng-deep .md-drppicker .ranges ul li button.active{background:var(--Primary-50, #EAF8FF)!important;border-radius:8px!important;color:var(--Primary-700, #009BF3);font-size:14px!important;font-weight:500!important;line-height:20px!important}:host::ng-deep table th,:host::ng-deep table td{width:40px!important;height:40px!important;padding:10px 8px!important}:host::ng-deep .md-drppicker td.available.prev,:host::ng-deep .md-drppicker th.available.prev{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep .md-drppicker td.available.next,:host::ng-deep .md-drppicker th.available.next{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep table th{border-bottom:0px solid var(--Gray-200, #EAECF0)!important;background:transparent!important;color:var(--Gray-700, #344054)!important;text-align:center;font-size:16px!important;font-weight:500!important;line-height:24px}:host::ng-deep .md-drppicker .btn.btn-default{border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize;margin-right:10px!important}:host::ng-deep .md-drppicker td.available.invalid-date{text-decoration:line-through;pointer-events:none;color:#a9a9a9}:host::ng-deep .md-drppicker td.available.today:not(.invalid-date){text-decoration:unset;pointer-events:unset;color:unset}.select-wrapper{position:relative;display:inline-block;width:100%}.placeholder-overlay{position:absolute;color:var(--Gray-500, #667085);font-family:Inter;font-size:16px!important;font-style:normal;font-weight:400;top:10px;left:15px;pointer-events:none;font-size:1.1rem;z-index:1}table th,table td{height:44px!important;padding:12px 24px!important;gap:12px;align-self:stretch}table th{border-bottom:1px solid var(--Gray-200, #EAECF0)!important;background:var(--Gray-50, #F9FAFB)!important;color:var(--Gray-500, #667085)!important;font-size:12px!important;font-weight:500!important;line-height:18px}table td{color:var(--Gray-900, #667085);font-size:14px!important;font-weight:500!important;line-height:20px}.bottom-border td{border-bottom:1px solid var(--Gray-200, #EAECF0)!important}.rotate{rotate:180deg;transition:1s}.engage-text{color:var(--Primary-700, #009BF3)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-decoration-line:underline;text-decoration-style:solid;text-decoration-skip-ink:none;text-decoration-thickness:auto;text-underline-offset:auto;text-underline-position:from-font;text-transform:capitalize}.dashed{border-radius:4px;border:1px dashed var(--Error-500, #F04438)!important;background:var(--Error-25, #FFFBFA)}.dashed-desc{color:var(--Error-600, #D92D20)!important;font-size:16px;font-weight:400;line-height:24px}\n"] }]
|
|
1093
1087
|
}], ctorParameters: () => [{ type: i2.PageInfoService }, { type: i1$1.FormBuilder }, { type: TraxService }, { type: EyeTestAuditService }, { type: i1$2.Router }, { type: i0.ChangeDetectorRef }, { type: i2.GlobalStateService }, { type: i3.ToastService }, { type: i1$2.ActivatedRoute }] });
|
|
1094
1088
|
|
|
1095
1089
|
class EyeTestAuditComponent {
|
|
@@ -1530,4 +1524,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
1530
1524
|
}] });
|
|
1531
1525
|
|
|
1532
1526
|
export { EyeTestAuditModule };
|
|
1533
|
-
//# sourceMappingURL=tango-app-ui-analyse-trax-eye-test-audit.module-
|
|
1527
|
+
//# sourceMappingURL=tango-app-ui-analyse-trax-eye-test-audit.module-cw94cqNa.mjs.map
|