@aggdirect/coolmap 2.9.6 → 2.9.8

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

@@ -0,0 +1,130 @@
+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

@@ -0,0 +1,48 @@
+<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

@@ -0,0 +1,24 @@
+.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

@@ -0,0 +1,143 @@
+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

@@ -0,0 +1,19 @@
+<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

@@ -0,0 +1,67 @@
+@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

@@ -0,0 +1,38 @@
+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

@@ -0,0 +1,56 @@
+<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

@@ -0,0 +1,168 @@
+@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;
+        }
+     }
+}