@aggdirect/coolmap 2.9.8 → 3.0.0

package/src/lib/component/nav/layout/add-route-nav/add-route-nav.component.ts

@@ -1,130 +0,0 @@
-import { Component, EventEmitter, Output, Input, SimpleChanges, OnDestroy, Inject } from '@angular/core';
-import { FormControl, FormGroup } from '@angular/forms';
-import { CoolmapConfigModel, CustomerRepoDetailsModel, Route, UtilsService } from '@aggdirect/coolmap-services';
-import { map, Observable, startWith } from 'rxjs';
-interface Filter {
-  name?: string;
-  type: string;
-  value: any;
-  label?: string;
-}
-import { Subject, takeUntil } from 'rxjs';
-
-@Component({
-  selector: 'app-add-route-nav',
-  templateUrl: './add-route-nav.component.html',
-  styleUrls: ['./add-route-nav.component.scss']
-})
-
-export class AddRouteNavComponent implements OnDestroy {
-  filterForm = new FormGroup({ search: new FormControl() });
-  filteredOptions!: Observable<any[]> | undefined;
-  filters: Filter[] = [];
-  loaderVal = false;
-  routes: Route[] = [];
-  @Output() public changeNav = new EventEmitter<string | any>();
-  @Input() public navValue: string = '';
-  @Output() public addemit = new EventEmitter();
-  @Input() public updateRouteList: boolean = false;
-  @Input() public customerRepoDetails!: CustomerRepoDetailsModel;
-
-  public destroyer$ = new Subject<boolean>();
-  preventListUpdate: boolean = false;
-  unitList: any;
-  materialsList: any;
-  constructor(public utils: UtilsService,
-    @Inject('memberData') private config: CoolmapConfigModel) {
-    this.filteredOptions = this.filterForm.get('search')?.valueChanges.pipe(startWith(''),
-      map(value => this.utils.filter(value, this.filters)));
-  }
-
-  showAddForm() { this.changeNav.emit('addForm'); this.addemit.emit('') }
-  filterSearch(e: any): void {
-    this.changeNav.emit({ type: 'Addroute' });
-    this.preventListUpdate = true;
-    this.filterForm.controls.search.setValue(null);
-    this.filters = [{ name: e.source.value.label, type: e.source.value.type, value: e.source.value }]
-  }
-  removeFromFilter(filter: any): void {
-    this.changeNav.emit({ type: 'Addroute' });
-    const index = this.filters.indexOf(filter);
-    if (index >= 0) { this.filters = [] }
-  }
-  ngAfterViewInit(): void {
-    this.checkAndCallRouteList();
-  }
-  ngOnChanges(changes: SimpleChanges) {
-    if (changes['updateRouteList'] && changes['updateRouteList']['currentValue']) this.checkAndCallRouteList();
-    if (changes['navValue'] && (changes['navValue']['previousValue'] === 'addForm') && !this.preventListUpdate) this.checkAndCallRouteList();
-  }
-  getRoute(event: Route) { if (event['type'] === 'editroute') { this.addemit.emit(event) } }
-
-  checkAndCallRouteList() {
-    if (this.config.repository === 'customer') {
-      this.utils.fetchUnitsList().then((res) => {
-        this.unitList = res;
-        this.utils.fetchMaterialsListForCustomer().then((res) => {
-          this.materialsList = res;
-          this.getRouteListForCustomer();
-        });
-      });
-    } else {
-      this.getRouteListForCoolMap()
-    }
-  }
-  getUnitName(data): string {
-    let unitName = '';
-    this.unitList.map((res) => {
-      if (res.id === data.unit_id) {
-        unitName = res.type
-      }
-    })
-    return unitName;
-  }
-
-  getMaterialName(data): string {
-    let materialName = '';
-    this.materialsList.map((res) => {      
-      if (res.sub_material_id === data.materials_id) {
-        materialName = res.label
-      }
-    })    
-    return materialName;
-  }
-
-  getRouteListForCoolMap() {
-    this.utils.getData('routes/all').pipe(takeUntil(this.destroyer$)).subscribe((res: any) => {
-      if (res) {
-        this.filters = [];
-        this.routes = res['data']
-        this.preventListUpdate = false;
-        this.utils.clearOptions();
-        this.routes.forEach((ele: Route) => { this.utils.makeOptions(ele) });
-      }
-    });
-  }
-
-  getRouteListForCustomer() {
-    const dataset = {
-      customer_id: this.customerRepoDetails.customer.id
-    }
-    this.utils.postdata('routes/all', dataset).pipe(takeUntil(this.destroyer$)).subscribe((res: any) => {
-      if (res) {
-        this.filters = [];
-        this.routes = res['data']
-        this.preventListUpdate = false;
-        this.utils.clearOptions();
-        this.routes.map((ele: Route) => {
-          ele.unit = this.getUnitName(ele);
-          ele.material = this.getMaterialName(ele).split('|')[0].trim();
-          this.utils.makeOptions(ele)
-        });
-      }
-    });
-  }
-  resetSearch() { this.changeNav.emit('Addroute') }
-  ngOnDestroy(): void {
-    this.destroyer$.next(true);
-    this.destroyer$.unsubscribe();
-  }
-}

