tango-app-ui-analyse-trax 3.9.2 → 3.9.3

package/src/lib/components/flags/flags.component.ts

@@ -0,0 +1,280 @@
+import { ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
+import { Subject, debounceTime, BehaviorSubject, takeUntil, distinctUntilChanged } from "rxjs";
+import { GlobalStateService, PageInfoService } from 'tango-app-ui-global';
+import { TraxService } from '../../services/trax.service';
+import { Router } from '@angular/router';
+import { HeaderFilter, FlagsTableData, IFlagCards, IFlagComparisonCards } from './flags.interface';
+import { FormControl } from '@angular/forms';
+
+
+@Component({
+  selector: 'lib-flags',
+  templateUrl: './flags.component.html',
+  styleUrl: './flags.component.scss'
+})
+export class FlagsComponent implements OnInit, OnDestroy {
+  private destroy$ = new Subject<void>();
+  itemsPerPage = 10
+  currentPage = 0
+  totalItems = 0
+  userEmailes: any = [];
+  paginationSizes = [10, 20, 30]
+  pageSize = 10
+  sortColumName = 'checkListName';
+  sortDirection = 1;
+  headerData: HeaderFilter | null | undefined;;
+  flagsTableApiState = new BehaviorSubject<'initial' | 'loading' | 'loaded'>('initial')
+  flagsTableData: FlagsTableData[] = []
+  cardMetricsApiState = new BehaviorSubject<'initial' | 'loading' | 'loaded'>('initial')
+  cardMetricsData: IFlagCards | null | undefined
+  cardMetricsComparisonData: IFlagComparisonCards | null | undefined
+  searchInput: FormControl = new FormControl('');
+  filterInput: FormControl = new FormControl('all');
+  filterValues = [
+    {label:'All', value:'all'},
+    {label:'Question', value:'question'},
+    {label:'Not Submitted', value:'time'},
+    {label:'Detection', value:'detection'},
+  ]
+  dateComparisonType: 'daily' | 'weekly'
+
+
+
+
+  constructor(public gs: GlobalStateService, private changeDetector: ChangeDetectorRef, private traxService: TraxService, private router: Router, private pageInfo: PageInfoService) {
+    this.userEmailes = JSON.parse(localStorage.getItem("usersEmail-info") || "[]" )
+    this.searchInput.valueChanges.pipe(takeUntil(this.destroy$)).pipe(debounceTime(1000), distinctUntilChanged()).subscribe((val) => {
+      if (val === null || val === undefined) {
+        return
+      }
+      this.currentPage  = 0
+      this.getFlagsTable()
+    })
+
+    this.filterInput.valueChanges.pipe(takeUntil(this.destroy$)).subscribe((val) => {
+      if (val === null || val === undefined) {
+        return
+      }
+      this.currentPage  = 0
+      this.getFlagsTable()
+    })
+
+    const dateComparisonType = localStorage.getItem('dashboardDateType')
+    if(dateComparisonType){
+      if(dateComparisonType === 'daily' || dateComparisonType === 'weekly'){
+        this.dateComparisonType = dateComparisonType
+      }else{
+        this.dateComparisonType = 'daily'
+        localStorage.setItem('dashboardDateType', 'daily')
+      }
+    }else{
+      this.dateComparisonType = 'daily'
+      localStorage.setItem('dashboardDateType', 'daily')
+    }
+
+  }
+
+  ngOnDestroy(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+
+
+  ngOnInit(): void {
+    this.gs.dataRangeValue
+      .pipe(takeUntil(this.destroy$))
+      .pipe(debounceTime(1000))
+      .subscribe((data: any) => {
+        if (data?.client) {
+          this.headerData = data;
+          if (this.headerData?.stores?.length) {
+            this.headerData.stores = this.headerData.stores.filter((data: any) => data?.checked)
+          }
+          this.getChecklistFlagMetrics()
+          this.getChecklistFlagMetricsComparison()
+          this.getFlagsTable()
+        }
+
+      })
+      this.setPageData()
+  }
+
+  setPageData() {
+    this.pageInfo.setTitle("Flags");
+    this.pageInfo.setDescription("");
+    this.pageInfo.setBreadcrumbs([
+      // { title: "Analyze", path: "/manage/trax/dashboard", isActive: false, isSeparator: false },
+      // { title: "Analyze", path: "/manage/trax/dashboard", isActive: false, isSeparator: true },
+      { title: "Tango Trax", path: "/manage/trax/dashboard", isActive: false, isSeparator: false },
+      { title: "Tango Trax", path: "/manage/trax/dashboard", isActive: false, isSeparator: true },
+      // { title: "Reports", path: "/manage/trax/reports", isActive: false, isSeparator: false },
+      // { title: "Reports", path: "/manage/trax/reports", isActive: false, isSeparator: true },
+    ]);
+
+  }
+
+  getChecklistFlagMetrics(): void {
+    this.cardMetricsApiState.next('loading')
+    const data: Record<string, any> = {
+      "clientId": this.headerData?.client,
+      "fromDate": this.headerData?.date.startDate,
+      "toDate": this.headerData?.date.endDate,
+      "storeId": this.headerData?.stores.map((val: { storeId: string, storeName: string }) => val.storeId),
+      "userEmailes": this.userEmailes
+    }
+
+
+    this.traxService.overallFlagMetrics(data).pipe(takeUntil(this.destroy$)).subscribe({
+      next: (res) => {
+        this.cardMetricsApiState.next('loaded')
+        if (res?.data) {
+          this.cardMetricsData = res.data
+        } else {
+          this.cardMetricsData = null
+        }
+      },
+      error: (e) => {
+        console.log(e);
+
+      }
+    })
+  }
+
+  getChecklistFlagMetricsComparison(): void {
+    const data: Record<string, any> = {
+      "clientId": this.headerData?.client,
+      "fromDate": this.headerData?.date.startDate,
+      "toDate": this.headerData?.date.endDate,
+      "storeId": this.headerData?.stores.map((val: { storeId: string, storeName: string }) => val.storeId),
+      "userEmailes": this.userEmailes,
+      "dateType": this.dateComparisonType
+    }
+
+
+    this.traxService.overallFlagMetricsComparison(data).pipe(takeUntil(this.destroy$)).subscribe({
+      next: (res) => {
+        if (res?.data) {
+          this.cardMetricsComparisonData = res.data
+        } else {
+          this.cardMetricsComparisonData = null
+        }
+      },
+      error: (e) => {
+        console.log(e);
+
+      }
+    })
+  }
+
+  getFlagsTable(): void {
+    this.flagsTableApiState.next('loading')
+    const data: Record<string, any> = {
+      "clientId": this.headerData?.client,
+      "storeId": this.headerData?.stores.map((val: { storeId: string, storeName: string }) => val.storeId),
+      "userEmailes": this.userEmailes,
+      "fromDate": this.headerData?.date.startDate,
+      "toDate": this.headerData?.date.endDate,
+      "limit": this.pageSize,
+      "offset": this.currentPage > 0 ? this.currentPage - 1 : 0,
+      "sortColumnName": this.sortColumName,
+      "sortBy": this.sortDirection,
+      "searchValue":this.searchInput.value,
+      "filter":this.filterInput.value
+    }
+
+
+    this.traxService.flagsTable(data).pipe(takeUntil(this.destroy$)).subscribe({
+      next: (res) => {
+        this.flagsTableApiState.next('loaded')
+        if (res?.data?.totalCount) {
+          this.totalItems = res.data.totalCount
+        } else {
+          this.totalItems = 0
+        }
+        if (res?.data?.checklistPerformance) {
+          this.flagsTableData = res.data.checklistPerformance
+        } else {
+          this.flagsTableData = []
+        }
+      },
+      error: (e) => {
+        this.flagsTableApiState.next('loaded')
+
+      }
+    })
+  }
+
+  onFlagsTableExport(): void {
+    // this.flagsTableApiState.next('loading')
+    const data: Record<string, any> = {
+      "clientId": this.headerData?.client,
+      "storeId": this.headerData?.stores.map((val: { storeId: string, storeName: string }) => val.storeId),
+      "userEmailes": this.userEmailes,
+      "fromDate": this.headerData?.date.startDate,
+      "toDate": this.headerData?.date.endDate,
+      "limit": this.pageSize,
+      "offset": this.currentPage > 0 ? this.currentPage - 1 : 0,
+      "sortColumnName": this.sortColumName,
+      "sortBy": this.sortDirection,
+      "searchValue":this.searchInput.value,
+      "filter":this.filterInput.value,
+      "export":true
+    }
+
+
+    this.traxService.exportFlagsTable(data).pipe(takeUntil(this.destroy$)).subscribe({
+      next: (res) => {
+        this.flagsTableApiState.next('loaded')
+        this.traxService.saveAsExcelFile(res, 'flag_')
+      }
+    })
+  }
+
+
+
+  sortData(column: string): void {
+    if (this.sortColumName === column) {
+      this.sortDirection = this.sortDirection === 1 ? -1 : 1;
+    } else {
+      this.sortColumName = column;
+      this.sortDirection = 1;
+    }
+    this.changeDetector.detectChanges();
+    this.getFlagsTable();
+  }
+
+  onPageSizeChange(pageSize: any) {
+    this.currentPage = 1;
+    this.itemsPerPage = pageSize;
+    this.pageSize = pageSize;
+    this.changeDetector.detectChanges();
+    this.getFlagsTable()
+  }
+
+  onPageChange(pageOffset: any) {
+    this.currentPage = pageOffset
+    this.getFlagsTable()
+  }
+
+  viewInDetail(checklistId: string | undefined, type?: 'question' | 'time' ) {
+    if(!checklistId){
+      return
+    }
+    let route  = `/manage/trax/flags/flagsinfo?id=${checklistId}`
+
+    if(type){
+      route = route + `&type=${type}`
+    }
+
+    this.router.navigateByUrl(route)
+  }
+
+  dateComparisonValueChange(val:'daily' | 'weekly'){
+    localStorage.setItem('dashboardDateType', val)
+    this.dateComparisonType = val
+    this.cardMetricsComparisonData = null
+    this.getChecklistFlagMetricsComparison()
+  }
+
+
+}

package/{lib/components/flags/flags.interface.d.ts → src/lib/components/flags/flags.interface.ts}

@@ -1,65 +1,73 @@
-interface FlagCards {
-    questionFlag: {
-        count: number;
-    };
-    delayInSubmission: {
-        count: number;
-    };
-    detectionFlag: {
-        count: number;
-    };
-    totalFlag: number;
-}
-export interface IFlagCards {
-    flagCards: FlagCards;
-}
-interface ComparisonFlag {
-    comparisonData: number;
-    ComparisonFlag: boolean;
-}
-interface FlagComparisonCards {
-    questionComparisonFlag: ComparisonFlag;
-    delayInSubmissionComparisonFlag: ComparisonFlag;
-    detectionComparisonFlag: ComparisonFlag;
-}
-export interface IFlagComparisonCards {
-    flagComparisonCards: FlagComparisonCards;
-}
-export interface FlagsTableData {
-    checkListName: string;
-    checkListChar: string;
-    sourceCheckList_id: string;
-    checkListType: string;
-    flagType: string;
-    assignedStores: number;
-    assignedStoresAi: number;
-    flaggedStores: number;
-    flagCount: number;
-    coverage: string;
-    complianceRate: number;
-    customQuestionFlagCount: number;
-    customTimeFlagCount: number;
-}
-interface DateRange {
-    startDate: string;
-    endDate: string;
-}
-interface Store {
-    storeId: string;
-    storeName: string;
-    checked: boolean;
-}
-interface Group {
-    city: string;
-    checked: boolean;
-}
-export interface HeaderFilter {
-    client: string;
-    clientName: string;
-    clients: string[];
-    store: null | string;
-    date: DateRange;
-    stores: Store[];
-    group: Group[];
-}
-export {};
+interface FlagCards {
+    questionFlag: {
+      count: number;
+    };
+    delayInSubmission: {
+      count: number;
+    };
+    detectionFlag: {
+      count: number;
+    };
+    totalFlag: number;
+  }
+  
+ export interface IFlagCards {
+    flagCards: FlagCards;
+  }
+  
+  interface ComparisonFlag {
+    comparisonData: number;
+    ComparisonFlag: boolean;
+  }
+  
+  interface FlagComparisonCards {
+    questionComparisonFlag: ComparisonFlag;
+    delayInSubmissionComparisonFlag: ComparisonFlag;
+    detectionComparisonFlag: ComparisonFlag;
+  }
+  
+ export interface IFlagComparisonCards {
+    flagComparisonCards: FlagComparisonCards;
+  }
+  
+  export interface FlagsTableData {
+    checkListName: string;
+    checkListChar: string;
+    sourceCheckList_id: string;
+    checkListType: string;
+    flagType: string;
+    assignedStores: number;
+    assignedStoresAi:number,
+    flaggedStores: number;
+    flagCount: number;
+    coverage: string;
+    complianceRate: number;
+    customQuestionFlagCount:number,
+    customTimeFlagCount:number
+  }
+
+  interface DateRange {
+    startDate: string;
+    endDate: string;
+  }
+  
+  interface Store {
+    storeId: string;
+    storeName: string;
+    checked: boolean;
+  }
+  
+  interface Group {
+    city: string;
+    checked: boolean;
+  }
+  
+ export interface HeaderFilter {
+    client: string;
+    clientName: string;
+    clients: string[];
+    store: null | string;
+    date: DateRange;
+    stores: Store[];
+    group: Group[];
+  }