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

package/src/lib/components/task-layout/task-layout.component.spec.ts

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

package/src/lib/components/task-layout/task-layout.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'lib-task-layout',
+  templateUrl: './task-layout.component.html',
+  styleUrl: './task-layout.component.scss'
+})
+export class TaskLayoutComponent {
+
+}

package/src/lib/components/task-logs/task-logs.component.html

@@ -0,0 +1,97 @@
+<div class="card group-delete py-0">
+    <div class="card-body py-0 d-flex flex-start flex-column p-9 ">
+        <div class="mt-5">
+            <h5 class="title-txt">{{storeProfile?.storeName}} Activity Log</h5>
+        </div>
+    </div>
+
+    <!-- <div class="d-flex align-items-center justify-content-between">
+    <div class="border border-1 border-gray p-0 w-100 me-3"></div>
+    <span class="text-day fw-bold-400">Today</span>
+    <div class="border border-1 border-gray p-0 w-100 ms-3"></div>
+</div>  -->
+    <ng-container>
+        <div *ngFor="let obj of viewLogsData;let i=index">
+            <!-- User code start -->
+            <div *ngIf="obj.actionType =='initation'" class="d-flex mb-5 ms-5">
+                <div *ngIf="obj.actionType =='initation'" 
+                    class="d-flex flex-column justify-content-center align-items-center pe-3">
+                    <div class="symbol symbol-50px symbol-circle" *ngIf="obj?.userName&&obj?.userName!==''">
+                        <span class="symbol-label badge-light-primary text-symbol">
+                            <span class="text-primary fs-4 badge badge-light-primary fw-normal">
+                                {{obj?.userName?.slice(0,2) | uppercase }}
+                            </span>
+                        </span>
+                    </div>
+                </div>
+                <div class="py-1 pt-0">
+                    <div *ngIf="obj.actionType =='initation'">
+                        <div class="d-flex pt-5 mb-1">
+                            <span class="headingtext text-capitalize">{{obj?.userName?obj?.userName:""}}</span>
+                            <span class="timingtext px-3 pt-1">{{obj?.Timestamp}}</span>
+                        </div>
+                    </div>
+                    <div class="d-flex mb-3">
+                        <span class="timingtext pe-3 fw-bold-400">{{obj?.description}}</span>
+                    </div>
+                </div>
+                <div class="p-0 h-100 mt-3 border border-1 border-gray" style="width:0px"></div>
+            </div>
+            <div *ngIf="obj.actionType =='answer'" class="d-flex mb-5 ms-5">
+                <div class="d-flex flex-column justify-content-center align-items-center pe-3">
+                    <div class="d-flex align-items-centre justify-content-centre">
+                        <div class="symbol symbol-50px symbol-circle" *ngIf="obj?.userName&&obj?.userName!==''">
+                            <span class="symbol-label badge-light-primary text-symbol">
+                                <span class="text-primary fs-4 badge badge-light-primary fw-normal">
+                                    {{obj?.userName?.slice(0,2) | uppercase }}
+                                </span>
+                            </span>
+                        </div>
+                        <span *ngIf="!obj?.userName||obj?.userName===''">
+                            <svg width="40" height="40" viewBox="0 0 40 40" fill="none"
+                                xmlns="http://www.w3.org/2000/svg">
+                                <rect width="40" height="40" rx="20" fill="#EAF8FF" />
+                                <path
+                                    d="M30.4932 28.3351L29.6867 27.5286L20.9965 18.8384L23.5744 16.2605L24.1921 15.6416C24.251 15.5818 24.2843 15.5014 24.2847 15.4174C24.2845 15.3759 24.2761 15.3349 24.26 15.2966C24.2439 15.2584 24.2204 15.2237 24.1909 15.1945L23.572 14.5756L20.8381 11.8368L20.2192 11.218C20.19 11.1882 20.1551 11.1645 20.1166 11.1484C20.0781 11.1323 20.0368 11.124 19.995 11.124C19.9533 11.124 19.912 11.1323 19.8735 11.1484C19.835 11.1645 19.8001 11.1882 19.7709 11.218L19.152 11.8381L15.8016 15.1884C15.7719 15.2176 15.7483 15.2523 15.7322 15.2907C15.7161 15.3291 15.7077 15.3703 15.7077 15.412C15.7077 15.4536 15.7161 15.4948 15.7322 15.5332C15.7483 15.5716 15.7719 15.6064 15.8016 15.6355L19.0021 18.8372L10.3107 27.5286L9.50787 28.3351C9.44834 28.3941 9.41461 28.4743 9.41406 28.5581C9.41441 28.6391 9.4453 28.717 9.50056 28.7762C9.53007 28.8077 9.56573 28.8328 9.60533 28.85C9.64494 28.8672 9.68765 28.8761 9.73082 28.8761H17.5487C17.6326 28.8757 17.713 28.8423 17.7723 28.7829C17.8316 28.7236 17.8651 28.6432 17.8654 28.5593V27.782C17.8654 27.6979 17.8321 27.6172 17.7727 27.5576C17.7134 27.498 17.6328 27.4644 17.5487 27.464H12.3709L19.9987 19.8362L27.6265 27.464H22.4036C22.3195 27.4644 22.2389 27.498 22.1796 27.5576C22.1202 27.6172 22.0869 27.6979 22.0869 27.782V28.5593C22.0867 28.601 22.0949 28.6424 22.111 28.6809C22.1272 28.7194 22.1508 28.7543 22.1807 28.7835C22.2399 28.8426 22.32 28.8758 22.4036 28.8761H30.269C30.3124 28.8762 30.3553 28.8674 30.3952 28.8502C30.435 28.833 30.4708 28.8078 30.5005 28.7762C30.5574 28.7164 30.5885 28.6367 30.5872 28.5542C30.5858 28.4716 30.552 28.393 30.4932 28.3351ZM19.9938 12.9906L22.4219 15.4187L19.9999 17.8407L17.5718 15.4126L19.9938 12.9906Z"
+                                    fill="#00A3FF" />
+                            </svg>
+
+                        </span>
+                        <!-- <img  class="msgprofile1" src="./assets/tango/Images/tangoprofile.png"> -->
+                    </div>
+                    <div class="p-0 h-100 mt-3 border border-1 border-gray" style="width:0px"></div>
+                </div>
+
+                <div class="py-3 pt-0">
+                    <div class="d-flex mt-2 mb-3">
+                        <span class="headingtext fw-bold text-capitalize">{{obj?.userName?obj?.userName:"Tango"}}</span>
+                        <span class="timingtext fw-bold-400 px-3 pt-1">{{obj?.Timestamp}}</span>
+                    </div>
+                    <div class="row px-5" *ngIf="obj.answerType==='video'">
+                        <div class="col-md-6" *ngFor="let item of obj.userAnswer">
+                            <div class="title-ref my-3">Uploaded Video</div>
+                            <video controls class="recap-img p-3"
+                                src="{{environment.TraxAnswerCDN}}{{item.answer}}">
+                            </video>
+                        </div>
+                    </div>
+                    <div class="row px-5"
+                        *ngIf="obj.answerType==='image'||obj.answerType==='descriptiveImage'||obj.answerType==='multipleImage'">
+                        <div class="col-md-6" *ngFor="let item of obj.userAnswer">
+                            <div class="title-ref my-3">Uploaded Image</div>
+                            <img class="img-logo" src="{{environment.TraxAnswerCDN}}{{item.answer}}" alt="">
+                        </div>
+                    </div>
+                    <div class="row px-5"
+                        *ngIf="obj.answerType==='multiplechoicesingle'||obj.answerType==='yes/no'||obj.answerType==='date'||obj.answerType==='time'||obj.answerType==='multiplechoicemultiple'||obj.answerType==='linearscale'||obj.answerType==='descriptive' ">
+                        <div class="col-md-12" *ngFor="let item of obj.userAnswer">
+                            <span class="mt-1">{{item.answer}}</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <!-- Tango code end -->
+        </div>
+    </ng-container>
+
+</div>

