kfmc_website/src/app/dashboard/model-vehicle/model-vehicle-list/model-vehicle-list.component.ts

import { DashboardService } from './../../../shared/dashboard.service';
import { Modal } from 'ngx-modialog/plugins/bootstrap';
import { AuthServiceService } from './../../../shared/auth-service.service';
import { UserService } from './../../../shared/user.service';
import { HttpClient } from '@angular/common/http';

import { ActivatedRoute, Router, Params } from '@angular/router';
import { Component, OnInit } from '@angular/core';
import { NgxSpinnerService } from 'ngx-spinner';
import { ToastrService } from 'ngx-toastr';

@Component({
  selector: 'app-model-vehicle-list',
  templateUrl: './model-vehicle-list.component.html',
  styleUrls: ['./model-vehicle-list.component.css']
})
export class ModelVehicleListComponent implements OnInit {

  pageId: number;
  dataList = [];
  dataListIds = [];
  count: number;
  perPagePagenation: number;
  currentPage:number = 1;
  filtterStatus = 'all';
  selectedAll: any;
  userLoginId:number;
  serviceId:number;
  dataTableNumber: number = 5;
  pages = [];
  vehicle_types:any[] = [];
  mergedData = []


  constructor(private route: ActivatedRoute,
    private userSer: UserService,
    private spinner: NgxSpinnerService,
    public authSer: AuthServiceService,
    private toastr: ToastrService,
    private http: HttpClient,
    private modal: Modal,
    private dashBoardSer: DashboardService,
    private router: Router) { }

  ngOnInit() {

    this.spinner.show();

    //init the values of permision boolean
    this.authSer.showAddBtn = false;
    this.authSer.showDeleteBtn = false;
    this.authSer.showEditBtn = false;
    //show / hide notification search in header
    this.authSer.notificationLogin = true;
    this.authSer.showSearchHeader = false;
    this.authSer.showHeaderLogin = false;
    this.authSer.showHeaderDashBoard = true;
    this.authSer.showDashboardHeader = true;
    this.authSer.internalHeader = false;

    this.route.params.subscribe(
      (params: Params) => {
        this.pageId = +params['listPageId'];
        localStorage.setItem('pageIdActive', params['listPageId']);
      }
    );

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

    this.route.parent.params.subscribe(
      (params:Params) => {
        this.userLoginId = params['userID'];
        this.serviceId = params['serviceID'];
        this.userSer.getPagesPermetiotns(this.userLoginId, this.serviceId).subscribe(
          (responce) => {
            console.log('permission list', responce);
            this.pages = responce['pages'];
            for(let i = 0; i< this.pages.length; i++) {
              if(this.pages[i].id == 44) {
                if(this.pages[i].permissions[0].name == 'registration_of_vehicle_models') {
                  this.authSer.showAddBtn = true;
                  this.authSer.showEditBtn = true;
                  this.authSer.showDeleteBtn = true;
                }
              }else {
                console.log('no lectures');
              }
            }
            this.spinner.hide();
          },
          (error) => {console.log(error)}
        );
      }
    );

    this.dashBoardSer.getListData(this.pageId, this.currentPage , this.dataTableNumber).subscribe(
      (response) => {
        console.log(response);
        this.dataList = response['vehicle_models'];
        this.count = response['count'];
        this.perPagePagenation = response['per_page'];
        console.log('xxx', this.dataList)
        this.mergeToGether()

      },
      (error) => {
        console.log(error);
      }
    )
    
  }

  mergeToGether() {

    for (let i = 0, n = this.dataList.length ; i < n ; i++) {
          for(let ii = 0, m = this.vehicle_types.length; ii < m ; ii++ ){
            if (this.dataList[i].vehicle_type_id == this.vehicle_types[ii].id) {
              this.mergedData.push({
                id: this.dataList[i].id,
                name: this.dataList[i].name,
                status: this.dataList[i].status,
                vehicle_type_id: this.dataList[i].vehicle_type_id,
                vehicle_type_name: this.vehicle_types[ii].name
                
              })
              console.log('done');
            }
          }
    }
    console.log(this.mergedData);
    
  }
    //make all checkbox of user checked
    selectAll() {
      for (var i = 0; i < this.dataList.length; i++) {
        this.dataList[i].selected = this.selectedAll;
      }
    };

    checkIfAllSelected() {
      this.selectedAll = this.dataList.every(function(item:any) {
        return item.selected == true;
      });
    };

