tango-app-ui-manage-tickets 3.7.0-beta.76 → 3.7.0-beta.77
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2022/lib/components/ticket-filter-panel/ticket-filter-panel.component.mjs +9 -5
- package/fesm2022/tango-app-ui-manage-tickets.mjs +8 -4
- package/fesm2022/tango-app-ui-manage-tickets.mjs.map +1 -1
- package/lib/components/audit-metrics/audit-metrics.component.d.ts +1 -1
- package/lib/components/ticket-footfall-new/ticket-footfall-new.component.d.ts +1 -1
- package/package.json +1 -1
|
@@ -3667,7 +3667,9 @@ class TicketFilterPanelComponent {
|
|
|
3667
3667
|
return this.userList.filter(u => {
|
|
3668
3668
|
const email = (u.email || '').toLowerCase();
|
|
3669
3669
|
const name = (u.name || '').toLowerCase();
|
|
3670
|
-
|
|
3670
|
+
if (this.reviewerSearchTerm.length) {
|
|
3671
|
+
return email.includes(term) || name.includes(term);
|
|
3672
|
+
}
|
|
3671
3673
|
});
|
|
3672
3674
|
}
|
|
3673
3675
|
approverSearchTerm;
|
|
@@ -3679,7 +3681,9 @@ class TicketFilterPanelComponent {
|
|
|
3679
3681
|
return this.userList.filter((u) => {
|
|
3680
3682
|
const email = (u.email || '').toLowerCase();
|
|
3681
3683
|
const name = (u.name || '').toLowerCase();
|
|
3682
|
-
|
|
3684
|
+
if (this.approverSearchTerm.length) {
|
|
3685
|
+
return email.includes(term) || name.includes(term);
|
|
3686
|
+
}
|
|
3683
3687
|
});
|
|
3684
3688
|
}
|
|
3685
3689
|
onApproverSearch(value) {
|
|
@@ -3914,11 +3918,11 @@ class TicketFilterPanelComponent {
|
|
|
3914
3918
|
return this.dropdownState[type];
|
|
3915
3919
|
}
|
|
3916
3920
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TicketFilterPanelComponent, deps: [{ token: i1$3.FormBuilder }, { token: i0.ElementRef }, { token: TicketService }], target: i0.ɵɵFactoryTarget.Component });
|
|
3917
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TicketFilterPanelComponent, selector: "lib-ticket-filter-panel", inputs: { permissionType: "permissionType", userType: "userType", client: "client", tab: "tab" }, outputs: { apply: "apply", panelClosed: "panelClosed" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, usesOnChanges: true, ngImport: i0, template: "<!-- ticket-filter-panel.component.html -->\r\n<div class=\"filter-wrapper\" *ngIf=\"isOpen\">\r\n <div class=\"filter-card\">\r\n <div class=\"filter-header d-flex justify-content-between align-items-center mb-3\">\r\n <div class=\"title\">Filter Options</div>\r\n <!-- <button type=\"button\" class=\"btn-close\" (click)=\"close()\">\u2715</button> -->\r\n </div>\r\n\r\n <form [formGroup]=\"filterForm\">\r\n\r\n <div *ngIf=\"tab ==='internal'\" class=\"mb-3 position-relative\" (click)=\"$event.stopPropagation()\">\r\n\r\n <label class=\"form-label\">Ticket Type</label>\r\n <select class=\"form-select w-100\" formControlName=\"type\" (change)=\"onTicketTypeChange($event)\">\r\n <option disabled [ngValue]=\"null\">Select</option>\r\n <option value=\"store\">Store</option>\r\n <option value=\"internal\">Internal</option>\r\n </select>\r\n </div>\r\n <!-- Status -->\r\n<div class=\"mb-3 position-relative\" (click)=\"$event.stopPropagation()\">\r\n <label *ngIf=\"tab !=='internal'\" class=\"form-label\">Status</label>\r\n <label *ngIf=\"tab ==='internal'\" class=\"form-label\">Tango Status</label>\r\n <!-- Header / trigger -->\r\n <div\r\n class=\"status-select border rounded px-3 py-2 d-flex justify-content-between align-items-center\"\r\n (click)=\"toggleDropdown('status', $event)\"\r\n >\r\n <span *ngIf=\"!selectedStatuses.length\">Select</span>\r\n\r\n <span *ngIf=\"selectedStatuses.length === 1\">\r\n {{ selectedStatuses[0] }}\r\n </span>\r\n\r\n <span *ngIf=\"selectedStatuses.length > 1\" class=\"d-flex align-items-center\">\r\n <span>{{ selectedStatuses[0] }}</span>\r\n <span class=\"badge ms-2\">\r\n +{{ selectedStatuses.length - 1 }}\r\n </span>\r\n </span>\r\n\r\n </div>\r\n\r\n <!-- DROPDOWN PANEL (OVERLAY) -->\r\n <div\r\n class=\"status-dropdown position-absolute w-100 mt-1 border rounded p-1 bg-white\"\r\n style=\"z-index: 1000; max-height: 220px; overflow-y: auto;\"\r\n *ngIf=\"isDropdownOpen('status')\"\r\n (click)=\"$event.stopPropagation()\"\r\n >\r\n <!-- Select All -->\r\n <div class=\"form-check px-0 d-flex align-items-center mb-2\">\r\n <input\r\n type=\"checkbox\"\r\n class=\"form-check-input \"\r\n id=\"status-select-all\"\r\n [checked]=\"areAllStatusesSelected()\"\r\n (change)=\"onStatusSelectAllChange($event)\"\r\n />\r\n <label class=\"form-check-label text-dark ms-2\" for=\"status-select-all\">\r\n Select All\r\n </label>\r\n </div>\r\n\r\n\r\n <!-- Options -->\r\n <div\r\n class=\"form-check px-0 d-flex align-items-center mb-1\"\r\n *ngFor=\"let s of statusOptions\"\r\n >\r\n <input\r\n type=\"checkbox\"\r\n class=\"form-check-input \"\r\n [id]=\"'status-' + s\"\r\n [checked]=\"isStatusSelected(s)\"\r\n (change)=\"onStatusChange($event, s)\"\r\n />\r\n <label class=\"form-check-label text-dark ms-2\" [for]=\"'status-' + s\">\r\n {{ s }}\r\n </label>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n\r\n<div *ngIf=\"tab ==='internal'\" class=\"mb-3 position-relative\" (click)=\"$event.stopPropagation()\">\r\n <label class=\"form-label\">Ticket Status</label>\r\n\r\n <!-- Header / trigger -->\r\n <div\r\n class=\"status-select border rounded px-3 py-2 d-flex justify-content-between align-items-center\"\r\n (click)=\"toggleDropdown('ticketStatus', $event)\"\r\n >\r\n <span *ngIf=\"!selectedTicketStatuses.length\">Select</span>\r\n\r\n <span *ngIf=\"selectedTicketStatuses.length === 1\">\r\n {{ selectedTicketStatuses[0] }}\r\n </span>\r\n\r\n <span *ngIf=\"selectedTicketStatuses.length > 1\" class=\"d-flex align-items-center\">\r\n <span>{{ selectedTicketStatuses[0] }}</span>\r\n <span class=\"badge ms-2\">\r\n +{{ selectedTicketStatuses.length - 1 }}\r\n </span>\r\n </span>\r\n\r\n </div>\r\n\r\n <!-- DROPDOWN PANEL (OVERLAY) -->\r\n <div\r\n class=\"status-dropdown position-absolute w-100 mt-1 border rounded p-1 bg-white\"\r\n style=\"z-index: 1000; max-height: 220px; overflow-y: auto;\"\r\n *ngIf=\"isDropdownOpen('ticketStatus')\"\r\n (click)=\"$event.stopPropagation()\"\r\n >\r\n <!-- Select All -->\r\n <div class=\"form-check px-0 d-flex align-items-center mb-2\">\r\n <input\r\n type=\"checkbox\"\r\n class=\"form-check-input \"\r\n id=\"status-select-all\"\r\n [checked]=\"areAllTicketStatusesSelected()\"\r\n (change)=\"onTicketStatusSelectAllChange($event)\"\r\n />\r\n <label class=\"form-check-label text-dark ms-2\" for=\"status-select-all\">\r\n Select All\r\n </label>\r\n </div>\r\n\r\n\r\n <!-- Options -->\r\n <div\r\n class=\"form-check px-0 d-flex align-items-center mb-1\"\r\n *ngFor=\"let s of ticketStatusOptions\"\r\n >\r\n <input\r\n type=\"checkbox\"\r\n class=\"form-check-input \"\r\n [id]=\"'ticketStatus-' + s\"\r\n [checked]=\"isTicketStatusSelected(s)\"\r\n (change)=\"onTicketStatusChange($event, s)\"\r\n />\r\n <label class=\"form-check-label text-dark ms-2\" [for]=\"'ticketStatus-' + s\">\r\n {{ s }}\r\n </label>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n\r\n\r\n <!-- Reviewer accuracy -->\r\n <div class=\"mb-3\" *ngIf=\"showReviewerAccuracy\" (click)=\"closeAll()\">\r\n <label class=\"form-label\">Reviewer accuracy (%) by condition</label>\r\n <div class=\"d-flex gap-2\">\r\n <select class=\"form-select w-100\" formControlName=\"reviewerCondition\">\r\n <option disabled [ngValue]=\"null\">Select</option>\r\n <option *ngFor=\"let c of conditionOptions\" [ngValue]=\"c.value\">\r\n {{ c.label }}\r\n </option>\r\n </select>\r\n\r\n <!-- one or two inputs -->\r\n <ng-container *ngIf=\"isBetween('reviewerCondition'); else singleReviewer\">\r\n <input\r\n type=\"number\"\r\n min=\"1\"\r\n max=\"100\"\r\n class=\"form-control\"\r\n formControlName=\"reviewerFrom\"\r\n placeholder=\"From\" (input)=\"limitValue($event, 'reviewerFrom')\" />\r\n <input\r\n type=\"number\"\r\n min=\"1\"\r\n max=\"100\"\r\n class=\"form-control\"\r\n formControlName=\"reviewerTo\"\r\n placeholder=\"To\" (input)=\"limitValue($event, 'reviewerTo')\" />\r\n </ng-container>\r\n <ng-template #singleReviewer>\r\n <input\r\n type=\"number\"\r\n min=\"1\"\r\n max=\"100\"\r\n class=\"form-control\"\r\n formControlName=\"reviewerFrom\"\r\n placeholder=\"1 to 100%\" (input)=\"limitValue($event, 'reviewerFrom')\" />\r\n </ng-template>\r\n </div>\r\n </div>\r\n\r\n <!-- Approver accuracy -->\r\n <div class=\"mb-3\" *ngIf=\"showApproverAccuracy\" (click)=\"closeAll()\">\r\n <label class=\"form-label\">Approver accuracy (%) by condition</label>\r\n <div class=\"d-flex gap-2\">\r\n <select class=\"form-select w-100\" formControlName=\"approverCondition\">\r\n <option disabled [ngValue]=\"null\">Select</option>\r\n <option *ngFor=\"let c of conditionOptions\" [ngValue]=\"c.value\">\r\n {{ c.label }}\r\n </option>\r\n </select>\r\n\r\n <ng-container *ngIf=\"isBetween('approverCondition'); else singleApprover\">\r\n <input\r\n type=\"number\"\r\n min=\"1\"\r\n max=\"100\"\r\n class=\"form-control\"\r\n formControlName=\"approverFrom\"\r\n placeholder=\"From\" \r\n (input)=\"limitValue($event, 'approverFrom')\"/>\r\n <input\r\n type=\"number\"\r\n min=\"1\"\r\n max=\"100\"\r\n class=\"form-control\"\r\n formControlName=\"approverTo\"\r\n placeholder=\"To\" (input)=\"limitValue($event, 'approverTo')\" />\r\n </ng-container>\r\n <ng-template #singleApprover>\r\n <input\r\n type=\"number\"\r\n min=\"1\"\r\n max=\"100\"\r\n class=\"form-control\"\r\n formControlName=\"approverFrom\"\r\n placeholder=\"1 to 100%\" (input)=\"limitValue($event, 'approverFrom')\" />\r\n </ng-template>\r\n </div>\r\n </div>\r\n\r\n <!-- Tango accuracy -->\r\n <div class=\"mb-3\" *ngIf=\"showTangoAccuracy\" (click)=\"closeAll()\">\r\n <label class=\"form-label\">Tango accuracy (%) by condition</label>\r\n <div class=\"d-flex gap-2\">\r\n <select class=\"form-select w-100\" formControlName=\"tangoCondition\">\r\n <option disabled [ngValue]=\"null\">Select</option>\r\n <option *ngFor=\"let c of conditionOptions\" [ngValue]=\"c.value\">\r\n {{ c.label }}\r\n </option>\r\n </select>\r\n\r\n <ng-container *ngIf=\"isBetween('tangoCondition'); else singleTango\">\r\n <input\r\n type=\"number\"\r\n min=\"1\"\r\n max=\"100\"\r\n class=\"form-control\"\r\n formControlName=\"tangoFrom\"\r\n placeholder=\"From\" (input)=\"limitValue($event, 'tangoFrom')\" />\r\n <input\r\n type=\"number\"\r\n min=\"1\"\r\n max=\"100\"\r\n class=\"form-control\"\r\n formControlName=\"tangoTo\"\r\n placeholder=\"To\" (input)=\"limitValue($event, 'tangoTo')\" />\r\n </ng-container>\r\n <ng-template #singleTango>\r\n <input\r\n type=\"number\"\r\n min=\"1\"\r\n max=\"100\"\r\n class=\"form-control\"\r\n formControlName=\"tangoFrom\"\r\n placeholder=\"1 to 100%\" (input)=\"limitValue($event, 'tangoFrom')\" />\r\n </ng-template>\r\n </div>\r\n </div>\r\n<div\r\n class=\"mb-3 position-relative\"\r\n *ngIf=\"showReviewedBy\"\r\n (click)=\"$event.stopPropagation()\"\r\n>\r\n <label class=\"form-label\">Reviewed by</label>\r\n\r\n <!-- Trigger / display -->\r\n <div\r\n class=\"border rounded px-3 py-2 d-flex justify-content-between align-items-center\"\r\n (click)=\"toggleDropdown('reviewer', $event)\"\r\n >\r\n <!-- 0 selected -->\r\n <span *ngIf=\"!selectedReviewedBy.length\">\r\n Select\r\n </span>\r\n\r\n <!-- 1 selected -->\r\n <span *ngIf=\"selectedReviewedBy.length === 1\">\r\n {{ selectedReviewedBy[0] }}\r\n </span>\r\n\r\n <!-- >1 selected -->\r\n <span\r\n *ngIf=\"selectedReviewedBy.length > 1\"\r\n class=\"d-flex align-items-center\"\r\n >\r\n <span>{{ selectedReviewedBy[0] }}</span>\r\n <span class=\"badge ms-2\">\r\n +{{ selectedReviewedBy.length - 1 }}\r\n </span>\r\n </span>\r\n </div>\r\n\r\n<div\r\n *ngIf=\"isDropdownOpen('reviewer')\"\r\n class=\"position-absolute w-100 border rounded bg-white p-1 mt-1\"\r\n style=\"z-index: 1000; max-height: 220px; overflow-y: auto;\"\r\n (click)=\"$event.stopPropagation()\"\r\n>\r\n\r\n <!-- \uD83D\uDD0D Search box -->\r\n <!-- <div class=\"mb-2 px-0\">\r\n <input\r\n type=\"text\"\r\n class=\"form-control form-control-sm\"\r\n placeholder=\"Search by email\"\r\n [(ngModel)]=\"reviewerSearchTerm\"\r\n (click)=\"$event.stopPropagation()\"\r\n />\r\n </div> -->\r\n\r\n <!-- Select All -->\r\n <div class=\"form-check px-0 mb-2 d-flex align-items-center\">\r\n <input\r\n type=\"checkbox\"\r\n class=\"form-check-input\"\r\n id=\"reviewer-all\"\r\n [checked]=\"areAllReviewersSelected()\"\r\n (change)=\"onReviewerSelectAll($event)\"\r\n />\r\n <label for=\"reviewer-all\" class=\"form-check-label text-dark ms-2\">\r\n Select All\r\n </label>\r\n </div>\r\n\r\n <!-- Options \u2013 now use getter filteredReviewerList -->\r\n <div\r\n class=\"form-check mb-1 px-0 d-flex align-items-center\"\r\n *ngFor=\"let u of filteredReviewerList\"\r\n >\r\n <input\r\n class=\"form-check-input\"\r\n type=\"checkbox\"\r\n [id]=\"'rev-' + u.email\"\r\n [checked]=\"isReviewerSelected(u.email)\"\r\n (change)=\"onReviewerChange($event, u.email)\"\r\n />\r\n <label class=\"form-check-label text-dark ms-2\" [for]=\"'rev-' + u.email\">\r\n {{ u.email }}\r\n </label>\r\n </div>\r\n</div>\r\n\r\n\r\n</div>\r\n\r\n\r\n <!-- Approved By -->\r\n<div\r\n class=\"mb-3 position-relative\"\r\n *ngIf=\"showApprovedBy\"\r\n (click)=\"$event.stopPropagation()\"\r\n>\r\n <label class=\"form-label\">Approved by</label>\r\n\r\n <!-- Trigger / display -->\r\n <div\r\n class=\"border rounded px-3 py-2 d-flex justify-content-between align-items-center\"\r\n (click)=\"toggleDropdown('approver', $event)\"\r\n >\r\n <!-- 0 selected -->\r\n <span *ngIf=\"!selectedApprovedBy.length\">\r\n Select\r\n </span>\r\n\r\n <!-- 1 selected -->\r\n <span *ngIf=\"selectedApprovedBy.length === 1\">\r\n {{ selectedApprovedBy[0] }}\r\n </span>\r\n\r\n <!-- >1 selected -->\r\n <span\r\n *ngIf=\"selectedApprovedBy.length > 1\"\r\n class=\"d-flex align-items-center\"\r\n >\r\n <span>{{ selectedApprovedBy[0] }}</span>\r\n <span class=\"badge ms-2\">\r\n +{{ selectedApprovedBy.length - 1 }}\r\n </span>\r\n </span>\r\n\r\n </div>\r\n<!-- Dropdown panel -->\r\n<div\r\n *ngIf=\"isDropdownOpen('approver')\"\r\n class=\"position-absolute w-100 border rounded bg-white p-1 mt-1\"\r\n style=\"z-index: 1000; max-height: 220px; overflow-y: auto;\"\r\n (click)=\"$event.stopPropagation()\"\r\n>\r\n\r\n <!-- \uD83D\uDD0D Search box -->\r\n <!-- <div class=\"mb-2 px-0\">\r\n <input\r\n type=\"text\"\r\n class=\"form-control form-control-sm\"\r\n placeholder=\"Search by email\"\r\n [ngModel]=\"approverSearchTerm\"\r\n (ngModelChange)=\"onReviewerSearch($event)\"\r\n (click)=\"$event.stopPropagation()\"\r\n />\r\n </div> -->\r\n\r\n <!-- Select All -->\r\n <div class=\"form-check px-0 mb-2 d-flex align-items-center\">\r\n <input\r\n type=\"checkbox\"\r\n class=\"form-check-input\"\r\n id=\"reviewer-all\"\r\n [checked]=\"areAllReviewersSelected()\"\r\n (change)=\"onReviewerSelectAll($event)\"\r\n />\r\n <label for=\"reviewer-all\" class=\"form-check-label text-dark ms-2\">\r\n Select All\r\n </label>\r\n </div>\r\n\r\n <!-- Options (use filteredReviewerList instead of userList) -->\r\n <div\r\n class=\"form-check mb-1 px-0 d-flex align-items-center\"\r\n *ngFor=\"let u of filteredApproverList\"\r\n >\r\n <input\r\n class=\"form-check-input\"\r\n type=\"checkbox\"\r\n [id]=\"'rev-' + u.email\"\r\n [checked]=\"isReviewerSelected(u.email)\"\r\n (change)=\"onReviewerChange($event, u.email)\"\r\n />\r\n <label class=\"form-check-label text-dark ms-2\" [for]=\"'rev-' + u.email\">\r\n {{ u.email }}\r\n </label>\r\n </div>\r\n</div>\r\n\r\n <!-- Dropdown panel -->\r\n\r\n</div>\r\n\r\n\r\n <!-- Footer buttons -->\r\n <div class=\"d-flex justify-content-between w-100 mt-4\">\r\n <button type=\"button\" class=\"btn btn-outline w-50 me-1\" (click)=\"onReset()\">\r\n Reset\r\n </button>\r\n <button type=\"button\" class=\"btn btn-primary w-50 ms-1\" (click)=\"onApply()\">\r\n Apply\r\n </button>\r\n </div>\r\n </form>\r\n </div>\r\n</div>\r\n", styles: [".filter-wrapper{position:absolute;top:0;right:0;padding:16px;z-index:1050}.filter-card{width:350px;background:#fff;border-radius:12px;padding:16px 18px;box-shadow:0 8px 30px #00000014;font-size:13px}.filter-header .title{font-weight:600;font-size:14px}.btn-close{border:none;background:transparent;font-size:16px;cursor:pointer}.form-label{font-size:12px;margin-bottom:4px}.form-select,.form-control{font-size:13px}.gap-2{gap:4px}.badge{padding:0 6px;border-radius:999px;font-size:11px;background:#e5f3ff;color:#007bff}input[type=checkbox]{width:16px!important;height:16px!important;margin:-2px 5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-600, #D0D5DD)!important;box-shadow:none;font-size:.5em;text-align:center;line-height:1em;background:#fff}input[type=checkbox]{outline:1px solid var(--primary-600, #00A3FF)!important;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:.5em;padding-left:3px;padding-top:10px;padding-right:0}.text-dark{color:#344054!important}\n"], dependencies: [{ kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$3.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$3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$3.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1$3.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] });
|
|
3921
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TicketFilterPanelComponent, selector: "lib-ticket-filter-panel", inputs: { permissionType: "permissionType", userType: "userType", client: "client", tab: "tab" }, outputs: { apply: "apply", panelClosed: "panelClosed" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, usesOnChanges: true, ngImport: i0, template: "<!-- ticket-filter-panel.component.html -->\r\n<div class=\"filter-wrapper\" *ngIf=\"isOpen\">\r\n <div class=\"filter-card\">\r\n <div class=\"filter-header d-flex justify-content-between align-items-center mb-3\">\r\n <div class=\"title\">Filter Options</div>\r\n <!-- <button type=\"button\" class=\"btn-close\" (click)=\"close()\">\u2715</button> -->\r\n </div>\r\n\r\n <form [formGroup]=\"filterForm\">\r\n\r\n <div *ngIf=\"tab ==='internal'\" class=\"mb-3 position-relative\" (click)=\"$event.stopPropagation()\">\r\n\r\n <label class=\"form-label\">Ticket Type</label>\r\n <select class=\"form-select w-100\" formControlName=\"type\" (change)=\"onTicketTypeChange($event)\">\r\n <option disabled [ngValue]=\"null\">Select</option>\r\n <option value=\"store\">Store</option>\r\n <option value=\"internal\">Internal</option>\r\n </select>\r\n </div>\r\n <!-- Status -->\r\n<div class=\"mb-3 position-relative\" (click)=\"$event.stopPropagation()\">\r\n <label *ngIf=\"tab !=='internal'\" class=\"form-label\">Status</label>\r\n <label *ngIf=\"tab ==='internal'\" class=\"form-label\">Tango Status</label>\r\n <!-- Header / trigger -->\r\n <div\r\n class=\"status-select border rounded px-3 py-2 d-flex justify-content-between align-items-center\"\r\n (click)=\"toggleDropdown('status', $event)\"\r\n >\r\n <span *ngIf=\"!selectedStatuses.length\">Select</span>\r\n\r\n <span *ngIf=\"selectedStatuses.length === 1\">\r\n {{ selectedStatuses[0] }}\r\n </span>\r\n\r\n <span *ngIf=\"selectedStatuses.length > 1\" class=\"d-flex align-items-center\">\r\n <span>{{ selectedStatuses[0] }}</span>\r\n <span class=\"badge ms-2\">\r\n +{{ selectedStatuses.length - 1 }}\r\n </span>\r\n </span>\r\n\r\n </div>\r\n\r\n <!-- DROPDOWN PANEL (OVERLAY) -->\r\n <div\r\n class=\"status-dropdown position-absolute w-100 mt-1 border rounded p-1 bg-white\"\r\n style=\"z-index: 1000; max-height: 220px; overflow-y: auto;\"\r\n *ngIf=\"isDropdownOpen('status')\"\r\n (click)=\"$event.stopPropagation()\"\r\n >\r\n <!-- Select All -->\r\n <div class=\"form-check px-0 d-flex align-items-center mb-2\">\r\n <input\r\n type=\"checkbox\"\r\n class=\"form-check-input \"\r\n id=\"status-select-all\"\r\n [checked]=\"areAllStatusesSelected()\"\r\n (change)=\"onStatusSelectAllChange($event)\"\r\n />\r\n <label class=\"form-check-label text-dark ms-2\" for=\"status-select-all\">\r\n Select All\r\n </label>\r\n </div>\r\n\r\n\r\n <!-- Options -->\r\n <div\r\n class=\"form-check px-0 d-flex align-items-center mb-1\"\r\n *ngFor=\"let s of statusOptions\"\r\n >\r\n <input\r\n type=\"checkbox\"\r\n class=\"form-check-input \"\r\n [id]=\"'status-' + s\"\r\n [checked]=\"isStatusSelected(s)\"\r\n (change)=\"onStatusChange($event, s)\"\r\n />\r\n <label class=\"form-check-label text-dark ms-2\" [for]=\"'status-' + s\">\r\n {{ s }}\r\n </label>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n\r\n<div *ngIf=\"tab ==='internal'\" class=\"mb-3 position-relative\" (click)=\"$event.stopPropagation()\">\r\n <label class=\"form-label\">Ticket Status</label>\r\n\r\n <!-- Header / trigger -->\r\n <div\r\n class=\"status-select border rounded px-3 py-2 d-flex justify-content-between align-items-center\"\r\n (click)=\"toggleDropdown('ticketStatus', $event)\"\r\n >\r\n <span *ngIf=\"!selectedTicketStatuses.length\">Select</span>\r\n\r\n <span *ngIf=\"selectedTicketStatuses.length === 1\">\r\n {{ selectedTicketStatuses[0] }}\r\n </span>\r\n\r\n <span *ngIf=\"selectedTicketStatuses.length > 1\" class=\"d-flex align-items-center\">\r\n <span>{{ selectedTicketStatuses[0] }}</span>\r\n <span class=\"badge ms-2\">\r\n +{{ selectedTicketStatuses.length - 1 }}\r\n </span>\r\n </span>\r\n\r\n </div>\r\n\r\n <!-- DROPDOWN PANEL (OVERLAY) -->\r\n <div\r\n class=\"status-dropdown position-absolute w-100 mt-1 border rounded p-1 bg-white\"\r\n style=\"z-index: 1000; max-height: 220px; overflow-y: auto;\"\r\n *ngIf=\"isDropdownOpen('ticketStatus')\"\r\n (click)=\"$event.stopPropagation()\"\r\n >\r\n <!-- Select All -->\r\n <div class=\"form-check px-0 d-flex align-items-center mb-2\">\r\n <input\r\n type=\"checkbox\"\r\n class=\"form-check-input \"\r\n id=\"status-select-all\"\r\n [checked]=\"areAllTicketStatusesSelected()\"\r\n (change)=\"onTicketStatusSelectAllChange($event)\"\r\n />\r\n <label class=\"form-check-label text-dark ms-2\" for=\"status-select-all\">\r\n Select All\r\n </label>\r\n </div>\r\n\r\n\r\n <!-- Options -->\r\n <div\r\n class=\"form-check px-0 d-flex align-items-center mb-1\"\r\n *ngFor=\"let s of ticketStatusOptions\"\r\n >\r\n <input\r\n type=\"checkbox\"\r\n class=\"form-check-input \"\r\n [id]=\"'ticketStatus-' + s\"\r\n [checked]=\"isTicketStatusSelected(s)\"\r\n (change)=\"onTicketStatusChange($event, s)\"\r\n />\r\n <label class=\"form-check-label text-dark ms-2\" [for]=\"'ticketStatus-' + s\">\r\n {{ s }}\r\n </label>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n\r\n\r\n <!-- Reviewer accuracy -->\r\n <div class=\"mb-3\" *ngIf=\"showReviewerAccuracy\" (click)=\"closeAll()\">\r\n <label class=\"form-label\">Reviewer accuracy (%) by condition</label>\r\n <div class=\"d-flex gap-2\">\r\n <select class=\"form-select w-100\" formControlName=\"reviewerCondition\">\r\n <option disabled [ngValue]=\"null\">Select</option>\r\n <option *ngFor=\"let c of conditionOptions\" [ngValue]=\"c.value\">\r\n {{ c.label }}\r\n </option>\r\n </select>\r\n\r\n <!-- one or two inputs -->\r\n <ng-container *ngIf=\"isBetween('reviewerCondition'); else singleReviewer\">\r\n <input\r\n type=\"number\"\r\n min=\"1\"\r\n max=\"100\"\r\n class=\"form-control\"\r\n formControlName=\"reviewerFrom\"\r\n placeholder=\"From\" (input)=\"limitValue($event, 'reviewerFrom')\" />\r\n <input\r\n type=\"number\"\r\n min=\"1\"\r\n max=\"100\"\r\n class=\"form-control\"\r\n formControlName=\"reviewerTo\"\r\n placeholder=\"To\" (input)=\"limitValue($event, 'reviewerTo')\" />\r\n </ng-container>\r\n <ng-template #singleReviewer>\r\n <input\r\n type=\"number\"\r\n min=\"1\"\r\n max=\"100\"\r\n class=\"form-control\"\r\n formControlName=\"reviewerFrom\"\r\n placeholder=\"1 to 100%\" (input)=\"limitValue($event, 'reviewerFrom')\" />\r\n </ng-template>\r\n </div>\r\n </div>\r\n\r\n <!-- Approver accuracy -->\r\n <div class=\"mb-3\" *ngIf=\"showApproverAccuracy\" (click)=\"closeAll()\">\r\n <label class=\"form-label\">Approver accuracy (%) by condition</label>\r\n <div class=\"d-flex gap-2\">\r\n <select class=\"form-select w-100\" formControlName=\"approverCondition\">\r\n <option disabled [ngValue]=\"null\">Select</option>\r\n <option *ngFor=\"let c of conditionOptions\" [ngValue]=\"c.value\">\r\n {{ c.label }}\r\n </option>\r\n </select>\r\n\r\n <ng-container *ngIf=\"isBetween('approverCondition'); else singleApprover\">\r\n <input\r\n type=\"number\"\r\n min=\"1\"\r\n max=\"100\"\r\n class=\"form-control\"\r\n formControlName=\"approverFrom\"\r\n placeholder=\"From\" \r\n (input)=\"limitValue($event, 'approverFrom')\"/>\r\n <input\r\n type=\"number\"\r\n min=\"1\"\r\n max=\"100\"\r\n class=\"form-control\"\r\n formControlName=\"approverTo\"\r\n placeholder=\"To\" (input)=\"limitValue($event, 'approverTo')\" />\r\n </ng-container>\r\n <ng-template #singleApprover>\r\n <input\r\n type=\"number\"\r\n min=\"1\"\r\n max=\"100\"\r\n class=\"form-control\"\r\n formControlName=\"approverFrom\"\r\n placeholder=\"1 to 100%\" (input)=\"limitValue($event, 'approverFrom')\" />\r\n </ng-template>\r\n </div>\r\n </div>\r\n\r\n <!-- Tango accuracy -->\r\n <div class=\"mb-3\" *ngIf=\"showTangoAccuracy\" (click)=\"closeAll()\">\r\n <label class=\"form-label\">Tango accuracy (%) by condition</label>\r\n <div class=\"d-flex gap-2\">\r\n <select class=\"form-select w-100\" formControlName=\"tangoCondition\">\r\n <option disabled [ngValue]=\"null\">Select</option>\r\n <option *ngFor=\"let c of conditionOptions\" [ngValue]=\"c.value\">\r\n {{ c.label }}\r\n </option>\r\n </select>\r\n\r\n <ng-container *ngIf=\"isBetween('tangoCondition'); else singleTango\">\r\n <input\r\n type=\"number\"\r\n min=\"1\"\r\n max=\"100\"\r\n class=\"form-control\"\r\n formControlName=\"tangoFrom\"\r\n placeholder=\"From\" (input)=\"limitValue($event, 'tangoFrom')\" />\r\n <input\r\n type=\"number\"\r\n min=\"1\"\r\n max=\"100\"\r\n class=\"form-control\"\r\n formControlName=\"tangoTo\"\r\n placeholder=\"To\" (input)=\"limitValue($event, 'tangoTo')\" />\r\n </ng-container>\r\n <ng-template #singleTango>\r\n <input\r\n type=\"number\"\r\n min=\"1\"\r\n max=\"100\"\r\n class=\"form-control\"\r\n formControlName=\"tangoFrom\"\r\n placeholder=\"1 to 100%\" (input)=\"limitValue($event, 'tangoFrom')\" />\r\n </ng-template>\r\n </div>\r\n </div>\r\n<div\r\n class=\"mb-3 position-relative\"\r\n *ngIf=\"showReviewedBy\"\r\n (click)=\"$event.stopPropagation()\"\r\n>\r\n <label class=\"form-label\">Reviewed by</label>\r\n\r\n <!-- Trigger / display -->\r\n <div\r\n class=\"border rounded px-3 py-2 d-flex justify-content-between align-items-center\"\r\n (click)=\"toggleDropdown('reviewer', $event)\"\r\n >\r\n <!-- 0 selected -->\r\n <span *ngIf=\"!selectedReviewedBy.length\">\r\n Select\r\n </span>\r\n\r\n <!-- 1 selected -->\r\n <span *ngIf=\"selectedReviewedBy.length === 1\">\r\n {{ selectedReviewedBy[0] }}\r\n </span>\r\n\r\n <!-- >1 selected -->\r\n <span\r\n *ngIf=\"selectedReviewedBy.length > 1\"\r\n class=\"d-flex align-items-center\"\r\n >\r\n <span>{{ selectedReviewedBy[0] }}</span>\r\n <span class=\"badge ms-2\">\r\n +{{ selectedReviewedBy.length - 1 }}\r\n </span>\r\n </span>\r\n </div>\r\n\r\n<div\r\n *ngIf=\"isDropdownOpen('reviewer')\"\r\n class=\"position-absolute w-100 border rounded bg-white p-1 mt-1\"\r\n style=\"z-index: 1000; max-height: 220px; overflow-y: auto;\"\r\n (click)=\"$event.stopPropagation()\"\r\n>\r\n\r\n <!-- \uD83D\uDD0D Search box -->\r\n <div class=\"mb-2 px-0\">\r\n <input\r\n type=\"text\"\r\n class=\"form-control form-control-sm\"\r\n placeholder=\"Search by email\"\r\n [(ngModel)]=\"reviewerSearchTerm\"\r\n [ngModelOptions]=\"{standalone: true}\"\r\n (click)=\"$event.stopPropagation()\"\r\n />\r\n </div>\r\n\r\n <!-- Select All -->\r\n <div class=\"form-check px-0 mb-2 d-flex align-items-center\">\r\n <input\r\n type=\"checkbox\"\r\n class=\"form-check-input\"\r\n id=\"reviewer-all\"\r\n [checked]=\"areAllReviewersSelected()\"\r\n (change)=\"onReviewerSelectAll($event)\"\r\n />\r\n <label for=\"reviewer-all\" class=\"form-check-label text-dark ms-2\">\r\n Select All\r\n </label>\r\n </div>\r\n\r\n <!-- Options \u2013 now use getter filteredReviewerList -->\r\n <div\r\n class=\"form-check mb-1 px-0 d-flex align-items-center\"\r\n *ngFor=\"let u of filteredReviewerList\"\r\n >\r\n <input\r\n class=\"form-check-input\"\r\n type=\"checkbox\"\r\n [id]=\"'rev-' + u.email\"\r\n [checked]=\"isReviewerSelected(u.email)\"\r\n (change)=\"onReviewerChange($event, u.email)\"\r\n />\r\n <label class=\"form-check-label text-dark ms-2\" [for]=\"'rev-' + u.email\">\r\n {{ u.email }}\r\n </label>\r\n </div>\r\n</div>\r\n\r\n\r\n</div>\r\n\r\n\r\n <!-- Approved By -->\r\n<div\r\n class=\"mb-3 position-relative\"\r\n *ngIf=\"showApprovedBy\"\r\n (click)=\"$event.stopPropagation()\"\r\n>\r\n <label class=\"form-label\">Approved by</label>\r\n\r\n <!-- Trigger / display -->\r\n <div\r\n class=\"border rounded px-3 py-2 d-flex justify-content-between align-items-center\"\r\n (click)=\"toggleDropdown('approver', $event)\"\r\n >\r\n <!-- 0 selected -->\r\n <span *ngIf=\"!selectedApprovedBy.length\">\r\n Select\r\n </span>\r\n\r\n <!-- 1 selected -->\r\n <span *ngIf=\"selectedApprovedBy.length === 1\">\r\n {{ selectedApprovedBy[0] }}\r\n </span>\r\n\r\n <!-- >1 selected -->\r\n <span\r\n *ngIf=\"selectedApprovedBy.length > 1\"\r\n class=\"d-flex align-items-center\"\r\n >\r\n <span>{{ selectedApprovedBy[0] }}</span>\r\n <span class=\"badge ms-2\">\r\n +{{ selectedApprovedBy.length - 1 }}\r\n </span>\r\n </span>\r\n\r\n </div>\r\n<!-- Dropdown panel -->\r\n<div\r\n *ngIf=\"isDropdownOpen('approver')\"\r\n class=\"position-absolute w-100 border rounded bg-white p-1 mt-1\"\r\n style=\"z-index: 1000; max-height: 220px; overflow-y: auto;\"\r\n (click)=\"$event.stopPropagation()\"\r\n>\r\n\r\n <!-- \uD83D\uDD0D Search box -->\r\n <div class=\"mb-2 px-0\">\r\n <input\r\n type=\"text\"\r\n class=\"form-control form-control-sm\"\r\n placeholder=\"Search by email\"\r\n [(ngModel)]=\"approverSearchTerm\"\r\n [ngModelOptions]=\"{standalone: true}\"\r\n (click)=\"$event.stopPropagation()\"\r\n />\r\n <!-- email.includes(term) || name.includes(term) -->\r\n </div>\r\n\r\n <!-- Select All -->\r\n <div class=\"form-check px-0 mb-2 d-flex align-items-center\">\r\n <input\r\n type=\"checkbox\"\r\n class=\"form-check-input\"\r\n id=\"reviewer-all\"\r\n [checked]=\"areAllApproversSelected()\"\r\n (change)=\"onApproverSelectAll($event)\"\r\n />\r\n <label for=\"reviewer-all\" class=\"form-check-label text-dark ms-2\">\r\n Select All\r\n </label>\r\n </div>\r\n\r\n <!-- Options (use filteredReviewerList instead of userList) -->\r\n <div\r\n class=\"form-check mb-1 px-0 d-flex align-items-center\"\r\n *ngFor=\"let u of filteredApproverList\"\r\n >\r\n <input\r\n class=\"form-check-input\"\r\n type=\"checkbox\"\r\n [id]=\"'rev-' + u.email\"\r\n [checked]=\"isApproverSelected(u.email)\"\r\n (change)=\"onApproverChange($event, u.email)\"\r\n />\r\n <label class=\"form-check-label text-dark ms-2\" [for]=\"'rev-' + u.email\">\r\n {{ u.email }}\r\n </label>\r\n </div>\r\n</div>\r\n\r\n <!-- Dropdown panel -->\r\n\r\n</div>\r\n\r\n\r\n <!-- Footer buttons -->\r\n <div class=\"d-flex justify-content-between w-100 mt-4\">\r\n <button type=\"button\" class=\"btn btn-outline w-50 me-1\" (click)=\"onReset()\">\r\n Reset\r\n </button>\r\n <button type=\"button\" class=\"btn btn-primary w-50 ms-1\" (click)=\"onApply()\">\r\n Apply\r\n </button>\r\n </div>\r\n </form>\r\n </div>\r\n</div>\r\n", styles: [".filter-wrapper{position:absolute;top:0;right:0;padding:16px;z-index:1050}.filter-card{width:350px;background:#fff;border-radius:12px;padding:16px 18px;box-shadow:0 8px 30px #00000014;font-size:13px}.filter-header .title{font-weight:600;font-size:14px}.btn-close{border:none;background:transparent;font-size:16px;cursor:pointer}.form-label{font-size:12px;margin-bottom:4px}.form-select,.form-control{font-size:13px}.gap-2{gap:4px}.badge{padding:0 6px;border-radius:999px;font-size:11px;background:#e5f3ff;color:#007bff}input[type=checkbox]{width:16px!important;height:16px!important;margin:-2px 5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-600, #D0D5DD)!important;box-shadow:none;font-size:.5em;text-align:center;line-height:1em;background:#fff}input[type=checkbox]{outline:1px solid var(--primary-600, #00A3FF)!important;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:.5em;padding-left:3px;padding-top:10px;padding-right:0}.text-dark{color:#344054!important}\n"], dependencies: [{ kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$3.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$3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$3.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1$3.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] });
|
|
3918
3922
|
}
|
|
3919
3923
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TicketFilterPanelComponent, decorators: [{
|
|
3920
3924
|
type: Component,
|
|
3921
|
-
args: [{ selector: 'lib-ticket-filter-panel', template: "<!-- ticket-filter-panel.component.html -->\r\n<div class=\"filter-wrapper\" *ngIf=\"isOpen\">\r\n <div class=\"filter-card\">\r\n <div class=\"filter-header d-flex justify-content-between align-items-center mb-3\">\r\n <div class=\"title\">Filter Options</div>\r\n <!-- <button type=\"button\" class=\"btn-close\" (click)=\"close()\">\u2715</button> -->\r\n </div>\r\n\r\n <form [formGroup]=\"filterForm\">\r\n\r\n <div *ngIf=\"tab ==='internal'\" class=\"mb-3 position-relative\" (click)=\"$event.stopPropagation()\">\r\n\r\n <label class=\"form-label\">Ticket Type</label>\r\n <select class=\"form-select w-100\" formControlName=\"type\" (change)=\"onTicketTypeChange($event)\">\r\n <option disabled [ngValue]=\"null\">Select</option>\r\n <option value=\"store\">Store</option>\r\n <option value=\"internal\">Internal</option>\r\n </select>\r\n </div>\r\n <!-- Status -->\r\n<div class=\"mb-3 position-relative\" (click)=\"$event.stopPropagation()\">\r\n <label *ngIf=\"tab !=='internal'\" class=\"form-label\">Status</label>\r\n <label *ngIf=\"tab ==='internal'\" class=\"form-label\">Tango Status</label>\r\n <!-- Header / trigger -->\r\n <div\r\n class=\"status-select border rounded px-3 py-2 d-flex justify-content-between align-items-center\"\r\n (click)=\"toggleDropdown('status', $event)\"\r\n >\r\n <span *ngIf=\"!selectedStatuses.length\">Select</span>\r\n\r\n <span *ngIf=\"selectedStatuses.length === 1\">\r\n {{ selectedStatuses[0] }}\r\n </span>\r\n\r\n <span *ngIf=\"selectedStatuses.length > 1\" class=\"d-flex align-items-center\">\r\n <span>{{ selectedStatuses[0] }}</span>\r\n <span class=\"badge ms-2\">\r\n +{{ selectedStatuses.length - 1 }}\r\n </span>\r\n </span>\r\n\r\n </div>\r\n\r\n <!-- DROPDOWN PANEL (OVERLAY) -->\r\n <div\r\n class=\"status-dropdown position-absolute w-100 mt-1 border rounded p-1 bg-white\"\r\n style=\"z-index: 1000; max-height: 220px; overflow-y: auto;\"\r\n *ngIf=\"isDropdownOpen('status')\"\r\n (click)=\"$event.stopPropagation()\"\r\n >\r\n <!-- Select All -->\r\n <div class=\"form-check px-0 d-flex align-items-center mb-2\">\r\n <input\r\n type=\"checkbox\"\r\n class=\"form-check-input \"\r\n id=\"status-select-all\"\r\n [checked]=\"areAllStatusesSelected()\"\r\n (change)=\"onStatusSelectAllChange($event)\"\r\n />\r\n <label class=\"form-check-label text-dark ms-2\" for=\"status-select-all\">\r\n Select All\r\n </label>\r\n </div>\r\n\r\n\r\n <!-- Options -->\r\n <div\r\n class=\"form-check px-0 d-flex align-items-center mb-1\"\r\n *ngFor=\"let s of statusOptions\"\r\n >\r\n <input\r\n type=\"checkbox\"\r\n class=\"form-check-input \"\r\n [id]=\"'status-' + s\"\r\n [checked]=\"isStatusSelected(s)\"\r\n (change)=\"onStatusChange($event, s)\"\r\n />\r\n <label class=\"form-check-label text-dark ms-2\" [for]=\"'status-' + s\">\r\n {{ s }}\r\n </label>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n\r\n<div *ngIf=\"tab ==='internal'\" class=\"mb-3 position-relative\" (click)=\"$event.stopPropagation()\">\r\n <label class=\"form-label\">Ticket Status</label>\r\n\r\n <!-- Header / trigger -->\r\n <div\r\n class=\"status-select border rounded px-3 py-2 d-flex justify-content-between align-items-center\"\r\n (click)=\"toggleDropdown('ticketStatus', $event)\"\r\n >\r\n <span *ngIf=\"!selectedTicketStatuses.length\">Select</span>\r\n\r\n <span *ngIf=\"selectedTicketStatuses.length === 1\">\r\n {{ selectedTicketStatuses[0] }}\r\n </span>\r\n\r\n <span *ngIf=\"selectedTicketStatuses.length > 1\" class=\"d-flex align-items-center\">\r\n <span>{{ selectedTicketStatuses[0] }}</span>\r\n <span class=\"badge ms-2\">\r\n +{{ selectedTicketStatuses.length - 1 }}\r\n </span>\r\n </span>\r\n\r\n </div>\r\n\r\n <!-- DROPDOWN PANEL (OVERLAY) -->\r\n <div\r\n class=\"status-dropdown position-absolute w-100 mt-1 border rounded p-1 bg-white\"\r\n style=\"z-index: 1000; max-height: 220px; overflow-y: auto;\"\r\n *ngIf=\"isDropdownOpen('ticketStatus')\"\r\n (click)=\"$event.stopPropagation()\"\r\n >\r\n <!-- Select All -->\r\n <div class=\"form-check px-0 d-flex align-items-center mb-2\">\r\n <input\r\n type=\"checkbox\"\r\n class=\"form-check-input \"\r\n id=\"status-select-all\"\r\n [checked]=\"areAllTicketStatusesSelected()\"\r\n (change)=\"onTicketStatusSelectAllChange($event)\"\r\n />\r\n <label class=\"form-check-label text-dark ms-2\" for=\"status-select-all\">\r\n Select All\r\n </label>\r\n </div>\r\n\r\n\r\n <!-- Options -->\r\n <div\r\n class=\"form-check px-0 d-flex align-items-center mb-1\"\r\n *ngFor=\"let s of ticketStatusOptions\"\r\n >\r\n <input\r\n type=\"checkbox\"\r\n class=\"form-check-input \"\r\n [id]=\"'ticketStatus-' + s\"\r\n [checked]=\"isTicketStatusSelected(s)\"\r\n (change)=\"onTicketStatusChange($event, s)\"\r\n />\r\n <label class=\"form-check-label text-dark ms-2\" [for]=\"'ticketStatus-' + s\">\r\n {{ s }}\r\n </label>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n\r\n\r\n <!-- Reviewer accuracy -->\r\n <div class=\"mb-3\" *ngIf=\"showReviewerAccuracy\" (click)=\"closeAll()\">\r\n <label class=\"form-label\">Reviewer accuracy (%) by condition</label>\r\n <div class=\"d-flex gap-2\">\r\n <select class=\"form-select w-100\" formControlName=\"reviewerCondition\">\r\n <option disabled [ngValue]=\"null\">Select</option>\r\n <option *ngFor=\"let c of conditionOptions\" [ngValue]=\"c.value\">\r\n {{ c.label }}\r\n </option>\r\n </select>\r\n\r\n <!-- one or two inputs -->\r\n <ng-container *ngIf=\"isBetween('reviewerCondition'); else singleReviewer\">\r\n <input\r\n type=\"number\"\r\n min=\"1\"\r\n max=\"100\"\r\n class=\"form-control\"\r\n formControlName=\"reviewerFrom\"\r\n placeholder=\"From\" (input)=\"limitValue($event, 'reviewerFrom')\" />\r\n <input\r\n type=\"number\"\r\n min=\"1\"\r\n max=\"100\"\r\n class=\"form-control\"\r\n formControlName=\"reviewerTo\"\r\n placeholder=\"To\" (input)=\"limitValue($event, 'reviewerTo')\" />\r\n </ng-container>\r\n <ng-template #singleReviewer>\r\n <input\r\n type=\"number\"\r\n min=\"1\"\r\n max=\"100\"\r\n class=\"form-control\"\r\n formControlName=\"reviewerFrom\"\r\n placeholder=\"1 to 100%\" (input)=\"limitValue($event, 'reviewerFrom')\" />\r\n </ng-template>\r\n </div>\r\n </div>\r\n\r\n <!-- Approver accuracy -->\r\n <div class=\"mb-3\" *ngIf=\"showApproverAccuracy\" (click)=\"closeAll()\">\r\n <label class=\"form-label\">Approver accuracy (%) by condition</label>\r\n <div class=\"d-flex gap-2\">\r\n <select class=\"form-select w-100\" formControlName=\"approverCondition\">\r\n <option disabled [ngValue]=\"null\">Select</option>\r\n <option *ngFor=\"let c of conditionOptions\" [ngValue]=\"c.value\">\r\n {{ c.label }}\r\n </option>\r\n </select>\r\n\r\n <ng-container *ngIf=\"isBetween('approverCondition'); else singleApprover\">\r\n <input\r\n type=\"number\"\r\n min=\"1\"\r\n max=\"100\"\r\n class=\"form-control\"\r\n formControlName=\"approverFrom\"\r\n placeholder=\"From\" \r\n (input)=\"limitValue($event, 'approverFrom')\"/>\r\n <input\r\n type=\"number\"\r\n min=\"1\"\r\n max=\"100\"\r\n class=\"form-control\"\r\n formControlName=\"approverTo\"\r\n placeholder=\"To\" (input)=\"limitValue($event, 'approverTo')\" />\r\n </ng-container>\r\n <ng-template #singleApprover>\r\n <input\r\n type=\"number\"\r\n min=\"1\"\r\n max=\"100\"\r\n class=\"form-control\"\r\n formControlName=\"approverFrom\"\r\n placeholder=\"1 to 100%\" (input)=\"limitValue($event, 'approverFrom')\" />\r\n </ng-template>\r\n </div>\r\n </div>\r\n\r\n <!-- Tango accuracy -->\r\n <div class=\"mb-3\" *ngIf=\"showTangoAccuracy\" (click)=\"closeAll()\">\r\n <label class=\"form-label\">Tango accuracy (%) by condition</label>\r\n <div class=\"d-flex gap-2\">\r\n <select class=\"form-select w-100\" formControlName=\"tangoCondition\">\r\n <option disabled [ngValue]=\"null\">Select</option>\r\n <option *ngFor=\"let c of conditionOptions\" [ngValue]=\"c.value\">\r\n {{ c.label }}\r\n </option>\r\n </select>\r\n\r\n <ng-container *ngIf=\"isBetween('tangoCondition'); else singleTango\">\r\n <input\r\n type=\"number\"\r\n min=\"1\"\r\n max=\"100\"\r\n class=\"form-control\"\r\n formControlName=\"tangoFrom\"\r\n placeholder=\"From\" (input)=\"limitValue($event, 'tangoFrom')\" />\r\n <input\r\n type=\"number\"\r\n min=\"1\"\r\n max=\"100\"\r\n class=\"form-control\"\r\n formControlName=\"tangoTo\"\r\n placeholder=\"To\" (input)=\"limitValue($event, 'tangoTo')\" />\r\n </ng-container>\r\n <ng-template #singleTango>\r\n <input\r\n type=\"number\"\r\n min=\"1\"\r\n max=\"100\"\r\n class=\"form-control\"\r\n formControlName=\"tangoFrom\"\r\n placeholder=\"1 to 100%\" (input)=\"limitValue($event, 'tangoFrom')\" />\r\n </ng-template>\r\n </div>\r\n </div>\r\n<div\r\n class=\"mb-3 position-relative\"\r\n *ngIf=\"showReviewedBy\"\r\n (click)=\"$event.stopPropagation()\"\r\n>\r\n <label class=\"form-label\">Reviewed by</label>\r\n\r\n <!-- Trigger / display -->\r\n <div\r\n class=\"border rounded px-3 py-2 d-flex justify-content-between align-items-center\"\r\n (click)=\"toggleDropdown('reviewer', $event)\"\r\n >\r\n <!-- 0 selected -->\r\n <span *ngIf=\"!selectedReviewedBy.length\">\r\n Select\r\n </span>\r\n\r\n <!-- 1 selected -->\r\n <span *ngIf=\"selectedReviewedBy.length === 1\">\r\n {{ selectedReviewedBy[0] }}\r\n </span>\r\n\r\n <!-- >1 selected -->\r\n <span\r\n *ngIf=\"selectedReviewedBy.length > 1\"\r\n class=\"d-flex align-items-center\"\r\n >\r\n <span>{{ selectedReviewedBy[0] }}</span>\r\n <span class=\"badge ms-2\">\r\n +{{ selectedReviewedBy.length - 1 }}\r\n </span>\r\n </span>\r\n </div>\r\n\r\n<div\r\n *ngIf=\"isDropdownOpen('reviewer')\"\r\n class=\"position-absolute w-100 border rounded bg-white p-1 mt-1\"\r\n style=\"z-index: 1000; max-height: 220px; overflow-y: auto;\"\r\n (click)=\"$event.stopPropagation()\"\r\n>\r\n\r\n <!-- \uD83D\uDD0D Search box -->\r\n <!-- <div class=\"mb-2 px-0\">\r\n <input\r\n type=\"text\"\r\n class=\"form-control form-control-sm\"\r\n placeholder=\"Search by email\"\r\n [(ngModel)]=\"reviewerSearchTerm\"\r\n (click)=\"$event.stopPropagation()\"\r\n />\r\n </div> -->\r\n\r\n <!-- Select All -->\r\n <div class=\"form-check px-0 mb-2 d-flex align-items-center\">\r\n <input\r\n type=\"checkbox\"\r\n class=\"form-check-input\"\r\n id=\"reviewer-all\"\r\n [checked]=\"areAllReviewersSelected()\"\r\n (change)=\"onReviewerSelectAll($event)\"\r\n />\r\n <label for=\"reviewer-all\" class=\"form-check-label text-dark ms-2\">\r\n Select All\r\n </label>\r\n </div>\r\n\r\n <!-- Options \u2013 now use getter filteredReviewerList -->\r\n <div\r\n class=\"form-check mb-1 px-0 d-flex align-items-center\"\r\n *ngFor=\"let u of filteredReviewerList\"\r\n >\r\n <input\r\n class=\"form-check-input\"\r\n type=\"checkbox\"\r\n [id]=\"'rev-' + u.email\"\r\n [checked]=\"isReviewerSelected(u.email)\"\r\n (change)=\"onReviewerChange($event, u.email)\"\r\n />\r\n <label class=\"form-check-label text-dark ms-2\" [for]=\"'rev-' + u.email\">\r\n {{ u.email }}\r\n </label>\r\n </div>\r\n</div>\r\n\r\n\r\n</div>\r\n\r\n\r\n <!-- Approved By -->\r\n<div\r\n class=\"mb-3 position-relative\"\r\n *ngIf=\"showApprovedBy\"\r\n (click)=\"$event.stopPropagation()\"\r\n>\r\n <label class=\"form-label\">Approved by</label>\r\n\r\n <!-- Trigger / display -->\r\n <div\r\n class=\"border rounded px-3 py-2 d-flex justify-content-between align-items-center\"\r\n (click)=\"toggleDropdown('approver', $event)\"\r\n >\r\n <!-- 0 selected -->\r\n <span *ngIf=\"!selectedApprovedBy.length\">\r\n Select\r\n </span>\r\n\r\n <!-- 1 selected -->\r\n <span *ngIf=\"selectedApprovedBy.length === 1\">\r\n {{ selectedApprovedBy[0] }}\r\n </span>\r\n\r\n <!-- >1 selected -->\r\n <span\r\n *ngIf=\"selectedApprovedBy.length > 1\"\r\n class=\"d-flex align-items-center\"\r\n >\r\n <span>{{ selectedApprovedBy[0] }}</span>\r\n <span class=\"badge ms-2\">\r\n +{{ selectedApprovedBy.length - 1 }}\r\n </span>\r\n </span>\r\n\r\n </div>\r\n<!-- Dropdown panel -->\r\n<div\r\n *ngIf=\"isDropdownOpen('approver')\"\r\n class=\"position-absolute w-100 border rounded bg-white p-1 mt-1\"\r\n style=\"z-index: 1000; max-height: 220px; overflow-y: auto;\"\r\n (click)=\"$event.stopPropagation()\"\r\n>\r\n\r\n <!-- \uD83D\uDD0D Search box -->\r\n <!-- <div class=\"mb-2 px-0\">\r\n <input\r\n type=\"text\"\r\n class=\"form-control form-control-sm\"\r\n placeholder=\"Search by email\"\r\n [ngModel]=\"approverSearchTerm\"\r\n (ngModelChange)=\"onReviewerSearch($event)\"\r\n (click)=\"$event.stopPropagation()\"\r\n />\r\n </div> -->\r\n\r\n <!-- Select All -->\r\n <div class=\"form-check px-0 mb-2 d-flex align-items-center\">\r\n <input\r\n type=\"checkbox\"\r\n class=\"form-check-input\"\r\n id=\"reviewer-all\"\r\n [checked]=\"areAllReviewersSelected()\"\r\n (change)=\"onReviewerSelectAll($event)\"\r\n />\r\n <label for=\"reviewer-all\" class=\"form-check-label text-dark ms-2\">\r\n Select All\r\n </label>\r\n </div>\r\n\r\n <!-- Options (use filteredReviewerList instead of userList) -->\r\n <div\r\n class=\"form-check mb-1 px-0 d-flex align-items-center\"\r\n *ngFor=\"let u of filteredApproverList\"\r\n >\r\n <input\r\n class=\"form-check-input\"\r\n type=\"checkbox\"\r\n [id]=\"'rev-' + u.email\"\r\n [checked]=\"isReviewerSelected(u.email)\"\r\n (change)=\"onReviewerChange($event, u.email)\"\r\n />\r\n <label class=\"form-check-label text-dark ms-2\" [for]=\"'rev-' + u.email\">\r\n {{ u.email }}\r\n </label>\r\n </div>\r\n</div>\r\n\r\n <!-- Dropdown panel -->\r\n\r\n</div>\r\n\r\n\r\n <!-- Footer buttons -->\r\n <div class=\"d-flex justify-content-between w-100 mt-4\">\r\n <button type=\"button\" class=\"btn btn-outline w-50 me-1\" (click)=\"onReset()\">\r\n Reset\r\n </button>\r\n <button type=\"button\" class=\"btn btn-primary w-50 ms-1\" (click)=\"onApply()\">\r\n Apply\r\n </button>\r\n </div>\r\n </form>\r\n </div>\r\n</div>\r\n", styles: [".filter-wrapper{position:absolute;top:0;right:0;padding:16px;z-index:1050}.filter-card{width:350px;background:#fff;border-radius:12px;padding:16px 18px;box-shadow:0 8px 30px #00000014;font-size:13px}.filter-header .title{font-weight:600;font-size:14px}.btn-close{border:none;background:transparent;font-size:16px;cursor:pointer}.form-label{font-size:12px;margin-bottom:4px}.form-select,.form-control{font-size:13px}.gap-2{gap:4px}.badge{padding:0 6px;border-radius:999px;font-size:11px;background:#e5f3ff;color:#007bff}input[type=checkbox]{width:16px!important;height:16px!important;margin:-2px 5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-600, #D0D5DD)!important;box-shadow:none;font-size:.5em;text-align:center;line-height:1em;background:#fff}input[type=checkbox]{outline:1px solid var(--primary-600, #00A3FF)!important;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:.5em;padding-left:3px;padding-top:10px;padding-right:0}.text-dark{color:#344054!important}\n"] }]
|
|
3925
|
+
args: [{ selector: 'lib-ticket-filter-panel', template: "<!-- ticket-filter-panel.component.html -->\r\n<div class=\"filter-wrapper\" *ngIf=\"isOpen\">\r\n <div class=\"filter-card\">\r\n <div class=\"filter-header d-flex justify-content-between align-items-center mb-3\">\r\n <div class=\"title\">Filter Options</div>\r\n <!-- <button type=\"button\" class=\"btn-close\" (click)=\"close()\">\u2715</button> -->\r\n </div>\r\n\r\n <form [formGroup]=\"filterForm\">\r\n\r\n <div *ngIf=\"tab ==='internal'\" class=\"mb-3 position-relative\" (click)=\"$event.stopPropagation()\">\r\n\r\n <label class=\"form-label\">Ticket Type</label>\r\n <select class=\"form-select w-100\" formControlName=\"type\" (change)=\"onTicketTypeChange($event)\">\r\n <option disabled [ngValue]=\"null\">Select</option>\r\n <option value=\"store\">Store</option>\r\n <option value=\"internal\">Internal</option>\r\n </select>\r\n </div>\r\n <!-- Status -->\r\n<div class=\"mb-3 position-relative\" (click)=\"$event.stopPropagation()\">\r\n <label *ngIf=\"tab !=='internal'\" class=\"form-label\">Status</label>\r\n <label *ngIf=\"tab ==='internal'\" class=\"form-label\">Tango Status</label>\r\n <!-- Header / trigger -->\r\n <div\r\n class=\"status-select border rounded px-3 py-2 d-flex justify-content-between align-items-center\"\r\n (click)=\"toggleDropdown('status', $event)\"\r\n >\r\n <span *ngIf=\"!selectedStatuses.length\">Select</span>\r\n\r\n <span *ngIf=\"selectedStatuses.length === 1\">\r\n {{ selectedStatuses[0] }}\r\n </span>\r\n\r\n <span *ngIf=\"selectedStatuses.length > 1\" class=\"d-flex align-items-center\">\r\n <span>{{ selectedStatuses[0] }}</span>\r\n <span class=\"badge ms-2\">\r\n +{{ selectedStatuses.length - 1 }}\r\n </span>\r\n </span>\r\n\r\n </div>\r\n\r\n <!-- DROPDOWN PANEL (OVERLAY) -->\r\n <div\r\n class=\"status-dropdown position-absolute w-100 mt-1 border rounded p-1 bg-white\"\r\n style=\"z-index: 1000; max-height: 220px; overflow-y: auto;\"\r\n *ngIf=\"isDropdownOpen('status')\"\r\n (click)=\"$event.stopPropagation()\"\r\n >\r\n <!-- Select All -->\r\n <div class=\"form-check px-0 d-flex align-items-center mb-2\">\r\n <input\r\n type=\"checkbox\"\r\n class=\"form-check-input \"\r\n id=\"status-select-all\"\r\n [checked]=\"areAllStatusesSelected()\"\r\n (change)=\"onStatusSelectAllChange($event)\"\r\n />\r\n <label class=\"form-check-label text-dark ms-2\" for=\"status-select-all\">\r\n Select All\r\n </label>\r\n </div>\r\n\r\n\r\n <!-- Options -->\r\n <div\r\n class=\"form-check px-0 d-flex align-items-center mb-1\"\r\n *ngFor=\"let s of statusOptions\"\r\n >\r\n <input\r\n type=\"checkbox\"\r\n class=\"form-check-input \"\r\n [id]=\"'status-' + s\"\r\n [checked]=\"isStatusSelected(s)\"\r\n (change)=\"onStatusChange($event, s)\"\r\n />\r\n <label class=\"form-check-label text-dark ms-2\" [for]=\"'status-' + s\">\r\n {{ s }}\r\n </label>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n\r\n<div *ngIf=\"tab ==='internal'\" class=\"mb-3 position-relative\" (click)=\"$event.stopPropagation()\">\r\n <label class=\"form-label\">Ticket Status</label>\r\n\r\n <!-- Header / trigger -->\r\n <div\r\n class=\"status-select border rounded px-3 py-2 d-flex justify-content-between align-items-center\"\r\n (click)=\"toggleDropdown('ticketStatus', $event)\"\r\n >\r\n <span *ngIf=\"!selectedTicketStatuses.length\">Select</span>\r\n\r\n <span *ngIf=\"selectedTicketStatuses.length === 1\">\r\n {{ selectedTicketStatuses[0] }}\r\n </span>\r\n\r\n <span *ngIf=\"selectedTicketStatuses.length > 1\" class=\"d-flex align-items-center\">\r\n <span>{{ selectedTicketStatuses[0] }}</span>\r\n <span class=\"badge ms-2\">\r\n +{{ selectedTicketStatuses.length - 1 }}\r\n </span>\r\n </span>\r\n\r\n </div>\r\n\r\n <!-- DROPDOWN PANEL (OVERLAY) -->\r\n <div\r\n class=\"status-dropdown position-absolute w-100 mt-1 border rounded p-1 bg-white\"\r\n style=\"z-index: 1000; max-height: 220px; overflow-y: auto;\"\r\n *ngIf=\"isDropdownOpen('ticketStatus')\"\r\n (click)=\"$event.stopPropagation()\"\r\n >\r\n <!-- Select All -->\r\n <div class=\"form-check px-0 d-flex align-items-center mb-2\">\r\n <input\r\n type=\"checkbox\"\r\n class=\"form-check-input \"\r\n id=\"status-select-all\"\r\n [checked]=\"areAllTicketStatusesSelected()\"\r\n (change)=\"onTicketStatusSelectAllChange($event)\"\r\n />\r\n <label class=\"form-check-label text-dark ms-2\" for=\"status-select-all\">\r\n Select All\r\n </label>\r\n </div>\r\n\r\n\r\n <!-- Options -->\r\n <div\r\n class=\"form-check px-0 d-flex align-items-center mb-1\"\r\n *ngFor=\"let s of ticketStatusOptions\"\r\n >\r\n <input\r\n type=\"checkbox\"\r\n class=\"form-check-input \"\r\n [id]=\"'ticketStatus-' + s\"\r\n [checked]=\"isTicketStatusSelected(s)\"\r\n (change)=\"onTicketStatusChange($event, s)\"\r\n />\r\n <label class=\"form-check-label text-dark ms-2\" [for]=\"'ticketStatus-' + s\">\r\n {{ s }}\r\n </label>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n\r\n\r\n <!-- Reviewer accuracy -->\r\n <div class=\"mb-3\" *ngIf=\"showReviewerAccuracy\" (click)=\"closeAll()\">\r\n <label class=\"form-label\">Reviewer accuracy (%) by condition</label>\r\n <div class=\"d-flex gap-2\">\r\n <select class=\"form-select w-100\" formControlName=\"reviewerCondition\">\r\n <option disabled [ngValue]=\"null\">Select</option>\r\n <option *ngFor=\"let c of conditionOptions\" [ngValue]=\"c.value\">\r\n {{ c.label }}\r\n </option>\r\n </select>\r\n\r\n <!-- one or two inputs -->\r\n <ng-container *ngIf=\"isBetween('reviewerCondition'); else singleReviewer\">\r\n <input\r\n type=\"number\"\r\n min=\"1\"\r\n max=\"100\"\r\n class=\"form-control\"\r\n formControlName=\"reviewerFrom\"\r\n placeholder=\"From\" (input)=\"limitValue($event, 'reviewerFrom')\" />\r\n <input\r\n type=\"number\"\r\n min=\"1\"\r\n max=\"100\"\r\n class=\"form-control\"\r\n formControlName=\"reviewerTo\"\r\n placeholder=\"To\" (input)=\"limitValue($event, 'reviewerTo')\" />\r\n </ng-container>\r\n <ng-template #singleReviewer>\r\n <input\r\n type=\"number\"\r\n min=\"1\"\r\n max=\"100\"\r\n class=\"form-control\"\r\n formControlName=\"reviewerFrom\"\r\n placeholder=\"1 to 100%\" (input)=\"limitValue($event, 'reviewerFrom')\" />\r\n </ng-template>\r\n </div>\r\n </div>\r\n\r\n <!-- Approver accuracy -->\r\n <div class=\"mb-3\" *ngIf=\"showApproverAccuracy\" (click)=\"closeAll()\">\r\n <label class=\"form-label\">Approver accuracy (%) by condition</label>\r\n <div class=\"d-flex gap-2\">\r\n <select class=\"form-select w-100\" formControlName=\"approverCondition\">\r\n <option disabled [ngValue]=\"null\">Select</option>\r\n <option *ngFor=\"let c of conditionOptions\" [ngValue]=\"c.value\">\r\n {{ c.label }}\r\n </option>\r\n </select>\r\n\r\n <ng-container *ngIf=\"isBetween('approverCondition'); else singleApprover\">\r\n <input\r\n type=\"number\"\r\n min=\"1\"\r\n max=\"100\"\r\n class=\"form-control\"\r\n formControlName=\"approverFrom\"\r\n placeholder=\"From\" \r\n (input)=\"limitValue($event, 'approverFrom')\"/>\r\n <input\r\n type=\"number\"\r\n min=\"1\"\r\n max=\"100\"\r\n class=\"form-control\"\r\n formControlName=\"approverTo\"\r\n placeholder=\"To\" (input)=\"limitValue($event, 'approverTo')\" />\r\n </ng-container>\r\n <ng-template #singleApprover>\r\n <input\r\n type=\"number\"\r\n min=\"1\"\r\n max=\"100\"\r\n class=\"form-control\"\r\n formControlName=\"approverFrom\"\r\n placeholder=\"1 to 100%\" (input)=\"limitValue($event, 'approverFrom')\" />\r\n </ng-template>\r\n </div>\r\n </div>\r\n\r\n <!-- Tango accuracy -->\r\n <div class=\"mb-3\" *ngIf=\"showTangoAccuracy\" (click)=\"closeAll()\">\r\n <label class=\"form-label\">Tango accuracy (%) by condition</label>\r\n <div class=\"d-flex gap-2\">\r\n <select class=\"form-select w-100\" formControlName=\"tangoCondition\">\r\n <option disabled [ngValue]=\"null\">Select</option>\r\n <option *ngFor=\"let c of conditionOptions\" [ngValue]=\"c.value\">\r\n {{ c.label }}\r\n </option>\r\n </select>\r\n\r\n <ng-container *ngIf=\"isBetween('tangoCondition'); else singleTango\">\r\n <input\r\n type=\"number\"\r\n min=\"1\"\r\n max=\"100\"\r\n class=\"form-control\"\r\n formControlName=\"tangoFrom\"\r\n placeholder=\"From\" (input)=\"limitValue($event, 'tangoFrom')\" />\r\n <input\r\n type=\"number\"\r\n min=\"1\"\r\n max=\"100\"\r\n class=\"form-control\"\r\n formControlName=\"tangoTo\"\r\n placeholder=\"To\" (input)=\"limitValue($event, 'tangoTo')\" />\r\n </ng-container>\r\n <ng-template #singleTango>\r\n <input\r\n type=\"number\"\r\n min=\"1\"\r\n max=\"100\"\r\n class=\"form-control\"\r\n formControlName=\"tangoFrom\"\r\n placeholder=\"1 to 100%\" (input)=\"limitValue($event, 'tangoFrom')\" />\r\n </ng-template>\r\n </div>\r\n </div>\r\n<div\r\n class=\"mb-3 position-relative\"\r\n *ngIf=\"showReviewedBy\"\r\n (click)=\"$event.stopPropagation()\"\r\n>\r\n <label class=\"form-label\">Reviewed by</label>\r\n\r\n <!-- Trigger / display -->\r\n <div\r\n class=\"border rounded px-3 py-2 d-flex justify-content-between align-items-center\"\r\n (click)=\"toggleDropdown('reviewer', $event)\"\r\n >\r\n <!-- 0 selected -->\r\n <span *ngIf=\"!selectedReviewedBy.length\">\r\n Select\r\n </span>\r\n\r\n <!-- 1 selected -->\r\n <span *ngIf=\"selectedReviewedBy.length === 1\">\r\n {{ selectedReviewedBy[0] }}\r\n </span>\r\n\r\n <!-- >1 selected -->\r\n <span\r\n *ngIf=\"selectedReviewedBy.length > 1\"\r\n class=\"d-flex align-items-center\"\r\n >\r\n <span>{{ selectedReviewedBy[0] }}</span>\r\n <span class=\"badge ms-2\">\r\n +{{ selectedReviewedBy.length - 1 }}\r\n </span>\r\n </span>\r\n </div>\r\n\r\n<div\r\n *ngIf=\"isDropdownOpen('reviewer')\"\r\n class=\"position-absolute w-100 border rounded bg-white p-1 mt-1\"\r\n style=\"z-index: 1000; max-height: 220px; overflow-y: auto;\"\r\n (click)=\"$event.stopPropagation()\"\r\n>\r\n\r\n <!-- \uD83D\uDD0D Search box -->\r\n <div class=\"mb-2 px-0\">\r\n <input\r\n type=\"text\"\r\n class=\"form-control form-control-sm\"\r\n placeholder=\"Search by email\"\r\n [(ngModel)]=\"reviewerSearchTerm\"\r\n [ngModelOptions]=\"{standalone: true}\"\r\n (click)=\"$event.stopPropagation()\"\r\n />\r\n </div>\r\n\r\n <!-- Select All -->\r\n <div class=\"form-check px-0 mb-2 d-flex align-items-center\">\r\n <input\r\n type=\"checkbox\"\r\n class=\"form-check-input\"\r\n id=\"reviewer-all\"\r\n [checked]=\"areAllReviewersSelected()\"\r\n (change)=\"onReviewerSelectAll($event)\"\r\n />\r\n <label for=\"reviewer-all\" class=\"form-check-label text-dark ms-2\">\r\n Select All\r\n </label>\r\n </div>\r\n\r\n <!-- Options \u2013 now use getter filteredReviewerList -->\r\n <div\r\n class=\"form-check mb-1 px-0 d-flex align-items-center\"\r\n *ngFor=\"let u of filteredReviewerList\"\r\n >\r\n <input\r\n class=\"form-check-input\"\r\n type=\"checkbox\"\r\n [id]=\"'rev-' + u.email\"\r\n [checked]=\"isReviewerSelected(u.email)\"\r\n (change)=\"onReviewerChange($event, u.email)\"\r\n />\r\n <label class=\"form-check-label text-dark ms-2\" [for]=\"'rev-' + u.email\">\r\n {{ u.email }}\r\n </label>\r\n </div>\r\n</div>\r\n\r\n\r\n</div>\r\n\r\n\r\n <!-- Approved By -->\r\n<div\r\n class=\"mb-3 position-relative\"\r\n *ngIf=\"showApprovedBy\"\r\n (click)=\"$event.stopPropagation()\"\r\n>\r\n <label class=\"form-label\">Approved by</label>\r\n\r\n <!-- Trigger / display -->\r\n <div\r\n class=\"border rounded px-3 py-2 d-flex justify-content-between align-items-center\"\r\n (click)=\"toggleDropdown('approver', $event)\"\r\n >\r\n <!-- 0 selected -->\r\n <span *ngIf=\"!selectedApprovedBy.length\">\r\n Select\r\n </span>\r\n\r\n <!-- 1 selected -->\r\n <span *ngIf=\"selectedApprovedBy.length === 1\">\r\n {{ selectedApprovedBy[0] }}\r\n </span>\r\n\r\n <!-- >1 selected -->\r\n <span\r\n *ngIf=\"selectedApprovedBy.length > 1\"\r\n class=\"d-flex align-items-center\"\r\n >\r\n <span>{{ selectedApprovedBy[0] }}</span>\r\n <span class=\"badge ms-2\">\r\n +{{ selectedApprovedBy.length - 1 }}\r\n </span>\r\n </span>\r\n\r\n </div>\r\n<!-- Dropdown panel -->\r\n<div\r\n *ngIf=\"isDropdownOpen('approver')\"\r\n class=\"position-absolute w-100 border rounded bg-white p-1 mt-1\"\r\n style=\"z-index: 1000; max-height: 220px; overflow-y: auto;\"\r\n (click)=\"$event.stopPropagation()\"\r\n>\r\n\r\n <!-- \uD83D\uDD0D Search box -->\r\n <div class=\"mb-2 px-0\">\r\n <input\r\n type=\"text\"\r\n class=\"form-control form-control-sm\"\r\n placeholder=\"Search by email\"\r\n [(ngModel)]=\"approverSearchTerm\"\r\n [ngModelOptions]=\"{standalone: true}\"\r\n (click)=\"$event.stopPropagation()\"\r\n />\r\n <!-- email.includes(term) || name.includes(term) -->\r\n </div>\r\n\r\n <!-- Select All -->\r\n <div class=\"form-check px-0 mb-2 d-flex align-items-center\">\r\n <input\r\n type=\"checkbox\"\r\n class=\"form-check-input\"\r\n id=\"reviewer-all\"\r\n [checked]=\"areAllApproversSelected()\"\r\n (change)=\"onApproverSelectAll($event)\"\r\n />\r\n <label for=\"reviewer-all\" class=\"form-check-label text-dark ms-2\">\r\n Select All\r\n </label>\r\n </div>\r\n\r\n <!-- Options (use filteredReviewerList instead of userList) -->\r\n <div\r\n class=\"form-check mb-1 px-0 d-flex align-items-center\"\r\n *ngFor=\"let u of filteredApproverList\"\r\n >\r\n <input\r\n class=\"form-check-input\"\r\n type=\"checkbox\"\r\n [id]=\"'rev-' + u.email\"\r\n [checked]=\"isApproverSelected(u.email)\"\r\n (change)=\"onApproverChange($event, u.email)\"\r\n />\r\n <label class=\"form-check-label text-dark ms-2\" [for]=\"'rev-' + u.email\">\r\n {{ u.email }}\r\n </label>\r\n </div>\r\n</div>\r\n\r\n <!-- Dropdown panel -->\r\n\r\n</div>\r\n\r\n\r\n <!-- Footer buttons -->\r\n <div class=\"d-flex justify-content-between w-100 mt-4\">\r\n <button type=\"button\" class=\"btn btn-outline w-50 me-1\" (click)=\"onReset()\">\r\n Reset\r\n </button>\r\n <button type=\"button\" class=\"btn btn-primary w-50 ms-1\" (click)=\"onApply()\">\r\n Apply\r\n </button>\r\n </div>\r\n </form>\r\n </div>\r\n</div>\r\n", styles: [".filter-wrapper{position:absolute;top:0;right:0;padding:16px;z-index:1050}.filter-card{width:350px;background:#fff;border-radius:12px;padding:16px 18px;box-shadow:0 8px 30px #00000014;font-size:13px}.filter-header .title{font-weight:600;font-size:14px}.btn-close{border:none;background:transparent;font-size:16px;cursor:pointer}.form-label{font-size:12px;margin-bottom:4px}.form-select,.form-control{font-size:13px}.gap-2{gap:4px}.badge{padding:0 6px;border-radius:999px;font-size:11px;background:#e5f3ff;color:#007bff}input[type=checkbox]{width:16px!important;height:16px!important;margin:-2px 5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-600, #D0D5DD)!important;box-shadow:none;font-size:.5em;text-align:center;line-height:1em;background:#fff}input[type=checkbox]{outline:1px solid var(--primary-600, #00A3FF)!important;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:.5em;padding-left:3px;padding-top:10px;padding-right:0}.text-dark{color:#344054!important}\n"] }]
|
|
3922
3926
|
}], ctorParameters: () => [{ type: i1$3.FormBuilder }, { type: i0.ElementRef }, { type: TicketService }], propDecorators: { apply: [{
|
|
3923
3927
|
type: Output
|
|
3924
3928
|
}], panelClosed: [{
|