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

package/src/lib/components/orders/orders.component.ts

@@ -0,0 +1,197 @@
+import { Component, OnInit } from '@angular/core';
+import { TraxService } from '../../services/trax.service';
+import { BehaviorSubject} from "rxjs";
+import dayjs from "dayjs";
+import utc from 'dayjs/plugin/utc';
+import { ToastService } from 'tango-app-ui-shared';
+import { PageInfoService } from 'tango-app-ui-global';
+dayjs.extend(utc);
+
+@Component({
+  selector: 'lib-orders',
+  templateUrl: './orders.component.html',
+  styleUrls: ['./orders.component.scss']
+})
+export class OrdersComponent implements OnInit {
+
+  dayjs = dayjs
+  displayedColumns: string[] = [];
+  date: string = this.dayjs().add(1, 'day').format()
+  dataSource: any[] = [];
+  storeCodes: string = ''
+  isAuthorized: 'AUTHORIZED' | 'UNAUTHORIZED' = 'UNAUTHORIZED'
+  isCustomDate = (m: dayjs.Dayjs) => {
+    const isValidDate = m > this.dayjs().add(3, 'day') || m < this.dayjs();
+    return isValidDate ? 'invalid-date' : false;
+  }
+  selectedDateRange:any = {startDate:this.dayjs().add(1, 'day'), endDate:this.dayjs().add(1, 'day')} 
+  tableApiState = new BehaviorSubject<'initial' | 'loading' | 'loaded'>('initial')
+
+
+
+  constructor(private sopService: TraxService, private toastService:ToastService, private pageInfo:PageInfoService) { }
+
+
+  ngOnInit(): void {
+    this.sopService.isLocusAuthorized().subscribe((res:any)=>{
+      this.isAuthorized = res.message || 'UNAUTHORIZED'
+      if(this.isAuthorized === 'AUTHORIZED'){
+        this.setPageData()
+        this.getOrdersByDate()
+      }
+    })
+
+  }
+
+  setPageData() {
+    this.pageInfo.setTitle("Create Order");
+    this.pageInfo.setDescription("Create order ID list to map with Locus");
+    this.pageInfo.setBreadcrumbs([
+      { title: "Analyze", path: "/manage/trax/dashboard", isActive: false, isSeparator: false },
+      { title: "Analyze", path: "/manage/trax/dashboard", isActive: false, isSeparator: true },
+      { title: "Tango Trax", path: "/manage/trax/dashboard", isActive: false, isSeparator: false },
+      { title: "Tango Trax", path: "/manage/trax/dashboard", isActive: false, isSeparator: true },
+    ]);
+
+  }
+
+  getOrdersByDate() {
+    this.tableApiState.next('loading')
+    const reqBody = {
+      date: this.date
+    }
+
+    this.sopService.getOrdersByDate(reqBody).subscribe({
+      next: (res:any) => {
+        this.tableApiState.next('loaded')
+        if (res?.data?.length) {
+          this.dataSource = res?.data          
+        } else {
+          this.dataSource = []
+        }
+      },
+
+      error:()=>{
+        
+      }
+
+    },
+  )
+  }
+
+  onDateChange(event: any) {
+    if (!event?.startDate) {
+      return
+    }
+
+    this.date = this.dayjs(event.startDate).format()
+    this.storeCodes = ''
+    this.getOrdersByDate()
+  }
+
+  updateOrder() {
+
+    const reqBody = {
+      storeCodes: this.storeCodes,
+      date: this.date
+    }
+
+    this.sopService.orderUpdate(reqBody).subscribe({
+      next: (res:any) => {
+        if (res?.code === 200) {
+          this.storeCodes = ''
+          if (res.message === 'Updated successfully') {
+            this.toastService.getSuccessToast(res.message)
+          } else {
+            this.toastService.getErrorToast(res.message)
+          }
+
+          this.getOrdersByDate()
+        }
+      }
+    })
+
+  }
+
+  deleteOrder(id: string) {
+
+    const reqBody = {
+      _id: id
+    }
+
+    this.sopService.orderDelete(reqBody).subscribe({
+      next: (res:any) => {
+        if (res?.code === 200) {
+          this.toastService.getSuccessToast(res.message)
+          this.getOrdersByDate()
+        }
+      }
+    })
+
+  }
+
+  sortTableData(event: any) {
+    if (event?.direction === 'asc' || 'desc') {
+      this.dataSource = this.sortObjectArray([...this.dataSource], event);
+    }
+
+
+  }
+
+  sortObjectArray(dataArray: any[], sortConfig: { active: string, direction: 'asc' | 'desc' | '' }) {
+    const { active, direction } = sortConfig;
+    const sortOrder = direction.toLowerCase() === 'asc' ? 1 : -1;
+
+    return dataArray.sort((a, b) => {
+      const valueA = (a[active] || '').toString().toLowerCase();
+      const valueB = (b[active] || '').toString().toLowerCase();
+
+      if (valueA < valueB) {
+        return -1 * sortOrder;
+      } else if (valueA > valueB) {
+        return 1 * sortOrder;
+      } else {
+        return 0;
+      }
+    });
+  }
+
+  exportAsExcel() {
+    const excludeKeys = ['createdAt', 'updatedAt', '_id', 'date', 'type'];
+    const excludedData = this.removeExcludedKeys(this.dataSource, excludeKeys)
+    const exportData = this.replaceUnderscoreInKeys(excludedData)
+
+    this.sopService.exportAsCSVFile(
+      exportData,
+      `${this.dayjs(this.date).format('DD_MM_YYYY')}_List`
+    );
+
+  }
+
+  removeExcludedKeys(dataArray: any[], excludeKeys: string[]) {
+    return dataArray.map(item => {
+      const newItem: any = {};
+
+      for (const key in item) {
+        if (item.hasOwnProperty(key) && !excludeKeys.includes(key)) {
+          newItem[key] = item[key];
+        }
+      }
+
+      return newItem;
+    });
+  }
+
+  replaceUnderscoreInKeys(dataArray: any[]) {
+    return dataArray.map(item => {
+      const newItem: any = {};
+      for (const key in item) {
+        if (item.hasOwnProperty(key)) {
+          const newKey = key.replace(/_/g, ' ');
+          newItem[newKey] = item[key];
+        }
+      }
+      return newItem;
+    });
+  }
+}

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

