ADAM / AIAHTML5

import { Component, OnInit, AfterViewInit, ViewChild, AfterViewChecked,HostListener } from '@angular/core';
import { UserService } from './user.service';
import { Router } from '@angular/router';
import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { User } from '../userentity/datamodel';
import { UserManageRightsModel } from '../userentity/datamodel';
import { Http, Response } from '@angular/http';

//import { Global } from '../../Shared/global';
//import { DBOperation } from 'S';
import { Observable } from 'rxjs/Observable';
import { ConfirmService } from '../../shared/confirm/confirm.service';
import 'rxjs/Rx';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/filter';
import { LoadingService } from '../../shared/loading.service';   
declare var $: any;
import { DatePipe } from '@angular/common';
import { GlobalService } from '../../shared/global';
import { PagerComponent } from '../../shared/pager/pager.component';
@Component({
  templateUrl:'./users.component.html' // '../../../../../wwwroot/html/UpdateProfile/updateuserprofile.component.html'
})

export class UsersList implements OnInit, AfterViewChecked {
   ngAfterViewChecked(): void {
     $('#fixed_hdr2 thead').css('width', $('#fixed_hdr2 tbody tr:eq(0)').width());
   }

  Mode: string = 'Manage';
  modalTitle: string;
  Users: FormGroup;
  adduserFrm: FormGroup;
  managerightFrm: FormGroup;
  alerts: string;
  public UserTypeList: any;
  public AccountTypeList: any;
  public UserList: any;
  public UserManageRightsList: Array<UserManageRightsModel>;
  
  emailPattern = "^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$";
  public UserTypeListByLicense: any;
  public AccountNumberList: any;
  public ProductEditionList: any;
  UserEntity: User;
  UserDetailEntity: User;
  public UserManageRightsEntity: UserManageRightsModel;
  topPos: string = '2000px';
  datePipe: DatePipe = new DatePipe('en-US');
  error;
  selectedRow: number = -1;
  selectedId: number = 0;
  divClass: string;
  isActive: boolean;
  NoRecord: string;
  checkedRecords: Array<number>;
  UncheckedRecords: Array<number>;
  buttonStatus: boolean;
  EditbuttonStatus: boolean;
  logoutUserSession: boolean;
  //@ViewChild("profileModal")
  //profileModal: ModalComponent;
  //errorMessage: any;
  @ViewChild(PagerComponent) pagerComponent: PagerComponent;
  recordCount: number;
  pageNo: number;
  pageLength: number;
  DisableAccountNumberControl: boolean;
  // Declare height and width variables
  scrHeight:any;
  scrWidth:any;
  @HostListener('window:resize', ['$event'])
  getScreenSize(event?) {

   var $ua = navigator.userAgent;
   if (($ua.match(/(iPod|iPhone|iPad|android)/i))) {
     this.scrHeight = window.innerHeight-500;
   }
   else
   {
     this.scrHeight = window.innerHeight-420;
     
   }

  // $(".ft_container").css("height",this.scrHeight);
  }
  constructor(private _loadingService: LoadingService,private userservice: UserService, private router: Router, private fb: FormBuilder, private http: Http,
    private _confirmService: ConfirmService, public global:GlobalService
  ) {this.getScreenSize(); }
 
