tango-app-ui-manage-tickets 3.7.0-beta.76 → 3.7.0-beta.78
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/audit-mapping-list/audit-mapping-list.component.mjs +6 -1
- package/esm2022/lib/components/audit-retag/audit-retag.component.mjs +1 -17
- package/esm2022/lib/components/start-audit/start-audit.component.mjs +4 -1
- package/esm2022/lib/components/ticket-filter-panel/ticket-filter-panel.component.mjs +9 -5
- package/fesm2022/tango-app-ui-manage-tickets.mjs +16 -20
- 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: [{
|
|
@@ -8288,6 +8292,9 @@ class StartAuditComponent {
|
|
|
8288
8292
|
insertObj.img_id = filteredData[0]?.img_id;
|
|
8289
8293
|
insertObj.img_name = filteredData[0]?.img_name;
|
|
8290
8294
|
insertObj.img_path = filteredData[0]?.img_path;
|
|
8295
|
+
insertObj.count = 1;
|
|
8296
|
+
insertObj.dropped = false;
|
|
8297
|
+
insertObj.selected = false;
|
|
8291
8298
|
insertObj.mappedid = [
|
|
8292
8299
|
{
|
|
8293
8300
|
img_id: filteredData[0]?.img_id,
|
|
@@ -9198,6 +9205,8 @@ class AuditMappingListComponent {
|
|
|
9198
9205
|
sessionStorage.setItem(Name, JSON.stringify(imageData));
|
|
9199
9206
|
var oldretag = JSON.parse(sessionStorage.getItem('retag') || '{}');
|
|
9200
9207
|
var newtag = [];
|
|
9208
|
+
splicedvalue[0].selected = false;
|
|
9209
|
+
console.log("🚀 ~ AuditMappingListComponent ~ dropforretag ~ splicedvalue:", splicedvalue);
|
|
9201
9210
|
if (Number(oldretag.length) > 0) {
|
|
9202
9211
|
newtag = [...oldretag, ...splicedvalue];
|
|
9203
9212
|
}
|
|
@@ -9214,6 +9223,9 @@ class AuditMappingListComponent {
|
|
|
9214
9223
|
mainData.count = mainData.mappedid.length;
|
|
9215
9224
|
}
|
|
9216
9225
|
});
|
|
9226
|
+
const jsonString = JSON.stringify(this.auditmappingdata);
|
|
9227
|
+
const compressedData = LZString.compress(jsonString);
|
|
9228
|
+
sessionStorage.setItem('audit', compressedData);
|
|
9217
9229
|
}
|
|
9218
9230
|
}
|
|
9219
9231
|
else if (Name != null) {
|
|
@@ -9499,7 +9511,6 @@ class AuditRetagComponent {
|
|
|
9499
9511
|
// match by event.key (preferred) OR by event.code like 'KeyJ'
|
|
9500
9512
|
return pressed === mapKey || event.code === `Key${mapKey.toUpperCase()}`;
|
|
9501
9513
|
});
|
|
9502
|
-
console.log(matched);
|
|
9503
9514
|
if (!matched)
|
|
9504
9515
|
return;
|
|
9505
9516
|
if (matched) {
|
|
@@ -9540,7 +9551,6 @@ class AuditRetagComponent {
|
|
|
9540
9551
|
this.selectedType = this.route.snapshot.paramMap.get('type');
|
|
9541
9552
|
}
|
|
9542
9553
|
ngOnInit() {
|
|
9543
|
-
console.log("*************");
|
|
9544
9554
|
this.getAuditConfig();
|
|
9545
9555
|
if (this.retagimage.length == 0) {
|
|
9546
9556
|
this.submitvalue = false;
|
|
@@ -9553,7 +9563,6 @@ class AuditRetagComponent {
|
|
|
9553
9563
|
this.$api.getAuditconfig(filedata?.filedetails?.clientId).pipe(takeUntil(this.destroy$)).subscribe({
|
|
9554
9564
|
next: (res) => {
|
|
9555
9565
|
if (res && res?.code == 200) {
|
|
9556
|
-
console.log(res.data.footfallDirectoryConfigs.taggingLimitation);
|
|
9557
9566
|
this.category = res.data.footfallDirectoryConfigs.taggingLimitation;
|
|
9558
9567
|
this.initial_data_loading();
|
|
9559
9568
|
}
|
|
@@ -9585,12 +9594,10 @@ class AuditRetagComponent {
|
|
|
9585
9594
|
this.timerService.clearTimer();
|
|
9586
9595
|
}
|
|
9587
9596
|
initial_data_loading() {
|
|
9588
|
-
console.log("------------");
|
|
9589
9597
|
if ('audit' in sessionStorage) {
|
|
9590
9598
|
let stringifydata = sessionStorage.getItem('audit') || '{}';
|
|
9591
9599
|
const decompressedData = LZString.decompress(stringifydata);
|
|
9592
9600
|
var auditdata = JSON.parse(decompressedData || '{}');
|
|
9593
|
-
console.log("🚀 ~ AuditRetagComponent ~ initial_data_loading ~ auditdata:", auditdata);
|
|
9594
9601
|
if (auditdata.length > 0) {
|
|
9595
9602
|
this.auditmappingdata = auditdata;
|
|
9596
9603
|
this.customercount = this.auditmappingdata.length;
|
|
@@ -9602,7 +9609,6 @@ class AuditRetagComponent {
|
|
|
9602
9609
|
}
|
|
9603
9610
|
this.category.map((data) => {
|
|
9604
9611
|
var count = JSON.parse(sessionStorage.getItem(data.type) || '{}');
|
|
9605
|
-
console.log("🚀 ~ AuditRetagComponent ~ initial_data_loading ~ count:", count);
|
|
9606
9612
|
data.count = count?.length;
|
|
9607
9613
|
});
|
|
9608
9614
|
if ('retag' in sessionStorage) {
|
|
@@ -9644,7 +9650,6 @@ class AuditRetagComponent {
|
|
|
9644
9650
|
sessionStorage.setItem(data?.type, JSON.stringify(data?.value && data?.value.length > 0 ? data?.value : []));
|
|
9645
9651
|
});
|
|
9646
9652
|
let customerData = res?.data?.result?.draftedData?.filter((x) => x.type === 'customer');
|
|
9647
|
-
console.log("🚀 ~ AuditRetagComponent ~ getmappingdata ~ customerData:", customerData);
|
|
9648
9653
|
this.auditmappingdata = customerData[0]?.value;
|
|
9649
9654
|
const jsonString = JSON.stringify(customerData[0]?.value);
|
|
9650
9655
|
const compressedData = LZString.compress(jsonString);
|
|
@@ -9694,7 +9699,6 @@ class AuditRetagComponent {
|
|
|
9694
9699
|
value: sessionvalue && sessionvalue.length > 0 ? sessionvalue : []
|
|
9695
9700
|
});
|
|
9696
9701
|
});
|
|
9697
|
-
console.log("🚀 ~ StartAuditComponent ~ Reviewdata ~ storedData:", storedData);
|
|
9698
9702
|
var inserobj = {
|
|
9699
9703
|
storeId: totalfile?.filedetails?.storeId,
|
|
9700
9704
|
auditId: totalfile?.auditId ? totalfile?.auditId : totalfile?.filedetails.auditId,
|
|
@@ -9744,13 +9748,11 @@ class AuditRetagComponent {
|
|
|
9744
9748
|
else {
|
|
9745
9749
|
sessionStorage.setItem('duplicate', JSON.stringify(findone));
|
|
9746
9750
|
let filedata = JSON.parse(sessionStorage.getItem('duplicate') || '{}');
|
|
9747
|
-
console.log("🚀 ~ StartAuditComponent ~ dropImage ~ filedata:", filedata);
|
|
9748
9751
|
}
|
|
9749
9752
|
this.category.map((data) => {
|
|
9750
9753
|
var count = JSON.parse(sessionStorage.getItem(data.type) || '{}');
|
|
9751
9754
|
data.count = count?.length;
|
|
9752
9755
|
});
|
|
9753
|
-
console.log("🚀 ~ AuditRetagComponent ~ dropretag ~ this.category:", this.category);
|
|
9754
9756
|
}
|
|
9755
9757
|
else {
|
|
9756
9758
|
data.count = data.count + 1,
|
|
@@ -9820,7 +9822,6 @@ class AuditRetagComponent {
|
|
|
9820
9822
|
const htmltag = event.dataTransfer.getData('text/html');
|
|
9821
9823
|
var Name = getTagNameFromHTML(htmltag);
|
|
9822
9824
|
const dropZone = event.target;
|
|
9823
|
-
// console.log(Name)
|
|
9824
9825
|
// debugger
|
|
9825
9826
|
if (Name == 'customer' || Name == 'retag') {
|
|
9826
9827
|
event.preventDefault();
|
|
@@ -9838,11 +9839,9 @@ class AuditRetagComponent {
|
|
|
9838
9839
|
}
|
|
9839
9840
|
this.retagimage = this.retagimage.filter((imgData) => imgData.img_id !== draggedImageId);
|
|
9840
9841
|
sessionStorage.setItem('retag', JSON.stringify(this.retagimage));
|
|
9841
|
-
console.log("🚀 ~ AuditRetagComponent ~ dropImage ~ findone:", findone);
|
|
9842
9842
|
if (findone.length > 0) {
|
|
9843
9843
|
data.mappedid = [...data.mappedid, ...findone[0].mappedid];
|
|
9844
9844
|
data.count = data.mappedid.length;
|
|
9845
|
-
console.log("🚀 ~ AuditRetagComponent ~ dropImage ~ data.mappedid:", data.mappedid);
|
|
9846
9845
|
if ('duplicate' in sessionStorage) {
|
|
9847
9846
|
let filedata = JSON.parse(sessionStorage.getItem('duplicate') || '{}');
|
|
9848
9847
|
filedata = [...filedata, ...findone];
|
|
@@ -9851,7 +9850,6 @@ class AuditRetagComponent {
|
|
|
9851
9850
|
else {
|
|
9852
9851
|
sessionStorage.setItem('duplicate', JSON.stringify(findone));
|
|
9853
9852
|
let filedata = JSON.parse(sessionStorage.getItem('duplicate') || '{}');
|
|
9854
|
-
console.log("🚀 ~ StartAuditComponent ~ dropImage ~ filedata:", filedata);
|
|
9855
9853
|
}
|
|
9856
9854
|
}
|
|
9857
9855
|
else {
|
|
@@ -9861,11 +9859,9 @@ class AuditRetagComponent {
|
|
|
9861
9859
|
}
|
|
9862
9860
|
});
|
|
9863
9861
|
if (Name == 'customer') {
|
|
9864
|
-
console.log(this.auditmappingdata.findIndex(({ img_id }) => img_id == draggedImageId));
|
|
9865
9862
|
this.auditmappingdata.splice(this.auditmappingdata.findIndex(({ img_id }) => img_id == draggedImageId), 1);
|
|
9866
9863
|
this.auditmappingdata.map((data) => data.selected = false);
|
|
9867
9864
|
}
|
|
9868
|
-
console.log("🚀 ~ AuditRetagComponent ~ dropImage ~ this.auditmappingdata:", this.auditmappingdata);
|
|
9869
9865
|
this.customercount = this.auditmappingdata?.length;
|
|
9870
9866
|
const jsonString = JSON.stringify(this.auditmappingdata);
|
|
9871
9867
|
const compressedData = LZString.compress(jsonString);
|