tango-app-ui-manage-tickets 3.7.0-beta.15 → 3.7.0-beta.16

package/src/lib/components/reactive-select/reactive-select.component.ts

@@ -0,0 +1,104 @@
+import { ChangeDetectorRef, Component, EventEmitter, HostListener, Input, OnInit, Output, Provider, forwardRef } from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { TicketService } from '../../services/ticket.service';
+
+const SELECT_CONTROL_VALUE_ACCESSOR: Provider = {
+  provide: NG_VALUE_ACCESSOR,
+  useExisting: forwardRef(() => ReactiveSelectComponent),
+  multi: true,
+};
+
+@Component({
+  selector: 'lib-reactive-select',
+  templateUrl: './reactive-select.component.html',
+  styleUrl: './reactive-select.component.scss',
+  providers: [SELECT_CONTROL_VALUE_ACCESSOR]
+})
+export class ReactiveSelectComponent implements ControlValueAccessor, OnInit {
+
+  private onTouched: Function;
+  private onChanged: Function;
+  @Input() isDisabled: boolean;
+  @Input() idField: string
+  @Input() nameField: string
+  @Input() label: string
+  @Input() data: any
+  @Output() itemChange = new EventEmitter()
+  protected isOpened: boolean = false
+  protected selected: Record<string, any> | null = null
+  protected selectedId: string | number
+  instanceId: string;
+
+
+  constructor(private apiService: TicketService, private cd: ChangeDetectorRef) {
+
+  }
+
+  ngOnInit(): void {
+    this.instanceId = crypto.randomUUID();
+    this.apiService.dropDownTrigger.subscribe((e) => {
+      if (e !== this.instanceId) {
+        this.isOpened = false
+        this.cd.detectChanges()
+      }
+    })
+  }
+
+
+  writeValue(val: string | number): void {
+    this.selectedId = val
+    this.selected = this.data.filter((item: Record<string, any>) => item?.[this.idField] === val)[0]
+    
+  }
+  registerOnChange(fn: any): void {
+    this.onChanged = fn
+    
+  }
+  registerOnTouched(fn: any): void {
+    this.onTouched = fn
+  }
+  setDisabledState?(isDisabled: boolean): void {
+    this.isDisabled = isDisabled
+
+  }
+
+  onSelect(item: Record<string, any>) {
+    this.onTouched()
+    this.selected = item
+    this.selectedId = item?.[this.idField]
+    this.isOpened = false
+    this.itemChange.next(this.selectedId)
+    this.onChanged(this.selectedId)
+  }
+
+  @HostListener('document:click', ['$event'])
+  onClick(event: MouseEvent) {
+    // console.log(this.isDisabled)
+    if (!this.isDisabled) {
+      const targetElement = event.target as HTMLElement;
+      if (!this.isComponentClicked(targetElement)) {
+        this.isOpened = false;
+      }
+    }
+  }
+
+  isComponentClicked(targetElement: HTMLElement): boolean {
+    const parentElement = targetElement.parentElement;
+    if (parentElement) {
+      const clickedOnComponent = parentElement.classList.contains('custom-select');
+      if (clickedOnComponent) {
+        return true;
+      } else {
+        return this.isComponentClicked(parentElement);
+      }
+    }
+    return false;
+  }
+
+  openDropdown(){
+    this.isOpened = !this.isOpened;
+    this.apiService.dropDownTrigger.next(this.instanceId)
+  }
+
+
+}

package/src/lib/components/tango-manage-tickets/tango-manage-tickets.component.html

