tango-app-ui-manage-tickets 3.7.0-beta.6 → 3.7.0-beta.60

package/src/lib/components/audit-mapping-list/audit-mapping-list.component.ts

@@ -0,0 +1,520 @@
+import { Component, OnInit, OnChanges, SimpleChanges, OnDestroy, ChangeDetectorRef, ViewChild } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { ToastService } from 'tango-app-ui-shared';
+import { AuditService } from '../../services/audit.service';
+import * as LZString from 'lz-string';
+// import { AuditReportPopupComponent } from '../audit-report-popup/audit-report-popup.component';
+import { Subject, takeUntil, Subscription } from 'rxjs';
+import { TimerService } from '../../services/timer.service';
+import { AuditReportPopupComponent } from '../audit-report-popup/audit-report-popup.component';
+
+@Component({
+  selector: 'lib-audit-mapping-list',
+  templateUrl: './audit-mapping-list.component.html',
+  styleUrl: './audit-mapping-list.component.scss'
+})
+export class AuditMappingListComponent {
+
+  totalfile = 0;
+  customer = 0;
+  junk = 0;
+  employee = 0;
+  currentValue: any = 0;
+  showvalue: boolean = false;
+  retggingpage: boolean = false;
+  showvalue1: boolean = false;
+  junkimage: any = []
+  retagimage: any = []
+  submitvalue: boolean = true;
+  auditmappingdata: any;
+  customercount: any;
+  auditLoading = true;
+  selectedType: any;
+
+  junkcount: any = 0;
+  employeecount: any = 0;
+  employeimage: any = [];
+  filedetails: any;
+  demographic: any;
+  submitted: boolean = false;
+  dummymapping: any;
+  private readonly destroy$ = new Subject();
+  timePassed: number = 0;
+  subscription: Subscription | null = null;
+  formattedTime: string = '00:00:00';
+  count: any;
+  category: any = []
+  @ViewChild('confirmDraft') confirmDraft: any;
+
+  constructor(public modalService: NgbModal, private router: Router, private auditService: AuditService, private toastr: ToastService, private route: ActivatedRoute,
+    private cd: ChangeDetectorRef, private timerService: TimerService) {
+    this.selectedType = this.route.snapshot.paramMap.get('type')
+  }
+
+  ngOnInit(): void {
+    this.getAuditConfig()
+    // this.initial_data_loading();
+    if (this.retagimage.length > 0) {
+      this.showvalue = true
+    }
+    this.setTimer();
+  }
+  getAuditConfig() {
+
+    let filedata = JSON.parse(sessionStorage.getItem('totalfiles') || '{}')
+    this.auditService.getAuditconfig(filedata?.filedetails?.clientId).pipe(takeUntil(this.destroy$)).subscribe({
+      next: (res: any) => {
+        if (res && res?.code == 200) {
+          this.category = res.data.footfallDirectoryConfigs.taggingLimitation
+          // this.initial_data_loading()
+          // this.saveDraftimg();
+          this.getmappingdata()
+
+        }
+      }
+    })
+  }
+  setTimer() {
+    this.subscription = this.timerService.getTimePassed().subscribe(time => {
+      this.timePassed = time;
+      this.formattedTime = this.timerService.formatTime(time);
+      this.cd.detectChanges();
+    });
+    this.timerService.startTimer();
+    document.addEventListener('mousemove', this.handleGlobalMouseEvent);
+    document.addEventListener('click', this.handleGlobalMouseEvent);
+    document.addEventListener('mouseenter', this.handleGlobalMouseEvent);
+    document.addEventListener('scroll', this.handleGlobalMouseEvent);
+
+  }
+
+  ngOnDestroy(): void {
+    this.destroy$.next(true);
+    this.destroy$.complete();
+    document.removeEventListener('mousemove', this.handleGlobalMouseEvent);
+    document.removeEventListener('click', this.handleGlobalMouseEvent);
+    document.removeEventListener('mouseenter', this.handleGlobalMouseEvent);
+    document.removeEventListener('scroll', this.handleGlobalMouseEvent);
+    this.timerService.clearTimer()
+  }
+
+  handleGlobalMouseEvent = (): void => {
+    this.timerService.startTimer();
+  }
+
+  initial_data_loading() {
+    if ('audit' in sessionStorage) {
+      let stringifydata = sessionStorage.getItem('audit') || '{}'
+      const decompressedData = LZString.decompress(stringifydata);
+      var auditdata = JSON.parse(decompressedData || '{}')
+      if (auditdata.length > 0) {
+        this.auditmappingdata = auditdata;
+        this.customercount = this.auditmappingdata.length
+      } else {
+        this.auditmappingdata = []
+        this.customercount = 0
+      }
+      this.demographic = this.auditmappingdata.filter((data: any) => data.demographic === 'd').length;
+    }
+    this.category.map((data: any) => {
+      var count = JSON.parse(sessionStorage.getItem(data?.type) || '{}')
+      data.count = count?.length
+    })
+    if ('retag' in sessionStorage) {
+      var retagdata = JSON.parse(sessionStorage.getItem('retag') || '{}')
+      if (retagdata.length > 0) {
+        this.retagimage = retagdata;
+      } else {
+        this.retagimage = [];
+        if (this.retagimage.length == 0) {
+          this.showvalue = false
+        }
+      }
+    }
+    if ('totalfiles' in sessionStorage) {
+      var files = JSON.parse(sessionStorage.getItem('totalfiles') || '{}')
+      this.totalfile = files?.totalfiles
+      this.filedetails = files?.filedetails
+    }
+
+  }
+
+  getmappingdata() {
+    var totalfile: any = JSON.parse(sessionStorage.getItem('totalfiles') || '{}');
+    this.filedetails = totalfile?.filedetails
+
+    var payload: any = {
+      storeId: totalfile?.filedetails?.storeId,
+      fileDate: totalfile?.filedetails?.Date,
+      auditId: totalfile?.auditId,
+      count: totalfile?.totalfiles
+    }
+    this.auditService.getAuditmappinglist(payload).pipe(takeUntil(this.destroy$)).subscribe({
+      next: (res: any) => {
+        if (res && res?.code == 200) {
+          this.auditLoading = false;
+
+
+
+
+          this.category.map((data: any) => {
+            let filterData = res?.data?.result?.draftedData?.filter((x: any) => x.type === data.type)
+            data.value = filterData[0]?.value && filterData[0]?.value.length > 0 ? filterData[0]?.value : []
+            data.count = data?.value?.length
+            sessionStorage.setItem(data?.type, JSON.stringify(data?.value && data?.value.length > 0 ? data?.value : []))
+
+          })
+          let customerData = res?.data?.result?.draftedData?.filter((x: any) => x.type === 'customer')
+
+          this.auditmappingdata = customerData[0]?.value
+          const jsonString = JSON.stringify(customerData[0]?.value);
+          const compressedData = LZString.compress(jsonString);
+          sessionStorage.setItem('audit', compressedData)
+
+
+
+          var retagiamge = JSON.parse(sessionStorage.getItem('retag') || '[]')
+          if (retagiamge.length > 0) {
+            let stringifydata = sessionStorage.getItem('audit') || '{}'
+            const decompressedData = LZString.decompress(stringifydata);
+            var customer = JSON.parse(decompressedData || '{}')
+            customer = [...customer, ...retagiamge]
+            const jsonString = JSON.stringify(customer);
+            const compressedData = LZString.compress(jsonString);
+            sessionStorage.setItem('audit', compressedData)
+          }
+          sessionStorage.removeItem('retag')
+          this.retagimage = []
+          this.initial_data_loading()
+          if (this.retagimage.length == 0) {
+            this.showvalue = false
+          }
+        }
+      },
+      error: (err: any) => {
+
+      }
+    })
+  }
+
+  redireact: boolean = false;
+
+  backToTagging() {
+    this.redireact = true;
+    this.saveDraftimg();
+  }
+
+  changesdata() {
+    var user = JSON.parse(localStorage.getItem('user-info') || '{}')
+    var totalfile: any = JSON.parse(sessionStorage.getItem('totalfiles') || '{}');
+    var payload: any = {
+      storeId: totalfile?.filedetails?.storeId,
+      fileDate: totalfile?.filedetails?.Date,
+      auditId: totalfile?.auditId,
+      count: totalfile?.totalfiles
+    }
+    this.auditService.getAuditmappinglist(payload).pipe(takeUntil(this.destroy$)).subscribe({
+      next: (res: any) => {
+        if (res && res?.code == 200) {
+          this.auditLoading = false;
+          sessionStorage.removeItem('retag')
+          this.retagimage = []
+          this.category.map((data: any) => {
+            let filterData = res?.data?.result?.draftedData?.filter((x: any) => x.type === data.type)
+            data.value = filterData[0]?.value && filterData[0]?.value.length > 0 ? filterData[0]?.value : []
+            data.count = data?.value?.length
+            sessionStorage.setItem(data?.type, JSON.stringify(data?.value && data?.value.length > 0 ? data?.value : []))
+
+          })
+          let customerData = res?.data?.result?.draftedData?.filter((x: any) => x.type === 'customer')
+
+          this.auditmappingdata = customerData[0]?.value
+          const jsonString = JSON.stringify(customerData[0]?.value);
+          const compressedData = LZString.compress(jsonString);
+          sessionStorage.setItem('audit', compressedData)
+          if (this.retagimage.length == 0) {
+            this.showvalue = false
+          }
+
+          this.router.navigate(["/manage/tickets/audit"])
+        }
+      },
+      error: (err: any) => {
+
+      }
+    })
+
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes['auditmappingdata']) {
+      this.dummymapping = JSON.parse(JSON.stringify(changes['auditmappingdata'].currentValue));
+    }
+  }
+
+  allowDrop(ev: any) {
+    ev.preventDefault();
+  }
+
+  drag(ev: any) {
+    ev.dataTransfer.setData("text/plain", ev.target.id);
+  }
+
+  dropforretag(ev: any) {
+    ev.preventDefault();
+    const draggedImageId = ev.dataTransfer.getData('text/plain');
+    const draggedImage = document.getElementById(draggedImageId);
+    this.showvalue = true;
+    const htmltag = ev.dataTransfer.getData('text/html');
+    var Name = getTagNameFromHTML(htmltag);
+    if (Name != null && this.category.filter((data: any) => data?.type === Name)?.length > 0) {
+
+      let imageData = JSON.parse(sessionStorage.getItem(Name) || '{}')
+      var splicedvalue = imageData.splice(imageData.findIndex(({ img_id }: { img_id: string }) => img_id == draggedImageId), 1);
+
+      this.category.map((data: any) => {
+        if (data?.type == Name) {
+          data.value = imageData
+          data.count = imageData.length
+        }
+
+      })
+      sessionStorage.setItem(Name, JSON.stringify(imageData))
+      var oldretag = JSON.parse(sessionStorage.getItem('retag') || '{}')
+      var newtag: any = []
+      if (Number(oldretag.length) > 0) {
+        newtag = [...oldretag, ...splicedvalue]
+      } else {
+        newtag = splicedvalue
+      }
+      this.retagimage = newtag
+      sessionStorage.setItem('retag', JSON.stringify(this.retagimage))
+
+    } else if (Name != null) {
+      var insertIndex = this.auditmappingdata.findIndex(({ img_id }: { img_id: string }) => img_id == Name)
+      var mainarray = this.auditmappingdata.splice(this.auditmappingdata.findIndex(({ img_id }: { img_id: string }) => img_id == Name), 1);
+      this.customercount = this.auditmappingdata?.length;
+      if (mainarray?.length > 0 && mainarray[0].mappedid.length > 1) {
+        var checkindex = mainarray[0].mappedid.findIndex(({ img_id }: { img_id: string }) => img_id == draggedImageId)
+
+        var subarray = mainarray[0].mappedid.splice(mainarray[0].mappedid.findIndex(({ img_id }: { img_id: string }) => img_id == draggedImageId), 1);
+        if (checkindex == 0) {
+          mainarray[0].img_name = mainarray[0].mappedid[0].img_name
+          mainarray[0].img_id = mainarray[0].mappedid[0].img_id
+          mainarray[0].img_path = mainarray[0].mappedid[0].img_path
+        }
+        mainarray[0].count = mainarray[0].count - 1
+        subarray[0].mappedid = []
+        let obj = {
+          img_name: subarray[0].img_name,
+          img_id: subarray[0].img_id,
+          img_path: subarray[0].img_path
+        }
+        subarray[0].mappedid.push(obj)
+        subarray[0].selected = false
+        subarray[0].dropped = false
+        subarray[0].demographic = ''
+        subarray[0].count = 1;
+        var oldretag = JSON.parse(sessionStorage.getItem('retag') || '{}')
+        var newtag: any = []
+        if (Number(oldretag.length) > 0) {
+          newtag = [...oldretag, ...subarray]
+        } else {
+          newtag = subarray
+        }
+        this.retagimage = newtag
+        sessionStorage.setItem('retag', JSON.stringify(this.retagimage))
+        this.auditmappingdata.splice(insertIndex, 0, ...mainarray);
+        const jsonString = JSON.stringify(this.auditmappingdata);
+        const compressedData = LZString.compress(jsonString);
+        sessionStorage.setItem('audit', compressedData)
+      } else {
+
+        var oldretag = JSON.parse(sessionStorage.getItem('retag') || '{}')
+        var newtag: any = []
+        if (Number(oldretag.length) > 0) {
+          newtag = [...oldretag, ...mainarray]
+        } else {
+          newtag = mainarray
+        }
+        this.retagimage = newtag
+        sessionStorage.setItem('retag', JSON.stringify(this.retagimage))
+        const jsonString = JSON.stringify(this.auditmappingdata);
+        const compressedData = LZString.compress(jsonString);
+        sessionStorage.setItem('audit', compressedData)
+      }
+    }
+
+    function getTagNameFromHTML(html: any) {
+      var tempElement = document.createElement('div');
+      tempElement.innerHTML = html;
+      var firstChild: any = tempElement.firstChild;
+      if (firstChild.hasAttribute('name')) {
+        var namePropertyValue = firstChild.getAttribute('name');
+        return namePropertyValue;
+      }
+      return null;
+    }
+    sessionStorage.setItem('retag', JSON.stringify(this.retagimage))
+
+    if ('retag' in sessionStorage) {
+      var retagdata = JSON.parse(sessionStorage.getItem('retag') || '{}')
+      this.retagimage = retagdata;
+
+    }
+  }
+
+  removeimage(data: any) {
+    var removed_img = this.retagimage.filter((ev: any) => ev.img_id == data.img_id)
+    this.retagimage.splice(this.retagimage.findIndex(({ img_id }: { img_id: string }) => img_id == data.img_id), 1);
+    this.auditmappingdata = [...this.auditmappingdata, ...removed_img]
+    this.customercount = this.auditmappingdata?.length;
+    if (!this.retagimage.length) { this.showvalue = false }
+    let stringifydata = sessionStorage.getItem('audit') || '{}'
+    const decompressedData = LZString.decompress(stringifydata);
+    const completeDate = JSON.parse(decompressedData || '{}')
+    const jsonString = JSON.stringify(this.auditmappingdata);
+    const compressedData = LZString.compress(jsonString);
+    sessionStorage.setItem('audit', compressedData)
+    sessionStorage.setItem('retag', JSON.stringify(this.retagimage))
+    this.cd.detectChanges();
+  }
+
+  saveDraftimg() {
+    this.submitted = true;
+
+    var totalfile: any = JSON.parse(sessionStorage.getItem('totalfiles') || '{}');
+    this.timePassed = JSON.parse(sessionStorage.getItem('timeSpent') || '{}')
+    if ('retag' in sessionStorage) {
+      var retagdata = JSON.parse(sessionStorage.getItem('retag') || '{}')
+      this.retagimage = retagdata;
+    }
+    let storedData = [
+      {
+        type: "customer",
+        value: this.auditmappingdata ? this.auditmappingdata : [],
+      }
+    ]
+
+    this.category.map((data: any) => {
+      let sessionvalue = JSON.parse(sessionStorage.getItem(data.type) || '{}');
+      storedData.push({
+        type: data.type,
+        value: sessionvalue && sessionvalue.length > 0 ? sessionvalue : []
+      })
+    })
+    var inserobj: any = {
+      storeId: totalfile?.filedetails?.storeId,
+      fileDate: totalfile?.filedetails?.Date,
+      auditId: totalfile?.auditId ? totalfile?.auditId : totalfile?.filedetails?.auditId,
+      totalCount: totalfile?.totalfiles ? totalfile.totalfiles : 0,
+      retagCount: this.retagimage.length,
+      timeSpent: this.timePassed,
+      retagImage: this.retagimage ? this.retagimage : []
+    }
+
+    this.auditService.saveDraft(inserobj).pipe(takeUntil(this.destroy$)).subscribe(() => {
+      if (!this.redireact) {
+        this.submitted = false;
+        this.getmappingdata()
+      } else {
+        this.changesdata()
+      }
+    })
+  }
+
+
+  taggingview() {
+    this.submitted = true;
+    var totalfile: any = JSON.parse(sessionStorage.getItem('totalfiles') || '{}');
+    this.showvalue = false;
+    this.showvalue1 = true;
+    this.retggingpage = true;
+    let stringifydata = sessionStorage.getItem('audit') || '{}'
+    const decompressedData = LZString.decompress(stringifydata);
+    var customer = JSON.parse(decompressedData || '{}')
+    let storedData = [
+      {
+        type: "customer",
+        value: customer ? customer : [],
+      }
+    ]
+
+    this.category.map((data: any) => {
+      let sessionvalue = JSON.parse(sessionStorage.getItem(data.type) || '{}');
+      storedData.push({
+        type: data.type,
+        value: sessionvalue && sessionvalue.length > 0 ? sessionvalue : []
+      })
+    })
+    var inserobj: any = {
+      storeId: totalfile?.filedetails?.store_id,
+      fileDate: totalfile?.filedetails?.file_date,
+      auditId: totalfile?.auditId ? totalfile?.auditId : totalfile?.filedetails.auditId,
+      totalCount: totalfile?.totalfiles ? totalfile.totalfiles : 0,
+      retagCount: this.retagimage.length,
+      timeSpent: this.timePassed,
+      retagImage: this.retagimage ? this.retagimage : []
+    }
+
+    this.auditService.saveDraft(inserobj).pipe(takeUntil(this.destroy$)).subscribe(() => { this.submitted = false; })
+    if ('retag' in sessionStorage) {
+      var retagdata = JSON.parse(sessionStorage.getItem('retag') || '{}')
+      this.retagimage = retagdata;
+
+    }
+    this.router.navigate(["/manage/tickets/retag-mapping"])
+  }
+
+  submitaudit() {
+    const modalRef = this.modalService.open(AuditReportPopupComponent, {
+      size: 'lg',
+      centered: true
+    })
+    modalRef.componentInstance.selectedType = this.selectedType;
+  }
+
+
+
+  setValue(i: any) {
+    let index = 0;
+    if (i > index) {
+      return this.currentValue = this.currentValue + 1;
+    }
+
+  }
+  currentGroupNumber: any = 0;
+
+  getGroupNumber(obj: any): number | null {
+    if (obj.count > 1) {
+      return ++this.currentGroupNumber;
+    }
+    return null;
+  }
+
+  resetGroupNumber() {
+    this.currentGroupNumber = 0;
+  }
+
+  getFilteredData(count: number) {
+    return this.auditmappingdata.filter((obj: any) => obj.count === count);
+
+  }
+
+  toggleImage(img_name: any) {
+    this.auditmappingdata.map((data: any) => {
+      if (data.img_name == img_name) {
+        if (data.mappedid.length > 0) {
+          data.demographic !== 'd' ? data.demographic = 'd' : data.demographic = ''
+        } else {
+          data.dropped = !data.dropped
+        }
+      }
+    })
+    this.demographic = this.auditmappingdata.filter((data: any) => data.demographic === 'd').length;
+    const jsonString = JSON.stringify(this.auditmappingdata);
+    const compressedData = LZString.compress(jsonString);
+    sessionStorage.setItem('audit', compressedData)
+  }
+}