package/src/lib/component/nav/layout/job-code-nav/job-code-nav.component.html

@@ -1,48 +0,0 @@
-<div class="nav_body">
-  <div class="search-panel">
-    <div class="datepicker">
-      <mat-form-field>
-        <mat-label>Choose a date</mat-label>
-        <input readonly matInput (click)="picker.open()" [disabled]="loaderVal"  [(ngModel)]="dateValue" [matDatepicker]="picker" (dateChange)="getDate($event)">
-        <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
-        <mat-datepicker #picker></mat-datepicker>
-      </mat-form-field>
-    </div>
-    <div class="search">
-    <form [formGroup]="filterForm">
-      <mat-form-field class="full-width" [class.disabled]="loaderVal">
-        <input matInput [matChipInputFor]="chipList" formControlName="search" [matAutocomplete]="auto"
-          [disabled]="loaderVal" placeholder="Search">
-          <mat-icon matSuffix *ngIf="!utils.conveySearchIcon(filterForm.value.search)">search</mat-icon>
-          <button
-            matSuffix 
-            mat-icon-button 
-            aria-label="Clear" 
-            *ngIf="utils.conveySearchIcon(filterForm.value.search)" (click)="filterForm.reset()">
-            <mat-icon>close</mat-icon>
-          </button>
-        <mat-autocomplete autoActiveFirstOption #auto="matAutocomplete" class="whole_width">
-          <mat-option *ngFor="let option of filteredOptions | async" (onSelectionChange)="filterSearch($event)"
-            [value]="option">
-            {{option.type | titlecase }}: {{option['label']}}
-          </mat-option>
-        </mat-autocomplete>
-      </mat-form-field>
-    </form>
-    </div>
-
-    <div class="chip-list">
-      <mat-chip-grid #chipList aria-label="Filter selection">
-        @for (filter of filters; track filter) {
-          <mat-chip-row class="chip-grid" (removed)="removeFromFilter(filter)">
-            {{filter.type | titlecase }}: {{filter.name}}
-            <button matChipRemove>
-              <mat-icon>cancel</mat-icon>
-            </button>
-          </mat-chip-row>
-        }
-      </mat-chip-grid>
-    </div>
-  </div>
-  <app-route-jobcode-list [type]="'jobcode'" [searchTerm]="filters" [data]="listData" [loader]="loaderVal" (clearJobDetailsFromList)="clearJobDetails.emit(true)" (showAllRoute)="filters = []; clearJobDetails.emit(true)" (emitroute)="getRoute($event)"></app-route-jobcode-list>
-</div>

package/src/lib/component/nav/layout/job-code-nav/job-code-nav.component.scss