@@ -0,0 +1,38 @@
+<div class="card mb-5 py-3 px-5">
+    <ul class="nav nav-stretch nav-line-tabs1 nav-line-tabs border-transparent flex-nowrap">
+        <li class="nav-item">
+            <a [routerLink]="['/manage/tickets']" [queryParams]="{ type: 'installation' }"  (click)="Selectedtabs('installation')"
+               [ngClass]="SelectedTab === 'installation' ? 'active' : ''" class="nav-link cursor-pointer no-border me-3">
+                Installation<span class="mx-2 " [ngClass]="SelectedTab ==='installation' ? 'badge-num-primary' :'badge-num-muted'">{{ticketAllCount?.installationCount?ticketAllCount?.installationCount:0}}</span>
+            </a>
+        </li>
+        <li class="nav-item" >
+            <a [routerLink]="['/manage/tickets']" [queryParams]="{ type: 'infra' }" (click)="Selectedtabs('infra')"
+               [ngClass]="SelectedTab === 'infra' ? 'active' : ''" class="nav-link cursor-pointer no-border me-3">
+                Infra<span class="mx-2" [ngClass]="SelectedTab ==='infra' ? 'badge-num-primary' :'badge-num-muted'">{{ticketAllCount?.infraCount?ticketAllCount?.infraCount:0}}</span>
+            </a>
+        </li>    
+        <li class="nav-item" [routerLink]="['/manage/tickets']" [queryParams]="{ type: 'dataMismatch' }"  (click)="Selectedtabs('dataMismatch')">
+            <a [ngClass]="SelectedTab ==='dataMismatch' ? 'active' :''" class="nav-link cursor-pointer me-3">Data Mismatch
+                <span class="mx-2" [ngClass]="SelectedTab ==='dataMismatch' ? 'badge-num-primary' :'badge-num-muted'">{{ticketAllCount?.datamismatchCount? ticketAllCount?.datamismatchCount:0}}</span></a>
+        </li>
+       <!-- <li *ngIf="this.users.userType ==='tango'" class="nav-item" [routerLink]="['/manage/tickets']" [queryParams]="{ type: 'audit' }" (click)="Selectedtabs('audit')"><a [ngClass]="SelectedTab ==='audit' ? 'active' :''"
+            class="nav-link cursor-pointer no-border me-3">Audit</a>
+        </li> -->
+        <li *ngIf="this.users.userType ==='tango'" class="nav-item" (click)="Selectedtabs('mat')"><a [routerLink]="['/manage/tickets']" [queryParams]="{ type: 'mat' }" [ngClass]="SelectedTab ==='mat' ? 'active' :''"
+            class="nav-link cursor-pointer no-border me-3">Employee Mat
+            <span class="mx-2 " [ngClass]="SelectedTab ==='mat' ? 'badge-num-primary' :'badge-num-muted'">{{ticketAllCount?.matCount ?ticketAllCount?.matCount:0}}</span></a>
+        </li>
+<li *ngIf="(gs.userAccess | async)?.userType === 'tango' || headerFilters?.client ==='11'" class="nav-item" (click)="Selectedtabs('footfall')"><a [routerLink]="['/manage/tickets']" [queryParams]="{ type: 'footfall' }" [ngClass]="SelectedTab ==='footfall' ? 'active' :''"
+            class="nav-link cursor-pointer no-border me-3">Footfall Directory
+            <span class="mx-2 " [ngClass]="SelectedTab ==='footfall' ? 'badge-num-primary' :'badge-num-muted'">{{ticketAllCount?.footfallDirectory ?ticketAllCount?.footfallDirectory:0}}</span>
+
+            </a>
+        </li>
+        
+    </ul>
+</div>
+<lib-footfall-dic *ngIf="SelectedTab ==='footfall'"></lib-footfall-dic>
+<lib-tickets *ngIf="SelectedTab !=='audit' && SelectedTab !=='footfall'"></lib-tickets>
+<lib-audit-metrics *ngIf="SelectedTab ==='audit'"></lib-audit-metrics>
+<router-outlet></router-outlet>

package/src/lib/components/tango-manage-tickets/tango-manage-tickets.component.scss