  ngOnInit(): void {
    this.modalTitle = 'LIST USER';
    this.alerts = '';
    this.NoRecord = '';
    
    this.Users = this.fb.group({
      FirstName:[''],
      LastName: [''],
      EmailId:  [''],
      AccountNumber: [''],
      UserTypeId: [0],
      AccountTypeId:[0],
      LoginStatus:[false]
     // Gender: ['', Validators.required],
   //   Email: ['']
          
    });
    this.adduserFrm = this.fb.group({
      id: [''],
      UserName: ['', [Validators.required, Validators.minLength(8)]],
      Password: ['', [Validators.required, Validators.minLength(8)]],
      ConfirmPassword: ['', [Validators.required]],
      FirstName: ['', [Validators.required,this.noWhitespaceValidator]],
      LastName: ['', [Validators.required,this.noWhitespaceValidator]],
      EmailId: ['', [Validators.required]],
      AccountNumber: [''],
      UserTypeTitle: [''],
      AccountTypeTitle: [''],
      CreationDate: [''],
      ModifiedDate: [''],
      Createdby: [''],
      Modifiedby: [''],
      DeactivationDate: [''],
      //DeactivationDate: ['',this.noWhitespaceValidator],
      isActive: [false],
      UserStatusActive: ['false'],
      UserStatusInActive:['']
    });
    this.managerightFrm = this.fb.group({
      id: [''],
      UserTypeTitle: [''],
      checkedRecords: [this.fb.array([])],
      UncheckedRecords: [this.fb.array([])]
      
    });
    
    if (this.global.UserTypeName == "Client Admin" || this.global.UserTypeName == "District Admin" ) 
    {
      if(this.global.AccountNumber !=undefined && this.global.AccountNumber !="")
      {
        this.Users.controls['AccountNumber'].setValue(this.global.AccountNumber)
        this.DisableAccountNumberControl = true;
      }
      
    }
    this._loadingService.ShowLoading("global-loading");
    this.GetUserType();
    this.GetAccountType();
    this.recordCount = 0;
    this.pageNo = 1;
    this.pageLength = 10;
    this.pagerComponent = new PagerComponent();
    $('#fixed_hdr2').fxdHdrCol({
      fixedCols: 0,
      width: "100%",
      height:  this.scrHeight,
      colModal: [
        { width: 160, align: 'center' },
        { width: 160, align: 'center' },
        { width: 130, align: 'Center' },
        { width: 120, align: 'Center' },
        { width: 200, align: 'Center' },
        { width: 130, align: 'Center' },
        { width: 110, align: 'Center' },
        { width: 120, align: 'center' },
        { width: 140, align: 'Center' },
        { width: 170, align: 'center' },
        { width: 90, align: 'left' },
        { width: 90, align: 'left' },
        { width: 150, align: 'left' },

      ],
      sort: true
    });

    if(document.getElementById("fixed_table_rc") != null){    
      document.getElementById("fixed_table_rc").remove();
      var testScript = document.createElement("script");
      testScript.setAttribute("id", "fixed_table_rc");
      testScript.setAttribute("src", "../assets/scripts/fixed_table_rc.js");
      testScript.setAttribute("type", "text/javascript");
      document.body.appendChild(testScript);
     }

    // $(".ft_rwrapper table thead tr th").on("click",function(event){  
           
    //   this.fieldName=event.currentTarget.id;
    //   var isAscSort = $(".ft_rwrapper table thead tr #"+this.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 #"+this.fieldName).addClass('fx_sort_desc').removeClass('fx_sort_asc'); 
    //     this.sortType="desc";
    //   } else { 
    //     $(".ft_rwrapper table thead tr #"+this.fieldName).addClass('fx_sort_asc').removeClass('fx_sort_desc'); 
    //     this.sortType="asc";
    //   }

    //   });
    

  }
  public noWhitespaceValidator(control: FormControl) {
    // new validation for intial whaite space
    //****Birendra *****/
     var isValid=false;
     if(control.value!=null)
     {
      var controlLen=control.value.length;
      if(controlLen==undefined)//undefined for integer value
      {
       isValid=true;
      }
     else if(controlLen!=0)
      {
        const isWhitespace = (control.value || '').trim().length === 0;
         isValid = !isWhitespace;
        if(!isValid)
        {
          control.setValue('');
          
        }
      }
     }  
     // can use also on page of input control
     //
     return isValid ? null: { 'whitespace': true };
     
 }
  handleChange(evt) {
    var target = evt.target;
    if (target.value == 'true') {
      this.isActive = true;
    }
    else if (target.value == 'false') {
      this.isActive = false;
    }
  }
  isValidForm() {
    
    return this.buttonStatus;
  }
  public SetClickedRow(i: number, item: any) {
    this.EditbuttonStatus = true;
    this.selectedRow = i;
    this.selectedId = item['Id'];
    this.UserEntity = item;
    
    if (item['UserTypeTitle'] == 'General Admin') {
      if (this.global.UserTypeName == 'District Admin') {
        this.buttonStatus = null;
      }
      else if (this.global.UserTypeName == 'Client Admin') {
        this.buttonStatus = null;
      }
      else if (this.global.UserTypeName == 'Reseller') {
        this.buttonStatus = null;
      }
      else { this.buttonStatus = true;}
    }    
    else {
      this.buttonStatus = null;
    }
    if (item['LoginStatus'] == true) {
      this.logoutUserSession=true;
    }
    else{
      this.logoutUserSession = null;
    } 
  }
  
