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

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

@@ -0,0 +1,340 @@
+import { ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { TraxService } from '../../services/trax.service';
+import { GlobalStateService, PageInfoService } from 'tango-app-ui-global';
+import { ToastService } from 'tango-app-ui-shared';
+import { Subject, debounceTime, distinctUntilChanged, filter, takeUntil } from "rxjs";
+import dayjs from 'dayjs';
+import utc from 'dayjs/plugin/utc';
+dayjs.extend(utc);
+import { Location } from '@angular/common';
+@Component({
+  selector: 'lib-task',
+  templateUrl: './task.component.html',
+  styleUrl: './task.component.scss'
+})
+export class TaskComponent implements OnDestroy, OnInit {
+  dayjs = dayjs
+  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 ="";
+  headerData: any;
+  searchValue: string;
+  limit: number;
+  offset: number;
+  searchDisabled: boolean = false;
+  taskLoading: boolean = true;
+  taskNoData: boolean = false;
+  dataObject: any = [
+    {
+      Description: 'Priority',
+      Issues: [
+        { text: 'High', id: 'high' },
+        { text: 'Medium', id: 'medium' },
+        { text: 'Low', id: 'low' },
+      ],
+    },
+    {
+      Description: 'Coverage',
+      Issues: [
+        { text: 'Checklist', id: 'checklist' },
+       
+      ],
+    },
+  ];
+  overallCardsData: any = {};
+  cardDataLoading: boolean = true;
+  cardNoData: boolean = false;
+  taskTableData: any[] = [];
+  type: string = 'Task'; 
+  priorityType: any = [];
+  reloadDate: string;
+  checklistId: any;
+  coverageType: any = [];
+  userEmailes: any = [];
+
+  
+  constructor(private route: ActivatedRoute, private router: Router,public gs: GlobalStateService,private changeDetector: ChangeDetectorRef,private toast: ToastService,
+    private TraxService: TraxService, private pageInfo: PageInfoService,private activatedRoute: ActivatedRoute,private location: Location,
+  ) {
+    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.activatedRoute.queryParams.subscribe(params => {  
+      if (params['coverage']) {
+        this.coverageType = [params['coverage']];  
+        this.dataObject.forEach((category: any) => {
+          if (category.Description === 'Coverage') {
+            category.Issues.forEach((issue: any) => {
+              if (issue.id === params['coverage']) {
+                issue.checked = true; 
+              }
+            });
+          }
+        });
+        // this.applyFilters([{ Description: 'Coverage', Issues: [{ text: params['coverage'], id: params['coverage'], checked: true}] }]);
+       this.router.navigate([], {
+        relativeTo: this.route,
+        queryParams: {
+          coverage: params['coverage'],
+          checklistId: params['checklistId'] 
+        },
+        queryParamsHandling: 'merge',
+        });
+
+      } 
+      else {
+        this.checklistId = '';
+      }
+      if(params.checklistId){
+        this.checklistId = params.checklistId
+      }
+    });
+   
+    this.gs.dataRangeValue
+    .pipe(takeUntil(this.destroy$), debounceTime(300))
+    .subscribe((data: any) => {
+        this.itemsPerPage = 10;
+        this.pageSize =10;
+        this.headerData = data;
+        this.currentPage = 1;
+        this.setPageData();
+        this.getOverallCardsData();
+        // this.getTaskTableData();
+        this.applyFilters([{ Description: 'Coverage', Issues: [{ text: this.coverageType[0], id: this.coverageType[0], checked: true}] }]);
+    
+      
+})
+}
+  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 },
+    ]);
+  }
+  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),
+      userEmailes: this.userEmailes,
+      clientId:this.headerData.client,
+    };
+
+    this.TraxService.getOverallTasksData(requestData).pipe(takeUntil(this.destroy$)).subscribe((response: any) => {
+      this.cardDataLoading = false;
+        if (response?.code === 200 && response?.status === "success") {
+          this.overallCardsData = response.data?.cardData?.[0] || {}; 
+          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()
+      }
+    );
+  }
+  
+
+  getTaskTableData(): void {
+    this.searchDisabled = true;
+    this.taskLoading = true;
+    this.taskNoData = 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: false,
+      filter: this.priorityType,
+      coverage: this.coverageType || [],
+      checklistId: this.checklistId
+
+    };
+
+    this.TraxService.getTaskTableData(requestData)
+      .pipe(takeUntil(this.destroy$))
+      .subscribe((response: any) => {
+        this.taskLoading = false;
+        if (response?.code === 200 && response?.status === "success") {
+          this.taskTableData = response.data.data || [];
+          this.totalItems = response.data.count
+          this.setPaginationSizes()
+          this.taskLoading = false;
+          this.taskNoData = false;
+          this.searchDisabled = false;
+        } else {
+          this.taskTableData = [];
+          this.taskLoading = false;
+          this.taskNoData = true;
+          this.searchDisabled = true;
+          if (this.searchInput?.length) {
+            this.searchDisabled = true
+          }
+          this.taskTableData = []
+          this.totalItems = 0
+          this.changeDetector.detectChanges()
+        }
+      }, error => {
+        this.taskTableData = []
+        this.changeDetector.detectChanges()
+      });
+      this.checklistId = "";
+  }
+  removeQueryParams() {
+    const urlWithoutParams = this.location.path().split('?')[0];
+    this.location.replaceState(urlWithoutParams);
+  }
+  setPaginationSizes() {
+    if (this.totalItems > 10) {
+      this.paginationSizes = [10, 20, 30];
+      this.pageSize = this.pageSize
+    } else {
+      this.paginationSizes = [this.totalItems];
+      this.pageSize = this.totalItems;
+    }    
+  }
+  
+  onExport(): void {
+    this.currentPage = 1;
+    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: 0,
+      sortBy: this.sortDirection,
+      sortColumnName: this.sortColumName,
+      searchValue: this.searchInput,
+      export: true,
+      filter: this.priorityType,
+      coverage: this.coverageType || []
+    };
+        this.TraxService.getTaskTableDataExport(requestData)
+        .pipe(takeUntil(this.destroy$))
+        .subscribe({
+          next: (res) => {
+            this.TraxService.saveAsExcelFile(res, 'TaskTable');
+          },
+          error: (e) => {
+            this.toast.getErrorToast('Something went Wrong..')
+          }
+        });
+       
+    }  
+  searchField(): void {
+    this.headerData.searchValue = this.searchInput;
+    this.headerData.export = false;
+    this.currentPage = 1;
+    this.pageSize=10;
+    this.getTaskTableData();
+    }
+  sortData(column: string): void {
+    if (this.sortColumName === column) {
+      this.sortDirection = this.sortDirection === 1 ? -1 : 1;
+    } else {
+      this.sortColumName = column;
+      this.sortDirection = 1;
+    }
+    this.getTaskTableData();
+    }
+  
+  onPageSizeChange(pageSize: any) {
+    this.currentPage = 1;
+    this.itemsPerPage = parseInt(pageSize);
+    this.pageSize = parseInt(pageSize);
+    this.changeDetector.detectChanges();
+    this.getTaskTableData();
+    }
+  onPageChange(pageOffset: any) {
+    this.currentPage = pageOffset
+    this.getTaskTableData();
+  }
+  applyFilters(event: any): void {
+
+    
+    if (event?.length) {
+      event.forEach((element: any) => {
+        if (element.Description === 'Priority') {
+          this.priorityType = element.Issues.map((val: any) => val.id);
+        }
+        if (element.Description === 'Coverage') {
+          this.coverageType = element.Issues.map((val: any) => val.id) || [];
+        }
+      });
+    } else {
+      this.priorityType = [];
+      this.coverageType = [];
+    }
+    this.getTaskTableData();
+    this.removeQueryParams()
+  }
+  selectPlan(selectedType: string): void {
+    this.type = selectedType;  
+}
+taskDelete(id: any) {
+  const requestData = {
+      taskId: id
+  };
+  this.TraxService.getTaskDelete(requestData).pipe(takeUntil(this.destroy$)).subscribe((response: any) => {
+      if (response?.code === 200 && response?.status === "success" && response?.data?.message) {
+        this.toast.getSuccessToast(response.data.message);
+        this.getTaskTableData();
+        // this.toast.getSuccessToast(`Task Deleted successfully.`);
+      } else {
+        this.toast.getErrorToast("Failed to delete the task."); 
+      }
+    },
+    error => {
+      this.toast.getErrorToast("An error occurred while deleting the task.");
+    this.changeDetector.detectChanges()
+    
+    }
+  );
+ 
+}
+navigateToTaskConfig(task: any): void {
+    this.router.navigate(['manage/trax/task-configure'], { queryParams: {taskId:task._id} })
+}
+
+navigateToTaskEdit(task: any): void {
+    this.router.navigate(['manage/trax/create-task'], { queryParams: {id:task._id} })
+}
+
+dateFormat(date:any) {
+  return this.dayjs.utc(date).format('DD MMM YYYY')
+}
+}