@@ -0,0 +1,35 @@
+.nav-item .nav-link.active{
+    border:none;
+    border-radius: 6px;
+    background: var(--Primary-50, #EAF8FF);
+    padding: 8px 12px;
+ }
+ .nav-item .nav-link:hover{
+     border: none;
+ }
+ .badge-num-primary {
+     border-radius: 16px !important;
+     background: var(--Primary-50, #EAF8FF) !important;
+     color: var(--Primary-700, #009BF3) !important;
+     text-align: center;
+     font-size: 14px !important;
+     font-style: normal;
+     font-weight: 500;
+     line-height: 20px;
+     padding: 2px 10px !important;
+     mix-blend-mode: multiply !important;
+ }
+
+ .badge-num-muted {
+    border-radius: 16px !important;
+    background: var(--Primary-50, #F2F4F7) !important;
+    color: var(--Gray-700, #344054) !important;
+    text-align: center;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 20px;
+    padding: 2px 10px !important;
+    mix-blend-mode: multiply !important;
+}
+

package/src/lib/components/tango-manage-tickets/tango-manage-tickets.component.spec.ts

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

package/src/lib/components/tango-manage-tickets/tango-manage-tickets.component.ts

@@ -0,0 +1,116 @@
+import { Component, OnDestroy, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { GlobalStateService, PageInfoService } from 'tango-app-ui-global';
+import { Subject, takeUntil } from "rxjs";
+import { TicketService } from '../../services/ticket.service';
+@Component({
+  selector: 'lib-tango-manage-tickets',
+  templateUrl: './tango-manage-tickets.component.html',
+  styleUrl: './tango-manage-tickets.component.scss'
+})
+export class TangoManageTicketsComponent implements OnInit,OnDestroy {
+  SelectedTab:any='installation'
+  private readonly destroy$ = new Subject();
+  headerFilters: any;
+  ticketAllCount: any;
+  users: any;
+  constructor(private pageInfo:PageInfoService,private route: ActivatedRoute,private router:Router,public gs:GlobalStateService,private service:TicketService){
+  }
+
+  ngOnInit(): void {
+    const userData: any = JSON.parse(localStorage.getItem("user-info") || "{}");
+    this.users = userData;
+    this.route?.queryParams?.pipe(takeUntil(this.destroy$)).subscribe(params => {
+      if (params.hasOwnProperty('type')) {
+          const type = params['type'];
+          this.Selectedtabs(type);
+         
+      } else{
+        this.updateStoreIdQueryParam()
+      }
+  });
+  this.onLoad(); 
+    this.setPageData();
+  }
+
+  updateStoreIdQueryParam() {
+    const queryParams = { ...this.route?.snapshot?.queryParams };
+    // Update storeId in queryParams
+    queryParams.type = this.SelectedTab.toLocaleLowerCase();
+    // Navigate to the same route with updated queryParams
+    this.router.navigate([], { queryParams: queryParams, queryParamsHandling: 'merge' });
+  }
+
+  setPageData(){
+    this.pageInfo.setTitle('Tickets')
+    this.pageInfo.setDescription('Summary of queries raised,addresed & resolved')
+    let breadcrumbs : any[]=[];
+    if (this.gs.userAccess.value?.userType === "tango") {
+      breadcrumbs=  [
+        {
+          title: "Manage",
+          path: "/manage/brands",
+          isActive: false,
+          isSeparator: false,
+        },
+        {
+          title: "Manage",
+          path: "/manage/brands",
+          isActive: false,
+          isSeparator: true,
+        },
+      ];
+    } else if (this.gs.userAccess.value?.userType === "client") {
+      breadcrumbs= [
+        {
+          title: "Manage",
+          path: "/manage/summary",
+          isActive: false,
+          isSeparator: false,
+        },
+        {
+          title: "Manage",
+          path: "/manage/summary",
+          isActive: false,
+          isSeparator: true,
+        },
+      ];
+    }
+    this.pageInfo.setBreadcrumbs(breadcrumbs);
+  }
+
+ 
+  Selectedtabs(value:any){
+    this.SelectedTab = value;
+  }
+  ngOnDestroy(): void {
+    this.destroy$.next(true);
+    this.destroy$.complete();
+  }
+onLoad(){
+  this.gs.dataRangeValue?.pipe(takeUntil(this.destroy$))?.subscribe({
+    next: (data: any) => {
+      if (data) {
+        this.headerFilters = data;
+        this.getAllCount();
+      }
+    }
+  })
+}
+
+getAllCount(){
+  let obj ={
+    clientId: this.headerFilters?.clients,
+      fromDate: this.headerFilters?.date?.startDate,
+      toDate: this.headerFilters?.date?.endDate
+  }
+  this.service.getAllCounts(obj)?.pipe(takeUntil(this.destroy$))?.subscribe({
+    next: (res: any) => {
+      if(res.code ===200){
+          this.ticketAllCount = res?.data[0];
+      }
+    }
+  })
+}
+
+}