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

package/src/lib/components/export-gallery/export-gallery.component.scss

@@ -0,0 +1,200 @@
+:host::ng-deep {
+    .md-drppicker .btn {
+        line-height: 10px !important;
+    }
+    .md-drppicker.shown.drops-down-right {
+        transform-origin: 0 0;
+        width: 600px !important;
+    }
+
+    .daterangepicker-input+.ngx-daterangepicker-material .applyBtn {
+        display: none;
+    }
+
+    .md-drppicker.drops-down-right.ltr.show-ranges.shown {
+        top: 65px !important;
+    }
+
+    .md-drppicker.drops-down-right.ltr.double.show-ranges.shown {
+        top: 65px !important;
+        right: -475px !important;
+        left: unset !important;
+        height: 400px !important;
+    }
+
+    .md-drppicker .btn {
+        border-radius: 8px !important;
+        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) !important;
+        color: var(--White, #FFF) !important;
+        font-size: 14px !important;
+        font-weight: 600 !important;
+        line-height: 20px;
+        text-transform: capitalize;
+    }
+
+    .md-drppicker .ranges ul li button {
+        padding: 12px 16px;
+        width: 160px;
+        color: var(--Gray-700, #344054);
+        font-size: 14px;
+        font-weight: 400;
+        line-height: 20px;
+        background: none;
+        border: none;
+        text-align: left;
+        cursor: pointer;
+    }
+
+    .md-drppicker td.active,
+    .md-drppicker td.active:hover {
+        background-color: #029cf4 !important;
+        border-radius: 20px !important;
+        color: var(--White, #FFF) !important;
+        text-align: center !important;
+        font-size: 14px !important;
+        font-weight: 500 !important;
+        line-height: 20px;
+    }
+
+    .md-drppicker.ltr .ranges {
+        float: left;
+        margin-top: 10px !important;
+    }
+
+    .md-drppicker td.in-range {
+        background: var(--Primary-50, #EAF8FF);
+    }
+
+    .md-drppicker .ranges ul li button.active {
+        background: var(--Primary-50, #EAF8FF) !important;
+        border-radius: 8px !important;
+        color: var(--Primary-700, #009BF3);
+        font-size: 14px !important;
+        font-weight: 500 !important;
+        line-height: 20px !important;
+    }
+
+    table th,
+    table td {
+        width: 40px !important;
+        height: 40px !important;
+        padding: 10px 8px !important;
+    }
+
+    .md-drppicker td.available.prev,
+    .md-drppicker th.available.prev {
+        background-image: url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K) !important;
+        background-repeat: no-repeat !important;
+        background-size: 0.5em !important;
+        background-position: center !important;
+    }
+
+    .md-drppicker td.available.next,
+    .md-drppicker th.available.next {
+        background-image: url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K) !important;
+        background-repeat: no-repeat !important;
+        background-size: 0.5em !important;
+        background-position: center !important;
+    }
+
+    table th {
+        border-bottom: 0px solid var(--Gray-200, #EAECF0) !important;
+        background: transparent !important;
+        color: var(--Gray-700, #344054) !important;
+        text-align: center;
+        font-size: 16px !important;
+        font-weight: 500 !important;
+        line-height: 24px;
+    }
+
+    .md-drppicker .btn.btn-default {
+        border-radius: 8px !important;
+        border: 1px solid var(--Gray-300, #D0D5DD) !important;
+        background: var(--White, #FFF) !important;
+        box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05) !important;
+        color: var(--Gray-700, #344054) !important;
+        font-size: 14px !important;
+        font-weight: 600 !important;
+        line-height: 20px;
+        text-transform: capitalize;
+        margin-right: 10px !important;
+    }
+
+    .md-drppicker td.available.invalid-date {
+        text-decoration: line-through;
+        pointer-events: none;
+        color: darkgray;
+    }
+
+    .md-drppicker td.available.today:not(.invalid-date) {
+        text-decoration: unset;
+        pointer-events: unset;
+        color: unset;
+    }
+    .daterangepicker {
+        position: fixed !important;
+        top: 30% !important; /* Adjust based on where you want it to appear */
+        left: 50% !important;
+        transform: translateX(-50%);
+        z-index: 1050 !important; /* Should be above modal but below other popups */
+      }
+
+      
+}
+
+.label{
+    color: var(--Gray-700, #344054) !important;
+font-size: 14px !important;
+font-weight: 500;
+line-height: 20px !important;
+}
+.flagclour{
+    color: red !important;
+}
+
+.nav-line-tabs1{
+    border-radius: 8px !important;
+border: 1px solid var(--Primary-700, #009BF3) !important;  
+border-color: #009BF3 !important;
+padding: 16px !important;
+background: var(--Primary-25, #F6FCFF) !important;
+}
+
+.border-gray-300 {
+    border-color: #101828 !important;
+    padding: 16px !important;
+}
+
+.textvalue{
+color: var(--Gray-900, #101828);
+font-size: 16px !important;
+font-style: normal;
+font-weight: 600 !important;
+line-height: 24px !important;  
+}
+
+.text-border-priamry{
+    color: var(--Primary-700, #009BF3) ;
+font-size: 16px !important;
+font-style: normal;
+font-weight: 600 !important;
+line-height: 24px !important; 
+}
+
+.dark-line{
+color: var(--Gray-500, #667085) !important;
+font-size: 14px;
+font-style: normal;
+font-weight: 500 !important;
+line-height: 20px; 
+}
+
+.dark-line1{
+    color: var(--Gray-500, #667085) !important;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400 !important;
+    line-height: 20px; 
+    }

package/src/lib/components/export-gallery/export-gallery.component.spec.ts

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

package/src/lib/components/export-gallery/export-gallery.component.ts

@@ -0,0 +1,263 @@
+import { AfterViewInit, ChangeDetectorRef, Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core';
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
+import { TimePeriod } from 'ngx-daterangepicker-material/daterangepicker.component';
+import { TraxService } from '../../services/trax.service';
+import { Subject, debounceTime, distinctUntilChanged, filter, takeUntil } from "rxjs";
+import dayjs, { Dayjs } from "dayjs";
+import utc from 'dayjs/plugin/utc';
+import { ToastService } from 'tango-app-ui-shared';
+dayjs.extend(utc);
+@Component({
+  selector: 'lib-export-gallery',
+  templateUrl: './export-gallery.component.html',
+  styleUrl: './export-gallery.component.scss'
+})
+export class ExportGalleryComponent implements OnInit, AfterViewInit {
+  @Input() type: any;
+  @Input() payload: any;
+  @Input() clientName: any;
+  selectedDateRange: any = {};
+  private destroy$ = new Subject();
+  maxdaysReached: boolean = false;
+  previewType: any = 'image';
+  storeList = []
+  userList= []
+  selectedStore = []
+  selectedusers = []
+  getstore: boolean = false
+  constructor(
+    private activeModal: NgbActiveModal,
+    private cd: ChangeDetectorRef,
+    private traxService: TraxService,
+    private toastService: ToastService
+  ) {
+
+
+
+  }
+  @ViewChild('dateRangePickerInput', { read: ElementRef }) dateRangePickerInput: ElementRef;
+  ngOnInit(): void {
+    this.selectedDateRange = {
+      startDate: dayjs(this.payload?.fromDate).format('DD-MM-YYYY'),
+      endDate: dayjs(this.payload?.toDate).format('DD-MM-YYYY'),
+    }
+    console.log(this.payload)
+    this.payload.previewType = this.previewType
+    if (this.type === 'Export as CSV') {
+      console.log(this.payload.filtertype)
+      if(this.payload.filtertype==='Clusters'){
+        this.getStoreData()
+      }else{
+        this.getuserData()
+      }
+    }
+
+  }
+
+
+  getStoreData() {
+    this.getstore = true
+    this.traxService.getStoreslist({ clientId: this.payload.clientId, clusters: [], city: [] }).subscribe({
+      next: (res: any) => {
+        if (res && res.code == 200) {
+          let stores = res.data.storesData.map((data: any) => data.storeId)
+          let obj = {
+            "fromDate": dayjs(this.payload.fromDate).format('YYYY-MM-DD'),
+            "toDate": dayjs(this.payload.toDate).format('YYYY-MM-DD'),
+            "ChecklistType": 'custom',
+            "checklistName": this.payload.checklistName,
+            "checklistId": this.payload.sourceCheckList_id,
+            "storeId": stores,
+            "answerType": this.payload.answerType, //["descriptive","yes/no","multiplechoicesingle","multiplechoicemultiple","image","video","descriptiveImage","multipleImage"]
+            "viewFlag": this.payload.viewFlag,//[true, false]
+            "viewRedo": this.payload.viewRedo,
+            "filter": this.payload.filter,
+            "filtertype":this.payload.filtertype,
+            "questions": this.payload.questions.length > 0 && this.payload.questions[0].questions.length > 0 ? this.payload.questions[0].questions[0] : ""
+          }
+          console.log(this.payload.insertType)
+          if (this.payload.insertType === 'task') {
+            this.traxService.getQuestions(obj)?.pipe(takeUntil(this.destroy$))?.subscribe({
+              next: (res: any) => {
+                if (res && res.code === 200) {
+                  this.selectedStore = res.data.storesDetails
+                  this.storeList = res.data.storesDetails
+                  this.getstore = false
+
+                }
+              }
+            })
+          } else {
+            this.traxService.getchecklist(obj)?.pipe(takeUntil(this.destroy$))?.subscribe({
+              next: (res: any) => {
+                if (res && res.code === 200) {
+                  this.selectedStore = res.data.storesDetails
+                  this.storeList = res.data.storesDetails
+                  this.getstore = false
+                }
+              }
+            })
+          }
+        }
+      }
+    })
+
+  }
+  getuserData() {
+
+    this.getstore = true
+    this.traxService.getusers({ clientId: this.payload.clientId, clusters: [], city: [] }).subscribe({
+      next: (res: any) => {
+        if (res && res.code == 200) {
+          let users = res.data.map((data: any) => data.userEmail)
+          let obj = {
+            "fromDate": this.payload.fromDate,
+            "toDate": this.payload.toDate,
+            "ChecklistType": 'custom',
+            "checklistName": this.payload.checklistName,
+            "checklistId": this.payload.sourceCheckList_id,
+            "storeId": [],
+            "userEmail": users,
+            "filtertype":this.payload.filtertype,
+            "answerType": this.payload.answerType, //["descriptive","yes/no","multiplechoicesingle","multiplechoicemultiple","image","video","descriptiveImage","multipleImage"]
+            "viewFlag": this.payload.viewFlag,//[true, false]
+            "viewRedo": this.payload.viewRedo,
+            "filter": this.payload.filter,
+            "questions": this.payload.questions.length > 0 && this.payload.questions[0].questions.length > 0 ? this.payload.questions[0].questions[0] : ""
+          }
+          console.log(this.payload.insertType)
+          if (this.payload.insertType === 'task') {
+            this.traxService.getQuestions(obj)?.pipe(takeUntil(this.destroy$))?.subscribe({
+              next: (res: any) => {
+                if (res && res.code === 200) {
+                  this.selectedusers = res.data.storesDetails
+                  this.userList = res.data.storesDetails
+                  this.getstore = false
+                }
+              }
+            })
+          } else {
+            this.traxService.getchecklist(obj)?.pipe(takeUntil(this.destroy$))?.subscribe({
+              next: (res: any) => {
+                if (res && res.code === 200) {
+                  this.selectedusers = res.data.storesDetails
+                  this.userList = res.data.storesDetails
+                  this.getstore = false
+                }
+              }
+            })
+          }
+        }
+      }
+    })
+
+  }
+
+  ngAfterViewInit() {
+    this.dateRangePickerInput?.nativeElement?.addEventListener('focus', () => {
+      setTimeout(() => {
+        const datePicker = document.querySelector('.daterangepicker') as HTMLElement;
+        if (datePicker) {
+          document.body.appendChild(datePicker);
+          datePicker.style.position = 'absolute';
+          datePicker.style.zIndex = '1050';
+        }
+      }, 0);
+    });
+  }
+  onStoreSelect(event: any) {
+    this.selectedStore = event
+    this.selectedusers = []
+
+  }
+  onuserSelect(event: any) {
+    this.selectedStore = []
+    this.selectedusers = event
+  }
+
+  datechange(event: TimePeriod) {
+    if (!event.endDate || !event.startDate) {
+      return
+    }
+    this.payload.fromDate = event.startDate
+    this.payload.toDate = event.endDate
+    const start = dayjs(this.payload.fromDate);
+    const end = dayjs(this.payload.toDate);
+
+    // Calculate the difference in the specified unit
+    const difference = end.diff(start, 'days');
+    if (difference > 30) {
+      this.maxdaysReached = true;
+    } else {
+      this.maxdaysReached = false;
+    }
+    this.csvheight = '';
+    this.getstore = false
+     if(this.payload.filtertype==='Clusters'){
+        this.getStoreData()
+      }else{
+        this.getuserData()
+      }
+  }
+  dayjs = dayjs;
+  isCustomDate = (m: dayjs.Dayjs) => {
+    const isValidDate = m > this.dayjs();
+    return isValidDate ? 'invalid-date' : false;
+  }
+  onStartDateChange(event: any) {
+    if (this.dayjs(event.startDate).isValid()) {
+      this.isCustomDate = (m: dayjs.Dayjs) => {
+        const isValidDate =
+          m > this.dayjs() || m > this.dayjs(event.startDate.add(90, "days"));
+        return isValidDate ? "invalid-date" : false;
+      };
+    }
+    // this.getAllCheckLists(false)
+  }
+  onSelect(value: any) {
+    this.previewType = value;
+    this.payload.previewType = value;
+  }
+
+  cancel() {
+    this.activeModal.close('close');
+    const triggerButton = document.querySelector('#triggerButtonId') as HTMLElement;
+    triggerButton?.focus();
+  }
+  onSubmit() {
+    this.getstore = true
+    if (this.selectedStore && this.selectedStore.length > 0) {
+      this.payload.storeIds = this.selectedStore.map((data: any) => data.storeId)
+    }
+    if (this.selectedusers && this.selectedusers.length > 0) {
+      this.payload.userEmailList = this.selectedusers.map((data: any) => data.userEmail)
+    }
+    this.payload.fromDate = dayjs(this.payload.fromDate).format('YYYY-MM-DD')
+    this.payload.toDate = dayjs(this.payload.toDate).format('YYYY-MM-DD')
+    console.log(this.payload)
+    this.traxService.reportTableExport(this.payload)?.pipe(takeUntil(this.destroy$))?.subscribe({
+      next: (res: any) => {
+        if (res && res.code === 200) {
+          this.getstore = false
+          this.activeModal.close('success');
+        } else {
+          this.getstore = false
+          this.activeModal.close('error');
+        }
+      },
+      error: (err) => {
+        console.log(err)
+        this.toastService.getErrorToast(`<div><span class="me-8" >${err?.error?.error?.error}</span></div>`)
+      }
+    })
+
+
+
+  }
+  csvheight = '';
+  dateheight() {
+    this.csvheight = "300px"
+  }
+}
+
+

package/src/lib/components/eye-test-audit/chip-dropdown/chip-dropdown.component.html

@@ -0,0 +1,36 @@
+<div class=" position-relative" (clickOutside)="showDropdown = false;">
+    <div class="dropdown-close">
+        <div class="w-100">
+            <div class="outer-container d-flex align-items-center position-relative w-100">
+                <div class="input-container form-control">
+                    <ng-container *ngFor="let item of selectedData;let i=index">
+                        <span class="chip">
+                            <span class="bg-light-primary text-primary p-1 rounded-5 me-1">{{getInitials(item.name)}}</span>
+                            <span class="me-3">{{item.name}}</span>
+                            <span (click)="removeBadge(item,i)"><svg
+                                    xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
+                                    <path d="M9 3L3 9M3 3L9 9" stroke="#667085" stroke-width="1.5" stroke-linecap="round"
+                                        stroke-linejoin="round" />
+                                </svg>
+                            </span>
+                        </span>
+                    </ng-container>
+                    <input style="min-height: 44px;" type="text" class="form-control dropdown-input" [(ngModel)]="searchValue" (click)="toggleDropdown()" (input)="findValue()" id="searchInput">
+                </div>
+            </div>
+        </div>
+        <div class="px-4 pe-3 dropdown-menu custom-dropdown-menu w-90 mt-3" *ngIf="showDropdown">
+            <div [class]="data?.length > 5 ? 'h-300px overflow-auto' : 'h-auto'">
+                @for( element of data; track element.value; let i = $index){
+                    <div class="dropdown-item form-check custom-dropdown-item" (click)="addBadge(element,i)">
+                        <label>{{element.name}}</label>
+                    </div>
+                }@empty() {
+                    <div>
+                        <label>No data found</label>
+                    </div>
+                }
+            </div>
+        </div>
+    </div>
+</div>

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

@@ -0,0 +1,97 @@
+.dropdown-menu {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    right: 0;
+    border: 1px solid #ccc;
+    background-color: #fff;
+    z-index: 1000;
+    display: block;
+    box-sizing: border-box;
+}
+
+.dropdown-item {
+    padding: 8px 12px;
+}
+
+.dropdown-item:hover {
+    background-color: #f1f1f1;
+}
+
+.dropdown-item input[type="checkbox"] {
+    margin-right: 10px;
+}
+
+.custom-dropdown-menu {
+    border-radius: 4px;
+    box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
+}
+
+.custom-dropdown-item {
+    display: flex;
+    align-items: center;
+
+}
+
+.custom-dropdown-item input {
+    margin-left: 10px;
+}
+
+.btn-resize {
+    font-size: 13px !important;
+    height: 29px !important;
+    line-height: 11px !important;
+    padding: 3px !important;
+}
+
+.formSeach {
+    width: 95%
+}
+
+.storetext {
+    color: var(--Gray-500, #667085);
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 20px;
+    text-transform: lowercase;
+}
+
+.outer-container {
+    position: relative;
+
+    .form-control {
+        padding-top: 0;
+        padding-bottom: 0;
+    }
+
+    .input-container {
+        height: 100%;
+        width: 100%;
+        display: flex;
+        flex-wrap: wrap;
+
+        input {
+            all: unset;
+            flex: 1;
+            min-width: 50px;
+        }
+
+        .chip {
+            border-radius: 20px;
+            margin: 10px 0px 10px 10px;
+            padding: 3px 10px;
+            border-radius: 16px;
+            background: var(--Gray-100, #F2F4F7);
+            color: var(--Gray-700, #344054);
+            font-family: Inter;
+            font-size: 14px;
+            font-weight: 500;
+            line-height: 20px;
+        }
+
+        .chip:nth-child(1) {
+            margin-left: 0;
+        }
+
+    }
+}

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

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