@@ -0,0 +1,28 @@
+<nav>
+    <ul class="pagination justify-content-center">
+      <!-- Previous Button -->
+      <li class="page-item" [class.disabled]="currentPage === 1">
+        <a class="page-link" (click)="selectPage(currentPage - 1)" aria-label="Previous">
+          <span aria-hidden="true">&laquo;</span>
+        </a>
+      </li>
+  
+      <!-- Page Numbers with Ellipses -->
+      <li *ngFor="let page of visiblePages" class="page-item" 
+          [class.active]="page === currentPage" 
+          [class.disabled]="page === '...'">
+        <a class="page-link" *ngIf="page !== '...'; else ellipsis" (click)="selectPage(page)">
+          {{ page }}
+        </a>
+        <ng-template #ellipsis><span class="page-link">...</span></ng-template>
+      </li>
+  
+      <!-- Next Button -->
+      <li class="page-item" [class.disabled]="currentPage === totalPages">
+        <a class="page-link" (click)="selectPage(currentPage + 1)" aria-label="Next">
+          <span aria-hidden="true">&raquo;</span>
+        </a>
+      </li>
+    </ul>
+  </nav>
+  

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

@@ -0,0 +1,6 @@
+.page-link {
+    cursor: pointer;
+  }
+  .page-item.disabled .page-link {
+    cursor: not-allowed;
+  }

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

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

package/src/lib/components/pagination/pagination.component.ts

@@ -0,0 +1,54 @@
+import { Component, Input, Output, EventEmitter, OnInit, OnChanges } from '@angular/core';
+
+@Component({
+  selector: 'lib-pagination-v2',
+  templateUrl: './pagination.component.html',
+  styleUrl: './pagination.component.scss'
+})
+
+export class PaginationComponent implements OnChanges {
+  @Input() totalItems: number = 0; // Total number of items
+  @Input() itemsPerPage: number = 10; // Items per page
+  @Input() currentPage: number = 1; // Current active page
+  @Output() pageChanged: EventEmitter<number> = new EventEmitter<number>(); // Emit page change
+
+  totalPages: number = 0; // Total number of pages
+  maxVisiblePages = 5; // Number of visible pages at once
+  visiblePages: any[] = []; // Pages to display in the pagination component
+
+  ngOnChanges(): void {
+    this.totalPages = Math.ceil(this.totalItems / this.itemsPerPage);
+    this.visiblePages = this.getVisiblePages();
+  }
+
+  selectPage(page: number) {
+    if (page >= 1 && page <= this.totalPages) {
+      this.pageChanged.emit(page); // Emit the selected page to the parent component
+    }
+  }
+
+  // Pagination logic with ellipses
+  getVisiblePages(): any[] {
+    const pages = [];
+    const maxVisible = this.maxVisiblePages;
+
+    if (this.totalPages <= maxVisible) {
+      // If total pages are less than or equal to max visible, show all pages
+      for (let i = 1; i <= this.totalPages; i++) {
+        pages.push(i);
+      }
+    } else {
+      if (this.currentPage <= 2) {
+        // Near the start
+        pages.push(1, 2, 3, '...', this.totalPages);
+      } else if (this.currentPage >= this.totalPages - 1) {
+        // Near the end
+        pages.push(1, '...', this.totalPages - 2, this.totalPages - 1, this.totalPages);
+      } else {
+        // Middle pages with ellipses
+        pages.push(1, '...', this.currentPage - 1, this.currentPage, this.currentPage + 1, '...', this.totalPages);
+      }
+    }
+    return pages;
+  }
+}

