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

package/src/lib/components/reports/date-picker/date-picker.component.scss

@@ -0,0 +1,156 @@
+:host {
+    padding: 24px;
+    // height: 500px;
+}
+
+.header {
+    color: #101828;
+    font-size: 18px;
+    font-weight: 600;
+    line-height: 28px;
+}
+
+:host::ng-deep {
+    .md-drppicker .btn {
+        line-height: 10px !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;
+    }
+
+    .md-drppicker 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;
+    }
+
+    .md-drppicker 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 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;
+    }
+
+    .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;
+    }
+}

package/src/lib/components/reports/date-picker/date-picker.component.spec.ts

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

package/src/lib/components/reports/date-picker/date-picker.component.ts

@@ -0,0 +1,60 @@
+import { ChangeDetectorRef, Component, Input, OnInit } from '@angular/core';
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
+import dayjs from "dayjs";
+import utc from 'dayjs/plugin/utc';
+import { TimePeriod } from 'ngx-daterangepicker-material/daterangepicker.component';
+dayjs.extend(utc);
+
+
+@Component({
+  selector: 'lib-date-picker',
+  templateUrl: './date-picker.component.html',
+  styleUrl: './date-picker.component.scss'
+})
+export class DatePickerComponent {
+
+  dayjs = dayjs
+  @Input() fileType: 'csv' | 'pdf' = 'csv'
+  isCustomDate:any = (m: dayjs.Dayjs) => {
+    const isValidDate = m > this.dayjs();
+        return isValidDate ? 'invalid-date' : false;
+  }
+
+  outputVal= {startDate:'', endDate:'', validated:false}
+
+  constructor(private cd:ChangeDetectorRef, public activeModal:NgbActiveModal){
+
+  }
+
+
+  onDateChange(event:any){
+    if(this.fileType === 'pdf'){
+      this.isCustomDate = (m: dayjs.Dayjs) => {
+        const isValidDate = m > this.dayjs(event.startDate).add(2, 'day') || m > this.dayjs();
+        return isValidDate ? 'invalid-date' : false;
+      }
+    }else if(this.fileType === 'csv'){
+      this.isCustomDate = (m: dayjs.Dayjs) => {
+        const isValidDate = m > this.dayjs(event.startDate).add(1, 'month') || m > this.dayjs();
+        return isValidDate ? 'invalid-date' : false;
+      }
+    }
+    this.cd.detectChanges()
+  }
+
+  onDateUpdated(event:TimePeriod){
+    console.log(event)
+    if(!event.startDate || !event.endDate) return
+    this.outputVal = {startDate:event.startDate.format('YYYY-MM-DD'), endDate: event.endDate.format('YYYY-MM-DD'),validated:true}
+    // this.isCustomDate = (m: dayjs.Dayjs) => {
+    //   const isValidDate = m > this.dayjs();
+    //       return isValidDate ? 'invalid-date' : false;
+    // }
+  }
+
+  onSubmit(){
+    this.activeModal.close(this.outputVal)
+
+  }
+
+}

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