package/src/lib/components/task-logs/task-logs.component.scss

@@ -0,0 +1,301 @@
+.card-label{
+    font-size: 18px !important;
+}
+.roundedcheck{
+  input[type='checkbox'] {
+      width: 16px !important;
+      height: 16px !important;
+      // margin: -3px 5px;
+      border-radius: 10px !important;
+      -webkit-appearance: none;
+      -moz-appearance: none;
+      -o-appearance: none;
+      appearance: none;
+      outline: 1px solid var(--gray-300, #D0D5DD);
+      box-shadow: none;
+      font-size: 0.8em;
+      text-align: center;
+      line-height: 1em;
+      background: white;
+  }
+
+  input[type='checkbox']:checked {
+      outline:none;
+      background-color: var(--primary-50, #00A3FF);
+  }
+
+  input[type='checkbox']:checked:after {
+      content: '';
+      transform: rotate(45deg);
+      border-bottom: 2px solid white;
+      border-right: 2px solid white;
+      display: inline-block;
+      width: 4px;
+      // margin-left: 5px !important;
+      padding-left: 3px;
+      padding-top: 5px;
+      padding-bottom: 2px;
+      margin-top: 2px;
+      padding-right: 0px;
+  }
+}
+.prvtxt {
+  color: var(--Gray-500, #667085);
+  font-family: Inter;
+  font-size: 20px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 20px;
+  /* 100% */
+  letter-spacing: -0.4px;
+}
+.textclr{
+  color: var(--Gray-400, #98A2B3);
+}
+.title-txt {
+    color: var(--Gray-900, #101828) !important;
+    font-size: 18px !important;
+    font-weight: 600;
+    line-height: 28px !important;
+}
+.img {
+
+  border-radius: 10px;
+  border: 1px solid var(--Gray-500, #667085);
+  background: var(--Gray-100, #F2F4F7) ;
+  width: 100%;
+  height: 165px;
+}
+
+.issuecard{
+    width:19%;
+    border-radius: 10px;
+    border: 1px solid var(--Gray-200, #EAECF0);
+    padding:16px;
+    label{
+        color: var(--Black, #101828);
+        font-size: 14px;
+        line-height: 20px;
+    }
+}
+.issuecard.active{
+    border:none !important;
+    background: var(--Primary-25, #F6FCFF);
+    box-shadow: 0px 0px 0px 4px #E9F7FF;
+}
+.contenttext{
+    color: var(--Gray-500, #667085);
+    font-size: 14px;
+    line-height: 20px;
+}
+.maincard-content{
+    border-radius: 8px;
+    border: 1px solid var(--Gray-300, #D0D5DD);
+}
+.maincard-label{
+    color: var(--Gray-900, #101828);
+    font-size: 16px;
+    line-height: 24px;
+}
+.profile{
+    width:24px;
+    height:24px;
+    overflow: hidden;
+    border-radius: 200px;
+}
+.fw-bold-700{
+  font-weight: 700 !important;
+}
+.fw-bold-400{
+  font-weight:400 !important; 
+}
+.msgprofile{
+    width:48px !important;
+    height:48px !important  ;
+    border-radius: 200px;
+    overflow: hidden; 
+}
+.msgprofile1{
+  width:35px !important;
+  height:35px !important  ;
+  border-radius: 200px;
+  overflow: hidden;  
+}
+.timingtext{
+    color: var(--Gray-500, #667085);
+    font-size: 12px;
+    line-height: 18px;
+}
+.profile-label{
+    font-size:12px;
+    color: var(--Gray-500, #344054);
+    line-height: 16px;
+}
+.investigation{
+    color: var(--Gray-500, #344054);
+    font-size: 15px;
+    line-height: 24px;
+}
+.openedissue{
+    border-radius: 6px;
+    background: var(--Gray-50, #F9FAFB);
+    padding: 8px 12px;
+    }
+.w-45{
+    width:49%;
+}
+
+input,textarea{
+    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);
+}
+::placeholder{
+    color: var(--Gray-500, #667085);
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 24px;
+}
+textarea{
+    min-height: 128px;
+}
+
+.textupdates{
+    color: var(--Gray-700, #344054);
+    font-size: 15px;
+    line-height: 24px;
+}
+.textupdates1{
+    color: var(--Gray-700, #344054);
+    font-size: 14px;
+    line-height: 24px;  
+}
+.items:hover,.tems.focus,.items.active,.camera.focus-visible{
+    background: var(--Gray-50, #F9FAFB); }
+
+    .loader{
+        .title {
+            width: 65%;
+          }
+          .link {
+            width: 85%;
+          }
+          .description {
+            width: 95%;
+          }
+          .shimmer {
+            padding: 15px;
+            width: 95%;
+            height: 120px;
+            margin: 10px auto;
+            background: #ffffff;
+          }
+          .shimmer .image-card {
+            height: 90px;
+            width: 90px;
+            float: right;
+            border-radius: 8px;
+          }
+          .stroke {
+            height: 15px;
+            background: #777;
+            margin-top: 20px;
+          }
+         
+          .wrapper {
+            width: 0px;
+            animation: fullView 0.5s forwards linear;
+          }
+         
+          @keyframes fullView {
+            100% {
+              width: 100%;
+            }
+          }
+          .animate {
+            animation: shimmer 3s;
+            animation-iteration-count: infinite;
+            background: linear-gradient(to right, #e6e6e6 5%, #cccccc 25%, #e6e6e6 35%);
+            background-size: 1000px 100%;
+          }
+          @keyframes shimmer {
+            from {
+              background-position: -1000px 0;
+            }
+            to {
+              background-position: 1000px 0;
+            }
+          }
+         
+      }
+      
+      .img-src{
+        width:25%;
+      }
+
+      .text-primary1{
+        color: var(--Primary-700, #009BF3) !important;
+        font-size: 14px !important;
+        font-weight: 500;
+        line-height: 20px;
+      }
+      .sub-count{
+        color: var(--Gray-400, #98A2B3);
+        font-size: 14px;
+        line-height: 20px; 
+      }
+      .img-src{
+        border-radius: 6px !important;
+      }
+      .headingtext {
+        color: var(--Gray-700, #344054) !important;
+        font-size: 15px !important;
+        font-weight: 500;
+        line-height: 20px;
+    }
+.imagesize{
+  object-fit: contain !important;
+  max-height: 150px !important;
+  width:80% !important;
+  background: var(--Gray-50, #F9FAFB);
+}
+.close-img{
+  top: 4%;
+  right: 16%;
+}
+
+
+.update-label {
+  color: #667085;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 20px;
+}
+
+.update-value {
+  color: #009BF3;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 20px;
+}
+.video-size{
+  width: 100%;
+  height: 400px;
+  object-fit: cover !important;
+}
+
+img.img-logo {
+  height: 400px !important;
+}
+
+.recap-img {
+  height: 400px;
+  object-fit: cover !important;
+}
+
+.img-src {
+  width: 30% !important;
+  height: 20% !important;
+}

package/src/lib/components/task-logs/task-logs.component.spec.ts

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

package/src/lib/components/task-logs/task-logs.component.ts

@@ -0,0 +1,80 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { TraxService } from '../../services/trax.service';
+import { Subject, debounceTime, distinctUntilChanged, filter, takeUntil } from "rxjs";
+import { ToastService } from 'tango-app-ui-shared';
+import { NgbActiveModal, NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { GlobalStateService } from 'tango-app-ui-global';
+@Component({
+  selector: 'lib-task-logs',
+  templateUrl: './task-logs.component.html',
+  styleUrl: './task-logs.component.scss'
+})
+export class TaskLogsComponent implements OnInit {
+@Input() sourceCheckList_id: any
+@Input() taskDetails: any
+@Input() inputData: any
+@Input() checklistInfo: any
+@Input() storeProfile: any
+@Input() sectionInfo: any
+@Input() operationtype: any
+private destroy$ = new Subject();
+  environment: any;
+constructor(private traxService: TraxService,private gs: GlobalStateService,public toastService:ToastService,public activeModal:NgbActiveModal){
+
+}
+viewLogsData:any =[]
+  
+ngOnInit() {
+    this.gs.environment.pipe(takeUntil(this.destroy$)).subscribe((env) => {
+      if (env) {
+        this.environment = env
+      }
+    })
+    
+let input = {
+    checklistId:this.sourceCheckList_id,
+    processedChecklistId: this.checklistInfo.checklistId,
+    "section_id":this.sectionInfo.section_id,
+    "sectionName":this.sectionInfo.sectionName,
+    "qname":this.inputData.qname    
+
+}
+this.traxService.getredoLogs(input).pipe(takeUntil(this.destroy$)).subscribe({
+    next: (res: any) => {
+      if (res.code === 200) {
+        this.viewLogsData = res.data; 
+        this.viewLogsData.forEach((e: any) => {
+          e.Timestamp = this.getRelativeTime(e.Timestamp);
+        });
+      }
+    }
+  })
+}
+getRelativeTime(timestamp: string): string {
+  console.log(timestamp);  
+  const parts = timestamp.split(/[T.]/);
+  const [year, month, day] = parts[0].split("-").map(Number);
+  const [hour, minute, second] = parts[1].split(":").map(Number);
+  const date = new Date(year, month - 1, day, hour, minute, second); // Treat as local date
+  console.log("Parsed Date (Local):", date);
+  const currentDate = new Date();
+  console.log(currentDate,date)
+  console.log(currentDate.getTime(),date.getTime())
+  const difference = currentDate.getTime() - date.getTime();
+  console.log(difference)
+  const seconds = Math.floor(Math.abs(difference) / 1000);
+  const minutes = Math.floor(seconds / 60);
+  const hours = Math.floor(minutes / 60);
+  const days = Math.floor(hours / 24);
+
+  if (days > 0) {
+    return days === 1 ? '1 day ago' : `${days} days ago`;
+  } else if (hours > 0) {
+    return hours === 1 ? '1 hour ago' : `${hours} hours ago`;
+  } else if (minutes > 0) {
+    return minutes === 1 ? '1 minute ago' : `${minutes} minutes ago`;
+  } else {
+    return 'Just now';
+  }
+}
+}

package/src/lib/components/trax-run-ai-popup/trax-run-ai-popup.component.html

@@ -0,0 +1,84 @@
+<div class="text-start p-9 h-auto scroll-y my-2">
+    <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 *ngIf="next" >
+        <div class="mt-5">
+            <label for="inputmodel" class="label">Question</label><br>
+            <input class="inputlabel" id="inputmodel" placeholder="Question" type="text" value="{{data.questionName}}" disabled>
+        </div>
+    
+        <div class="mt-5">
+            <label for="inputmodel" class="label">Select the reference images to process</label><br>
+            <div class="row">
+                <div class="col-md-4 position-relative" *ngFor="let img of data.images"> <!-- -->
+                    <div class="pb-4 img-border border border-1 h-100 rounded-3 position-relative">
+                        <!-- Checkbox in top-right --> <!--[(ngModel)]="img.selected"-->
+                        <input type="checkbox" 
+                            class="position-absolute absolute form-check-input"
+                            [(ngModel)]="img.runAI" />
+    
+                        <!-- Image -->
+                        <img src="{{data.environment}}{{img.imageURL}}" alt="" class="w-100 mb-2 rounded border" width="90%" height="100px"/>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div *ngIf="!next">
+        <!-- <div class="mt-5">
+            <label for="inputmodel" class="label">What’s the ouput you looking for</label><br>
+            <input class="inputlabel" id="inputmodel" placeholder="Select Option" type="text">
+        </div> -->
+        <div class="mt-5">
+            <div class="select-wrapper">
+                <div class="placeholder-overlay"> What’s the ouput you looking for </div>
+                <lib-select [items]="runAIFeatures" [disabled]="false" [multi]="true"
+                    [searchField]="'featureName'" [idField]="'featureName'" (selected)="onStoreSelect($event)"
+                    [selectedValues]="selectedFeatures"></lib-select>
+            </div>
+        </div>
+        <div class="mt-5">
+            <label for="inputmodel" class="label">Specify your request</label><br>
+            <input class="inputlabel" id="inputmodel" [(ngModel)]="data.runAIDescription" (ngModelChange)="onInputChange($event)" placeholder="" type="text">
+        </div>
+    
+        <div class="mt-5" *ngFor="let feature of selectedFeatures; let i = index">
+            <ng-container *ngIf="feature.lableName !== 'detectionStatus'">
+                <label for="label-{{i}}" class="label">
+                    @if(feature.featureName === 'Others') {
+                        Label if any
+                    }@else {
+                        Label for {{feature.featureName || feature.lableName}}
+                    }
+                </label><br>
+                <input class="inputlabel" id="label-{{i}}" 
+                    placeholder="{{feature?.lableName}}" 
+                    type="text" [(ngModel)]="feature.lableName">
+            </ng-container>
+        </div>
+    </div>
+
+
+
+    <div 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" *ngIf="!next"
+            (click)="confirmpopup()">Request</button>
+        <button class="btn min-width-popup btn-outline active btn-active-primary" *ngIf="next"
+            (click)="next = false" [disabled]="checkRunAI()">Next</button>
+    </div>
+</div>