package/src/lib/components/reactive-select/reactive-select.component.html

@@ -0,0 +1,18 @@
+<div class="custom-select">
+    <div class="form-group">
+        <label *ngIf="label" class="form-label">{{label}}</label>
+        <div class="position-relative">
+            <div (click)="openDropdown()" [ngClass]="isDisabled ? 'disable' : ''" class="form-select dropselect ellipse1">
+                {{selected?.[nameField]}}</div>
+            <div *ngIf="isOpened" class="card py-2 w-100 position-absolute end-0 z-1 drop-list">
+                <ul class="list-unstyled mb-2">
+                    <li *ngFor="let item of data" (click)="onSelect(item)"
+                        [ngClass]="item?.[idField] === selected?.[idField] ? 'active' : ''"
+                        class="text px-5 items cursor-pointer py-4 ">
+                        {{item?.[nameField]}}
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </div>
+</div>

package/src/lib/components/reactive-select/reactive-select.component.scss

@@ -0,0 +1,48 @@
+.custom-select {
+    min-width: 200px;
+    .items:hover,
+    .tems.focus,
+    .items.active,
+    .camera.focus-visible {
+        background: var(--Gray-50, #F9FAFB);
+    }
+
+    .drop-list{
+        max-height: 300px;
+        overflow-y: scroll;
+    }
+
+    .dropselect {
+        color: var(--Gray-500, #667085);
+        font-family: 'Inter';
+        font-size: 16px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 24px;
+        /* 150% */
+        height: 45px !important;
+        cursor: default;
+        white-space: nowrap;
+        overflow: hidden;
+    }
+
+    .text {
+        color: var(--Gray-700, #344054);
+        font-size: 14px;
+        font-weight: 500;
+        line-height: 20px;
+    }
+
+    .disable{
+        pointer-events: none;
+        background-color: #F9FAFB !important;
+    }
+}
+
+.ellipse1{
+    min-width:auto;
+    max-width:100%;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}

package/src/lib/components/reactive-select/reactive-select.component.spec.ts

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

package/src/lib/components/reactive-select/reactive-select.component.ts

@@ -0,0 +1,104 @@
+import { ChangeDetectorRef, Component, EventEmitter, HostListener, Input, OnInit, Output, Provider, forwardRef } from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { TraxService } from '../../services/trax.service';
+
+const SELECT_CONTROL_VALUE_ACCESSOR: Provider = {
+  provide: NG_VALUE_ACCESSOR,
+  useExisting: forwardRef(() => ReactiveSelectComponent),
+  multi: true,
+};
+
+@Component({
+  selector: 'lib-reactive-select',
+  templateUrl: './reactive-select.component.html',
+  styleUrl: './reactive-select.component.scss',
+  providers: [SELECT_CONTROL_VALUE_ACCESSOR]
+})
+export class ReactiveSelectComponent implements ControlValueAccessor, OnInit {
+
+  private onTouched: Function;
+  private onChanged: Function;
+  @Input() isDisabled: boolean;
+  @Input() idField: string
+  @Input() nameField: string
+  @Input() label: string
+  @Input() data: any
+  @Output() itemChange = new EventEmitter()
+  protected isOpened: boolean = false
+  protected selected: Record<string, any> | null = null
+  protected selectedId: string | number
+  instanceId: string;
+
+
+  constructor(private apiService: TraxService, private cd: ChangeDetectorRef) {
+
+  }
+
+  ngOnInit(): void {
+    this.instanceId = crypto.randomUUID();
+    this.apiService.dropDownTrigger.subscribe((e) => {
+      if (e !== this.instanceId) {
+        this.isOpened = false
+        this.cd.detectChanges()
+      }
+    })
+  }
+
+
+  writeValue(val: string | number): void {
+    this.selectedId = val
+    this.selected = this.data.filter((item: Record<string, any>) => item?.[this.idField] === val)[0]
+    
+  }
+  registerOnChange(fn: any): void {
+    this.onChanged = fn
+    
+  }
+  registerOnTouched(fn: any): void {
+    this.onTouched = fn
+  }
+  setDisabledState?(isDisabled: boolean): void {
+    this.isDisabled = isDisabled
+
+  }
+
+  onSelect(item: Record<string, any>) {
+    this.onTouched()
+    this.selected = item
+    this.selectedId = item?.[this.idField]
+    this.isOpened = false
+    this.itemChange.next(this.selectedId)
+    this.onChanged(this.selectedId)
+  }
+
+  @HostListener('document:click', ['$event'])
+  onClick(event: MouseEvent) {
+    // console.log(this.isDisabled)
+    if (!this.isDisabled) {
+      const targetElement = event.target as HTMLElement;
+      if (!this.isComponentClicked(targetElement)) {
+        this.isOpened = false;
+      }
+    }
+  }
+
+  isComponentClicked(targetElement: HTMLElement): boolean {
+    const parentElement = targetElement.parentElement;
+    if (parentElement) {
+      const clickedOnComponent = parentElement.classList.contains('custom-select');
+      if (clickedOnComponent) {
+        return true;
+      } else {
+        return this.isComponentClicked(parentElement);
+      }
+    }
+    return false;
+  }
+
+  openDropdown(){
+    this.isOpened = !this.isOpened;
+    this.apiService.dropDownTrigger.next(this.instanceId)
+  }
+
+
+}

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

@@ -0,0 +1,54 @@
+<!-- <div class="p-4 d-flex justify-content-center"  >
+<ngx-daterangepicker-material [isCustomDate]="isCustomDate">
+</ngx-daterangepicker-material>    
+</div> -->
+
+<div class="d-flex flex-column justify-content-between h-100" >
+<div>
+    <div class="header mb-5" >Export as {{fileType}}</div>
+
+    <!-- <div class="d-flex align-items-center position-relative ">
+        <span class="svg-icon svg-icon-1 position-absolute ms-3">
+            <svg 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" />
+            </svg>
+        </span>
+        <input class="fx-date-range form-control ps-14" style="min-width: 100px !important;"
+    type="text" matInput ngxDaterangepickerMd  [drops]="'down'"
+    [opens]="'right'" [alwaysShowCalendars]="true" [keepCalendarOpeningWithRange]="true"
+    [showCancel]="false" autocomplete="off" [(ngModel)]="selectedDateRange"
+    [ngModelOptions]="{standalone: true}" 
+    [isCustomDate]="isCustomDate" [autoApply]="true"
+    [locale]="{ format: 'DD-MM-YYYY', firstDay: 1, monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] }"
+     name="daterange" [readonly]="true" (startDateChanged)="onDateChange($event)" (datesUpdated)="onDateUpdated($event)" /> 
+    </div>  -->
+    <ngx-daterangepicker-material [drops]="'down'"
+     [opens]="'right'" [alwaysShowCalendars]="true" [keepCalendarOpeningWithRange]="true"
+     [showCancel]="false" autocomplete="off" 
+     [isCustomDate]="isCustomDate" [autoApply]="true"
+     [locale]="{ format: 'DD-MM-YYYY', firstDay: 1, monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] }"
+      name="daterange"  (startDateChanged)="onDateChange($event)" (datesUpdated)="onDateUpdated($event)">
+    </ngx-daterangepicker-material>
+    <div *ngIf="fileType === 'csv'" class="text-muted mb-5" >Only one month data can be downloaded</div>
+    <div *ngIf="fileType === 'pdf'" class="text-muted mb-5" >Only three days data can be downloaded</div>
+
+</div>
+
+<div class="row">
+    <div class="col-6" >
+        <button (click)="activeModal.close()"  class="btn btn-outline w-100">Cancel</button>
+    </div>
+
+    <div class="col-6">
+        <button (click)="onSubmit()" [disabled]="!outputVal.startDate || !outputVal.endDate"  class="btn btn-primary w-100">Download</button>
+    </div>
+
+</div>
+ 
+</div>
+
+
+
+