tango-app-ui-shared 3.3.1-beta.70 → 3.3.1-beta.72
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/modules/layout/layout.module.mjs +12 -3
- package/esm2022/lib/modules/layout/toolbar/single-store/single-store.component.mjs +6 -3
- package/esm2022/lib/modules/layout/toolbar/single-storedate/single-storedate.component.mjs +156 -0
- package/esm2022/lib/modules/layout/toolbar/storesingle/storesingle.component.mjs +105 -0
- package/esm2022/lib/modules/layout/toolbar/toolbar.component.mjs +45 -24
- package/esm2022/lib/modules/layout/toolbar/trax-withoutdate/trax-withoutdate.component.mjs +717 -0
- package/esm2022/lib/modules/notification/notification/notification.component.mjs +3 -3
- package/fesm2022/{tango-app-ui-shared-notification.module-CMmM6CAt.mjs → tango-app-ui-shared-notification.module-C5ZmCf8U.mjs} +3 -3
- package/fesm2022/{tango-app-ui-shared-notification.module-CMmM6CAt.mjs.map → tango-app-ui-shared-notification.module-C5ZmCf8U.mjs.map} +1 -1
- package/fesm2022/tango-app-ui-shared.mjs +1014 -32
- package/fesm2022/tango-app-ui-shared.mjs.map +1 -1
- package/lib/modules/layout/layout.module.d.ts +13 -10
- package/lib/modules/layout/toolbar/single-storedate/single-storedate.component.d.ts +30 -0
- package/lib/modules/layout/toolbar/storesingle/storesingle.component.d.ts +24 -0
- package/lib/modules/layout/toolbar/toolbar.component.d.ts +3 -1
- package/lib/modules/layout/toolbar/trax-withoutdate/trax-withoutdate.component.d.ts +74 -0
- package/package.json +1 -1
|
@@ -3120,6 +3120,9 @@ class SingleStoreComponent {
|
|
|
3120
3120
|
else {
|
|
3121
3121
|
this.selectedClient = this.storeList[0];
|
|
3122
3122
|
this.selectedFilters.store = this.selectedClient.storeId;
|
|
3123
|
+
this.selectedFilters.client = headerFilters.client;
|
|
3124
|
+
this.selectedFilters.clientName = headerFilters.clientName;
|
|
3125
|
+
this.selectedFilters.clients = headerFilters.clients;
|
|
3123
3126
|
this.selectedDateRange = {
|
|
3124
3127
|
startDate: this.dayjs().format("DD-MM-YYYY"),
|
|
3125
3128
|
endDate: this.dayjs().format("DD-MM-YYYY"),
|
|
@@ -3202,11 +3205,11 @@ class SingleStoreComponent {
|
|
|
3202
3205
|
}
|
|
3203
3206
|
}
|
|
3204
3207
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SingleStoreComponent, deps: [{ token: AuthService }, { token: i1.GlobalStateService }, { token: i0.ChangeDetectorRef }, { token: i2.Router }], target: i0.ɵɵFactoryTarget.Component });
|
|
3205
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SingleStoreComponent, selector: "lib-single-store", inputs: { urlString: "urlString" }, usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"(urlString.includes('image') || urlString.includes('stream') || urlString.includes('playback')) && queryString.includes('storeId')\" class=\"wrapper mx-2\" >\r\n <lib-select [items]=\"storeList\" [multi]=\"false\" [searchField]=\"'storeName'\" [disabled]=\"false\" [idField]=\"'storeId'\"\r\n (selected)=\"onClientSelect($event)\" [selectedValues]=\"[selectedClient]\"></lib-select> \r\n</div>\r\n<div *ngIf=\"URL[2] !=='controlcenter'\" 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=\"20\" height=\"20\" viewBox=\"0 0 20 20\" 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\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <input class=\"fx-date-range form-control ps-14\" style=\"min-width: 260px !important;\" type=\"text\" matInput ngxDaterangepickerMd [drops]=\"'down'\"\r\n [opens]=\"'right'\" [ranges]=\"ranges\" [showCustomRangeLabel]=\"true\" [alwaysShowCalendars]=\"false\" [autoApply]=\"true\"\r\n [keepCalendarOpeningWithRange]=\"true\" [showCancel]=\"true\" autocomplete=\"off\" [(ngModel)]=\"selectedDateRange\" (startDateChanged)=\"onStartDateChange($event)\" [isCustomDate]=\"isCustomDate\"\r\n [locale]=\"{ format: 'DD-MM-YYYY', firstDay: 1, monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] }\"\r\n (datesUpdated)=\"datechange($event)\" name=\"daterange\" [readonly]=\"true\" />\r\n</div>\r\n<div *ngIf=\"URL[2] ==='controlcenter' && urlString.includes('playback')\" class=\"d-flex align-items-center w-150px 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=\"20\" height=\"20\" viewBox=\"0 0 20 20\" 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\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <input class=\"fx-date-range form-control ps-14\" type=\"text\" matInput ngxDaterangepickerMd [drops]=\"'down'\"\r\n [opens]=\"'right'\" [showCustomRangeLabel]=\"false\" [alwaysShowCalendars]=\"false\" [autoApply]=\"true\" [singleDatePicker]=\"true\"\r\n [keepCalendarOpeningWithRange]=\"true\" [showCancel]=\"true\" autocomplete=\"off\" [(ngModel)]=\"selectedDateRange\" (startDateChanged)=\"onStartDateChange($event)\" [isCustomDate]=\"isCustomDate\"\r\n [locale]=\"{ format: 'DD-MM-YYYY', firstDay: 1}\"\r\n (datesUpdated)=\"datechange($event)\" name=\"daterange\" [readonly]=\"true\" />\r\n</div>\r\n\r\n<div *ngIf=\"URL[2] !=='controlcenter'\">\r\n <div class=\"btn btn-primary ms-2\" (click)=\"Apply()\">Apply</div>\r\n</div>\r\n<div *ngIf=\"URL[2] ==='controlcenter'\">\r\n <div *ngIf=\"((urlString.includes('image') || urlString.includes('stream') || urlString.includes('playback')) && queryString.includes('storeId')) || urlString.includes('playback')\" class=\"btn btn-primary ms-2\" (click)=\"Apply()\">Apply</div>\r\n</div>\r\n\r\n", styles: [".daterangepicker{display:block!important;top:153.85px!important;left:900px!important;right:0}.form-control{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600;line-height:20px;text-transform:capitalize}::ng-deep .applyBtn{display:none!important}:host::ng-deep .md-drppicker .btn{line-height:10px!important}:host::ng-deep .daterangepicker-input+.ngx-daterangepicker-material .applyBtn{display:none}:host::ng-deep .md-drppicker.drops-down-right.ltr.double.show-ranges.shown{top:65px!important;left:-470px!important;height:365px!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}.wrapper{min-width:200px}.btn-primary{line-height:18px!important}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CustomSelectComponent, selector: "lib-select", inputs: ["items", "searchField", "multi", "idField", "selectedValues", "disabled", "label"], outputs: ["selected"] }, { kind: "directive", type: i6.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: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i7.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"] }] });
|
|
3208
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SingleStoreComponent, selector: "lib-single-store", inputs: { urlString: "urlString" }, usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"(urlString.includes('image') || urlString.includes('stream') || urlString.includes('playback')) && queryString.includes('storeId')\" class=\"wrapper mx-2\" >\r\n <lib-select [items]=\"storeList\" [multi]=\"false\" [searchField]=\"'storeName'\" [disabled]=\"false\" [idField]=\"'storeId'\"\r\n (selected)=\"onClientSelect($event)\" [selectedValues]=\"[selectedClient]\"></lib-select> \r\n</div>\r\n<div *ngIf=\"URL[2] !=='controlcenter'\" class=\"wrapper mx-2\" >\r\n <lib-select [items]=\"storeList\" [multi]=\"false\" [searchField]=\"'storeName'\" [disabled]=\"false\" [idField]=\"'storeId'\"\r\n (selected)=\"onClientSelect($event)\" [selectedValues]=\"[selectedClient]\"></lib-select> \r\n</div>\r\n\r\n<div *ngIf=\"URL[2] !=='controlcenter'\" 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=\"20\" height=\"20\" viewBox=\"0 0 20 20\" 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\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <input class=\"fx-date-range form-control ps-14\" style=\"min-width: 260px !important;\" type=\"text\" matInput ngxDaterangepickerMd [drops]=\"'down'\"\r\n [opens]=\"'right'\" [ranges]=\"ranges\" [showCustomRangeLabel]=\"true\" [alwaysShowCalendars]=\"false\" [autoApply]=\"true\"\r\n [keepCalendarOpeningWithRange]=\"true\" [showCancel]=\"true\" autocomplete=\"off\" [(ngModel)]=\"selectedDateRange\" (startDateChanged)=\"onStartDateChange($event)\" [isCustomDate]=\"isCustomDate\"\r\n [locale]=\"{ format: 'DD-MM-YYYY', firstDay: 1, monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] }\"\r\n (datesUpdated)=\"datechange($event)\" name=\"daterange\" [readonly]=\"true\" />\r\n</div>\r\n<div *ngIf=\"URL[2] ==='controlcenter' && urlString.includes('playback')\" class=\"d-flex align-items-center w-150px 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=\"20\" height=\"20\" viewBox=\"0 0 20 20\" 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\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <input class=\"fx-date-range form-control ps-14\" type=\"text\" matInput ngxDaterangepickerMd [drops]=\"'down'\"\r\n [opens]=\"'right'\" [showCustomRangeLabel]=\"false\" [alwaysShowCalendars]=\"false\" [autoApply]=\"true\" [singleDatePicker]=\"true\"\r\n [keepCalendarOpeningWithRange]=\"true\" [showCancel]=\"true\" autocomplete=\"off\" [(ngModel)]=\"selectedDateRange\" (startDateChanged)=\"onStartDateChange($event)\" [isCustomDate]=\"isCustomDate\"\r\n [locale]=\"{ format: 'DD-MM-YYYY', firstDay: 1}\"\r\n (datesUpdated)=\"datechange($event)\" name=\"daterange\" [readonly]=\"true\" />\r\n</div>\r\n\r\n<div *ngIf=\"URL[2] !=='controlcenter'\">\r\n <div class=\"btn btn-primary ms-2\" (click)=\"Apply()\">Apply</div>\r\n</div>\r\n<div *ngIf=\"URL[2] ==='controlcenter'\">\r\n <div *ngIf=\"((urlString.includes('image') || urlString.includes('stream') || urlString.includes('playback')) && queryString.includes('storeId')) || urlString.includes('playback')\" class=\"btn btn-primary ms-2\" (click)=\"Apply()\">Apply</div>\r\n</div>\r\n\r\n", styles: [".daterangepicker{display:block!important;top:153.85px!important;left:900px!important;right:0}.form-control{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600;line-height:20px;text-transform:capitalize}::ng-deep .applyBtn{display:none!important}:host::ng-deep .md-drppicker .btn{line-height:10px!important}:host::ng-deep .daterangepicker-input+.ngx-daterangepicker-material .applyBtn{display:none}:host::ng-deep .md-drppicker.drops-down-right.ltr.double.show-ranges.shown{top:65px!important;left:-470px!important;height:365px!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}.wrapper{min-width:200px}.btn-primary{line-height:18px!important}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CustomSelectComponent, selector: "lib-select", inputs: ["items", "searchField", "multi", "idField", "selectedValues", "disabled", "label"], outputs: ["selected"] }, { kind: "directive", type: i6.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: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i7.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"] }] });
|
|
3206
3209
|
}
|
|
3207
3210
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SingleStoreComponent, decorators: [{
|
|
3208
3211
|
type: Component,
|
|
3209
|
-
args: [{ selector: 'lib-single-store', template: "<div *ngIf=\"(urlString.includes('image') || urlString.includes('stream') || urlString.includes('playback')) && queryString.includes('storeId')\" class=\"wrapper mx-2\" >\r\n <lib-select [items]=\"storeList\" [multi]=\"false\" [searchField]=\"'storeName'\" [disabled]=\"false\" [idField]=\"'storeId'\"\r\n (selected)=\"onClientSelect($event)\" [selectedValues]=\"[selectedClient]\"></lib-select> \r\n</div>\r\n<div *ngIf=\"URL[2] !=='controlcenter'\" 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=\"20\" height=\"20\" viewBox=\"0 0 20 20\" 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\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <input class=\"fx-date-range form-control ps-14\" style=\"min-width: 260px !important;\" type=\"text\" matInput ngxDaterangepickerMd [drops]=\"'down'\"\r\n [opens]=\"'right'\" [ranges]=\"ranges\" [showCustomRangeLabel]=\"true\" [alwaysShowCalendars]=\"false\" [autoApply]=\"true\"\r\n [keepCalendarOpeningWithRange]=\"true\" [showCancel]=\"true\" autocomplete=\"off\" [(ngModel)]=\"selectedDateRange\" (startDateChanged)=\"onStartDateChange($event)\" [isCustomDate]=\"isCustomDate\"\r\n [locale]=\"{ format: 'DD-MM-YYYY', firstDay: 1, monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] }\"\r\n (datesUpdated)=\"datechange($event)\" name=\"daterange\" [readonly]=\"true\" />\r\n</div>\r\n<div *ngIf=\"URL[2] ==='controlcenter' && urlString.includes('playback')\" class=\"d-flex align-items-center w-150px 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=\"20\" height=\"20\" viewBox=\"0 0 20 20\" 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\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <input class=\"fx-date-range form-control ps-14\" type=\"text\" matInput ngxDaterangepickerMd [drops]=\"'down'\"\r\n [opens]=\"'right'\" [showCustomRangeLabel]=\"false\" [alwaysShowCalendars]=\"false\" [autoApply]=\"true\" [singleDatePicker]=\"true\"\r\n [keepCalendarOpeningWithRange]=\"true\" [showCancel]=\"true\" autocomplete=\"off\" [(ngModel)]=\"selectedDateRange\" (startDateChanged)=\"onStartDateChange($event)\" [isCustomDate]=\"isCustomDate\"\r\n [locale]=\"{ format: 'DD-MM-YYYY', firstDay: 1}\"\r\n (datesUpdated)=\"datechange($event)\" name=\"daterange\" [readonly]=\"true\" />\r\n</div>\r\n\r\n<div *ngIf=\"URL[2] !=='controlcenter'\">\r\n <div class=\"btn btn-primary ms-2\" (click)=\"Apply()\">Apply</div>\r\n</div>\r\n<div *ngIf=\"URL[2] ==='controlcenter'\">\r\n <div *ngIf=\"((urlString.includes('image') || urlString.includes('stream') || urlString.includes('playback')) && queryString.includes('storeId')) || urlString.includes('playback')\" class=\"btn btn-primary ms-2\" (click)=\"Apply()\">Apply</div>\r\n</div>\r\n\r\n", styles: [".daterangepicker{display:block!important;top:153.85px!important;left:900px!important;right:0}.form-control{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600;line-height:20px;text-transform:capitalize}::ng-deep .applyBtn{display:none!important}:host::ng-deep .md-drppicker .btn{line-height:10px!important}:host::ng-deep .daterangepicker-input+.ngx-daterangepicker-material .applyBtn{display:none}:host::ng-deep .md-drppicker.drops-down-right.ltr.double.show-ranges.shown{top:65px!important;left:-470px!important;height:365px!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}.wrapper{min-width:200px}.btn-primary{line-height:18px!important}\n"] }]
|
|
3212
|
+
args: [{ selector: 'lib-single-store', template: "<div *ngIf=\"(urlString.includes('image') || urlString.includes('stream') || urlString.includes('playback')) && queryString.includes('storeId')\" class=\"wrapper mx-2\" >\r\n <lib-select [items]=\"storeList\" [multi]=\"false\" [searchField]=\"'storeName'\" [disabled]=\"false\" [idField]=\"'storeId'\"\r\n (selected)=\"onClientSelect($event)\" [selectedValues]=\"[selectedClient]\"></lib-select> \r\n</div>\r\n<div *ngIf=\"URL[2] !=='controlcenter'\" class=\"wrapper mx-2\" >\r\n <lib-select [items]=\"storeList\" [multi]=\"false\" [searchField]=\"'storeName'\" [disabled]=\"false\" [idField]=\"'storeId'\"\r\n (selected)=\"onClientSelect($event)\" [selectedValues]=\"[selectedClient]\"></lib-select> \r\n</div>\r\n\r\n<div *ngIf=\"URL[2] !=='controlcenter'\" 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=\"20\" height=\"20\" viewBox=\"0 0 20 20\" 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\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <input class=\"fx-date-range form-control ps-14\" style=\"min-width: 260px !important;\" type=\"text\" matInput ngxDaterangepickerMd [drops]=\"'down'\"\r\n [opens]=\"'right'\" [ranges]=\"ranges\" [showCustomRangeLabel]=\"true\" [alwaysShowCalendars]=\"false\" [autoApply]=\"true\"\r\n [keepCalendarOpeningWithRange]=\"true\" [showCancel]=\"true\" autocomplete=\"off\" [(ngModel)]=\"selectedDateRange\" (startDateChanged)=\"onStartDateChange($event)\" [isCustomDate]=\"isCustomDate\"\r\n [locale]=\"{ format: 'DD-MM-YYYY', firstDay: 1, monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] }\"\r\n (datesUpdated)=\"datechange($event)\" name=\"daterange\" [readonly]=\"true\" />\r\n</div>\r\n<div *ngIf=\"URL[2] ==='controlcenter' && urlString.includes('playback')\" class=\"d-flex align-items-center w-150px 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=\"20\" height=\"20\" viewBox=\"0 0 20 20\" 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\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <input class=\"fx-date-range form-control ps-14\" type=\"text\" matInput ngxDaterangepickerMd [drops]=\"'down'\"\r\n [opens]=\"'right'\" [showCustomRangeLabel]=\"false\" [alwaysShowCalendars]=\"false\" [autoApply]=\"true\" [singleDatePicker]=\"true\"\r\n [keepCalendarOpeningWithRange]=\"true\" [showCancel]=\"true\" autocomplete=\"off\" [(ngModel)]=\"selectedDateRange\" (startDateChanged)=\"onStartDateChange($event)\" [isCustomDate]=\"isCustomDate\"\r\n [locale]=\"{ format: 'DD-MM-YYYY', firstDay: 1}\"\r\n (datesUpdated)=\"datechange($event)\" name=\"daterange\" [readonly]=\"true\" />\r\n</div>\r\n\r\n<div *ngIf=\"URL[2] !=='controlcenter'\">\r\n <div class=\"btn btn-primary ms-2\" (click)=\"Apply()\">Apply</div>\r\n</div>\r\n<div *ngIf=\"URL[2] ==='controlcenter'\">\r\n <div *ngIf=\"((urlString.includes('image') || urlString.includes('stream') || urlString.includes('playback')) && queryString.includes('storeId')) || urlString.includes('playback')\" class=\"btn btn-primary ms-2\" (click)=\"Apply()\">Apply</div>\r\n</div>\r\n\r\n", styles: [".daterangepicker{display:block!important;top:153.85px!important;left:900px!important;right:0}.form-control{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600;line-height:20px;text-transform:capitalize}::ng-deep .applyBtn{display:none!important}:host::ng-deep .md-drppicker .btn{line-height:10px!important}:host::ng-deep .daterangepicker-input+.ngx-daterangepicker-material .applyBtn{display:none}:host::ng-deep .md-drppicker.drops-down-right.ltr.double.show-ranges.shown{top:65px!important;left:-470px!important;height:365px!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}.wrapper{min-width:200px}.btn-primary{line-height:18px!important}\n"] }]
|
|
3210
3213
|
}], ctorParameters: () => [{ type: AuthService }, { type: i1.GlobalStateService }, { type: i0.ChangeDetectorRef }, { type: i2.Router }], propDecorators: { urlString: [{
|
|
3211
3214
|
type: Input
|
|
3212
3215
|
}] } });
|
|
@@ -4778,12 +4781,719 @@ class TraxHeaderComponent {
|
|
|
4778
4781
|
this.closeDropdown1();
|
|
4779
4782
|
}
|
|
4780
4783
|
}
|
|
4781
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TraxHeaderComponent, deps: [{ token: AuthService }, { token: i2.Router }, { token: i1.GlobalStateService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
4782
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TraxHeaderComponent, selector: "lib-trax-header", host: { listeners: { "document:click": "clickOutside($event)" } }, ngImport: i0, template: "<div class=\"me-3\">\r\n <label *ngIf=\"selectedLocationsLabel()\" class=\"badge badge-light-default mx-2\">{{selectedLocationsLabel()}} \r\n <span class=\"cursor-pointer\" (click)=\"removeLocation()\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path d=\"M9 3L3 9M3 3L9 9\" stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg></span>\r\n </label>\r\n <label *ngIf=\"selectedGroupsLabel()\" class=\"badge badge-light-default mx-2\">{{selectedGroupsLabel()}} \r\n <span class=\"cursor-pointer\" (click)=\"removeGroup()\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path d=\"M9 3L3 9M3 3L9 9\" stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg></span>\r\n </label>\r\n <label class=\"badge badge-light-default\">{{selectedStoresLabel()}}</label>\r\n</div>\r\n\r\n\r\n<div class=\"wrapper me-3\" *ngIf=\"(gs.userAccess | async)?.userType === 'tango'\">\r\n<lib-select [items]=\"clientList\" [multi]=\"false\" [searchField]=\"'clientName'\" [disabled]=\"false\" [idField]=\"'clientId'\"\r\n(selected)=\"onClientSelect($event)\" [selectedValues]=\"[selectedClient]\"></lib-select>\r\n</div>\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=\"20\" height=\"20\" viewBox=\"0 0 20 20\" 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\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <input class=\"fx-date-range form-control ps-14\" style=\"min-width: 260px !important;\" type=\"text\" matInput\r\n ngxDaterangepickerMd [drops]=\"'down'\" [opens]=\"'right'\" [ranges]=\"ranges\" [showCustomRangeLabel]=\"true\" [autoApply]=\"true\"\r\n [alwaysShowCalendars]=\"false\" [keepCalendarOpeningWithRange]=\"true\" [showCancel]=\"true\" autocomplete=\"off\"\r\n [(ngModel)]=\"selectedDateRange\" (startDateChanged)=\"onStartDateChange($event)\" [isCustomDate]=\"isCustomDate\" (click)=\"resetValidation()\" \r\n [locale]=\"{ format: 'DD-MM-YYYY', firstDay: 1, monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] }\"\r\n (datesUpdated)=\"datechange($event)\" name=\"daterange\" [readonly]=\"true\" />\r\n</div>\r\n<div class=\"position-relative\">\r\n <button type=\"button\" (click)=\"opendropdown($event)\" class=\"btn btn-default mx-2 rounded-3 text-nowrap border-val\">\r\n <!-- <span class=\"me-2\">Filter</span> -->\r\n <svg class=\"pl-3\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path d=\"M5 10H15M2.5 5H17.5M7.5 15H12.5\" stroke=\"#344054\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </button>\r\n\r\n <div *ngIf=\"Opendropdown\" class=\"card p-5 dropdown1 position-absolute z-1 end-0\" style=\"z-index: 1 !important;\" (clickOutside)=\"closeDropdown1()\">\r\n <div class=\"dropdown-title d-flex justify-content-between mb-2\">Filter Options\r\n <button class=\"btn btn-outline w-25 ms-3 btn-resize\" (click)=\"Reset()\"> Reset </button>\r\n <button class=\"btn btn-primary w-25 btn-resize\" (click)=\"Apply()\">Apply</button>\r\n </div>\r\n\r\n <!-- Location Dropdown -->\r\n<div class=\"dropdown-container\" (clickOutside)=\"closeDropdown()\">\r\n <div class=\"dropdown-header\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control dropdown-input cursor-pointer\" \r\n [value]=\"selectedLocationsLabel()\"\r\n (focus)=\"toggleDropdown('location')\" \r\n readonly\r\n placeholder=\"Select locations...\"\r\n />\r\n </div>\r\n <div class=\"dropdown-menu custom-dropdown-menu\" *ngIf=\"dropdownOpen === 'location'\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control mb-2 dropdown-search\" \r\n placeholder=\"Search locations...\" \r\n [(ngModel)]=\"searchLocationText\" \r\n (ngModelChange)=\"filterLocations()\" \r\n />\r\n <div class=\"form-check mb-2 dropdown-item custom-dropdown-item\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n id=\"selectAllLocations\" \r\n [checked]=\"isAllLocationsSelected()\" \r\n (change)=\"toggleSelectAllLocations($event)\" \r\n />\r\n <label class=\"form-check-label\" for=\"selectAllLocations\">\r\n Select All Locations\r\n </label>\r\n </div>\r\n <div \r\n class=\"dropdown-item form-check custom-dropdown-item\" \r\n *ngFor=\"let location of filteredLocations\"\r\n >\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n [id]=\"location.city\" \r\n [(ngModel)]=\"location.checked\"\r\n (change)=\"updateSelectedLocations()\" \r\n />\r\n <label class=\"form-check-label\" [for]=\"location.city\">\r\n {{ location.city }}\r\n </label>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<!-- Group Dropdown -->\r\n<div class=\"dropdown-container mt-3\" (clickOutside)=\"closeDropdown()\">\r\n <div class=\"dropdown-header\" (click)=\"toggleDropdown('group')\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control dropdown-input cursor-pointer\" \r\n [value]=\"selectedGroupsLabel()\" readonly\r\n placeholder=\"Select clusters..\"\r\n />\r\n </div>\r\n <div class=\"dropdown-menu custom-dropdown-menu\" *ngIf=\"dropdownOpen === 'group'\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control mb-2 dropdown-search\" \r\n placeholder=\"Search clusters...\" \r\n [(ngModel)]=\"searchGroupText\" \r\n (ngModelChange)=\"filterGroups()\" \r\n />\r\n <div class=\"form-check mb-2 dropdown-item custom-dropdown-item\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n id=\"selectAllGroups\" \r\n [checked]=\"isAllGroupsSelected()\" \r\n (change)=\"toggleSelectAllGroups($event)\" \r\n />\r\n <label class=\"form-check-label\" for=\"selectAllGroups\">\r\n Select All\r\n </label>\r\n </div>\r\n <div \r\n class=\"dropdown-item form-check custom-dropdown-item\" \r\n *ngFor=\"let group of filteredGroups\"\r\n >\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n [id]=\"group.groupName\"\r\n [(ngModel)]=\"group.checked\"\r\n (change)=\"updateSelectedGroups()\" \r\n />\r\n <label class=\"form-check-label\" [for]=\"group.groupName\">\r\n {{ group.groupName }}\r\n </label>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n\r\n<!-- Store Dropdown -->\r\n<div class=\"dropdown-container mt-3\" (clickOutside)=\"closeDropdown()\">\r\n <div class=\"dropdown-header\" (click)=\"toggleDropdown('store')\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control dropdown-input cursor-pointer\"\r\n [value]=\"selectedStoresLabel()\"\r\n readonly\r\n placeholder=\"Select stores...\"\r\n />\r\n </div>\r\n <div class=\"dropdown-menu custom-dropdown-menu\" *ngIf=\"dropdownOpen === 'store'\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control mb-2 dropdown-search \" \r\n placeholder=\"Search stores...\" \r\n [(ngModel)]=\"searchStoreText\" \r\n (ngModelChange)=\"filterStores()\" \r\n />\r\n <div class=\"form-check mb-2 dropdown-item custom-dropdown-item\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n id=\"selectAllStores\" \r\n [checked]=\"isAllStoresSelected()\" \r\n (change)=\"toggleSelectAllStores($event)\" \r\n />\r\n <label class=\"form-check-label\" for=\"selectAllStores\">\r\n Select All\r\n </label>\r\n </div>\r\n <div \r\n class=\"dropdown-item form-check custom-dropdown-item\" \r\n *ngFor=\"let store of filteredStores\"\r\n >\r\n <input \r\n class=\"form-check-input\" \r\n type=\"checkbox\" \r\n [id]=\"store.storeId\"\r\n [(ngModel)]=\"store.checked\"\r\n (change)=\"updateSelectedStores()\" \r\n />\r\n <label class=\"form-check-label\" [for]=\"store.storeId\">\r\n {{ store.storeName }}\r\n </label>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n </div>\r\n</div>", styles: [".daterangepicker{display:block!important;top:153.85px!important;left:900px!important;right:0}.form-control{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600;line-height:20px;text-transform:capitalize}::ng-deep .applyBtn{display:none!important}:host::ng-deep .md-drppicker .btn{line-height:10px!important}:host::ng-deep .daterangepicker-input+.ngx-daterangepicker-material .applyBtn{display:none}:host::ng-deep .md-drppicker.drops-down-right.ltr.double.show-ranges.shown{top:65px!important;left:-470px!important;height:365px!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}.wrapper{min-width:200px}.btn-primary{line-height:18px!important}.filter-label{color:var(--Gray-500, #667085)!important;font-size:14px;font-style:normal;font-weight:600;line-height:20px;text-transform:capitalize}.position-relative{position:relative}.filter-icon{cursor:pointer}.dropdown-container{position:relative;display:inline-block;width:100%}.dropdown-header{cursor:pointer;width:100%}.form-control{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600;line-height:20px;text-transform:capitalize;width:100%;box-sizing:border-box}.dropdown-menu{position:absolute;top:100%;left:0;right:0;border:1px solid #ccc;background-color:#fff;z-index:1000;max-height:230px;overflow-y:auto;display:block;box-sizing:border-box;padding:10px 5px}.dropdown-item{padding:6px 0}.dropdown-item:hover{background-color:#f1f1f1}.dropdown-item input[type=checkbox]{margin-right:10px}.custom-dropdown-menu{border-radius:4px;box-shadow:0 1px 2px #1018280d}.custom-dropdown-item{display:flex;align-items:center}.custom-dropdown-item input{margin-left:10px}.btn-resize{font-size:13px!important;height:29px!important;line-height:11px!important;padding:3px!important}.dropdown1{position:absolute;top:70px;min-width:270px!important}.dropdown1 .dropdown-title{color:var(--Gray-900, #101828);font-size:14px;font-weight:600;line-height:24px}.dropdown1 .dropdown{position:relative;display:inline-block}.dropdown1 .dropdown span{color:var(--Gray-700, #344054);font-size:14px;font-weight:600;line-height:20px}::ng-deep .dropdown1{z-index:1!important}.form-check-label{color:var(--Gray-700, #344054)!important;font-size:14px;font-style:normal;font-weight:500;line-height:20px}input[type=checkbox]{width:16px!important;height:16px!important;margin:0 5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-300, #D0D5DD);box-shadow:none;font-size:.8em;text-align:center;line-height:1em;background:#fff}input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00A3FF);background-color:var(--primary-50, #EAF8FF)}input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00A3FF;border-right:2px solid #00A3FF;display:inline-block;width:.2em;padding-left:0;padding-top:9px;padding-right:4px}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CustomSelectComponent, selector: "lib-select", inputs: ["items", "searchField", "multi", "idField", "selectedValues", "disabled", "label"], outputs: ["selected"] }, { kind: "directive", type: i6.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: i6.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i7.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: "pipe", type: i4.AsyncPipe, name: "async" }] });
|
|
4784
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TraxHeaderComponent, deps: [{ token: AuthService }, { token: i2.Router }, { token: i1.GlobalStateService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
4785
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TraxHeaderComponent, selector: "lib-trax-header", host: { listeners: { "document:click": "clickOutside($event)" } }, ngImport: i0, template: "<div class=\"me-3\">\r\n <label *ngIf=\"selectedLocationsLabel()\" class=\"badge badge-light-default mx-2\">{{selectedLocationsLabel()}} \r\n <span class=\"cursor-pointer\" (click)=\"removeLocation()\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path d=\"M9 3L3 9M3 3L9 9\" stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg></span>\r\n </label>\r\n <label *ngIf=\"selectedGroupsLabel()\" class=\"badge badge-light-default mx-2\">{{selectedGroupsLabel()}} \r\n <span class=\"cursor-pointer\" (click)=\"removeGroup()\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path d=\"M9 3L3 9M3 3L9 9\" stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg></span>\r\n </label>\r\n <label class=\"badge badge-light-default\">{{selectedStoresLabel()}}</label>\r\n</div>\r\n\r\n\r\n<div class=\"wrapper me-3\" *ngIf=\"(gs.userAccess | async)?.userType === 'tango'\">\r\n<lib-select [items]=\"clientList\" [multi]=\"false\" [searchField]=\"'clientName'\" [disabled]=\"false\" [idField]=\"'clientId'\"\r\n(selected)=\"onClientSelect($event)\" [selectedValues]=\"[selectedClient]\"></lib-select>\r\n</div>\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=\"20\" height=\"20\" viewBox=\"0 0 20 20\" 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\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <input class=\"fx-date-range form-control ps-14\" style=\"min-width: 260px !important;\" type=\"text\" matInput\r\n ngxDaterangepickerMd [drops]=\"'down'\" [opens]=\"'right'\" [ranges]=\"ranges\" [showCustomRangeLabel]=\"true\" [autoApply]=\"true\"\r\n [alwaysShowCalendars]=\"false\" [keepCalendarOpeningWithRange]=\"true\" [showCancel]=\"true\" autocomplete=\"off\"\r\n [(ngModel)]=\"selectedDateRange\" (startDateChanged)=\"onStartDateChange($event)\" [isCustomDate]=\"isCustomDate\" (click)=\"resetValidation()\" \r\n [locale]=\"{ format: 'DD-MM-YYYY', firstDay: 1, monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] }\"\r\n (datesUpdated)=\"datechange($event)\" name=\"daterange\" [readonly]=\"true\" />\r\n</div>\r\n<div class=\"position-relative\">\r\n <button type=\"button\" (click)=\"opendropdown($event)\" class=\"btn btn-default mx-2 rounded-3 text-nowrap border-val\">\r\n <!-- <span class=\"me-2\">Filter</span> -->\r\n <svg class=\"pl-3\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path d=\"M5 10H15M2.5 5H17.5M7.5 15H12.5\" stroke=\"#344054\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </button>\r\n\r\n <div *ngIf=\"Opendropdown\" class=\"card p-5 dropdown1 position-absolute z-1 end-0\" style=\"z-index: 1 !important;\" (clickOutside)=\"closeDropdown1()\">\r\n <div class=\"dropdown-title d-flex justify-content-between mb-2\">Filter Options\r\n <button class=\"btn btn-outline w-25 ms-3 btn-resize\" (click)=\"Reset()\"> Reset </button>\r\n <button class=\"btn btn-primary w-25 btn-resize\" (click)=\"Apply()\">Apply</button>\r\n </div>\r\n\r\n <!-- Location Dropdown -->\r\n<div class=\"dropdown-container\" (clickOutside)=\"closeDropdown()\">\r\n <div class=\"dropdown-header\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control dropdown-input cursor-pointer\" \r\n [value]=\"selectedLocationsLabel()\"\r\n (focus)=\"toggleDropdown('location')\" \r\n readonly\r\n placeholder=\"Select locations...\"\r\n />\r\n </div>\r\n <div class=\"dropdown-menu custom-dropdown-menu\" *ngIf=\"dropdownOpen === 'location'\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control mb-2 dropdown-search\" \r\n placeholder=\"Search locations...\" \r\n [(ngModel)]=\"searchLocationText\" \r\n (ngModelChange)=\"filterLocations()\" \r\n />\r\n <div class=\"form-check mb-2 dropdown-item custom-dropdown-item\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n id=\"selectAllLocations\" \r\n [checked]=\"isAllLocationsSelected()\" \r\n (change)=\"toggleSelectAllLocations($event)\" \r\n />\r\n <label class=\"form-check-label\" for=\"selectAllLocations\">\r\n Select All Locations\r\n </label>\r\n </div>\r\n <div \r\n class=\"dropdown-item form-check custom-dropdown-item\" \r\n *ngFor=\"let location of filteredLocations\"\r\n >\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n [id]=\"location.city\" \r\n [(ngModel)]=\"location.checked\"\r\n (change)=\"updateSelectedLocations()\" \r\n />\r\n <label class=\"form-check-label\" [for]=\"location.city\">\r\n {{ location.city }}\r\n </label>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<!-- Group Dropdown -->\r\n<div class=\"dropdown-container mt-3\" (clickOutside)=\"closeDropdown()\">\r\n <div class=\"dropdown-header\" (click)=\"toggleDropdown('group')\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control dropdown-input cursor-pointer\" \r\n [value]=\"selectedGroupsLabel()\" readonly\r\n placeholder=\"Select clusters..\"\r\n />\r\n </div>\r\n <div class=\"dropdown-menu custom-dropdown-menu\" *ngIf=\"dropdownOpen === 'group'\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control mb-2 dropdown-search\" \r\n placeholder=\"Search clusters...\" \r\n [(ngModel)]=\"searchGroupText\" \r\n (ngModelChange)=\"filterGroups()\" \r\n />\r\n <div class=\"form-check mb-2 dropdown-item custom-dropdown-item\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n id=\"selectAllGroups\" \r\n [checked]=\"isAllGroupsSelected()\" \r\n (change)=\"toggleSelectAllGroups($event)\" \r\n />\r\n <label class=\"form-check-label\" for=\"selectAllGroups\">\r\n Select All\r\n </label>\r\n </div>\r\n <div \r\n class=\"dropdown-item form-check custom-dropdown-item\" \r\n *ngFor=\"let group of filteredGroups\"\r\n >\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n [id]=\"group.groupName\"\r\n [(ngModel)]=\"group.checked\"\r\n (change)=\"updateSelectedGroups()\" \r\n />\r\n <label class=\"form-check-label\" [for]=\"group.groupName\">\r\n {{ group.groupName }}\r\n </label>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n\r\n<!-- Store Dropdown -->\r\n<div class=\"dropdown-container mt-3\" (clickOutside)=\"closeDropdown()\">\r\n <div class=\"dropdown-header\" (click)=\"toggleDropdown('store')\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control dropdown-input cursor-pointer\"\r\n [value]=\"selectedStoresLabel()\"\r\n readonly\r\n placeholder=\"Select stores...\"\r\n />\r\n </div>\r\n <div class=\"dropdown-menu custom-dropdown-menu\" *ngIf=\"dropdownOpen === 'store'\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control mb-2 dropdown-search \" \r\n placeholder=\"Search stores...\" \r\n [(ngModel)]=\"searchStoreText\" \r\n (ngModelChange)=\"filterStores()\" \r\n />\r\n <div class=\"form-check mb-2 dropdown-item custom-dropdown-item\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n id=\"selectAllStores\" \r\n [checked]=\"isAllStoresSelected()\" \r\n (change)=\"toggleSelectAllStores($event)\" \r\n />\r\n <label class=\"form-check-label\" for=\"selectAllStores\">\r\n Select All\r\n </label>\r\n </div>\r\n <div \r\n class=\"dropdown-item form-check custom-dropdown-item\" \r\n *ngFor=\"let store of filteredStores\"\r\n >\r\n <input \r\n class=\"form-check-input\" \r\n type=\"checkbox\" \r\n [id]=\"store.storeId\"\r\n [(ngModel)]=\"store.checked\"\r\n (change)=\"updateSelectedStores()\" \r\n />\r\n <label class=\"form-check-label\" [for]=\"store.storeId\">\r\n {{ store.storeName }}\r\n </label>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n </div>\r\n</div>", styles: [".daterangepicker{display:block!important;top:153.85px!important;left:900px!important;right:0}.form-control{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600;line-height:20px;text-transform:capitalize}::ng-deep .applyBtn{display:none!important}:host::ng-deep .md-drppicker .btn{line-height:10px!important}:host::ng-deep .daterangepicker-input+.ngx-daterangepicker-material .applyBtn{display:none}:host::ng-deep .md-drppicker.drops-down-right.ltr.double.show-ranges.shown{top:65px!important;left:-470px!important;height:365px!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}.wrapper{min-width:200px}.btn-primary{line-height:18px!important}.filter-label{color:var(--Gray-500, #667085)!important;font-size:14px;font-style:normal;font-weight:600;line-height:20px;text-transform:capitalize}.position-relative{position:relative}.filter-icon{cursor:pointer}.dropdown-container{position:relative;display:inline-block;width:100%}.dropdown-header{cursor:pointer;width:100%}.form-control{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600;line-height:20px;text-transform:capitalize;width:100%;box-sizing:border-box}.dropdown-menu{position:absolute;top:100%;left:0;right:0;border:1px solid #ccc;background-color:#fff;z-index:1000;max-height:230px;overflow-y:auto;display:block;box-sizing:border-box;padding:10px 5px}.dropdown-item{padding:6px 0}.dropdown-item:hover{background-color:#f1f1f1}.dropdown-item input[type=checkbox]{margin-right:10px}.custom-dropdown-menu{border-radius:4px;box-shadow:0 1px 2px #1018280d}.custom-dropdown-item{display:flex;align-items:center}.custom-dropdown-item input{margin-left:10px}.btn-resize{font-size:13px!important;height:29px!important;line-height:11px!important;padding:3px!important}.dropdown1{position:absolute;top:70px;min-width:270px!important}.dropdown1 .dropdown-title{color:var(--Gray-900, #101828);font-size:14px;font-weight:600;line-height:24px}.dropdown1 .dropdown{position:relative;display:inline-block}.dropdown1 .dropdown span{color:var(--Gray-700, #344054);font-size:14px;font-weight:600;line-height:20px}::ng-deep .dropdown1{z-index:1!important}.form-check-label{color:var(--Gray-700, #344054)!important;font-size:14px;font-style:normal;font-weight:500;line-height:20px}input[type=checkbox]{width:16px!important;height:16px!important;margin:0 5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-300, #D0D5DD);box-shadow:none;font-size:.8em;text-align:center;line-height:1em;background:#fff}input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00A3FF);background-color:var(--primary-50, #EAF8FF)}input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00A3FF;border-right:2px solid #00A3FF;display:inline-block;width:.2em;padding-left:0;padding-top:9px;padding-right:4px}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CustomSelectComponent, selector: "lib-select", inputs: ["items", "searchField", "multi", "idField", "selectedValues", "disabled", "label"], outputs: ["selected"] }, { kind: "directive", type: i6.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: i6.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i7.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: "pipe", type: i4.AsyncPipe, name: "async" }] });
|
|
4786
|
+
}
|
|
4787
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TraxHeaderComponent, decorators: [{
|
|
4788
|
+
type: Component,
|
|
4789
|
+
args: [{ selector: 'lib-trax-header', template: "<div class=\"me-3\">\r\n <label *ngIf=\"selectedLocationsLabel()\" class=\"badge badge-light-default mx-2\">{{selectedLocationsLabel()}} \r\n <span class=\"cursor-pointer\" (click)=\"removeLocation()\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path d=\"M9 3L3 9M3 3L9 9\" stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg></span>\r\n </label>\r\n <label *ngIf=\"selectedGroupsLabel()\" class=\"badge badge-light-default mx-2\">{{selectedGroupsLabel()}} \r\n <span class=\"cursor-pointer\" (click)=\"removeGroup()\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path d=\"M9 3L3 9M3 3L9 9\" stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg></span>\r\n </label>\r\n <label class=\"badge badge-light-default\">{{selectedStoresLabel()}}</label>\r\n</div>\r\n\r\n\r\n<div class=\"wrapper me-3\" *ngIf=\"(gs.userAccess | async)?.userType === 'tango'\">\r\n<lib-select [items]=\"clientList\" [multi]=\"false\" [searchField]=\"'clientName'\" [disabled]=\"false\" [idField]=\"'clientId'\"\r\n(selected)=\"onClientSelect($event)\" [selectedValues]=\"[selectedClient]\"></lib-select>\r\n</div>\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=\"20\" height=\"20\" viewBox=\"0 0 20 20\" 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\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <input class=\"fx-date-range form-control ps-14\" style=\"min-width: 260px !important;\" type=\"text\" matInput\r\n ngxDaterangepickerMd [drops]=\"'down'\" [opens]=\"'right'\" [ranges]=\"ranges\" [showCustomRangeLabel]=\"true\" [autoApply]=\"true\"\r\n [alwaysShowCalendars]=\"false\" [keepCalendarOpeningWithRange]=\"true\" [showCancel]=\"true\" autocomplete=\"off\"\r\n [(ngModel)]=\"selectedDateRange\" (startDateChanged)=\"onStartDateChange($event)\" [isCustomDate]=\"isCustomDate\" (click)=\"resetValidation()\" \r\n [locale]=\"{ format: 'DD-MM-YYYY', firstDay: 1, monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] }\"\r\n (datesUpdated)=\"datechange($event)\" name=\"daterange\" [readonly]=\"true\" />\r\n</div>\r\n<div class=\"position-relative\">\r\n <button type=\"button\" (click)=\"opendropdown($event)\" class=\"btn btn-default mx-2 rounded-3 text-nowrap border-val\">\r\n <!-- <span class=\"me-2\">Filter</span> -->\r\n <svg class=\"pl-3\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path d=\"M5 10H15M2.5 5H17.5M7.5 15H12.5\" stroke=\"#344054\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </button>\r\n\r\n <div *ngIf=\"Opendropdown\" class=\"card p-5 dropdown1 position-absolute z-1 end-0\" style=\"z-index: 1 !important;\" (clickOutside)=\"closeDropdown1()\">\r\n <div class=\"dropdown-title d-flex justify-content-between mb-2\">Filter Options\r\n <button class=\"btn btn-outline w-25 ms-3 btn-resize\" (click)=\"Reset()\"> Reset </button>\r\n <button class=\"btn btn-primary w-25 btn-resize\" (click)=\"Apply()\">Apply</button>\r\n </div>\r\n\r\n <!-- Location Dropdown -->\r\n<div class=\"dropdown-container\" (clickOutside)=\"closeDropdown()\">\r\n <div class=\"dropdown-header\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control dropdown-input cursor-pointer\" \r\n [value]=\"selectedLocationsLabel()\"\r\n (focus)=\"toggleDropdown('location')\" \r\n readonly\r\n placeholder=\"Select locations...\"\r\n />\r\n </div>\r\n <div class=\"dropdown-menu custom-dropdown-menu\" *ngIf=\"dropdownOpen === 'location'\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control mb-2 dropdown-search\" \r\n placeholder=\"Search locations...\" \r\n [(ngModel)]=\"searchLocationText\" \r\n (ngModelChange)=\"filterLocations()\" \r\n />\r\n <div class=\"form-check mb-2 dropdown-item custom-dropdown-item\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n id=\"selectAllLocations\" \r\n [checked]=\"isAllLocationsSelected()\" \r\n (change)=\"toggleSelectAllLocations($event)\" \r\n />\r\n <label class=\"form-check-label\" for=\"selectAllLocations\">\r\n Select All Locations\r\n </label>\r\n </div>\r\n <div \r\n class=\"dropdown-item form-check custom-dropdown-item\" \r\n *ngFor=\"let location of filteredLocations\"\r\n >\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n [id]=\"location.city\" \r\n [(ngModel)]=\"location.checked\"\r\n (change)=\"updateSelectedLocations()\" \r\n />\r\n <label class=\"form-check-label\" [for]=\"location.city\">\r\n {{ location.city }}\r\n </label>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<!-- Group Dropdown -->\r\n<div class=\"dropdown-container mt-3\" (clickOutside)=\"closeDropdown()\">\r\n <div class=\"dropdown-header\" (click)=\"toggleDropdown('group')\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control dropdown-input cursor-pointer\" \r\n [value]=\"selectedGroupsLabel()\" readonly\r\n placeholder=\"Select clusters..\"\r\n />\r\n </div>\r\n <div class=\"dropdown-menu custom-dropdown-menu\" *ngIf=\"dropdownOpen === 'group'\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control mb-2 dropdown-search\" \r\n placeholder=\"Search clusters...\" \r\n [(ngModel)]=\"searchGroupText\" \r\n (ngModelChange)=\"filterGroups()\" \r\n />\r\n <div class=\"form-check mb-2 dropdown-item custom-dropdown-item\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n id=\"selectAllGroups\" \r\n [checked]=\"isAllGroupsSelected()\" \r\n (change)=\"toggleSelectAllGroups($event)\" \r\n />\r\n <label class=\"form-check-label\" for=\"selectAllGroups\">\r\n Select All\r\n </label>\r\n </div>\r\n <div \r\n class=\"dropdown-item form-check custom-dropdown-item\" \r\n *ngFor=\"let group of filteredGroups\"\r\n >\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n [id]=\"group.groupName\"\r\n [(ngModel)]=\"group.checked\"\r\n (change)=\"updateSelectedGroups()\" \r\n />\r\n <label class=\"form-check-label\" [for]=\"group.groupName\">\r\n {{ group.groupName }}\r\n </label>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n\r\n<!-- Store Dropdown -->\r\n<div class=\"dropdown-container mt-3\" (clickOutside)=\"closeDropdown()\">\r\n <div class=\"dropdown-header\" (click)=\"toggleDropdown('store')\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control dropdown-input cursor-pointer\"\r\n [value]=\"selectedStoresLabel()\"\r\n readonly\r\n placeholder=\"Select stores...\"\r\n />\r\n </div>\r\n <div class=\"dropdown-menu custom-dropdown-menu\" *ngIf=\"dropdownOpen === 'store'\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control mb-2 dropdown-search \" \r\n placeholder=\"Search stores...\" \r\n [(ngModel)]=\"searchStoreText\" \r\n (ngModelChange)=\"filterStores()\" \r\n />\r\n <div class=\"form-check mb-2 dropdown-item custom-dropdown-item\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n id=\"selectAllStores\" \r\n [checked]=\"isAllStoresSelected()\" \r\n (change)=\"toggleSelectAllStores($event)\" \r\n />\r\n <label class=\"form-check-label\" for=\"selectAllStores\">\r\n Select All\r\n </label>\r\n </div>\r\n <div \r\n class=\"dropdown-item form-check custom-dropdown-item\" \r\n *ngFor=\"let store of filteredStores\"\r\n >\r\n <input \r\n class=\"form-check-input\" \r\n type=\"checkbox\" \r\n [id]=\"store.storeId\"\r\n [(ngModel)]=\"store.checked\"\r\n (change)=\"updateSelectedStores()\" \r\n />\r\n <label class=\"form-check-label\" [for]=\"store.storeId\">\r\n {{ store.storeName }}\r\n </label>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n </div>\r\n</div>", styles: [".daterangepicker{display:block!important;top:153.85px!important;left:900px!important;right:0}.form-control{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600;line-height:20px;text-transform:capitalize}::ng-deep .applyBtn{display:none!important}:host::ng-deep .md-drppicker .btn{line-height:10px!important}:host::ng-deep .daterangepicker-input+.ngx-daterangepicker-material .applyBtn{display:none}:host::ng-deep .md-drppicker.drops-down-right.ltr.double.show-ranges.shown{top:65px!important;left:-470px!important;height:365px!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}.wrapper{min-width:200px}.btn-primary{line-height:18px!important}.filter-label{color:var(--Gray-500, #667085)!important;font-size:14px;font-style:normal;font-weight:600;line-height:20px;text-transform:capitalize}.position-relative{position:relative}.filter-icon{cursor:pointer}.dropdown-container{position:relative;display:inline-block;width:100%}.dropdown-header{cursor:pointer;width:100%}.form-control{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600;line-height:20px;text-transform:capitalize;width:100%;box-sizing:border-box}.dropdown-menu{position:absolute;top:100%;left:0;right:0;border:1px solid #ccc;background-color:#fff;z-index:1000;max-height:230px;overflow-y:auto;display:block;box-sizing:border-box;padding:10px 5px}.dropdown-item{padding:6px 0}.dropdown-item:hover{background-color:#f1f1f1}.dropdown-item input[type=checkbox]{margin-right:10px}.custom-dropdown-menu{border-radius:4px;box-shadow:0 1px 2px #1018280d}.custom-dropdown-item{display:flex;align-items:center}.custom-dropdown-item input{margin-left:10px}.btn-resize{font-size:13px!important;height:29px!important;line-height:11px!important;padding:3px!important}.dropdown1{position:absolute;top:70px;min-width:270px!important}.dropdown1 .dropdown-title{color:var(--Gray-900, #101828);font-size:14px;font-weight:600;line-height:24px}.dropdown1 .dropdown{position:relative;display:inline-block}.dropdown1 .dropdown span{color:var(--Gray-700, #344054);font-size:14px;font-weight:600;line-height:20px}::ng-deep .dropdown1{z-index:1!important}.form-check-label{color:var(--Gray-700, #344054)!important;font-size:14px;font-style:normal;font-weight:500;line-height:20px}input[type=checkbox]{width:16px!important;height:16px!important;margin:0 5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-300, #D0D5DD);box-shadow:none;font-size:.8em;text-align:center;line-height:1em;background:#fff}input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00A3FF);background-color:var(--primary-50, #EAF8FF)}input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00A3FF;border-right:2px solid #00A3FF;display:inline-block;width:.2em;padding-left:0;padding-top:9px;padding-right:4px}\n"] }]
|
|
4790
|
+
}], ctorParameters: () => [{ type: AuthService }, { type: i2.Router }, { type: i1.GlobalStateService }, { type: i0.ChangeDetectorRef }], propDecorators: { onClick: [{
|
|
4791
|
+
type: HostListener,
|
|
4792
|
+
args: ['document:click', ['$event']]
|
|
4793
|
+
}], clickOutside: [{
|
|
4794
|
+
type: HostListener,
|
|
4795
|
+
args: ["document:click", ["$event"]]
|
|
4796
|
+
}] } });
|
|
4797
|
+
|
|
4798
|
+
class TraxWithoutdateComponent {
|
|
4799
|
+
auth;
|
|
4800
|
+
router;
|
|
4801
|
+
gs;
|
|
4802
|
+
cd;
|
|
4803
|
+
dayjs = dayjs;
|
|
4804
|
+
isCustomDate = (m) => {
|
|
4805
|
+
const isValidDate = m > this.dayjs();
|
|
4806
|
+
return isValidDate ? "invalid-date" : false;
|
|
4807
|
+
};
|
|
4808
|
+
selectedDateRange = { startDate: dayjs().subtract(30, 'days'),
|
|
4809
|
+
endDate: dayjs().subtract(1, "days"), };
|
|
4810
|
+
selectedFilters = {
|
|
4811
|
+
client: null,
|
|
4812
|
+
clientName: null,
|
|
4813
|
+
clients: [],
|
|
4814
|
+
store: null,
|
|
4815
|
+
stores: [],
|
|
4816
|
+
date: null,
|
|
4817
|
+
group: [],
|
|
4818
|
+
location: [],
|
|
4819
|
+
};
|
|
4820
|
+
Opendropdown = false;
|
|
4821
|
+
dropdownOpen = null; // 'location' or 'group'
|
|
4822
|
+
searchLocationText = "";
|
|
4823
|
+
searchGroupText = "";
|
|
4824
|
+
locations = [];
|
|
4825
|
+
filteredLocations = [];
|
|
4826
|
+
groupsData = [];
|
|
4827
|
+
filteredGroups = [];
|
|
4828
|
+
filteredStores = [];
|
|
4829
|
+
stores = [];
|
|
4830
|
+
searchStoreText = '';
|
|
4831
|
+
clientList = [];
|
|
4832
|
+
selectedClient;
|
|
4833
|
+
locationLabel = [];
|
|
4834
|
+
groupLabel = [];
|
|
4835
|
+
users;
|
|
4836
|
+
url;
|
|
4837
|
+
constructor(auth, router, gs, cd) {
|
|
4838
|
+
this.auth = auth;
|
|
4839
|
+
this.router = router;
|
|
4840
|
+
this.gs = gs;
|
|
4841
|
+
this.cd = cd;
|
|
4842
|
+
}
|
|
4843
|
+
onClick(event) {
|
|
4844
|
+
const target = event.target;
|
|
4845
|
+
if (!target.closest('.dropdown1')) {
|
|
4846
|
+
this.Opendropdown = false;
|
|
4847
|
+
}
|
|
4848
|
+
}
|
|
4849
|
+
closeDropdown1() {
|
|
4850
|
+
this.Opendropdown = false;
|
|
4851
|
+
}
|
|
4852
|
+
ngOnInit() {
|
|
4853
|
+
this.url = this.router.url.split("?")[0].split('/');
|
|
4854
|
+
const user = JSON.parse(localStorage.getItem('user-info'));
|
|
4855
|
+
this.users = user;
|
|
4856
|
+
this.gs?.manageRefreshTrigger?.subscribe((e) => {
|
|
4857
|
+
if (e) {
|
|
4858
|
+
if (user.userType === 'tango') {
|
|
4859
|
+
this.getClient();
|
|
4860
|
+
}
|
|
4861
|
+
else {
|
|
4862
|
+
const storedFilters = localStorage.getItem("header-filters");
|
|
4863
|
+
if (storedFilters) {
|
|
4864
|
+
const headerFilters = JSON.parse(storedFilters);
|
|
4865
|
+
this.filteredStores = headerFilters?.stores.map((store) => ({
|
|
4866
|
+
...store,
|
|
4867
|
+
checked: store.checked
|
|
4868
|
+
}));
|
|
4869
|
+
}
|
|
4870
|
+
}
|
|
4871
|
+
}
|
|
4872
|
+
});
|
|
4873
|
+
if (user.userType === 'tango') {
|
|
4874
|
+
this.getClient();
|
|
4875
|
+
}
|
|
4876
|
+
else {
|
|
4877
|
+
this.getLocations();
|
|
4878
|
+
this.getGroups();
|
|
4879
|
+
this.getStore();
|
|
4880
|
+
}
|
|
4881
|
+
const storedFilters = localStorage.getItem("header-filters");
|
|
4882
|
+
if (storedFilters) {
|
|
4883
|
+
const headerFilters = JSON.parse(storedFilters);
|
|
4884
|
+
// Initialize selectedFilters with defaults or existing values
|
|
4885
|
+
this.selectedFilters = {
|
|
4886
|
+
client: headerFilters.client || this.users.client,
|
|
4887
|
+
clientName: headerFilters.clientName || '',
|
|
4888
|
+
clients: headerFilters.clients || [],
|
|
4889
|
+
store: headerFilters.store || null,
|
|
4890
|
+
date: headerFilters.date || {},
|
|
4891
|
+
stores: headerFilters.stores || [],
|
|
4892
|
+
group: headerFilters.group || [],
|
|
4893
|
+
location: headerFilters.location || []
|
|
4894
|
+
};
|
|
4895
|
+
// Sync filtered data with stored selections
|
|
4896
|
+
this.filteredLocations = this.syncWithLocalStorage(headerFilters.location);
|
|
4897
|
+
this.filteredGroups = this.syncWithLocalStorage(headerFilters.group);
|
|
4898
|
+
this.filteredStores = this.syncWithLocalStorage(headerFilters.stores);
|
|
4899
|
+
// Format date range if it exists
|
|
4900
|
+
// Emit data via service and update localStorage
|
|
4901
|
+
this.emitAndStoreFilters();
|
|
4902
|
+
}
|
|
4903
|
+
else {
|
|
4904
|
+
// Initialize empty states if no header filters are present in localStorage
|
|
4905
|
+
this.resetFilters();
|
|
4906
|
+
}
|
|
4907
|
+
}
|
|
4908
|
+
syncWithLocalStorage(items) {
|
|
4909
|
+
return items
|
|
4910
|
+
? items.map((item) => ({
|
|
4911
|
+
...item,
|
|
4912
|
+
checked: item.checked === true
|
|
4913
|
+
}))
|
|
4914
|
+
: [];
|
|
4915
|
+
}
|
|
4916
|
+
emitAndStoreFilters() {
|
|
4917
|
+
this.gs.dataRangeValue.next(this.selectedFilters);
|
|
4918
|
+
localStorage.setItem("header-filters", JSON.stringify(this.selectedFilters));
|
|
4919
|
+
}
|
|
4920
|
+
resetFilters() {
|
|
4921
|
+
this.selectedFilters = {
|
|
4922
|
+
client: null,
|
|
4923
|
+
clientName: '',
|
|
4924
|
+
clients: [],
|
|
4925
|
+
store: null,
|
|
4926
|
+
date: {},
|
|
4927
|
+
stores: [],
|
|
4928
|
+
group: [],
|
|
4929
|
+
location: []
|
|
4930
|
+
};
|
|
4931
|
+
this.filteredLocations = [];
|
|
4932
|
+
this.filteredGroups = [];
|
|
4933
|
+
this.filteredStores = [];
|
|
4934
|
+
}
|
|
4935
|
+
getClient() {
|
|
4936
|
+
this.auth.getClients().subscribe({
|
|
4937
|
+
next: (e) => {
|
|
4938
|
+
if (e) {
|
|
4939
|
+
this.clientList = e.data.result;
|
|
4940
|
+
const headerFilters = JSON.parse(localStorage.getItem("header-filters") || "{}");
|
|
4941
|
+
if (headerFilters.client) {
|
|
4942
|
+
this.clientList.find((obj) => {
|
|
4943
|
+
if (obj.clientId === headerFilters.client) {
|
|
4944
|
+
this.selectedClient = obj;
|
|
4945
|
+
}
|
|
4946
|
+
});
|
|
4947
|
+
this.selectedFilters.client = headerFilters.client;
|
|
4948
|
+
this.selectedFilters.clientName = headerFilters.clientName;
|
|
4949
|
+
this.selectedFilters.clients = headerFilters.clients;
|
|
4950
|
+
this.selectedFilters.store = headerFilters.store;
|
|
4951
|
+
this.selectedFilters.date = headerFilters.date;
|
|
4952
|
+
this.selectedFilters.stores = headerFilters.stores;
|
|
4953
|
+
this.selectedFilters.group = headerFilters.group;
|
|
4954
|
+
this.selectedFilters.location = headerFilters.location;
|
|
4955
|
+
this.gs.dataRangeValue.next(this.selectedFilters);
|
|
4956
|
+
// Ensure locations and groups are loaded before fetching stores
|
|
4957
|
+
this.getLocations();
|
|
4958
|
+
this.getGroups();
|
|
4959
|
+
// Fetch stores only after locations and groups are set
|
|
4960
|
+
this.getStore();
|
|
4961
|
+
}
|
|
4962
|
+
else {
|
|
4963
|
+
this.selectedClient = this.clientList[0];
|
|
4964
|
+
this.selectedFilters.client = this.selectedClient.clientId;
|
|
4965
|
+
this.selectedFilters.clientName = this.selectedClient.clientName;
|
|
4966
|
+
this.selectedFilters.clients = headerFilters.clients;
|
|
4967
|
+
this.selectedFilters.store = headerFilters.store;
|
|
4968
|
+
this.selectedFilters.date = headerFilters.date;
|
|
4969
|
+
this.selectedFilters.stores = headerFilters.stores;
|
|
4970
|
+
this.selectedFilters.group = headerFilters.group;
|
|
4971
|
+
this.selectedFilters.location = headerFilters.location;
|
|
4972
|
+
localStorage.setItem("header-filters", JSON.stringify(this.selectedFilters));
|
|
4973
|
+
this.gs.dataRangeValue.next(this.selectedFilters);
|
|
4974
|
+
this.cd.detectChanges();
|
|
4975
|
+
// Ensure locations and groups are loaded before fetching stores
|
|
4976
|
+
this.getLocations();
|
|
4977
|
+
this.getGroups();
|
|
4978
|
+
// Fetch stores only after locations and groups are set
|
|
4979
|
+
this.getStore();
|
|
4980
|
+
}
|
|
4981
|
+
}
|
|
4982
|
+
else {
|
|
4983
|
+
this.selectedClient = this.clientList[0];
|
|
4984
|
+
this.selectedFilters.client = this.selectedClient.clientId;
|
|
4985
|
+
this.selectedFilters.clientName = this.selectedClient.clientName;
|
|
4986
|
+
// Ensure locations and groups are loaded before fetching stores
|
|
4987
|
+
this.getLocations();
|
|
4988
|
+
this.getGroups();
|
|
4989
|
+
// Fetch stores only after locations and groups are set
|
|
4990
|
+
this.getStore();
|
|
4991
|
+
localStorage.setItem("header-filters", JSON.stringify(this.selectedFilters));
|
|
4992
|
+
this.gs.dataRangeValue.next(this.selectedFilters);
|
|
4993
|
+
// console.log("4")
|
|
4994
|
+
this.cd.detectChanges();
|
|
4995
|
+
}
|
|
4996
|
+
},
|
|
4997
|
+
});
|
|
4998
|
+
}
|
|
4999
|
+
onClientSelect(event) {
|
|
5000
|
+
// Update the selected client
|
|
5001
|
+
this.selectedClient = event;
|
|
5002
|
+
// Clear previous filtered data and selections
|
|
5003
|
+
this.filteredGroups = [];
|
|
5004
|
+
this.filteredStores = [];
|
|
5005
|
+
this.filteredLocations = [];
|
|
5006
|
+
this.selectedFilters.stores = [];
|
|
5007
|
+
this.selectedFilters.group = [];
|
|
5008
|
+
this.selectedFilters.location = [];
|
|
5009
|
+
// Fetch header filters from localStorage
|
|
5010
|
+
const headerFilters = JSON.parse(localStorage.getItem("header-filters") || "{}");
|
|
5011
|
+
// Update the selected filters with the new client
|
|
5012
|
+
this.selectedFilters.client = this.selectedClient.clientId;
|
|
5013
|
+
this.selectedFilters.clientName = this.selectedClient.clientName;
|
|
5014
|
+
// Remove old store, group, and location data from the header filters
|
|
5015
|
+
delete headerFilters.stores;
|
|
5016
|
+
delete headerFilters.groups;
|
|
5017
|
+
delete headerFilters.location;
|
|
5018
|
+
// Fetch new data based on the new client
|
|
5019
|
+
this.getLocations();
|
|
5020
|
+
this.getStore();
|
|
5021
|
+
this.getGroups();
|
|
5022
|
+
// Update localStorage with the new client selection and empty filter data
|
|
5023
|
+
localStorage.setItem('header-filters', JSON.stringify(this.selectedFilters));
|
|
5024
|
+
window.location.reload();
|
|
5025
|
+
this.cd.detectChanges();
|
|
5026
|
+
}
|
|
5027
|
+
opendropdown(e) {
|
|
5028
|
+
e.stopPropagation();
|
|
5029
|
+
this.Opendropdown = !this.Opendropdown;
|
|
5030
|
+
}
|
|
5031
|
+
getLocations() {
|
|
5032
|
+
// const headerFilters: any = JSON.parse(localStorage.getItem("header-filters") || "{}");
|
|
5033
|
+
let obj = {
|
|
5034
|
+
clientId: this.selectedFilters.client ? this.selectedFilters.client : this.users.clientId,
|
|
5035
|
+
city: [],
|
|
5036
|
+
group: [],
|
|
5037
|
+
};
|
|
5038
|
+
this.auth.getLocation(obj).subscribe({
|
|
5039
|
+
next: (res) => {
|
|
5040
|
+
let cityList = this.selectedFilters?.location?.filter((location) => location.checked).map((loc) => loc.city);
|
|
5041
|
+
// Map the fetched locations with default unchecked state
|
|
5042
|
+
this.locations = res?.data?.locationData.map((city) => ({
|
|
5043
|
+
city: city.city,
|
|
5044
|
+
checked: cityList?.includes(city.city) ? true : false,
|
|
5045
|
+
}));
|
|
5046
|
+
// Sync the fetched locations with any stored checked values in localStorage
|
|
5047
|
+
if (this.selectedFilters.location && Array.isArray(this.selectedFilters.location)) {
|
|
5048
|
+
this.filteredLocations = this.locations.map(location => {
|
|
5049
|
+
const matchedLocation = this.selectedFilters.location.find((loc) => loc.city === location.city);
|
|
5050
|
+
return matchedLocation ? { ...location, checked: matchedLocation.checked } : location;
|
|
5051
|
+
});
|
|
5052
|
+
}
|
|
5053
|
+
else {
|
|
5054
|
+
this.filteredLocations = this.locations;
|
|
5055
|
+
}
|
|
5056
|
+
if (this.searchLocationText) {
|
|
5057
|
+
this.filteredLocations = this.locations.filter((location) => location.city.toLowerCase().includes(this.searchLocationText.toLowerCase()));
|
|
5058
|
+
}
|
|
5059
|
+
},
|
|
5060
|
+
error: (err) => {
|
|
5061
|
+
console.error("Failed to fetch locations", err);
|
|
5062
|
+
},
|
|
5063
|
+
});
|
|
5064
|
+
}
|
|
5065
|
+
isAllLocationsSelected() {
|
|
5066
|
+
return this.filteredLocations.every(location => location.checked);
|
|
5067
|
+
}
|
|
5068
|
+
selectedLocationsLabel() {
|
|
5069
|
+
const selectedLocations = this.locationLabel = this.searchLocationText.length ? this.locations
|
|
5070
|
+
.filter(location => location.checked).map(location => location.city) : this.filteredLocations
|
|
5071
|
+
.filter(location => location.checked).map(location => location.city);
|
|
5072
|
+
return selectedLocations.length === 0
|
|
5073
|
+
? ''
|
|
5074
|
+
: selectedLocations.length === 1
|
|
5075
|
+
? selectedLocations[0]
|
|
5076
|
+
: `${selectedLocations.length} locations`;
|
|
5077
|
+
}
|
|
5078
|
+
removeLocation() {
|
|
5079
|
+
this.Reset();
|
|
5080
|
+
}
|
|
5081
|
+
getGroups() {
|
|
5082
|
+
const city = this.locations
|
|
5083
|
+
.filter(location => location.checked)
|
|
5084
|
+
.map(location => location.city);
|
|
5085
|
+
const obj = { city, clientId: this.selectedFilters.client ? this.selectedFilters.client : this.users.clientId, group: [] };
|
|
5086
|
+
this.auth.getGroups(obj).subscribe({
|
|
5087
|
+
next: (res) => {
|
|
5088
|
+
let checkedGroup = this.selectedFilters?.group?.filter((group) => group.checked).map((group) => group.groupName);
|
|
5089
|
+
const combinedGroups = res?.data?.groupData?.map((groupName) => ({
|
|
5090
|
+
groupName: groupName.groupName,
|
|
5091
|
+
checked: checkedGroup?.includes(groupName.groupName) ? true : false,
|
|
5092
|
+
}));
|
|
5093
|
+
this.groupsData = combinedGroups;
|
|
5094
|
+
if (this.searchGroupText.length) {
|
|
5095
|
+
this.filteredGroups = combinedGroups.filter((item) => item.groupName.toLowerCase().includes(this.searchGroupText));
|
|
5096
|
+
}
|
|
5097
|
+
else {
|
|
5098
|
+
this.filteredGroups = combinedGroups;
|
|
5099
|
+
}
|
|
5100
|
+
// Auto-fetch stores when groups are selected
|
|
5101
|
+
const selectedGroups = this.groupsData.filter((group) => group.checked).map((group) => group.groupName);
|
|
5102
|
+
if (selectedGroups.length > 0) {
|
|
5103
|
+
this.getStore(); // Fetch stores based on selected groups
|
|
5104
|
+
}
|
|
5105
|
+
},
|
|
5106
|
+
error: (err) => {
|
|
5107
|
+
console.error("Failed to fetch groups", err);
|
|
5108
|
+
},
|
|
5109
|
+
});
|
|
5110
|
+
}
|
|
5111
|
+
toggleDropdown(type) {
|
|
5112
|
+
if (this.dropdownOpen === type) {
|
|
5113
|
+
// If the dropdown is open, close it and avoid resetting the selected values unnecessarily
|
|
5114
|
+
this.dropdownOpen = null;
|
|
5115
|
+
}
|
|
5116
|
+
else {
|
|
5117
|
+
// Open the specific dropdown and handle data fetching only if necessary
|
|
5118
|
+
this.dropdownOpen = type;
|
|
5119
|
+
if (type === 'group') {
|
|
5120
|
+
// Fetch groups only if there are selected cities and no active search text
|
|
5121
|
+
const selectedCities = this.locations
|
|
5122
|
+
.filter((location) => location.checked)
|
|
5123
|
+
.map((location) => location.city);
|
|
5124
|
+
// Fetch groups only if locations are selected, no search text exists, and dropdown is opened
|
|
5125
|
+
if (this.filteredLocations.length > 0 || (selectedCities.length > 0 && !this.searchGroupText.trim())) {
|
|
5126
|
+
this.getGroups();
|
|
5127
|
+
}
|
|
5128
|
+
else {
|
|
5129
|
+
this.filteredGroups = []; // Clear groups if no locations are selected
|
|
5130
|
+
}
|
|
5131
|
+
}
|
|
5132
|
+
if (type === 'store') {
|
|
5133
|
+
// Fetch stores only if not already fetched and no search text is active
|
|
5134
|
+
if ((!this.filteredStores || this.filteredStores.length === 0) && !this.searchStoreText.trim()) {
|
|
5135
|
+
this.getStore();
|
|
5136
|
+
}
|
|
5137
|
+
}
|
|
5138
|
+
}
|
|
5139
|
+
}
|
|
5140
|
+
handleGroupDropdownClick() {
|
|
5141
|
+
if (this.dropdownOpen === 'group') {
|
|
5142
|
+
this.resetSelectedGroups();
|
|
5143
|
+
}
|
|
5144
|
+
this.toggleDropdown('group');
|
|
5145
|
+
}
|
|
5146
|
+
resetSelectedGroups() {
|
|
5147
|
+
this.filteredGroups.forEach((group) => (group.checked = false));
|
|
5148
|
+
this.searchGroupText = "";
|
|
5149
|
+
}
|
|
5150
|
+
selectedGroupsLabel() {
|
|
5151
|
+
const selectedGroups = this.groupLabel = this.searchGroupText.length ? this.groupsData.filter((group) => group.checked) : this.filteredGroups.filter((group) => group.checked);
|
|
5152
|
+
return selectedGroups.length === 0
|
|
5153
|
+
? ""
|
|
5154
|
+
: selectedGroups.length === 1
|
|
5155
|
+
? selectedGroups[0].groupName
|
|
5156
|
+
: `${selectedGroups.length} groups`;
|
|
5157
|
+
}
|
|
5158
|
+
removeGroup() {
|
|
5159
|
+
this.Reset();
|
|
5160
|
+
}
|
|
5161
|
+
isAllGroupsSelected() {
|
|
5162
|
+
return this.filteredGroups.length ? this.filteredGroups.every((group) => group.checked) : false;
|
|
5163
|
+
}
|
|
5164
|
+
getStore() {
|
|
5165
|
+
const city = this.locations
|
|
5166
|
+
.filter(location => location.checked)
|
|
5167
|
+
.map(location => location.city);
|
|
5168
|
+
const group = this.groupsData
|
|
5169
|
+
.filter(group => group.checked)
|
|
5170
|
+
.map(group => group.groupName);
|
|
5171
|
+
const data = { city, clusters: group, clientId: this.users.clientId ? this.users.clientId : this.selectedFilters.client };
|
|
5172
|
+
this.auth.getHeaderStores(data).subscribe({
|
|
5173
|
+
next: (res) => {
|
|
5174
|
+
if (res && res.code === 200) {
|
|
5175
|
+
this.stores = res.data.storesData;
|
|
5176
|
+
// Retrieve checked store IDs from selectedFilters
|
|
5177
|
+
const checkedStoreIds = this.selectedFilters?.stores
|
|
5178
|
+
? this.selectedFilters.stores.filter((store) => store.checked).map((store) => store.storeId)
|
|
5179
|
+
: [];
|
|
5180
|
+
this.stores.forEach(store => {
|
|
5181
|
+
if (checkedStoreIds.includes(store.storeId)) {
|
|
5182
|
+
store.checked = true; // Sync the checked state with full store list
|
|
5183
|
+
}
|
|
5184
|
+
});
|
|
5185
|
+
// Map the stores and retain the 'checked' status
|
|
5186
|
+
if (this.searchStoreText.length) {
|
|
5187
|
+
this.filteredStores = this.stores?.filter(store => store.storeName.toLowerCase().includes(this.searchStoreText));
|
|
5188
|
+
}
|
|
5189
|
+
else {
|
|
5190
|
+
this.filteredStores = this.stores;
|
|
5191
|
+
}
|
|
5192
|
+
// Ensure selectedFilters is in sync with filteredStores
|
|
5193
|
+
if (!this.selectedFilters.stores || !this.selectedFilters.stores.length) {
|
|
5194
|
+
this.stores.forEach(store => {
|
|
5195
|
+
store.checked = true; // Sync the checked state with full store list
|
|
5196
|
+
});
|
|
5197
|
+
// No previously selected stores, mark all as checked
|
|
5198
|
+
this.filteredStores = this.selectedFilters.stores = this.filteredStores.map(store => ({
|
|
5199
|
+
...store,
|
|
5200
|
+
checked: true
|
|
5201
|
+
}));
|
|
5202
|
+
}
|
|
5203
|
+
else {
|
|
5204
|
+
// Update selectedFilters to reflect current state of stores
|
|
5205
|
+
this.selectedFilters.stores = this.filteredStores.map(store => ({
|
|
5206
|
+
...store,
|
|
5207
|
+
checked: store.checked
|
|
5208
|
+
}));
|
|
5209
|
+
}
|
|
5210
|
+
// Update localStorage with the latest selectedFilters
|
|
5211
|
+
localStorage.setItem('header-filters', JSON.stringify(this.selectedFilters));
|
|
5212
|
+
// Emit data via service
|
|
5213
|
+
// this.gs.dataRangeValue.next(this.selectedFilters);
|
|
5214
|
+
// Trigger change detection to reflect changes in the UI
|
|
5215
|
+
this.cd.detectChanges();
|
|
5216
|
+
}
|
|
5217
|
+
else {
|
|
5218
|
+
this.stores = [];
|
|
5219
|
+
this.selectedFilters.stores = [];
|
|
5220
|
+
this.filteredStores = [];
|
|
5221
|
+
this.selectedFilters.stores = this.filteredStores.map(store => ({
|
|
5222
|
+
...store,
|
|
5223
|
+
checked: false
|
|
5224
|
+
}));
|
|
5225
|
+
localStorage.setItem('header-filters', JSON.stringify(this.selectedFilters));
|
|
5226
|
+
}
|
|
5227
|
+
},
|
|
5228
|
+
error: (err) => {
|
|
5229
|
+
this.stores = [];
|
|
5230
|
+
this.selectedFilters.stores = [];
|
|
5231
|
+
this.filteredStores = [];
|
|
5232
|
+
this.selectedFilters.stores = this.filteredStores.map(store => ({
|
|
5233
|
+
...store,
|
|
5234
|
+
checked: false
|
|
5235
|
+
}));
|
|
5236
|
+
localStorage.setItem('header-filters', JSON.stringify(this.selectedFilters));
|
|
5237
|
+
console.error("Failed to fetch stores", err);
|
|
5238
|
+
},
|
|
5239
|
+
});
|
|
5240
|
+
}
|
|
5241
|
+
resetSelectedStores() {
|
|
5242
|
+
this.filteredStores.forEach((store) => (store.checked = false));
|
|
5243
|
+
this.searchStoreText = "";
|
|
5244
|
+
}
|
|
5245
|
+
selectedStoresLabel() {
|
|
5246
|
+
const selectedStores = this.searchStoreText.length ? this.stores.filter((store) => store.checked) : this.filteredStores.filter((store) => store.checked);
|
|
5247
|
+
return selectedStores.length === 0
|
|
5248
|
+
? "0 Stores"
|
|
5249
|
+
: selectedStores.length === 1
|
|
5250
|
+
? selectedStores[0].storeName
|
|
5251
|
+
: `${selectedStores.length} Stores`;
|
|
5252
|
+
}
|
|
5253
|
+
isAllStoresSelected() {
|
|
5254
|
+
return this.filteredStores.length > 0 && this.filteredStores.every(store => store.checked);
|
|
5255
|
+
}
|
|
5256
|
+
// Method to handle dropdown item selection
|
|
5257
|
+
updateSelectedStores() {
|
|
5258
|
+
this.filteredStores.forEach(store => {
|
|
5259
|
+
const filteredStore = this.stores.findIndex(fStore => fStore.storeId === store.storeId);
|
|
5260
|
+
if (filteredStore != -1) {
|
|
5261
|
+
this.stores[filteredStore].checked = store.checked; // Sync the checked state with full store list
|
|
5262
|
+
}
|
|
5263
|
+
});
|
|
5264
|
+
// Update selectedFilters based on the current store selection
|
|
5265
|
+
this.selectedFilters.stores = this.stores.filter(store => store.checked);
|
|
5266
|
+
// Update localStorage with the latest selection
|
|
5267
|
+
localStorage.setItem('header-filters', JSON.stringify(this.selectedFilters));
|
|
5268
|
+
// Emit updated filters via service
|
|
5269
|
+
// this.gs.dataRangeValue.next(this.selectedFilters);
|
|
5270
|
+
// Trigger change detection if necessary
|
|
5271
|
+
this.cd.detectChanges();
|
|
5272
|
+
}
|
|
5273
|
+
toggleSelectAllLocations(event) {
|
|
5274
|
+
const isChecked = event.target.checked;
|
|
5275
|
+
this.filteredLocations.forEach((location) => (location.checked = isChecked));
|
|
5276
|
+
this.updateSelectedLocations();
|
|
5277
|
+
}
|
|
5278
|
+
toggleSelectAllStores(event) {
|
|
5279
|
+
const checked = event.target.checked;
|
|
5280
|
+
// Apply the selection to both filtered and full list of stores
|
|
5281
|
+
this.filteredStores.forEach(store => store.checked = checked);
|
|
5282
|
+
this.stores.forEach(store => {
|
|
5283
|
+
const filteredStore = this.filteredStores.find(fStore => fStore.storeId === store.storeId);
|
|
5284
|
+
if (filteredStore) {
|
|
5285
|
+
store.checked = checked; // Sync the checked state with full store list
|
|
5286
|
+
}
|
|
5287
|
+
});
|
|
5288
|
+
// Update the selected stores and persist the selection
|
|
5289
|
+
this.updateSelectedStores();
|
|
5290
|
+
}
|
|
5291
|
+
updateSelectedLocations() {
|
|
5292
|
+
// When locations are selected, fetch the related groups
|
|
5293
|
+
const selectedCities = this.filteredLocations
|
|
5294
|
+
.filter((location) => location.checked)
|
|
5295
|
+
.map((location) => location.city);
|
|
5296
|
+
this.filteredLocations.forEach((location) => {
|
|
5297
|
+
let findLocationIndex = this.locations.findIndex((loc) => loc.city == location.city);
|
|
5298
|
+
if (findLocationIndex != -1) {
|
|
5299
|
+
this.locations[findLocationIndex].checked = location.checked;
|
|
5300
|
+
}
|
|
5301
|
+
});
|
|
5302
|
+
if (selectedCities.length > 0 || !selectedCities.length) {
|
|
5303
|
+
this.selectedFilters.stores = [];
|
|
5304
|
+
this.selectedFilters.location = this.locations;
|
|
5305
|
+
this.getGroups(); // Fetch groups based on selected cities
|
|
5306
|
+
// If there are selected groups, fetch the stores based on selected groups
|
|
5307
|
+
this.getStore();
|
|
5308
|
+
}
|
|
5309
|
+
else {
|
|
5310
|
+
this.filteredGroups = []; // Clear groups if no locations are selected
|
|
5311
|
+
this.selectedFilters.location = [];
|
|
5312
|
+
}
|
|
5313
|
+
this.selectedFilters.group = [];
|
|
5314
|
+
this.filteredStores = []; // Reset stores as well
|
|
5315
|
+
this.searchGroupText = '';
|
|
5316
|
+
this.searchStoreText = '';
|
|
5317
|
+
// this.Opendropdown = false;
|
|
5318
|
+
}
|
|
5319
|
+
toggleSelectAllGroups(event) {
|
|
5320
|
+
const isChecked = event.target.checked;
|
|
5321
|
+
this.filteredGroups.forEach((group) => (group.checked = isChecked));
|
|
5322
|
+
this.updateSelectedGroups();
|
|
5323
|
+
// if (!isChecked) {
|
|
5324
|
+
// this.selectedFilters.stores =[];
|
|
5325
|
+
// // If there are selected groups, fetch the stores based on selected groups
|
|
5326
|
+
// this.getStore();
|
|
5327
|
+
// }
|
|
5328
|
+
}
|
|
5329
|
+
updateSelectedGroups() {
|
|
5330
|
+
// Fetch the relevant stores after groups are selected
|
|
5331
|
+
const selectedGroups = this.filteredGroups
|
|
5332
|
+
.filter((group) => group.checked)
|
|
5333
|
+
.map((group) => group.groupName);
|
|
5334
|
+
this.filteredGroups.forEach((group) => {
|
|
5335
|
+
let findGroupIndex = this.groupsData.findIndex((item) => item.groupName == group.groupName);
|
|
5336
|
+
if (findGroupIndex != -1) {
|
|
5337
|
+
this.groupsData[findGroupIndex].checked = group.checked;
|
|
5338
|
+
}
|
|
5339
|
+
});
|
|
5340
|
+
if (selectedGroups.length > 0 || !selectedGroups.length) {
|
|
5341
|
+
this.selectedFilters.stores = [];
|
|
5342
|
+
// If there are selected groups, fetch the stores based on selected groups
|
|
5343
|
+
this.getStore();
|
|
5344
|
+
this.selectedFilters.group = this.groupsData;
|
|
5345
|
+
}
|
|
5346
|
+
else {
|
|
5347
|
+
// If no groups are selected, clear the stores list
|
|
5348
|
+
this.filteredStores = [];
|
|
5349
|
+
// Also, update localStorage to reflect the cleared store selection
|
|
5350
|
+
this.selectedFilters.stores = [];
|
|
5351
|
+
localStorage.setItem('header-filters', JSON.stringify(this.selectedFilters));
|
|
5352
|
+
// Emit data via service
|
|
5353
|
+
// this.gs.dataRangeValue.next(this.selectedFilters);
|
|
5354
|
+
}
|
|
5355
|
+
// Clear the search store text when groups are updated
|
|
5356
|
+
this.searchStoreText = '';
|
|
5357
|
+
}
|
|
5358
|
+
Reset() {
|
|
5359
|
+
// Clear selected groups, stores, and locations
|
|
5360
|
+
this.filteredGroups = [];
|
|
5361
|
+
this.filteredStores = [];
|
|
5362
|
+
this.filteredLocations = []; // Reset locations as well
|
|
5363
|
+
// Clear search input fields
|
|
5364
|
+
this.searchLocationText = "";
|
|
5365
|
+
this.searchGroupText = "";
|
|
5366
|
+
this.searchStoreText = "";
|
|
5367
|
+
// Fetch locations, groups, and stores again
|
|
5368
|
+
this.getLocations();
|
|
5369
|
+
this.getStore();
|
|
5370
|
+
this.getGroups();
|
|
5371
|
+
// Reset the filters in selectedFilters
|
|
5372
|
+
this.selectedFilters = {
|
|
5373
|
+
...this.selectedFilters,
|
|
5374
|
+
stores: [],
|
|
5375
|
+
group: [],
|
|
5376
|
+
location: [] // Clear locations selection
|
|
5377
|
+
};
|
|
5378
|
+
// // Once stores are fetched, mark all as checked
|
|
5379
|
+
// setTimeout(() => {
|
|
5380
|
+
// this.filteredStores = this.stores.map(store => ({
|
|
5381
|
+
// ...store,
|
|
5382
|
+
// checked: true // Mark all stores as checked
|
|
5383
|
+
// }));
|
|
5384
|
+
// // Sync selectedFilters with the updated store state
|
|
5385
|
+
// this.selectedFilters.stores = this.filteredStores.map(store => ({
|
|
5386
|
+
// ...store,
|
|
5387
|
+
// checked: true
|
|
5388
|
+
// }));
|
|
5389
|
+
// Update localStorage with the latest selectedFilters
|
|
5390
|
+
localStorage.setItem('header-filters', JSON.stringify(this.selectedFilters));
|
|
5391
|
+
window.location.reload();
|
|
5392
|
+
// Emit the reset filters to update other components if needed
|
|
5393
|
+
// this.gs.dataRangeValue.next(this.selectedFilters);
|
|
5394
|
+
// Trigger change detection
|
|
5395
|
+
this.cd.detectChanges();
|
|
5396
|
+
// Adding a slight delay to ensure stores are fetched first
|
|
5397
|
+
// Close dropdown after reset if necessary
|
|
5398
|
+
this.Opendropdown = false;
|
|
5399
|
+
}
|
|
5400
|
+
Apply() {
|
|
5401
|
+
// Close the dropdown
|
|
5402
|
+
this.Opendropdown = false;
|
|
5403
|
+
// Fetch existing filters from localStorage
|
|
5404
|
+
const headerFilters = JSON.parse(localStorage.getItem("header-filters") || "{}");
|
|
5405
|
+
// Ensure current selections are reflected
|
|
5406
|
+
this.selectedFilters.location = this.locations;
|
|
5407
|
+
this.selectedFilters.group = this.groupsData;
|
|
5408
|
+
this.selectedFilters.stores = headerFilters.stores ? headerFilters.stores : this.stores;
|
|
5409
|
+
// Store updated filters back in localStorage
|
|
5410
|
+
localStorage.setItem("header-filters", JSON.stringify(this.selectedFilters));
|
|
5411
|
+
window.location.reload();
|
|
5412
|
+
// Emit the updated filters via the service
|
|
5413
|
+
// this.gs.dataRangeValue.next(this.selectedFilters);
|
|
5414
|
+
// Trigger refresh if necessary
|
|
5415
|
+
// this.gs.manageRefreshTrigger.next(true);
|
|
5416
|
+
this.cd.detectChanges();
|
|
5417
|
+
}
|
|
5418
|
+
filterLocations() {
|
|
5419
|
+
const searchText = this.searchLocationText.toLowerCase();
|
|
5420
|
+
if (searchText) {
|
|
5421
|
+
// Preserve the checked state during filtering
|
|
5422
|
+
this.filteredLocations = this.locations
|
|
5423
|
+
.map(location => ({
|
|
5424
|
+
...location,
|
|
5425
|
+
checked: this.filteredLocations.find(l => l.city === location.city)?.checked || false
|
|
5426
|
+
}))
|
|
5427
|
+
.filter(location => location?.city?.toLowerCase().includes(searchText));
|
|
5428
|
+
}
|
|
5429
|
+
else {
|
|
5430
|
+
// Restore the original checked state when search text is cleared
|
|
5431
|
+
this.filteredLocations = this.locations.map(location => ({
|
|
5432
|
+
...location,
|
|
5433
|
+
checked: this.selectedFilters.location.find((l) => l.city === location.city)?.checked || false
|
|
5434
|
+
}));
|
|
5435
|
+
}
|
|
5436
|
+
}
|
|
5437
|
+
filterGroups() {
|
|
5438
|
+
const searchText = this.searchGroupText.toLowerCase();
|
|
5439
|
+
if (searchText) {
|
|
5440
|
+
// Preserve the checked state during filtering
|
|
5441
|
+
this.filteredGroups = this.groupsData
|
|
5442
|
+
.map(group => ({
|
|
5443
|
+
...group,
|
|
5444
|
+
checked: this.filteredGroups.find(g => g.groupName === group.groupName)?.checked || false
|
|
5445
|
+
}))
|
|
5446
|
+
.filter(group => group?.groupName?.toLowerCase().includes(searchText));
|
|
5447
|
+
}
|
|
5448
|
+
else {
|
|
5449
|
+
// Restore the original checked state when search text is cleared
|
|
5450
|
+
this.filteredGroups = this.groupsData.map(group => ({
|
|
5451
|
+
...group,
|
|
5452
|
+
checked: this.selectedFilters.group.find((g) => g.groupName === group.groupName)?.checked || false
|
|
5453
|
+
}));
|
|
5454
|
+
}
|
|
5455
|
+
}
|
|
5456
|
+
filterStores() {
|
|
5457
|
+
const searchText = this.searchStoreText.toLowerCase();
|
|
5458
|
+
// Preserve checked states during filtering
|
|
5459
|
+
if (searchText) {
|
|
5460
|
+
// Filter based on search text while preserving checked state
|
|
5461
|
+
this.filteredStores = this.stores
|
|
5462
|
+
.map(store => ({
|
|
5463
|
+
...store,
|
|
5464
|
+
// Check if the store is already checked in filteredStores, fallback to original stores' checked state
|
|
5465
|
+
checked: this.selectedFilters.stores.find((s) => s.storeId === store.storeId)?.checked || store.checked || false
|
|
5466
|
+
}))
|
|
5467
|
+
.filter(store => store.storeName.toLowerCase().includes(searchText));
|
|
5468
|
+
}
|
|
5469
|
+
else {
|
|
5470
|
+
// When the search text is cleared, restore the original list with preserved checked states
|
|
5471
|
+
this.filteredStores = this.stores.map(store => ({
|
|
5472
|
+
...store,
|
|
5473
|
+
// Preserve the checked state based on the selected filters
|
|
5474
|
+
checked: this.selectedFilters.stores.find((s) => s.storeId === store.storeId)?.checked || store.checked || false
|
|
5475
|
+
}));
|
|
5476
|
+
}
|
|
5477
|
+
}
|
|
5478
|
+
closeDropdown() {
|
|
5479
|
+
this.dropdownOpen = null;
|
|
5480
|
+
}
|
|
5481
|
+
clickOutside(event) {
|
|
5482
|
+
const clickedInside = event.target.closest(".dropdown-container");
|
|
5483
|
+
const clickedoutSide = event.target.closest(".dropdown1");
|
|
5484
|
+
if (!clickedInside) {
|
|
5485
|
+
this.closeDropdown();
|
|
5486
|
+
}
|
|
5487
|
+
if (!clickedoutSide) {
|
|
5488
|
+
this.closeDropdown1();
|
|
5489
|
+
}
|
|
5490
|
+
}
|
|
5491
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TraxWithoutdateComponent, deps: [{ token: AuthService }, { token: i2.Router }, { token: i1.GlobalStateService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
5492
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TraxWithoutdateComponent, selector: "lib-trax-withoutdate", host: { listeners: { "document:click": "clickOutside($event)" } }, ngImport: i0, template: "<div class=\"me-3\">\r\n <label *ngIf=\"selectedLocationsLabel()\" class=\"badge badge-light-default mx-2\">{{selectedLocationsLabel()}} \r\n <span class=\"cursor-pointer\" (click)=\"removeLocation()\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path d=\"M9 3L3 9M3 3L9 9\" stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg></span>\r\n </label>\r\n <label *ngIf=\"selectedGroupsLabel()\" class=\"badge badge-light-default mx-2\">{{selectedGroupsLabel()}} \r\n <span class=\"cursor-pointer\" (click)=\"removeGroup()\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path d=\"M9 3L3 9M3 3L9 9\" stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg></span>\r\n </label>\r\n <label class=\"badge badge-light-default\">{{selectedStoresLabel()}}</label>\r\n</div>\r\n\r\n\r\n<div class=\"wrapper me-3\" *ngIf=\"(gs.userAccess | async)?.userType === 'tango'\">\r\n<lib-select [items]=\"clientList\" [multi]=\"false\" [searchField]=\"'clientName'\" [disabled]=\"false\" [idField]=\"'clientId'\"\r\n(selected)=\"onClientSelect($event)\" [selectedValues]=\"[selectedClient]\"></lib-select>\r\n</div>\r\n\r\n<div class=\"position-relative\">\r\n <button type=\"button\" (click)=\"opendropdown($event)\" class=\"btn btn-default mx-2 rounded-3 text-nowrap border-val\">\r\n <!-- <span class=\"me-2\">Filter</span> -->\r\n <svg class=\"pl-3\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path d=\"M5 10H15M2.5 5H17.5M7.5 15H12.5\" stroke=\"#344054\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </button>\r\n\r\n <div *ngIf=\"Opendropdown\" class=\"card p-5 dropdown1 position-absolute z-1 end-0\" style=\"z-index: 1 !important;\" (clickOutside)=\"closeDropdown1()\">\r\n <div class=\"dropdown-title d-flex justify-content-between mb-2\">Filter Options\r\n <button class=\"btn btn-outline w-25 ms-3 btn-resize\" (click)=\"Reset()\"> Reset </button>\r\n <button class=\"btn btn-primary w-25 btn-resize\" (click)=\"Apply()\">Apply</button>\r\n </div>\r\n\r\n <!-- Location Dropdown -->\r\n<div class=\"dropdown-container\" (clickOutside)=\"closeDropdown()\">\r\n <div class=\"dropdown-header\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control dropdown-input cursor-pointer\" \r\n [value]=\"selectedLocationsLabel()\"\r\n (focus)=\"toggleDropdown('location')\" \r\n readonly\r\n placeholder=\"Select locations...\"\r\n />\r\n </div>\r\n <div class=\"dropdown-menu custom-dropdown-menu\" *ngIf=\"dropdownOpen === 'location'\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control mb-2 dropdown-search\" \r\n placeholder=\"Search locations...\" \r\n [(ngModel)]=\"searchLocationText\" \r\n (ngModelChange)=\"filterLocations()\" \r\n />\r\n <div class=\"form-check mb-2 dropdown-item custom-dropdown-item\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n id=\"selectAllLocations\" \r\n [checked]=\"isAllLocationsSelected()\" \r\n (change)=\"toggleSelectAllLocations($event)\" \r\n />\r\n <label class=\"form-check-label\" for=\"selectAllLocations\">\r\n Select All Locations\r\n </label>\r\n </div>\r\n <div \r\n class=\"dropdown-item form-check custom-dropdown-item\" \r\n *ngFor=\"let location of filteredLocations\"\r\n >\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n [id]=\"location.city\" \r\n [(ngModel)]=\"location.checked\"\r\n (change)=\"updateSelectedLocations()\" \r\n />\r\n <label class=\"form-check-label\" [for]=\"location.city\">\r\n {{ location.city }}\r\n </label>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<!-- Group Dropdown -->\r\n<div class=\"dropdown-container mt-3\" (clickOutside)=\"closeDropdown()\">\r\n <div class=\"dropdown-header\" (click)=\"toggleDropdown('group')\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control dropdown-input cursor-pointer\" \r\n [value]=\"selectedGroupsLabel()\" readonly\r\n placeholder=\"Select clusters..\"\r\n />\r\n </div>\r\n <div class=\"dropdown-menu custom-dropdown-menu\" *ngIf=\"dropdownOpen === 'group'\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control mb-2 dropdown-search\" \r\n placeholder=\"Search clusters...\" \r\n [(ngModel)]=\"searchGroupText\" \r\n (ngModelChange)=\"filterGroups()\" \r\n />\r\n <div class=\"form-check mb-2 dropdown-item custom-dropdown-item\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n id=\"selectAllGroups\" \r\n [checked]=\"isAllGroupsSelected()\" \r\n (change)=\"toggleSelectAllGroups($event)\" \r\n />\r\n <label class=\"form-check-label\" for=\"selectAllGroups\">\r\n Select All\r\n </label>\r\n </div>\r\n <div \r\n class=\"dropdown-item form-check custom-dropdown-item\" \r\n *ngFor=\"let group of filteredGroups\"\r\n >\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n [id]=\"group.groupName\"\r\n [(ngModel)]=\"group.checked\"\r\n (change)=\"updateSelectedGroups()\" \r\n />\r\n <label class=\"form-check-label\" [for]=\"group.groupName\">\r\n {{ group.groupName }}\r\n </label>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n\r\n<!-- Store Dropdown -->\r\n<div class=\"dropdown-container mt-3\" (clickOutside)=\"closeDropdown()\">\r\n <div class=\"dropdown-header\" (click)=\"toggleDropdown('store')\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control dropdown-input cursor-pointer\"\r\n [value]=\"selectedStoresLabel()\"\r\n readonly\r\n placeholder=\"Select stores...\"\r\n />\r\n </div>\r\n <div class=\"dropdown-menu custom-dropdown-menu\" *ngIf=\"dropdownOpen === 'store'\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control mb-2 dropdown-search \" \r\n placeholder=\"Search stores...\" \r\n [(ngModel)]=\"searchStoreText\" \r\n (ngModelChange)=\"filterStores()\" \r\n />\r\n <div class=\"form-check mb-2 dropdown-item custom-dropdown-item\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n id=\"selectAllStores\" \r\n [checked]=\"isAllStoresSelected()\" \r\n (change)=\"toggleSelectAllStores($event)\" \r\n />\r\n <label class=\"form-check-label\" for=\"selectAllStores\">\r\n Select All\r\n </label>\r\n </div>\r\n <div \r\n class=\"dropdown-item form-check custom-dropdown-item\" \r\n *ngFor=\"let store of filteredStores\"\r\n >\r\n <input \r\n class=\"form-check-input\" \r\n type=\"checkbox\" \r\n [id]=\"store.storeId\"\r\n [(ngModel)]=\"store.checked\"\r\n (change)=\"updateSelectedStores()\" \r\n />\r\n <label class=\"form-check-label\" [for]=\"store.storeId\">\r\n {{ store.storeName }}\r\n </label>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n </div>\r\n</div>", styles: [".daterangepicker{display:block!important;top:153.85px!important;left:900px!important;right:0}.form-control{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600;line-height:20px;text-transform:capitalize}::ng-deep .applyBtn{display:none!important}:host::ng-deep .md-drppicker .btn{line-height:10px!important}:host::ng-deep .daterangepicker-input+.ngx-daterangepicker-material .applyBtn{display:none}:host::ng-deep .md-drppicker.drops-down-right.ltr.double.show-ranges.shown{top:65px!important;left:-470px!important;height:365px!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}.wrapper{min-width:200px}.btn-primary{line-height:18px!important}.filter-label{color:var(--Gray-500, #667085)!important;font-size:14px;font-style:normal;font-weight:600;line-height:20px;text-transform:capitalize}.position-relative{position:relative}.filter-icon{cursor:pointer}.dropdown-container{position:relative;display:inline-block;width:100%}.dropdown-header{cursor:pointer;width:100%}.form-control{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600;line-height:20px;text-transform:capitalize;width:100%;box-sizing:border-box}.dropdown-menu{position:absolute;top:100%;left:0;right:0;border:1px solid #ccc;background-color:#fff;z-index:1000;max-height:230px;overflow-y:auto;display:block;box-sizing:border-box;padding:10px 5px}.dropdown-item{padding:6px 0}.dropdown-item:hover{background-color:#f1f1f1}.dropdown-item input[type=checkbox]{margin-right:10px}.custom-dropdown-menu{border-radius:4px;box-shadow:0 1px 2px #1018280d}.custom-dropdown-item{display:flex;align-items:center}.custom-dropdown-item input{margin-left:10px}.btn-resize{font-size:13px!important;height:29px!important;line-height:11px!important;padding:3px!important}.dropdown1{position:absolute;top:70px;min-width:270px!important}.dropdown1 .dropdown-title{color:var(--Gray-900, #101828);font-size:14px;font-weight:600;line-height:24px}.dropdown1 .dropdown{position:relative;display:inline-block}.dropdown1 .dropdown span{color:var(--Gray-700, #344054);font-size:14px;font-weight:600;line-height:20px}::ng-deep .dropdown1{z-index:1!important}.form-check-label{color:var(--Gray-700, #344054)!important;font-size:14px;font-style:normal;font-weight:500;line-height:20px}input[type=checkbox]{width:16px!important;height:16px!important;margin:0 5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-300, #D0D5DD);box-shadow:none;font-size:.8em;text-align:center;line-height:1em;background:#fff}input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00A3FF);background-color:var(--primary-50, #EAF8FF)}input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00A3FF;border-right:2px solid #00A3FF;display:inline-block;width:.2em;padding-left:0;padding-top:9px;padding-right:4px}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CustomSelectComponent, selector: "lib-select", inputs: ["items", "searchField", "multi", "idField", "selectedValues", "disabled", "label"], outputs: ["selected"] }, { kind: "directive", type: i6.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: i6.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }] });
|
|
4783
5493
|
}
|
|
4784
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type:
|
|
5494
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TraxWithoutdateComponent, decorators: [{
|
|
4785
5495
|
type: Component,
|
|
4786
|
-
args: [{ selector: 'lib-trax-header', template: "<div class=\"me-3\">\r\n <label *ngIf=\"selectedLocationsLabel()\" class=\"badge badge-light-default mx-2\">{{selectedLocationsLabel()}} \r\n <span class=\"cursor-pointer\" (click)=\"removeLocation()\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path d=\"M9 3L3 9M3 3L9 9\" stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg></span>\r\n </label>\r\n <label *ngIf=\"selectedGroupsLabel()\" class=\"badge badge-light-default mx-2\">{{selectedGroupsLabel()}} \r\n <span class=\"cursor-pointer\" (click)=\"removeGroup()\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path d=\"M9 3L3 9M3 3L9 9\" stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg></span>\r\n </label>\r\n <label class=\"badge badge-light-default\">{{selectedStoresLabel()}}</label>\r\n</div>\r\n\r\n\r\n<div class=\"wrapper me-3\" *ngIf=\"(gs.userAccess | async)?.userType === 'tango'\">\r\n<lib-select [items]=\"clientList\" [multi]=\"false\" [searchField]=\"'clientName'\" [disabled]=\"false\" [idField]=\"'clientId'\"\r\n(selected)=\"onClientSelect($event)\" [selectedValues]=\"[selectedClient]\"></lib-select>\r\n</div>\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=\"20\" height=\"20\" viewBox=\"0 0 20 20\" 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\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <input class=\"fx-date-range form-control ps-14\" style=\"min-width: 260px !important;\" type=\"text\" matInput\r\n ngxDaterangepickerMd [drops]=\"'down'\" [opens]=\"'right'\" [ranges]=\"ranges\" [showCustomRangeLabel]=\"true\" [autoApply]=\"true\"\r\n [alwaysShowCalendars]=\"false\" [keepCalendarOpeningWithRange]=\"true\" [showCancel]=\"true\" autocomplete=\"off\"\r\n [(ngModel)]=\"selectedDateRange\" (startDateChanged)=\"onStartDateChange($event)\" [isCustomDate]=\"isCustomDate\" (click)=\"resetValidation()\" \r\n [locale]=\"{ format: 'DD-MM-YYYY', firstDay: 1, monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] }\"\r\n (datesUpdated)=\"datechange($event)\" name=\"daterange\" [readonly]=\"true\" />\r\n</div>\r\n<div class=\"position-relative\">\r\n <button type=\"button\" (click)=\"opendropdown($event)\" class=\"btn btn-default mx-2 rounded-3 text-nowrap border-val\">\r\n <!-- <span class=\"me-2\">Filter</span> -->\r\n <svg class=\"pl-3\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path d=\"M5 10H15M2.5 5H17.5M7.5 15H12.5\" stroke=\"#344054\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </button>\r\n\r\n <div *ngIf=\"Opendropdown\" class=\"card p-5 dropdown1 position-absolute z-1 end-0\" style=\"z-index: 1 !important;\" (clickOutside)=\"closeDropdown1()\">\r\n <div class=\"dropdown-title d-flex justify-content-between mb-2\">Filter Options\r\n <button class=\"btn btn-outline w-25 ms-3 btn-resize\" (click)=\"Reset()\"> Reset </button>\r\n <button class=\"btn btn-primary w-25 btn-resize\" (click)=\"Apply()\">Apply</button>\r\n </div>\r\n\r\n <!-- Location Dropdown -->\r\n<div class=\"dropdown-container\" (clickOutside)=\"closeDropdown()\">\r\n <div class=\"dropdown-header\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control dropdown-input cursor-pointer\" \r\n [value]=\"selectedLocationsLabel()\"\r\n (focus)=\"toggleDropdown('location')\" \r\n readonly\r\n placeholder=\"Select locations...\"\r\n />\r\n </div>\r\n <div class=\"dropdown-menu custom-dropdown-menu\" *ngIf=\"dropdownOpen === 'location'\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control mb-2 dropdown-search\" \r\n placeholder=\"Search locations...\" \r\n [(ngModel)]=\"searchLocationText\" \r\n (ngModelChange)=\"filterLocations()\" \r\n />\r\n <div class=\"form-check mb-2 dropdown-item custom-dropdown-item\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n id=\"selectAllLocations\" \r\n [checked]=\"isAllLocationsSelected()\" \r\n (change)=\"toggleSelectAllLocations($event)\" \r\n />\r\n <label class=\"form-check-label\" for=\"selectAllLocations\">\r\n Select All Locations\r\n </label>\r\n </div>\r\n <div \r\n class=\"dropdown-item form-check custom-dropdown-item\" \r\n *ngFor=\"let location of filteredLocations\"\r\n >\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n [id]=\"location.city\" \r\n [(ngModel)]=\"location.checked\"\r\n (change)=\"updateSelectedLocations()\" \r\n />\r\n <label class=\"form-check-label\" [for]=\"location.city\">\r\n {{ location.city }}\r\n </label>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<!-- Group Dropdown -->\r\n<div class=\"dropdown-container mt-3\" (clickOutside)=\"closeDropdown()\">\r\n <div class=\"dropdown-header\" (click)=\"toggleDropdown('group')\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control dropdown-input cursor-pointer\" \r\n [value]=\"selectedGroupsLabel()\" readonly\r\n placeholder=\"Select clusters..\"\r\n />\r\n </div>\r\n <div class=\"dropdown-menu custom-dropdown-menu\" *ngIf=\"dropdownOpen === 'group'\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control mb-2 dropdown-search\" \r\n placeholder=\"Search clusters...\" \r\n [(ngModel)]=\"searchGroupText\" \r\n (ngModelChange)=\"filterGroups()\" \r\n />\r\n <div class=\"form-check mb-2 dropdown-item custom-dropdown-item\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n id=\"selectAllGroups\" \r\n [checked]=\"isAllGroupsSelected()\" \r\n (change)=\"toggleSelectAllGroups($event)\" \r\n />\r\n <label class=\"form-check-label\" for=\"selectAllGroups\">\r\n Select All\r\n </label>\r\n </div>\r\n <div \r\n class=\"dropdown-item form-check custom-dropdown-item\" \r\n *ngFor=\"let group of filteredGroups\"\r\n >\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n [id]=\"group.groupName\"\r\n [(ngModel)]=\"group.checked\"\r\n (change)=\"updateSelectedGroups()\" \r\n />\r\n <label class=\"form-check-label\" [for]=\"group.groupName\">\r\n {{ group.groupName }}\r\n </label>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n\r\n<!-- Store Dropdown -->\r\n<div class=\"dropdown-container mt-3\" (clickOutside)=\"closeDropdown()\">\r\n <div class=\"dropdown-header\" (click)=\"toggleDropdown('store')\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control dropdown-input cursor-pointer\"\r\n [value]=\"selectedStoresLabel()\"\r\n readonly\r\n placeholder=\"Select stores...\"\r\n />\r\n </div>\r\n <div class=\"dropdown-menu custom-dropdown-menu\" *ngIf=\"dropdownOpen === 'store'\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control mb-2 dropdown-search \" \r\n placeholder=\"Search stores...\" \r\n [(ngModel)]=\"searchStoreText\" \r\n (ngModelChange)=\"filterStores()\" \r\n />\r\n <div class=\"form-check mb-2 dropdown-item custom-dropdown-item\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n id=\"selectAllStores\" \r\n [checked]=\"isAllStoresSelected()\" \r\n (change)=\"toggleSelectAllStores($event)\" \r\n />\r\n <label class=\"form-check-label\" for=\"selectAllStores\">\r\n Select All\r\n </label>\r\n </div>\r\n <div \r\n class=\"dropdown-item form-check custom-dropdown-item\" \r\n *ngFor=\"let store of filteredStores\"\r\n >\r\n <input \r\n class=\"form-check-input\" \r\n type=\"checkbox\" \r\n [id]=\"store.storeId\"\r\n [(ngModel)]=\"store.checked\"\r\n (change)=\"updateSelectedStores()\" \r\n />\r\n <label class=\"form-check-label\" [for]=\"store.storeId\">\r\n {{ store.storeName }}\r\n </label>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n </div>\r\n</div>", styles: [".daterangepicker{display:block!important;top:153.85px!important;left:900px!important;right:0}.form-control{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600;line-height:20px;text-transform:capitalize}::ng-deep .applyBtn{display:none!important}:host::ng-deep .md-drppicker .btn{line-height:10px!important}:host::ng-deep .daterangepicker-input+.ngx-daterangepicker-material .applyBtn{display:none}:host::ng-deep .md-drppicker.drops-down-right.ltr.double.show-ranges.shown{top:65px!important;left:-470px!important;height:365px!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}.wrapper{min-width:200px}.btn-primary{line-height:18px!important}.filter-label{color:var(--Gray-500, #667085)!important;font-size:14px;font-style:normal;font-weight:600;line-height:20px;text-transform:capitalize}.position-relative{position:relative}.filter-icon{cursor:pointer}.dropdown-container{position:relative;display:inline-block;width:100%}.dropdown-header{cursor:pointer;width:100%}.form-control{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600;line-height:20px;text-transform:capitalize;width:100%;box-sizing:border-box}.dropdown-menu{position:absolute;top:100%;left:0;right:0;border:1px solid #ccc;background-color:#fff;z-index:1000;max-height:230px;overflow-y:auto;display:block;box-sizing:border-box;padding:10px 5px}.dropdown-item{padding:6px 0}.dropdown-item:hover{background-color:#f1f1f1}.dropdown-item input[type=checkbox]{margin-right:10px}.custom-dropdown-menu{border-radius:4px;box-shadow:0 1px 2px #1018280d}.custom-dropdown-item{display:flex;align-items:center}.custom-dropdown-item input{margin-left:10px}.btn-resize{font-size:13px!important;height:29px!important;line-height:11px!important;padding:3px!important}.dropdown1{position:absolute;top:70px;min-width:270px!important}.dropdown1 .dropdown-title{color:var(--Gray-900, #101828);font-size:14px;font-weight:600;line-height:24px}.dropdown1 .dropdown{position:relative;display:inline-block}.dropdown1 .dropdown span{color:var(--Gray-700, #344054);font-size:14px;font-weight:600;line-height:20px}::ng-deep .dropdown1{z-index:1!important}.form-check-label{color:var(--Gray-700, #344054)!important;font-size:14px;font-style:normal;font-weight:500;line-height:20px}input[type=checkbox]{width:16px!important;height:16px!important;margin:0 5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-300, #D0D5DD);box-shadow:none;font-size:.8em;text-align:center;line-height:1em;background:#fff}input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00A3FF);background-color:var(--primary-50, #EAF8FF)}input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00A3FF;border-right:2px solid #00A3FF;display:inline-block;width:.2em;padding-left:0;padding-top:9px;padding-right:4px}\n"] }]
|
|
5496
|
+
args: [{ selector: 'lib-trax-withoutdate', template: "<div class=\"me-3\">\r\n <label *ngIf=\"selectedLocationsLabel()\" class=\"badge badge-light-default mx-2\">{{selectedLocationsLabel()}} \r\n <span class=\"cursor-pointer\" (click)=\"removeLocation()\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path d=\"M9 3L3 9M3 3L9 9\" stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg></span>\r\n </label>\r\n <label *ngIf=\"selectedGroupsLabel()\" class=\"badge badge-light-default mx-2\">{{selectedGroupsLabel()}} \r\n <span class=\"cursor-pointer\" (click)=\"removeGroup()\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path d=\"M9 3L3 9M3 3L9 9\" stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg></span>\r\n </label>\r\n <label class=\"badge badge-light-default\">{{selectedStoresLabel()}}</label>\r\n</div>\r\n\r\n\r\n<div class=\"wrapper me-3\" *ngIf=\"(gs.userAccess | async)?.userType === 'tango'\">\r\n<lib-select [items]=\"clientList\" [multi]=\"false\" [searchField]=\"'clientName'\" [disabled]=\"false\" [idField]=\"'clientId'\"\r\n(selected)=\"onClientSelect($event)\" [selectedValues]=\"[selectedClient]\"></lib-select>\r\n</div>\r\n\r\n<div class=\"position-relative\">\r\n <button type=\"button\" (click)=\"opendropdown($event)\" class=\"btn btn-default mx-2 rounded-3 text-nowrap border-val\">\r\n <!-- <span class=\"me-2\">Filter</span> -->\r\n <svg class=\"pl-3\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path d=\"M5 10H15M2.5 5H17.5M7.5 15H12.5\" stroke=\"#344054\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </button>\r\n\r\n <div *ngIf=\"Opendropdown\" class=\"card p-5 dropdown1 position-absolute z-1 end-0\" style=\"z-index: 1 !important;\" (clickOutside)=\"closeDropdown1()\">\r\n <div class=\"dropdown-title d-flex justify-content-between mb-2\">Filter Options\r\n <button class=\"btn btn-outline w-25 ms-3 btn-resize\" (click)=\"Reset()\"> Reset </button>\r\n <button class=\"btn btn-primary w-25 btn-resize\" (click)=\"Apply()\">Apply</button>\r\n </div>\r\n\r\n <!-- Location Dropdown -->\r\n<div class=\"dropdown-container\" (clickOutside)=\"closeDropdown()\">\r\n <div class=\"dropdown-header\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control dropdown-input cursor-pointer\" \r\n [value]=\"selectedLocationsLabel()\"\r\n (focus)=\"toggleDropdown('location')\" \r\n readonly\r\n placeholder=\"Select locations...\"\r\n />\r\n </div>\r\n <div class=\"dropdown-menu custom-dropdown-menu\" *ngIf=\"dropdownOpen === 'location'\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control mb-2 dropdown-search\" \r\n placeholder=\"Search locations...\" \r\n [(ngModel)]=\"searchLocationText\" \r\n (ngModelChange)=\"filterLocations()\" \r\n />\r\n <div class=\"form-check mb-2 dropdown-item custom-dropdown-item\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n id=\"selectAllLocations\" \r\n [checked]=\"isAllLocationsSelected()\" \r\n (change)=\"toggleSelectAllLocations($event)\" \r\n />\r\n <label class=\"form-check-label\" for=\"selectAllLocations\">\r\n Select All Locations\r\n </label>\r\n </div>\r\n <div \r\n class=\"dropdown-item form-check custom-dropdown-item\" \r\n *ngFor=\"let location of filteredLocations\"\r\n >\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n [id]=\"location.city\" \r\n [(ngModel)]=\"location.checked\"\r\n (change)=\"updateSelectedLocations()\" \r\n />\r\n <label class=\"form-check-label\" [for]=\"location.city\">\r\n {{ location.city }}\r\n </label>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<!-- Group Dropdown -->\r\n<div class=\"dropdown-container mt-3\" (clickOutside)=\"closeDropdown()\">\r\n <div class=\"dropdown-header\" (click)=\"toggleDropdown('group')\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control dropdown-input cursor-pointer\" \r\n [value]=\"selectedGroupsLabel()\" readonly\r\n placeholder=\"Select clusters..\"\r\n />\r\n </div>\r\n <div class=\"dropdown-menu custom-dropdown-menu\" *ngIf=\"dropdownOpen === 'group'\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control mb-2 dropdown-search\" \r\n placeholder=\"Search clusters...\" \r\n [(ngModel)]=\"searchGroupText\" \r\n (ngModelChange)=\"filterGroups()\" \r\n />\r\n <div class=\"form-check mb-2 dropdown-item custom-dropdown-item\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n id=\"selectAllGroups\" \r\n [checked]=\"isAllGroupsSelected()\" \r\n (change)=\"toggleSelectAllGroups($event)\" \r\n />\r\n <label class=\"form-check-label\" for=\"selectAllGroups\">\r\n Select All\r\n </label>\r\n </div>\r\n <div \r\n class=\"dropdown-item form-check custom-dropdown-item\" \r\n *ngFor=\"let group of filteredGroups\"\r\n >\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n [id]=\"group.groupName\"\r\n [(ngModel)]=\"group.checked\"\r\n (change)=\"updateSelectedGroups()\" \r\n />\r\n <label class=\"form-check-label\" [for]=\"group.groupName\">\r\n {{ group.groupName }}\r\n </label>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n\r\n<!-- Store Dropdown -->\r\n<div class=\"dropdown-container mt-3\" (clickOutside)=\"closeDropdown()\">\r\n <div class=\"dropdown-header\" (click)=\"toggleDropdown('store')\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control dropdown-input cursor-pointer\"\r\n [value]=\"selectedStoresLabel()\"\r\n readonly\r\n placeholder=\"Select stores...\"\r\n />\r\n </div>\r\n <div class=\"dropdown-menu custom-dropdown-menu\" *ngIf=\"dropdownOpen === 'store'\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control mb-2 dropdown-search \" \r\n placeholder=\"Search stores...\" \r\n [(ngModel)]=\"searchStoreText\" \r\n (ngModelChange)=\"filterStores()\" \r\n />\r\n <div class=\"form-check mb-2 dropdown-item custom-dropdown-item\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n id=\"selectAllStores\" \r\n [checked]=\"isAllStoresSelected()\" \r\n (change)=\"toggleSelectAllStores($event)\" \r\n />\r\n <label class=\"form-check-label\" for=\"selectAllStores\">\r\n Select All\r\n </label>\r\n </div>\r\n <div \r\n class=\"dropdown-item form-check custom-dropdown-item\" \r\n *ngFor=\"let store of filteredStores\"\r\n >\r\n <input \r\n class=\"form-check-input\" \r\n type=\"checkbox\" \r\n [id]=\"store.storeId\"\r\n [(ngModel)]=\"store.checked\"\r\n (change)=\"updateSelectedStores()\" \r\n />\r\n <label class=\"form-check-label\" [for]=\"store.storeId\">\r\n {{ store.storeName }}\r\n </label>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n </div>\r\n</div>", styles: [".daterangepicker{display:block!important;top:153.85px!important;left:900px!important;right:0}.form-control{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600;line-height:20px;text-transform:capitalize}::ng-deep .applyBtn{display:none!important}:host::ng-deep .md-drppicker .btn{line-height:10px!important}:host::ng-deep .daterangepicker-input+.ngx-daterangepicker-material .applyBtn{display:none}:host::ng-deep .md-drppicker.drops-down-right.ltr.double.show-ranges.shown{top:65px!important;left:-470px!important;height:365px!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}.wrapper{min-width:200px}.btn-primary{line-height:18px!important}.filter-label{color:var(--Gray-500, #667085)!important;font-size:14px;font-style:normal;font-weight:600;line-height:20px;text-transform:capitalize}.position-relative{position:relative}.filter-icon{cursor:pointer}.dropdown-container{position:relative;display:inline-block;width:100%}.dropdown-header{cursor:pointer;width:100%}.form-control{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600;line-height:20px;text-transform:capitalize;width:100%;box-sizing:border-box}.dropdown-menu{position:absolute;top:100%;left:0;right:0;border:1px solid #ccc;background-color:#fff;z-index:1000;max-height:230px;overflow-y:auto;display:block;box-sizing:border-box;padding:10px 5px}.dropdown-item{padding:6px 0}.dropdown-item:hover{background-color:#f1f1f1}.dropdown-item input[type=checkbox]{margin-right:10px}.custom-dropdown-menu{border-radius:4px;box-shadow:0 1px 2px #1018280d}.custom-dropdown-item{display:flex;align-items:center}.custom-dropdown-item input{margin-left:10px}.btn-resize{font-size:13px!important;height:29px!important;line-height:11px!important;padding:3px!important}.dropdown1{position:absolute;top:70px;min-width:270px!important}.dropdown1 .dropdown-title{color:var(--Gray-900, #101828);font-size:14px;font-weight:600;line-height:24px}.dropdown1 .dropdown{position:relative;display:inline-block}.dropdown1 .dropdown span{color:var(--Gray-700, #344054);font-size:14px;font-weight:600;line-height:20px}::ng-deep .dropdown1{z-index:1!important}.form-check-label{color:var(--Gray-700, #344054)!important;font-size:14px;font-style:normal;font-weight:500;line-height:20px}input[type=checkbox]{width:16px!important;height:16px!important;margin:0 5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-300, #D0D5DD);box-shadow:none;font-size:.8em;text-align:center;line-height:1em;background:#fff}input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00A3FF);background-color:var(--primary-50, #EAF8FF)}input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00A3FF;border-right:2px solid #00A3FF;display:inline-block;width:.2em;padding-left:0;padding-top:9px;padding-right:4px}\n"] }]
|
|
4787
5497
|
}], ctorParameters: () => [{ type: AuthService }, { type: i2.Router }, { type: i1.GlobalStateService }, { type: i0.ChangeDetectorRef }], propDecorators: { onClick: [{
|
|
4788
5498
|
type: HostListener,
|
|
4789
5499
|
args: ['document:click', ['$event']]
|
|
@@ -4832,6 +5542,8 @@ class ToolbarComponent {
|
|
|
4832
5542
|
trafficdatepicker;
|
|
4833
5543
|
traxdatepicker;
|
|
4834
5544
|
urlString;
|
|
5545
|
+
traxwithoutdatepicker;
|
|
5546
|
+
storesSingle;
|
|
4835
5547
|
constructor(layout, router, route, gs) {
|
|
4836
5548
|
this.layout = layout;
|
|
4837
5549
|
this.router = router;
|
|
@@ -4910,10 +5622,10 @@ class ToolbarComponent {
|
|
|
4910
5622
|
URL == "/manage/stores" || URL === "/manage/stores?type=stores" || URL === "/manage/stores?type=clusters" ||
|
|
4911
5623
|
URL == "/manage/stores/addition-method" ||
|
|
4912
5624
|
URL == "/manage/stores/add-single-store" || URL === "/manage/trax/gallery" || URL == "/notifications/alerts?tab=alert" || URL == "/notifications/alerts?tab=download") {
|
|
4913
|
-
this.setUIProperties(true, false, false, false, false, false, false);
|
|
5625
|
+
this.setUIProperties(true, false, false, false, false, false, false, false, false);
|
|
4914
5626
|
}
|
|
4915
5627
|
else if (url[3] == "edge-app") {
|
|
4916
|
-
this.setUIProperties(false, false, false, false, true, false, false);
|
|
5628
|
+
this.setUIProperties(false, false, false, false, true, false, false, false, false);
|
|
4917
5629
|
}
|
|
4918
5630
|
else if (URL == `/manage/stores/infra-ticket?storeId=${this.storeId}` || URL == `/manage/stores/infra-ticket?storeId=${this.storeId}&type=infra` ||
|
|
4919
5631
|
URL == `/manage/stores/settings?storeId=${this.storeId}` || URL == `/manage/stores/infra-ticket?storeId=${this.storeId}&type=dataMismatch` ||
|
|
@@ -4921,36 +5633,44 @@ class ToolbarComponent {
|
|
|
4921
5633
|
URL == `/manage/stores/cameras?storeId=${this.storeId}` ||
|
|
4922
5634
|
// URL == `/manage/stores/infrastructure?storeId=${this.storeId}` ||
|
|
4923
5635
|
URL == `/manage/stores/mat?storeId=${this.storeId}`) {
|
|
4924
|
-
this.setUIProperties(false, false, false, true, false, false, false);
|
|
5636
|
+
this.setUIProperties(false, false, false, true, false, false, false, false, false);
|
|
4925
5637
|
}
|
|
4926
5638
|
else if (url.includes('controlcenter')) {
|
|
4927
|
-
|
|
5639
|
+
// if(URL == `/manage/controlcenter/stream?storeId=${this.storeId}`|| URL == `/manage/controlcenter/image?storeId=${this.storeId}`){
|
|
5640
|
+
// this.setUIProperties(false, false, false, false,false,false,false,false,true);
|
|
5641
|
+
// }
|
|
5642
|
+
// else {
|
|
5643
|
+
this.setUIProperties(false, false, false, false, true, false, false, false, false);
|
|
5644
|
+
// }
|
|
4928
5645
|
}
|
|
4929
5646
|
else if (URL == "/profile" || url[2] === "data-mismatch" || url[2] === "employeetraining"
|
|
4930
5647
|
|| URL == "/manage/brands" || URL == "/manage/users/tango" || (url[1] === "tickets" && url[2] === "audit")) {
|
|
4931
|
-
this.setUIProperties(false, false, false, false, false, false, false);
|
|
5648
|
+
this.setUIProperties(false, false, false, false, false, false, false, false, false);
|
|
4932
5649
|
}
|
|
4933
5650
|
else if (url[2] === "traffic" || url[2] === "zones" || URL == "/manage/analyse/reports") {
|
|
4934
|
-
this.setUIProperties(false, false, false, false, false, true, false);
|
|
5651
|
+
this.setUIProperties(false, false, false, false, false, true, false, false, false);
|
|
4935
5652
|
}
|
|
4936
5653
|
else if (url[2] == 'trax') {
|
|
4937
5654
|
if (url[2] == 'trax' && (url.includes('createChecklist') || url.includes('configure') || url.includes('create-order') || url[3] == 'create-task' || url[3] == 'task-configure')) {
|
|
4938
|
-
this.setUIProperties(false, false, false, false, false, false, false);
|
|
5655
|
+
this.setUIProperties(false, false, false, false, false, false, false, false, false);
|
|
5656
|
+
}
|
|
5657
|
+
else if (url[2] == 'trax' && (url.includes('taskinfo'))) {
|
|
5658
|
+
this.setUIProperties(true, false, false, false, false, false, false, true, false);
|
|
4939
5659
|
}
|
|
4940
5660
|
else if (url[2] == 'trax' && (url.includes('checklist') || url.includes('gallery'))) {
|
|
4941
|
-
this.setUIProperties(true, false, false, false, false, false, false);
|
|
5661
|
+
this.setUIProperties(true, false, false, false, false, false, false, false, false);
|
|
4942
5662
|
}
|
|
4943
5663
|
else {
|
|
4944
|
-
this.setUIProperties(false, false, false, false, false, false, true);
|
|
5664
|
+
this.setUIProperties(false, false, false, false, false, false, true, false, false);
|
|
4945
5665
|
}
|
|
4946
5666
|
}
|
|
4947
5667
|
else {
|
|
4948
|
-
this.setUIProperties(false, false, false, false, true, false, false);
|
|
5668
|
+
this.setUIProperties(false, false, false, false, true, false, false, false, false);
|
|
4949
5669
|
}
|
|
4950
5670
|
}
|
|
4951
5671
|
else {
|
|
4952
5672
|
if (url[3] == "edge-app") {
|
|
4953
|
-
this.setUIProperties(false, false, true, false, false, false, false);
|
|
5673
|
+
this.setUIProperties(false, false, true, false, false, false, false, false, false);
|
|
4954
5674
|
}
|
|
4955
5675
|
else if (URL == `/manage/stores/infra-ticket?storeId=${this.storeId}` || URL == `/manage/stores/infra-ticket?storeId=${this.storeId}&type=infra` ||
|
|
4956
5676
|
URL == `/manage/stores/settings?storeId=${this.storeId}` || URL == `/manage/stores/infra-ticket?storeId=${this.storeId}&type=dataMismatch` ||
|
|
@@ -4958,41 +5678,49 @@ class ToolbarComponent {
|
|
|
4958
5678
|
URL == `/manage/stores/cameras?storeId=${this.storeId}` ||
|
|
4959
5679
|
// URL == `/manage/stores/infrastructure?storeId=${this.storeId}` ||
|
|
4960
5680
|
URL == `/manage/stores/mat?storeId=${this.storeId}`) {
|
|
4961
|
-
this.setUIProperties(false, false, false, true, false, false, false);
|
|
5681
|
+
this.setUIProperties(false, false, false, true, false, false, false, false, false);
|
|
4962
5682
|
}
|
|
4963
5683
|
else if (url.includes('controlcenter')) {
|
|
4964
|
-
|
|
5684
|
+
// if(URL == `/manage/controlcenter/stream?storeId=${this.storeId}`|| URL == `/manage/controlcenter/image?storeId=${this.storeId}`){
|
|
5685
|
+
// this.setUIProperties(false, false, false, false,false,false,false,false,true);
|
|
5686
|
+
// }
|
|
5687
|
+
// else {
|
|
5688
|
+
this.setUIProperties(false, false, false, false, true, false, false, false, false);
|
|
5689
|
+
// }
|
|
4965
5690
|
}
|
|
4966
5691
|
else if (URL == "/profile" || URL == "/manage/users/client" || URL == "/manage/users/tango" ||
|
|
4967
5692
|
URL == "/manage/stores" || URL === "/manage/stores?type=stores" || URL === "/manage/stores?type=clusters" || url[2] == "settings" ||
|
|
4968
5693
|
URL == "/manage/stores/addition-method" ||
|
|
4969
5694
|
URL == "/manage/stores/add-single-store" || url[2] === "data-mismatch" || url[2] === "employeetraining" || URL == "/notifications/alerts?tab=alert" || URL == "/notifications/alerts?tab=download"
|
|
4970
|
-
|| URL == "/manage/users/tango" || url[2] === 'controlcenter') {
|
|
4971
|
-
this.setUIProperties(false, false, false, false, false, false, false);
|
|
5695
|
+
|| URL == "/manage/users/tango" || URL === "/manage/controlcenter" || URL === 'manage/controlcenter/template-manager' || url[2] === 'controlcenter') {
|
|
5696
|
+
this.setUIProperties(false, false, false, false, false, false, false, false, false);
|
|
4972
5697
|
}
|
|
4973
5698
|
else if (url[2] === "traffic" || url[2] === "zones" || URL == "/manage/analyse/reports") {
|
|
4974
|
-
this.setUIProperties(false, false, false, false, false, true, false);
|
|
5699
|
+
this.setUIProperties(false, false, false, false, false, true, false, false, false);
|
|
4975
5700
|
}
|
|
4976
5701
|
else if (url[2] == 'trax') {
|
|
4977
5702
|
if (url[2] == 'trax' && (url.includes('createChecklist') || url.includes('configure') || url.includes('create-order') || url[3] == 'create-task' || url[3] == 'task-configure')) {
|
|
4978
|
-
this.setUIProperties(false, false, false, false, false, false, false);
|
|
5703
|
+
this.setUIProperties(false, false, false, false, false, false, false, false, false);
|
|
5704
|
+
}
|
|
5705
|
+
else if (url[2] == 'trax' && (url.includes('taskinfo'))) {
|
|
5706
|
+
this.setUIProperties(true, false, false, false, false, false, false, true, false);
|
|
4979
5707
|
}
|
|
4980
5708
|
else if (url[2] == 'trax' && (url.includes('checklist') || url.includes('gallery'))) {
|
|
4981
|
-
this.setUIProperties(true, false, false, false, false, false, false);
|
|
5709
|
+
this.setUIProperties(true, false, false, false, false, false, false, false, false);
|
|
4982
5710
|
}
|
|
4983
5711
|
else {
|
|
4984
|
-
this.setUIProperties(false, false, false, false, false, false, true);
|
|
5712
|
+
this.setUIProperties(false, false, false, false, false, false, true, false, false);
|
|
4985
5713
|
}
|
|
4986
5714
|
}
|
|
4987
5715
|
else {
|
|
4988
|
-
this.setUIProperties(false, false, true, false, false, false, false);
|
|
5716
|
+
this.setUIProperties(false, false, true, false, false, false, false, false, false);
|
|
4989
5717
|
}
|
|
4990
5718
|
}
|
|
4991
5719
|
const viewsWithPageTitles = ["classic", "reports", "saas"];
|
|
4992
5720
|
return (this.appPageTitleDisplay &&
|
|
4993
5721
|
viewsWithPageTitles.some((t) => t === this.appToolbarLayout));
|
|
4994
5722
|
}
|
|
4995
|
-
setUIProperties(singleSelect, multiSelect, datepicker, singleStore, singleSelectdatepicker, trafficdatepicker, traxdatepicker) {
|
|
5723
|
+
setUIProperties(singleSelect, multiSelect, datepicker, singleStore, singleSelectdatepicker, trafficdatepicker, traxdatepicker, traxwithoutdatepicker, storesSingle) {
|
|
4996
5724
|
this.singleSelect = singleSelect;
|
|
4997
5725
|
this.multiSelect = multiSelect;
|
|
4998
5726
|
this.datepicker = datepicker;
|
|
@@ -5000,13 +5728,15 @@ class ToolbarComponent {
|
|
|
5000
5728
|
this.singleSelectdatepicker = singleSelectdatepicker;
|
|
5001
5729
|
this.trafficdatepicker = trafficdatepicker;
|
|
5002
5730
|
this.traxdatepicker = traxdatepicker;
|
|
5731
|
+
this.traxwithoutdatepicker = traxwithoutdatepicker;
|
|
5732
|
+
this.storesSingle = storesSingle;
|
|
5003
5733
|
}
|
|
5004
5734
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ToolbarComponent, deps: [{ token: i1.LayoutService }, { token: i2.Router }, { token: i2.ActivatedRoute }, { token: i1.GlobalStateService }], target: i0.ɵɵFactoryTarget.Component });
|
|
5005
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ToolbarComponent, selector: "lib-toolbar", inputs: { currentLayoutType: "currentLayoutType", appToolbarLayout: "appToolbarLayout" }, ngImport: i0, template: "<!--begin::Toolbar container-->\r\n<div id=\"kt_app_toolbar_container\" class=\"app-container\" [ngClass]=\"appToolbarContainerCSSClass\">\r\n <ng-container *ngIf=\"(gs.userAccess | async)?.userType === 'tango' || (gs.userAccess | async)?.userType === 'client' || (gs.userAccess | async)?.userType === 'lead'\" >\r\n <ng-container *ngIf=\"showPageTitle()\">\r\n <lib-page-title [appPageTitleDirection]=\"appPageTitleDirection\" [appPageTitleBreadcrumb]=\"appPageTitleBreadcrumb\"\r\n [appPageTitleDescription]=\"appPageTitleDescription\" class=\"page-title d-flex flex-wrap me-3\"\r\n [ngClass]=\"{'flex-column justify-content-center': appPageTitleDirection === 'column', 'align-items-center': appPageTitleDirection !== 'column', appPageTitleCSSClass}\">\r\n </lib-page-title>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"multiSelect && users.userType ==='tango'\">\r\n <lib-classic class=\"d-flex align-items-center gap-2 gap-lg-3\"></lib-classic>\r\n </ng-container>\r\n <ng-container *ngIf=\"singleSelect && users.userType ==='tango'\">\r\n <lib-client-settings class=\"d-flex align-items-center me-5\"></lib-client-settings>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"datepicker && users.userType ==='client'\">\r\n <lib-datepicker class=\"d-flex align-items-center me-5\"></lib-datepicker>\r\n </ng-container>\r\n <ng-container *ngIf=\"singleSelectdatepicker && users.userType ==='tango'\">\r\n <lib-date-single-select class=\"d-flex align-items-center me-5\"></lib-date-single-select>\r\n </ng-container>\r\n <ng-container *ngIf=\"singleStore || (singleSelectdatepicker && users.userType !=='tango')\">\r\n <lib-single-store class=\"d-flex align-items-center me-5\" [urlString]=\"urlString\"></lib-single-store>\r\n </ng-container>\r\n <ng-container *ngIf=\"trafficdatepicker\">\r\n <lib-traffic-header class=\"d-flex align-items-center me-5\"></lib-traffic-header>\r\n </ng-container>\r\n <ng-container *ngIf=\"traxdatepicker\">\r\n <lib-trax-header class=\"d-flex align-items-center me-5\"></lib-trax-header>\r\n </ng-container>\r\n <!-- <ng-container *ngIf=\"appToolbarLayout === 'extended'\">\r\n <lib-extended class=\"d-flex align-items-center flex-shrink-0 me-5\"></lib-extended>\r\n </ng-container>\r\n <ng-container *ngIf=\"appToolbarLayout === 'reports'\">\r\n <lib-reports class=\"d-flex align-items-center overflow-auto\" [appPageTitleDisplay]=\"appPageTitleDisplay\">\r\n </lib-reports>\r\n </ng-container>\r\n <ng-container *ngIf=\"appToolbarLayout === 'saas'\">\r\n <lib-saas class=\"d-flex align-items-center gap-2\" [appPageTitleDisplay]=\"appPageTitleDisplay\"></lib-saas>\r\n </ng-container> -->\r\n</ng-container>\r\n</div>\r\n<!--end::Toolbar container-->\r\n", styles: [""], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: PageTitleComponent, selector: "lib-page-title", inputs: ["appPageTitleDirection", "appPageTitleBreadcrumb", "appPageTitleDescription"] }, { kind: "component", type: ClassicComponent, selector: "lib-classic" }, { kind: "component", type: ClientSettingsComponent, selector: "lib-client-settings" }, { kind: "component", type: DatepickerComponent, selector: "lib-datepicker" }, { kind: "component", type: DateSingleSelectComponent, selector: "lib-date-single-select" }, { kind: "component", type: SingleStoreComponent, selector: "lib-single-store", inputs: ["urlString"] }, { kind: "component", type: TrafficHeaderComponent, selector: "lib-traffic-header" }, { kind: "component", type: TraxHeaderComponent, selector: "lib-trax-header" }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }] });
|
|
5735
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ToolbarComponent, selector: "lib-toolbar", inputs: { currentLayoutType: "currentLayoutType", appToolbarLayout: "appToolbarLayout" }, ngImport: i0, template: "<!--begin::Toolbar container-->\r\n<div id=\"kt_app_toolbar_container\" class=\"app-container\" [ngClass]=\"appToolbarContainerCSSClass\">\r\n <ng-container *ngIf=\"(gs.userAccess | async)?.userType === 'tango' || (gs.userAccess | async)?.userType === 'client' || (gs.userAccess | async)?.userType === 'lead'\" >\r\n <ng-container *ngIf=\"showPageTitle()\">\r\n <lib-page-title [appPageTitleDirection]=\"appPageTitleDirection\" [appPageTitleBreadcrumb]=\"appPageTitleBreadcrumb\"\r\n [appPageTitleDescription]=\"appPageTitleDescription\" class=\"page-title d-flex flex-wrap me-3\"\r\n [ngClass]=\"{'flex-column justify-content-center': appPageTitleDirection === 'column', 'align-items-center': appPageTitleDirection !== 'column', appPageTitleCSSClass}\">\r\n </lib-page-title>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"multiSelect && users.userType ==='tango'\">\r\n <lib-classic class=\"d-flex align-items-center gap-2 gap-lg-3\"></lib-classic>\r\n </ng-container>\r\n <ng-container *ngIf=\"singleSelect && users.userType ==='tango'\">\r\n <lib-client-settings class=\"d-flex align-items-center me-5\"></lib-client-settings>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"datepicker && users.userType ==='client'\">\r\n <lib-datepicker class=\"d-flex align-items-center me-5\"></lib-datepicker>\r\n </ng-container>\r\n <ng-container *ngIf=\"singleSelectdatepicker && users.userType ==='tango'\">\r\n <lib-date-single-select class=\"d-flex align-items-center me-5\"></lib-date-single-select>\r\n </ng-container>\r\n <ng-container *ngIf=\"singleStore || (singleSelectdatepicker && users.userType !=='tango')\">\r\n <lib-single-store class=\"d-flex align-items-center me-5\" [urlString]=\"urlString\"></lib-single-store>\r\n </ng-container>\r\n <ng-container *ngIf=\"trafficdatepicker\">\r\n <lib-traffic-header class=\"d-flex align-items-center me-5\"></lib-traffic-header>\r\n </ng-container>\r\n <ng-container *ngIf=\"traxdatepicker\">\r\n <lib-trax-header class=\"d-flex align-items-center me-5\"></lib-trax-header>\r\n </ng-container>\r\n <ng-container *ngIf=\"traxwithoutdatepicker\">\r\n <lib-trax-withoutdate class=\"d-flex align-items-center me-5\"></lib-trax-withoutdate>\r\n </ng-container>\r\n <!-- <ng-container *ngIf=\"storesSingle\">\r\n <lib-storesingle class=\"d-flex align-items-center me-5\"></lib-storesingle>\r\n </ng-container> -->\r\n \r\n <!-- <ng-container *ngIf=\"appToolbarLayout === 'extended'\">\r\n <lib-extended class=\"d-flex align-items-center flex-shrink-0 me-5\"></lib-extended>\r\n </ng-container>\r\n <ng-container *ngIf=\"appToolbarLayout === 'reports'\">\r\n <lib-reports class=\"d-flex align-items-center overflow-auto\" [appPageTitleDisplay]=\"appPageTitleDisplay\">\r\n </lib-reports>\r\n </ng-container>\r\n <ng-container *ngIf=\"appToolbarLayout === 'saas'\">\r\n <lib-saas class=\"d-flex align-items-center gap-2\" [appPageTitleDisplay]=\"appPageTitleDisplay\"></lib-saas>\r\n </ng-container> -->\r\n</ng-container>\r\n</div>\r\n<!--end::Toolbar container-->\r\n", styles: [""], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: PageTitleComponent, selector: "lib-page-title", inputs: ["appPageTitleDirection", "appPageTitleBreadcrumb", "appPageTitleDescription"] }, { kind: "component", type: ClassicComponent, selector: "lib-classic" }, { kind: "component", type: ClientSettingsComponent, selector: "lib-client-settings" }, { kind: "component", type: DatepickerComponent, selector: "lib-datepicker" }, { kind: "component", type: DateSingleSelectComponent, selector: "lib-date-single-select" }, { kind: "component", type: SingleStoreComponent, selector: "lib-single-store", inputs: ["urlString"] }, { kind: "component", type: TrafficHeaderComponent, selector: "lib-traffic-header" }, { kind: "component", type: TraxHeaderComponent, selector: "lib-trax-header" }, { kind: "component", type: TraxWithoutdateComponent, selector: "lib-trax-withoutdate" }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }] });
|
|
5006
5736
|
}
|
|
5007
5737
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ToolbarComponent, decorators: [{
|
|
5008
5738
|
type: Component,
|
|
5009
|
-
args: [{ selector: "lib-toolbar", template: "<!--begin::Toolbar container-->\r\n<div id=\"kt_app_toolbar_container\" class=\"app-container\" [ngClass]=\"appToolbarContainerCSSClass\">\r\n <ng-container *ngIf=\"(gs.userAccess | async)?.userType === 'tango' || (gs.userAccess | async)?.userType === 'client' || (gs.userAccess | async)?.userType === 'lead'\" >\r\n <ng-container *ngIf=\"showPageTitle()\">\r\n <lib-page-title [appPageTitleDirection]=\"appPageTitleDirection\" [appPageTitleBreadcrumb]=\"appPageTitleBreadcrumb\"\r\n [appPageTitleDescription]=\"appPageTitleDescription\" class=\"page-title d-flex flex-wrap me-3\"\r\n [ngClass]=\"{'flex-column justify-content-center': appPageTitleDirection === 'column', 'align-items-center': appPageTitleDirection !== 'column', appPageTitleCSSClass}\">\r\n </lib-page-title>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"multiSelect && users.userType ==='tango'\">\r\n <lib-classic class=\"d-flex align-items-center gap-2 gap-lg-3\"></lib-classic>\r\n </ng-container>\r\n <ng-container *ngIf=\"singleSelect && users.userType ==='tango'\">\r\n <lib-client-settings class=\"d-flex align-items-center me-5\"></lib-client-settings>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"datepicker && users.userType ==='client'\">\r\n <lib-datepicker class=\"d-flex align-items-center me-5\"></lib-datepicker>\r\n </ng-container>\r\n <ng-container *ngIf=\"singleSelectdatepicker && users.userType ==='tango'\">\r\n <lib-date-single-select class=\"d-flex align-items-center me-5\"></lib-date-single-select>\r\n </ng-container>\r\n <ng-container *ngIf=\"singleStore || (singleSelectdatepicker && users.userType !=='tango')\">\r\n <lib-single-store class=\"d-flex align-items-center me-5\" [urlString]=\"urlString\"></lib-single-store>\r\n </ng-container>\r\n <ng-container *ngIf=\"trafficdatepicker\">\r\n <lib-traffic-header class=\"d-flex align-items-center me-5\"></lib-traffic-header>\r\n </ng-container>\r\n <ng-container *ngIf=\"traxdatepicker\">\r\n <lib-trax-header class=\"d-flex align-items-center me-5\"></lib-trax-header>\r\n </ng-container>\r\n <!-- <ng-container *ngIf=\"appToolbarLayout === 'extended'\">\r\n <lib-extended class=\"d-flex align-items-center flex-shrink-0 me-5\"></lib-extended>\r\n </ng-container>\r\n <ng-container *ngIf=\"appToolbarLayout === 'reports'\">\r\n <lib-reports class=\"d-flex align-items-center overflow-auto\" [appPageTitleDisplay]=\"appPageTitleDisplay\">\r\n </lib-reports>\r\n </ng-container>\r\n <ng-container *ngIf=\"appToolbarLayout === 'saas'\">\r\n <lib-saas class=\"d-flex align-items-center gap-2\" [appPageTitleDisplay]=\"appPageTitleDisplay\"></lib-saas>\r\n </ng-container> -->\r\n</ng-container>\r\n</div>\r\n<!--end::Toolbar container-->\r\n" }]
|
|
5739
|
+
args: [{ selector: "lib-toolbar", template: "<!--begin::Toolbar container-->\r\n<div id=\"kt_app_toolbar_container\" class=\"app-container\" [ngClass]=\"appToolbarContainerCSSClass\">\r\n <ng-container *ngIf=\"(gs.userAccess | async)?.userType === 'tango' || (gs.userAccess | async)?.userType === 'client' || (gs.userAccess | async)?.userType === 'lead'\" >\r\n <ng-container *ngIf=\"showPageTitle()\">\r\n <lib-page-title [appPageTitleDirection]=\"appPageTitleDirection\" [appPageTitleBreadcrumb]=\"appPageTitleBreadcrumb\"\r\n [appPageTitleDescription]=\"appPageTitleDescription\" class=\"page-title d-flex flex-wrap me-3\"\r\n [ngClass]=\"{'flex-column justify-content-center': appPageTitleDirection === 'column', 'align-items-center': appPageTitleDirection !== 'column', appPageTitleCSSClass}\">\r\n </lib-page-title>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"multiSelect && users.userType ==='tango'\">\r\n <lib-classic class=\"d-flex align-items-center gap-2 gap-lg-3\"></lib-classic>\r\n </ng-container>\r\n <ng-container *ngIf=\"singleSelect && users.userType ==='tango'\">\r\n <lib-client-settings class=\"d-flex align-items-center me-5\"></lib-client-settings>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"datepicker && users.userType ==='client'\">\r\n <lib-datepicker class=\"d-flex align-items-center me-5\"></lib-datepicker>\r\n </ng-container>\r\n <ng-container *ngIf=\"singleSelectdatepicker && users.userType ==='tango'\">\r\n <lib-date-single-select class=\"d-flex align-items-center me-5\"></lib-date-single-select>\r\n </ng-container>\r\n <ng-container *ngIf=\"singleStore || (singleSelectdatepicker && users.userType !=='tango')\">\r\n <lib-single-store class=\"d-flex align-items-center me-5\" [urlString]=\"urlString\"></lib-single-store>\r\n </ng-container>\r\n <ng-container *ngIf=\"trafficdatepicker\">\r\n <lib-traffic-header class=\"d-flex align-items-center me-5\"></lib-traffic-header>\r\n </ng-container>\r\n <ng-container *ngIf=\"traxdatepicker\">\r\n <lib-trax-header class=\"d-flex align-items-center me-5\"></lib-trax-header>\r\n </ng-container>\r\n <ng-container *ngIf=\"traxwithoutdatepicker\">\r\n <lib-trax-withoutdate class=\"d-flex align-items-center me-5\"></lib-trax-withoutdate>\r\n </ng-container>\r\n <!-- <ng-container *ngIf=\"storesSingle\">\r\n <lib-storesingle class=\"d-flex align-items-center me-5\"></lib-storesingle>\r\n </ng-container> -->\r\n \r\n <!-- <ng-container *ngIf=\"appToolbarLayout === 'extended'\">\r\n <lib-extended class=\"d-flex align-items-center flex-shrink-0 me-5\"></lib-extended>\r\n </ng-container>\r\n <ng-container *ngIf=\"appToolbarLayout === 'reports'\">\r\n <lib-reports class=\"d-flex align-items-center overflow-auto\" [appPageTitleDisplay]=\"appPageTitleDisplay\">\r\n </lib-reports>\r\n </ng-container>\r\n <ng-container *ngIf=\"appToolbarLayout === 'saas'\">\r\n <lib-saas class=\"d-flex align-items-center gap-2\" [appPageTitleDisplay]=\"appPageTitleDisplay\"></lib-saas>\r\n </ng-container> -->\r\n</ng-container>\r\n</div>\r\n<!--end::Toolbar container-->\r\n" }]
|
|
5010
5740
|
}], ctorParameters: () => [{ type: i1.LayoutService }, { type: i2.Router }, { type: i2.ActivatedRoute }, { type: i1.GlobalStateService }], propDecorators: { currentLayoutType: [{
|
|
5011
5741
|
type: Input
|
|
5012
5742
|
}], appToolbarLayout: [{
|
|
@@ -6908,7 +7638,7 @@ const Routing = [
|
|
|
6908
7638
|
},
|
|
6909
7639
|
{
|
|
6910
7640
|
path: 'notifications',
|
|
6911
|
-
loadChildren: () => import('./tango-app-ui-shared-notification.module-
|
|
7641
|
+
loadChildren: () => import('./tango-app-ui-shared-notification.module-C5ZmCf8U.mjs').then((m) => m.NotificationModule),
|
|
6912
7642
|
},
|
|
6913
7643
|
// {
|
|
6914
7644
|
// path: 'analyse',
|
|
@@ -7020,6 +7750,252 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
7020
7750
|
args: ['attr.data-kt-menu']
|
|
7021
7751
|
}] } });
|
|
7022
7752
|
|
|
7753
|
+
class SingleStoredateComponent {
|
|
7754
|
+
auth;
|
|
7755
|
+
gs;
|
|
7756
|
+
cd;
|
|
7757
|
+
router;
|
|
7758
|
+
dayjs = dayjs;
|
|
7759
|
+
isCustomDate = (m) => {
|
|
7760
|
+
const isValidDate = m > this.dayjs();
|
|
7761
|
+
return isValidDate ? 'invalid-date' : false;
|
|
7762
|
+
};
|
|
7763
|
+
selectedDateRange = {};
|
|
7764
|
+
storeList = [];
|
|
7765
|
+
selectedClient;
|
|
7766
|
+
selectedFilters = {
|
|
7767
|
+
client: null,
|
|
7768
|
+
clientName: null,
|
|
7769
|
+
clients: [],
|
|
7770
|
+
store: null,
|
|
7771
|
+
stores: [],
|
|
7772
|
+
date: null,
|
|
7773
|
+
};
|
|
7774
|
+
URL;
|
|
7775
|
+
baseurl;
|
|
7776
|
+
constructor(auth, gs, cd, router) {
|
|
7777
|
+
this.auth = auth;
|
|
7778
|
+
this.gs = gs;
|
|
7779
|
+
this.cd = cd;
|
|
7780
|
+
this.router = router;
|
|
7781
|
+
}
|
|
7782
|
+
ngOnInit() {
|
|
7783
|
+
const headerFilters = JSON.parse(localStorage.getItem("header-filters") || "{}");
|
|
7784
|
+
this.cd.detectChanges();
|
|
7785
|
+
if (headerFilters?.client) {
|
|
7786
|
+
this.auth.getStores(headerFilters?.client).subscribe({
|
|
7787
|
+
next: (e) => {
|
|
7788
|
+
if (e) {
|
|
7789
|
+
this.storeList = e.data.result;
|
|
7790
|
+
const headerFilters = JSON.parse(localStorage.getItem("header-filters") || "{}");
|
|
7791
|
+
this.selectedDateRange = {
|
|
7792
|
+
startDate: this.dayjs(headerFilters?.date?.startDate, "DD-MM-YYYY").format("YYYY-MM-DD"),
|
|
7793
|
+
endDate: this.dayjs(headerFilters?.date?.endDate, "DD-MM-YYYY").format("YYYY-MM-DD")
|
|
7794
|
+
};
|
|
7795
|
+
if (headerFilters?.store) {
|
|
7796
|
+
this.storeList.find((obj) => {
|
|
7797
|
+
if (obj.storeId === headerFilters.store) {
|
|
7798
|
+
this.selectedClient = obj;
|
|
7799
|
+
}
|
|
7800
|
+
});
|
|
7801
|
+
this.selectedFilters.store = headerFilters.store;
|
|
7802
|
+
this.selectedFilters.client = headerFilters.client;
|
|
7803
|
+
this.selectedFilters.clientName = headerFilters.clientName;
|
|
7804
|
+
this.selectedFilters.clients = headerFilters.clients;
|
|
7805
|
+
this.selectedFilters.date = headerFilters.date;
|
|
7806
|
+
this.selectedDateRange = {
|
|
7807
|
+
startDate: this.dayjs(headerFilters.date.startDate, "YYYY-MM-DD").format("DD-MM-YYYY"),
|
|
7808
|
+
endDate: this.dayjs(headerFilters.date.endDate, "YYYY-MM-DD").format("DD-MM-YYYY"),
|
|
7809
|
+
};
|
|
7810
|
+
localStorage.setItem("header-filters", JSON.stringify(this.selectedFilters));
|
|
7811
|
+
this.gs.dataRangeValue.next(this.selectedFilters);
|
|
7812
|
+
this.cd.detectChanges();
|
|
7813
|
+
}
|
|
7814
|
+
else {
|
|
7815
|
+
this.selectedClient = this.storeList[0];
|
|
7816
|
+
this.selectedFilters.store = this.selectedClient.storeId;
|
|
7817
|
+
this.selectedFilters.client = headerFilters.client;
|
|
7818
|
+
this.selectedFilters.clientName = headerFilters.clientName;
|
|
7819
|
+
this.selectedFilters.clients = headerFilters.clients;
|
|
7820
|
+
this.selectedDateRange = {
|
|
7821
|
+
startDate: this.dayjs().format("DD-MM-YYYY"),
|
|
7822
|
+
endDate: this.dayjs().format("DD-MM-YYYY"),
|
|
7823
|
+
};
|
|
7824
|
+
var datetime = {
|
|
7825
|
+
startDate: this.dayjs().format("YYYY-MM-DD"),
|
|
7826
|
+
endDate: this.dayjs().format("YYYY-MM-DD"),
|
|
7827
|
+
};
|
|
7828
|
+
this.selectedFilters.date = datetime;
|
|
7829
|
+
localStorage.setItem("header-filters", JSON.stringify(this.selectedFilters));
|
|
7830
|
+
this.gs.dataRangeValue.next(this.selectedFilters);
|
|
7831
|
+
this.cd.detectChanges();
|
|
7832
|
+
}
|
|
7833
|
+
}
|
|
7834
|
+
},
|
|
7835
|
+
});
|
|
7836
|
+
}
|
|
7837
|
+
}
|
|
7838
|
+
onClientSelect(event) {
|
|
7839
|
+
this.selectedClient = event;
|
|
7840
|
+
}
|
|
7841
|
+
ranges = {
|
|
7842
|
+
Today: [
|
|
7843
|
+
this.dayjs(),
|
|
7844
|
+
this.dayjs(),
|
|
7845
|
+
],
|
|
7846
|
+
'Yesterday': [this.dayjs().subtract(1, 'days'), this.dayjs().subtract(1, 'days')],
|
|
7847
|
+
'This Week': [this.dayjs().subtract(7, "days"), this.dayjs().subtract(1, "days")],
|
|
7848
|
+
'Last Week': [this.dayjs().subtract(14, 'days').startOf('days'), this.dayjs().subtract(8, 'days').endOf('days')],
|
|
7849
|
+
"This Month": [
|
|
7850
|
+
this.dayjs().subtract(30, "days"),
|
|
7851
|
+
this.dayjs().subtract(1, "days") // End date is Yesterday
|
|
7852
|
+
],
|
|
7853
|
+
'Last Month': [
|
|
7854
|
+
this.dayjs().subtract(1, 'month').startOf('month'),
|
|
7855
|
+
this.dayjs().subtract(1, 'month').endOf('month')
|
|
7856
|
+
]
|
|
7857
|
+
};
|
|
7858
|
+
onStartDateChange(event) {
|
|
7859
|
+
if (this.dayjs(event.startDate).isValid()) {
|
|
7860
|
+
this.isCustomDate = (m) => {
|
|
7861
|
+
const isValidDate = m > this.dayjs() || m > this.dayjs(event.startDate.add(90, 'days'));
|
|
7862
|
+
return isValidDate ? 'invalid-date' : false;
|
|
7863
|
+
};
|
|
7864
|
+
}
|
|
7865
|
+
}
|
|
7866
|
+
datechange(event) {
|
|
7867
|
+
if (event && event.startDate && event.endDate) {
|
|
7868
|
+
if (this.dayjs(event.startDate).isValid() &&
|
|
7869
|
+
this.dayjs(event.endDate).isValid()) {
|
|
7870
|
+
this.selectedDateRange.startDate = event.startDate;
|
|
7871
|
+
this.selectedDateRange.endDate = event.endDate;
|
|
7872
|
+
var datetime = {
|
|
7873
|
+
startDate: this.dayjs(event.startDate, "DD-MM-YYYY").format("YYYY-MM-DD"),
|
|
7874
|
+
endDate: this.dayjs(event.endDate, "DD-MM-YYYY").format("YYYY-MM-DD"),
|
|
7875
|
+
};
|
|
7876
|
+
this.selectedFilters.date = datetime;
|
|
7877
|
+
localStorage.setItem('header-filters', JSON.stringify(this.selectedFilters));
|
|
7878
|
+
}
|
|
7879
|
+
}
|
|
7880
|
+
else {
|
|
7881
|
+
const headerFilters = JSON.parse(localStorage.getItem("header-filters") || "{}");
|
|
7882
|
+
this.selectedDateRange.startDate = this.dayjs(headerFilters.date.startDate, "YYYY-MM-DD").format("DD-MM-YYYY");
|
|
7883
|
+
this.selectedDateRange.endDate = this.dayjs(headerFilters.date.endDate, "YYYY-MM-DD").format("DD-MM-YYYY");
|
|
7884
|
+
this.gs.dataRangeValue.next(headerFilters);
|
|
7885
|
+
}
|
|
7886
|
+
}
|
|
7887
|
+
Apply() {
|
|
7888
|
+
const headerFilters = JSON.parse(localStorage.getItem("header-filters") || "{}");
|
|
7889
|
+
this.selectedFilters = headerFilters;
|
|
7890
|
+
this.selectedFilters.store = this.selectedClient.storeId;
|
|
7891
|
+
this.gs.dataRangeValue.next(this.selectedFilters);
|
|
7892
|
+
localStorage.setItem('header-filters', JSON.stringify(this.selectedFilters));
|
|
7893
|
+
}
|
|
7894
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SingleStoredateComponent, deps: [{ token: AuthService }, { token: i1.GlobalStateService }, { token: i0.ChangeDetectorRef }, { token: i2.Router }], target: i0.ɵɵFactoryTarget.Component });
|
|
7895
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SingleStoredateComponent, selector: "lib-single-storedate", ngImport: i0, template: "<p>single-storedate works!</p>\r\n", styles: [".daterangepicker{display:block!important;top:153.85px!important;left:900px!important;right:0}.form-control{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600;line-height:20px;text-transform:capitalize}::ng-deep .applyBtn{display:none!important}:host::ng-deep .md-drppicker .btn{line-height:10px!important}:host::ng-deep .daterangepicker-input+.ngx-daterangepicker-material .applyBtn{display:none}:host::ng-deep .md-drppicker.drops-down-right.ltr.double.show-ranges.shown{top:65px!important;left:-470px!important;height:365px!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}.wrapper{min-width:200px}.btn-primary{line-height:18px!important}\n"] });
|
|
7896
|
+
}
|
|
7897
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SingleStoredateComponent, decorators: [{
|
|
7898
|
+
type: Component,
|
|
7899
|
+
args: [{ selector: 'lib-single-storedate', template: "<p>single-storedate works!</p>\r\n", styles: [".daterangepicker{display:block!important;top:153.85px!important;left:900px!important;right:0}.form-control{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600;line-height:20px;text-transform:capitalize}::ng-deep .applyBtn{display:none!important}:host::ng-deep .md-drppicker .btn{line-height:10px!important}:host::ng-deep .daterangepicker-input+.ngx-daterangepicker-material .applyBtn{display:none}:host::ng-deep .md-drppicker.drops-down-right.ltr.double.show-ranges.shown{top:65px!important;left:-470px!important;height:365px!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}.wrapper{min-width:200px}.btn-primary{line-height:18px!important}\n"] }]
|
|
7900
|
+
}], ctorParameters: () => [{ type: AuthService }, { type: i1.GlobalStateService }, { type: i0.ChangeDetectorRef }, { type: i2.Router }] });
|
|
7901
|
+
|
|
7902
|
+
class StoresingleComponent {
|
|
7903
|
+
auth;
|
|
7904
|
+
gs;
|
|
7905
|
+
cd;
|
|
7906
|
+
router;
|
|
7907
|
+
dayjs = dayjs;
|
|
7908
|
+
isCustomDate = (m) => {
|
|
7909
|
+
const isValidDate = m > this.dayjs();
|
|
7910
|
+
return isValidDate ? 'invalid-date' : false;
|
|
7911
|
+
};
|
|
7912
|
+
selectedDateRange = {};
|
|
7913
|
+
storeList = [];
|
|
7914
|
+
selectedClient;
|
|
7915
|
+
selectedFilters = {
|
|
7916
|
+
client: null,
|
|
7917
|
+
clientName: null,
|
|
7918
|
+
clients: [],
|
|
7919
|
+
store: null,
|
|
7920
|
+
stores: [],
|
|
7921
|
+
date: null,
|
|
7922
|
+
};
|
|
7923
|
+
constructor(auth, gs, cd, router) {
|
|
7924
|
+
this.auth = auth;
|
|
7925
|
+
this.gs = gs;
|
|
7926
|
+
this.cd = cd;
|
|
7927
|
+
this.router = router;
|
|
7928
|
+
}
|
|
7929
|
+
ngOnInit() {
|
|
7930
|
+
const headerFilters = JSON.parse(localStorage.getItem("header-filters") || "{}");
|
|
7931
|
+
this.cd.detectChanges();
|
|
7932
|
+
if (headerFilters?.client) {
|
|
7933
|
+
this.auth.getStores(headerFilters?.client).subscribe({
|
|
7934
|
+
next: (e) => {
|
|
7935
|
+
if (e) {
|
|
7936
|
+
this.storeList = e.data.result;
|
|
7937
|
+
const headerFilters = JSON.parse(localStorage.getItem("header-filters") || "{}");
|
|
7938
|
+
this.selectedDateRange = {
|
|
7939
|
+
startDate: this.dayjs(headerFilters?.date?.startDate, "DD-MM-YYYY").format("YYYY-MM-DD"),
|
|
7940
|
+
endDate: this.dayjs(headerFilters?.date?.endDate, "DD-MM-YYYY").format("YYYY-MM-DD")
|
|
7941
|
+
};
|
|
7942
|
+
if (headerFilters?.store) {
|
|
7943
|
+
this.storeList.find((obj) => {
|
|
7944
|
+
if (obj.storeId === headerFilters.store) {
|
|
7945
|
+
this.selectedClient = obj;
|
|
7946
|
+
}
|
|
7947
|
+
});
|
|
7948
|
+
this.selectedFilters.store = headerFilters.store;
|
|
7949
|
+
this.selectedFilters.client = headerFilters.client;
|
|
7950
|
+
this.selectedFilters.clientName = headerFilters.clientName;
|
|
7951
|
+
this.selectedFilters.clients = headerFilters.clients;
|
|
7952
|
+
this.selectedFilters.date = headerFilters.date;
|
|
7953
|
+
this.selectedDateRange = {
|
|
7954
|
+
startDate: this.dayjs(headerFilters.date.startDate, "YYYY-MM-DD").format("DD-MM-YYYY"),
|
|
7955
|
+
endDate: this.dayjs(headerFilters.date.endDate, "YYYY-MM-DD").format("DD-MM-YYYY"),
|
|
7956
|
+
};
|
|
7957
|
+
localStorage.setItem("header-filters", JSON.stringify(this.selectedFilters));
|
|
7958
|
+
this.gs.dataRangeValue.next(this.selectedFilters);
|
|
7959
|
+
this.cd.detectChanges();
|
|
7960
|
+
}
|
|
7961
|
+
else {
|
|
7962
|
+
this.selectedClient = this.storeList[0];
|
|
7963
|
+
this.selectedFilters.store = this.selectedClient.storeId;
|
|
7964
|
+
this.selectedFilters.client = headerFilters.client;
|
|
7965
|
+
this.selectedFilters.clientName = headerFilters.clientName;
|
|
7966
|
+
this.selectedFilters.clients = headerFilters.clients;
|
|
7967
|
+
this.selectedDateRange = {
|
|
7968
|
+
startDate: this.dayjs().format("DD-MM-YYYY"),
|
|
7969
|
+
endDate: this.dayjs().format("DD-MM-YYYY"),
|
|
7970
|
+
};
|
|
7971
|
+
var datetime = {
|
|
7972
|
+
startDate: this.dayjs().format("YYYY-MM-DD"),
|
|
7973
|
+
endDate: this.dayjs().format("YYYY-MM-DD"),
|
|
7974
|
+
};
|
|
7975
|
+
this.selectedFilters.date = datetime;
|
|
7976
|
+
localStorage.setItem("header-filters", JSON.stringify(this.selectedFilters));
|
|
7977
|
+
this.gs.dataRangeValue.next(this.selectedFilters);
|
|
7978
|
+
this.cd.detectChanges();
|
|
7979
|
+
}
|
|
7980
|
+
}
|
|
7981
|
+
},
|
|
7982
|
+
});
|
|
7983
|
+
}
|
|
7984
|
+
}
|
|
7985
|
+
onClientSelect(event) {
|
|
7986
|
+
this.selectedClient = event;
|
|
7987
|
+
this.selectedFilters.store = this.selectedClient.storeId;
|
|
7988
|
+
this.gs.dataRangeValue.next(this.selectedFilters);
|
|
7989
|
+
localStorage.setItem('header-filters', JSON.stringify(this.selectedFilters));
|
|
7990
|
+
}
|
|
7991
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: StoresingleComponent, deps: [{ token: AuthService }, { token: i1.GlobalStateService }, { token: i0.ChangeDetectorRef }, { token: i2.Router }], target: i0.ɵɵFactoryTarget.Component });
|
|
7992
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: StoresingleComponent, selector: "lib-storesingle", ngImport: i0, template: "\r\n<div class=\"w-200px\">\r\n<lib-select [items]=\"storeList\" [multi]=\"false\" [searchField]=\"'storeName'\" [disabled]=\"false\" [idField]=\"'storeId'\"\r\n(selected)=\"onClientSelect($event)\" [selectedValues]=\"[selectedClient]\"></lib-select>\r\n</div> ", styles: [".daterangepicker{display:block!important;top:153.85px!important;left:900px!important;right:0}.form-control{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600;line-height:20px;text-transform:capitalize}.wrapper{min-width:200px}.btn-primary{line-height:18px!important}\n"], dependencies: [{ kind: "component", type: CustomSelectComponent, selector: "lib-select", inputs: ["items", "searchField", "multi", "idField", "selectedValues", "disabled", "label"], outputs: ["selected"] }] });
|
|
7993
|
+
}
|
|
7994
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: StoresingleComponent, decorators: [{
|
|
7995
|
+
type: Component,
|
|
7996
|
+
args: [{ selector: 'lib-storesingle', template: "\r\n<div class=\"w-200px\">\r\n<lib-select [items]=\"storeList\" [multi]=\"false\" [searchField]=\"'storeName'\" [disabled]=\"false\" [idField]=\"'storeId'\"\r\n(selected)=\"onClientSelect($event)\" [selectedValues]=\"[selectedClient]\"></lib-select>\r\n</div> ", styles: [".daterangepicker{display:block!important;top:153.85px!important;left:900px!important;right:0}.form-control{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600;line-height:20px;text-transform:capitalize}.wrapper{min-width:200px}.btn-primary{line-height:18px!important}\n"] }]
|
|
7997
|
+
}], ctorParameters: () => [{ type: AuthService }, { type: i1.GlobalStateService }, { type: i0.ChangeDetectorRef }, { type: i2.Router }] });
|
|
7998
|
+
|
|
7023
7999
|
const routes$1 = [
|
|
7024
8000
|
{
|
|
7025
8001
|
path: '',
|
|
@@ -7057,7 +8033,10 @@ class LayoutModule {
|
|
|
7057
8033
|
NotificationsInnerComponent,
|
|
7058
8034
|
CsmAssignConfirmationComponent,
|
|
7059
8035
|
TrafficHeaderComponent,
|
|
7060
|
-
TraxHeaderComponent
|
|
8036
|
+
TraxHeaderComponent,
|
|
8037
|
+
SingleStoredateComponent,
|
|
8038
|
+
StoresingleComponent,
|
|
8039
|
+
TraxWithoutdateComponent], imports: [CommonModule, i2.RouterModule, TranslationModule,
|
|
7061
8040
|
InlineSVGModule,
|
|
7062
8041
|
NgbDropdownModule,
|
|
7063
8042
|
NgbProgressbarModule,
|
|
@@ -7121,7 +8100,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
7121
8100
|
NotificationsInnerComponent,
|
|
7122
8101
|
CsmAssignConfirmationComponent,
|
|
7123
8102
|
TrafficHeaderComponent,
|
|
7124
|
-
TraxHeaderComponent
|
|
8103
|
+
TraxHeaderComponent,
|
|
8104
|
+
SingleStoredateComponent,
|
|
8105
|
+
StoresingleComponent,
|
|
8106
|
+
TraxWithoutdateComponent
|
|
7125
8107
|
],
|
|
7126
8108
|
imports: [
|
|
7127
8109
|
CommonModule,
|