tango-app-ui-manage-tickets 3.7.0-beta.69 → 3.7.0-beta.70

package/src/lib/components/ticket-filter-panel/ticket-filter-panel.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TicketFilterPanelComponent } from './ticket-filter-panel.component';
+
+describe('TicketFilterPanelComponent', () => {
+  let component: TicketFilterPanelComponent;
+  let fixture: ComponentFixture<TicketFilterPanelComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [TicketFilterPanelComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(TicketFilterPanelComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/components/ticket-filter-panel/ticket-filter-panel.component.ts

@@ -0,0 +1,493 @@
+import { Component, ElementRef, EventEmitter, HostListener, Input, OnChanges, Output, SimpleChanges } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { TicketService } from '../../services/ticket.service';
+
+type Condition = 'gt' | 'lt' | 'gte' | 'lte' | 'between';
+
+@Component({
+  selector: 'lib-ticket-filter-panel',
+  templateUrl: './ticket-filter-panel.component.html',
+  styleUrl: './ticket-filter-panel.component.scss'
+})
+export class TicketFilterPanelComponent implements OnChanges {
+   @Output() apply = new EventEmitter<any>();
+  @Output() panelClosed = new EventEmitter<void>();   // ✅ not `close`
+  @Input() permissionType: string | null = null;
+@Input() userType: string | null = null; // e.g. 'tango' or others
+@Input() client :any;
+ @HostListener('document:click', ['$event'])
+onDocumentClick(event: MouseEvent): void {
+
+  // 1️⃣ Always close dropdowns first
+  this.dropdownState.status = false;
+  this.dropdownState.reviewer = false;
+  this.dropdownState.approver = false;
+
+  // 2️⃣ If filter is not open → nothing to close
+  if (!this.isOpen) return;
+
+  // 3️⃣ Check if clicked inside filter card
+  const clickedInside = this.eRef.nativeElement.contains(event.target);
+
+  // 4️⃣ If clicked OUTSIDE → close entire filter panel
+  if (!clickedInside) {
+    this.isOpen = false;
+    this.panelClosed.emit();
+   this.filterForm.reset({
+    status: [],
+    reviewerCondition: null,
+    reviewerFrom: null,
+    reviewerTo: null,
+
+    approverCondition: null,
+    approverFrom: null,
+    approverTo: null,
+
+    tangoCondition: null,
+    tangoFrom: null,
+    tangoTo: null,
+
+    reviewedBy: [],
+    approvedBy: []
+  });
+this.onReset();
+  }
+}
+  isOpen = false;                                     // controls visibility
+
+  // called from parent via #filterPanel.open()
+  open() {
+    this.isOpen = true;
+  }
+
+  // called from close button inside the panel
+  close() {
+    this.isOpen = false;
+    this.panelClosed.emit();
+  }
+
+  showPanel = false;           // you can also control this from parent
+
+statusOptions: any[] = [
+  'Open',
+  'In-Progress',
+  'Closed',
+  // 'Open - Accuracy Issue',
+  // 'Closed - Accuracy Issue',
+  'Expired',
+];
+
+
+  conditionOptions = [
+    { value: 'gt', label: '> Greater than' },
+    { value: 'lt', label: '< Lesser than' },
+    { value: 'gte', label: '>= Greater than or equal to' },
+    { value: 'lte', label: '<= Lesser than or equal to' },
+    { value: 'between', label: 'Between' },
+  ];
+
+  filterForm: FormGroup;
+
+  constructor(private fb: FormBuilder,private eRef: ElementRef,private service:TicketService) {
+    this.filterForm = this.fb.group({
+      status: [[]],
+
+      reviewerCondition: [null as Condition | null],
+      reviewerFrom: [null,[Validators.min(0), Validators.max(100)]],
+      reviewerTo: [null,[Validators.min(0), Validators.max(100)]],
+
+      approverCondition: [null as Condition | null],
+      approverFrom: [null,[Validators.min(0), Validators.max(100)]],
+      approverTo: [null,[Validators.min(0), Validators.max(100)]],
+
+      tangoCondition: [null as Condition | null],
+      tangoFrom: [null,[Validators.min(0), Validators.max(100)]],
+      tangoTo: [null,[Validators.min(0), Validators.max(100)]],
+
+      reviewedBy: [[]],
+  approvedBy: [[]],  
+    });
+    this.onReset();
+  }
+limitValue(event: any, controlName: string) {
+  let value = Number(event.target.value);
+
+  if (value < 0) value = 0;
+  if (value > 100) value = 100;
+
+  event.target.value = value;
+  this.filterForm.get(controlName)?.setValue(value, { emitEvent: false });
+}
+
+get isTango(): boolean {
+  return this.userType === 'tango';
+}
+
+// SHOW / HIDE RULES
+
+// Reviewer accuracy and "Reviewed by" visible for tango + reviewer
+get showReviewerAccuracy(): boolean {
+  return this.isTango || this.permissionType === 'review';
+}
+
+get showReviewedBy(): boolean {
+  return  this.permissionType === 'review';
+}
+
+// Approver accuracy and "Approved by" visible for tango + approver
+get showApproverAccuracy(): boolean {
+  return this.isTango || this.permissionType === 'approve';
+}
+
+get showApprovedBy(): boolean {
+  return  this.permissionType === 'approve';
+}
+
+// Tango accuracy only for tango users
+get showTangoAccuracy(): boolean {
+  return this.isTango;
+}
+statusDropdownOpen = false;
+isStatusSelected(status: string): boolean {
+  const selected: string[] = this.filterForm.value.status || [];
+  return selected.includes(status);
+}
+
+onStatusChange(event: Event, status: string) {
+  const checkbox = event.target as HTMLInputElement;
+  const selected: string[] = this.filterForm.value.status || [];
+  let next: string[];
+
+  if (checkbox.checked) {
+    next = selected.includes(status) ? selected : [...selected, status];
+  } else {
+    next = selected.filter(s => s !== status);
+  }
+
+  this.filterForm.patchValue({ status: next });
+}
+
+toggleStatusDropdown(event?: MouseEvent) {
+  if (event) {
+    event.stopPropagation(); // avoid document click closing it
+  }
+  this.statusDropdownOpen = !this.statusDropdownOpen;
+}
+
+// Are all statuses currently selected?
+areAllStatusesSelected(): boolean {
+  const selected: string[] = this.filterForm.value.status || [];
+  return selected.length > 0 && selected.length === this.statusOptions.length;
+}
+
+// Handle "Select All" checkbox change
+onStatusSelectAllChange(event: Event) {
+  const checkbox = event.target as HTMLInputElement;
+
+  if (checkbox.checked) {
+    // Select every status
+    this.filterForm.patchValue({ status: [...this.statusOptions] });
+  } else {
+    // Clear all
+    this.filterForm.patchValue({ status: [] });
+  }
+}
+get selectedStatuses(): string[] {
+  return this.filterForm.value.status || [];
+}
+
+  isBetween(controlName: string): boolean {
+    return this.filterForm.get(controlName)?.value === 'between';
+  }
+ngOnChanges(changes: SimpleChanges): void {
+  if (changes['client'] || changes['permissionType'] || changes['userType']) {
+    this.loadReviewerList();
+  }
+}
+// full user list you already have
+userList: any[] = [];
+
+
+reviewerSearchTerm: string = '';
+
+// ✅ simple computed list for *ngFor
+get filteredReviewerList(): { email: string; name?: string }[] {
+  const term = (this.reviewerSearchTerm || '').trim().toLowerCase();
+
+  if (!term) {
+    return this.userList;
+  }
+
+  return this.userList.filter(u => {
+    const email = (u.email || '').toLowerCase();
+    const name = (u.name || '').toLowerCase();
+    return email.includes(term) || name.includes(term);
+  });
+}
+approverSearchTerm:any;
+get filteredApproverList(): any[] {
+  const term = (this.approverSearchTerm || '').trim().toLowerCase();
+  if (!term) {
+    return this.userList;
+  }
+
+  return this.userList.filter((u: any) => {
+    const email = (u.email || '').toLowerCase();
+    const name = (u.name || '').toLowerCase();
+    return email.includes(term) || name.includes(term);
+  });
+}
+
+onApproverSearch(value: string) {
+  this.approverSearchTerm = value;
+}
+private loadReviewerList(): void {
+  if (!this.client) {
+    this.userList = [];
+    return;
+  }
+
+  let type: string;
+
+  if (this.userType === 'tango') {
+    type = 'tango';    // or 'all'
+  } else if (this.permissionType === 'review') {
+    type = 'review';
+  } else if (this.permissionType === 'approve') {
+    type = 'approve';
+  } else {
+    this.userList = [];
+    return;
+  }
+
+  this.service.getReviewerApi(this.client, type,'').subscribe({
+    next: (res: any) => {
+      if (res && res.code === 200) {
+        this.userList = res.data;
+      } else {
+        this.userList = [];
+      }
+    },
+    error: () => {
+      this.userList = [];
+    }
+  });
+}
+
+// open flags
+reviewerDropdownOpen = false;
+approverDropdownOpen = false;
+
+// convenience getters
+get selectedReviewedBy(): string[] {
+  return this.filterForm.value.reviewedBy || [];
+}
+
+get selectedApprovedBy(): string[] {
+  return this.filterForm.value.approvedBy || [];
+}
+
+// --- Reviewed By helpers ---
+
+toggleReviewerDropdown(event?: MouseEvent) {
+  if (event) event.stopPropagation();
+  this.reviewerDropdownOpen = !this.reviewerDropdownOpen;
+}
+
+isReviewerSelected(email: string): boolean {
+  return this.selectedReviewedBy.includes(email);
+}
+
+onReviewerChange(event: Event, email: string) {
+  const checkbox = event.target as HTMLInputElement;
+  const selected = [...this.selectedReviewedBy];
+
+  if (checkbox.checked) {
+    if (!selected.includes(email)) selected.push(email);
+  } else {
+    const i = selected.indexOf(email);
+    if (i >= 0) selected.splice(i, 1);
+  }
+
+  this.filterForm.patchValue({ reviewedBy: selected });
+}
+
+areAllReviewersSelected(): boolean {
+  return (
+    this.userList.length > 0 &&
+    this.selectedReviewedBy.length === this.userList.length
+  );
+}
+
+onReviewerSelectAll(event: Event) {
+  const checkbox = event.target as HTMLInputElement;
+
+  if (checkbox.checked) {
+    this.filterForm.patchValue({
+      reviewedBy: this.userList.map((u:any) => u.email),
+    });
+  } else {
+    this.filterForm.patchValue({ reviewedBy: [] });
+  }
+}
+
+// --- Approved By helpers ---
+
+toggleApproverDropdown(event?: MouseEvent) {
+  if (event) event.stopPropagation();
+  this.approverDropdownOpen = !this.approverDropdownOpen;
+}
+
+isApproverSelected(email: string): boolean {
+  return this.selectedApprovedBy.includes(email);
+}
+
+onApproverChange(event: Event, email: string) {
+  const checkbox = event.target as HTMLInputElement;
+  const selected = [...this.selectedApprovedBy];
+
+  if (checkbox.checked) {
+    if (!selected.includes(email)) selected.push(email);
+  } else {
+    const i = selected.indexOf(email);
+    if (i >= 0) selected.splice(i, 1);
+  }
+
+  this.filterForm.patchValue({ approvedBy: selected });
+}
+
+areAllApproversSelected(): boolean {
+  return (
+    this.userList.length > 0 &&
+    this.selectedApprovedBy.length === this.userList.length
+  );
+}
+
+onApproverSelectAll(event: Event) {
+  const checkbox = event.target as HTMLInputElement;
+
+  if (checkbox.checked) {
+    this.filterForm.patchValue({
+      approvedBy: this.userList.map((u:any) => u.email),
+    });
+  } else {
+    this.filterForm.patchValue({ approvedBy: [] });
+  }
+}
+
+onReset(): void {
+  this.filterForm.reset({
+    status: [],
+    reviewerCondition: null,
+    reviewerFrom: null,
+    reviewerTo: null,
+
+    approverCondition: null,
+    approverFrom: null,
+    approverTo: null,
+
+    tangoCondition: null,
+    tangoFrom: null,
+    tangoTo: null,
+
+    reviewedBy: [],
+    approvedBy: []
+  });
+
+  // 2️⃣ Reset search terms
+  this.reviewerSearchTerm = '';
+  this.approverSearchTerm = '';
+
+  // 3️⃣ Build empty payload to send back
+  const payload = {
+    filterByStatus: [],
+    filterByReviewer: null,
+    filterByApprover: null,
+    filterByTango: null,
+    filterByReviewedBy: [],
+    fileterByApprovedBy: []
+  };
+
+  // 4️⃣ Emit the now-empty filter result
+  this.apply.emit(payload);
+
+  // 5️⃣ Close the filter panel
+  this.close();
+}
+
+private mapAccuracy(
+  condition: Condition | null,
+  from: number | null,
+  to: number | null
+): string | null {
+
+  // nothing selected
+  if (!condition || from == null) return null;
+
+  // "between" → "90 to 100"
+  if (condition === 'between') {
+    if (to == null) return null;
+    return `${from} to ${to}`;
+  }
+
+  // other conditions (gt, lt, gte, lte)
+  const opMap: Record<Condition, string> = {
+    gt: '>',
+    lt: '<',
+    gte: '>=',
+    lte: '<=',
+    between: '', // already handled above
+  };
+
+  return `${opMap[condition]}${from}`;  // e.g. ">= 90"
+}
+
+  onApply(): void {
+
+   const raw = this.filterForm.value;
+
+  const reviewerStr = this.mapAccuracy(raw.reviewerCondition, raw.reviewerFrom, raw.reviewerTo);
+  const approverStr = this.mapAccuracy(raw.approverCondition, raw.approverFrom, raw.approverTo);
+  const tangoStr    = this.mapAccuracy(raw.tangoCondition, raw.tangoFrom, raw.tangoTo);
+
+  const payload = {
+    filterByStatus: raw.status || [],
+
+    filterByReviewer: reviewerStr,
+    filterByApprover: approverStr,
+    filterByTango: tangoStr,
+
+    filterByReviewedBy: raw.reviewedBy || [],        
+    fileterByApprovedBy: raw.approvedBy || [],        
+  };
+  this.apply.emit(payload);
+  this.close();
+    this.showPanel = false;
+  }
+
+dropdownState = {
+  status: false,
+  reviewer: false,
+  approver: false
+};
+// @HostListener('document:click')
+closeAll() {
+  this.dropdownState.status = false;
+  this.dropdownState.reviewer = false;
+  this.dropdownState.approver = false;
+}
+
+toggleDropdown(type: 'status' | 'reviewer' | 'approver', event: MouseEvent) {
+  event.stopPropagation();
+
+  // Close all before opening a new one
+  this.closeAll();
+
+  // Toggle only the selected one
+  this.dropdownState[type] = !this.dropdownState[type];
+}
+
+isDropdownOpen(type: 'status' | 'reviewer' | 'approver') {
+  return this.dropdownState[type];
+}
+}