ADAM / AIAHTML5

import { Component, OnInit, ViewChild,HostListener } from '@angular/core';
import { Router } from '@angular/router';
import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
//import { Http, Response } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/Rx';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/filter';
import { ImageExportReports } from '../reports/reportdatamodel';
import { ReportService } from '../reports/report.service';
import { GlobalService } from '../../shared/global';
import { BsModalService } from 'ngx-bootstrap/modal';
import { BsModalRef } from 'ngx-bootstrap/modal/bs-modal-ref.service';
import { DatePipe } from '@angular/common';
import { BsDatepickerModule, BsDatepickerConfig } from 'ngx-bootstrap';
import { Http, Response } from '@angular/http';
import { LoadingService } from '../../shared/loading.service';
import { PagerComponent } from '../../shared/pager/pager.component';
import { ConfirmService } from '../../shared/confirm/confirm.service';
declare var $: any;

@Component({
  templateUrl: './imageexportreport.component.html'
})

export class ImageExportReport implements OnInit {
  public lstImageExportReport: any;
  ImageExportReportForm: FormGroup;
  ImageExportReports: ImageExportReports[];
  numberOfImageExportReport: number;
  limit: number;
  page: number = 1;
  error;
  modalAlerts: string;
  divClass: string = '';
  topPos: string = '2000px';
  selectedRow: number = 0;
  datePipe: DatePipe = new DatePipe('en-US');
  bsValue1: Date = new Date();
  bsValue2: Date = new Date();
  selectedId: number = 0;
  modalRef: BsModalRef;
  date = new Date();
  previousdate = new Date();
  NoRecord: string;
  alerts: string;
  ExportingStart: boolean;
  bsConfig: Partial<BsDatepickerConfig>;
  buttonStatus: boolean;
  @ViewChild(PagerComponent) pagerComponent: PagerComponent;
  recordCount: number;
  pageNo: number;
  pageLength: number;
  // Declare height and width variables
  scrHeight:any;
  scrWidth:any;
  actualPageNo: number;
  actualPageLength: number;
  SearchField:any={
		sFromDate:new Date(),
		sToDate:new Date(),
		sAccountNumber:'',		
		sortColumn:'LicenseId', 
		sortOrder:'asc',
		pageNo:1,
		pageLength:10	  
	};
  @HostListener('window:resize', ['$event'])
  getScreenSize(event?) {

   var $ua = navigator.userAgent;
   if (($ua.match(/(iPod|iPhone|iPad|android)/i))) {
     this.scrHeight = window.innerHeight-430;
   }
   else
   {
     this.scrHeight = window.innerHeight-385;
   }
   if(this.scrHeight<=360) this.scrHeight=360;
	
     $(".ft_container").css("height",this.scrHeight);
  }

  constructor(private router: Router, private reportservice: ReportService, private fb: FormBuilder, 
    private modalService: BsModalService, public global: GlobalService, 
    private _loadingService: LoadingService, private _confirmService: ConfirmService) {this.getScreenSize(); }

  ngOnInit(): void {
    this.buttonStatus = false;
    this.ExportingStart = false;
    this.bsConfig = Object.assign({}, { containerClass: 'theme-dark-blue' });
    this.NoRecord = this.global.NoRecords;
    this.previousdate.setDate(this.previousdate.getDate());
    this.ImageExportReportForm = this.fb.group({
      sFromDate: [this.previousdate,[Validators.required]],
      sToDate: [this.date,[Validators.required]],
      sAccountNumber: ['']
    });
    this.alerts = '';
    this._loadingService.HideLoading("global-loading");
    $('#fixed_hdr2').fxdHdrCol({
      fixedCols: 0,
      width: "100%",
      height: this.scrHeight,
      colModal: [
        { width: 250, align: 'center' },
        { width: 200, align: 'center' },
        { width: 200, align: 'Center' },
        { width: 250, align: 'Center' },
        { width: 200, align: 'Center' },
        { width: 150, align: 'Center' },
        { width: 200, align: 'center' },        
        { width: 150, align: 'center' },
        { width: 180, align: 'center' },
      ],
      sort: true
    });
    this.pageNo = 1;
    this.pageLength = 10;
    this.NoRecord = this.global.NoRecords;
    this.recordCount = 0;
    this.pagerComponent = new PagerComponent();
	
    var thisObject=this;//class object
		$(".ft_rwrapper table thead tr th").on("click",function(event){  
				
		  if(event.currentTarget.id!=undefined && event.currentTarget.id!="" && event.currentTarget.id!=null)
		  {
			var fieldName=event.currentTarget.id;
			var sortType=''
			var isAscSort = $(".ft_rwrapper table thead tr #"+fieldName).hasClass('fx_sort_asc'); 
			$(".ft_rwrapper table thead tr th").removeClass('fx_sort_asc fx_sort_desc'); 
		  
			if (isAscSort) { 
			  $(".ft_rwrapper table thead tr #"+fieldName).addClass('fx_sort_desc').removeClass('fx_sort_asc'); 
			  sortType="desc";
			} else { 
			  $(".ft_rwrapper table thead tr #"+fieldName).addClass('fx_sort_asc').removeClass('fx_sort_desc'); 
			  sortType="asc";
			}
	  
			thisObject.SortTableRecords(fieldName,sortType);  

		  }
		 
		});
  }


