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

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

@@ -1,105 +0,0 @@
-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

@@ -1,56 +0,0 @@
-<!--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

@@ -1,25 +0,0 @@
-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

@@ -1,352 +0,0 @@
-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 || []) 
-        );
-      } 
-    })
-  }
-}
-}