tango-app-ui-manage-tickets 3.7.0-beta.15 → 3.7.0-beta.16

package/src/lib/components/audit-metrics/audit-metrics.component.scss

@@ -0,0 +1,34 @@
+.nav-item .nav-link.active{
+    border:none;
+    border-radius: 6px;
+    background: var(--Primary-50, #EAF8FF);
+    padding: 8px 12px;
+ }
+ .nav-item .nav-link:hover{
+     border: none;
+ }
+ .text-border {
+    border-radius: 16px !important;
+    background: var(--Gray-100, #F2F4F7) !important;
+    color: var(--Gray-700, #344054);
+    text-align: center;
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 20px;
+    padding: 2px 10px !important;
+}
+
+.text-border-priamry{
+   border-radius: 16px;
+   background: var(--Primary-50, #EAF8FF);
+   color: var(--Primary-700, #009BF3);
+   text-align: center;
+   font-size: 14px;
+   font-weight: 500;
+   line-height: 20px;
+   padding: 2px 10px !important;
+   mix-blend-mode: multiply !important;
+}
+tr{
+    vertical-align: middle !important;
+}

package/src/lib/components/audit-metrics/audit-metrics.component.spec.ts

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

package/src/lib/components/audit-metrics/audit-metrics.component.ts

@@ -0,0 +1,292 @@
+import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { Subject, takeUntil } from 'rxjs';
+import { GlobalStateService } from 'tango-app-ui-global';
+import dayjs from "dayjs";
+import "dayjs/locale/en";
+import utc from "dayjs/plugin/utc";
+import timezone from "dayjs/plugin/timezone";
+import { ReTriggerComponent } from '../re-trigger/re-trigger.component';
+import { TicketService } from '../../services/ticket.service';
+import { ToastService } from 'tango-app-ui-shared';
+import { ExcelService } from '../../services/excel.service';
+import { CountComponent } from '../count/count.component';
+
+
+@Component({
+  selector: 'lib-audit-metrics',
+  templateUrl: './audit-metrics.component.html',
+  styleUrl: './audit-metrics.component.scss'
+})
+export class AuditMetricsComponent implements OnInit,OnDestroy {
+  noData:boolean = false;
+  loading:boolean = true;
+
+  storesData:any = [];
+  activity:any = [
+    {type:'Audit',FileDate:'28-11-2023',Time:'03:24 pm',beforeCout:'300',AfterCount:'100'},
+    {type:'Re-Audit',FileDate:'28-10-2023',Time:'03:24 pm',beforeCout:'350',AfterCount:'120'},
+    {type:'Audit',FileDate:'28-11-2023',Time:'03:24 pm',beforeCout:'300',AfterCount:'100'}
+  ]
+  @ViewChild('activitylog') activitylog:any;
+  private readonly destroy$ = new Subject();
+  headerFilter: any;
+  sortColumName: any = '';
+  sortBy: any = 1;
+  filterByClient: any = [];
+  filterByStatus: any = [];
+  pagination: any = [10, 20, 30];
+  searchTerm: any;
+  limit:any = 10;
+  offset:any = 1;
+  selectedValue: string;
+  dayjs = dayjs;
+  filterByStore: any = [];
+  totalCount: any;  
+  selectedTab:any = '';
+
+  dataObject:any = [
+    { Description: 'Module Type',type:'single', Issues: [{id:'traffic', text: "Traffic"},{id:'zone', text: "Zone" }]},
+    { Description: 'Clients', Issues: [] },
+    { Description: 'Status', Issues: [{id:'closed', text: "Completed" }, {id:'inprogress', text: "Inprogress" },{id:'drafted', text: "Draft" },{id:'assigned', text: "Assigned" },{id:'not_assign', text: "Not Assigened" },{id:'skipped', text: "Skip"},] }
+  ];
+  
+  clientList: any;
+  selectedType: any = 'traffic';
+
+  constructor(private gs:GlobalStateService,private modalService:NgbModal,private service: TicketService,private toast:ToastService,private excel:ExcelService){
+    
+  }
+
+  ngOnInit(){
+    this.gs.dataRangeValue.pipe(takeUntil(this.destroy$)).subscribe((data: any) => {
+      if(data!=null){
+        this.headerFilter = data
+        this.metricsList();
+    }
+  })
+ }
+
+ metricsList(){
+  let data:any = {
+    fromDate: this.dayjs(this.headerFilter?.date?.startDate).format('YYYY-MM-DD'),
+    toDate: this.dayjs(this.headerFilter?.date?.endDate).format('YYYY-MM-DD'),
+    filterByClientId : this.filterByClient,
+    filterByStoreId : this.filterByStore,
+    filterByStatus : this.filterByStatus,
+    filterByAuditType : this.selectedTab ===''? [] : [this.selectedTab],
+    filterByModuleType: [this.selectedType],
+    searchValue: this.searchTerm,
+    sortBy: this.sortBy,
+    limit: this.limit,
+    offset: this.offset,
+    isExport: false
+  };
+  if(this.sortColumName){data.sortColumnName = this.sortColumName}else if(this.searchTerm){data.searchValue = this.searchTerm}
+  this.getclientList();
+  this.service.getstoreMetrics(data).pipe(takeUntil(this.destroy$)).subscribe({
+    next:(res:any) => {
+      if(res && res?.code === 200){
+          this.storesData = res?.data?.result;
+          this.totalCount = res?.data?.count;
+          if(!this.storesData?.length){
+            this.noData = true;
+          }
+          if(this.totalCount < 10){
+            this.pagination = [this.totalCount]
+          }else{
+            this.pagination = [10, 20, 30]
+          }
+          this.loading = false;
+          this.noData = false;
+    }else{
+      this.noData = true;
+      this.loading = false;
+    }
+  },
+  error:(err:any)=>{
+    this.noData = true;
+      this.loading = false;
+    this.toast.getErrorToast(err?.message)
+  }
+ })
+}
+
+setItemsperPage(){
+  if(this.totalCount < 10){
+    return this.totalCount;
+  }else{
+    return this.limit;
+  }
+}
+
+getclientList(){
+  this.service.getclientList().pipe(takeUntil(this.destroy$)).subscribe({
+    next:(res:any) => {
+      if(res && res?.code ===200){
+        this.clientList = res?.data?.result;
+        const issues = this.clientList.map((obj: any) => ({ text: obj.clientName,id:obj.clientId }));
+        const uniqueIssues:any[] = [];
+        const Clients = new Set();
+        issues.forEach((issue:any) => {
+          if (!Clients.has(issue.text)) {
+            Clients.add(issue.text);
+            uniqueIssues.push(issue);
+          }
+        });
+        const filtredObject = (this.dataObject.find((obj: any) => obj.Description === "Clients"))
+        filtredObject.Issues = uniqueIssues;
+      }
+    },
+    error:(err:any) => {
+        
+    },
+})
+ }
+
+  ngOnDestroy(): void {
+    this.destroy$.next(true);
+    this.destroy$.complete();
+  }
+
+  receiveData(data:any) {
+    this.filterByClient = data.find((obj:any) => obj.Description === "Clients")?.Issues.map((item: any) => item?.id);
+    this.filterByStatus = data.find((obj:any) => obj.Description === "Status")?.Issues?.map((item: any) => item?.id);
+    this.selectedType = data.find((obj:any) => obj.Description ==='Module Type')?.Issues?.id;
+    this.metricsList();
+  }
+
+  onPageChange(pageOffset: any) {
+    this.pagination.offset = pageOffset;
+    this.metricsList();
+  }
+  
+  onPageSizeChange(pageSize: any) {
+    this.pagination.limit = pageSize;
+    this.pagination.offset = 1;
+    this.metricsList();
+  }
+
+  exportXLSX(){
+    let data:any = {
+      fromDate: this.dayjs(this.headerFilter?.date?.startDate).format('YYYY-MM-DD'),
+      toDate: this.dayjs(this.headerFilter?.date?.endDate).format('YYYY-MM-DD'),
+      filterByClientId : this.filterByClient,
+      filterByStoreId : this.filterByStore,
+      filterByStatus : this.filterByStatus,
+      filterByAuditType : this.selectedTab ===''? [] : [this.selectedTab],
+      filterByModuleType: [this.selectedType],
+      searchValue: this.searchTerm,
+      sortBy: this.sortBy,
+      limit: 10000,
+      offset: this.offset,
+      isExport: true
+    };
+    if(this.sortColumName){data.sortColumnName = this.sortColumName}else if(this.searchTerm){data.searchValue = this.searchTerm}
+    this.service.getstoreMetricsExport(data).pipe(takeUntil(this.destroy$)).subscribe({
+      next:(res:any) => {
+        if(res){
+            this.excel.saveAsExcelFile(res,'AuditMetrics')
+        }
+    },
+    error:(err:any)=>{
+      this.toast.getErrorToast(err?.message)
+    }
+   })
+ }
+
+ selectedTabs(data:any){
+  if(data === 'all'){
+    this.selectedTab = '';
+  }else{
+    this.selectedTab = data;
+  }
+  this.limit = 10;
+  this.offset = 1;
+  this.metricsList();
+ }
+
+ searchData(){
+  this.searchTerm = this.searchTerm;
+  this.metricsList();
+ }
+
+ openBeforecount(value:any) {
+  const modalRef = this.modalService.open(CountComponent,{
+    centered:true,
+    size:'xl'
+  })
+  modalRef.componentInstance.data ={
+    type : 'before',
+    fileDate:value?.fileDate,
+    storeId: value?.storeId,
+    selectedType: this.selectedType,
+    zoneName:value?.zoneName,
+    imageType: 'BC'
+  }
+}
+openAftercount(value:any){
+  const modalRef = this.modalService.open(CountComponent,{
+    centered:true,
+    size:'xl'
+  })
+modalRef.componentInstance.data ={
+  type : 'after',
+  fileDate:value?.fileDate,
+  storeId: value?.storeId,
+  selectedType: this.selectedType,
+  zoneName:value?.zoneName,
+  imageType: 'AC'
+}
+}
+
+openView(){
+  const modalRef = this.modalService.open(this.activitylog)
+}
+
+openreTrigger(value:any){
+  const modalRef = this.modalService.open(ReTriggerComponent,{
+    centered:true,
+    // size:''
+  })
+  modalRef.componentInstance.reTrigerData ={
+    type : 'after',
+    data: value,
+    selectedType : this.selectedType
+  }
+  modalRef.closed.subscribe((res: any) => {
+    if (res) {
+          this.service.auditretrigger(res).pipe(takeUntil(this.destroy$)).subscribe({
+            next:(res:any)=>{
+              if(res && res.code === 200){
+                this.toast.getSuccessToast(res?.data?.result);
+                this.metricsList();
+              } 
+            },
+            error:(err:any)=> {
+                this.toast.getErrorToast(err?.message)
+            }
+          })
+        }
+    } )
+}
+
+statusBadge(value:any){
+  let AccountStatus = value;
+  if(AccountStatus === 'closed'){
+    return 'badge-light-success'
+  }else if(AccountStatus === 'assigned' || AccountStatus === 'not Assigned'){
+    return 'badge-light-warning'
+  }else{
+    return 'badge-light-primary'
+  }
+}
+
+sortData(value:any){
+  this.sortColumName = value
+  this.sortBy *= -1;
+  this.metricsList();
+}
+
+
+}

package/src/lib/components/comment-model/comment-model.component.html

@@ -0,0 +1,24 @@
+<div class="card py-0">
+    <div class="card-body py-0 d-flex flex-start flex-column p-9 ">
+        <div class="my-5">
+            <div class="symbol symbol-75px symbol-circle">
+                <svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <rect x="4" y="4" width="48" height="48" rx="24" fill="#DAF1FF"/>
+                    <rect x="4" y="4" width="48" height="48" rx="24" stroke="#EAF8FF" stroke-width="8"/>
+                    <path d="M37 31C37 31.5304 36.7893 32.0391 36.4142 32.4142C36.0391 32.7893 35.5304 33 35 33H23L19 37V21C19 20.4696 19.2107 19.9609 19.5858 19.5858C19.9609 19.2107 20.4696 19 21 19H35C35.5304 19 36.0391 19.2107 36.4142 19.5858C36.7893 19.9609 37 20.4696 37 21V31Z" stroke="#00A3FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                    </svg>
+            </div>
+        </div>
+        <a class="fs-4 text-gray-800 text-hover-primary fw-bold mb-0 title cursor-pointer">Comment</a>
+        <p class="text-sub">Add comment for the ticket</p>
+        <div class="w-100">
+            <label class="label my-2">Comments</label>
+            <textarea class="form-control" [(ngModel)]="comment" rows="4" type="text"></textarea>
+
+            <div  class="d-flex my-7" role="group">
+                <button class="btn btn-outline w-100 me-3" (click)="cancel()">Cancel</button>
+                <button class="btn btn-primary w-100 ms-3"  (click)="commentSubmit()">Submit</button>
+            </div>
+        </div>
+    </div>
+</div>

package/src/lib/components/comment-model/comment-model.component.scss

@@ -0,0 +1,20 @@
+::ng-deep.modal-content {
+    border-radius: 12px !important;
+    overflow: unset !important;
+  }
+
+::ng-deep ngb-modal-window .component-host-scrollable {
+  overflow: unset !important;
+}
+.text-sub{
+  color: var(--Gray-500, #667085) !important;
+font-size: 14px;
+font-weight: 400;
+line-height: 20px;
+}
+.label{
+    color: var(--Gray-700, #344054) !important;
+font-size: 14px;
+font-weight: 500;
+line-height: 20px; 
+}

package/src/lib/components/comment-model/comment-model.component.spec.ts

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

package/src/lib/components/comment-model/comment-model.component.ts

@@ -0,0 +1,53 @@
+import { Component, Input } from '@angular/core';
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
+import { TicketService } from '../../services/ticket.service';
+import { ToastService } from 'tango-app-ui-shared';
+import { Subject, takeUntil } from 'rxjs';
+@Component({
+  selector: 'lib-comment-model',
+  templateUrl: './comment-model.component.html',
+  styleUrl: './comment-model.component.scss'
+})
+export class CommentModelComponent {
+  @Input() ticketId: any;
+  comment:any= ""
+  private readonly destroy$ = new Subject();
+  constructor(private activeModal:NgbActiveModal, private service: TicketService,
+    private toast: ToastService){
+
+  }
+
+  cancel(){
+    this.activeModal.close();
+  }
+  commentSubmit(){
+    if(this.comment == ''){
+      return this.toast.getErrorToast("Please Enter Any comment")
+    }
+    let obj = {
+      "ticketId": this.ticketId,
+      "primary": "",
+      "secondary": [],
+      "comment": this.comment,
+      
+  }
+    this.service
+      .updateTicketIssue(obj)
+      .pipe(takeUntil(this.destroy$))
+      .subscribe({
+        next: (res: any) => {
+          if (res && res.code === 200) {
+            this.toast.getSuccessToast(res.message);
+            this.activeModal.close("submit");
+          }
+        },
+        error: (err: any) => {
+          this.toast.getErrorToast(err.error.error ? err.error.error : err.error);
+        },
+        complete: () => {},
+      });
+  }
+ 
+}
+
+

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

@@ -0,0 +1,54 @@
+<div class="card">
+    <div class="card-header">
+        <div class="card-title d-grid">
+            <div *ngIf="data?.type" class="card-label">{{data?.type | titlecase}} Count - {{data?.storeId}}</div>
+            <div class="text-sub">{{data?.fileDate | customDateFormat}}</div>
+        </div>
+    <div class="card-toolbar">
+        <button *ngIf="!noData" type="button" (click)="exportTable()"
+            class="btn btn-default mx-2 btn-outline btn-outline-default rounded-3 text-nowrap border-val"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+                <path d="M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5" stroke="#344054" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round"/>
+                </svg>
+            <span class="ms-2">Export</span> </button>
+    </div>
+    </div>
+    <div class="card-body">
+        <div class="row mx-3">
+            <div class="col-md-12 item scroll-y">
+                <div class="item" *ngFor="let images of auditImages;let i=index" style="padding: 10px;">
+                    <img class="mx-3 my-3 img" [src]="images?.imgPath">
+                    <div class="text-center m-0 fs-7 fw-bold">{{images?.imgName}}</div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <ng-container *ngIf="loading">
+        <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="noData">
+        <div class="row">
+            <div class="col-lg-12 mb-3">
+                <div class="card-body d-flex justify-content-center align-items-center flex-column">
+                    <img class="img-src w-25" src="./assets/tango/Icons/Nodata.svg" alt="">
+                </div>
+            </div>
+        </div>
+    </ng-container>
+</div>
+

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

@@ -0,0 +1,14 @@
+.img {
+    width: 95px;
+    height: 200px;
+}
+.item {
+    position: relative;
+    padding-top: 20px;
+    display: inline-block;
+    max-height: 595px;
+}
+.scroll-y{
+    overflow-y: auto !important;
+    position: relative !important;
+}

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

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

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

@@ -0,0 +1,82 @@
+import { ChangeDetectorRef, Component, Input, OnDestroy, OnInit } from '@angular/core';
+import { TicketService } from '../../services/ticket.service';
+import { ToastService } from 'tango-app-ui-shared';
+import { ExcelService } from '../../services/excel.service';
+import { Subject, takeUntil } from 'rxjs';
+
+@Component({
+  selector: 'lib-count',
+  templateUrl: './count.component.html',
+  styleUrl: './count.component.scss'
+})
+export class CountComponent implements OnInit,OnDestroy {
+
+  private readonly destroy$ = new Subject();
+  @Input() data:any;
+  loading:any = true;
+  noData:any=false;
+  auditImages:any;
+  
+  constructor(private Service:TicketService,private toast:ToastService,private excel : ExcelService,private cd: ChangeDetectorRef){}
+  ngOnInit(){
+    this.getAuditImages();
+  }
+  
+  ngOnDestroy(): void {
+    this.destroy$.next(true);
+    this.destroy$.complete();
+  }
+  
+  getAuditImages(){
+    let params:any = {
+     fileDate: this.data?.fileDate,
+     storeId:this.data?.storeId,
+     imageType:this.data?.imageType,
+     export : false,
+     moduleType : this.data?.selectedType,
+     zoneName: this.data?.zoneName
+    }
+    this.Service.getAuditImages(params).pipe(takeUntil(this.destroy$)).subscribe({
+      next:(res:any)=>{
+        if(res && res?.code === 200){
+          this.auditImages = res?.data?.result;
+          this.loading = false;
+          this.noData = false;
+        }else{
+          this.noData = true;
+          this.loading = false;
+        }
+        this.cd.detectChanges();
+      },
+      error:(err:any)=>{
+          this.noData = true;
+          this.loading = false;
+      },
+    })
+  
+  }
+  
+  exportTable(){
+    let params:any = {
+       fileDate: this.data?.fileDate,
+       storeId:this.data?.storeId,
+       imageType:this.data?.imageType,
+       export : true,
+       moduleType: this.data?.selectedType,
+       zoneName: this.data?.zoneName
+      }
+      let type = this.data?.type === 'before' ? 'BeforeCount' : 'AfterCount'
+      this.Service.ExportAuditImagesasxlsx(params).pipe(takeUntil(this.destroy$)).subscribe({
+        next:(res:any)=>{
+          if(res){
+            this.excel.saveAsZipFile(res,type)
+          }
+        },
+        error:(err:any)=>{
+           this.toast.getErrorToast(err?.error)
+        },
+      })
+    
+  }
+  
+}