@@ -1,24 +0,0 @@
-.search-panel{
-    .datepicker, .search{
-        width: 47%;
-    }
-}
-
-.chip-grid {
-    width: auto;
-    height: auto;
-}
-
-// :host ::ng-deep .mdc-evolution-chip-set__chips {
-//     max-width: 100%;
-//   }
-  
-//   :host ::ng-deep .mat-mdc-standard-chip .mdc-evolution-chip__cell--primary,
-//   :host ::ng-deep .mat-mdc-standard-chip .mdc-evolution-chip__action--primary,
-//   :host ::ng-deep .mat-mdc-standard-chip .mat-mdc-chip-action-label {
-//     overflow: hidden;
-//   }
-
-//   :host ::ng-deep .mat-mdc-standard-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing {
-//     padding: auto;
-//   }

package/src/lib/component/nav/layout/job-code-nav/job-code-nav.component.ts

@@ -1,143 +0,0 @@
-import {
-  Component,
-  EventEmitter,
-  Output,
-  OnDestroy,
-  Inject,
-  Input,
-  OnChanges,
-  SimpleChanges,
-} from '@angular/core';
-import { MatDatepickerInputEvent } from '@angular/material/datepicker';
-import { map, Observable, startWith } from 'rxjs';
-import { FormControl, FormGroup } from '@angular/forms';
-interface Filter {
-  name?: string;
-  type: string;
-  value: any;
-  label?: string;
-}
-import { Subject, takeUntil } from 'rxjs';
-import {
-  CoolmapConfigModel,
-  CustomerRepoDetailsModel,
-  Route,
-  UtilsService,
-} from '@aggdirect/coolmap-services';
-
-@Component({
-  selector: 'app-job-code-nav',
-  templateUrl: './job-code-nav.component.html',
-  styleUrls: ['./job-code-nav.component.scss'],
-})
-export class JobCodeNavComponent implements OnDestroy, OnChanges {
-  filterForm = new FormGroup({ search: new FormControl() });
-  listData: Route[] = [];
-  loaderVal: boolean = false;
-  dateValue = new Date();
-  @Output() public jobemit = new EventEmitter();
-  value = '';
-  filteredOptions!: Observable<any[]> | undefined;
-  filters: Filter[] = [];
-  @Output() public clearJobDetails = new EventEmitter();
-  public destroyer$ = new Subject<boolean>();
-  @Input() public customerRepoDetails!: CustomerRepoDetailsModel;
-  selectedDate: string;
-
-  constructor(
-    public utils: UtilsService,
-    @Inject('memberData') private config: CoolmapConfigModel
-  ) {
-    this.selectedDate = this.utils.getDateFormat(new Date());
-    utils.navChangeObserve.pipe(takeUntil(this.destroyer$)).subscribe((res) => {
-      if (res) {
-        this.loaderVal = false;
-      } else this.loaderVal = true;
-    });
-  }
-  ngOnChanges(changes: SimpleChanges): void {
-    if (
-      changes['customerRepoDetails'] &&
-      changes['customerRepoDetails']['currentValue']
-    ) {
-      this.loadData(this.selectedDate);
-      this.filters = [];
-      this.utils.clearViewRouteforJobCode.next(true);
-    }
-  }
-  loadData(value: string) {
-    this.selectedDate = value;
-    this.filteredOptions = this.filterForm.get('search')?.valueChanges.pipe(
-      startWith(''),
-      map((value) => this.utils.filter(value, this.filters))
-    );
-    this.utils.preventnavChange.next(false);
-    this.loaderVal = true;
-    let dataSet;
-    if (this.config.repository === 'customer') {
-      dataSet = {
-        date: value,
-        customer_id: this.customerRepoDetails.customer.id,
-        project_id: this.customerRepoDetails.projectId,
-      };
-    } else {
-      dataSet = { date: value };
-    }
-    this.utils
-      .postdata('jobs_report_v2', dataSet)
-      .pipe(takeUntil(this.destroyer$))
-      .subscribe(
-        (res: any) => {
-          if (typeof res['data'] !== 'string') {
-            if (res['data'].length > 0) {
-              this.listData = res['data'].map((ele: Route) => {
-                ele['date'] = value;
-                return ele;
-              });
-            }
-          this.listData.forEach((ele: Route) => {
-            this.utils.makeOptions(ele);
-          });
-          } else this.listData = [];
-          this.clearJobDetails.emit(true);
-          this.utils.clearViewRouteforJobCode.next(true);
-          this.filters = [];
-          if (typeof res['data'] === 'string') this.utils.preventnavChange.next(true);
-        },
-        (err) => {
-          if (err) this.utils.preventnavChange.next(true);
-        }
-      );
-  }
-
-  getRoute(job: Route) {
-    if (job['type'] === 'jobcode') {
-      this.jobemit.emit(job);
-    }
-  }
-  getDate(ev: MatDatepickerInputEvent<Date>) {
-    this.loadData(this.utils.getDateFormat(ev.value));
-  }
-
-  filterSearch(e: any): void {
-    this.filterForm.controls.search.setValue(null);
-    this.filterForm.controls.search.updateValueAndValidity();
-    this.filters = [
-      {
-        name: e.source.value.label,
-        type: e.source.value.type,
-        value: e.source.value,
-      },
-    ];
-  }
-  removeFromFilter(filter: any): void {
-    const index = this.filters.indexOf(filter);
-    if (index >= 0) {
-      this.filters = [];
-    }
-  }
-  ngOnDestroy(): void {
-    this.destroyer$.next(true);
-    this.destroyer$.unsubscribe();
-  }
-}

