kfmc_website/src/app/dashboard/reports-existing-vehicles/existing-report/existing-report.component.ts

import { ToastrService } from 'ngx-toastr';
import { AuthServiceService } from './../../../shared/auth-service.service';
import { HttpClient } from '@angular/common/http';
import { ActivatedRoute } from '@angular/router';
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-existing-report',
  templateUrl: './existing-report.component.html',
  styleUrls: ['./existing-report.component.css']
})
export class ExistingReportComponent implements OnInit {

  constructor(private route: ActivatedRoute,
    private authSer: AuthServiceService, 
    private toastr: ToastrService,
    private http: HttpClient) { }

    vehicle_types: any[] =[];
    vehicle_models: any[]=[];
    vehiclesData: any[] = [];
    vehicleTypeId: number;
    vehicleModelId:number;

  ngOnInit() {
    
    

    //get vehicles types 
    this.http.get(this.authSer.pathApi + '/get_vehicle_types_list').subscribe(
      (response) => {
        console.log(response);
        this.vehicle_types = response['types'];
        
      },
      (error) => {
        console.log(error);
      });

  }


  //change type vehicle 
  typeVehicle(event) {
    console.log(event.target.value);
    this.vehicleTypeId = event.target.value;
    this.http.get(this.authSer.pathApi + '/get_vehicle_models_by_type_id/' + this.vehicleTypeId).subscribe(
      (responce) => {
        console.log('models vehicle', responce);
        this.vehicle_models = responce['models'];
      },
      (error) => {
        console.log(error);
      }
    );
  };

  //get report when change model
  getReport(event) {
    console.log(event.target.value);
    this.vehicleModelId = event.target.value;
    this.http.get(this.authSer.pathApi + '/report_existing_vehicles/' + this.vehicleTypeId + '/' + this.vehicleModelId + '/all').subscribe(
      (responce) => {
        console.log('report data ', responce);
        this.vehiclesData = responce['vehicles'];
      },
      (error) => {
        console.log(error);
      }
    );
  }

  //fillter data 
  getFillter(event) {
    console.log(event.target.value);
    this.http.get(this.authSer.pathApi 
      + '/report_existing_vehicles/' 
      + this.vehicleTypeId + '/' 
      + this.vehicleModelId 
      + '/' + event.target.value).subscribe(
      (responce) => {
        this.vehiclesData = [];
        console.log(responce);
        this.vehiclesData = responce['vehicles'];
        if(this.vehiclesData.length == 0) {
          this.toastr.warning('لا يوجد بيانات لعرضها حاليا');
        }
      },
      (error) => {
        console.log(error);
      }
    )
  }

}