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

package/src/lib/components/trax-store/trax-store.component.ts

@@ -0,0 +1,172 @@
+import { AfterViewInit, ChangeDetectorRef, Component, HostListener, Input, OnInit } from '@angular/core';
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
+import { ToastService } from 'tango-app-ui-shared';
+import { GlobalStateService } from 'tango-app-ui-global';
+import {Subject, takeUntil} from 'rxjs';
+import { TraxService } from '../../services/trax.service';
+
+@Component({
+  selector: 'lib-trax-store',
+  templateUrl: './trax-store.component.html',
+  styleUrl: './trax-store.component.scss'
+})
+export class TraxStoreComponent implements OnInit,AfterViewInit {
+  @Input() data:any;
+  @Input() client:any;
+  storeList:any = [];
+  store:[];
+  selectedStore:any = {};
+  showDropDown:boolean= false;
+  searchStore:any;
+  multiSelectSettings = {
+      idField: 'id',
+      textField: 'name',
+      itemsShowLimit: 1,
+      allowSearchFilter: true,
+      singleSelection	:true
+  };
+  userName:string = ''
+  userEmail:string = ''
+  city:string=''
+  private detach = new Subject();
+  private readonly destroy$ = new Subject();
+
+
+  @HostListener("document:click", ["$event"])
+  clickOutside(event: MouseEvent): void {
+    const clickedInside = (event.target as HTMLElement).closest(
+      ".dropdown-close"
+    );
+    if (!clickedInside) {
+      this.closeDropDown();
+    }
+  }
+
+  constructor(private changedetector:ChangeDetectorRef,private SopService:TraxService,private dialogRef:NgbActiveModal,private toast:ToastService,private gs:GlobalStateService,public Activemodel: NgbActiveModal) { }
+
+  ngAfterViewInit(): void {
+    let data = {
+    "clientId": [this.client],
+    "offset": 1,
+    "limit": 10000,
+    "sortColumName": "storeId",
+    "sortBy": -1,
+    "searchValue": "",
+    "export": false,
+    "status": [
+        "Live",
+        "onboarded",
+        "deployed",
+        "paired",
+        "installationfailed",
+        "Infra Issue"
+    ]
+   }
+   this.SopService.getStoreList(data).subscribe((res: any) => {
+    if(res && res.code == 200 && res.data.result.length) {
+      let stores:any = [];
+      res.data.result.forEach((item:any) => {
+        stores.push({
+          name:item.storeName,
+          city:item.city
+        })
+      })
+      this.storeList = this.store =  stores;
+      
+    }
+    else {
+      this.storeList = [];
+    }
+   });
+  }
+
+  ngOnInit(): void {
+    let storageDetails = JSON.parse(localStorage.getItem('header-filters') || '{}');
+    if(!storageDetails?.client) {
+      storageDetails = JSON.parse(localStorage.getItem('client-details') || '{}');
+      storageDetails.client = storageDetails.clientId;
+    }
+    if(storageDetails?.client) {
+      this.client= storageDetails.client;
+    }
+  }
+
+  toggleDropDown() {
+    this.showDropDown = true;
+  }
+
+  selectStore(event:any) {
+
+  }
+
+  filterSearch() {
+    if(this.searchStore.trim().length) {
+      let store = this.searchStore.split(',');
+      if(store.length > 1) {
+        store = store.map((item:any) => item.trim().toLowerCase())
+        this.storeList = this.store.filter((item:any) => store.includes(item.name.toLowerCase()))
+      }
+      else {
+        this.storeList = this.store.filter((item:any) => item.name.toLowerCase().includes(this.searchStore.trim().toLowerCase()))
+      }
+    }
+    else {
+      this.storeList = [...this.store]
+    }
+  }
+
+  updateSelectedStore(index:number){
+    this.selectedStore = this.storeList[index];
+    this.closeDropDown();
+  }
+
+  closeDropDown() {
+    this.showDropDown = false;
+  }
+
+  updatedStore() {
+      if(!this.selectedStore.name && this.data?.coverage ==='store') {
+      this.toast.getErrorToast('Please Select a Store');
+      return false;
+    }
+    if(!this.userName.trim()) {
+      this.toast.getErrorToast('User Name is Required');
+      return false;
+    }
+    if(!this.userEmail.trim()) {
+      this.toast.getErrorToast('User Email is Required');
+      return false;
+    }
+    if(!this.userEmail.match(/^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/)) {
+      this.toast.getErrorToast('Invalid Email Format');
+      return false;
+    }
+    // if(!this.selectedStore?.city.trim()) {
+    //   this.toast.getErrorToast('City is Required');
+    //   return false;
+    // }
+    if (this.data?.coverage === 'store') {
+      let userData = [{
+        storeName: this.selectedStore?.name,
+        userName: this?.userName?.trim(),
+        userEmail: this?.userEmail?.toLowerCase()?.trim(),
+        userPhone: '',
+        checkFlag: true,
+        city:this.selectedStore?.city || ''
+      }]
+      this.dialogRef.close(userData);
+    } else {
+      let userData = [{
+        // storeName: this.selectedStore?.name,
+        userName: this?.userName?.trim(),
+        userEmail: this?.userEmail?.toLowerCase()?.trim(),
+        userPhone: '',
+        checkFlag: true,
+        city:this.selectedStore?.city || ''
+      }]
+      this.dialogRef.close(userData);
+    }
+
+  }
+
+}