package/src/lib/component/nav/nav.component.html

@@ -1,19 +0,0 @@
-<div class="nav">
-  <button (click)="openDrawer()" class="toggle">
-    <img src="assets/images/toggle.svg" alt="" />
-  </button>
-
-  <ul class="m-100">
-    <li [ngClass]="{'active': navValue === 'Jobcode'}">
-      <a mat-raised-button #tooltip="matTooltip" matTooltip="Job Code" aria-label="Job-code" (click)="chnageNav('Jobcode')">
-        <img src="assets/images/job-code.svg" alt="" />
-      </a>
-    </li>
-
-    <li [ngClass]="{'active': navValue === 'Addroute', 'disabled': !isnavChange }">
-      <a mat-raised-button #tooltip="matTooltip" matTooltip="View Route" aria-label="View-route" (click)="chnageNav('Addroute')">
-        <img src="assets/images/route.svg" alt="" />
-      </a>
-    </li>
-  </ul>
-</div>

package/src/lib/component/nav/nav.component.scss

@@ -1,67 +0,0 @@
-@import "../../../assets/variable.scss";
-
-.nav {
-  background: $grey;
-  height: 100vh;
-  padding: 15px 0;
-  display: flex;
-  @include align-center;
-  flex-direction: column;
-  button {
-    background: $white;
-    border-radius: 15px;
-    padding: 5px 6px;
-    img {
-      width: 28px;
-    }
-  }
-  ul {
-    display: flex;
-    flex-direction: column;
-    @include align-center;
-    li {
-      margin: 10px 0px;
-      padding: 0 5px 0 5px;
-      border-right: 2px solid $grey;
-      &:hover {
-        border-right: 2px solid $blue;
-        padding: 0 5px 0 5px;
-      }
-      &.disabled{
-        a{
-          pointer-events: none;
-          opacity: 0.5;
-        }
-        &:hover{
-          border-right: 2px solid $grey;
-        }
-
-      }
-      a {
-        padding: 0!important;
-        display: flex;
-        border-radius: 15px;
-        min-width: 42px;
-        box-shadow: none;
-        align-items: center;
-        height: 42px;
-        line-height: 10px;
-        img {
-          width: 27px;
-        }
-        &:hover {
-          background: $white;
-          img {
-            filter: invert(0.2) sepia(1) saturate(8) hue-rotate(180deg);
-          }
-        }
-      }
-    &.active {
-        border-right: 2px solid $blue;
-        a {
-          background: $white;
-        }
-      }
-    }
-  }
-}

package/src/lib/component/nav/nav.component.ts

