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

package/src/lib/components/action-centre/action-centre.component.scss

@@ -0,0 +1,185 @@
+.actioncard{
+    display: flex;
+padding: 8px 16px;
+align-items: center;
+gap: 16px;
+align-self: stretch;
+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;
+box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.05);
+}
+.actioncount{
+    color: var(--Black, #101828);
+font-size: 30px;
+font-style: normal;
+font-weight: 600;
+line-height: 38px; /* 126.667% */
+}
+.actiontext{
+    color: var(--Gray-700, #344054);
+font-size: 14px;
+font-style: normal;
+font-weight: 500;
+line-height: 20px; /* 142.857% */
+}
+.approvalcard{
+    border-radius: 6px;
+background: var(--Gray-50, #F9FAFB);
+// display: flex;
+flex-direction: column;
+align-items: center;
+flex: 1 0 0;
+align-self: stretch;
+}
+.approvalheader{
+    display: flex;
+padding: 16px 15px;
+justify-content: space-between;
+align-items: center;
+align-self: stretch;
+border-radius: 6px 6px 0px 0px;
+background: var(--Gray-100, #F2F4F7);
+}
+.approvalbody{
+    border-radius: 8px;
+border: 1px solid var(--Primary-25, #F6FCFF);
+background: var(--White, #FFF);
+
+/* Shadow/md */
+box-shadow: 0px 4px 8px -2px rgba(16, 24, 40, 0.10), 0px 2px 4px -2px rgba(16, 24, 40, 0.06);
+display: flex;
+padding: 12px;
+flex-direction: column;
+align-items: flex-start;
+gap: 12px;
+align-self: stretch;
+}
+.cate-text{
+    color: #626F86;
+font-size: 12px;
+font-style: normal;
+font-weight: 500;
+line-height: 18px; /* 150% */
+}
+.cate-sub{
+color: var(--Gray-700, #344054);
+text-align: center;
+font-size: 12px;
+font-style: normal;
+font-weight: 500;
+line-height: 18px; /* 150% */
+mix-blend-mode: multiply;
+}
+.card-label{
+    color: var(--Gray-900, #101828);
+font-size: 18px;
+font-style: normal;
+font-weight: 600;
+line-height: 28px; /* 155.556% */
+}
+.text-sub{
+    color: var(--Gray-500, #667085);
+font-size: 14px;
+font-style: normal;
+font-weight: 400;
+line-height: 20px; /* 142.857% */
+}
+.headingtext{
+    color: var(--Black, #101828);
+font-size: 16px;
+font-style: normal;
+font-weight: 500;
+line-height: 24px; /* 150% */
+}
+.cardsubtext{
+    color: var(--Gray-500, #667085);
+font-size: 12px;
+font-style: normal;
+font-weight: 500;
+line-height: 18px; /* 150% */
+}
+.cardscroll{
+    overflow-y: scroll;
+    max-height: 275px;
+}
+.badge-light-blue{
+    border-radius: 16px;
+background: var(--Blue-50, #EFF8FF);
+display: flex;
+padding: 2px 8px 2px 6px;
+justify-content: center;
+align-items: center;
+gap: 4px;
+color: var(--Blue-700, #175CD3);
+text-align: center;
+font-size: 12px;
+font-style: normal;
+font-weight: 500;
+line-height: 18px; /* 150% */
+}
+.badge-light-violet{
+    border-radius: 16px;
+background: var(--Purple-50, #F4F3FF);
+// display: flex;
+padding: 2px 8px;
+justify-content: center;
+align-items: center;
+color: var(--Purple-700, #5925DC);
+text-align: center;
+font-size: 12px;
+font-style: normal;
+font-weight: 500;
+line-height: 18px; /* 150% */
+}
+.headtext{
+    color: var(--Black, #101828);
+font-size: 18px;
+font-style: normal;
+font-weight: 500;
+line-height: 28px; /* 155.556% */
+}
+.card .card-header{
+    padding: 0px 0.5rem;
+}
+
+.nav-item {
+    .nav-link {
+        color: var(--Gray-500, #667085);
+        font-size: 16px;
+        font-weight: 500;
+    }
+}
+
+.activebtn {
+    color: var(--Primary-700, #009BF3) !important;
+    border-radius: 6px !important;
+    background: var(--Primary-50, #EAF8FF) !important;
+    font-size: 16px !important;
+    font-weight: 500 !important;
+}
+
+.buttonsec {
+    border-radius: 8px;
+    margin: 0px;
+    // border: 1px solid var(--gray-100, #F2F4F7);
+    background: var(--gray-50, white);
+    width: 100%;
+    height: fit-content;
+    padding: 5px;
+}
+.nav-group-outline {
+    border-radius: 8px;
+    border: 1px solid var(--Primary-300, #6BCAFF);
+    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+}
+.nav-group .btn.activePlanBtn {
+    border-right: 1px solid var(--Primary-300, #6BCAFF);
+    background: var(--Primary-600, #00A3FF);
+    color: white;
+}
+.nav-group .btn.inactivePlanBtn {
+    background-color: white;
+    color: #333;
+    border: 1px solid #dcdcdc;
+}

package/src/lib/components/action-centre/action-centre.component.spec.ts

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

package/src/lib/components/action-centre/action-centre.component.ts

@@ -0,0 +1,279 @@
+import { ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
+import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
+import { Subject, debounceTime, distinctUntilChanged, filter, takeUntil } from "rxjs";
+import { GlobalStateService, PageInfoService } from 'tango-app-ui-global';
+import { TraxService } from '../../services/trax.service';
+import dayjs from 'dayjs';
+import { Router } from '@angular/router';
+@Component({
+  selector: 'lib-action-centre',
+  templateUrl: './action-centre.component.html',
+  styleUrl: './action-centre.component.scss'
+})
+export class ActionCentreComponent implements OnInit,OnDestroy {
+  private destroy$ = new Subject();
+  searchInput: any = "";
+  form: FormGroup;
+  headerData: any;
+  overallCardsData: any = {};
+  cardDataLoading: boolean = true;
+  cardNoData: boolean = false;
+  searchDisabled: boolean = false;
+  approvalOpenLoading: boolean = true;
+  approvalOpenNoData: boolean = false;
+  itemsPerPage = 10
+  currentPage = 1
+  sortColumName: string = '';
+  sortBy: any = '';
+  sortDirection: any = '';
+  totalItems = 0
+  paginationSizes: any[] = [];
+  pageSize = 10
+  OpenApprovalListData: any[] = [];
+  InprogressApprovalListData: any[] = [];
+  DoneApprovalListData: any[] = [];
+  approvalInprogressLoading: boolean = true;
+  approvalInprogressNoData: boolean = false;
+  approvedLoading: boolean = true;
+  approvedNoData: boolean = false;
+  priorityType: any = [];
+  selectedlistselectControl: FormControl;
+  selectedStatus: any;
+  statusselectControl = [
+    { _id: 'all', label: 'All' },
+    { _id: 'checklist', label: 'Checklist' },
+    { _id: 'task', label: 'Task' },
+  ];
+  dataObject: any = [
+    {
+      Description: 'Priority',
+      Issues: [
+        { text: 'High', id: 'high' },
+        { text: 'Medium', id: 'medium' },
+        { text: 'Low', id: 'low' },
+      ],
+    },
+  ];
+  searchValue: string;
+  limit: number;
+  offset: number;
+  isTaskSelected: boolean = false;
+  dayjs = dayjs;
+  date: any;
+  userEmailes: any = [];
+
+  constructor(private fb: FormBuilder, public gs: GlobalStateService, private pageInfo: PageInfoService, private TraxService: TraxService,
+    private changeDetector: ChangeDetectorRef, private router: Router,
+  ) {
+    this.userEmailes = JSON.parse(localStorage.getItem("usersEmail-info") || "[]" )
+   }
+  ngOnDestroy(): void {
+    this.destroy$.next(true);
+    this.destroy$.complete();
+  }
+
+  ngOnInit(): void {
+    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$), debounceTime(300))
+      .subscribe((data: any) => {
+        this.headerData = data;
+        this.setPageData();
+        this.getOverallActionCenterData();
+        this.getApprovalOpenData();
+      })
+  }
+  setPageData() {
+    this.pageInfo.setTitle("Action Center");
+    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 },
+    ]);
+  }
+
+  getOverallActionCenterData(): 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.getOverallActionCenterData(requestData).pipe(takeUntil(this.destroy$)).subscribe((response: any) => {
+      this.cardDataLoading = false;
+      if (response?.code === 200 && response?.status === "success") {
+        this.overallCardsData = response.data?.cardData || {};
+        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()
+      }
+    );
+  }
+
+  getApprovalOpenData(): void {
+    this.searchDisabled = true;
+    this.approvalOpenLoading = true;
+    this.approvalOpenNoData = true;
+
+    this.approvalInprogressLoading = true;
+    this.approvalInprogressNoData = true;
+
+    this.approvedLoading = true;
+    this.approvedNoData = 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,
+      searchValue: this.searchInput,
+      filter: this.priorityType,
+      type: this.selectedlistselectControl.value
+    };
+
+    this.TraxService.getApprovalData(requestData)
+      .pipe(takeUntil(this.destroy$))
+      .subscribe((response: any) => {
+        this.approvalOpenLoading = false;
+        this.approvalInprogressLoading = false;
+        this.approvedLoading = false;
+        if (response?.code === 200 && response?.status === "success") {
+          this.OpenApprovalListData = response.data.open || [];
+          this.InprogressApprovalListData = response.data.inprogress || [];
+          this.DoneApprovalListData = response.data.done || [];
+          this.totalItems = response.data.totalCount
+          this.setPaginationSizes()
+          if (this.OpenApprovalListData.length > 0) {
+            this.approvalOpenLoading = false;
+            this.approvalOpenNoData = false;
+          } else {
+            this.approvalOpenNoData = true;
+          }
+          if (this.InprogressApprovalListData.length > 0) {
+            this.approvalInprogressLoading = false;
+            this.approvalInprogressNoData = false;
+          } else {
+            this.approvalInprogressNoData = true;
+          }
+          if (this.DoneApprovalListData.length > 0) {
+            this.approvedLoading = false;
+            this.approvedNoData = false;
+          } else {
+            this.approvedNoData = true;
+          }
+          this.searchDisabled = false;
+        } else {
+          this.OpenApprovalListData = [];
+          this.InprogressApprovalListData = [];
+          this.DoneApprovalListData = [];
+
+          this.approvalOpenLoading = false;
+          this.approvalOpenNoData = true;
+
+          this.approvalInprogressLoading = false;
+          this.approvalInprogressNoData = true;
+
+          this.approvedLoading = false;
+          this.approvedNoData = true;
+
+          this.searchDisabled = true;
+          if (this.searchInput?.length) {
+            this.searchDisabled = true
+          }
+          this.OpenApprovalListData = [];
+          this.InprogressApprovalListData = [];
+          this.DoneApprovalListData = [];
+          this.totalItems = 0
+          this.changeDetector.detectChanges()
+        }
+      }, error => {
+        this.OpenApprovalListData = [];
+        this.InprogressApprovalListData = [];
+        this.DoneApprovalListData = [];
+        this.changeDetector.detectChanges()
+      });
+  }
+  onValueChangeStatusSelect(event: any): void {
+    this.searchValue = "",
+      this.selectedStatus = this.statusselectControl.find(item => item._id === event);
+    if (this.selectedStatus) {
+      this.isTaskSelected = this.selectedStatus._id === 'task';
+      if (this.selectedlistselectControl.value === "all") {
+        this.priorityType = []
+      }
+      this.changeDetector.detectChanges();
+      this.getApprovalOpenData();
+    }
+  }
+  searchField(): void {
+    this.headerData.search = this.searchInput;
+    this.currentPage = 1;
+    this.pageSize = 10;
+    this.getApprovalOpenData();
+  }
+  setPaginationSizes() {
+    if (this.totalItems > 10) {
+      this.paginationSizes = [10, 20, 30];
+    } else {
+      this.paginationSizes = [this.totalItems];
+      this.pageSize = this.totalItems;
+    }
+  }
+
+  applyFilters(event: any): void {
+    if (event?.length) {
+      event.forEach((element: any) => {
+        if (element.Description === 'Priority') {
+          this.priorityType = element.Issues.map((val: any) => val.id);
+        }
+      });
+    } else {
+      this.priorityType = [];
+    }
+    this.getApprovalOpenData();
+  }
+  navigateToGallery(item: any): void {
+    let formattedDate = dayjs(item.publishDate).format('YYYY-MM-DD');
+    let checklistType: string;
+  
+    if (item.checkListType === 'custom') {
+      checklistType = 'custom';
+    } else if (['task', 'checklistTask', 'cctv'].includes(item.checkListType)) {
+      checklistType = 'task';
+    } else {
+      checklistType = item.checkListType || '--';
+    }
+    let queryParams: any = {
+      ChecklistDate: formattedDate,
+      checklistType: checklistType,
+      sourceCheckList_id: item.sourceChecklistId,
+      coverage:item.coverage
+    };
+    if (item.redo) {
+      queryParams.viewRedo = true;
+    }
+  
+    this.router.navigate(['/manage/trax/gallery'], { queryParams });
+  }
+}

package/src/lib/components/activity-log/activity-log.component.html

@@ -0,0 +1,84 @@
+<div class="col-md-12">
+    <div *ngIf="!activityLogLoading && !activityLogNoData" class="row cardscroll">
+        <div class="col-6">
+            <div class="timeline-label">
+                <div *ngFor="let log of activityLog; let i = index" class="timeline-item mb-6"
+                    [ngClass]="{'d-none': i % 2 !== 0}">
+                    <div class="timeline-badge mx-1">
+                        <span>
+                            <svg xmlns="http://www.w3.org/2000/svg" width="13" height="14" viewBox="0 0 13 14"
+                                fill="none">
+                                <circle cx="6.5" cy="7" r="5" [attr.stroke]="log.action === 'started' ? '#12B76A' : (log.action === 'submitted' || log.action === 'lapsed' ? '#F04438' : '#000000')" stroke-width="3" />
+                            </svg>
+                        </span>
+                    </div>
+                    <div class="logtextmain">
+                        {{ log?.coverage === 'user' ? log?.userName : log?.storeName }}
+                        <span class="logtextsub mx-1">{{ log.action | titlecase }}</span>
+                        <span class="logtextmain mx-1">{{ log.checkListName || "--" }}</span>
+                        <span class="logtextsub mx-1">at {{ log.createdAt | date: 'MMM dd, y' }}</span>
+                    </div>
+                    <div (click)="navigateToGallery(log)" *ngIf="log.action === 'submitted'" class="logview mx-2 cursor-pointer">View</div>
+                </div>
+            </div>
+        </div>
+        <div class="col-6">
+            <div class="timeline-label">
+                <div *ngFor="let log of activityLog; let i = index" class="timeline-item mb-6"
+                    [ngClass]="{'d-none': i % 2 === 0}">
+                    <div class="timeline-badge mx-1">
+                        <span>
+                            <svg xmlns="http://www.w3.org/2000/svg" width="13" height="14" viewBox="0 0 13 14"
+                                fill="none">
+                                <circle cx="6.5" cy="7" r="5" [attr.stroke]="log.action === 'started' ? '#12B76A' : (log.action === 'submitted' || log.action === 'lapsed' ? '#F04438' : '#000000')" stroke-width="3" />
+                            </svg>
+                        </span>
+                    </div>
+                    <div class="logtextmain">
+                        {{ log?.coverage === 'user' ? log?.userName : log?.storeName }}
+                        <span class="logtextsub mx-1">{{ log.action | titlecase }}</span>
+                        <span class="logtextmain mx-1">{{ log.checkListName || "--" }}</span>
+                        <span class="logtextsub mx-1">at {{ log.createdAt | date: 'MMM dd, y' }}</span>
+                    </div>
+                    <div (click)="navigateToGallery(log)" *ngIf="log.action === 'submitted'" class="logview mx-2 cursor-pointer">View</div>
+                </div>
+            </div>
+        </div>  
+    </div>
+    <div *ngIf="!activityLogLoading && !activityLogNoData">
+        <lib-pagination class="text-start" [itemsPerPage]="itemsPerPage" [currentPage]="currentPage"
+            [totalItems]="totalItems" [paginationSizes]="paginationSizes" [pageSize]="pageSize"
+            (pageChange)="onPageChange($event)"
+            (pageSizeChange)="onPageSizeChange($event)"></lib-pagination>
+    </div>
+    <ng-container *ngIf="activityLogLoading">
+        <div class="row loader  d-flex justify-content-center align-items-center">
+            <div class="shimmer">
+                <div class="wrapper">
+                    <div class="stroke animate title"></div>
+                    <div class="stroke animate link"></div>
+                    <div class="stroke animate description"></div>
+                </div>
+            </div>
+            <div class="shimmer">
+                <div class="wrapper">
+                    <div class="stroke animate title"></div>
+                    <div class="stroke animate link"></div>
+                    <div class="stroke animate description"></div>
+                </div>
+            </div>
+        </div>
+    </ng-container>
+    <ng-container *ngIf="activityLogNoData && !activityLogLoading">
+        <div class="row">
+            <div class="col-lg-12 my-6">
+                <div class="card-body d-flex justify-content-center align-items-center flex-column">
+                    <img class="img-src" src="./assets/tango/Icons/Nodata1.svg" alt="">
+                    <div class="nodatamaintext mt-3">No data found</div>
+                    <div class="nodatasubtext">There is no result for Performance Table
+                    </div>
+                </div>
+            </div>
+        </div>
+    </ng-container>
+</div>

package/src/lib/components/activity-log/activity-log.component.scss

@@ -0,0 +1,33 @@
+.timeline-label {
+    position: unset;
+
+}
+
+.logtextmain {
+    color: var(--Black, #101828);
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 20px;
+}
+
+.logtextsub {
+    color: var(--Gray-400, #98A2B3);
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 20px;
+}
+.logview{
+    color: var(--Primary-700, #009BF3);
+font-size: 14px;
+font-style: normal;
+font-weight: 600;
+line-height: 20px; /* 142.857% */
+text-decoration-line: underline;
+text-transform: capitalize;
+}
+.cardscroll{
+    overflow-y: scroll;
+    max-height: 275px;
+}

package/src/lib/components/activity-log/activity-log.component.spec.ts

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