  redirect() {
    this.router.navigate(['/']);
  }
  
  GetUserType() {
    this.userservice.GetUserType().subscribe(x => { this.UserTypeList = x; }, error => this.error = <any>error);
  }
  GetAccountType() {
    this.userservice.GetAccountType().subscribe(x => { this.AccountTypeList = x; }, error => this.error = <any>error);
  }
  GetUserList() {
    //this.userservice.GetUserList().subscribe(x => { this.UserList = x; }, error => this.error = <any>error);
  }
  GetUserRights() {
    this.userservice.GetManageUserRights({
      UserId: this.managerightFrm.controls['id'].value,
      UserType: this.managerightFrm.controls['UserTypeTitle'].value
    })
      .subscribe(x => { console.log(x); this.UserManageRightsList = x; this.checkedRecords = new Array<number>(this.UserManageRightsList.length); this.UncheckedRecords = new Array<number>(this.UserManageRightsList.length);}, error => {
        this.error = <any>error;
        this.alerts = "<span>" + this.error + "</span>";
      });
  }
  SearchUserList(evt: any)
  {
    this.NoRecord = '';
    this._loadingService.ShowLoading("global-loading");
    var tempArr = evt.split(',');
    this.pageNo = parseInt(tempArr[0]);
    this.pageLength = parseInt(tempArr[1]);
    var UserFilterControl = this.Users.value;

    this.userservice.GetUserList(
      {
        FirstName: this.Users.controls['FirstName'].value,
        LastName: this.Users.controls['LastName'].value,
        EmailId: this.Users.controls['EmailId'].value,
        AccountNumber: this.Users.controls['AccountNumber'].value,
        UserTypeId: (this.Users.controls['UserTypeId'].value != null && this.Users.controls['UserTypeId'].value !='' ? this.Users.controls['UserTypeId'].value:0),
        AccountTypeId: (this.Users.controls['AccountTypeId'].value != null && this.Users.controls['AccountTypeId'].value != ''? this.Users.controls['AccountTypeId'].value : 0),  
        LoginStatus: this.Users.controls['LoginStatus'].value,     
      },this.pageNo, this.pageLength
    )
      .subscribe(x => { this.BindFormFields(x) }, error => this.error = <any>error);
    
  }
  SearchRecords() {
    this.EditbuttonStatus=undefined;
    this.logoutUserSession=undefined;
    this.buttonStatus = null;
    this.selectedRow = -1;
    this.SearchUserList('1, ' + this.pageLength);
  }
  BindFormFields(data) {    
    this.recordCount = data.RecordCount;
    this.UserList = data.UserList;
    if (this.UserList.length > 0) {
      this.NoRecord = '';
      this._loadingService.HideLoading("global-loading");
    }
    if (this.UserList.length == 0) {
      this.NoRecord = this.global.NoRecords;
      this._loadingService.HideLoading("global-loading");
    }
  }
  CancelEditUser() {
    $("#searchform").css("display","block");
    this.SearchUserList(this.pageNo +','+ this.pageLength);
    this.Mode = 'Manage';
    this.modalTitle = 'LIST USER';
    this.topPos = '2000px';
    this.divClass = '';
    this.selectedRow = -1;
    this.EditbuttonStatus=undefined;
    this.buttonStatus=undefined;
    this.logoutUserSession=undefined;
  }
  EditUser() {
    if (this.EditbuttonStatus) {
      $("#searchform").css("display","none");
      this.Mode = 'Edit';
      this.modalTitle = 'Edit USER';
      this.topPos = '100px';
      this.divClass = 'col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2 col-lg-6 col-lg-offset-3';
      this.alerts = '';
      this.adduserFrm.controls['id'].setValue(this.UserEntity.Id)
      this.adduserFrm.controls['FirstName'].setValue(this.UserEntity.FirstName)
      this.adduserFrm.controls['LastName'].setValue(this.UserEntity.LastName)
      this.adduserFrm.controls['EmailId'].setValue(this.UserEntity.EmailId)
      this.adduserFrm.controls['UserName'].setValue(this.UserEntity.LoginId)
      this.adduserFrm.controls['Password'].setValue(this.UserEntity.Password)
      this.adduserFrm.controls['ConfirmPassword'].setValue(this.UserEntity.Password)
      this.adduserFrm.controls['AccountNumber'].setValue(this.UserEntity.AccountNumber)     
      this.adduserFrm.controls['UserTypeTitle'].setValue(this.UserEntity.UserTypeTitle)      
      this.adduserFrm.controls['AccountTypeTitle'].setValue(this.UserEntity.AccountTypeTitle)
      this.adduserFrm.controls['CreationDate'].setValue(this.datePipe.transform(this.UserEntity.CreationDate, 'MM/dd/yyyy'))
      this.adduserFrm.controls['ModifiedDate'].setValue(this.datePipe.transform(this.UserEntity.ModifiedDate, 'MM/dd/yyyy'))
      this.userservice.GetUserDetailById(this.UserEntity.Id)
      .subscribe(x => { console.log(x);  
        this.bindUsers(x);    
      }, error => this.error = <any>error);
      
      if (this.UserEntity.UserStatus == 'Active') {
        this.adduserFrm.controls['UserStatusActive'].setValue('true')
      }
      else {
        this.adduserFrm.controls['UserStatusActive'].setValue('false')
      }
      //this.adduserFrm.controls['UserStatusActive'].setValue(true)
      //this.adduserFrm.controls['UserStatusInActive'].setValue(false)
      this.isActive = (this.UserEntity.UserStatus == 'Active' ? true : false)
    }
    
  }
  bindUsers(data) {
 
     this.UserDetailEntity = data[0];
     this.adduserFrm.controls['DeactivationDate'].setValue(this.datePipe.transform(this.UserDetailEntity.DeactivationDate, 'MM/dd/yyyy'))
     this.adduserFrm.controls['Createdby'].setValue(this.UserDetailEntity.Createdby)
     this.adduserFrm.controls['Modifiedby'].setValue(this.UserDetailEntity.Modifiedby)
   }
  EditManageUserRights() {
    if (this.buttonStatus) {
      $("#searchform").css("display","none");
      this.Mode = 'ManageRight';
      this.modalTitle = 'MANAGE USER Right';
      this.topPos = '100px';
      this.divClass = 'col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2 col-lg-6 col-lg-offset-3';
      this.alerts = '';
      this.managerightFrm.controls['id'].setValue(this.UserEntity.Id);
      this.managerightFrm.controls['UserTypeTitle'].setValue(this.UserEntity.UserTypeTitle);
      this.GetUserRights();

    
    }
    
  }
  ForceLogoutUser(){
    if (this.logoutUserSession) { 
      this._loadingService.ShowLoading("global-loading");    
      this.userservice.ManageUserLoginStatus({
        userId: this.selectedId,
        tagName: 'adminlogout',
        SessionId:this.global.SessionId,
        isSiteUser:this.global.isSiteUser,
        isAdmin:this.global.isAdmin
      }).subscribe(x => { 
        console.log(x); 
        this.EditbuttonStatus=undefined;
        this.logoutUserSession=undefined;
        this.buttonStatus = null;
        this.selectedRow = -1;
        this.SearchUserList(this.pageNo +','+ this.pageLength);
        
      },error => console.log(error));
    }
  }

