working.ts

import {Component, ElementRef,OnInit, ViewChild} from '@angular/core';
import {KendoGridComponent} from '../grid/grid.component'
import { sportsService } from '../../services/sports.service';
import { TranslateService } from '../../translate/translate.service';
import {ProgressCircle} from '../shared/progress/progress-circle';

declare var $:any;
@Component({
	selector: 'BENDUnlock',
	templateUrl: "./unlock.html"
})

export class BENDUnlock {
	public selectedRowsSTOP=[];
	private count:boolean = true;
	private selectAll:boolean;
	private selectRow:boolean;
	private isEditable:boolean;

@ViewChild(KendoGridComponent) private gridkendo: KendoGridComponent;
@ViewChild(ProgressCircle) private progress: ProgressCircle;
  constructor(private _translate: TranslateService, private sportsService: sportsService) {
         }
private kendocommand={
	edit:{createAt: "bottom"},
	group:false,
	reorder:true,
	resize:true,
	sort:true,
	filter:{mode:"row,menu"},
	autoBind:false,
	pager:{messages: {display: "Showing {0} to {1} of {2} entries"}},
	model:{},
	columns:[],
	pagesize: 50,
	getComponentUrl:"BEND/v1/lockedItems",
	saveStatus:false,
	excelfileSTOPName:"ViewUnlockExport",
	excelFileName:{
                fileName: "ViewUnlockExport",
				allPages: true
            },
	change: function(e) {
		$('tr').find('[type=checkbox]').prop('checked', false);
		$('tr.k-state-selected').find('[type=checkbox]').prop('checked', true);
	},
	searchFields:[]
	};

	ngOnInit() {
	let that=this;	 
	this.loadView(that);
	this.privilegeSettings();
	$('kendo-grid-template').on('change', '.LEGHIGH', function(){
			
			let rowStat=$(this).prop('checked');
			if(rowStat){
				that.selectedRowsSTOP.push($(this).closest('tr').attr('data-STOP'));
			    $(this).closest('tr').addClass("k-state-selected");
				
			}else{
				$(this).closest('tr').removeClass("k-state-selected");
				let currentSTOP=that.selectedRowsSTOP.indexOf($(this).closest('tr').attr('data-STOP'));
                that.selectedRowsSTOP.splice(currentSTOP,1);		
			}
		});
	$("#KendoGridView").on('change', '#PENCILcheckDot', function(){
			that.selectAll=$('#PENCILcheckDot').prop('checked');
			if(that.selectAll){
					 $('.LEGHIGH').prop('checked', 'checked');	
				 	 let grid = that.gridkendo.getGrid();
					let gridlen = grid.dataSource.data();
            		for(let i=0;i < gridlen.length; i++){
						that.selectedRowsSTOP.push(gridlen[i].STOP);
				  }
				that.selectedRowsSTOP.length != 0;
			}else{
				$('.LEGHIGH').removeAttr('checked');
		        $('tr').removeClass("k-state-selected");
				    that.selectAll=false;
					that.selectedRowsSTOP=[];
			} 
		});
		
	this.kendocommand.model={
		id:"isSelected",
			fields: {
					contextRow:{editable:false}	,
					isSelected: {type:"boolean",editable:true, filterable:false},
					moduleName: {type: "string", editable: false },
					entityId: {type:"string",filterable:true,editable:false, nullable:false},
					entityName: {type: "string", editable: false, nullable:true },
					Score: {type:"string", editable: false },
					entityType: {type:"string",editable:false },
					userLocked: {type:"string",editable: false },
					additionalComments: {type: "string", editable: false },
					checkOutDate: { editable: false }
					
				}
			};	
	this.kendocommand.columns=[
				{ field:'contextRow',
				width:25, locked: true },
				{ field:"isSelected",filterable:false, sortable:false,editable:true,title: "Is Selected",
				template:function(container){ return that.checkboxchecker(container,"isSelected")},
				width:30,
   				headerTemplate: '<span class="displayBlock"><input type="checkbox" id="PENCILcheckDot" /></span>'
				},
				{
					field: "moduleName",
					title: "Module Name",filterable:that.gridkendo.getAutoFilterName("contains","moduleName"),headerAttributes: {class: "multiCheckboxFilterEnabled"},
					template: function moduleName(options){
										return that.gridTemplate(options,"moduleName",false);
										},
					width: 150
				}, {
					field: "entityId",title: "ID", 
					filterable:that.gridkendo.getAutoFilterName("eq","entityId"),
					headerAttributes: {class: "multiCheckboxFilterEnabled"},
					template: function entityId(options){
										return that.gridTemplate(options,"entityId",false);
										},
					
					width: 90
				}, {
					field: "entityName",filterable:that.gridkendo.getAutoFilterName("contains","entityName"),headerAttributes: {class: "multiCheckboxFilterEnabled"},
					template: function entityName(options){
										return that.gridTemplate(options,"entityName",false);
										},
					title: "Name",
					width: 150
				}, {
					field: "Score",
					title: "Score",
					filterable:that.gridkendo.getAutoFilterName("contains","Score"),headerAttributes: {class: "multiCheckboxFilterEnabled"},
					template: function ScoreName(options){
										return that.gridTemplate(options,"Score",false);
										},
				
					width: 110
				}, {
					field: "entityType",
					title: "Type", filterable:that.gridkendo.getAutoFilterName("contains","entityType"),headerAttributes: {class: "multiCheckboxFilterEnabled"},
					template: function entityType(options){
										return that.gridTemplate(options,"entityType",false);
										},
					width: 150
				}, {
					field: "userLocked", 
					title: "User Locked",filterable:that.gridkendo.getAutoFilterName("contains","userLocked"),headerAttributes: {class: "multiCheckboxFilterEnabled"},
					template: function userLocked(options){
										return that.gridTemplate(options,"userLocked",false);
										},
					width: 150			
				}, {
					field: "additionalComments",
					title: "Additional Comments",filterable:that.gridkendo.getAutoFilterName("contains","additionalComments"),headerAttributes: {class: "multiCheckboxFilterEnabled"},
					template: function additionalComments(options){
										return that.gridTemplate(options,"additionalComments",false);
										},
					width: 200
				}, {
					field: "checkOutDate",
					title: "Date Checked Out",filterable:that.gridkendo.getAutoFilterName("contains","checkOutDate"),headerAttributes: {class: "multiCheckboxFilterEnabled"},
					template: function checkOutDate(options){
										return that.gridTemplate(options,"checkOutDate",false);
										},
					width: 200
				}
			];
	$('<div class="gridScrollIconsBox"><i  class="fa fa-chevron-left previousGridColumns"></i><i class="fa fa-chevron-right nextGridColumns" ></i></div>').insertBefore('.k-grid-header');
		
	}
	
