tango-app-ui-manage-settings 3.0.60-dev → 3.0.61-dev
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.
|
@@ -5267,6 +5267,7 @@ class ActivityLogsComponent {
|
|
|
5267
5267
|
apiService;
|
|
5268
5268
|
cd;
|
|
5269
5269
|
dayjs = dayjs;
|
|
5270
|
+
filterByStatus;
|
|
5270
5271
|
onClick(event) {
|
|
5271
5272
|
const target = event.target;
|
|
5272
5273
|
if (!target.closest('.dropdown')) {
|
|
@@ -5328,6 +5329,37 @@ class ActivityLogsComponent {
|
|
|
5328
5329
|
isChecked: true
|
|
5329
5330
|
},
|
|
5330
5331
|
];
|
|
5332
|
+
dataObject = [
|
|
5333
|
+
{ Description: 'Status Logs', Issues: [{
|
|
5334
|
+
text: 'Brand details',
|
|
5335
|
+
id: 'brandDetails',
|
|
5336
|
+
},
|
|
5337
|
+
{
|
|
5338
|
+
text: 'Configuration',
|
|
5339
|
+
id: 'configuration',
|
|
5340
|
+
},
|
|
5341
|
+
{
|
|
5342
|
+
text: 'Documents',
|
|
5343
|
+
id: 'documents',
|
|
5344
|
+
},
|
|
5345
|
+
{
|
|
5346
|
+
text: 'Stores',
|
|
5347
|
+
id: 'stores',
|
|
5348
|
+
},
|
|
5349
|
+
{
|
|
5350
|
+
text: 'Groups',
|
|
5351
|
+
id: 'groups',
|
|
5352
|
+
},
|
|
5353
|
+
{
|
|
5354
|
+
text: 'Users',
|
|
5355
|
+
id: 'users',
|
|
5356
|
+
},
|
|
5357
|
+
{
|
|
5358
|
+
text: 'Subscription',
|
|
5359
|
+
id: 'subscription'
|
|
5360
|
+
},
|
|
5361
|
+
] }
|
|
5362
|
+
];
|
|
5331
5363
|
constructor(apiService, cd) {
|
|
5332
5364
|
this.apiService = apiService;
|
|
5333
5365
|
this.cd = cd;
|
|
@@ -5348,7 +5380,8 @@ class ActivityLogsComponent {
|
|
|
5348
5380
|
let filters = {
|
|
5349
5381
|
limit: this.pageSize,
|
|
5350
5382
|
offset: this.currentPage,
|
|
5351
|
-
clientId: this.clientId
|
|
5383
|
+
clientId: this.clientId,
|
|
5384
|
+
logTypeFilters: this.filterByStatus,
|
|
5352
5385
|
};
|
|
5353
5386
|
if (this.filterStartDate) {
|
|
5354
5387
|
filters.startDate = this.filterStartDate;
|
|
@@ -5356,9 +5389,9 @@ class ActivityLogsComponent {
|
|
|
5356
5389
|
if (this.filterEndDate) {
|
|
5357
5390
|
filters.endDate = this.filterEndDate;
|
|
5358
5391
|
}
|
|
5359
|
-
if
|
|
5360
|
-
|
|
5361
|
-
}
|
|
5392
|
+
// if(this.getCheckedIds(this.filters)?.length){
|
|
5393
|
+
// filters.logTypeFilters = this.getCheckedIds(this.filters)
|
|
5394
|
+
// }
|
|
5362
5395
|
this.apiService.getActivityLogs(filters).subscribe({
|
|
5363
5396
|
next: (e) => {
|
|
5364
5397
|
this.pageState$.next('loaded');
|
|
@@ -5441,12 +5474,35 @@ class ActivityLogsComponent {
|
|
|
5441
5474
|
this.showFilters = false;
|
|
5442
5475
|
this.getActivityLogs();
|
|
5443
5476
|
}
|
|
5477
|
+
applyFilters(event) {
|
|
5478
|
+
if (event?.length) {
|
|
5479
|
+
event.forEach((element) => {
|
|
5480
|
+
if (element.Description === "Status Logs") {
|
|
5481
|
+
this.filterByStatus = element.Issues.map((val) => val?.id);
|
|
5482
|
+
}
|
|
5483
|
+
});
|
|
5484
|
+
}
|
|
5485
|
+
this.currentPage = 1;
|
|
5486
|
+
let filters = {
|
|
5487
|
+
limit: this.pageSize,
|
|
5488
|
+
offset: this.currentPage,
|
|
5489
|
+
clientId: this.clientId,
|
|
5490
|
+
logTypeFilters: this.filterByStatus,
|
|
5491
|
+
};
|
|
5492
|
+
if (this.filterStartDate) {
|
|
5493
|
+
filters.startDate = this.filterStartDate;
|
|
5494
|
+
}
|
|
5495
|
+
if (this.filterEndDate) {
|
|
5496
|
+
filters.endDate = this.filterEndDate;
|
|
5497
|
+
}
|
|
5498
|
+
this.getActivityLogs();
|
|
5499
|
+
}
|
|
5444
5500
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: ActivityLogsComponent, deps: [{ token: ClientApiService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
5445
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: ActivityLogsComponent, selector: "lib-activity-logs", host: { listeners: { "document:click": "onClick($event)" } }, ngImport: i0, template: "<div class=\"activity-card\">\r\n <ng-container *ngIf=\"pageState$ | async as pageState\" >\r\n <ng-container [ngSwitch]=\"pageState\" >\r\n <ng-container *ngSwitchCase=\"'loaded'\" >\r\n <div class=\"d-flex justify-content-between align-items-center mb-10\">\r\n <div class=\"header\">Activity Logs</div>\r\n <div class=\"d-flex align-items-center\">\r\n <div class=\"d-flex align-items-center position-relative me-5\">\r\n <input class=\"fx-date-range form-control ps-14\" style=\"min-width: 260px !important;\" type=\"text\" matInput ngxDaterangepickerMd\r\n [drops]=\"'down'\" [opens]=\"'right'\" [ranges]=\"ranges\" [showCustomRangeLabel]=\"true\"\r\n [alwaysShowCalendars]=\"false\" [keepCalendarOpeningWithRange]=\"true\" [showCancel]=\"true\"\r\n autocomplete=\"off\" [(ngModel)]=\"selectedDateRange\"\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\" />\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 </div>\r\n <div>\r\n <div class=\"multi-select-dropdown\" >\r\n <button (click)=\"$event.stopPropagation();showFilters = !showFilters;\" class=\"btn btn-outline\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M5 10H15M2.5 5H17.5M7.5 15H12.5\" stroke=\"#344054\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n <span class=\" ms-3\">{{getCheckedIds(filters).length}} selected</span>\r\n </button> \r\n <div *ngIf=\"showFilters\" class=\"input-container dropdown\" >\r\n <div>\r\n <ul>\r\n <li >\r\n <div class=\"form-check\">\r\n <input (change)=\"onSelectAll($event)\" [checked]=\"checkIfAllSelected()\" class=\"form-check-input me-3\" type=\"checkbox\"\r\n id=\"selectAll\">\r\n <label class=\"form-check-label\" for=\"selectAll\">\r\n All Logs\r\n </label>\r\n </div>\r\n </li>\r\n <li *ngFor=\"let filter of filters\" >\r\n <div class=\"form-check\">\r\n <input class=\"form-check-input me-3\" type=\"checkbox\" [(ngModel)]=\"filter.isChecked\" [id]=\"filter.id\">\r\n <label class=\"form-check-label\" [for]=\"filter.id\" >\r\n {{filter.label}}\r\n </label>\r\n </div>\r\n </li>\r\n \r\n </ul> \r\n </div>\r\n <div >\r\n <div class=\" w-100 footer-seperator\"></div>\r\n <div class=\"d-flex justify-content-end m-2\">\r\n <a type=\"button\" class=\"btn btn-outline me-4\" (click)=\"showFilters = false\" >Cancel</a>\r\n <a type=\"submit\" class=\"btn btn-primary px-4 \" (click)=\"applyFilter()\" >Apply</a>\r\n </div>\r\n </div>\r\n \r\n </div> \r\n </div>\r\n \r\n </div>\r\n </div>\r\n </div>\r\n \r\n <ng-container *ngIf=\"logList?.length\" >\r\n <div *ngFor=\"let item of logList\" class=\"log-card mb-8\">\r\n <div class=\"d-flex me-10\">\r\n <div class=\"line me-4\"></div>\r\n <div class=\"d-flex flex-column\">\r\n <div class=\"d-flex align-items-center mb-2\">\r\n <div class=\"header me-4\">{{camelCaseToWords(item?.logSubType)}}</div>\r\n <div class=\"time\">{{formatDate(item?.date)}}</div>\r\n </div>\r\n <div class=\"sub\">{{arrayToString(item?.changes)}} <span *ngIf=\"item?.eventType\">{{item?.eventType + 'd'}}</span></div>\r\n <div class=\"sub\">By {{item?.userName}} - {{item?.email}}</div>\r\n </div>\r\n \r\n </div>\r\n <div class=\"chip\">\r\n {{camelCaseToWords(item?.logType)}}\r\n </div>\r\n </div>\r\n \r\n <div *ngIf=\"logList?.length\" class=\"my-3\">\r\n <lib-pagination [itemsPerPage]=\"itemsPerPage\" [currentPage]=\"currentPage\" [totalItems]=\"totalItems\" [paginationSizes]=\"paginationSizes\" [pageSize]=\"pageSize\"\r\n (pageChange)=\"onPageChange($event)\" (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n </div> \r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"!logList?.length\">\r\n <div class=\"d-flex align-items-center justify-content-center\" >\r\n <img width=\"300px\" src=\"./assets/tango/Icons/Nodata.svg\" alt=\"\"> \r\n </div>\r\n </ng-container>\r\n \r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'loading'\" >\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n</div>\r\n\r\n", styles: [".activity-card{border-radius:8px;background:var(--White, #FFF);padding:24px}.log-card{display:flex;justify-content:space-between}.log-card .line{border-radius:2px;background:var(--Primary-600, #00A3FF);min-width:2px;height:100%}.log-card .header{color:var(--Gray-700, #344054);font-size:14px;font-weight:600;line-height:20px}.log-card .time{color:var(--Gray-500, #667085);font-size:12px;font-weight:500;line-height:18px}.log-card .sub{color:var(--Gray-500, #667085);font-size:14px;font-weight:400;line-height:24px}.log-card .chip{padding:2px 10px;border-radius:16px;background:var(--Primary-50, #EAF8FF);color:var(--Primary-700, #009BF3);font-size:14px;font-weight:500;line-height:20px;height:100%;white-space:nowrap}.header{color:var(--Gray-900, #101828);font-size:18px;font-weight:600;line-height:28px}: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:400px!important}:host::ng-deep .md-drppicker .btn{border-radius:8px!important;border:1px solid var(--Primary-600, #00A3FF)!important;background:var(--Primary-600, #00A3FF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--White, #FFF)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}:host::ng-deep .md-drppicker .ranges ul li button{padding:12px 16px;width:160px;color:var(--Gray-700, #344054);font-size:14px;font-weight:400;line-height:20px;background:none;border:none;text-align:left;cursor:pointer}:host::ng-deep .md-drppicker td.active,:host::ng-deep .md-drppicker td.active:hover{background-color:#029cf4!important;border-radius:20px!important;color:var(--White, #FFF)!important;text-align:center!important;font-size:14px!important;font-weight:500!important;line-height:20px}:host::ng-deep .md-drppicker.ltr .ranges{float:left;margin-top:10px!important}:host::ng-deep .md-drppicker td.in-range{background:var(--Primary-50, #EAF8FF)}:host::ng-deep .md-drppicker .ranges ul li button.active{background:var(--Primary-50, #EAF8FF)!important;border-radius:8px!important;color:var(--Primary-700, #009BF3);font-size:14px!important;font-weight:500!important;line-height:20px!important}:host::ng-deep table th,:host::ng-deep table td{width:40px!important;height:40px!important;padding:10px 8px!important}:host::ng-deep .md-drppicker td.available.prev,:host::ng-deep .md-drppicker th.available.prev{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep .md-drppicker td.available.next,:host::ng-deep .md-drppicker th.available.next{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep table th{border-bottom:0px solid var(--Gray-200, #EAECF0)!important;background:transparent!important;color:var(--Gray-700, #344054)!important;text-align:center;font-size:16px!important;font-weight:500!important;line-height:24px}:host::ng-deep .md-drppicker 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}: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}.multi-select-dropdown{position:relative}.multi-select-dropdown .input-container{position:absolute;width:212px;right:0;z-index:1;margin-top:5px;background-color:#fff;min-height:200px;border-radius:8px;border:1px solid var(--Gray-100, #F2F4F7);background:var(--White, #FFF);box-shadow:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808;display:flex;flex-direction:column;justify-content:space-between}.multi-select-dropdown .input-container ul{margin:0;padding:0}.multi-select-dropdown .input-container ul li{list-style:none;padding:10px 16px}.multi-select-dropdown .input-container .form-check{display:flex;align-items:center}.multi-select-dropdown .input-container .form-check-input{height:16px;width:16px;border-radius:4px;border:1px solid var(--Primary-600, #00A3FF)}.multi-select-dropdown .input-container .form-check-input:checked{--bs-form-check-bg-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAICAYAAADA+m62AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAB4SURBVHgBhY7NDUBQEIRnqcJNKXTg6qYTStCB+Isy6IQSNMDa9SLh5eWZZPcw+81kCX/quABhD73QyKXsGoyIvNCJSto2hEhNtY4N9cwYeMXEsVqB1GaSauRQOpty2tSmO3FgloAmF5nEhgyoesMO6CuFW66fn2xdFyA3ZzcRLrMAAAAASUVORK5CYII=);background-color:#eaf8ff;border-color:#00a3ff}.multi-select-dropdown .input-container .form-check-label{color:var(--Gray-700, #344054);font-family:Inter;font-size:14px;font-style:normal;font-weight:500;line-height:20px}.multi-select-dropdown .input-container .footer-seperator{border-top:1px solid #EAECF0}.multi-select-dropdown .input-container .btn-primary{padding:10px 16px!important;font-size:12px!important;font-weight:600!important}.multi-select-dropdown .input-container .btn-outline{padding:10px 16px;font-size:12px;font-weight:600}\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: "directive", type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4$2.PaginationComponent, selector: "lib-pagination", inputs: ["collection", "itemsPerPage", "currentPage", "totalItems", "directionLinks", "pageSize", "paginationSizes"], outputs: ["pageChange", "pageSizeChange"] }, { kind: "directive", type: i5.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" }] });
|
|
5501
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: ActivityLogsComponent, selector: "lib-activity-logs", host: { listeners: { "document:click": "onClick($event)" } }, ngImport: i0, template: "<div class=\"activity-card\">\r\n <ng-container *ngIf=\"pageState$ | async as pageState\" >\r\n <ng-container [ngSwitch]=\"pageState\" >\r\n <ng-container *ngSwitchCase=\"'loaded'\" >\r\n <div class=\"d-flex justify-content-between align-items-center mb-10\">\r\n <div class=\"header\">Activity Logs</div>\r\n <div class=\"d-flex align-items-center\">\r\n <div class=\"d-flex align-items-center position-relative me-5\">\r\n <input class=\"fx-date-range form-control ps-14\" style=\"min-width: 260px !important;\" type=\"text\" matInput ngxDaterangepickerMd\r\n [drops]=\"'down'\" [opens]=\"'right'\" [ranges]=\"ranges\" [showCustomRangeLabel]=\"true\"\r\n [alwaysShowCalendars]=\"false\" [keepCalendarOpeningWithRange]=\"true\" [showCancel]=\"true\"\r\n autocomplete=\"off\" [(ngModel)]=\"selectedDateRange\"\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\" />\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 </div>\r\n <lib-filters [dataObject]=\"dataObject\" (appliedFilters)=\"applyFilters($event)\"></lib-filters>\r\n\r\n <!-- <div>\r\n <div class=\"multi-select-dropdown\" >\r\n <button (click)=\"$event.stopPropagation();showFilters = !showFilters;\" class=\"btn btn-outline\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M5 10H15M2.5 5H17.5M7.5 15H12.5\" stroke=\"#344054\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n <span class=\" ms-3\">{{getCheckedIds(filters).length}} selected</span>\r\n </button> \r\n <div *ngIf=\"showFilters\" class=\"input-container dropdown\" >\r\n <div>\r\n <ul>\r\n <li >\r\n <div class=\"form-check\">\r\n <input (change)=\"onSelectAll($event)\" [checked]=\"checkIfAllSelected()\" class=\"form-check-input me-3\" type=\"checkbox\"\r\n id=\"selectAll\">\r\n <label class=\"form-check-label\" for=\"selectAll\">\r\n All Logs\r\n </label>\r\n </div>\r\n </li>\r\n <li *ngFor=\"let filter of filters\" >\r\n <div class=\"form-check\">\r\n <input class=\"form-check-input me-3\" type=\"checkbox\" [(ngModel)]=\"filter.isChecked\" [id]=\"filter.id\">\r\n <label class=\"form-check-label\" [for]=\"filter.id\" >\r\n {{filter.label}}\r\n </label>\r\n </div>\r\n </li>\r\n \r\n </ul> \r\n </div>\r\n <div >\r\n <div class=\" w-100 footer-seperator\"></div>\r\n <div class=\"d-flex justify-content-end m-2\">\r\n <a type=\"button\" class=\"btn btn-outline me-4\" (click)=\"showFilters = false\" >Cancel</a>\r\n <a type=\"submit\" class=\"btn btn-primary px-4 \" (click)=\"applyFilter()\" >Apply</a>\r\n </div>\r\n </div>\r\n \r\n </div> \r\n </div>\r\n \r\n </div> -->\r\n </div>\r\n </div>\r\n \r\n <ng-container *ngIf=\"logList?.length\" >\r\n <div *ngFor=\"let item of logList\" class=\"log-card mb-8\">\r\n <div class=\"d-flex me-10\">\r\n <div class=\"line me-4\"></div>\r\n <div class=\"d-flex flex-column\">\r\n <div class=\"d-flex align-items-center mb-2\">\r\n <div class=\"header me-4\">{{camelCaseToWords(item?.logSubType)}}</div>\r\n <div class=\"time\">{{formatDate(item?.date)}}</div>\r\n </div>\r\n <div class=\"sub\">{{arrayToString(item?.changes)}} <span *ngIf=\"item?.eventType\">{{item?.eventType + 'd'}}</span></div>\r\n <div class=\"sub\">By {{item?.userName}} - {{item?.email}}</div>\r\n </div>\r\n \r\n </div>\r\n <div class=\"chip\">\r\n {{camelCaseToWords(item?.logType)}}\r\n </div>\r\n </div>\r\n \r\n <div *ngIf=\"logList?.length\" class=\"my-3\">\r\n <lib-pagination [itemsPerPage]=\"itemsPerPage\" [currentPage]=\"currentPage\" [totalItems]=\"totalItems\" [paginationSizes]=\"paginationSizes\" [pageSize]=\"pageSize\"\r\n (pageChange)=\"onPageChange($event)\" (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n </div> \r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"!logList?.length\">\r\n <div class=\"d-flex align-items-center justify-content-center\" >\r\n <img width=\"300px\" src=\"./assets/tango/Icons/Nodata.svg\" alt=\"\"> \r\n </div>\r\n </ng-container>\r\n \r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'loading'\" >\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n</div>\r\n\r\n", styles: [".activity-card{border-radius:8px;background:var(--White, #FFF);padding:24px}.log-card{display:flex;justify-content:space-between}.log-card .line{border-radius:2px;background:var(--Primary-600, #00A3FF);min-width:2px;height:100%}.log-card .header{color:var(--Gray-700, #344054);font-size:14px;font-weight:600;line-height:20px}.log-card .time{color:var(--Gray-500, #667085);font-size:12px;font-weight:500;line-height:18px}.log-card .sub{color:var(--Gray-500, #667085);font-size:14px;font-weight:400;line-height:24px}.log-card .chip{padding:2px 10px;border-radius:16px;background:var(--Primary-50, #EAF8FF);color:var(--Primary-700, #009BF3);font-size:14px;font-weight:500;line-height:20px;height:100%;white-space:nowrap}.header{color:var(--Gray-900, #101828);font-size:18px;font-weight:600;line-height:28px}: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:400px!important}:host::ng-deep .md-drppicker .btn{border-radius:8px!important;border:1px solid var(--Primary-600, #00A3FF)!important;background:var(--Primary-600, #00A3FF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--White, #FFF)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}:host::ng-deep .md-drppicker .ranges ul li button{padding:12px 16px;width:160px;color:var(--Gray-700, #344054);font-size:14px;font-weight:400;line-height:20px;background:none;border:none;text-align:left;cursor:pointer}:host::ng-deep .md-drppicker td.active,:host::ng-deep .md-drppicker td.active:hover{background-color:#029cf4!important;border-radius:20px!important;color:var(--White, #FFF)!important;text-align:center!important;font-size:14px!important;font-weight:500!important;line-height:20px}:host::ng-deep .md-drppicker.ltr .ranges{float:left;margin-top:10px!important}:host::ng-deep .md-drppicker td.in-range{background:var(--Primary-50, #EAF8FF)}:host::ng-deep .md-drppicker .ranges ul li button.active{background:var(--Primary-50, #EAF8FF)!important;border-radius:8px!important;color:var(--Primary-700, #009BF3);font-size:14px!important;font-weight:500!important;line-height:20px!important}:host::ng-deep table th,:host::ng-deep table td{width:40px!important;height:40px!important;padding:10px 8px!important}:host::ng-deep .md-drppicker td.available.prev,:host::ng-deep .md-drppicker th.available.prev{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep .md-drppicker td.available.next,:host::ng-deep .md-drppicker th.available.next{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep table th{border-bottom:0px solid var(--Gray-200, #EAECF0)!important;background:transparent!important;color:var(--Gray-700, #344054)!important;text-align:center;font-size:16px!important;font-weight:500!important;line-height:24px}:host::ng-deep .md-drppicker 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}: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}.multi-select-dropdown{position:relative}.multi-select-dropdown .input-container{position:absolute;width:212px;right:0;z-index:1;margin-top:5px;background-color:#fff;min-height:200px;border-radius:8px;border:1px solid var(--Gray-100, #F2F4F7);background:var(--White, #FFF);box-shadow:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808;display:flex;flex-direction:column;justify-content:space-between}.multi-select-dropdown .input-container ul{margin:0;padding:0}.multi-select-dropdown .input-container ul li{list-style:none;padding:10px 16px}.multi-select-dropdown .input-container .form-check{display:flex;align-items:center}.multi-select-dropdown .input-container .form-check-input{height:16px;width:16px;border-radius:4px;border:1px solid var(--Primary-600, #00A3FF)}.multi-select-dropdown .input-container .form-check-input:checked{--bs-form-check-bg-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAICAYAAADA+m62AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAB4SURBVHgBhY7NDUBQEIRnqcJNKXTg6qYTStCB+Isy6IQSNMDa9SLh5eWZZPcw+81kCX/quABhD73QyKXsGoyIvNCJSto2hEhNtY4N9cwYeMXEsVqB1GaSauRQOpty2tSmO3FgloAmF5nEhgyoesMO6CuFW66fn2xdFyA3ZzcRLrMAAAAASUVORK5CYII=);background-color:#eaf8ff;border-color:#00a3ff}.multi-select-dropdown .input-container .form-check-label{color:var(--Gray-700, #344054);font-family:Inter;font-size:14px;font-style:normal;font-weight:500;line-height:20px}.multi-select-dropdown .input-container .footer-seperator{border-top:1px solid #EAECF0}.multi-select-dropdown .input-container .btn-primary{padding:10px 16px!important;font-size:12px!important;font-weight:600!important}.multi-select-dropdown .input-container .btn-outline{padding:10px 16px;font-size:12px;font-weight:600}\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: "directive", type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4$2.PaginationComponent, selector: "lib-pagination", inputs: ["collection", "itemsPerPage", "currentPage", "totalItems", "directionLinks", "pageSize", "paginationSizes"], outputs: ["pageChange", "pageSizeChange"] }, { kind: "component", type: i4$2.FiltersComponent, selector: "lib-filters", inputs: ["dataObject"], outputs: ["appliedFilters"] }, { kind: "directive", type: i5.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" }] });
|
|
5446
5502
|
}
|
|
5447
5503
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: ActivityLogsComponent, decorators: [{
|
|
5448
5504
|
type: Component,
|
|
5449
|
-
args: [{ selector: 'lib-activity-logs', template: "<div class=\"activity-card\">\r\n <ng-container *ngIf=\"pageState$ | async as pageState\" >\r\n <ng-container [ngSwitch]=\"pageState\" >\r\n <ng-container *ngSwitchCase=\"'loaded'\" >\r\n <div class=\"d-flex justify-content-between align-items-center mb-10\">\r\n <div class=\"header\">Activity Logs</div>\r\n <div class=\"d-flex align-items-center\">\r\n <div class=\"d-flex align-items-center position-relative me-5\">\r\n <input class=\"fx-date-range form-control ps-14\" style=\"min-width: 260px !important;\" type=\"text\" matInput ngxDaterangepickerMd\r\n [drops]=\"'down'\" [opens]=\"'right'\" [ranges]=\"ranges\" [showCustomRangeLabel]=\"true\"\r\n [alwaysShowCalendars]=\"false\" [keepCalendarOpeningWithRange]=\"true\" [showCancel]=\"true\"\r\n autocomplete=\"off\" [(ngModel)]=\"selectedDateRange\"\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\" />\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 </div>\r\n <div>\r\n <div class=\"multi-select-dropdown\" >\r\n <button (click)=\"$event.stopPropagation();showFilters = !showFilters;\" class=\"btn btn-outline\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M5 10H15M2.5 5H17.5M7.5 15H12.5\" stroke=\"#344054\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n <span class=\" ms-3\">{{getCheckedIds(filters).length}} selected</span>\r\n </button> \r\n <div *ngIf=\"showFilters\" class=\"input-container dropdown\" >\r\n <div>\r\n <ul>\r\n <li >\r\n <div class=\"form-check\">\r\n <input (change)=\"onSelectAll($event)\" [checked]=\"checkIfAllSelected()\" class=\"form-check-input me-3\" type=\"checkbox\"\r\n id=\"selectAll\">\r\n <label class=\"form-check-label\" for=\"selectAll\">\r\n All Logs\r\n </label>\r\n </div>\r\n </li>\r\n <li *ngFor=\"let filter of filters\" >\r\n <div class=\"form-check\">\r\n <input class=\"form-check-input me-3\" type=\"checkbox\" [(ngModel)]=\"filter.isChecked\" [id]=\"filter.id\">\r\n <label class=\"form-check-label\" [for]=\"filter.id\" >\r\n {{filter.label}}\r\n </label>\r\n </div>\r\n </li>\r\n \r\n </ul> \r\n </div>\r\n <div >\r\n <div class=\" w-100 footer-seperator\"></div>\r\n <div class=\"d-flex justify-content-end m-2\">\r\n <a type=\"button\" class=\"btn btn-outline me-4\" (click)=\"showFilters = false\" >Cancel</a>\r\n <a type=\"submit\" class=\"btn btn-primary px-4 \" (click)=\"applyFilter()\" >Apply</a>\r\n </div>\r\n </div>\r\n \r\n </div> \r\n </div>\r\n \r\n </div>\r\n </div>\r\n </div>\r\n \r\n <ng-container *ngIf=\"logList?.length\" >\r\n <div *ngFor=\"let item of logList\" class=\"log-card mb-8\">\r\n <div class=\"d-flex me-10\">\r\n <div class=\"line me-4\"></div>\r\n <div class=\"d-flex flex-column\">\r\n <div class=\"d-flex align-items-center mb-2\">\r\n <div class=\"header me-4\">{{camelCaseToWords(item?.logSubType)}}</div>\r\n <div class=\"time\">{{formatDate(item?.date)}}</div>\r\n </div>\r\n <div class=\"sub\">{{arrayToString(item?.changes)}} <span *ngIf=\"item?.eventType\">{{item?.eventType + 'd'}}</span></div>\r\n <div class=\"sub\">By {{item?.userName}} - {{item?.email}}</div>\r\n </div>\r\n \r\n </div>\r\n <div class=\"chip\">\r\n {{camelCaseToWords(item?.logType)}}\r\n </div>\r\n </div>\r\n \r\n <div *ngIf=\"logList?.length\" class=\"my-3\">\r\n <lib-pagination [itemsPerPage]=\"itemsPerPage\" [currentPage]=\"currentPage\" [totalItems]=\"totalItems\" [paginationSizes]=\"paginationSizes\" [pageSize]=\"pageSize\"\r\n (pageChange)=\"onPageChange($event)\" (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n </div> \r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"!logList?.length\">\r\n <div class=\"d-flex align-items-center justify-content-center\" >\r\n <img width=\"300px\" src=\"./assets/tango/Icons/Nodata.svg\" alt=\"\"> \r\n </div>\r\n </ng-container>\r\n \r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'loading'\" >\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n</div>\r\n\r\n", styles: [".activity-card{border-radius:8px;background:var(--White, #FFF);padding:24px}.log-card{display:flex;justify-content:space-between}.log-card .line{border-radius:2px;background:var(--Primary-600, #00A3FF);min-width:2px;height:100%}.log-card .header{color:var(--Gray-700, #344054);font-size:14px;font-weight:600;line-height:20px}.log-card .time{color:var(--Gray-500, #667085);font-size:12px;font-weight:500;line-height:18px}.log-card .sub{color:var(--Gray-500, #667085);font-size:14px;font-weight:400;line-height:24px}.log-card .chip{padding:2px 10px;border-radius:16px;background:var(--Primary-50, #EAF8FF);color:var(--Primary-700, #009BF3);font-size:14px;font-weight:500;line-height:20px;height:100%;white-space:nowrap}.header{color:var(--Gray-900, #101828);font-size:18px;font-weight:600;line-height:28px}: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:400px!important}:host::ng-deep .md-drppicker .btn{border-radius:8px!important;border:1px solid var(--Primary-600, #00A3FF)!important;background:var(--Primary-600, #00A3FF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--White, #FFF)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}:host::ng-deep .md-drppicker .ranges ul li button{padding:12px 16px;width:160px;color:var(--Gray-700, #344054);font-size:14px;font-weight:400;line-height:20px;background:none;border:none;text-align:left;cursor:pointer}:host::ng-deep .md-drppicker td.active,:host::ng-deep .md-drppicker td.active:hover{background-color:#029cf4!important;border-radius:20px!important;color:var(--White, #FFF)!important;text-align:center!important;font-size:14px!important;font-weight:500!important;line-height:20px}:host::ng-deep .md-drppicker.ltr .ranges{float:left;margin-top:10px!important}:host::ng-deep .md-drppicker td.in-range{background:var(--Primary-50, #EAF8FF)}:host::ng-deep .md-drppicker .ranges ul li button.active{background:var(--Primary-50, #EAF8FF)!important;border-radius:8px!important;color:var(--Primary-700, #009BF3);font-size:14px!important;font-weight:500!important;line-height:20px!important}:host::ng-deep table th,:host::ng-deep table td{width:40px!important;height:40px!important;padding:10px 8px!important}:host::ng-deep .md-drppicker td.available.prev,:host::ng-deep .md-drppicker th.available.prev{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep .md-drppicker td.available.next,:host::ng-deep .md-drppicker th.available.next{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep table th{border-bottom:0px solid var(--Gray-200, #EAECF0)!important;background:transparent!important;color:var(--Gray-700, #344054)!important;text-align:center;font-size:16px!important;font-weight:500!important;line-height:24px}:host::ng-deep .md-drppicker 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}: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}.multi-select-dropdown{position:relative}.multi-select-dropdown .input-container{position:absolute;width:212px;right:0;z-index:1;margin-top:5px;background-color:#fff;min-height:200px;border-radius:8px;border:1px solid var(--Gray-100, #F2F4F7);background:var(--White, #FFF);box-shadow:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808;display:flex;flex-direction:column;justify-content:space-between}.multi-select-dropdown .input-container ul{margin:0;padding:0}.multi-select-dropdown .input-container ul li{list-style:none;padding:10px 16px}.multi-select-dropdown .input-container .form-check{display:flex;align-items:center}.multi-select-dropdown .input-container .form-check-input{height:16px;width:16px;border-radius:4px;border:1px solid var(--Primary-600, #00A3FF)}.multi-select-dropdown .input-container .form-check-input:checked{--bs-form-check-bg-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAICAYAAADA+m62AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAB4SURBVHgBhY7NDUBQEIRnqcJNKXTg6qYTStCB+Isy6IQSNMDa9SLh5eWZZPcw+81kCX/quABhD73QyKXsGoyIvNCJSto2hEhNtY4N9cwYeMXEsVqB1GaSauRQOpty2tSmO3FgloAmF5nEhgyoesMO6CuFW66fn2xdFyA3ZzcRLrMAAAAASUVORK5CYII=);background-color:#eaf8ff;border-color:#00a3ff}.multi-select-dropdown .input-container .form-check-label{color:var(--Gray-700, #344054);font-family:Inter;font-size:14px;font-style:normal;font-weight:500;line-height:20px}.multi-select-dropdown .input-container .footer-seperator{border-top:1px solid #EAECF0}.multi-select-dropdown .input-container .btn-primary{padding:10px 16px!important;font-size:12px!important;font-weight:600!important}.multi-select-dropdown .input-container .btn-outline{padding:10px 16px;font-size:12px;font-weight:600}\n"] }]
|
|
5505
|
+
args: [{ selector: 'lib-activity-logs', template: "<div class=\"activity-card\">\r\n <ng-container *ngIf=\"pageState$ | async as pageState\" >\r\n <ng-container [ngSwitch]=\"pageState\" >\r\n <ng-container *ngSwitchCase=\"'loaded'\" >\r\n <div class=\"d-flex justify-content-between align-items-center mb-10\">\r\n <div class=\"header\">Activity Logs</div>\r\n <div class=\"d-flex align-items-center\">\r\n <div class=\"d-flex align-items-center position-relative me-5\">\r\n <input class=\"fx-date-range form-control ps-14\" style=\"min-width: 260px !important;\" type=\"text\" matInput ngxDaterangepickerMd\r\n [drops]=\"'down'\" [opens]=\"'right'\" [ranges]=\"ranges\" [showCustomRangeLabel]=\"true\"\r\n [alwaysShowCalendars]=\"false\" [keepCalendarOpeningWithRange]=\"true\" [showCancel]=\"true\"\r\n autocomplete=\"off\" [(ngModel)]=\"selectedDateRange\"\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\" />\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 </div>\r\n <lib-filters [dataObject]=\"dataObject\" (appliedFilters)=\"applyFilters($event)\"></lib-filters>\r\n\r\n <!-- <div>\r\n <div class=\"multi-select-dropdown\" >\r\n <button (click)=\"$event.stopPropagation();showFilters = !showFilters;\" class=\"btn btn-outline\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M5 10H15M2.5 5H17.5M7.5 15H12.5\" stroke=\"#344054\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n <span class=\" ms-3\">{{getCheckedIds(filters).length}} selected</span>\r\n </button> \r\n <div *ngIf=\"showFilters\" class=\"input-container dropdown\" >\r\n <div>\r\n <ul>\r\n <li >\r\n <div class=\"form-check\">\r\n <input (change)=\"onSelectAll($event)\" [checked]=\"checkIfAllSelected()\" class=\"form-check-input me-3\" type=\"checkbox\"\r\n id=\"selectAll\">\r\n <label class=\"form-check-label\" for=\"selectAll\">\r\n All Logs\r\n </label>\r\n </div>\r\n </li>\r\n <li *ngFor=\"let filter of filters\" >\r\n <div class=\"form-check\">\r\n <input class=\"form-check-input me-3\" type=\"checkbox\" [(ngModel)]=\"filter.isChecked\" [id]=\"filter.id\">\r\n <label class=\"form-check-label\" [for]=\"filter.id\" >\r\n {{filter.label}}\r\n </label>\r\n </div>\r\n </li>\r\n \r\n </ul> \r\n </div>\r\n <div >\r\n <div class=\" w-100 footer-seperator\"></div>\r\n <div class=\"d-flex justify-content-end m-2\">\r\n <a type=\"button\" class=\"btn btn-outline me-4\" (click)=\"showFilters = false\" >Cancel</a>\r\n <a type=\"submit\" class=\"btn btn-primary px-4 \" (click)=\"applyFilter()\" >Apply</a>\r\n </div>\r\n </div>\r\n \r\n </div> \r\n </div>\r\n \r\n </div> -->\r\n </div>\r\n </div>\r\n \r\n <ng-container *ngIf=\"logList?.length\" >\r\n <div *ngFor=\"let item of logList\" class=\"log-card mb-8\">\r\n <div class=\"d-flex me-10\">\r\n <div class=\"line me-4\"></div>\r\n <div class=\"d-flex flex-column\">\r\n <div class=\"d-flex align-items-center mb-2\">\r\n <div class=\"header me-4\">{{camelCaseToWords(item?.logSubType)}}</div>\r\n <div class=\"time\">{{formatDate(item?.date)}}</div>\r\n </div>\r\n <div class=\"sub\">{{arrayToString(item?.changes)}} <span *ngIf=\"item?.eventType\">{{item?.eventType + 'd'}}</span></div>\r\n <div class=\"sub\">By {{item?.userName}} - {{item?.email}}</div>\r\n </div>\r\n \r\n </div>\r\n <div class=\"chip\">\r\n {{camelCaseToWords(item?.logType)}}\r\n </div>\r\n </div>\r\n \r\n <div *ngIf=\"logList?.length\" class=\"my-3\">\r\n <lib-pagination [itemsPerPage]=\"itemsPerPage\" [currentPage]=\"currentPage\" [totalItems]=\"totalItems\" [paginationSizes]=\"paginationSizes\" [pageSize]=\"pageSize\"\r\n (pageChange)=\"onPageChange($event)\" (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n </div> \r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"!logList?.length\">\r\n <div class=\"d-flex align-items-center justify-content-center\" >\r\n <img width=\"300px\" src=\"./assets/tango/Icons/Nodata.svg\" alt=\"\"> \r\n </div>\r\n </ng-container>\r\n \r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'loading'\" >\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n</div>\r\n\r\n", styles: [".activity-card{border-radius:8px;background:var(--White, #FFF);padding:24px}.log-card{display:flex;justify-content:space-between}.log-card .line{border-radius:2px;background:var(--Primary-600, #00A3FF);min-width:2px;height:100%}.log-card .header{color:var(--Gray-700, #344054);font-size:14px;font-weight:600;line-height:20px}.log-card .time{color:var(--Gray-500, #667085);font-size:12px;font-weight:500;line-height:18px}.log-card .sub{color:var(--Gray-500, #667085);font-size:14px;font-weight:400;line-height:24px}.log-card .chip{padding:2px 10px;border-radius:16px;background:var(--Primary-50, #EAF8FF);color:var(--Primary-700, #009BF3);font-size:14px;font-weight:500;line-height:20px;height:100%;white-space:nowrap}.header{color:var(--Gray-900, #101828);font-size:18px;font-weight:600;line-height:28px}: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:400px!important}:host::ng-deep .md-drppicker .btn{border-radius:8px!important;border:1px solid var(--Primary-600, #00A3FF)!important;background:var(--Primary-600, #00A3FF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--White, #FFF)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}:host::ng-deep .md-drppicker .ranges ul li button{padding:12px 16px;width:160px;color:var(--Gray-700, #344054);font-size:14px;font-weight:400;line-height:20px;background:none;border:none;text-align:left;cursor:pointer}:host::ng-deep .md-drppicker td.active,:host::ng-deep .md-drppicker td.active:hover{background-color:#029cf4!important;border-radius:20px!important;color:var(--White, #FFF)!important;text-align:center!important;font-size:14px!important;font-weight:500!important;line-height:20px}:host::ng-deep .md-drppicker.ltr .ranges{float:left;margin-top:10px!important}:host::ng-deep .md-drppicker td.in-range{background:var(--Primary-50, #EAF8FF)}:host::ng-deep .md-drppicker .ranges ul li button.active{background:var(--Primary-50, #EAF8FF)!important;border-radius:8px!important;color:var(--Primary-700, #009BF3);font-size:14px!important;font-weight:500!important;line-height:20px!important}:host::ng-deep table th,:host::ng-deep table td{width:40px!important;height:40px!important;padding:10px 8px!important}:host::ng-deep .md-drppicker td.available.prev,:host::ng-deep .md-drppicker th.available.prev{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep .md-drppicker td.available.next,:host::ng-deep .md-drppicker th.available.next{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep table th{border-bottom:0px solid var(--Gray-200, #EAECF0)!important;background:transparent!important;color:var(--Gray-700, #344054)!important;text-align:center;font-size:16px!important;font-weight:500!important;line-height:24px}:host::ng-deep .md-drppicker 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}: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}.multi-select-dropdown{position:relative}.multi-select-dropdown .input-container{position:absolute;width:212px;right:0;z-index:1;margin-top:5px;background-color:#fff;min-height:200px;border-radius:8px;border:1px solid var(--Gray-100, #F2F4F7);background:var(--White, #FFF);box-shadow:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808;display:flex;flex-direction:column;justify-content:space-between}.multi-select-dropdown .input-container ul{margin:0;padding:0}.multi-select-dropdown .input-container ul li{list-style:none;padding:10px 16px}.multi-select-dropdown .input-container .form-check{display:flex;align-items:center}.multi-select-dropdown .input-container .form-check-input{height:16px;width:16px;border-radius:4px;border:1px solid var(--Primary-600, #00A3FF)}.multi-select-dropdown .input-container .form-check-input:checked{--bs-form-check-bg-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAICAYAAADA+m62AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAB4SURBVHgBhY7NDUBQEIRnqcJNKXTg6qYTStCB+Isy6IQSNMDa9SLh5eWZZPcw+81kCX/quABhD73QyKXsGoyIvNCJSto2hEhNtY4N9cwYeMXEsVqB1GaSauRQOpty2tSmO3FgloAmF5nEhgyoesMO6CuFW66fn2xdFyA3ZzcRLrMAAAAASUVORK5CYII=);background-color:#eaf8ff;border-color:#00a3ff}.multi-select-dropdown .input-container .form-check-label{color:var(--Gray-700, #344054);font-family:Inter;font-size:14px;font-style:normal;font-weight:500;line-height:20px}.multi-select-dropdown .input-container .footer-seperator{border-top:1px solid #EAECF0}.multi-select-dropdown .input-container .btn-primary{padding:10px 16px!important;font-size:12px!important;font-weight:600!important}.multi-select-dropdown .input-container .btn-outline{padding:10px 16px;font-size:12px;font-weight:600}\n"] }]
|
|
5450
5506
|
}], ctorParameters: () => [{ type: ClientApiService }, { type: i0.ChangeDetectorRef }], propDecorators: { onClick: [{
|
|
5451
5507
|
type: HostListener,
|
|
5452
5508
|
args: ['document:click', ['$event']]
|