EchoTex_Payroll/HRM.UI/ClientApp/src/app/picker/dynamic-picker/dynamic-picker.component.ts

601 lines
22 KiB
TypeScript

import { Component, EventEmitter, Input, OnInit, Output, OnChanges } from '@angular/core';
import { SelectableSettings } from '@progress/kendo-angular-grid';
import { DynamicPicker, EnumDynamicControlType, EnumDynamicpickerType, EnumFormView } from './Dynamic-Picker';
import { FormControl, FormGroup } from '@angular/forms';
import { CheckableSettings } from '@progress/kendo-angular-treeview';
import { ApiService } from '../../app.api.service';
import { HttpClient } from '@angular/common/http';
import { IntlService } from '@progress/kendo-angular-intl';
import { Observable, Subject } from 'rxjs';
import { ChangeDetectorRef, AfterContentChecked } from '@angular/core';
@Component({
selector: 'app-dynamic-picker',
templateUrl: './dynamic-picker.component.html',
styleUrls: ['./dynamic-picker.component.css']
})
export class DynamicPickerComponent implements OnInit, OnChanges, AfterContentChecked {
@Output() onSelectCompleted = new EventEmitter<any>();
@Output() OnItemSelected = new EventEmitter<any>();
@Output() cancel: EventEmitter<any> = new EventEmitter();
public itemSelectedCompletedEvent: EventEmitter<any>;
@Input() public dynamicPickerView: DynamicPicker;
@Input() private pickerActive: EventEmitter<boolean>;
//***************
// Do not chnage this file without discussing shamim
//***************
@Input() gradeCodeChanged;
@Input() deptNameChanged;
@Input() degNameChanged;
isEditMode: boolean = false;
isgrade: boolean = false;
isdept: boolean = false;
isdeg: boolean = false;
gradecode = '';
deptName = '';
degName = '';
public opened = true;
public selectableSettings: SelectableSettings;
public checkboxOnly = false;
public active: boolean;
@Input() WithDropDown: boolean;
public showDropdown: boolean;
form: FormGroup;
public enableCheck = true;
public checkChildren = true;
public checkParents = true;
public checkOnClick = false;
public checkMode: any = 'multiple';
public selectionMode: any = 'single';
@Input() DynamicPickerFormGroup: FormGroup;
@Input() pickerformControlName: string = 'itemselected';
@Input() fixedGrades: number[] = undefined;
//private autoCmpList: Array<string>;
private autolistItems: Array<{ id: number; name: string }> = [];
private autolistItemsTreeView: Array<{ id: number; name: string }> = [];
private autolistItemsSource: Array<Object> = undefined;
private autolistItemsSourceForTree: Array<Object> = undefined;
private selectedAutoCmptValue: any;
constructor(private http: HttpClient,
public intl: IntlService, public apiService: ApiService, private ref: ChangeDetectorRef) {
this.setSelectableSettings();
if (this.DynamicPickerFormGroup == undefined) {
this.DynamicPickerFormGroup = new FormGroup({
itemselected: new FormControl(''),
});
}
}
ngAfterContentChecked() {
this.ref.detectChanges();
}
toFormGroup() {
const group: any = {};
this.dynamicPickerView.searchControls.forEach(question => {
let fromctl: FormControl;
if (question.controlType === EnumDynamicControlType.DateTime) {
fromctl = new FormControl(new Date() || '');
} else {
if (question.value !== undefined) {
fromctl = new FormControl(question.value || '');
} else {
fromctl = new FormControl('');
}
}
group[question.controlID] = fromctl;
});
return new FormGroup(group);
}
public get checkableSettings(): CheckableSettings {
if (this.dynamicPickerView.multiSelect === false) {
this.checkMode = 'single';
}
return {
// checkChildren: true,
checkChildren: this.dynamicPickerView.checkChildren,
checkParents: false,
enabled: this.dynamicPickerView.multiSelect,
mode: this.checkMode,
checkOnClick: true
};
}
ngOnInit() {
if (this.pickerActive) {
this.pickerActive.subscribe(data => {
this.active = data;
});
}
this.showDropdown = true;
if (this.WithDropDown === undefined) {
this.WithDropDown = false;
this.showDropdown = false;
}
if (this.dynamicPickerView === undefined) {
alert('Picker defination is not defined');
return;
}
if (this.dynamicPickerView === undefined) {
alert('Picker defination is not defined');
return;
}
// this.loadEditData();
if (this.pickerActive) {
this.pickerActive.subscribe(data => {
this.active = data;
});
}
this.opened = false;
this.selectableSettings.mode = (this.dynamicPickerView.multiSelect === false) ? 'single' : 'multiple';
}
//loadEditData(){
// if(this.dynamicPickerView.selectedID !== undefined){
// this.DynamicPikerSearch();
// }
//}
private prepareAutoCmpList(sdata: string) {
this.autolistItems = [];
const sourceList: string[] = [];
let code = '';
let name = '';
this.autolistItemsSource.forEach(item => {
var ovalue = "";
var internalID: number;
for (let i = 0; i < Object.keys(item).length; i++) {
this.dynamicPickerView.listViewColumn.forEach(col => {
if (col.filedID.toLowerCase() === Object.keys(this.autolistItemsSource[0])[i].toLowerCase()) {
if (col.filedID.toLowerCase() === 'code')
ovalue = ovalue + ' ' + item[Object.keys(item)[i]];
if (col.filedID.toLowerCase() === 'name')
ovalue = ovalue + '-' + item[Object.keys(item)[i]];
}
});
if (this.dynamicPickerView.idColumnName.toLowerCase() === Object.keys(this.autolistItemsSource[0])[i].toLowerCase()) {
internalID = item[Object.keys(item)[i]];;
}
}
this.autolistItems.push({ 'id': internalID, 'name': ovalue });
});
this.autolistItems = this.autolistItems.filter(arrBirds => arrBirds.name.toLowerCase().includes(sdata.toLowerCase()));
}
handleFilter(value) {
let str: string = value;
if (value == undefined) {
str = '';
}
var autocompleteData: any;
this.dynamicPickerView.selectedIDs = [];
this.dynamicPickerView.selectedID = undefined;
if (this.dynamicPickerView.listViewData == undefined) {
//this.apiService.httpPost<Array<object>>('/DynamicPicker' + '/PickerSearch', this.dynamicPickerView).subscribe(data => {
// this.autolistItemsSource = data;
//},
// (err: any) => {
// },
// () => {
// this.prepareAutoCmpList(str);
// }
//);
this.DynamicPikerSearch(value);
}
else {
this.prepareAutoCmpList(str);
}
}
handleFilterTreeView(value) {
let str: string = value;
if (value == undefined) {
str = '';
}
var autocompleteData: any;
if (this.dynamicPickerView.listViewData !== undefined) {
this.apiService.httpPost<Array<object>>('/DynamicPicker' + '/PickerSearch', this.dynamicPickerView).subscribe(data => {
this.autolistItemsSourceForTree = data;
},
(err: any) => {
},
() => {
this.prepareAutoCmpListTreeView(str);
}
);
}
else {
this.prepareAutoCmpListTreeView(str);
}
}
private prepareAutoCmpListTreeView(sdata: string) {
this.autolistItemsTreeView = [];
const sourceList: string[] = [];
let code = '';
let name = '';
this.autolistItemsSourceForTree.forEach(item => {
var ovalue = "";
var internalID: number;
for (let i = 0; i < Object.keys(item).length; i++) {
this.dynamicPickerView.listViewColumn.forEach(col => {
if (col.filedID.toLowerCase() === Object.keys(this.autolistItemsSourceForTree[0])[i].toLowerCase()) {
// ovalue = ovalue + ' ' + item[Object.keys(item)[i]];
if (col.filedID.toLowerCase() === 'code')
ovalue = ovalue + ' ' + item[Object.keys(item)[i]];
if (col.filedID.toLowerCase() === 'name')
ovalue = ovalue + '-' + item[Object.keys(item)[i]];
// ovalue = item[Object.keys(item)[i]];
}
});
if (this.dynamicPickerView.idColumnName.toLowerCase() === Object.keys(this.autolistItemsSourceForTree[0])[i].toLowerCase()) {
internalID = item[Object.keys(item)[i]];
}
}
this.autolistItemsTreeView.push({ 'id': internalID, 'name': ovalue });
});
this.autolistItemsTreeView = this.autolistItemsTreeView.filter(arrBirds => arrBirds.name.toLowerCase().includes(sdata.toLowerCase()));
}
public valueChangeTree(item: any): void {
//console.log(item);
if (item !== undefined) {
this.OnItemSelected.emit(item);
var it = this.autolistItemsTreeView.find(x => x.name == item);
if (it != undefined) {
this.dynamicPickerView.selectedID = it.id;
const str: string[] = it.name.trim().split(' ');
var name = it.name.trim().substring(str[0].length, it.name.length).trim();
this.dynamicPickerView.selecteditemText = name;
this.dynamicPickerView.selectedObjects = [];
var newitem: Array<{ id: number; name: string }> = [];
newitem.push({ 'id': it.id, 'name': name });
this.dynamicPickerView.selectedObjects.push(newitem[0]);
this.dynamicPickerView.selectedIDs = [];
this.dynamicPickerView.selectedIDs.push(it.id);
this.onSelectCompleted.emit(it.id);
}
}
}
// onItemSelected(value) {
// let str: string = value || '';
// if (this.dynamicPickerView.listViewData !== undefined) {
// this.apiService.httpPost<Array<object>>('/DynamicPicker' + '/PickerSearch', this.dynamicPickerView).subscribe(
// data => {
// this.autolistItemsSourceForTree = data;
// this.autolistItems$.next(this.prepareAutoCmpListForTreeview(str));
// },
// error => {
// console.error('Error fetching data:', error);
// this.autolistItems$.next([]);
// }
// );
// } else {
// this.autolistItems$.next(this.prepareAutoCmpListForTreeview(str));
// }
// }
// private prepareAutoCmpListForTreeview(sdata: string): any[] {
// const autolistItems: any[] = [];
// this.autolistItemsSourceForTree.forEach(item => {
// var ovalue = "";
// var internalID: number;
// for (let i = 0; i < Object.keys(item).length; i++) {
// this.dynamicPickerView.listViewColumn.forEach(col => {
// if (col.filedID.toLowerCase() === Object.keys(this.autolistItemsSourceForTree[0])[i].toLowerCase()) {
// ovalue = ovalue + ' ' + item[Object.keys(item)[i]];
// }
// });
// if (this.dynamicPickerView.idColumnName.toLowerCase() === Object.keys(this.autolistItemsSourceForTree[0])[i].toLowerCase()) {
// internalID = item[Object.keys(item)[i]];
// }
// }
// autolistItems.push({ 'id': internalID, 'name': ovalue });
// });
// return autolistItems.filter(arrBirds => arrBirds.name.toLowerCase().includes(sdata.toLowerCase()));
// }
// searchItems(event: any) {
//
// }
// filteredItems: any[] = [];
// onItemSelect(event: any) {
//
// }
public valueChange(item: any): void {
//console.log(item);
if (item !== undefined) {
this.OnItemSelected.emit(item);
var it = this.autolistItems.find(x => x.name == item);
if (it != undefined) {
//console.log(it);
this.dynamicPickerView.selectedID = it.id;
const str: string[] = it.name.trim().split(' ');
//console.log(str);
var name = it.name.trim().substring(str[0].length, it.name.length).trim();
this.dynamicPickerView.selecteditemText = name;
this.dynamicPickerView.selectedObjects = [];
var newitem: Array<{ id: number; name: string }> = [];
newitem.push({ 'id': it.id, 'name': name });
this.dynamicPickerView.selectedObjects.push(newitem[0]);
//console.log(this.dynamicPickerView.selectedObjects);
this.dynamicPickerView.selectedIDs[0] = it.id;
// this.onListSelectButtonClick();
this.onSelectCompleted.emit(it.id);
}
}
}
DynamicPikerSearch(autoCompletevalue: any) {
this.apiService.httpPost<Array<object>>('/DynamicPicker' + '/PickerSearch', this.dynamicPickerView).subscribe(data => {
//console.log(data);
this.dynamicPickerView.listViewData = data;
this.autolistItemsSource = data;
if (this.dynamicPickerView.pickerType == EnumDynamicpickerType.Grade && this.fixedGrades != undefined) {
let gradeData: Array<Object> = [];
this.dynamicPickerView.listViewData.forEach(col => {
if (this.fixedGrades.findIndex(x => x == col['id']) != -1) {
gradeData.push(col);
}
});
this.dynamicPickerView.listViewData = gradeData;
if (this.dynamicPickerView.listViewData.length == 0) {
return;
}
}
if (this.dynamicPickerView.pickerType == EnumDynamicpickerType.CostCenter) {
this.dynamicPickerView.listViewData.forEach(element => {
element['name'] = element['codeName'];
});
}
// tslint:disable-next-line:prefer-for-of
for (let i = 0; i < Object.keys(this.dynamicPickerView.listViewData[0]).length; i++) {
if (this.dynamicPickerView.fromViewType === EnumFormView.ListView) {
this.dynamicPickerView.listViewColumn.forEach(col => {
if (col.filedID.toLowerCase() === Object.keys(this.dynamicPickerView.listViewData[0])[i].toLowerCase()) {
col.filedID = Object.keys(this.dynamicPickerView.listViewData[0])[i];
}
});
} else {
if (this.dynamicPickerView.treeNodeFieldID.toLowerCase() === Object.keys(this.dynamicPickerView.listViewData[0])[i].toLowerCase()) {
this.dynamicPickerView.treeNodeFieldID = Object.keys(this.dynamicPickerView.listViewData[0])[i];
}
}
if (this.dynamicPickerView.idColumnName.toLowerCase() === Object.keys(this.dynamicPickerView.listViewData[0])[i].toLowerCase()) {
this.dynamicPickerView.idColumnName = Object.keys(this.dynamicPickerView.listViewData[0])[i];
}
}
if (this.dynamicPickerView.selectedID !== undefined) {
//console.log(this.dynamicPickerView.selectedID);
const data = this.dynamicPickerView.listViewData.find(item => item['id'] === this.dynamicPickerView.selectedID);
if (data !== undefined) {
if (this.dynamicPickerView.fromViewType === EnumFormView.ListView) {
this.selectedAutoCmptValue = data['code'] + '-' + data['name'];
}
if (this.dynamicPickerView.fromViewType === EnumFormView.TreeView) {
this.selectedAutoCmptValue = data['code'] + '-' + data['name'];
this.dynamicPickerView.selecteditemText = data['code'] + '-' + data['name'];
}
}
}
if (autoCompletevalue != undefined) {
this.prepareAutoCmpListTreeView(autoCompletevalue);
}
},
(err: any) => {
console.log(err);
// ON ERROR
}
,
() => {
}
);
}
search(): Observable<Array<object>> {
let objdata;
this.http.post<Array<object>>(this.apiService.base_url + 'DynamicPicker' + '/PickerSearch', this.dynamicPickerView).subscribe(
response => {
objdata = response;
},
err => console.log(err)
);
return objdata;
}
public setSelectableSettings(): void {
this.selectableSettings = {
checkboxOnly: this.checkboxOnly,
mode: 'single'// this.mode
};
}
onListSelectButtonClick(): void {
if (this.dynamicPickerView.selectedIDs === undefined || this.dynamicPickerView.selectedIDs.length === 0) {
alert('Please Select an Item.');
} else {
let idIndex = 0;
for (let i = 0; i < Object.keys(this.dynamicPickerView.listViewData[0]).length; i++) {
if (Object.keys(this.dynamicPickerView.listViewData[0])[i].toLowerCase() === this.dynamicPickerView.idColumnName.toLowerCase()) {
idIndex = i;
break;
}
}
let selectedtext = '';
this.dynamicPickerView.selectedObjects = [];
this.dynamicPickerView.listViewData.forEach(rawdata => {
this.dynamicPickerView.selectedIDs.forEach(sel => {
if (rawdata[Object.keys(rawdata)[idIndex]] === sel) {
this.dynamicPickerView.selectedObjects.push(rawdata);
let str = '';
this.dynamicPickerView.listViewColumn.forEach(col => {
for (let k = 0; k < Object.keys(rawdata).length; k++) {
if (col.showInPickerMain === true && col.filedID.toLowerCase() === Object.keys(rawdata)[k].toLowerCase()) {
str = str + rawdata[Object.keys(rawdata)[k]] + '-';
break;
}
}
});
if (str.length > 2) {
str = str.substring(0, str.length - 1);
}
selectedtext = selectedtext + str + ',';
}
});
});
if (selectedtext.length > 2) {
selectedtext = selectedtext.substring(0, selectedtext.length - 1);
}
this.dynamicPickerView.selecteditemText = selectedtext;
this.selectedAutoCmptValue = selectedtext;
this.OnItemSelected.emit(this.selectedAutoCmptValue);
var selectedValue: any;
if (this.dynamicPickerView.multiSelect === false) {
this.dynamicPickerView.selectedID = this.dynamicPickerView.selectedIDs[0];
selectedValue = this.dynamicPickerView.selectedIDs[0];
} else {
selectedValue = this.dynamicPickerView.selectedIDs;
}
this.onSelectCompleted.emit(selectedValue);
////////////new
if (this.isEditMode === true) {
this.isEditMode = false;
this.isgrade = false;
this.isdeg = false;
this.isdept = false;
}
//
this.opened = false;
}
}
public onCancelButtonClick(): void {
this.opened = false;
}
TreeViewNodeClear() {
this.dynamicPickerView.selectedIDs = [];
}
public open() {
//this.dynamicPickerView.selectedID = 0;
// this.dynamicPickerView.selectedIDs = [];
this.dynamicPickerView.selecteditemText = '';
if (this.dynamicPickerView.listViewData == undefined)
this.DynamicPikerSearch(undefined);
this.opened = true;
}
public clear() {
this.dynamicPickerView.selectedID = undefined;
this.dynamicPickerView.selectedIDs = [];
this.dynamicPickerView.selecteditemText = '';
this.dynamicPickerView.selectedObjects = [];
this.selectedAutoCmptValue = '';
this.onSelectCompleted.emit(undefined);
this.OnItemSelected.emit(undefined);
}
public close() {
this.opened = false;
this.cancel.emit(undefined);
}
public getformat(column) {
if (Date.parse(column.filedID)) {
return '{0:dd.MM.yyyy}';
} else {
return '';
}
}
//new
ngOnChanges() {
this.isEditMode = false;
//this.gradeCodeChanged.subscribe(data => {
// this.dynamicPickerView.selecteditemText = data;
//});
//this.deptNameChanged.subscribe(data => {
// this.dynamicPickerView.selecteditemText = data;
//});
//this.degNameChanged.subscribe(data => {
// this.dynamicPickerView.selecteditemText = data;
//});
if (this.gradeCodeChanged != undefined) {
this.isgrade = true;
this.isdeg = false;
this.isdept = false;
this.isEditMode = true;
this.gradecode = this.gradeCodeChanged;
}
if (this.deptNameChanged != undefined) {
this.isgrade = false;
this.isdeg = false;
this.isdept = true;
this.isEditMode = true;
this.deptName = this.deptNameChanged;
}
if (this.degNameChanged != undefined) {
this.isgrade = false;
this.isdeg = true;
this.isdept = false;
this.isEditMode = true;
this.degName = this.degNameChanged;
}
// this.isEditMode = false;
}
}