@@ -0,0 +1,225 @@
+<div class="row">
+    <div class="col-md-12 my-2">
+        <div class=" card">
+            <div class="row">
+                <div class="col-lg-12">
+                    <div class="card-header border-0 pt-4 px-4">
+                        <h3 class="card-title align-items-start flex-column">
+                            <span class="card-label mb-2">Checklist Data</span>
+                        </h3>
+                        <div class="card-toolbar">
+                            <div class="d-flex">
+                                <div style="min-width: 350px;" class="d-flex align-items-center  position-relative me-4">
+                                    <span class="svg-icon footfallsearch svg-icon-1 position-absolute ms-3">
+                                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
+                                            viewBox="0 0 24 24" fill="none">
+                                            <rect opacity="0.5" x="17.0365" y="15.1223" width="8.15546" height="2"
+                                                rx="1" transform="rotate(45 17.0365 15.1223)" fill="currentColor">
+                                            </rect>
+                                            <path
+                                                d="M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z"
+                                                fill="currentColor"></path>
+                                        </svg>
+                                    </span>
+                                    <input [formControl]="searchInput" type="text"
+                                        class="form-control ps-14 footfallsearch" placeholder="Search"
+                                        autocomplete="off" />
+                                   
+                                </div>
+                                <div style="min-width: 200px;" class="me-4" >
+                                 <lib-select [items]="checkLists"  [multi]="false" [searchField]="'checkListName'" [idField]="'sourceCheckList_id'"
+                                (selected)="onChecklistSelect($event)" [selectedValues]="[this.currentChecklist]"></lib-select>   
+                                </div>
+                                <!-- <lib-reactive-select [formControl]="checklistSelectControl"
+                                        [idField]="'sourceCheckList_id'" [nameField]="'checkListName'"
+                                        [data]="checkLists" class="w-100 "
+                                        style="border: none !important; box-shadow: none !important;">
+                                        <ng-template let-item>
+                                            <div
+                                                class="d-flex justify-content-between align-items-center no-border-custom-select">
+                                                <span>{{ item.label }}</span>
+                                                <span class="d-flex align-items-center">
+                                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
+                                                        viewBox="0 0 16 16" fill="none">
+                                                        <path d="M4 6L8 10L12 6" stroke="#101828" stroke-width="2"
+                                                            stroke-linecap="round" stroke-linejoin="round" />
+                                                    </svg>
+                                                </span>
+                                            </div>
+                                        </ng-template>
+                                    </lib-reactive-select> -->
+                               
+                                <button [disabled]="!atleastOneSelected" (click)="onExport('pdf')" type="button"
+                                    class="btn-outline btn align-items-end text-nowrap invheader me-4">
+                                    <!-- Export Icon -->
+                                    <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"></path>
+                                    </svg>
+                                    <span class="ms-2"></span> Export as PDF
+                                </button>
+
+                                <button [disabled]="!atleastOneSelected" (click)="onExport('csv')" type="button"
+                                    class="btn-outline btn align-items-end text-nowrap invheader ">
+                                    <!-- Export Icon -->
+                                    <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"></path>
+                                    </svg>
+                                    <span class="ms-2"></span> Export as CSV
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="card-body p-0">
+                        <ng-container>
+                            <ng-container
+                                *ngIf="(reportsTableApiState | async) === 'loaded' && checklistReports?.length">
+                                <div class="table-responsive px-4">
+                                    <table class="table text-nowrap bottom-border">
+                                        <thead>
+                                            <tr>
+                                                <th class="cursor-pointer" >
+                                                    <input  [formControl] = 'selectAllControl'                                                    
+                                                        class="form-check-input cursor-pointer me-4" type="checkbox">
+                                                    Submitted Date<svg (click)="sortData('submittedDate')"
+                                                        [ngClass]="sortColumName === 'submittedDate' && sortDirection === 1 ? 'rotate' : ''"
+                                                        xmlns="http://www.w3.org/2000/svg" width="16" height="16"
+                                                        viewBox="0 0 16 16" fill="none">
+                                                        <path
+                                                            d="M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004"
+                                                            [attr.stroke]="sortColumName === 'submittedDate' ? '#00A3FF' : '#667085'"
+                                                            stroke-width="1.33333" stroke-linecap="round"
+                                                            stroke-linejoin="round" />
+                                                    </svg></th>
+                                                <th class="cursor-pointer" >Checklist Name<svg (click)="sortData('checkListName')"
+                                                        [ngClass]="sortColumName === 'checkListName' && sortDirection === 1 ? 'rotate' : ''"
+                                                        xmlns="http://www.w3.org/2000/svg" width="16" height="16"
+                                                        viewBox="0 0 16 16" fill="none">
+                                                        <path
+                                                            d="M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004"
+                                                            [attr.stroke]="sortColumName === 'checkListName' ? '#00A3FF' : '#667085'"
+                                                            stroke-width="1.33333" stroke-linecap="round"
+                                                            stroke-linejoin="round" />
+                                                    </svg></th>
+                                                <th class="cursor-pointer" >Store Name<svg (click)="sortData('storeName')"
+                                                        [ngClass]="sortColumName === 'storeName' && sortDirection === 1 ? 'rotate' : ''"
+                                                        xmlns="http://www.w3.org/2000/svg" width="16" height="16"
+                                                        viewBox="0 0 16 16" fill="none">
+                                                        <path
+                                                            d="M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004"
+                                                            [attr.stroke]="sortColumName === 'storeName' ? '#00A3FF' : '#667085'"
+                                                            stroke-width="1.33333" stroke-linecap="round"
+                                                            stroke-linejoin="round" />
+                                                    </svg></th>
+                                                <th class="cursor-pointer" >Submitted By<svg (click)="sortData('submittedBy')"
+                                                        [ngClass]="sortColumName === 'submittedBy' && sortDirection === 1 ? 'rotate' : ''"
+                                                        xmlns="http://www.w3.org/2000/svg" width="16" height="16"
+                                                        viewBox="0 0 16 16" fill="none">
+                                                        <path
+                                                            d="M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004"
+                                                            [attr.stroke]="sortColumName === 'submittedBy' ? '#00A3FF' : '#667085'"
+                                                            stroke-width="1.33333" stroke-linecap="round"
+                                                            stroke-linejoin="round" />
+                                                    </svg></th>
+                                                <th>Submitted Time</th>
+                                                <th>Flags Raised</th>
+                                                <th>Action</th>
+                                            </tr>
+                                        </thead>
+                                        <tbody>
+                                            <tr *ngFor="let flagData of checklistReports">
+
+                                                <td>
+                                                    <input [(ngModel)]="flagData.isSelected" (ngModelChange)="onCheckboxChecked($event)"                                                
+                                                        class="form-check-input cursor-pointer me-4" type="checkbox">
+                                                    <span class="data">{{flagData?.submittedDate}}</span>
+                                                </td>
+                                                <td>
+                                                    <div class="data">{{flagData?.checkListName}}</div>
+                                                </td>
+                                                <td>
+                                                    <div class="data-dark">{{flagData?.storeName}}</div>
+                                                </td>
+                                                <td>
+                                                    <div>
+                                                        <div class="symbol symbol-35px symbol-circle">
+                                                            <span class="symbol-label bg-light-primary text-primary me-2">
+                                                                {{flagData?.submittedByChar }} </span>
+                                                        </div><span
+                                                            class="data">{{flagData?.submittedBy ? flagData?.submittedBy : '--'}}</span> 
+                                                    </div>
+                                                </td>
+                                                <td>
+                                                    <div class="data">{{flagData?.submittedTime}}</div>
+                                                </td>
+                                                <td>
+                                                    <div class="data">{{flagData?.flagCount}}</div>
+                                                </td>
+
+                                                <td>
+                                                    <div (click)="onView(flagData)" class="table-title d-flex">
+                                                        <span class="view me-4 cursor-pointer">View Answers</span>
+                                                    </div>
+                                                </td>
+
+                                            </tr>
+                                        </tbody>
+                                    </table>
+
+                                </div>
+                                <div
+                                    *ngIf="(reportsTableApiState | async) === 'loaded' && checklistReports?.length">
+                                    <lib-pagination class="text-start" [itemsPerPage]="itemsPerPage"
+                                        [currentPage]="currentPage" [totalItems]="totalItems"
+                                        [paginationSizes]="paginationSizes" [pageSize]="pageSize"
+                                        (pageChange)="onPageChange($event)"
+                                        (pageSizeChange)="onPageSizeChange($event)"></lib-pagination>
+                                </div>
+                            </ng-container>
+                        </ng-container>
+                        <ng-container
+                            *ngIf="(reportsTableApiState | async) === 'loading' || (reportsTableApiState | async) === 'initial'">
+                            <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="(reportsTableApiState | async) === 'loaded' && !checklistReports?.length">
+                            <div class="row">
+                                <div class="col-lg-12 my-6">
+                                    <div class="card-body d-flex justify-content-center align-items-center flex-column">
+                                        <img class="img-src" src="./assets/tango/Icons/Nodata1.svg" alt="">
+                                        <div class="nodatamaintext mt-3">No data found</div>
+                                        <div class="nodatasubtext">There is no result for Checklist Reports Table
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </ng-container>
+
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+</div>

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

