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

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

@@ -0,0 +1,400 @@
+import { ChangeDetectorRef, Component, Input, OnDestroy, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { TraxService } from '../../services/trax.service';
+import { GlobalStateService, PageInfoService } from 'tango-app-ui-global';
+import { ToastService } from 'tango-app-ui-shared';
+import { Subject, debounceTime, distinctUntilChanged, filter, takeUntil } from "rxjs";
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { TaskinfoEditComponent } from './taskinfo-edit/taskinfo-edit.component';
+import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
+import dayjs from 'dayjs';
+@Component({
+  selector: 'lib-task-info',
+  templateUrl: './task-info.component.html',
+  styleUrl: './task-info.component.scss'
+})
+export class TaskInfoComponent implements OnDestroy, OnInit {
+  private destroy$ = new Subject();
+  isExport: boolean = false;
+  itemsPerPage = 10
+  currentPage = 1
+  totalItems = 0
+  paginationSizes:any[] = [];
+  pageSize = 10
+  sortColumName: string = '';
+  sortBy: any = '';
+  sortDirection: any = '';
+  searchInput: any ="";
+  headerData: any;
+  searchValue: string;
+  limit: number;
+  offset: number;
+  searchDisabled: boolean = false;
+  taskInfoLoading: boolean = true;
+  taskInfoNoData: boolean = false;
+  TaskInfoData: any[] = [];
+  showZoneData: boolean = false;
+
+  taskDropdown: any[] = [];
+  taskselectControl: FormControl = new FormControl('');
+  form: FormGroup;
+  selectedTask: any;
+  selectedChecklistType: string;
+  selectedSourceCheckListId: string;
+  selectedvalue: any;
+  selectedlistselectControl: FormControl;
+  selectedStatus: any;
+  statusselectControl = [
+    { _id: 'All', label: 'All' },
+    { _id: 'open', label: 'Open' },
+    { _id: 'inprogress', label: 'In Progress' },
+    { _id: 'submit', label: 'Submitted' },
+    { _id: 'redo', label: 'Redo' },
+  ];
+  dayjs = dayjs;
+  date: any;
+  userEmailes: any = [];
+  taskName: any;
+  // refreshTaskDropdown:boolean = true
+
+  constructor(private route: ActivatedRoute, private router: Router,public gs: GlobalStateService,private changeDetector: ChangeDetectorRef,private toast: ToastService,
+    private TraxService: TraxService, private pageInfo: PageInfoService,public modalService: NgbModal,private fb: FormBuilder,
+  ) {
+    this.userEmailes = JSON.parse(localStorage.getItem("usersEmail-info") || "[]" )
+   }
+  ngOnDestroy(): void {
+    this.destroy$.next(true);
+    this.destroy$.complete();
+  }
+
+  ngOnInit(): void {
+    this.selectedlistselectControl = new FormControl('All');
+    this.route?.queryParams
+    ?.pipe(takeUntil(this.destroy$))
+    .subscribe((params) => {
+        this.selectedvalue = params.taskId
+        this.taskName = params.taskName
+        if (params.status == 'submit') {
+          this.selectedlistselectControl.setValue('submit');
+        }
+        if (params.status == 'redo') {
+          this.selectedlistselectControl.setValue('redo');
+        }
+        this.taskselectControl.setValue(params.taskId)
+       
+    });
+   
+    
+    this.form = this.fb.group({
+      taskselectControl: this.taskselectControl
+    });
+    this.taskselectControl.valueChanges
+    .pipe(takeUntil(this.destroy$))
+    .subscribe((value: any) => {
+      this.onTaskSelect({ _id: value });
+    });
+
+    
+    this.form = this.fb.group({
+      selectedlistselectControl: this.selectedlistselectControl
+    });
+    this.selectedlistselectControl.valueChanges.pipe(takeUntil(this.destroy$)).subscribe((value: any) => {
+      this.onValueChangeStatusSelect(value);
+    });
+
+    this.gs.dataRangeValue
+    .pipe(takeUntil(this.destroy$), debounceTime(300))
+    .subscribe((data: any) => {
+        this.headerData = data;
+        this.setPageData();
+        // this.gettaskDropdown();
+        this.getTaskInfoTableData();    
+})
+   
+    
+
+  }
+  setPageData() {
+    this.pageInfo.setTitle("Dashboard");
+    // this.pageInfo.setDescription("Dashboard");
+    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 },
+    ]);
+  }
+
+  gettaskDropdown(): void {
+    const requestData = {
+      // fromDate: this.headerData.date.startDate,
+      // toDate: this.headerData.date.endDate,
+      storeId: this.headerData.stores.filter((store: any) => store.checked).map((store: any) => store.storeId),
+      userEmailes: this.userEmailes,
+      clientId: this.headerData.client,
+    };
+  
+    this.TraxService.getTaskDropdownList(requestData)
+      .pipe(takeUntil(this.destroy$))
+      .subscribe(
+        (response: any) => {
+          if (response?.code === 200 && response?.status === "success") {
+            this.taskDropdown = response.data?.taskDropdown;
+            this.selectedTask = this.taskDropdown.find(item => item._id === this.selectedvalue);
+            if (this.selectedTask) {
+              this.taskselectControl.setValue(this.selectedTask._id);
+              this.selectedvalue = this.selectedTask._id;
+            } else if (this.taskDropdown.length > 0) {
+              this.taskselectControl.setValue(this.taskDropdown[0]._id);
+              this.selectedTask = this.taskDropdown[0];
+            }
+          } else {
+            this.taskDropdown = [];
+            // this.refreshTaskDropdown =  false
+            // setTimeout(() => {
+            //   this.refreshTaskDropdown = true
+            //   this.changeDetector.detectChanges();
+            // }, 0);
+            // this.taskInfoNoData = true;
+            // this.changeDetector.detectChanges();
+          }
+        },
+        error => {
+          this.taskDropdown = [];
+          // this.changeDetector.detectChanges();
+        }
+      );
+  }
+  onTaskSelect(event: any): void {
+    this.selectedTask = this.taskDropdown.find(item => item._id === event?._id);
+  
+    if (this.selectedTask) {
+      this.selectedvalue = event._id;
+      this.router.navigate([], {
+
+        relativeTo: this.route,
+        queryParams: { taskId: this.selectedTask.sourceCheckList_id },
+        queryParamsHandling: 'merge'
+      });
+  
+      this.getTaskInfoTableData();
+    }
+  }
+ 
+  getTaskInfoTableData(): void {
+    this.searchDisabled = true;
+    this.taskInfoLoading = true;
+    this.taskInfoNoData = true;
+    const requestData = {
+      fromDate: this.headerData.date.startDate,
+      toDate: this.headerData.date.endDate,
+      storeId: this.headerData.stores.filter((store: any) => store.checked).map((store: any) => store.storeId),
+      userEmailes:this.userEmailes,
+      clientId:this.headerData.client,
+      limit: this.itemsPerPage,                 
+      offset: this.currentPage,
+      sortBy: this.sortDirection,
+      sortColumnName: this.sortColumName,
+      searchValue: this.searchInput,
+      export: false,
+      taskId: this.selectedvalue,
+      // taskId: "673dc2d4bf6f467cea82c68c",
+      checklistStatus: this.selectedlistselectControl.value,
+
+    };
+
+    this.TraxService.getTaskInfoTableData(requestData)
+      .pipe(takeUntil(this.destroy$))
+      .subscribe((response: any) => {
+        this.taskInfoLoading = false;
+        if (response?.code === 200 && response?.status === "success") {
+          this.TaskInfoData = response.data.taskInfo || [];
+          if(this.TaskInfoData[0]?.checkListFrom == 'api'){
+            this.showZoneData = true;
+          }
+          this.totalItems = response.data.totalCount
+          this.setPaginationSizes()
+          this.taskInfoLoading = false;
+          this.taskInfoNoData = false;
+          this.searchDisabled = false;
+        } else {
+          this.TaskInfoData = [];
+          this.taskInfoLoading = false;
+          this.taskInfoNoData = true;
+          this.searchDisabled = true;
+          if (this.searchInput?.length) {
+            this.searchDisabled = true
+          }
+          this.TaskInfoData = []
+          this.totalItems = 0
+          this.changeDetector.detectChanges()
+        }
+      }, error => {
+        this.TaskInfoData = []
+        this.changeDetector.detectChanges()
+      });
+  }
+
+  onValueChangeStatusSelect(event: any): void {
+    this.sortColumName = "",
+      this.sortDirection = "",
+      this.searchValue = "",
+      this.limit = 10,
+      this.offset = 1,
+      this.currentPage = 1,
+      this.pageSize = 10
+    this.selectedStatus = this.statusselectControl.find(item => item._id === event);
+    if (this.selectedStatus) {
+      this.changeDetector.detectChanges();
+      // this.getInfoCardsData();
+      this.getTaskInfoTableData();
+    } // Fetch data based on selected status
+  }
+  setPaginationSizes() {
+    if (this.totalItems > 10) {
+      this.paginationSizes = [10, 20, 30];
+    } else {
+      this.paginationSizes = [this.totalItems];
+      this.pageSize = this.totalItems;
+    }
+    
+  }
+  
+  onExport(): void {
+    this.currentPage = 1;
+    const requestData = {
+      fromDate: this.headerData.date.startDate,
+      toDate: this.headerData.date.endDate,
+      storeId: this.headerData.stores.filter((store: any) => store.checked).map((store: any) => store.storeId),
+      userEmailes: this.userEmailes,
+      clientId:this.headerData.client,
+      limit: 10000,                 
+      offset: this.currentPage,
+      sortBy: this.sortDirection,
+      sortColumnName: this.sortColumName,
+      searchValue: this.searchInput,
+      export: true,
+      taskId: this.selectedvalue,
+      checklistStatus: this.selectedlistselectControl.value,
+    };
+        this.TraxService.getTaskInfoTableDataExport(requestData)
+        .pipe(takeUntil(this.destroy$))
+        .subscribe({
+          next: (res) => {
+            this.TraxService.saveAsExcelFile(res, 'TaskInfoTable');
+          },
+          error: (e) => {
+            this.toast.getErrorToast('Something went Wrong..')
+          }
+        });
+       
+    }  
+  searchField(): void {
+    this.headerData.searchValue = this.searchInput;
+    this.headerData.export = false;
+    this.currentPage = 1;
+    this.pageSize=10;
+    this.getTaskInfoTableData();
+    }
+  sortData(column: string): void {
+    if (this.sortColumName === column) {
+      this.sortDirection = this.sortDirection === 1 ? -1 : 1;
+    } else {
+      this.sortColumName = column;
+      this.sortDirection = 1;
+    }
+    this.getTaskInfoTableData();
+    }
+  
+  onPageSizeChange(pageSize: any) {
+    this.currentPage = 1;
+    this.itemsPerPage = pageSize;
+    this.pageSize = pageSize;
+    this.changeDetector.detectChanges();
+    this.getTaskInfoTableData();
+    }
+  onPageChange(pageOffset: any) {
+    this.currentPage = pageOffset
+    this.getTaskInfoTableData();
+  }
+  taskinfoedit(data:any) {
+    let editRequestData = data
+    const modalRef = this.modalService.open(TaskinfoEditComponent, {
+      centered: true,
+      size: 'md',
+      scrollable: true,
+    });
+    
+    modalRef.componentInstance.editRequestData = editRequestData;
+   
+    modalRef.result.then((result) => {
+      this.getTaskInfoTableData();
+    });
+  }
+
+  navigateToGallery(taskinfo: any): void {
+    let formattedDate = dayjs(taskinfo.date_string).format('YYYY-MM-DD')
+    let checklistType: string;
+  
+    if (taskinfo.checkListType === 'custom') {
+      checklistType = 'custom';
+    } else if (['task', 'checklistTask', 'cctv'].includes(taskinfo.checkListType)) {
+      checklistType = 'task';
+    } else {
+      checklistType = taskinfo.checkListType || '--';
+    }
+    let queryParams: any;
+    if (taskinfo?.store_id !== '') {
+      queryParams = {
+        ChecklistDate: formattedDate,
+        checklistType: checklistType,
+        storeId: taskinfo.store_id,
+        sourceCheckList_id: taskinfo.sourceCheckList_id,
+      };
+    } else{
+      queryParams = {
+        ChecklistDate: formattedDate,
+        checklistType: checklistType,
+        userEmail: taskinfo.userEmail,
+        sourceCheckList_id: taskinfo.sourceCheckList_id,
+      };
+    }
+  
+    if (taskinfo.redoStatus) {
+      queryParams.redoStatus = true;
+    }
+  
+    this.router.navigate(['/manage/trax/gallery'], { queryParams });
+  }
+
+  getRedoSvgColor(status: string): string {
+    switch (status) {
+        case 'Open':
+            return '#B42318'; 
+        case 'In Progress':
+            return '#009BF3'; 
+        case 'Submitted':
+            return '#027A48';
+        default:
+            return '#000000';
+    }
+}
+
+  // storeView(taskinfo: any){
+  //   const datavalue: any = JSON.parse(
+  //     localStorage.getItem("header-filters") || "{}"
+  //   );
+  //   const matchedStores = datavalue.stores.filter((store: any) => store.checked && store.storeId === taskinfo.store_id);
+  //   // Update the balance stores (those not in the matched stores) to set their checked property to false
+  //   datavalue.stores.forEach((store: any) => {
+  //     if (!matchedStores.some((matchedStore:any) => matchedStore.storeId === store.storeId)) {
+  //       store.checked = false;
+  //     }
+  //   });
+  //   datavalue.store = taskinfo.store_id;
+  //   localStorage.setItem("header-filters", JSON.stringify(datavalue));
+  //   this.changeDetector.detectChanges()
+  //   this.gs.dataRangeValue.next(datavalue)
+  //   this.gs.manageRefreshTrigger.next(true);
+  //   this.router.navigate(['/manage/trax/task/taskinfo'], { queryParams: {  type: taskinfo.checkListType, store_id: taskinfo.store_id, taskId:taskinfo.sourceCheckList_id} });
+  // }
+
+}