        //filtter function
      filtterFunc(data) {
        this.dataList = [];
        console.log(data.target.value);
        const dataSearch = data.target.value;
        this.currentPage = 1;
        console.log('search curent page', this.currentPage);
        this.dashBoardSer.getDataUSerSearchBar(dataSearch, this.pageId, this.currentPage, this.dataTableNumber).subscribe(
          (responce) => {
            console.log(responce);
            this.dataList = responce['vehicle_models'];
            this.count = responce['count'];
            this.perPagePagenation = responce['per_page'];
            console.log('filtter count', this.count);
            console.log('filtter perPagePAgenation', this.perPagePagenation);
          },
          (error) => {
            console.log(error)
          }
        );
      };

      //change page
      onPageChange(pagenationNumber) {
        this.spinner.show();
        this.currentPage = pagenationNumber;
        this.dataList = [];
        //console.log(pagenationNumber);
        //console.log(this.pageId);
        this.dashBoardSer.getListData(this.pageId, pagenationNumber, this.dataTableNumber).subscribe(
          (responce) => {
            console.log(responce);
            this.dataList = responce['vehicle_models'];
            this.count = responce['count'];
            this.perPagePagenation = responce['per_page'];
            console.log(this.dataList);
            this.spinner.hide();
          },
          (error) => {
            console.log(error);
            this.spinner.hide();
          }
        );
      };

       //determine the list count from select element
       onGetValue(event) {

        this.spinner.show();
        this.dataList = [];
        this.dataTableNumber = event.target.value;

        this.dashBoardSer.getListData(this.pageId, this.currentPage, this.dataTableNumber).subscribe(
          (responce) => {
            console.log(responce);
            this.dataList = responce['vehicle_models'];
            this.count = responce['count'];
            this.perPagePagenation = responce['per_page'];
            this.spinner.hide();
          },
          (error) => {
            console.log(error);
            this.spinner.hide();
          }
        );
      };

    onGetValueFiltter(event) {
      this.spinner.show();
      this.dataList = [];
      const typeId = event.target.value;
      console.log(typeId);
      this.http.get(this.authSer.pathApi +'/page_list/' + this.pageId + '/' + this.currentPage + '/' + this.dataTableNumber + '/' + typeId).subscribe(
        (responce) => {
          console.log(responce);
          this.dataList = responce['vehicle_models'];
          this.count = responce['count'];
          this.perPagePagenation = responce['per_page'];
          this.spinner.hide();
          console.log('UrL>>', this.authSer.pathApi +'/page_list/' + this.pageId + '/' + this.currentPage + '/' + this.dataTableNumber + '/' + typeId)
        },
        (error) => {
          console.log(error);
        }
      );
    }


    onDelete() {

      this.dataListIds = [];
      for(let i = 0; i < this.dataList.length; i++) {
        if(this.dataList[i].selected == true) {
          this.dataListIds.push(this.dataList[i].id);
        }
      }

      console.log(this.dataListIds);

      if(this.dataListIds.length > 0) {
        const dialogRef = this.modal.alert()
        .size('sm')
        .showClose(true)
        .title('تأكيد الحذف')
        .body(`
            <h4>هل ترغب في حذف العناصر المحدده ؟ </h4>
            `)
        .open();

          dialogRef.result
          .then( result =>
            this.dashBoardSer.deleteItem(this.dataListIds , this.pageId).subscribe(
              (responce) => {
                console.log(responce);
                this.toastr.success('تم الحذف');
                this.spinner.show();
                this.dataList = [];
                 //get list data
                this.dashBoardSer.getListData(this.pageId, this.currentPage ,this.dataTableNumber).subscribe(
                  (responce) => {
                    console.log(responce);
                    this.dataList = responce['vehicle_models'];
                    this.count = responce['count'];
                    this.perPagePagenation = responce['per_page'];
                    this.spinner.hide();
                  },
                  (error) => {
                    console.log(error);
                    this.spinner.hide();
                  }
                );
              },
              (error) => {
                // console.log(error);
                this.spinner.hide();
                if(error.error.status == 'vehicle type id is already taken'){
                  this.toastr.warning(' لا يمكن مسح  هذا النوع')
                }
                },
              )
          );
      } else {
        this.toastr.warning('لم يتم إختيار أي عنصر للمسح !');
      }
    };

    //add function
    onAdd() {
      console.log('service/' + this.userLoginId + '/' + this.serviceId + '/addTab');
      this.router.navigate(['service/' + this.userLoginId + '/' + this.serviceId + '/vehicleModel/add']);
    }

    //edit function
     onEdit(editTabID) {
      this.router.navigate(['service/' + this.userLoginId + '/' + this.serviceId + '/' + 'vehicleModel/edit/' + editTabID]);
    };

}