@aggdirect/coolmap 2.6.7 → 2.6.8

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

@@ -0,0 +1,295 @@
+import { Component, ElementRef, OnInit, ViewChild, Output, EventEmitter, SimpleChanges, OnChanges, Input, OnDestroy, Inject } from '@angular/core';
+import { FormControl, FormGroup, Validators } from '@angular/forms';
+import { debounceTime, distinctUntilChanged, fromEvent, map, Observable, startWith, Subject, takeUntil } from 'rxjs';
+import { MatDialog } from '@angular/material/dialog';
+import { DialogComponent } from '../shared/dialog/dialog.component';
+import { CoolmapConfigModel, CoolmapService, CustomerRepoDetailsModel, Route, UtilsService } from '@aggdirect/coolmap-services';
+
+
+
+@Component({
+  selector: 'app-add-route',
+  templateUrl: './add-route.component.html',
+  styleUrls: ['./add-route.component.scss']
+})
+export class AddRouteComponent implements OnInit, OnChanges, OnDestroy {
+  @ViewChild('filterPickup') public filterPickup!: ElementRef;
+  @ViewChild('filterDelivery') public filterDelivery!: ElementRef;
+  @Output() public changeNav = new EventEmitter<string>();
+  @Output() public updateRouteList = new EventEmitter<boolean>();
+  pickupOptions: any = [];
+  deliveryOptions: any = [];
+  requestParmsForRouteDetails = { pickup_lat_lng: '', delivery_lat_lng: '' }
+  customersList: any = [];
+  unitsList: any = [];
+  materialsList: any = [];
+  addRouteForm!: FormGroup;
+  @Input() public routeData!: Route;
+  @Input() public customerRepoDetails!: CustomerRepoDetailsModel;
+  routeId: string | null | undefined;
+  preventSave: boolean = false;
+  preventInitialSave: boolean = false;
+  customersList$!: Observable<any>;
+  routeDetails!: { pickup_location: string | null | undefined; delivery_location: string | null | undefined; } | null;
+  public destroyer$ = new Subject<boolean>();
+  popupDetails: Route;
+  enablePopUp: boolean = false;
+  prevantPopupClose = false;
+  enableForm: boolean = false;
+
+  constructor(public coolMapService: CoolmapService, public utils: UtilsService, public dialog: MatDialog,
+    @Inject('memberData') public config: CoolmapConfigModel) {      
+    if (this.config.repository === 'customer') {
+      this.utils.fetchMaterialsListForCustomer().then((res)=>{        
+        this.materialsList = res;
+      });
+    } else {
+      this.utils.fetchMaterialsList().then((res)=>{
+        this.materialsList = res;
+      });
+    }
+   
+    this.utils.fetchUnitsList().then((res)=>{
+      this.unitsList = res;
+    });
+    this.formInit();
+    this.utils.getrouteDetailsUtility.subscribe(res => {
+      if (res) {
+        if (res['event'] !== 'click' && !this.prevantPopupClose) { this.enablePopUp = res['event'] }
+        else if (this.enablePopUp && !this.prevantPopupClose) { this.prevantPopupClose = true; }
+        if (res['event'] !== 'click' && !res['event'] && this.prevantPopupClose) {
+          this.popupDetails = this.utils.getdictValue('route-detailsv2');
+        } else { this.popupDetails = res['route'] }
+        if (this.enablePopUp) this.popupDetails['created_at'] = this.utils.getDateFormat(new Date(this.popupDetails['created_at']), '/');
+      }
+    });
+  }
+  filterCustomerList() {
+    this.customersList$ = this.addRouteForm.controls['customer_name'].valueChanges.pipe(
+      startWith(''),
+      map(value => this._filter(value || '')),
+    );
+  }
+  public _filter(value: string): string[] {
+    const filterValue = value.toLowerCase();
+    return this.customersList.filter((option: any) => option['customer_name'].toLowerCase().includes(filterValue));
+  }
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes['routeData'] && !changes['routeData']['currentValue']) this.inIt(null);
+  }
+  openDialog(): void {
+    const dialogRef = this.dialog.open(DialogComponent, {
+      data: { body: 'Are you sure you want to delete this route?' },
+    });
+    dialogRef.afterClosed().subscribe(res => { if (res) { this.deleteRoute() } });
+  }
+  editEvent() {
+    this.prevantPopupClose = false;
+    this.enableForm = true; this.enablePopUp = false;
+    this.popupDetails['prevent'] = false;
+    this.utils.removeMapEntity.next(this.popupDetails);
+    this.inIt(this.popupDetails);
+  }
+  inIt(changes: Route) {
+    if (changes) {
+      if (!changes['prevent']) {
+        this.preventSave = false;
+        this.formControlValue();
+        this.patchFormValue(changes).then(() => {
+          this.checkAndFetchRouteInformation(true)
+        });
+      }
+    }
+    if (!changes) {
+      this.enableForm = true; this.preventSave = true;
+      this.patchFormValue().then(() => {
+        this.checkAndFetchRouteInformation()
+      });
+    }
+  }
+  ngOnInit(): void {
+    this.formControlValue();
+    if (this.config.repository === 'customer') {
+      this.addRouteForm.patchValue({
+        customer_id: this.customerRepoDetails.customer.id,
+        customer_name: this.customerRepoDetails.customer.name,
+      })
+    } else {
+      this.utils.fetchCustomersList().then((res)=>{
+        this.customersList = res; this.filterCustomerList(); this.addRouteForm.controls['customer_name'].enable();
+      });
+    }
+  }
+
+  ngAfterViewInit() {
+    fromEvent(this.filterPickup.nativeElement, 'keyup').pipe(
+      distinctUntilChanged(), debounceTime(150)).pipe(takeUntil(this.destroyer$)).subscribe(() => {
+        this.utils.fetchAutoCompleteLocations(this.filterPickup.nativeElement.value).pipe(takeUntil(this.destroyer$)).subscribe((res: any) => {
+          this.pickupOptions = res.features;
+        });
+      });
+
+    fromEvent(this.filterDelivery.nativeElement, 'keyup').pipe(
+      distinctUntilChanged(), debounceTime(150)).pipe(takeUntil(this.destroyer$)).subscribe(() => {
+        this.utils.fetchAutoCompleteLocations(this.filterDelivery.nativeElement.value).pipe(takeUntil(this.destroyer$)).subscribe((res: any) => {
+          this.deliveryOptions = res.features;
+        });
+      });
+  }
+
+  formControlValue() {
+    this.addRouteForm.controls['pickup_location']?.valueChanges.pipe(takeUntil(this.destroyer$)).subscribe((res: any) => {
+      if (this.addRouteForm.value.pickup_location && res !== this.addRouteForm.value.pickup_location) {
+        this.addRouteForm.patchValue({ pickup_lat_lng: '' });
+        this.addRouteForm.controls['pickup_lat_lng'].markAsTouched();
+      }
+    });
+
+    this.addRouteForm.controls['delivery_location']?.valueChanges.pipe(takeUntil(this.destroyer$)).subscribe((res: any) => {
+      if (this.addRouteForm.value.delivery_location && res !== this.addRouteForm.value.delivery_location) {
+        this.addRouteForm.patchValue({ delivery_lat_lng: '' });
+        this.addRouteForm.controls['delivery_lat_lng'].markAsTouched();
+      }
+    });
+  }
+
+  formInit() {
+    this.addRouteForm = new FormGroup({
+      route_name: new FormControl('', [Validators.required]),
+      customer_name: new FormControl({ value: '', disabled: true }, [Validators.required]),
+      customer_id: new FormControl(''),
+      materials_id: new FormControl('', [Validators.required]),
+      unit_id: new FormControl('', [Validators.required]),
+      path: new FormControl('', [Validators.required]),
+      pickup_location: new FormControl('', [Validators.required]),
+      pickup_lat_lng: new FormControl('', [Validators.required]),
+      delivery_location: new FormControl('', [Validators.required]),
+      delivery_lat_lng: new FormControl('', [Validators.required]),
+      estimated_distance: new FormControl('', [Validators.required]),
+      estimated_time: new FormControl('', [Validators.required]),
+      note: new FormControl('', [Validators.maxLength(2048)]),
+      trucker_pay_estimate: new FormControl(null),
+      customer_price_estimate: new FormControl(null),
+    });
+  }
+
+  async patchFormValue(data?: Route) {
+    this.addRouteForm.reset();
+    this.addRouteForm.patchValue(data!);
+    if (this.config.repository === 'customer') {      
+      this.addRouteForm.patchValue({
+        customer_id: this.customerRepoDetails.customer.id,
+        customer_name: this.customerRepoDetails.customer.name,
+      })
+    }
+    this.routeId = data?.route_id;
+    this.routeDetails = data ? { pickup_location: data.pickup_location, delivery_location: data.delivery_location } : null;
+    this.addRouteForm.valueChanges.pipe(takeUntil(this.destroyer$)).subscribe(res => {
+      if (res) { if (this.preventInitialSave) this.preventInitialSave = false }
+    });
+    this.filterCustomerList();
+    await true;
+  }
+
+  selectedLongLat(type: string, event: any) {
+    if (type === 'pickup') {
+      this.addRouteForm.patchValue({
+        pickup_lat_lng: (event.geometry.coordinates[1] + ',' + event.geometry.coordinates[0]).toString()
+      });
+      this.coolMapService.clearBoundWithCordinates();
+    } else if (type === 'delivery') {
+      this.addRouteForm.patchValue({
+        delivery_lat_lng: (event.geometry.coordinates[1] + ',' + event.geometry.coordinates[0]).toString()
+      })
+    }
+    this.checkAndFetchRouteInformation();
+  }
+
+  checkAndFetchRouteInformation(isinitial?: boolean) {
+    if (this.addRouteForm.value?.delivery_lat_lng?.length > 0 && this.addRouteForm.value?.pickup_lat_lng?.length > 0 && this.addRouteForm.value.unit_id) {
+      let unit = this.unitsList.find((x: any) => x.id === this.addRouteForm.value.unit_id);
+      const param = {
+        delivery_lat_lng: this.addRouteForm.value.delivery_lat_lng,
+        pickup_lat_lng: this.addRouteForm.value.pickup_lat_lng,
+        unit: unit?.type
+      };
+      this.utils.postdata('calculate/routes/estimation', param).pipe(takeUntil(this.destroyer$)).subscribe((res: any) => {
+        if (res && res['path']) {
+          this.addRouteForm.patchValue({
+            estimated_distance: res['dist'],
+            estimated_time: res['time'],
+            path: res['path'],
+            trucker_pay_estimate: res['trucker_haul_cost'],
+            customer_price_estimate: (+(+res['trucker_haul_cost'] / 0.80).toFixed(2))
+          });
+          let path = res['path'].split(';');
+          path = path.map((ele: string | any) => { return ele = this.formateLatLong(ele) });
+          res['path'] = path;
+          const element: any = {
+            type: 'FeatureCollection',
+            features: [{ type: 'Feature', properties: {}, geometry: { type: 'LineString', coordinates: res['path'] } }]
+          }
+          this.coolMapService.removeRouteAndMarker(1).then(() => {
+            const unit = this.unitsList.find((x: any) => x.id === this.addRouteForm.value.unit_id);
+            const materialDetails = this.materialsList.find((x: any) => x.sub_material_id === this.addRouteForm.value.materials_id);
+            this.coolMapService.loadMapProperty(element, 1, unit?.type,
+              {
+                pickup_location: this.addRouteForm.get('pickup_location')?.value,
+                delivery_location: this.addRouteForm.get('delivery_location')?.value,
+                route_name: this.addRouteForm.get('route_name')?.value,
+                materialLabel: materialDetails?.label,
+                unit: unit?.type
+              }).then((res) => { this.preventSave = true });
+          });
+        } else {
+          this.coolMapService.removeRouteAndMarker(1);
+          this.utils.openSnackBar(res['status'], 'error');
+        }
+        if (this.routeId && isinitial) this.preventInitialSave = true;
+      });
+    } else { this.coolMapService.removeRouteAndMarker(1) }
+  }
+
+  formateLatLong(latlong: string) { return latlong ? latlong.split(',').map(x => +x).reverse() : null }
+  saveRoute() {
+    if (this.addRouteForm.valid) {
+      this.preventSave = false;
+      const data = this.addRouteForm.getRawValue();
+      const url = this.routeId ? this.utils.postdata('update/routes', data) : this.utils.postdata('add/routes', data)
+      if (this.routeId) data['id'] = this.routeId;
+      url.pipe(takeUntil(this.destroyer$)).subscribe((res: any) => {
+        if (res.success) {
+          this.updateRouteList.emit(true);
+          this.utils.openSnackBar(res.message, 'success');
+          this.preventInitialSave = true;
+          this.preventSave = true;
+          if (!this.routeId) this.changeNav.next('Addroute');
+        } else {
+          this.utils.openSnackBar(res.message, 'error');
+          this.preventSave = true;
+        }
+      }, (err) => { if (err) { this.preventSave = true; } });
+    } else {
+      this.addRouteForm.markAllAsTouched();
+    }
+  }
+  deleteRoute() {
+    this.preventSave = false;
+    this.utils.postdata('delete/routes', { uuid: this.routeId }).subscribe(res => {
+      if (res['data']['success']) {
+        this.utils.openSnackBar(res['data']['message'], 'success');
+        this.updateRouteList.emit(true);
+        this.changeNav.next('Addroute');
+        this.preventInitialSave = true;
+        this.preventSave = true;
+      } else {
+        this.utils.openSnackBar('Somthing went wrong', 'error');
+        this.preventSave = true;
+      }
+    }, (err) => { this.preventSave = true })
+  }
+  ngOnDestroy(): void {
+    this.destroyer$.next(true);
+    this.destroyer$.unsubscribe();
+  }
+}

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

