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

package/src/lib/components/eye-test-audit/eye-test-audit/start-audit/start-audit.component.scss

@@ -0,0 +1,247 @@
+.header-card{
+    border-radius: 6px;
+    border-bottom: 2px solid var(--Gray-200, #EAECF0);
+    background: radial-gradient(206.89% 107.47% at 16.16% 32.77%, rgba(255, 255, 255, 0.40) 0%, rgba(69, 187, 254, 0.20) 100%), #F2F4F7;
+    box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.05);
+    color: var(--Black, #101828);
+    font-size: 18px;
+    line-height: 32px;
+}
+
+.text-card{
+    color: var(--Black, #101828);
+    font-size: 24px;
+    line-height: 32px;
+}
+
+.bg-light-primary{
+    border-bottom: 1px solid var(--Primary-100, #DAF1FF) !important;
+    background: var(--Primary-25, #F6FCFF) !important;
+}
+
+.sub-title{
+    color: var(--Gray-500, #667085);
+font-size: 12px;
+font-weight: 500;
+line-height: 18px;
+}
+.video-position{
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+}
+
+.btn-success{
+    border: 1px solid var(--Success-700, #027A48) !important;
+    background: var(--Success-700, #027A48) !important;
+    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05) !important;
+  }
+  
+.btn.btn-success:hover:not(.btn-active), .btn.btn-success:active:not(.btn-active){
+  border: 1px solid var(--Success-700, #027A48) !important;
+  background: var(--Success-700, #027A48) !important;
+  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05) !important;
+
+}
+
+table{
+    tr{
+        vertical-align: middle;
+        td{
+            color: var(--Gray-500, #667085) ;
+            font-size: 14px !important;
+            font-weight: 500;
+            line-height: 20px;
+        }
+    }
+}
+
+.custom-dropdown {
+    position: relative;
+    width: 100%;
+    padding: 10px 16px;
+    cursor: pointer;
+    border-radius: 8px;
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 20px;
+    border: 1px solid var(--Gray-300, #D0D5DD);
+    background: var(--Gray-50, #F9FAFB);
+    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+  }
+  
+  .dropdown-content {
+    position: absolute;
+    z-index: 1;
+    top: 100%;
+    left: 0;
+    border-radius: 6px;
+    width: 100%;
+    background: white;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    display: flex;
+  }
+
+  .dropdown-content1{
+    position: absolute;
+    z-index: 1;
+    bottom: 100%;
+    left: 0;
+    border-radius: 6px;
+    width: 100%;
+    background: white;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    display: flex;
+  }
+  
+  .scroll-container {
+    display: flex;
+    width: 100%;
+    .item{
+        width:100%;
+        text-align: start;
+    }
+    .items:hover,
+    .tems.focus,
+    .items.active{
+    background: var(--Gray-50, #F9FAFB);
+    }
+  }
+
+  .label{
+    position:absolute;
+    top:-25%;
+    color: var(--Gray-700, #344054);
+    font-size: 12px;
+    line-height: 18px;
+  }
+  
+  .scroll-section {
+    width: 50%;
+    height: 200px;
+    overflow-y: auto;
+    text-align: center;
+    border-right: 1px solid #ddd;
+  }
+  
+  .scroll-section:last-child {
+    border-right: none;
+  }
+  
+  .scroll-section div {
+    padding: 8px;
+    cursor: pointer;
+  }
+  
+  .scroll-section div.selected {
+    background: #007bff;
+    color: white;
+  }
+  .bg-primary{
+    border-radius: 8px;
+    border: 1px solid var(--Primary-600, #00A3FF) !important;
+    background: var(--Primary-600, #00A3FF) !important;
+    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+  }
+
+  .bg-danger{
+    background: var(--Primary-500, #D92D20) !important;  
+  }
+
+  .text-primary{
+    color: var(--Primary-700, #009BF3) !important;
+font-size: 12px !important;
+font-weight: 500 !important;
+line-height: 18px !important;
+  }
+  .text-primary1{
+    color: var(--Primary-700, #009BF3) !important;
+font-size: 12px !important;
+font-weight: 500 !important;
+line-height: 18px !important;
+text-overflow: ellipsis;
+    max-width: 200px;
+    overflow: hidden;
+  }
+  .text-select{
+    color: var(--Gray-500, #667085) !important;
+font-size: 14.56px !important;
+font-weight: 400;
+line-height: 21.84px !important; 
+  }
+
+.custom-tooltip-content {
+  font-size: 12px !important;
+  text-align: left !important;
+}
+::ng-deep .tooltip-inner {
+  max-width: 500px !important; 
+  white-space: normal;       
+}
+.test-dark1{
+  color: var(--Success-700, #027A48) !important;
+text-align: center;
+font-size: 12px !important;
+font-weight: 500 !important;
+line-height: 18px;
+}
+
+.engage-text{
+  color: var(--Primary-700, #009BF3) !important;
+font-size: 14px !important;
+font-weight: 600 !important;
+line-height: 20px;
+text-decoration-line: underline;
+text-decoration-style: solid;
+text-decoration-skip-ink: none;
+text-decoration-thickness: auto;
+text-underline-offset: auto;
+text-underline-position: from-font;
+text-transform: capitalize;
+}
+.disabled {
+  pointer-events: none;
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+.h-auto{
+  height:400px !important;
+  object-fit: fill;
+}
+@media (min-width:1920px) and (max-width:2119px){
+
+.h-500px{
+height:600px !important;
+}
+.h-auto{
+  height:400px !important;
+  object-fit: fill;
+}
+}
+@media (min-width:1720px) and (max-width:1900px){
+
+  .h-auto{
+    height:400px !important;
+    object-fit: fill;
+  }
+  }
+  @media (min-width:2120px) and (max-width:2800px){
+
+    .h-auto{
+      height:520px !important;
+      object-fit: fill;
+    }
+    }
+  @media (min-width:1330px) and (max-width:1500px){
+
+
+    .h-auto{
+      height:370px !important;
+      object-fit: fill;
+    }
+    }
+
+.ts700px {
+      min-height: auto !important;
+      max-height: 700px !important;
+  }

package/src/lib/components/eye-test-audit/eye-test-audit/start-audit/start-audit.component.spec.ts

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

package/src/lib/components/eye-test-audit/eye-test-audit/start-audit/start-audit.component.ts

@@ -0,0 +1,446 @@
+import { Component, OnInit, ChangeDetectorRef, ViewChild, OnDestroy, ElementRef } from '@angular/core';
+import { BehaviorSubject, Subject, takeUntil } from 'rxjs';
+import { ActivatedRoute, Router } from '@angular/router';
+import { NgbActiveModal, NgbModal, NgbTooltip } from '@ng-bootstrap/ng-bootstrap';
+import { EyeTestAuditService } from '../../services/eye-test-audit.service';
+import { ToastService } from 'tango-app-ui-shared';
+import { PageInfoService } from 'tango-app-ui-global';
+import dayjs from 'dayjs';
+import 'dayjs/locale/en';
+import utc from 'dayjs/plugin/utc';
+import { SendAlertComponent } from '../../eye-test/send-alert/send-alert.component';
+@Component({
+  selector: 'lib-start-audit',
+  templateUrl: './start-audit.component.html',
+  styleUrl: './start-audit.component.scss'
+})
+export class StartAuditComponent implements OnInit, OnDestroy {
+  dayjs = dayjs
+  stepWiseProcess: any = [];
+  dropdownList: any = []
+  loading: boolean = true;
+  noData: boolean = false;
+
+  tableLoading = new BehaviorSubject<'initial' | 'loading' | 'loaded'>('initial')
+  historytableLoading = new BehaviorSubject<'initial' | 'loading' | 'loaded'>('initial')
+
+  selectedMinutes = '00';
+  selectedSeconds = '00';
+  minutesList: string[] = [];
+  secondsList: string[] = [];
+
+  auditDetails: any = [];
+  currentAuditType: any;
+  takeAudit: boolean = false;
+  storeId: any;
+  @ViewChild('tooltipContent') tooltipContent!: NgbTooltip;
+  @ViewChild('viewHistory') viewHistory: any;
+  @ViewChild('viewCancel') viewCancel: any;
+  private readonly destroy$ = new Subject();
+  historyData: any = [];
+  AuditId: any;
+  viewHistoryData: any;
+  spokenLanguage: any = 'English'
+  modalRef: any;
+  disablecancel: boolean = false
+  selectedStepIndex = 0;
+  conversationData: any = null;
+  constructor(private cd: ChangeDetectorRef, private pageInfo: PageInfoService, private toastService: ToastService, private route: ActivatedRoute, private $api: EyeTestAuditService, private modalService: NgbModal, private router: Router) {
+
+  }
+  viewHistoryModel(item: any) {
+    let payload = {
+      id: item._id
+    }
+    this.$api.viewAuditHistory(payload).pipe(takeUntil(this.destroy$)).subscribe({
+      next: (res: any) => {
+        if (res && res?.code == 200) {
+          this.viewHistoryData = res.data.result
+          const modalRef = this.modalService.open(this.viewHistory, {
+            size: 'xl',
+            centered: true,
+            scrollable: true,
+          });
+        }
+      }
+    })
+  }
+  auditData: any;
+  eyeTestType: any;
+  RmEmail: any;
+  cluster: any;
+  dataBackGet: any;
+  @ViewChild('videoPlayer') videoPlayer!: ElementRef<HTMLVideoElement>;
+  speeds = [0.5, 1, 1.25, 1.5, 2, 4, 6]; // available speeds
+
+  changePlaybackSpeed(speed: any) {
+    const video: HTMLVideoElement = this.videoPlayer.nativeElement;
+    video.playbackRate = Number(speed.target.value); // set playback speed
+  }
+  ngOnInit(): void {
+    this.setPageData();
+    this.auditData = this.$api.getAuditData();
+    // this.dataBackGet = this.$api.getValueRoutes();
+    this.takeAudit = false
+    this.stepWiseProcess = [];
+    this.route.queryParams.subscribe(params => {
+      this.storeId = params['storeId'];
+      this.currentAuditType = params['type'];
+      this.AuditId = params['_id'];
+      this.RmEmail = params['RMEmail'];
+      this.cluster = params['cluster'];
+      this.eyeTestType = params['eyeType'];
+
+      if (this.currentAuditType === 'remote') {
+        this.dropdownList = [{ key: 'Sentence Transcription okay, but not matching with Predicted Step', item: 'Sentence Transcription okay, but not matching with Predicted Step' }, { key: 'Sentence Transcription not accurate, but matching with Predicted Step', item: 'Sentence Transcription not accurate, but matching with Predicted Step' }, { key: 'Step not accurate, not matching with Predicted Step', item: 'Step not accurate, not matching with Predicted Step' }, { key: 'others', item: 'Others' }];
+      } else {
+        this.dropdownList = [{ key: 'Step Non-Compliance', item: 'Step Non-Compliance' }, { key: 'Power Bank Non-Compliance', item: 'Power Bank Non-Compliance' }, { key: 'Correct Instrument Not Used', item: 'Correct Instrument Not Used' }, { key: 'others', item: 'Others' }];
+      }
+
+      // Load conversation details for all types
+      this.conversationData = null;
+      this.selectedStepIndex = 0;
+      this.$api.getConversationDetails(this.AuditId).pipe(takeUntil(this.destroy$)).subscribe({
+        next: (res: any) => {
+          if (res?.code === 200) {
+            this.conversationData = res.data.result;
+          }
+        },
+        error: () => { this.conversationData = null; }
+      });
+    });
+    this.getAuditdetails();
+    this.generateTimeOptions();
+  }
+
+  setPageData() {
+    this.pageInfo.setTitle('Eye Test')
+
+    this.pageInfo.setBreadcrumbs([
+      { title: 'Tango Trax', path: '/manage/trax/dashboard', isActive: false, isSeparator: false },
+      { title: 'Tango Trax', path: '/manage/trax/dashboard', isActive: false, isSeparator: true },
+    ])
+  }
+  getAuditHistory() {
+    this.historytableLoading.next('loading');
+    let payload = {
+      id: this.currentAuditType === 'remote' ? this.auditDetails.engagementId : this.auditDetails.queueId,
+      type: this.currentAuditType
+    }
+    this.$api.getAuditHistory(payload).pipe(takeUntil(this.destroy$)).subscribe({
+      next: (res: any) => {
+        if (res && res?.code == 200) {
+          this.historyData = res.data.result
+          this.historytableLoading.next('loaded')
+        } else {
+          this.historyData = []
+          this.historytableLoading.next('loaded')
+        }
+      },
+      error: (err: any) => {
+        this.historyData = []
+        this.historytableLoading.next('loaded')
+      }
+    }
+    )
+
+  }
+
+  getAuditdetails() {
+    this.tableLoading.next('loading');
+    let payload = {
+      id: this.AuditId,
+      type: this.currentAuditType
+    }
+    this.$api.getAuditdetails(payload).pipe(takeUntil(this.destroy$)).subscribe({
+      next: (res: any) => {
+        if (res && res?.code == 200) {
+          this.disablecancel = false
+          this.auditDetails = res?.data?.result;
+          if (this.auditDetails.auditStatus === 'In-Progress') {
+            this.takeAudit = true
+          } else {
+            this.takeAudit = false
+          }
+          this.stepWiseProcess = this.auditDetails?.steps;
+          setTimeout(() => {
+            this.getAuditHistory()
+          }, 100)
+          this.cd.detectChanges();
+        }
+      }
+    })
+
+    this.tableLoading.next('loaded')
+
+  }
+
+  generateTimeOptions() {
+    this.minutesList = Array.from({ length: 60 }, (_, i) => this.formatNumber(i));
+    this.secondsList = Array.from({ length: 60 }, (_, i) => this.formatNumber(i));
+  }
+
+  formatNumber(num: number): string {
+    return num < 10 ? '0' + num : num.toString();
+  }
+
+  dropdownOpen: { [key: number]: { startTime: boolean; endTime: boolean; reason: boolean } } = {};
+
+  toggleDropdown(i: number, time: 'startTime' | 'endTime' | 'reason') {
+    const currentState = this.dropdownOpen[i]?.[time] ?? false;
+
+    Object.keys(this.dropdownOpen).forEach((key) => {
+      this.dropdownOpen[Number(key)] = { startTime: false, endTime: false, reason: false };
+    });
+
+    if (!this.dropdownOpen[i]) {
+      this.dropdownOpen[i] = { startTime: false, endTime: false, reason: false };
+    }
+
+    this.dropdownOpen[i][time] = !currentState;
+  }
+  getSecondsFromTime(time: string): number {
+    if (!time) return 0;
+    const [min, sec] = time.split(':').map(Number);
+    return (min * 60) + sec;
+  }
+
+  selectMinute(index: any, min: string, time: 'startTime' | 'endTime' | 'reason') {
+    const previousTime = this.stepWiseProcess[index]?.[time] || '00:00';
+
+    this.selectedMinutes = min;
+    const newTime = `${this.selectedMinutes}:${this.selectedSeconds}`;
+
+    const startTime = this.getSecondsFromTime(
+      time === 'startTime' ? newTime : this.stepWiseProcess[index]?.startTime
+    );
+    const endTime = this.getSecondsFromTime(
+      time === 'endTime' ? newTime : this.stepWiseProcess[index]?.endTime
+    );
+
+    const isValid = (startTime === 0 || endTime === 0) || startTime < endTime;
+
+    if (!isValid && time !== 'reason') {
+      this.toastService.getWarningToast("Start time must be less than end time.");
+
+      const [prevMin, prevSec] = previousTime.split(':');
+      this.selectedMinutes = prevMin;
+      this.selectedSeconds = prevSec;
+
+      this.cd.detectChanges();
+      return;
+    }
+
+
+    this.stepWiseProcess[index][time] = newTime;
+    this.cd.detectChanges();
+  }
+
+  selectSecond(index: any, sec: string, time: 'startTime' | 'endTime' | 'reason') {
+    const previousTime = this.stepWiseProcess[index]?.[time] || '00:00';
+
+    this.selectedSeconds = sec;
+    const newTime = `${this.selectedMinutes}:${this.selectedSeconds}`;
+
+    const startTime = this.getSecondsFromTime(
+      time === 'startTime' ? newTime : this.stepWiseProcess[index]?.startTime
+    );
+    const endTime = this.getSecondsFromTime(
+      time === 'endTime' ? newTime : this.stepWiseProcess[index]?.endTime
+    );
+
+    if ((time !== 'reason') && startTime !== 0 && endTime !== 0 && startTime >= endTime) {
+      this.toastService.getWarningToast("Start time must be less than end time.");
+
+      const [prevMin, prevSec] = previousTime.split(':');
+      this.selectedMinutes = prevMin;
+      this.selectedSeconds = prevSec;
+
+      this.cd.detectChanges();
+      return;
+    }
+
+    this.stepWiseProcess[index][time] = newTime;
+    this.cd.detectChanges();
+  }
+
+
+
+  selectReason(index: number, key: any, time: any) {
+    this.stepWiseProcess[index][time] = key;
+
+    if (key === 'others') {
+      this.stepWiseProcess[index].otherReason = '';
+    } else {
+      this.stepWiseProcess[index].otherReason = null;
+    }
+
+    this.cd.detectChanges();
+  }
+
+
+  selectHumanVerified(index: number, value: boolean) {
+    this.stepWiseProcess[index].auditedStatus = value;
+  }
+  findcount() {
+    let count = 0
+    this.stepWiseProcess.forEach((data: any) => {
+      if (data.auditedStatus !== data.AIStatus) {
+        count++
+      }
+
+
+    })
+    return count
+  }
+  getValidaForm() {
+    let errorCount = 0
+    this.stepWiseProcess.forEach((data: any) => {
+      if (data.reason === 'others') {
+        data.otherReason = data.otherReason.trim()
+      }
+      if (data.auditedStatus !== data.AIStatus) {
+        if (!data.reason || data.reason && data.reason === 'others' && !data.otherReason) {
+          errorCount++
+        }
+      }
+    })
+    if (errorCount > 0) {
+      this.disablecancel = false
+      this.toastService.getWarningToast("Comments are mandatory for inverse human audited responses")
+    }
+    return errorCount
+  }
+  onsubmit(isReSend?: boolean) {
+
+    this.disablecancel = true
+    // if((this.stepWiseProcess.filter((data:any)=>data.auditedStatus===true).length+this.stepWiseProcess.filter((data:any)=>data.auditedStatus===false).length)!==this.stepWiseProcess.length){
+    //   this.toastService.getErrorToast("Oops! Looks like the eye test audit isn’t complete yet. Audit all eye test steps before submitting.")
+    //   this.disablecancel =  false
+    //   return
+    // }
+    // if(this.getValidaForm()===0){
+
+    let payload = {
+      id: this.AuditId,
+      type: this.currentAuditType,
+      fileId: this.currentAuditType === 'remote' ? this.auditDetails.engagementId : this.auditDetails.queueId,
+      auditedSteps: this.stepWiseProcess.filter((data: any) => data.auditedStatus === true).length,
+      auditStatus: this.auditDetails?.auditType === 'Audit' ? "Audited" : "Re-Audited",
+      overRides: this.findcount(),
+      spokenLanguage: this.spokenLanguage,
+      steps: this.stepWiseProcess,
+      cluster: this.cluster,
+      RMEmail: this.RmEmail,
+      clientId: this.auditDetails?.storeId?.split("-")[0],
+      ...(typeof isReSend != 'undefined' && { isReSend: isReSend })
+    }
+    this.$api.submitAudit(payload).pipe(takeUntil(this.destroy$)).subscribe({
+      next: (res: any) => {
+        console.log(res, 'res')
+
+        if (res && res?.code == 200) {
+          // this.disablecancel =  false
+          if (res.message == "Do you want resend mail?") {
+            const dialogRef = this.modalService.open(SendAlertComponent);
+            dialogRef.componentInstance.message = res.message;
+            dialogRef.result.then((result) => {
+              this.onsubmit(result);
+            })
+          }
+          else {
+            setTimeout(() => {
+              this.getAuditdetails();
+            }, 1000)
+            this.toastService.getSuccessToast(`${this.auditDetails?.auditType} Submitted Successfully`)
+          }
+
+        }
+      },
+      error: (err: any) => {
+
+        this.toastService.getErrorToast(err?.error?.error ? err?.error?.error : err?.error?.message)
+      }
+    })
+    // }
+
+
+  }
+  startAudit(value: any) {
+    this.disablecancel = true
+    this.takeAudit = true;
+    this.auditDetails.auditStatus = 'Re-Audited'
+    let payload = {
+      id: this.AuditId
+    }
+    this.$api.getAuditFile(payload).pipe(takeUntil(this.destroy$)).subscribe({
+      next: (res: any) => {
+        if (res && res?.code == 200) {
+
+          this.getAuditdetails();
+        }
+      },
+      error: (err: any) => {
+        this.toastService.getErrorToast(err?.error?.error ? err?.error?.error : err?.error?.message)
+      }
+    })
+
+
+  }
+
+  onYes() {
+    let payload = {
+      id: this.AuditId,
+      type: this.currentAuditType,
+      fileId: this.currentAuditType === 'remote' ? this.auditDetails.engagementId : this.auditDetails.queueId,
+    }
+    this.$api.cancelAuditFile(payload).pipe(takeUntil(this.destroy$)).subscribe({
+      next: (res: any) => {
+        if (res && res?.code == 200) {
+          this.getAuditdetails();
+          this.toastService.getSuccessToast(`${this.auditDetails?.auditType} Cancelled Successfully`)
+          this.modalRef.dismiss();
+        }
+      },
+      error: (err: any) => {
+        this.toastService.getErrorToast(err?.error?.error ? err?.error?.error : err?.error?.message)
+        this.modalRef.dismiss();
+      }
+    })
+
+    this.takeAudit = false
+  }
+  cancel() {
+    this.modalRef = this.modalService.open(this.viewCancel, {
+      size: 'md',
+      centered: true,
+      scrollable: true,
+    });
+  }
+  OnCancel() {
+    this.modalRef.dismiss();
+  }
+  ngOnDestroy(): void {
+    this.destroy$.next(true);
+    this.destroy$.complete();
+  }
+
+  backNavigation() {
+
+    this.$api.auditFilterData = {
+      back: 'back',
+      auditDetails: this.auditDetails
+    };
+    this.router.navigate(['/manage/trax/audit'], {
+      queryParams: { date: this.dayjs(this.auditDetails.fileDate).format('YYYY-MM-DD'), typeValue: this.currentAuditType }
+    });
+    let data: any = JSON.parse(localStorage.getItem("header-filters") || "");
+    data.date = {
+      startDate: this.auditDetails?.fileDate,
+      endDate: this.auditDetails?.fileDate
+    };
+    localStorage.setItem("header-filters", JSON.stringify(data));
+    //  this.$api.setValueRoutes(this.dataBackGet)
+  }
+
+}