package/src/lib/components/task-info/taskinfo-edit/taskinfo-edit.component.html

@@ -0,0 +1,141 @@
+<div class="p-6 editscroll">
+    <span class="my-2"><svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <rect x="4" y="4" width="48" height="48" rx="24" fill="#DAF1FF" />
+            <rect x="4" y="4" width="48" height="48" rx="24" stroke="#EAF8FF" stroke-width="8" />
+            <path
+                d="M33 19.0001C33.2626 18.7374 33.5744 18.5291 33.9176 18.3869C34.2608 18.2448 34.6286 18.1716 35 18.1716C35.3714 18.1716 35.7392 18.2448 36.0824 18.3869C36.4256 18.5291 36.7374 18.7374 37 19.0001C37.2626 19.2627 37.471 19.5745 37.6131 19.9177C37.7553 20.2608 37.8284 20.6286 37.8284 21.0001C37.8284 21.3715 37.7553 21.7393 37.6131 22.0825C37.471 22.4256 37.2626 22.7374 37 23.0001L23.5 36.5001L18 38.0001L19.5 32.5001L33 19.0001Z"
+                stroke="#00A3FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+        </svg>
+    </span>
+    <div class="col-md-12 ">
+        <div class="row my-5">
+            <div class="col-md-4">
+                <div class="tasktitle mb-4">
+                    Task Title :
+                </div>
+                <div class="tasktitle">
+                    Description :
+                </div>
+            </div>
+            <div class="col-md-8">
+                <div class="tasksub mb-4">
+                    {{taskDetails?.checkListName || "--"}}
+                </div>
+                <div class="tasksub">
+                    {{taskDetails?.checkListDescription || "--"}}
+                </div>
+            </div>
+
+        </div>
+        <div class="storetext my-4">
+            {{editRequestData?.storeName || "--"}} Configuration
+        </div>
+
+        <div class="row">
+            <div class="col-6 mb-5">
+                <div class="date-picker">
+                    <label for="datepick" class="form-label">Due date</label>
+                    <div style="position: relative;">
+                        <svg style="position: absolute; top: 12px; left:12px;" xmlns="http://www.w3.org/2000/svg"
+                            width="20" height="20" viewBox="0 0 20 20" fill="none">
+                            <path
+                                d="M13.3333 1.66663V4.99996M6.66667 1.66663V4.99996M2.5 8.33329H17.5M4.16667 3.33329H15.8333C16.7538 3.33329 17.5 4.07948 17.5 4.99996V16.6666C17.5 17.5871 16.7538 18.3333 15.8333 18.3333H4.16667C3.24619 18.3333 2.5 17.5871 2.5 16.6666V4.99996C2.5 4.07948 3.24619 3.33329 4.16667 3.33329Z"
+                                stroke="#344054" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round">
+                            </path>
+                        </svg>
+                        <input id="datepick" class="fx-date-range form-control ps-14" type="text" ngxDaterangepickerMd
+                            [singleDatePicker]="true" [minDate]="minDate" [drops]="'down'" [opens]="'right'"
+                            [alwaysShowCalendars]="false" [keepCalendarOpeningWithRange]="true" [showCancel]="true"
+                            autocomplete="off" [(ngModel)]="scheduleDate" [autoApply]="false"
+                            [locale]="{ format: 'DD-MM-YYYY', firstDay: 1, monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] }"
+                            name="daterange" [readonly]="true" />
+                    </div>
+
+                </div>
+
+            </div>
+            <div class="col-6 mb-5">
+                <label for="timePick" class="form-label">Due time</label>
+                <input [formControl]="scheduleEndTime" type="time" class="form-control" id="timePick"
+                    placeholder="name@example.com">
+            </div>
+            <div class="col-6 mb-5">
+                <label class="form-label">Approver</label>
+                <div  class="position-relative">
+                    <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"><span *ngFor="let approver of approver.value"
+                                         class="chip ng-star-inserted"><span
+                                             class="me-3">{{approver.name}}</span><span
+                                            ><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">
+                                                </path>
+                                            </svg></span></span><!----><!----><input 
+                                        type="text" id="searchInput"
+                                        class="form-control dropdown-input ng-untouched ng-pristine ng-valid"
+                                        style="min-height: 44px; cursor: not-allowed;" readonly></div>
+                            </div>
+                        </div><!---->
+                    </div>
+                </div>
+                <!-- <lib-chip-dropdown [data]="approversList" [selectedData]="approver.value"
+                    (selectedList)="onApproveAdded($event)"></lib-chip-dropdown> -->
+            </div>
+            <div class="col-6 mb-5">
+                <label for="priority" class="form-label">Priority</label>
+                <input type="text" [formControl]="priorityType" class="form-control mt-1" style="cursor: not-allowed;" readonly>
+                <!-- <select [formControl]="priorityType" id="priority" class="form-select mb-5">
+                    <option value="high">High</option>
+                    <option value="medium">Medium</option>
+                    <option value="medium">Low</option>
+                </select> -->
+            </div>
+        </div>
+        <div class="col-12 mb-5">
+            <div class="toggle-card" [ngClass]="editRequestData.allowedStoreLocation ? 'selected' : ''">
+                <div class="form-check form-switch me-4">
+                    <input [(ngModel)]="editRequestData.allowedStoreLocation" [ngModelOptions]="{standalone: true}" class="form-check-input" type="checkbox" role="switch" [checked]="editRequestData.allowedStoreLocation">
+                </div>
+                <div>
+                    <div class="header">Geo fencing</div>
+                    <div class="desc">By enabling, the checklist can be filled by the user only when inside the
+                        store.</div>
+                </div>
+            </div>
+
+        </div>
+
+        <div class="col-12 mb-5">
+            <div class="toggle-card " [ngClass]="editRequestData.restrictAttendance ? 'selected' : ''">
+                <div class="form-check form-switch me-4">
+                    <input [(ngModel)]="editRequestData.restrictAttendance" [ngModelOptions]="{standalone: true}" class="form-check-input" type="checkbox" role="switch" [checked]="editRequestData.restrictAttendance">
+                </div>
+                <div>
+                    <div class="header">Restrict attendance</div>
+                    <div class="desc">By enabling, user can't be able to clockout without completing the task.
+                    </div>
+                </div>
+            </div>
+
+        </div>
+        <div class="row mt-8">
+            <div class="col-md-6">
+                <button (click)="closePopupAndReloadData()" type="button"
+                    class="btn-outline btn align-items-end text-nowrap invheader w-100"><span></span>
+                    Cancel </button>
+            </div>
+            <div class="col-md-6">
+                <a (click)="onSubmit()" type="button" tabindex="0"
+                    class="btn btn-primary ms-2 rounded-3 text-nowrap w-100 ng-star-inserted"><span
+                        class="ms-2 text-white">Update</span></a>
+            </div>
+        </div>
+
+    </div>
+
+</div>