@@ -1,38 +0,0 @@
-import { Component, EventEmitter, Output, OnDestroy } from '@angular/core';
-import { CoolmapService, UtilsService } from '@aggdirect/coolmap-services';
-import { Subject, takeUntil } from 'rxjs';
-
-@Component({
-  selector: 'app-nav',
-  templateUrl: './nav.component.html',
-  styleUrls: ['./nav.component.scss']
-})
-export class NavComponent implements OnDestroy {
-  @Output() public drawer = new EventEmitter<boolean>();
-  @Output() public changeNav = new EventEmitter<string>();
-  navValue: string = 'Jobcode';
-  isnavChange: boolean = true;
-  paddinForJobCode = { top: 0, bottom: 250, left: 500, right: 400 };
-  paddinForViewRoute = { top: 0, bottom: 400, left: 400, right: 0 };
-  public destroyer$ = new Subject<boolean>();
-
-  constructor(public utils: UtilsService, public coolMap: CoolmapService) {
-    this.utils.navChangeObserve.pipe(takeUntil(this.destroyer$)).subscribe(res => { this.isnavChange = res })
-    this.coolMap.setPadding(this.paddinForJobCode);
-  }
-
-  openDrawer() { this.drawer.emit(true) }
-  chnageNav(name: string): void {
-    if (this.isnavChange) {
-      this.changeNav.emit(name); this.navValue = name; this.coolMap.clearBound();
-      if (name === 'Addroute') { this.coolMap.setPadding(this.paddinForViewRoute) }
-      else { this.coolMap.setPadding(this.paddinForJobCode) }
-      this.utils.clearOptions();
-    }
-  }
-
-  ngOnDestroy(): void {
-    this.destroyer$.next(true);
-    this.destroyer$.unsubscribe();
-  }
-}

package/src/lib/component/route-jobcode-list/job-code-list-card/job-code-list-card.component.html

@@ -1,56 +0,0 @@
-<div class="innerbox">
-  <div class="inputarea">
-    <input type="checkbox" name="selectroute" [checked]="route['isSelected']" (change)="$event ? selectRoute(route) : null" />
-    <label>&nbsp;</label>
-    <div class="border"></div>
-  </div>
-  <div class="job_intro">
-    <div class="heading">
-      <h2>
-        {{route['order_number'] ? route['order_number'] : ''}}
-      </h2>
-      |
-      <span>
-        {{route['customer_name']}}
-      </span>
-      |
-      <span>
-        {{route['project']}}
-      </span>
-    </div>
-    <div class="destinationprt">
-      <span style="padding-left: 0;">
-        {{route['pickup_location']}}
-      </span>
-      <b>></b>
-      <span>
-        {{route['delivery_location']}}
-      </span>
-    </div>
-    <div class="mat_cat">
-      <span>
-        {{route['material']}}
-      </span>
-    </div>
-
-    <div class="statusbar">
-      <div class="status_percent">
-        <span class="done" [style]="'width:'+calculateStatusPercentage('done',route['values'])+'%'"></span>
-        <span class="ongoing" [style]="'width:'+calculateStatusPercentage('ongoing', route['values'])+'%'"> </span>
-        <span class="open" [style]="'width:'+calculateStatusPercentage('open', route['values'])+'%'"> </span>
-      </div>
-    </div>
-  </div>
-  <div class="statusarea">
-    <div class="statusunit" [ngClass]="route['unit']">{{route['unit']}}</div>
-    <div class="driver_icon" *ngIf="config.repository !== 'customer'" (mouseover)="toggleDriverlist(true, route)" (mouseout)="toggleDriverlist(false, route, true)"
-      mat-raised-button #tooltip="matTooltip" matTooltip="Click on icon to show the driver list" matTooltipPosition="above"
-      (click)="toggleDriverlist('click', route)">
-      <img src="assets/images/driver_icon.png" [alt]="" />
-    </div>
-    <div class="infoicon" (click)="setRouteItem()" (mouseover)="toggleJobCodeDetails(true, route)"
-      (mouseout)="toggleJobCodeDetails(false, route)">
-      <img src="assets/images/info_icon.png" [alt]="" />
-    </div>
-  </div>
-</div>

