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

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

@@ -0,0 +1,490 @@
+import { ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { BehaviorSubject, debounceTime, distinctUntilChanged, Subject, takeUntil } from "rxjs";
+import { GlobalStateService, PageInfoService } from 'tango-app-ui-global';
+import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
+import { TraxService } from '../../services/trax.service';
+import { Checklist, ChecklistFlagList, DetectionData, FlagCardTrends, FlagCardValues, HeaderFilter, StoreOpenCloseData } from './flags-info.interface';
+import dayjs, { Dayjs } from "dayjs";
+import utc from 'dayjs/plugin/utc';
+import { ToastService } from 'tango-app-ui-shared';
+dayjs.extend(utc);
+
+
+@Component({
+  selector: 'lib-flags-info',
+  templateUrl: './flags-info.component.html',
+  styleUrl: './flags-info.component.scss'
+})
+export class FlagsInfoComponent implements OnDestroy, OnInit, OnDestroy {
+  dayjs = dayjs
+  private destroy$ = new Subject<void>();
+  itemsPerPage = 10
+  currentPage = 0
+  totalItems = 0
+  paginationSizes = [10, 20, 30]
+  pageSize = 10
+  sortColumName: string = 'detections';
+  sortDirection: number = -1;
+  userEmailes: any = [];
+  headerData: HeaderFilter | null | undefined;
+  checklistSelectControl: FormControl = new FormControl('');
+  searchInput: FormControl = new FormControl('');
+  checkLists: Checklist[] = [];
+  checkListsApiState = new BehaviorSubject<'initial' | 'loading' | 'loaded'>('initial')
+  currentChecklist: Checklist | null | undefined
+  checklistFlagList: ChecklistFlagList | null | undefined
+  flagsTableApiState = new BehaviorSubject<'initial' | 'loading' | 'loaded'>('initial')
+  flagCardValues: FlagCardValues | null | undefined
+  flagsCardValuesState = new BehaviorSubject<'initial' | 'loading' | 'loaded'>('initial')
+  flagCardTrends: FlagCardTrends | null | undefined
+  unattendedSummaryChartNumber: number = 1
+  dateComparisonType: 'daily' | 'weekly' | 'monthly'
+  customFlagType: 'question' | 'flag' | 'all' | 'runAI' = 'all'
+  selectedlistselectControl: FormControl;
+  form: FormGroup;
+  statusselectControl = [
+    { _id: 'all', label: 'All' },
+    { _id: 'Breached', label: 'Breached' },
+    { _id: 'Not Breached', label: 'Not Breached' }
+  ];
+  traxMonthlyComparisonData: any = "";
+
+
+
+  constructor(private route: ActivatedRoute, public gs: GlobalStateService, private traxService: TraxService, private cd: ChangeDetectorRef,
+    private router: Router, private toastService:ToastService, private pageInfo:PageInfoService, private fb: FormBuilder,
+  ) {
+    this.userEmailes = JSON.parse(localStorage.getItem("usersEmail-info") || "[]" )
+    this.checklistSelectControl.valueChanges.pipe(takeUntil(this.destroy$)).subscribe((val: string) => {
+      if (val) {
+        this.currentPage = 0
+        this.currentPage = 0
+        this.flagCardValues = null
+        this.flagCardTrends = null
+        this.router.navigate([],
+          {
+            relativeTo: this.route,
+            queryParams:{id:val},
+            queryParamsHandling: 'merge'
+          }
+        )
+        this.currentChecklist = this.checkLists?.filter((item: Checklist) => item.sourceCheckList_id === val)[0]
+
+        this.sortColumName =  this.currentChecklist?.checkListType === 'storeopenandclose' ? '' : this.sortColumName
+        this.getFlagsTable()
+        this.getCardValues()
+        this.getCardTrends()
+      }
+    })
+
+    this.searchInput.valueChanges.pipe(takeUntil(this.destroy$)).pipe(debounceTime(1000), distinctUntilChanged()).subscribe((val) => {
+      if (val === null || val === undefined) {
+        return
+      }
+      this.getFlagsTable()
+    })
+
+    const dateComparisonType = localStorage.getItem('dashboardDateType')
+    if(dateComparisonType){
+      if(dateComparisonType === 'daily' || dateComparisonType === 'weekly' || dateComparisonType === 'monthly'){
+        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.setPageData()
+    this.selectedlistselectControl = new FormControl('all');
+    this.form = this.fb.group({
+      selectedlistselectControl: this.selectedlistselectControl
+    });
+    this.selectedlistselectControl.valueChanges.pipe(takeUntil(this.destroy$)).subscribe((value: any) => {
+      this.onValueChangeStatusSelect(value);
+    });
+    this.gs.dataRangeValue
+      .pipe(takeUntil(this.destroy$))
+      .pipe(debounceTime(1000))
+      .subscribe((data: any) => {
+        if (data?.client) {
+          this.headerData = data;
+          
+          if (this.headerData?.client === '452') {
+            const exists = this.statusselectControl.some(
+              item => item._id === 'Offline'
+            );
+
+            if (!exists) {
+              this.statusselectControl.push({ _id: 'Offline', label: 'Offline' });
+            }
+          }
+
+          if (this.headerData?.stores?.length) {
+            this.headerData.stores = this.headerData.stores.filter((data: any) => data?.checked)
+          }
+          this.sortColumName =  this.currentChecklist?.checkListType === 'storeopenandclose' ? '' : this.sortColumName
+
+          this.getChecklists()
+        }
+
+      })
+
+    this.route.queryParams
+      .pipe(takeUntil(this.destroy$))
+      .subscribe((params) => {
+        if (params?.id) {
+          this.checklistSelectControl.setValue(params?.id, { emitEvent: false })
+        }
+        if (params?.type) {
+          this.customFlagType = params.type
+        }
+      });
+  }
+
+  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 },
+    ]);
+
+  }
+
+  getChecklists(): void {
+    this.checkListsApiState.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,
+    }
+
+
+    this.traxService.getChecklistDropdownData(data).pipe(takeUntil(this.destroy$)).subscribe({
+      next: (res) => {
+        this.checkListsApiState.next('loaded')
+        if (res?.data?.checklistData) {
+          this.checkLists = res.data.checklistData
+          this.currentChecklist = this.checkLists?.filter((item: Checklist) => item.sourceCheckList_id === this.checklistSelectControl.value)[0]
+          if (!this.currentChecklist) {
+            // this.currentChecklist = this.checkLists[0]
+            this.flagsTableApiState.next('loaded')
+          }
+          setTimeout(() => {
+            this.checklistSelectControl.setValue(this.currentChecklist?.sourceCheckList_id)
+          
+            if(this.currentChecklist?.checkListType === 'outsidebusinesshoursqueuetracking'){
+              this.statusselectControl=[];
+              this.statusselectControl.push({ _id: 'all', label: 'All' }, { _id: 'Detected', label: 'Detected' }, { _id: 'Not Detected', label: 'Not Detected' }, { _id: 'Offline', label: 'Offline' })
+            }
+          }, 1000);
+        } else {
+          this.checkLists = []
+          this.checklistFlagList = null
+          this.checklistSelectControl.setValue('', { emitEvent: false })
+        }
+      },
+      error: (e) => {
+        console.log(e);
+
+      }
+    })
+  }
+
+  getFlagsTable(): void {
+    this.flagsTableApiState.next('loading')
+    let filterValue = this.selectedlistselectControl.value; 
+    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,
+      ChecklistType: this.currentChecklist?.checkListType,
+      sourceCheckList_id: this.currentChecklist?.sourceCheckList_id,
+      search: this.searchInput.value,
+      sort: this.sortColumName,
+      filter: this.customFlagType == 'runAI' ? 'runAI' : filterValue,
+      // "filter": this.customFlagType,
+      // "detectionStatus": this.selectedlistselectControl.value,
+    };
+
+
+    this.traxService.checklistFlagTable(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) {
+          this.checklistFlagList = res.data
+        } else {
+          this.checklistFlagList = null
+        }
+      },
+      error: (e) => {
+        this.flagsTableApiState.next('loaded')
+
+      }
+    })
+  }
+
+  exportTable(): void {
+    // this.flagsTableApiState.next('loading')
+    let filterValue = this.selectedlistselectControl.value; 
+    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,
+      ChecklistType: this.currentChecklist?.checkListType,
+      sourceCheckList_id: this.currentChecklist?.sourceCheckList_id,
+      search: this.searchInput.value,
+      sort: this.sortColumName,
+      export: true,
+      // "detectionStatus": this.selectedlistselectControl.value,
+      filter: this.customFlagType == "runAI" ? "runAI" : filterValue,
+    };
+
+
+    this.traxService.exportChecklistFlagTable(data).pipe(takeUntil(this.destroy$)).subscribe({
+      next: (res) => {
+        this.flagsTableApiState.next('loaded')
+        this.traxService.saveAsExcelFile(res, 'checklist_detection_')
+      },
+      error: (e) => {
+        this.flagsTableApiState.next('loaded')
+
+      }
+    })
+  }
+
+  getCardValues(): void {
+    this.flagsCardValuesState.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,
+      "ChecklistType": this.currentChecklist?.checkListType,
+      "sourceCheckList_id": this.currentChecklist?.sourceCheckList_id,
+      "checklistName": this.currentChecklist?.checkListName
+    }
+
+
+    this.traxService.flagCardValues(data).pipe(takeUntil(this.destroy$)).subscribe({
+      next: (res) => {
+        this.flagsCardValuesState.next('loaded')
+        if (res?.data) {
+          this.flagCardValues = res.data
+        } else {
+          this.flagCardValues = null
+        }
+      },
+      error: (e) => {
+        console.log(e);
+
+      }
+    })
+  }
+
+  getCardTrends(): 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,
+      "ChecklistType": this.currentChecklist?.checkListType,
+      "sourceCheckList_id": this.currentChecklist?.sourceCheckList_id,
+      "checklistName": this.currentChecklist?.checkListName,
+      "dateType": this.dateComparisonType
+    }
+
+
+    this.traxService.flagCardTerend(data).pipe(takeUntil(this.destroy$)).subscribe({
+      next: (res) => {
+        // this.flagsTableApiState.next('loaded')
+        if (res?.data) {
+          this.flagCardTrends = res.data
+          if (this.traxMonthlyComparisonData == '') {
+            this.traxMonthlyComparisonData = this.flagCardTrends?.traxMonthlyComparison
+          }
+        } else {
+          this.flagCardTrends = null
+        }
+      },
+      error: (e) => {
+        console.log(e);
+
+      }
+    })
+  }
+
+  sortData(column: string): void {
+    if (this.sortColumName === column) {
+      this.sortDirection = this.sortDirection === 1 ? -1 : 1;
+    } else {
+      this.sortColumName = column;
+      this.sortDirection = 1;
+    }
+    this.getFlagsTable()
+  }
+
+  onPageSizeChange(pageSize: any) {
+    
+    this.currentPage = 1;
+    this.itemsPerPage = pageSize;
+    this.pageSize = pageSize;
+    if(typeof this.pageSize === 'string'){
+      this.pageSize = parseInt(pageSize)
+    }
+    this.getFlagsTable()
+
+  }
+
+  onPageChange(pageOffset: any) {
+    this.currentPage = pageOffset
+    this.getFlagsTable()
+  }
+
+  onBack() {
+    this.router.navigateByUrl('/manage/trax/flags')
+  }
+
+  storeView(data: any) {
+    const datavalue: any = JSON.parse(
+      localStorage.getItem("header-filters") || "{}"
+    );
+    const matchedStores = datavalue.stores.filter((store: any) => store.checked && store.storeId === data);
+    datavalue.stores.forEach((store: any) => {
+      if (!matchedStores.some((matchedStore: any) => matchedStore.storeId === store.storeId)) {
+        store.checked = false;
+      }
+    });
+    datavalue.store = data;    
+    localStorage.setItem("header-filters", JSON.stringify(datavalue));
+    this.cd.detectChanges()
+    this.gs.dataRangeValue.next(datavalue)
+    // this.gs.manageRefreshTrigger.next(true);
+  }
+
+  onView(flagData: StoreOpenCloseData | DetectionData) {
+    if(flagData.storeId&&flagData.storeId!=''){
+      this.router.navigate(['/manage/trax/gallery'], 
+       {
+         queryParams: {
+           ChecklistDate: (this.currentChecklist?.checkListType ===  'mobileusagedetection' || this.currentChecklist?.checkListType ===  'uniformdetection') ? 
+           this.dayjs(flagData?.dateString, 'DD-MM-YYYY').format('YYYY-MM-DD')  :flagData?.dateString,
+           storeId:flagData?.storeId,
+           checklistType:this.currentChecklist?.checkListType,
+           sourceCheckList_id: this.currentChecklist?.checkListType === 'custom' ?  this.currentChecklist?.sourceCheckList_id : this.currentChecklist?.checkListType,
+           ...(this.currentChecklist?.checkListType !== "custom" && {
+            filterType: 'aiChecklist'})
+         }
+       }        )
+    }else{
+      this.router.navigate(['/manage/trax/gallery'], 
+        {
+          queryParams: {
+            ChecklistDate: (this.currentChecklist?.checkListType ===  'mobileusagedetection' || this.currentChecklist?.checkListType ===  'uniformdetection') ? 
+            this.dayjs(flagData?.dateString, 'DD-MM-YYYY').format('YYYY-MM-DD')  :flagData?.dateString,
+            userEmail:flagData?.storeSpocEmail,
+            checklistType:this.currentChecklist?.checkListType,
+            sourceCheckList_id: this.currentChecklist?.checkListType === 'custom' ?  this.currentChecklist?.sourceCheckList_id : this.currentChecklist?.checkListType,
+          }
+        }        )
+    }
+  }
+
+  reInitiate(flagData:DetectionData){
+    const payload = {
+      _id:flagData._id,
+      clientId: this.headerData?.client
+    }
+    this.traxService.reInitiate(payload).pipe(takeUntil(this.destroy$)).subscribe({
+      next:(res)=>{
+        if(res?.code  === 200){
+          this.toastService.getSuccessToast(res.message)
+          this.getFlagsTable()
+        }
+      },
+      error:(err)=>{
+        this.toastService.getErrorToast(err?.error?.error)
+      }
+      
+    })
+  }
+
+  onChecklistSelect(event:Checklist){    
+    this.currentPage = 0
+    this.currentPage = 0
+    this.flagCardValues = null
+    this.flagCardTrends = null
+    this.router.navigate([],
+      {
+        relativeTo: this.route,
+        queryParams:{id:event.sourceCheckList_id},
+        queryParamsHandling: 'merge'
+      }
+    )
+    this.currentChecklist = this.checkLists?.filter((item: Checklist) => item.sourceCheckList_id === event.sourceCheckList_id)[0]
+
+    this.sortColumName =  this.currentChecklist?.checkListType === 'storeopenandclose' ? '' : this.sortColumName
+    this.getFlagsTable()
+    this.getCardValues()
+    this.getCardTrends()
+  }
+
+ isToday(dateString: string): boolean {
+    const inputDate = dayjs(dateString);
+    const today = dayjs();
+    console.log(!inputDate.isSame(today, 'day'))
+    return !inputDate.isSame(today, 'day');
+  }
+
+  onValueChangeStatusSelect(value: any): void {
+    this.getFlagsTable();
+  }
+
+  dateComparisonValueChange(val:'daily' | 'weekly' | 'monthly'){
+    localStorage.setItem('dashboardDateType', val)
+    this.dateComparisonType = val
+    this.flagCardTrends = null
+    this.getCardTrends()
+  }
+}