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

package/src/lib/components/flags-new/flags-new.component.scss

@@ -0,0 +1,121 @@
+.ellipse1 {
+    border-radius: 6px;
+    border-bottom: 2px solid var(--Gray-200, #EAECF0);
+    background: radial-gradient(206.89% 107.47% at 16.16% 32.77%, rgba(255, 255, 255, 0.40) 0%, rgba(69, 187, 254, 0.20) 100%), #F2F4F7;
+
+    /* Shadow/Soft Shadow */
+    box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.05);
+}
+
+.card-border {
+    padding: 8px;
+    border-radius: 12px;
+    border: 1px solid var(--Gray-300, #D0D5DD);
+    background: var(--White, #FFF);
+}
+
+.cardcount {
+    color: var(--Black, #101828);
+    font-size: 30px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 38px; /* 126.667% */
+}
+
+.cardtext {
+    color: var(--Gray-700, #344054);
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 20px;
+}
+.cardsubcount{
+    color: var(--Black, #101828);
+    font-size: 20px;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 30px; /* 150% */
+}
+.card-border {
+    padding: 8px;
+    border-radius: 12px;
+    border: 1px solid var(--Gray-300, #D0D5DD);
+    background: var(--White, #FFF);
+  }
+  .percent-value{
+    color: var(--Gray-500, #667085);
+text-align: center;
+font-size: 16px;
+font-style: normal;
+font-weight: 600;
+line-height: 18px; /* 112.5% */
+  }
+  .week-font{
+    color: var(--Gray-800, #1D2939);
+font-size: 12px;
+font-style: normal;
+font-weight: 400;
+line-height: 18px; /* 150% */
+  }
+  .flagcard{
+    padding: 0px 0px 0px 15%;
+  }
+  .table-title-primary{
+    color: var(--Primary-700, #009BF3) !important;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 500 !important;
+    line-height: 30px;
+    text-decoration-line: underline;
+}
+.table-title{
+  color: var(--Gray-500, #667085);
+font-size: 14px;
+font-style: normal;
+font-weight: 500 !important;
+line-height: 20px; /* 142.857% */
+}
+
+.rotate {
+  rotate: 180deg;
+  transition: 1s;
+}
+
+td{
+  vertical-align: middle;
+}
+
+.inactive-card{
+  border-radius: 8px;
+  border: 1px solid var(--Gray-300, #D0D5DD);
+  background: #FFF;
+  .inactive-header{
+    font-size: 16px;
+    font-weight: 500;
+    line-height: 24px; 
+    border-radius: 4px;
+    padding: 8px 16px;
+    background: radial-gradient(206.89% 107.47% at 16.16% 32.77%, rgba(255, 255, 255, 0.40) 0%, rgba(16, 24, 40, 0.03) 100%), #F9FAFB;
+  }
+}
+.active-card{
+  border-radius: 8px;
+  border: 1px solid var(--Primary-300, #6BCAFF);
+  background: var(--Primary-25, #F6FCFF);
+  .active-header{
+    font-size: 16px;
+    font-weight: 500;
+    line-height: 24px; 
+    border-radius: 4px;
+    padding: 8px 16px;
+    background: radial-gradient(206.89% 107.47% at 16.16% 32.77%, rgba(255, 255, 255, 0.40) 0%, rgba(69, 187, 254, 0.20) 100%), #F9FAFB;
+  }
+}
+
+.w-95{
+  width: 97% !important;
+}
+
+.w-5{
+  width: 3% !important;
+}

package/src/lib/components/flags-new/flags-new.component.spec.ts

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

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

@@ -0,0 +1,357 @@
+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, ActivatedRoute } from "@angular/router";
+import { HeaderFilter, FlagsTableData, IFlagCards, IFlagComparisonCards, FlagCardsByType } from './flags-new.interface';
+import { FormControl } from '@angular/forms';
+import dayjs from 'dayjs';
+import customParseFormat from 'dayjs/plugin/customParseFormat';
+import utc from 'dayjs/plugin/utc.js';
+import timeZone from 'dayjs/plugin/timezone.js';
+dayjs.extend(timeZone);
+dayjs.extend(utc);
+dayjs.extend(customParseFormat); 
+
+@Component({
+  selector: 'lib-flags-new',
+  templateUrl: './flags-new.component.html',
+  styleUrl: './flags-new.component.scss'
+})
+export class FlagsNewComponent implements OnInit, OnDestroy {
+  private destroy$ = new Subject<void>();
+  itemsPerPage = 10
+  currentPage = 0
+  totalItems = 0
+  selectedFlag: any = 'all';
+  userEmailes: any = [];
+  paginationSizes = [10, 20, 30]
+  pageSize = 10
+  sortColumName = 'checkListName';
+  sortDirection = 1;
+  headerData: HeaderFilter | null | undefined;
+  traxMonthlyComparisonData: any = "";
+  dayjs = dayjs;
+  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');
+  cardMetricsDataByType: FlagCardsByType | null | undefined
+  filterValues = [
+    {label:'All', value:'all'},
+    {label:'Question', value:'question'},
+    {label:'Not Submitted', value:'time'},
+    {label:'Detection', value:'detection'},
+  ]
+  dateComparisonType: 'daily' | 'weekly' | 'monthly' ;
+
+  constructor(public gs: GlobalStateService, private changeDetector: ChangeDetectorRef, private traxService: TraxService, private router: Router, private pageInfo: PageInfoService,private route:ActivatedRoute) {
+    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' || 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.route.queryParams.subscribe((params: any) => {
+      if (params?.date) {
+        let localDetails = JSON.parse(
+          localStorage.getItem("header-filters") ?? "{}",
+        );
+        if (localDetails) {
+          localDetails.date = { startDate: params.date, endDate: params.date };
+          localStorage.setItem("header-filters", JSON.stringify(localDetails));
+        }
+      }
+    });
+    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.checklistCountByType()
+          this.getChecklistFlagMetrics()
+          this.getChecklistFlagMetricsComparison()
+        }
+      })
+      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.flagsTableData = [];
+    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
+          this.getFlagsTable();
+        } 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
+          if (this.traxMonthlyComparisonData == '') {
+            this.traxMonthlyComparisonData = this.cardMetricsComparisonData?.flagComparisonCards.traxMonthlyComparison
+          }
+        } else {
+          this.cardMetricsComparisonData = null
+        }
+      },
+      error: (e) => {
+        console.log(e);
+
+      }
+    })
+  }
+
+  getFlagsTable(): void {
+    this.flagsTableData = [];
+    this.totalItems = 0;
+    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.selectedFlag,
+      ...(this.selectedFlag === "runAI" && {
+        runAIChecklistName: this.cardMetricsData?.flagCards.runAIFlag.list.map(
+          (ele: any) => ele?.checkListName
+        ),
+      }),
+    };
+
+
+    this.traxService.flagsTableV2(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,
+      "filter":this.selectedFlag,
+      "export":true,      
+      ...(this.selectedFlag === "runAI" && {
+        runAIChecklistName: this.cardMetricsData?.flagCards.runAIFlag.list.map(
+          (ele: any) => ele?.checkListName
+        ),
+      }),
+    }
+
+
+    this.traxService.exportFlagsTablev2(data).pipe(takeUntil(this.destroy$)).subscribe({
+      next: (res) => {
+        this.flagsTableApiState.next('loaded')
+        this.traxService.saveAsExcelFile(res, `${this.selectedFlag.charAt(0).toUpperCase()}${this.selectedFlag.slice(1)} 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' | 'runAI' ) {
+    if(!checklistId){
+      return
+    }
+    let route  = `/manage/trax/flags/flagsinfo?id=${checklistId}`
+    if(this.selectedFlag == 'runAI') {
+      route = route + `&type=runAI`;
+    }
+    if(type){
+      route = route + `&type=${type}`
+    }
+
+    this.router.navigateByUrl(route)
+  }
+
+  dateComparisonValueChange(val:'daily' | 'weekly' | 'monthly' ){
+    localStorage.setItem('dashboardDateType', val)
+    this.dateComparisonType = val
+    this.cardMetricsComparisonData = null
+    this.getChecklistFlagMetricsComparison()
+  }
+
+  selectTabs(flag:any) {
+    this.selectedFlag = flag;
+    this.currentPage  = 0
+    this.getFlagsTable()
+  }
+
+  checklistCountByType(): void {
+    this.cardMetricsApiState.next('loading');
+    const data: Record<string, any> = {
+        "clientId": this.headerData?.client,
+        "fromDate": this.headerData?.date.startDate,
+        "toDate": this.headerData?.date.endDate,
+    };
+
+    this.traxService.checklistCountByType(data).pipe(takeUntil(this.destroy$)).subscribe({
+        next: (res) => {
+            this.cardMetricsApiState.next('loaded');
+            if (res?.code === 200 && res?.status === "success" && res?.data) {
+                this.cardMetricsDataByType = {
+                    aiChecklistCount: res.data.aiChecklistCount,
+                    customChecklistCount: res.data.customChecklistCount,
+                    showCards: res.data.showCards
+                };
+                if (this.cardMetricsDataByType.showCards === 'aiCards') {
+                  this.selectTabs('detection');
+              }
+                this.changeDetector.detectChanges();
+            } else {
+              this.cardMetricsDataByType = null;
+            }
+        },
+        error: (e) => {
+          console.log(e);
+        }
+    });
+}
+}
+

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

@@ -1,81 +1,90 @@
-interface FlagCards {
-    questionFlag: {
-        count: number;
-    };
-    delayInSubmission: {
-        count: number;
-    };
-    detectionFlag: {
-        count: number;
-    };
-    runAIFlag: {
-        flagCount: number;
-        list: any;
-    };
-    totalFlag: number;
-}
-export interface IFlagCards {
-    flagCards: FlagCards;
-}
-interface ComparisonFlag {
-    comparisonData: number;
-    ComparisonFlag: boolean;
-}
-interface FlagComparisonCards {
-    totalComparisonFlag: ComparisonFlag;
-    questionComparisonFlag: ComparisonFlag;
-    delayInSubmissionComparisonFlag: ComparisonFlag;
-    detectionComparisonFlag: ComparisonFlag;
-    traxMonthlyComparison: ComparisonFlag;
-    runAIComparisonFlag: 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;
-    questionCount: number;
-    detectionCount: number;
-    complianceRate: number;
-    customQuestionFlagCount: number;
-    customTimeFlagCount: number;
-    runAIQuestionCount: number;
-    runAIFlag: number;
-}
-interface DateRange {
-    startDate: string;
-    endDate: string;
-}
-interface Store {
-    storeId: string;
-    storeName: string;
-    checked: boolean;
-}
-interface Group {
-    city: string;
-    checked: boolean;
-}
-export interface FlagCardsByType {
-    aiChecklistCount: number;
-    customChecklistCount: number;
-    showCards: string;
-}
-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;
+  };
+  runAIFlag: {
+    flagCount: number;
+    list:any
+  };
+  totalFlag: number;
+}
+  
+ export interface IFlagCards {
+    flagCards: FlagCards;
+  }
+  
+  interface ComparisonFlag {
+    comparisonData: number;
+    ComparisonFlag: boolean;
+  }
+  
+interface FlagComparisonCards {
+  totalComparisonFlag: ComparisonFlag;
+  questionComparisonFlag: ComparisonFlag;
+  delayInSubmissionComparisonFlag: ComparisonFlag;
+  detectionComparisonFlag: ComparisonFlag;
+  traxMonthlyComparison: ComparisonFlag;
+  runAIComparisonFlag: 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;
+    questionCount: number;
+    detectionCount: number;
+    complianceRate: number;
+    customQuestionFlagCount: number;
+    customTimeFlagCount: number;
+    runAIQuestionCount: number;
+    runAIFlag: number;
+  }
+
+  interface DateRange {
+    startDate: string;
+    endDate: string;
+  }
+  
+  interface Store {
+    storeId: string;
+    storeName: string;
+    checked: boolean;
+  }
+  
+  interface Group {
+    city: string;
+    checked: boolean;
+  }
+  
+  export interface FlagCardsByType {
+    aiChecklistCount: number;
+    customChecklistCount: number;
+    showCards: string;
+}
+  
+ export interface HeaderFilter {
+    client: string;
+    clientName: string;
+    clients: string[];
+    store: null | string;
+    date: DateRange;
+    stores: Store[];
+    group: Group[];
+  }