package/src/lib/components/traxpopup/traxpopup.component.html

@@ -0,0 +1,130 @@
+
+<div class="text-start p-9" *ngIf="data.type !== 'image'">
+    <div [innerHTML]="data.imagesrc"></div>
+    <div class="customtitle  mt-4">
+        {{data.title}}
+    </div>
+    <div class="content mt-4" [innerHtml]="data.content">
+    </div>
+    <div class="error mt-5 p-5 pt-0 h-auto mh-200px overflow-scroll" *ngIf="data?.error">
+        <div class="mt-5" *ngFor="let error of data?.error;let i =index">
+            <span>{{i + 1}}.&#41; {{error}}</span>
+        </div>
+    </div>
+    <div class="subtitle storesubtitle mb-4">
+        {{data.subtitle}}
+    </div>
+    <div class="subtitle storesubtitle mb-3" *ngIf="data?.location?.length">
+        <div class="content mb-2">Location is required on below stores</div>
+        {{data.location}}
+    </div>
+    <div class="subtitle storesubtitle mb-3" *ngIf="data?.inactiveStores?.length">
+        <div class="content mb-2">Inactive stores found in the csv.</div>
+        {{data.inactiveStores}}
+    </div>
+    <div *ngIf="data.buttontype === 'Invite'" class="content" [ngClass]="data.user.length > 4 ? 'addScroll' : ''">
+        <div class="d-flex align-items-center position-relative mb-5" *ngFor="let user of data.user;let i= index">
+            <div class="form-check form-check-custom form-check-solid mx-2 me-4">
+                <input class="form-check-input" type="checkbox" value="" [checked]="user.invite"
+                    (change)="updateCheck($event,i)">
+            </div>
+            <div class="symbol symbol-35px symbol-circle">
+                <span class="symbol-label bg-light-primary text-primary me-2">
+                    {{user.userName.slice(0,2)}} </span>
+            </div>
+            <div>
+                <a class="invitemain">{{user.userName}}</a>
+                <div class="invitesub">
+                    {{user.userEmail}}
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div *ngIf="data.input1" class="mt-5">
+        <label *ngIf="data.inputlabel2" for="inputmodel" class="label">{{data.inputlabel1}}</label><br>
+        <input class="inputlabel" id="inputmodel" placeholder="{{data.placeholder1}}" type="{{data.inputtype1}}"
+            disabled>
+    </div>
+    <div *ngIf="data.input2" class="mt-5">
+        <label *ngIf="data.inputlabel2" for="inputmodel" class="label">{{data.inputlabel2}}</label>
+        <input class="inputlabel" id="inputmodel" placeholder="{{data.placeholder2}}" [(ngModel)]="requestText"
+            type="{{data.inputtype2}}">
+    </div>
+    <div *ngIf="data.buttontype === 'delete'" class="d-flex text-center justify-content-between">
+        <button class="btn min-width-popup btn-outline" (click)="closepopup()">Cancel</button>
+        <button class="btn min-width-popup btn-outline active btn-active-danger" (click)="deletepopup()">Delete</button>
+    </div>
+    <div *ngIf="data.buttontype === 'duplicate'" class="d-flex text-center justify-content-between mt-5">
+        <button class="btn min-width-popup btn-outline" (click)="closepopup()">Cancel</button>
+        <button class="btn min-width-popup btn-outline active btn-active-danger"
+            (click)="duplicatepopup()">Duplicate</button>
+    </div>
+    <div *ngIf="data.buttontype === 'draft'" class="d-flex text-center justify-content-between mt-5">
+        <button class="btn min-width-popup btn-outline" (click)="closepopup()">Cancel</button>
+        <button class="btn min-width-popup btn-outline active btn-active-primary" (click)="confirmpopup()">Save As
+            Draft</button>
+    </div>
+    <div *ngIf="data.buttontype === 'Request'" class="d-flex text-center justify-content-between mt-5">
+        <button class="btn min-width-popup btn-outline" (click)="closepopup()">Cancel</button>
+        <button class="btn min-width-popup btn-outline active btn-active-primary"
+            (click)="confirmpopup()">Request</button>
+    </div>
+    <div *ngIf="data.buttontype === 'confirm'" class="d-flex text-center justify-content-between mt-5">
+        <button class="btn min-width-popup btn-outline" (click)="closepopup()">Cancel</button>
+        <button class="btn min-width-popup btn-outline active btn-active-primary"
+            (click)="confirmpopup()">Confirm</button>
+    </div>
+    <div *ngIf="data.buttontype === 'Reinitiate'" class="d-flex text-center justify-content-between">
+        <button class="btn min-width-popup btn-outline" (click)="closepopup()">Cancel</button>
+        <button class="btn min-width-popup btn-outline active btn-active-primary"
+            (click)="confirmpopup()">Reinitiate</button>
+    </div>
+    <div *ngIf="data.buttontype === 'Remove'" class="d-flex text-center justify-content-between">
+        <button class="btn min-width-popup btn-outline" (click)="closepopup()">Cancel</button>
+        <button class="btn min-width-popup btn-outline active btn-active-danger"
+            (click)="confirmpopup()">Remove</button>
+    </div>
+    <div *ngIf="data.buttontype === 'Reupload'" class="d-flex text-center justify-content-between mt-5">
+        <button class="btn min-width-popup btn-outline" (click)="closepopup()">Cancel</button>
+        <button class="btn min-width-popup btn-outline active btn-active-primary"
+            (click)="confirmpopup()">Reupload</button>
+    </div>
+    <div *ngIf="data.buttontype === 'Invite'" class="d-flex text-center justify-content-between mt-8">
+        <button class="btn min-width-popup btn-outline" (click)="skipEntries()">Skip New Entries</button>
+        <button class="btn min-width-popup btn-outline active btn-active-primary" (click)="invitepopup()">Invite
+            Selected</button>
+    </div>
+    <div *ngIf="data.buttontype === 'Addstore'" class="d-flex text-center justify-content-between">
+        <button class="btn min-width-popup btn-outline" (click)="skipEntries()">Skip New Entries</button>
+        <button class="btn min-width-popup btn-outline active btn-active-primary" (click)="confirmStorepopup()">Add
+            Store</button>
+    </div>
+    <div *ngIf="data.buttontype === 'Activestore'" class="d-flex text-center justify-content-between">
+        <button class="btn min-width-popup btn-outline" (click)="skipEntries()">Skip New Entries</button>
+        <button class="btn min-width-popup btn-outline active btn-active-primary" (click)="activeStorepopup()">Active
+            Store</button>
+    </div>
+    <div *ngIf="data.buttontype === 'error'" class="d-flex text-center justify-content-between">
+        <button class="btn min-width-popup btn-outline" (click)="closepopup()">Cancel</button>
+        <button class="btn min-width-popup btn-outline active btn-active-danger"
+            (click)="dialogRef.close('reupload')">Reupload</button>
+    </div>
+    <div *ngIf="data.buttontype === 'reAssign'" class="d-flex text-center justify-content-between">
+        <button class="btn min-width-popup btn-outline" (click)="closepopup()">No, don’t</button>
+        <button class="btn min-width-popup btn-outline active btn-active-danger"
+            (click)="dialogRef.close('confirm')">Yes, Re-Assign</button>
+    </div>
+    <div *ngIf="data.buttontype === 'remove'" class="d-flex text-center justify-content-between">
+        <button class="btn min-width-popup btn-outline" (click)="removepopup()">Cancel</button>
+        <button class="btn min-width-popup btn-outline active btn-active-danger" (click)="deletepopup()">Remove</button>
+    </div>
+    <div *ngIf="data.buttontype === 'compliance'" class="d-flex text-center justify-content-between">
+        <button class="btn min-width-popup btn-outline" (click)="removepopup()">Cancel</button>
+        <button class="btn min-width-popup btn-outline active btn-active-primary" (click)="confirmpopup()">Yes, Proceed</button>
+    </div>
+</div>
+<div *ngIf="data.type === 'image'">
+    <img src="{{data.image}}"  style="width:100%;height:100%"/>
+
+</div>

