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

import { DashboardService } from './../../../shared/dashboard.service';
import { Modal } from 'ngx-modialog/plugins/bootstrap';
import { LectureService } from './../../../shared/lecture.service';
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-registration-vehicle-list',
  templateUrl: './registration-vehicle-list.component.html',
  styleUrls: ['./registration-vehicle-list.component.css']
})
export class RegistrationVehicleListComponent 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 [] = [];

  constructor(private route: ActivatedRoute,
    private userSer: UserService,
    private spinner: NgxSpinnerService,
    private 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;

     //init the values of permision boolean
    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 == 45) {
                  if(this.pages[i].permissions[0].name == 'registration_of_vehicle_data') {
                    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(
        (responce) => {
          console.log(responce);
          this.dataList = responce['vehicle_datas'];
          this.count = responce['count'];
          this.perPagePagenation = responce['per_page'];
          this.spinner.hide();
        },
        (error) => {
          console.log(error);
        }
      );

    }

      //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_datas'];
          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_datas'];
          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_datas'];
        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_datas'];
        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_datas'];
                  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();
              },
            )
        );
    } else {
      this.toastr.warning('لم يتم إختيار أي عنصر للمسح !');
    }
  };

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

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