  public UpdateUser() {
    this.alerts = '';   
    if (this.adduserFrm.value.UserName == '' ||(!this.adduserFrm.controls.UserName.valid))
    {
      this.alerts += '<span>User Name of minimum 8 characters is required.</span>';
    }
    if (this.adduserFrm.value.Password == '' ||(!this.adduserFrm.controls.Password.valid )) {
      this.alerts += '</br><span>Password of minimum 8 characters is required.</span>';
    }
    if (this.adduserFrm.value.ConfirmPassword == '') {
      this.alerts += '</br><span>Confirm Password is required.</span>';
    }
    if (this.adduserFrm.value.Password != this.adduserFrm.value.ConfirmPassword) {
      this.alerts += '</br><span>Password and confirm password must be same</span>';
    }
    if (this.adduserFrm.value.EmailId == '' ||(!this.adduserFrm.controls.EmailId.valid)) {
      this.alerts += '</br><span>Email Id is required.</span>';
    }
  
    if (this.adduserFrm.value.FirstName == '') {
      this.alerts += '</br><span>First Name is required.</span>';
    }
    if (this.adduserFrm.value.DeactivationDate != null) {
      if(this.adduserFrm.value.DeactivationDate.trim() == '')
      {
        this.adduserFrm.controls['DeactivationDate'].setValue(null);
      }
    }
    
       
    if (this.adduserFrm.valid && this.alerts == '') {
      this._loadingService.ShowLoading("global-loading"); 
      this.adduserFrm.controls['isActive'].setValue(this.adduserFrm.value.UserStatusActive) ;
      
      var Userobj = this.adduserFrm.value;
      
      return this.userservice.UpdateUserEntity(Userobj)
        .subscribe(
        n => (this.AfterInsertData(n)),
        error => {
          this._loadingService.HideLoading("global-loading");
          this.error = <any>error;
          this.alerts = "<span>" + this.error + "</span>";
        });
    }

  }
  onChange(Idx: number, Id: number, isChecked: boolean) {
    if (isChecked) {
      this.checkedRecords[Idx] = Id;
     
    }
    else {
      this.UncheckedRecords[Idx] = Id;
      
    }
  }
  public UpdateManageUserRights() {
    this.alerts = '';
    this.managerightFrm.controls['checkedRecords'].setValue(new Array<number>(this.checkedRecords.length));
    this.managerightFrm.controls['UncheckedRecords'].setValue(new Array<number>(this.UncheckedRecords.length));
    this.managerightFrm.controls['checkedRecords'].setValue(this.checkedRecords.filter(C => C > 0));
    this.managerightFrm.controls['UncheckedRecords'].setValue(this.UncheckedRecords.filter(C => C > 0));
    var UserManageRightEntity = this.managerightFrm.value;
    var SelectedRights = (this.checkedRecords.filter(C => C > 0))
    var UncheckedRights = (this.UncheckedRecords.filter(C => C > 0))
    if (this.managerightFrm.value.UserTypeTitle ='General Admin') {
      if (this.managerightFrm.controls['checkedRecords'].value.length > 0 || this.managerightFrm.controls['UncheckedRecords'].value.length>0) {
        this._loadingService.ShowLoading("global-loading"); 
        return this.userservice.UpdateManageUserRights(UserManageRightEntity, SelectedRights, UncheckedRights)
          .subscribe(
          n => (this.AfterInsertDataManageRight(n)),
          error => {
            this._loadingService.HideLoading("global-loading");
            this.error = <any>error;
            this.alerts = "<span>" + this.error + "</span>";
          });
      }
      else {
        this.Mode = 'ManageRight';
        this.alerts = 'Please make any changes then you can click on update.';
      }
    }
    
  }