  FromDateChange(dateValue: any){
	this.alerts = '';
		this.global.compareTwoDates(this.ImageExportReportForm.controls['sToDate'].value, dateValue._bsValue);
      if (this.global.ValidationMsg != '') {
        this.alerts = this.global.ValidationMsg;
      }		
  }
  ToDateChange(dateValue: any){
	this.alerts = '';	
	this.global.compareTwoDates(dateValue._bsValue, this.ImageExportReportForm.controls['sFromDate'].value);
	  if (this.global.ValidationMsg != '') {
		this.alerts = this.global.ValidationMsg;
	  }		
  }
	

  SortTableRecords(fieldName:string,sortType:string) {  
	this.SearchField.sortColumn=fieldName;
	this.SearchField.sortOrder=sortType;
	
	this.GetImageExportReportList();
   }
   
  GetImageExportReport(evt: any) {
	this.actualPageNo = this.pageNo;
    this.actualPageLength =this.pageLength;	
  
    var tempArr = evt.split(',');     
    this.pageNo = parseInt(tempArr[0]);
    this.pageLength = parseInt(tempArr[1]);
  
    this.SearchField.pageNo=this.pageNo;
    this.SearchField.pageLength=this.pageLength;
	
    this.GetImageExportReportList();
  
  }

 GetImageExportReportList() {
	this._loadingService.ShowLoading("global-loading");
	
	if (this.ExportingStart) {
	  this.reportservice.GetImageExportReport(this.SearchField).subscribe((ImageExportReports: ImageExportReports[]) => {
		//reset length after csvexport
		 this.pageNo = this.actualPageNo;
		 this.pageLength=this.actualPageLength;
		
		 this.SearchField.pageNo=this.pageNo;
		 this.SearchField.pageLength=this.pageLength;
	   
		this.ExportService(ImageExportReports); }, error => this.error = <any>error);
	}
	else {
	  this.reportservice.GetImageExportReport(this.SearchField).subscribe((ImageExportReports: ImageExportReports[]) => { this.BindFormFields(ImageExportReports); }, error => this.error = <any>error);
	} 
	
	this.ExportingStart = false;
  }


  SearchRecords() {
	 this.ExportingStart = false;
	  this.pageNo=1;
	  this.SearchField.sFromDate=this.ImageExportReportForm.controls['sFromDate'].value;
	  this.SearchField.sToDate=this.ImageExportReportForm.controls['sToDate'].value;
	  this.SearchField.sAccountNumber=this.ImageExportReportForm.controls['sAccountNumber'].value;
	  this.SearchField.pageNo=this.pageNo;
	  
	  this.GetImageExportReportList();
  }

  BindFormFields(data) {
    this.recordCount = data.RecordCount;
    this.lstImageExportReport = data.ImageExportList; 
    if (this.lstImageExportReport.length > 0) {
      this.NoRecord = '';
      this.buttonStatus = true;
      this._loadingService.HideLoading("global-loading");
    }
    if (this.lstImageExportReport.length == 0) {
      this.NoRecord = this.global.NoRecords;
      this._loadingService.HideLoading("global-loading");
      this.buttonStatus = false;
    }
  }

  ExportEvent() {
    if (this.buttonStatus) {
      this.ExportingStart = true;
      this.GetImageExportReport('1, ' + this.recordCount);     
    }
  }

  ExportService(data: any) {	  
	  for (let i = 0; i < data.ImageExportList.length; i++) {
		data.ImageExportList[i]['ExportedDate']= this.datePipe.transform(data.ImageExportList[i]['ExportedDate'], 'MM/dd/yyyy');		
	 }
	 
	  var reportname=+ this.date.getDay() + "-" + (this.date.getMonth()+1) + "-" + this.date.getSeconds()  
      this.global.ExportToCSV(data.ImageExportList, "ImageExportReport-"+reportname);
	  
      this._loadingService.HideLoading("global-loading");
	
  }

}