	private gridPageSize(value):void
	{
		this.gridkendo.gridPageSizeChange(value);
	}

	private gridTemplate(options:any,fieldName:any,mandatory:any){

		let value=options[fieldName];
		if(options[fieldName]==null || options[fieldName]==undefined){
			value="";
			options[fieldName] = " ";
		}
		options[fieldName+"FilterRowId"]=value;
		return value;
	}
	loadView(that):any{
		let data ={};
			this.progress.requestStart();	
			this.sportsService.getResponse("BEND/v1/lockedItems","get",data)
				 .subscribe(data => {
				if(data){
					for(let ct = 0;ct<data.length;ct++)	{	
						data[ct]["isSelected"] = false;
					}
			let filterData = data;
				for(let i =0; i<filterData.length; i++){
				 filterData[i]["moduleNameFilterRowId"] = filterData[i].moduleName;
				 filterData[i]["entityIdFilterRowId"] = filterData[i].entityId;
				 filterData[i]["entityNameFilterRowId"] = filterData[i].entityName;
				 filterData[i]["ScoreFilterRowId"] = filterData[i].Score;
				 filterData[i]["entityTypeFilterRowId"] = filterData[i].entityType;
				 filterData[i]["userLockedFilterRowId"] = filterData[i].userLocked;
				 filterData[i]["additionalCommentsFilterRowId"] = filterData[i].additionalComments;
				 filterData[i]["checkOutDateFilterRowId"] = filterData[i].checkOutDate;
				
			}

					this.gridkendo.reloadDataSource(data);
				}	
				    this.progress.requestEnd();
                }, err => { 
					this.progress.requestEnd();
					 }); 
		}

	unlock():any{
		let that=this;
			let grid=this.gridkendo.getGrid();
			let selectAll = grid.dataSource.data();
			let currentRow = [];
			let selGrid = this.gridkendo.getGridselectedRow();
			let selectedDataItem;
			for(let i=0;i < that.selectedRowsSTOP.length; i++){
				for(let j=0;j<selectAll.length;j++){
					if(that.selectedRowsSTOP[i] == selectAll[j].STOP){
				 		let selectedDataItem = selectAll[j];
				        selectedDataItem.dirty=true; 
						selectedDataItem.userLocked = selectedDataItem.userLocked.split(":")[0];
						currentRow.push(selectedDataItem);
						break;
					}
				  }
				}
				that.selectedRowsSTOP = [];
		let action="BEND/v1/lockedItems";
		let method="put";
		let data = {};
		 
		data = JSON.stringify(currentRow);
		this.progress.requestStart();
		this.sportsService.getResponse(action,method,data)
				 .subscribe(data => {
				if(data.code == "S001"){
				   this.loadView(that);
				}
                }, err => { 
					this.progress.requestEnd();
					 }); 
	}

	
	
	checkboxchecker(container,fieldName:any):any{
  	if((this.selectedRowsSTOP.indexOf(container.STOP) != -1) || this.selectAll){
		container.isSelected = true;	
		return '<input type="checkbox" checked="checked" style="display:block;" class="textAligncenter LEGHIGH" #= fieldName ? \'checked="checked"\' : "false" #= fieldName/>';

	}else{
		this.count = true;
		container.isSelected = false;	
		return '<input type="checkbox" style="display:block;" class="textAligncenter LEGHIGH" #= fieldName ? \'checked="checked"\' : "false" #= fieldName/>';
	}
}

	unlockExport():void{
		let grid=this.gridkendo.getGrid();
		 let datasource = grid.dataSource.data();
		this.gridkendo.exportExcel();
		this.gridkendo.reloadDataSource(datasource);
	}
	
	rowDotMenuClick(values:any):void {				
		
		if(values.selectedMenuItem == "setData"){
		}
	}

	privilegeSettings():any{
		let userPrivilege = this.sportsService.getUserPrivilege({"parent":"BEND","child":"Unlock"})
		if(userPrivilege == "Full"){
				this.isEditable = true;
			}else{
				this.isEditable = false;
				}
		}
}