package/src/lib/components/traxpopup/traxpopup.component.scss

@@ -0,0 +1,225 @@
+.Overlay {
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 200 !important;
+    position: fixed;
+    background: rgba(88, 87, 87, 0.6);
+}
+
+input[type='checkbox'] {
+    width: 16px !important;
+    height: 16px !important;
+    margin: 5px;
+    border-radius: 4px !important;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    -o-appearance: none;
+    appearance: none;
+    outline: 1px solid var(--gray-600, #D0D5DD) !important;
+    box-shadow: none;
+    font-size: 0.5em;
+    text-align: center;
+    line-height: 1em;
+    background: white;
+}
+
+.form-check.form-check-solid .form-check-input:checked {
+    background-color: var(--primary-50, #EAF8FF) !important;
+}
+
+input[type='checkbox']:checked {
+    outline: 1px solid var(--primary-600, #00A3FF) !important;
+    background-color: var(--primary-50, #EAF8FF);
+}
+
+input[type='checkbox']:checked:after {
+    content: '';
+    transform: rotate(45deg);
+    border-bottom: 2px solid #00A3FF;
+    border-right: 2px solid #00A3FF;
+    display: inline-block;
+    width: 0.5em;
+    padding-left: 3px;
+    padding-top: 10px;
+    padding-right: 0px;
+}
+
+.min-width-popup {
+    min-width: 47% !important;
+}
+
+.content {
+    color: var(--gray-500, #667085);
+    font-family: 'Inter';
+    font-size: 14px;
+    padding: 0px !important;
+    font-style: normal;
+    font-weight: 400;
+}
+
+.label {
+    color: var(--gray-700, #344054);
+    font-family: Inter;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 20px;
+}
+
+input {
+    font-size: 16px;
+    color: var(--gray-900, #101828);
+}
+
+.inputlabel {
+    width: 100%;
+    margin-top: 5px;
+    padding: 10px 14px;
+    border-radius: 8px;
+    border: 1px solid var(--gray-300, #D0D5DD);
+    background: var(--white, #FFF);
+    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+}
+
+.inputlabel:focus {
+    outline: 1px solid var(--gray-300, #D0D5DD) !important;
+    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05) !important;
+    border: #F9FAFB !important;
+    outline: 1px solid var(--primary-300, #6BCAFF) !important;
+    box-shadow: 0px 0px 0px 4px #D5EFFE, 0px 1px 2px 0px rgba(16, 24, 40, 0.05) !important;
+    color: #101828;
+}
+
+.popup {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    opacity: 1;
+    transform: translate(-50%, -50%);
+    background: var(--white, #FFF);
+    border-radius: 12px !important;
+    border-radius: 12px;
+    box-shadow: 0px 8px 8px -4px rgba(16, 24, 40, 0.03), 0px 20px 24px -4px rgba(16, 24, 40, 0.08);
+    padding: 30px;
+    width: 400px;
+    height: fit-content;
+}
+
+.btn-outline {
+    border: 1px solid lightgrey;
+    padding: calc(0.75rem + 1px) calc(1.5rem + 1px);
+}
+
+.fs-18px {
+    font-size: 18px;
+    color: var(--black, #000);
+    font-family: inter;
+}
+
+.fw-600 {
+    font-weight: 600 !important;
+}
+
+::ng-deep .mat-dialog-container {
+    box-shadow: none;
+    background: #fff;
+    color: rgba(0, 0, 0, .87);
+}
+
+.symbol-label {
+    color: var(--primary-600, #00A3FF);
+    text-align: center;
+
+    /* Text sm/Medium */
+    font-family: 'Inter';
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 20px;
+    /* 142.857% */
+}
+
+.invitemain {
+    color: var(--gray-700, #344054);
+
+    /* Text sm/Semibold */
+    font-family: 'Inter';
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 20px;
+    /* 142.857% */
+}
+
+.invitesub {
+    color: var(--gray-500, #667085);
+
+    /* Text sm/Regular */
+    font-family: 'Inter';
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 20px;
+    /* 142.857% */
+}
+
+.subtitle {
+    color: var(--Black, #101828);
+
+    /* Text sm/Medium */
+    font-family: 'Inter';
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 20px;
+    /* 142.857% */
+}
+
+.customtitle {
+    color: var(--gray-900, #101828);
+
+    /* Text lg/Semibold */
+    font-family: 'Inter';
+    font-size: 18px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 28px;
+    /* 155.556% */
+}
+
+.addScroll {
+    height: 300px;
+    overflow-y: scroll;
+}
+
+.storesubtitle {
+    word-break: break-all;
+    padding-top: .5em;
+}
+
+::ng-deep.mat-dialog-container {
+    display: block;
+    padding: 24px;
+    border-radius: 12px;
+    box-sizing: border-box;
+    overflow: auto;
+    outline: 0;
+    width: 100%;
+    height: 100%;
+    min-height: inherit;
+    max-height: inherit;
+}
+
+.error {
+    color: var(--Error-700, #B42318);
+    font-family: Inter;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 20px;
+    border-radius: 8px;
+    border: 1px solid var(--Error-300, #FDA29B);
+    background: var(--Error-25, #FFFBFA);
+}

package/src/lib/components/traxpopup/traxpopup.component.spec.ts

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

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

@@ -0,0 +1,71 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
+import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
+
+@Component({
+  selector: 'lib-traxpopup',
+  templateUrl: './traxpopup.component.html',
+  styleUrl: './traxpopup.component.scss'
+})
+export class TraxpopupComponent implements OnInit {
+  requestText: string = '';
+  @Input() data:any;
+  constructor( public dialogRef: NgbActiveModal,private sanitizer: DomSanitizer) { }
+
+  ngOnInit(): void {
+    if(this.data?.user) {
+      this.data.user.forEach((item:any) =>{
+       item.invite = true
+      })
+   }
+    this.data.imagesrc = this.sanitizer.bypassSecurityTrustHtml(this.data.imagesrc);
+  }
+
+  closepopup(){
+    this.dialogRef.close();
+  }
+
+  deletepopup(){
+    this.dialogRef.close('delete');
+  }
+
+  duplicatepopup(){
+    this.dialogRef.close('duplicate');
+  }
+
+  confirmpopup() {
+    let res: any = 
+    (this.data.resType && this.data.resType == 'custom') ? 
+      {status: 'confirm',data: {requestText: this.requestText}} : 
+      'confirm';
+    this.dialogRef.close(res);
+  }
+
+  confirmStorepopup() {
+    this.dialogRef.close('confirmStore');
+  }
+
+  activeStorepopup() {
+    this.dialogRef.close('activeStore');
+  }
+
+  skipEntries() {
+    this.dialogRef.close('skip');
+  }
+
+  invitepopup() {
+    let data = {
+      message:'confirm',
+      user: this.data.user
+    }
+    this.dialogRef.close(data)
+  }
+  
+  updateCheck(event:any,index:any) {
+    this.data.user[index].invite = event.target.checked;
+  }  
+  
+  removepopup(){
+    this.dialogRef.close('remove');
+  }
+}

package/src/lib/services/trax.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { TraxService } from './trax.service';
+
+describe('TraxService', () => {
+  let service: TraxService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(TraxService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});