@@ -0,0 +1,79 @@
+<div class="jobcode_detailprt" (click)="isOverlapRouteSection = false"  *ngIf="jobdetail" [ngClass]="{'overlap': !isOverlapRouteSection}" cdkDrag>
+  <span class="close"><mat-icon (click)="clearJob()">clear</mat-icon></span>
+  <div class="job_details_area">
+    <div class="detailnameprt">
+      <app-jobcode-status [jobValue]="jobdetail"></app-jobcode-status>
+    </div>
+    <app-jobcode-overview [jobValue]="jobdetail"></app-jobcode-overview>
+  </div>
+</div>
+
+<div class="route_listprt" (click)="isOverlapRouteSection = true" [ngClass]="{ 'show': isVisible, 'overlap': isOverlapRouteSection}">
+  <div class="listing_toggle" (click)="toggleSidemenu()">
+    <img src="assets/images/route.svg" alt="" />
+  </div>
+
+  <div class="listing_box">
+    <div class="closebtn" (click)="toggleSidemenu()">
+      <mat-icon>clear</mat-icon>
+    </div>
+
+    <div class="btnprt">
+      <h2> List of Routes </h2>
+      <button (click)="masterToggle()">{{routes && routes.length > 0 && routes.length === selectedRoute.selected.length ? 'Uncheck' : 'Check'}} All</button>
+    </div>
+
+    <app-job-route-list [routes]="routes" [masterRoutes]="masterRoutes" [selectedRoute]="selectedRoute" (changeRoutes)="routes = $event" (changeSelectedRoute)="selectedRoute = $event"></app-job-route-list>
+    <cdk-virtual-scroll-viewport itemSize="50" class="routeList-viewport">
+      <ul *ngIf="routes['length'] > 0">
+        <li *ngFor="let list of routes">
+          <div class="iconprt">
+            <span>
+              <input type="checkbox" [checked]="selectedRoute.isSelected(list)"
+                (change)="$event ? selectRoute(list) : null" /><label>&nbsp;</label>
+              <div class="border"></div>
+            </span>
+            <div class="statusunit" [ngClass]="list['unit']">{{list['unit']}}</div>
+            <div class="infoicon">
+              <img (mouseenter)="togglerouteDetails(true, list)" (mouseout)="togglerouteDetails(false, list, true)"
+              (click)="togglerouteDetails('click', list)" src="assets/images/info_icon.png" [alt]="" />
+            </div>
+            <div class="infoicon" *ngIf="config.repository === 'customer'">
+              <img src="assets/images/share_icon.png" (click)="openShareRouteModal(list)" [alt]="" />
+            </div>
+          </div>
+          <div class="pickprtbox">
+            <h2> {{list['route_name']}} </h2>
+            <h3><ng-container *ngIf="config?.repository === 'coolmap'">{{list['customer_name']}} | </ng-container>{{config.repository === 'coolmap' ? list['material'] : list['materialLabel']}}</h3>
+            <div class="pickdropprt">
+              <div class="pickprt">
+                <b>
+                  <h4>{{list['pickup_location']}}</h4>
+                </b>
+              </div>
+              <div class="dropprt">
+                <b>
+                  <h4>{{list['delivery_location']}}</h4>
+                </b>
+              </div>
+            </div>
+          </div>
+        </li>
+      </ul>
+      <p style="color: #fff;" *ngIf="routes.length === 0">No Route found</p>
+    </cdk-virtual-scroll-viewport>
+
+  </div>
+
+  <div class="route_detail" *ngIf="detailsCardEnable">
+    <div class="closebtnroutedetail" (click)="detailsCardEnable = false; preventMouseout = false">
+      <mat-icon>clear</mat-icon>
+    </div>
+    <lib-route-info-card [propData]="{className: 'listRoutecard', repository: config['repository']}"  [popupData]="routeCardDetail"></lib-route-info-card>
+    <div class="createTxt">
+      <small>
+        Created by {{routeCardDetail?.created_by_name}} on {{routeCardDetail?.created_at}}
+      </small>
+    </div>
+  </div>
+</div>