@@ -0,0 +1,69 @@
+.data {
+    color: var(--Gray-500, #667085);
+    font-family: Inter;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 20px;
+}
+
+.data-dark {
+    color: var(--Gray-900, #101828);
+    font-family: Inter;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 20px;
+}
+
+.view{
+    color: var(--Primary-700, #009BF3);
+font-family: Inter;
+font-size: 14px;
+font-style: normal;
+font-weight: 600;
+line-height: 20px;
+text-decoration-line: underline;
+text-transform: capitalize;
+}
+
+.rotate {
+    rotate: 180deg;
+    transition: 1s;
+  }
+
+  input[type='checkbox'] {
+    width: 16px !important;
+    height: 16px !important;
+    margin: 5px;
+    border-radius: 4px !important;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    -o-appearance: none;
+    appearance: none;
+    outline: 1px solid var(--gray-600, #D0D5DD) !important;
+    box-shadow: none;
+    font-size: 0.5em;
+    text-align: center;
+    line-height: 1em;
+    background: white;
+}
+
+input[type='checkbox']:checked {
+    outline: 1px solid var(--primary-600, #00A3FF) !important;
+    background-color: var(--primary-50, #EAF8FF);
+}
+
+input[type='checkbox']:checked:after {
+    content: '';
+    transform: rotate(45deg);
+    border-bottom: 2px solid #00A3FF;
+    border-right: 2px solid #00A3FF;
+    display: inline-block;
+    width: 0.5em;
+    padding-left: 3px;
+    padding-top: 10px;
+    padding-right: 0px;
+}
+
+ 

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

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