  AfterInsertData(data) {
  
    if (data == "User updated successfully") {
      this.alerts = '';
      this.UserEntity = this.adduserFrm.value;
      this._confirmService.activate("User updated successfully.", "alertMsg");
      this._loadingService.HideLoading("global-loading");
    }
    else {
      this.alerts ='We have encountered a technical error and same has been notified to our technical team.'
    }
   
  }
  AfterInsertDataManageRight(data) {

    if (data == "Done") {
      this.alerts = '';
      this._confirmService.activate("User Manage Rights Successfully updated.", "alertMsg");
      this.checkedRecords = new Array<number>(this.UserManageRightsList.length); 
      this.UncheckedRecords = new Array<number>(this.UserManageRightsList.length);
    }
    this._loadingService.HideLoading("global-loading");
  
  }
  ResetFormFields() {
    //this.ChangeUserIdFrm.reset()
    //this.ChangeUserIdFrm.controls['id'].setValue(this.user.Id)
    //this.ChangeUserIdFrm.controls['loginid'].setValue(this.user.LoginId)
    //this.ChangeUserIdFrm.controls['newloginid'].setValue('')
    //this.ChangeUserIdFrm.controls['confirmloginid'].setValue('')
    this.alerts = '';
  }
  CancelAddEdit() {
    $("#searchform").css("display","block");
    this.topPos = '2000px';
    this.Mode = 'Manage';
    this.modalTitle = 'LIST USER';
    this.divClass = '';
    
  }

}