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

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

@@ -0,0 +1,539 @@
+import { ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { Subject, debounceTime, distinctUntilChanged, filter, takeUntil } from "rxjs";
+import { GlobalStateService, PageInfoService } from 'tango-app-ui-global';
+import { ToastService } from 'tango-app-ui-shared';
+import { TraxService } from '../../services/trax.service';
+import dayjs from 'dayjs';
+import utc from 'dayjs/plugin/utc';
+dayjs.extend(utc);
+
+
+@Component({
+  selector: 'lib-dashboard',
+  templateUrl: './dashboard.component.html',
+  styleUrl: './dashboard.component.scss'
+})
+export class DashboardComponent implements OnDestroy, OnInit {
+  dayjs = dayjs
+  receivedData: string = "checklist";
+  private destroy$ = new Subject();
+  isExport: boolean = false;
+  itemsPerPage = 10
+  currentPage = 1
+  totalItems = 0
+  paginationSizes:any[] = [];
+  pageSize = 10
+  sortColumName: string = '';
+  sortBy: any = '';
+  sortDirection: any = '';
+  searchInput: any ="";
+  checklistPerformance: any[] = [];
+  storePerformanceData: any[] = [];
+  userPerformanceData: any[] = [];
+  userPerformanceDataexport:boolean =  false;
+  searchDisabled: boolean = false;
+  invoiceList: any[] = [];
+  checklistLoading: boolean = true;
+  checklistNoData: boolean = false;
+  storePerformanceLoading: boolean = true;
+  storePerformanceNoData: boolean = false;
+  userPerformanceLoading: boolean = true;
+  userPerformanceNoData: boolean = true;
+  headerData: any;
+  cardDataLoading: boolean = true;
+  cardNoData: boolean = false;
+  overallCardsData: any = {};
+  currentTab: string = 'checklistPerformance';
+  searchValue: string;
+  limit: number;
+  offset: number;
+  overallCardDataLoading: boolean = true;
+  overallCardDataNoData: boolean = false;
+  overallComparisonData: any = {};
+  traxMonthlyComparisonData: any = "";
+  selectedvalue: any;
+  dateType="";
+  dateLength: number;
+  type: string = 'Checklist'; 
+  reloadDate: string;
+  userEmailes: any = [];
+  constructor(private route: ActivatedRoute, private router: Router,public gs: GlobalStateService,private changeDetector: ChangeDetectorRef,private toast: ToastService,
+    private TraxService: TraxService, private pageInfo: PageInfoService,
+  ) { this.userEmailes = JSON.parse(localStorage.getItem("usersEmail-info") || "[]" ) }
+  ngOnDestroy(): void {
+    this.destroy$.next(true);
+    this.destroy$.complete();
+  }
+
+  ngOnInit(): void {
+    this.reloadDate = this.dayjs().format('hh:mm:ss A');
+    this.gs.dataRangeValue
+    .pipe(takeUntil(this.destroy$), debounceTime(300))
+    .subscribe((data: any) => {
+        this.headerData = data;
+        this.dateType = localStorage.getItem('dashboardDateType') || 'daily';
+        localStorage.setItem('dashboardDateType', this.dateType);
+        // if ( !this.dateType) {
+        //   this.dateType =  'daily'
+        // }
+        // this.dateLength = getDaysBetweenDates(data?.date.startDate, data?.date.endDate);
+        // if (this.dateLength > 28)
+        //   this.dateType = "monthly";
+        // else if (this.dateLength > 5)
+        //   this.dateType = "weekly";
+        // else if(this.dateLength === 0)
+        //   this.dateType = "weekly";
+
+        this.setPageData();
+        this.getOverallCardsData();
+        this.getOverallComparisonCardsData()
+        
+        
+        this.route?.queryParams
+        ?.pipe(takeUntil(this.destroy$))
+        .subscribe((params) => {
+           if (params.type === "store") {
+            this.receivedData = "store";
+            this.getStorePerformanceData();
+          } else if (params.type === "user"){
+            this.receivedData = "user";
+            this.getUserPerformanceData();
+          }
+          else {
+            this.receivedData = "checklist";
+            this.getChecklistPerformanceData();
+          }
+        })
+})
+}
+
+  setPageData() {
+    this.pageInfo.setTitle("Dashboard");
+    // this.pageInfo.setDescription("Dashboard");
+    this.pageInfo.setBreadcrumbs([
+      { title: "Tango Trax", path: "/manage/trax/dashboard", isActive: false, isSeparator: false },
+      { title: "Tango Trax", path: "/manage/trax/dashboard", isActive: false, isSeparator: true },
+    ]);
+  }
+
+  Selecttabs(tab: string) {
+    this.currentTab = tab;
+    this.sortColumName = "",
+    this.sortDirection = "",
+    this.searchInput = "",                
+    this.itemsPerPage = 10,                 
+    this.currentPage= 1,
+    this.pageSize = 10
+    this.router.navigate([], {
+          relativeTo: this.route,
+          queryParams: { type: tab }, 
+          queryParamsHandling: 'merge', 
+    })
+    switch (tab) {
+      case 'checklistPerformance':
+        this.getChecklistPerformanceData();
+        break;
+      case 'storePerformance':
+        this.getStorePerformanceData();
+        break;
+      case 'userPerformance':
+        this.getUserPerformanceData();
+        break;
+      default:
+    }
+  }
+  
+  getOverallCardsData(): void {
+    this.overallCardsData = []
+    this.cardDataLoading = true;
+    this.cardNoData = true;
+    const requestData = {
+      fromDate: this.headerData.date.startDate,
+      toDate: this.headerData.date.endDate,
+      storeId: this.headerData.stores.filter((store:any) => store.checked).map((store:any) => store.storeId),
+      clientId: this.headerData.client,
+      userEmailes: this.userEmailes
+    };
+
+    this.TraxService.getOverallCardsData(requestData).pipe(takeUntil(this.destroy$)).subscribe((response: any) => {
+      this.cardDataLoading = false;
+        if (response?.code === 200 && response?.status === "success") {
+          this.overallCardsData = response.data?.overallCards || {}; 
+          this.cardDataLoading = false;
+          this.cardNoData = false;
+        } else {
+          this.overallCardsData = []
+          this.cardDataLoading = false;
+          this.cardNoData = true;
+        }
+      },
+      error => {
+        this.overallCardsData = []
+        this.cardDataLoading = false;
+        this.cardNoData = true;
+      this.changeDetector.detectChanges()
+      }
+    );
+  }
+  getOverallComparisonCardsData(): void {
+    this.overallComparisonData = []
+    this.overallCardDataLoading = true;
+    this.overallCardDataNoData = true;
+    const requestData = {
+      fromDate: this.headerData.date.startDate,
+      toDate: this.headerData.date.endDate,
+      storeId: this.headerData.stores.filter((store:any) => store.checked).map((store:any) => store.storeId),
+      clientId:this.headerData.client,
+      dateType: this.dateType,
+      userEmailes: this.userEmailes
+      // groupByType: this.receivedData,
+      // groupByValue: this.selectedvalue,
+    };
+
+    this.TraxService.getOverallComparisonCardsData(requestData).pipe(takeUntil(this.destroy$)).subscribe((response: any) => {
+      this.overallCardDataLoading = false;
+        if (response?.code === 200 && response?.status === "success") {
+          this.overallComparisonData = response.data?.overallComparisonCards || {}; 
+          if (this.traxMonthlyComparisonData == '') {
+            this.traxMonthlyComparisonData = response?.data?.overallComparisonCards?.traxMonthlyComparison
+          }
+          this.overallCardDataLoading = false;
+          this.overallCardDataNoData = false;
+        } else {
+          this.overallComparisonData = []
+          this.overallCardDataLoading = false;
+          this.overallCardDataNoData = true;
+        }
+      },
+      error => {
+        this.overallComparisonData = []
+        this.overallCardDataLoading = false;
+        this.overallCardDataNoData = true;
+      this.changeDetector.detectChanges()
+      }
+    );
+  }
+
+  getChecklistPerformanceData(): void {
+    this.searchDisabled = true;
+    this.checklistLoading = true;
+    this.checklistNoData = true;
+    const requestData = {
+      fromDate: this.headerData.date.startDate,
+      toDate: this.headerData.date.endDate,
+      storeId: this.headerData.stores.filter((store:any) => store.checked).map((store:any) => store.storeId),
+      clientId: this.headerData.client,
+      userEmailes: this.userEmailes,
+      limit: this.itemsPerPage,                 
+      offset: this.currentPage - 1,
+      sortBy: this.sortDirection,
+      sortColumnName: this.sortColumName,
+      searchValue: this.searchInput,
+      export: false,
+
+    };
+
+    this.TraxService.getChecklistPerformanceData(requestData)
+      .pipe(takeUntil(this.destroy$))
+      .subscribe((response: any) => {
+        this.checklistLoading = false;
+        if (response?.code === 200 && response?.status === "success") {
+          this.checklistPerformance = response.data.checklistPerformance || [];
+          this.totalItems = response.data.totalCount
+          this.setPaginationSizes()
+          this.checklistLoading = false;
+          this.checklistNoData = false;
+          this.searchDisabled = false;
+        } else {
+          this.checklistPerformance = [];
+          this.checklistLoading = false;
+          this.checklistNoData = true;
+          this.searchDisabled = true;
+          if (this.searchInput?.length) {
+            this.searchDisabled = true
+          }
+          this.checklistPerformance = []
+          this.totalItems = 0
+          this.changeDetector.detectChanges()
+        }
+      }, error => {
+        this.checklistPerformance = []
+        this.changeDetector.detectChanges()
+      });
+  }
+  getStorePerformanceData(): void {
+    this.searchDisabled = true;
+    this.storePerformanceLoading = true;
+    this.storePerformanceNoData = true;
+    const requestData = {
+      fromDate: this.headerData.date.startDate,
+      toDate: this.headerData.date.endDate,
+      storeId: this.headerData.stores.filter((store:any) => store.checked).map((store:any) => store.storeId),
+      clientId: this.headerData.client,
+      userEmailes: this.userEmailes,
+      limit: this.itemsPerPage,
+      offset: this.currentPage - 1,
+      sortBy: this.sortDirection,
+      sortColumnName: this.sortColumName,
+      searchValue: this.searchInput,
+      export: false,
+    };
+    this.TraxService.getStorePerformanceData(requestData).subscribe({
+      next: (response: any) => {
+        this.storePerformanceLoading = false;
+        if (response?.code === 200 && response?.status === "success") {
+          this.storePerformanceData = response.data.storePerformance || [];
+          this.totalItems = response.data.totalCount;
+          this.setPaginationSizes()
+          this.storePerformanceLoading = false;
+          this.storePerformanceNoData = false;
+          this.searchDisabled = false;
+        } else {
+          this.storePerformanceData = [];
+          this.storePerformanceLoading = false;
+          this.storePerformanceNoData = true;
+          this.searchDisabled = true;
+          if (this.searchInput?.length) {
+            this.searchDisabled = true
+          }
+          this.storePerformanceData = []
+          this.totalItems = 0
+          this.changeDetector.detectChanges()
+        }
+      },
+      error: () => {
+        this.storePerformanceData = [];
+        this.changeDetector.detectChanges()
+      }
+    });
+  }
+  getUserPerformanceData(): void {
+    this.searchDisabled = true;
+    this.userPerformanceLoading = true;
+    this.userPerformanceNoData = true;
+    const requestData = {
+      fromDate: this.headerData.date.startDate,
+      toDate: this.headerData.date.endDate,
+      storeId: this.headerData.stores.filter((store: any) => store.checked).map((store: any) => store.storeId),
+      userEmailes: this.userEmailes,
+      clientId: this.headerData.client,
+      limit: this.itemsPerPage,
+      offset: this.currentPage - 1,
+      sortBy: this.sortDirection,
+      sortColumnName: this.sortColumName,
+      searchValue: this.searchInput,
+      export:this.userPerformanceDataexport
+    };
+  
+    this.TraxService.getUserPerformanceData(requestData).subscribe({
+      next: (response: any) => {
+        this.userPerformanceLoading = false;
+        if (response?.code === 200 && response?.status === "success") {
+          this.userPerformanceData = response.data.userPerformance || [];
+          this.totalItems = response.data.totalCount;
+          this.setPaginationSizes()
+          this.userPerformanceLoading = false;  
+          this.userPerformanceNoData = false;
+          this.searchDisabled = false;
+        } else {
+          this.userPerformanceData = [];
+          this.userPerformanceLoading = false;  
+          this.userPerformanceNoData = true;
+          this.searchDisabled = true;
+          if (this.searchInput?.length) {
+            this.searchDisabled = true
+          }
+          this.userPerformanceData = []
+          this.totalItems = 0
+          this.changeDetector.detectChanges()
+        }
+      },
+      error: () => {
+        this.userPerformanceData = [];
+        this.changeDetector.detectChanges()
+      }
+    });
+  }
+ 
+  
+
+  onExport(): void {
+    this.currentPage = 0;
+    const requestData = {
+      fromDate: this.headerData.date.startDate,
+      toDate: this.headerData.date.endDate,
+      storeId: this.headerData.stores.filter((store: any) => store.checked).map((store: any) => store.storeId),
+      userEmailes: this.userEmailes,
+      clientId:this.headerData.client,
+      limit: 10000,                 
+      offset: this.currentPage,
+      sortBy: this.sortDirection,
+      sortColumnName: this.sortColumName,
+      searchValue: this.searchInput,
+      export: true
+      
+    };
+    switch (this.receivedData) {
+      case 'checklist':
+        this.TraxService.getChecklistPerformanceDataExport(requestData)
+        .pipe(takeUntil(this.destroy$))
+        .subscribe({
+          next: (res) => {
+            this.TraxService.saveAsExcelFile(res, 'ChecklistPerformanceTable');
+          },
+          error: (e) => {
+            this.toast.getErrorToast('Something went Wrong..')
+          }
+        });
+        break;
+      case 'store':
+        this.TraxService.getStorePerformanceDataExport(requestData)
+        .pipe(takeUntil(this.destroy$))
+        .subscribe({
+          next: (res) => {
+            this.TraxService.saveAsExcelFile(res, 'StorePerformanceTable');
+          },
+          error: (e) => {
+            this.toast.getErrorToast('Something went Wrong..')
+          }
+        });
+        break;
+        case 'user':
+          this.TraxService.getUserPerformanceDataExport(requestData)
+          .pipe(takeUntil(this.destroy$))
+          .subscribe({
+            next: (res) => {
+              this.TraxService.saveAsExcelFile(res, 'UserPerformanceTable');
+            },
+            error: (e) => {
+              this.toast.getErrorToast('Something went Wrong..')
+            }
+          });
+          break;
+      default:
+    }
+}
+  searchField(): void {
+    this.headerData.searchValue = this.searchInput;
+    this.headerData.export = false;
+    this.currentPage = 1;
+    this.pageSize=10;
+    switch (this.receivedData) {
+      case 'checklist':
+        this.getChecklistPerformanceData();
+        break;
+      case 'store':
+        this.getStorePerformanceData();
+        break;
+      case 'user':
+        this.getUserPerformanceData();
+        break;
+      default:
+    }
+  }
+  sortData(column: string): void {
+    if (this.sortColumName === column) {
+      this.sortDirection = this.sortDirection === 1 ? -1 : 1;
+    } else {
+      this.sortColumName = column;
+      this.sortDirection = 1;
+    }
+    switch (this.receivedData) {
+      case 'checklist':
+        this.getChecklistPerformanceData();
+        break;
+      case 'store':
+        this.getStorePerformanceData();
+        break;
+      case 'user':
+        this.getUserPerformanceData();
+        break;
+      default:
+    }
+  }
+  onPageSizeChange(pageSize: any) {
+    this.currentPage = 1;
+    this.itemsPerPage = parseInt(pageSize);
+    this.pageSize = parseInt(pageSize);
+    this.changeDetector.detectChanges();
+    switch (this.receivedData) {
+      case 'checklist':
+        this.getChecklistPerformanceData();
+        break;
+      case 'store':
+        this.getStorePerformanceData();
+        break;
+      case 'user':
+        this.getUserPerformanceData();
+        break;
+      default:
+    }
+  }
+  onPageChange(pageOffset: any) {
+    this.currentPage = pageOffset
+    switch (this.receivedData) {
+      case 'checklist':
+        this.getChecklistPerformanceData();
+        break;
+      case 'store':
+        this.getStorePerformanceData();
+        break;
+      case 'user':
+        this.getUserPerformanceData();
+        break;
+      default:
+    }
+  }
+  setPaginationSizes() {
+    if (this.totalItems > 10) {
+      this.paginationSizes = [10, 20, 30];
+    } else {
+      this.paginationSizes = [this.totalItems];
+      this.pageSize = this.totalItems; 
+    }
+    
+  }
+  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.changeDetector.detectChanges()
+    this.gs.dataRangeValue.next(datavalue)
+    this.gs.manageRefreshTrigger.next(true);
+    this.router.navigate(['/manage/trax/dashboard/info'], { queryParams: { type: 'store', store_id: data,  } });
+  }
+  dateValue(type: string): void {
+    this.dateType = type;
+    localStorage.setItem('dashboardDateType', type);
+    this.getOverallComparisonCardsData();
+  }
+  selectPlan(selectedType: string): void {
+    this.type = selectedType;  
+}
+}
+
+interface DataContext {
+  category: string;
+  value: number;
+  count: number;
+}
+
+function getDaysBetweenDates(fromDate: string, toDate: string): number {
+  // Parse the date strings into Date objects
+  const start = new Date(fromDate);
+  const end = new Date(toDate);
+  const differenceInMs = end.getTime() - start.getTime();
+  const millisecondsPerDay = 86400000;
+  const differenceInDays = Math.floor(differenceInMs / millisecondsPerDay);
+
+  return differenceInDays;
+}