tango-app-ui-shared 3.5.1-task.1 → 3.5.1-task.2

package/src/lib/modules/layout/toolbar/storesingle/storesingle.component.ts

@@ -0,0 +1,105 @@
+import { ChangeDetectorRef, Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';
+import  dayjs from 'dayjs';
+import 'dayjs/locale/en';
+import { AuthService } from '../../../../services/auth.service';
+import { GlobalStateService } from 'tango-app-ui-global';
+import { Router } from '@angular/router';
+
+@Component({
+  selector: 'lib-storesingle',
+  templateUrl: './storesingle.component.html',
+  styleUrl: './storesingle.component.scss'
+})
+export class StoresingleComponent implements OnInit {
+  dayjs = dayjs
+  isCustomDate = (m: dayjs.Dayjs) => {
+    const isValidDate =  m > this.dayjs();    
+    return isValidDate ? 'invalid-date' : false;
+}
+  selectedDateRange: any = {};
+  storeList:any = []
+  selectedClient:any
+  selectedFilters: any = {
+    client: null,
+    clientName:null,
+    clients: [],
+    store: null,
+    stores: [],
+    date: null,
+
+  };
+ constructor(private auth:AuthService, private gs:GlobalStateService, private cd:ChangeDetectorRef,private router:Router){
+ }
+  ngOnInit(): void {
+    const headerFilters: any = JSON.parse(
+      localStorage.getItem("header-filters") || "{}"
+    );
+    this.cd.detectChanges();
+    if(headerFilters?.client){
+    this.auth.getStores(headerFilters?.client).subscribe({
+      next: (e) => {
+        if (e) {
+          this.storeList = e.data.result;
+          const headerFilters: any = JSON.parse(
+            localStorage.getItem("header-filters") || "{}"
+          );
+          this.selectedDateRange = {
+            startDate: this.dayjs(headerFilters?.date?.startDate,"DD-MM-YYYY").format("YYYY-MM-DD"),
+            endDate: this.dayjs(headerFilters?.date?.endDate, "DD-MM-YYYY").format("YYYY-MM-DD")
+          };
+          if (headerFilters?.store) {
+            this.storeList.find((obj: any) => {
+              if (obj.storeId === headerFilters.store) {
+                this.selectedClient = obj;
+              }
+            });
+              this.selectedFilters.store =  headerFilters.store;
+              this.selectedFilters.client =  headerFilters.client;
+              this.selectedFilters.clientName =  headerFilters.clientName;
+              this.selectedFilters.clients =  headerFilters.clients;  
+              this.selectedFilters.date = headerFilters.date;
+              this.selectedDateRange = {
+                startDate:this.dayjs( headerFilters.date.startDate, "YYYY-MM-DD").format("DD-MM-YYYY"),
+                endDate: this.dayjs( headerFilters.date.endDate, "YYYY-MM-DD").format("DD-MM-YYYY"),
+              };
+           
+              localStorage.setItem(
+                "header-filters",
+                JSON.stringify(this.selectedFilters)
+              );
+              this.gs.dataRangeValue.next(this.selectedFilters);
+              this.cd.detectChanges();
+          } else {
+            this.selectedClient = this.storeList[0];
+            this.selectedFilters.store =  this.selectedClient.storeId; 
+            this.selectedFilters.client =  headerFilters.client;
+            this.selectedFilters.clientName =  headerFilters.clientName;
+            this.selectedFilters.clients =  headerFilters.clients;  
+            this.selectedDateRange = {
+              startDate: this.dayjs().format("DD-MM-YYYY"),
+              endDate: this.dayjs().format("DD-MM-YYYY"),
+            };
+            var datetime = {
+              startDate: this.dayjs().format("YYYY-MM-DD"),
+              endDate: this.dayjs().format("YYYY-MM-DD"),
+            };
+            this.selectedFilters.date = datetime;
+            localStorage.setItem(
+              "header-filters",
+              JSON.stringify(this.selectedFilters)
+            );
+            this.gs.dataRangeValue.next(this.selectedFilters);
+            this.cd.detectChanges();
+          }
+        }
+      },
+    });
+  }
+  }
+  onClientSelect(event:any){
+    this.selectedClient = event
+    this.selectedFilters.store = this.selectedClient.storeId;
+    this.gs.dataRangeValue.next(this.selectedFilters);
+    localStorage.setItem('header-filters', JSON.stringify(this.selectedFilters));
+  }
+}

package/src/lib/modules/layout/toolbar/toolbar.component.html

@@ -0,0 +1,56 @@
+<!--begin::Toolbar container-->
+<div id="kt_app_toolbar_container" class="app-container" [ngClass]="appToolbarContainerCSSClass">
+  <ng-container *ngIf="(gs.userAccess | async)?.userType === 'tango' || (gs.userAccess | async)?.userType === 'client' || (gs.userAccess | async)?.userType === 'lead'"  >
+  <ng-container *ngIf="showPageTitle()">
+    <lib-page-title [appPageTitleDirection]="appPageTitleDirection" [appPageTitleBreadcrumb]="appPageTitleBreadcrumb"
+      [appPageTitleDescription]="appPageTitleDescription" class="page-title d-flex flex-wrap me-3"
+      [ngClass]="{'flex-column justify-content-center': appPageTitleDirection === 'column', 'align-items-center': appPageTitleDirection !== 'column', appPageTitleCSSClass}">
+    </lib-page-title>
+  </ng-container>
+
+  <ng-container *ngIf="multiSelect && users.userType ==='tango'">
+    <lib-classic class="d-flex align-items-center gap-2 gap-lg-3"></lib-classic>
+  </ng-container>
+  <ng-container *ngIf="singleSelect && users.userType ==='tango'">
+    <lib-client-settings class="d-flex align-items-center me-5"></lib-client-settings>
+   </ng-container>
+   <ng-container *ngIf="datepicker && (users.userType ==='client' || users.userType ==='tango')">
+    <lib-datepicker class="d-flex align-items-center me-5"></lib-datepicker>
+   </ng-container>
+   <ng-container *ngIf="singleSelectdatepicker && users.userType ==='tango'">
+    <lib-date-single-select class="d-flex align-items-center me-5"></lib-date-single-select>
+   </ng-container>
+   <ng-container *ngIf="singleStore">
+    <lib-single-store class="d-flex align-items-center me-5"></lib-single-store>
+   </ng-container>
+   <ng-container *ngIf="trafficdatepicker">
+    <lib-traffic-header class="d-flex align-items-center me-5"></lib-traffic-header>
+   </ng-container>
+   <ng-container *ngIf="traxdatepicker">
+    <lib-trax-header class="d-flex align-items-center me-5"></lib-trax-header>
+   </ng-container>
+   <ng-container *ngIf="traxwithoutdatepicker">
+    <lib-trax-withoutdate class="d-flex align-items-center me-5"></lib-trax-withoutdate>
+   </ng-container>
+   <ng-container *ngIf="storesSingle">
+    <lib-single-storedate class="d-flex align-items-center me-5"></lib-single-storedate>
+   </ng-container>
+   <ng-container *ngIf="nobWithoutClient">
+    <lib-traffic-nob class="d-flex align-items-center me-5"></lib-traffic-nob>
+   </ng-container>
+    <ng-container *ngIf="merticsHeader">
+    <lib-metrics-header class="d-flex align-items-center me-5"></lib-metrics-header>
+   </ng-container>
+ <!-- <ng-container *ngIf="appToolbarLayout === 'extended'">
+    <lib-extended class="d-flex align-items-center flex-shrink-0 me-5"></lib-extended>
+  </ng-container>
+  <ng-container *ngIf="appToolbarLayout === 'reports'">
+    <lib-reports class="d-flex align-items-center overflow-auto" [appPageTitleDisplay]="appPageTitleDisplay">
+    </lib-reports>
+  </ng-container>
+  <ng-container *ngIf="appToolbarLayout === 'saas'">
+    <lib-saas class="d-flex align-items-center gap-2" [appPageTitleDisplay]="appPageTitleDisplay"></lib-saas>
+  </ng-container> -->
+</ng-container>
+</div>
+<!--end::Toolbar container-->

package/src/lib/modules/layout/toolbar/toolbar.component.spec.ts

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

package/src/lib/modules/layout/toolbar/toolbar.component.ts

@@ -0,0 +1,352 @@
+import { Component, Input, OnDestroy, OnInit } from "@angular/core";
+import { ActivatedRoute, Router } from "@angular/router";
+import { Subject, Subscription, window } from "rxjs";
+import {
+  GlobalStateService,
+  LayoutService,
+  PageInfoService,
+} from "tango-app-ui-global";
+import { ILayout, LayoutType } from "tango-app-ui-global";
+import { AuthService } from "../../../services/auth.service";
+
+@Component({
+  selector: "lib-toolbar",
+  templateUrl: "./toolbar.component.html",
+  styleUrls: ["./toolbar.component.scss"],
+})
+export class ToolbarComponent implements OnInit, OnDestroy {
+  private unsubscribe: Subscription[] = [];
+
+  // Public props
+  @Input() currentLayoutType: LayoutType | null;
+  @Input() appToolbarLayout:
+    | "classic"
+    | "accounting"
+    | "extended"
+    | "reports"
+    | "saas";
+
+  // toolbar
+  appToolbarDisplay: boolean;
+  appToolbarContainer: "fixed" | "fluid";
+  appToolbarContainerCSSClass: string = "";
+  appToolbarFixedDesktop: boolean;
+  appToolbarFixedMobile: boolean;
+  appPageTitleDisplay: boolean;
+
+  // page title
+  appPageTitleDirection: string = "";
+  appPageTitleCSSClass: string = "";
+  appPageTitleBreadcrumb: boolean;
+  appPageTitleDescription: boolean;
+  querParams: any;
+  singleSelect: boolean;
+  multiSelect: boolean;
+  datepicker: boolean;
+  singleSelectdatepicker: boolean;
+  singleStore: boolean;
+  headervalue: any;
+  storeId: any;
+  users: any;
+  selectedFilters: any = {
+    client: null,
+    clients: [],
+    store: null,
+    stores: [],
+    date: null,
+  };
+  trafficdatepicker: boolean;
+  traxdatepicker: boolean;
+  urlString:any;
+  traxwithoutdatepicker:boolean;
+  storesSingle:boolean;
+  nobWithoutClient:boolean;
+  merticsHeader: boolean;
+  constructor(
+    private layout: LayoutService,
+    private router: Router,
+    private route: ActivatedRoute,
+    public gs: GlobalStateService,
+    private auth : AuthService
+  ) {}
+
+  ngOnInit(): void {
+    if ("user-info" in localStorage) {
+      const userData: any = JSON.parse(
+        localStorage.getItem("user-info") || "{}"
+      );
+      this.users = userData;
+    }
+    if ("header-filters" in localStorage) {
+      const data: any = JSON.parse(
+        localStorage.getItem("header-filters") || "{}"
+      );
+ this.client = data?.client;
+    }
+    this.getUserInfo(this.client ? this.client : this.users.client)
+    this.showPageTitle();
+    const subscr = this.layout.layoutConfigSubject
+      .asObservable()
+      .subscribe((config: ILayout) => {
+        this.updateProps(config);
+      });
+    this.unsubscribe.push(subscr);
+  }
+
+  updateProps(config: ILayout) {
+    this.appToolbarDisplay = this.layout.getProp(
+      "app.toolbar.display",
+      config
+    ) as boolean;
+    if (!this.appToolbarDisplay) {
+      return;
+    }
+
+    this.appPageTitleDisplay = this.layout.getProp(
+      "app.pageTitle.display",
+      config
+    ) as boolean;
+    this.appToolbarContainer = this.layout.getProp(
+      "app.toolbar.container",
+      config
+    ) as "fluid" | "fixed";
+    this.appToolbarContainerCSSClass =
+      this.appToolbarContainer === "fixed"
+        ? "container-xxl"
+        : "container-fluid";
+    const containerClass = this.layout.getProp(
+      "app.toolbar.containerClass",
+      config
+    ) as string;
+    if (containerClass) {
+      this.appToolbarContainerCSSClass += ` ${containerClass}`;
+    }
+
+    this.appToolbarFixedDesktop = this.layout.getProp(
+      "app.toolbar.fixed.desktop",
+      config
+    ) as boolean;
+    if (this.appToolbarFixedDesktop) {
+      document.body.setAttribute("data-kt-app-toolbar-fixed", "true");
+    }
+
+    this.appToolbarFixedMobile = this.layout.getProp(
+      "app.toolbar.fixed.mobile",
+      config
+    ) as boolean;
+    if (this.appToolbarFixedMobile) {
+      document.body.setAttribute("data-kt-app-toolbar-fixed-mobile", "true");
+    }
+
+    // toolbar
+    this.appPageTitleDirection = this.layout.getProp(
+      "app.pageTitle.direction",
+      config
+    ) as string;
+    this.appPageTitleCSSClass = this.layout.getProp(
+      "app.pageTitle.class",
+      config
+    ) as string;
+    this.appPageTitleBreadcrumb = this.layout.getProp(
+      "app.pageTitle.breadCrumb",
+      config
+    ) as boolean;
+    this.appPageTitleDescription = this.layout.getProp(
+      "app.pageTitle.description",
+      config
+    ) as boolean;
+
+    document.body.setAttribute("data-kt-app-toolbar-enabled", "true");
+  }
+  private readonly destroy$ = new Subject();
+  ngOnDestroy() {
+    this.unsubscribe.forEach((sb) => sb.unsubscribe());
+    this.destroy$.next(true);
+    this.destroy$.complete();
+    // localStorage.removeItem("usersEmail-info");
+  }
+  client:any;
+  urlString1:any;
+  showPageTitle() {
+    let URL: string = "";
+    if ("header-filters" in localStorage) {
+      const data: any = JSON.parse(
+        localStorage.getItem("header-filters") || "{}"
+      );
+     const store =  this.route.snapshot.queryParamMap as any      
+      this.storeId =  data?.store;
+
+      if(store?.params?.['storeId']){
+        this.storeId = store.params['storeId']
+        data.store = store.params['storeId']
+        localStorage.setItem('header-filters', JSON.stringify(data))
+      }
+      const currentUrl = this.router.url;
+      const updatedUrl = currentUrl.replace(
+        /\/manage\/stores\/\d+-\d+\//,
+        `/manage/stores/`
+      );
+      URL = updatedUrl;
+      // this.router.navigate([URL])
+    }
+  const url = URL.split("?")[0].split('/');
+  this.urlString = URL;
+   this.urlString1= URL.split('/');
+  if (this.users?.userType === "tango") {
+    if (url[2] == "settings" || URL == "/manage/users/client"  ||
+    URL == "/manage/stores" ||  URL === "/manage/stores?type=stores" || URL === "/manage/stores?type=clusters" ||
+    URL == "/manage/stores/addition-method" ||
+    URL == "/manage/stores/add-single-store" || URL === "/manage/trax/gallery" || URL == "/notifications/alerts?tab=alert" ||  URL == "/notifications/alerts?tab=download" || URL === "/manage/trax/audit" ) {
+      this.setUIProperties(true, false, false, false, false,false,false,false,false,false,false);
+    }  else if (url[3] == "edge-app") {
+      this.setUIProperties(false, false, false, false, true,false,false,false,false,false,false);
+    } else if (
+      URL == `/manage/stores/infra-ticket?storeId=${this.storeId}` ||  URL == `/manage/stores/infra-ticket?storeId=${this.storeId}&type=infra` ||
+      URL == `/manage/stores/settings?storeId=${this.storeId}` || URL == `/manage/stores/infra-ticket?storeId=${this.storeId}&type=dataMismatch` ||
+      URL == `/manage/stores/zones?storeId=${this.storeId}` ||
+      URL == `/manage/stores/cameras?storeId=${this.storeId}` ||
+      // URL == `/manage/stores/infrastructure?storeId=${this.storeId}` ||
+      URL == `/manage/stores/mat?storeId=${this.storeId}`
+    ) {
+      this.setUIProperties(false, false, false, true, false,false,false,false,false,false,false);
+    }else if (URL == "/tickets/stores" || URL == "/manage/users/tango/audit") {
+      this.setUIProperties(false, false, true, false, false, false, false, false, false, false,false);
+    }
+    else if(url[2] === 'controlcenter'){
+      if(URL == `/manage/controlcenter/playback?storeId=${this.storeId}`|| URL == `/manage/controlcenter/playback`){
+        this.setUIProperties(false, false, false, false,false,false,false,false,true,false,false);
+      }
+      else {
+      this.setUIProperties(false, false, false, false,true,false,false,false,false,false,false);
+    } 
+  }else if (URL == "/profile" || url[2]==="data-mismatch" || url[2]==="employeetraining"  
+       || URL == "/manage/brands" || URL == "/manage/users/tango" || (url[1] ==="tickets" && url[2] === "audit")) {
+      this.setUIProperties(false, false, false, false, false,false,false,false,false,false,false);
+    } else if(URL == "/manage/traffic/nob"){
+      this.setUIProperties(false, false, false, false,false,false,false,false,false,true,false);
+    } else if(url[2] === "traffic" || url[2] === "zones" || URL == "/manage/analyse/reports" || URL == "/manage/employee-metrics/beeahGroup" ){
+        this.setUIProperties(false, false, false, false,false,true,false,false,false,false,false);
+    } else if(url[2] === "employee-metrics" && url[3] === "heatmap"){
+        this.setUIProperties(false, false, false, false,false,false,false,false,true,false,false);
+    } else if(url[2] === "employee-metrics"){
+        this.setUIProperties(false, false, false, false,false,false,false,false,false,false,true);
+    } else if(url[2] == 'trax'){
+      if(url[2] == 'trax' && (url.includes('createChecklist') || url.includes('configure') || url.includes('create-order')|| url[3] == 'create-task' || url[3] == 'task-configure')) {
+        this.setUIProperties(false, false, false, false,false,false,false,false,false,false,false);
+      } 
+      // else if(url[2] == 'trax' && (url.includes('taskinfo'))){
+      //   this.setUIProperties(false, false, false, false,false,false,false,true,false,false,false);
+      // }
+      else if(url[2] == 'trax' && url.includes('start')){
+        this.setUIProperties(false, false, false, false, false,false,false,false,false,false,false);
+      }
+      else if(url[2] == 'trax' && (url.includes('checklist') || url.includes('gallery')) || url.includes('audit')) {
+        this.setUIProperties(true, false, false, false,false,false,false,false,false,false,false);
+      }   else {
+      this.setUIProperties(false, false, false, false,false,false,true,false,false,false,false);
+      }
+    } else{
+      this.setUIProperties(false, false, false, false,true,false,false,false,false,false,false);
+    }
+  } else {
+    if (url[3] == "edge-app" ) {
+      this.setUIProperties(false, false, true, false, false,false,false,false,false,false,false);
+    } else if (
+      URL == `/manage/stores/infra-ticket?storeId=${this.storeId}` ||  URL == `/manage/stores/infra-ticket?storeId=${this.storeId}&type=infra` ||
+      URL == `/manage/stores/settings?storeId=${this.storeId}` || URL == `/manage/stores/infra-ticket?storeId=${this.storeId}&type=dataMismatch` ||
+      URL == `/manage/stores/zones?storeId=${this.storeId}` ||
+      URL == `/manage/stores/cameras?storeId=${this.storeId}` ||
+      // URL == `/manage/stores/infrastructure?storeId=${this.storeId}` ||
+      URL == `/manage/stores/mat?storeId=${this.storeId}`
+    ) {
+      this.setUIProperties(false, false, false, true, false,false,false,false,false,false,false);
+    } else if(url[2] === 'controlcenter'){
+      if(URL == `/manage/controlcenter/playback?storeId=${this.storeId}`|| URL == `/manage/controlcenter/playback`){
+        this.setUIProperties(false, false, false, false,false,false,false,false,true,false,false);
+      }
+      else {
+      this.setUIProperties(false, false, false, false,true,false,false,false,false,false,false);
+    } 
+  } else if (URL == "/profile" || URL == "/manage/users/client" || URL == "/manage/users/tango" ||
+    URL == "/manage/stores" ||  URL === "/manage/stores?type=stores" || URL === "/manage/stores?type=clusters" || url[2] == "settings" || 
+    URL == "/manage/stores/addition-method" ||
+    URL == "/manage/stores/add-single-store" || url[2]==="data-mismatch" || url[2]==="employeetraining"  || URL == "/notifications/alerts?tab=alert" ||  URL == "/notifications/alerts?tab=download"
+     || URL == "/manage/users/tango" || URL === "/manage/controlcenter" || URL ==='manage/controlcenter/template-manager' || url[2]==='controlcenter' ) {
+      this.setUIProperties(false, false, false, false, false,false,false,false,false,false,false);
+    }else if(URL == "/manage/traffic/nob"){
+      this.setUIProperties(false, false, false, false,false,false,false,false,false,true,false);
+    } else if(url[2] === "traffic" || url[2] === "zones" || URL == "/manage/analyse/reports" || URL == "/manage/employee-metrics/beeahGroup" ){
+        this.setUIProperties(false, false, false, false,false,true,false,false,false,false,false);
+    } else if(url[2] === "employee-metrics" && url[3] === "heatmap"){
+        this.setUIProperties(false, false, false, false,false,false,false,false,true,false,false);
+    } else if(url[2] === "employee-metrics"){
+        this.setUIProperties(false, false, false, false,false,false,false,false,false,false,true);
+    } else if(url[2] == 'trax'){
+      if(url[2] == 'trax' && (url.includes('createChecklist') || url.includes('configure') || url.includes('create-order') || url[3] == 'create-task' || url[3] == 'task-configure')) {
+        this.setUIProperties(false, false, false, false,false,false,false,false,false,false,false);
+      }
+      // else if(url[2] == 'trax' && (url.includes('taskinfo'))){
+      //   this.setUIProperties(false, false, false, false,false,false,false,true,false,false,false);
+      // }
+      else if(url[2] == 'trax' && url.includes('start')){
+        this.setUIProperties(false, false, false, false, false,false,false,false,false,false,false);
+      }
+      else if(url[2] == 'trax' && (url.includes('checklist') || url.includes('gallery') || url.includes('audit'))) {
+        this.setUIProperties(true, false, false, false,false,false,false,false,false,false,false);
+      }   else {
+      this.setUIProperties(false, false, false, false,false,false,true,false,false,false,false);
+      }
+    } else {
+      this.setUIProperties(false, false, true, false, false,false,false,false,false,false,false);
+    }
+  }
+  const viewsWithPageTitles = ["classic", "reports", "saas"];
+  return (
+    this.appPageTitleDisplay &&
+    viewsWithPageTitles.some((t) => t === this.appToolbarLayout)
+  );
+}
+
+setUIProperties(
+  singleSelect: boolean,
+  multiSelect: boolean,
+  datepicker: boolean,
+  singleStore: boolean,
+  singleSelectdatepicker: boolean,
+  trafficdatepicker:boolean,
+  traxdatepicker:boolean,
+  traxwithoutdatepicker:boolean,
+  storesSingle:boolean,
+  nobWithoutClient:boolean,
+  merticsHeader:boolean
+): void {
+  this.singleSelect = singleSelect;
+  this.multiSelect = multiSelect;
+  this.datepicker = datepicker;
+  this.singleStore = singleStore;
+  this.singleSelectdatepicker = singleSelectdatepicker;
+  this.trafficdatepicker = trafficdatepicker;
+  this.traxdatepicker = traxdatepicker;
+  this.traxwithoutdatepicker = traxwithoutdatepicker;
+  this.storesSingle = storesSingle;
+  this.nobWithoutClient = nobWithoutClient;
+  this.merticsHeader = merticsHeader;
+
+}
+
+getUserInfo(client:any){
+  let obj ={
+      clientId: client ? client :''
+  }
+  if(client){
+    this.auth.getHeaderUsers(obj).subscribe({
+      next: (e) => {
+        localStorage.setItem(
+          "usersEmail-info",
+          JSON.stringify(e?.data?.userEmailData || []) 
+        );
+      } 
+    })
+  }
+}
+}