package/src/lib/component/route-jobcode-list/job-code-list-card/job-code-list-card.component.scss

@@ -1,168 +0,0 @@
-@import "../../../../assets/variable.scss";
-.innerbox{
-    display: flex;
-    justify-content: space-between;
-    .inputarea {
-        display: flex;
-        align-items: center;
-        input[type="checkbox"] {
-          width: 100%;
-          height: 100%;
-          margin-right: 10px;
-          opacity: 0;
-          position: absolute;
-          left: 0px;
-          margin-left: 0;
-          top: 0;
-          z-index: 3;
-          cursor: pointer;
-          &:checked+label {
-            // TODO: Fix
-            // background: url("../../../../../assets/images/fill-radio.png") 10px 11px no-repeat;
-          }
-        }
-        label {
-          // TODO: Fix
-          // background: url("../../../../../assets/images/blank-radio.png") 10px 11px no-repeat;
-          width: 100%;
-          position: relative;
-          z-index: 2;
-          font-size: 12px;
-          color: #878787;
-          height: 100%;
-          position: absolute;
-          top: 0px;
-          left: 0;
-        }
-        .border {
-          position: absolute;
-          width: 100%;
-          height: 100%;
-          left: 0px;
-          right: 0;
-          top: -1px;
-          border-radius: 15px;
-        }
-        input {
-          &:checked~.border {
-            border-left: 3px solid $green;
-            border-right: 1px solid $green;
-            border-top: 1px solid $green;
-            border-bottom: 1px solid $green;
-          }
-        }
-        h2 {
-          margin-left: 10px;
-          white-space: nowrap;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          max-width: 214px;
-          padding-left: 16px;
-          margin-bottom: 5px;
-          margin-top: 0;
-        }
-      }
-      .job_intro{
-        width: 90%;
-        .heading{
-            display: flex;
-            font-size: 0.8rem;
-            h2{
-                margin: 0 4px 0 0;
-                font-size: 0.8rem;
-            }
-            span{
-                white-space: nowrap;
-                overflow: hidden;
-                text-overflow: ellipsis;
-                width: 100px;
-                padding: 0 3px;
-                display: block;
-            }
-        }
-        .destinationprt{
-            display: flex;
-            margin-top: 10px;
-            font-size: 0.8rem;
-            span{
-                white-space: nowrap;
-                overflow: hidden;
-                text-overflow: ellipsis;
-                width: 132px;
-                padding: 0 5px;
-                display: block;
-            }
-        }
-        .mat_cat{
-            margin-top: 10px;
-            font-size: 0.8rem;
-        }
-        .statusbar{
-            width: 100%;
-            position: relative;
-            height: 5px;
-            margin-top: 10px;
-            .status_percent{
-                position: absolute;
-                left: 0;
-                display: flex;
-                width: 100%;
-                height: 100%;
-                span{
-                    display: block;
-                }
-                .done{
-                    background: #008000;
-                }
-                .ongoing{
-                    background: #ffcc00;
-                }
-                .open{
-                    background: #bfbfbf;
-                }
-            }
-        }
-     }
-    .statusarea{
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        width: 10%;
-        .statusunit{
-            border-radius: 30px;
-            font-size: 0;
-            color: $white;
-            text-transform: capitalize;
-            font-weight: 500;
-            width: 20px;
-            height: 20px;
-            text-align: center;
-            line-height: 20px;
-            &::first-letter{
-              font-size: 0.8rem;
-            }
-            &.routestatus{
-            right: 10px;
-            }
-            &.Ton {
-            background: $green;
-            }
-            &.Load {
-            background: $blue;
-            }
-            &.Hourly {
-            background: $orenge;
-            }
-        }
-        .driver_icon, .infoicon{
-            z-index: 9999;
-           img{
-            width: 20px;
-            height: 20px;
-           }
-        }
-        .driver_icon{
-            margin: 5px 0;
-        }
-     }
-}