Notes

// import { Component, OnInit } from '@angular/core';
// import { FormGroup,FormBuilder, FormControl, Validators } from '@angular/forms';
// import { Observable } from 'rxjs';
// import { Data, Data1, Data2, Data3, Data4 } from '../data';
// import { transService } from '../shared/trans.service';
// @Component({
// selector: 'app-header',
// templateUrl: './header.component.html',
// styleUrls: ['./header.component.css']
// })
// export class HeaderComponent implements OnInit {
// // public response!: Observable<Data[]>;
// keyDetail !: FormGroup;

// searchkey:string='';
// // tslint:disable-next-line: new-parens
// keyObj : Data= new Data;
// // tslint:disable-next-line: new-parens
// keyObj2 :Data3 =new Data3;

// // tslint:disable-next-line: new-parens
// keyList2=new Data2;

// keyList1 :Data1[]=[];
// // tslint:disable-next-line: new-parens
// searchtheData=new Data4;
// public searchTerm : string='';
// clss: string | undefined;
// msg: string | undefined;

// // tslint:disable-next-line: array-type
// items: Array<string> = [];


// isDisabled=true;
// // tslint:disable-next-line: no-shadowed-variable
// constructor(private formBuilder:FormBuilder, private transService:transService) { }

// ngOnInit(): void {
// this.getData();
// this.keyDetail= this.formBuilder.group({
// id:[''],
// technicalkey:[''],
// content:[''],
// });
// // this.keyDetail2= this.formBuilder.group({
// // id:[''],
// // technicalkey:[''],
// // content:[''],
// // });
// this.transService.search.subscribe((val:any)=>{
// this.searchkey=val;
// })

// this.keyDetail=new FormGroup({
// technicalkey:new FormControl(this.keyObj2.technicalkey,[
// Validators.required,
// ]),
// content:new FormControl(this.keyObj2.content,[
// Validators.required
// ])
// })
// }
// get technicalkey() {
// return this.keyDetail.get('technicalkey')!;
// }
// get content() {
// return this.keyDetail.get('content')!;
// }
// public validate(): void {
// if (this.keyDetail.invalid) {
// for (const control of Object.keys(this.keyDetail.controls)) {
// this.keyDetail.controls[control].markAsTouched();
// }
// return;
// }

// this.keyObj2 = this.keyDetail.value;

// console.info('Name:', this.keyObj2.technicalkey);
// console.info('Nickname:', this.keyObj2.content);

// }

// pages: number = 1;
// keyList: Data[]=[];

// addingData(){
// // console.log(this.keyDetail);
// this.keyObj2.id=this.keyDetail.value.id;
// console.log(this.keyDetail.value.id)
// this.keyObj2.technicalkey=this.keyDetail.value.technicalkey;
// this.keyObj2.content=this.keyDetail.value.content;
// this.transService.addingData(this.keyObj2).subscribe((res)=>{
// console.log(res);
// this.getData();
// this.isDisabled = false;
// })


// }
// getData(){
// this.transService.getData().subscribe((res)=>{
// // tslint:disable-next-line: no-angle-bracket-type-assertion
// this.keyList=<any[]>res;
// },(err: any)=>{
// console.log("error while fetching data")

// });

// }
// editData(emp:Data){

// // tslint:disable-next-line: no-string-literal
// this.keyDetail.controls['id'].setValue(emp._id)

// // tslint:disable-next-line: no-string-literal
// this.keyDetail.controls['technicalkey'].setValue(emp.technicalkey);
// // tslint:disable-next-line: no-string-literal
// this.keyDetail.controls['content'].setValue(emp.content);
// }

// updateEmployee(id: any) {
// console.log(id);
// this.keyObj._id=this.keyDetail.value.id;
// console.log(this.keyDetail.value.id);
// this.keyObj.technicalkey=this.keyDetail.value.technicalkey;
// this.keyObj.content=this.keyDetail.value.content;
// this.transService.updateEmployee(this.keyObj).subscribe(res=>{
// console.log(res);
// this.getData();
// },err=>{
// console.log(err);
// })
// }
// displayStyle = "none";
// openPopup() {
// this.displayStyle = "block";
// }
// closePopup() {
// this.displayStyle = "none";
// }
// public deleteFood(id: any) {
// console.log(id);
// if(confirm('Do you want to delete the selected key?')){
// this.transService.deleteItem(id).subscribe((data) => {
// console.log(data);
// this.getData();

// });

// }
// }



// search(event:any){
// this.searchTerm=(event.target as HTMLInputElement).value;
// console.log(this.searchTerm);
// this.transService.search.next(this.searchTerm);
// }

// onCheckBoxChange(event: any) {

// if (event.target.checked) {
// this.items.push(event.target.value);

// } else {

// console.log(event.target.value)

// const index = this.items.indexOf(event.target.value);

// if (index > -1) {

// this.items.splice(index, 1)

// }

// }

// }
// deletingitems(){

// if(confirm("Do you want to delete the selected keys?")){
// // tslint:disable-next-line: prefer-for-of
// for( let i=0;i<this.items.length;i++){
// this.transService.deleteItem(this.items[i]).subscribe((data) => {

// // this.items.splice(i,1);
// console.log(data);
// });
// this.getData();

// }
// this.items=[]
// this.getData();
// console.log(this.items)
// }
// this.getData();
// }
// }
import { Component, OnInit } from '@angular/core';
import { FormGroup,FormBuilder, FormControl, Validators } from '@angular/forms';
import { Observable } from 'rxjs';
import { Data, Data1, Data2, Data3, Data4 } from '../data';
import { transService } from '../shared/trans.service';
@Component({
selector: 'app-header',
templateUrl: './header.component.html',
styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit {
// public response!: Observable<Data[]>;
keyDetail !: FormGroup;
searchkey:string='';
keyObj : Data= new Data;
keyObj2 :Data3 =new Data3;

keyList2=new Data2;

keyList1 :Data1[]=[];
searchtheData=new Data4;
public searchTerm : string='';
clss: string | undefined;
msg: string | undefined;

items: string[] = [];

constructor(private formBuilder:FormBuilder, private transService:transService) { }

ngOnInit(): void {
this.getData();
this.keyDetail= this.formBuilder.group({
id:[''],
technicalkey:[''],
language:[''],
content:[''],
});
this.transService.search.subscribe((val:any)=>{
this.searchkey=val;
})
// this.keyDetail=new FormGroup({
// technicalkey:new FormControl(this.keyObj2.technicalkey,[
// Validators.required,
// ]),
// content:new FormControl(this.keyObj2.content,[
// Validators.required
// ])
// })
// }
// get technicalkey() {
// return this.keyDetail.get('technicalkey')!;
// }
// get content() {
// return this.keyDetail.get('content')!;
// }
// public validate(): void {
// if (this.keyDetail.invalid) {
// for (const control of Object.keys(this.keyDetail.controls)) {
// this.keyDetail.controls[control].markAsTouched();
// }
// return;
// }

// }

}

pages: number = 1;
keyList: Data[]=[];


addingData(value:any){
console.log(value);
this.keyObj2.id=this.keyDetail.value.id;
// console.log(this.keyDetail.value.id)
this.keyObj2.technicalkey=this.keyDetail.value.technicalkey;
this.keyObj2.language=this.keyDetail.value.language;

this.keyObj2.content=this.keyDetail.value.content;
console.log(this.keyObj2);
// console.log(this.keyDetail);
this.transService.addingData(this.keyObj2).subscribe((res)=>{
console.log(res);
this.getData();


})
this.displayStyle = "none";
}
listarr:any=[];

getData(){
this.languagearr=[];
this.transService.getData().subscribe((res)=>{
this.keyList=(res as any[]);
this.listarr=this.keyList;
console.log(this.keyList)
for(let i=0;i<this.keyList.length;i++){
// console.log(this.keyList[i].language);
this.languagearr.push(this.keyList[i].language)

}
},(err: any)=>{
console.log("error while fetching data")

});
console.log(this.keyList);
}
editData(emp:Data){

this.keyDetail.controls['id'].setValue(emp._id)

this.keyDetail.controls['technicalkey'].setValue(emp.technicalkey);
this.keyDetail.controls['language'].setValue(emp.language);
this.keyDetail.controls['content'].setValue(emp.content);
}
updateEmployee(id: any,value:any) {
// console.log(id);
console.log(value);
this.keyObj._id=this.keyDetail.value.id;
// console.log(this.keyDetail.value.id);
this.keyObj.technicalkey=this.keyDetail.value.technicalkey;
this.keyObj.language=value;
this.keyObj.content=this.keyDetail.value.content;

this.transService.updateEmployee(this.keyObj).subscribe(res=>{
console.log(res);
this.getData();
},err=>{
console.log(err);
})

}

displayStyle = "none";

openPopup() {
this.displayStyle = "block";

}
closePopup() {
this.displayStyle = "none";
}

public deleteFood(id: any) {
console.log(id);
if(confirm('Do you want to delete the selected key?')){
this.transService.deleteItem(id).subscribe((data) => {

console.log(data);

this.getData();

});

}
}



search(event:any){
this.searchTerm=(event.target as HTMLInputElement).value;
console.log(this.searchTerm);
this.transService.search.next(this.searchTerm);
}

onCheckBoxChange(event: any) {

if (event.target.checked) {

this.items.push(event.target.value);

} else {

console.log(event.target.value)

const index = this.items.indexOf(event.target.value);

if (index > -1) {

this.items.splice(index, 1)

}

}

}
deletingitems(){

if(confirm('Do you want to delete the selected keys?')){
for( let i=0;i<this.items.length;i++){
this.transService.deleteItem(this.items[i]).subscribe((data) => {

// this.items.splice(i,1);
console.log(data);
});

this.getData();

}
this.items=[]
this.getData();
console.log(this.items)
}
this.getData();

}
languagearr:any=[];
filterlanguage:any=[];
selectinglan(value:any){
// console.log(value.lang);
// this.languagearr=[];
this.filterlanguage=[];
// console.log(event.target.value);
// this.languagearr=[];

console.log(this.languagearr);

for(let i=0;i<this.languagearr.length;i++){
// tslint:disable-next-line: triple-equals
if(this.languagearr[i]==value){
console.log(this.keyList[i]);
this.filterlanguage.push(this.listarr[i])
}
}
// console.log(this.filterlanguage);
this.keyList=this.filterlanguage;
// console.log(this.filterlanguage)
// console.log(this.keyList)
}
clear(){
this.getData();
}
// key='technicalkey';
// reverse:boolean=false;
// sort(key: string){
// this.key=key;
// this.reverse=!this.reverse;
// }
dynamicsort(property: string, order: string) {
let sort_order = 1;
if (order === "desc") {
sort_order = -1;
}
return function (a:any, b:any) {
// a should come before b in the sorted order
if (a[property] < b[property]) {
return -1 * sort_order;
// a should come after b in the sorted order
} else if (a[property] > b[property]) {
return 1 * sort_order;
// a and b are the same
} else {
return 0 * sort_order;
}
}
}
order = true;
sort(){


let tempOrder;
if (this.order) {
tempOrder = 'asc';
} else {
tempOrder = 'desc';
}
this.keyList = this.keyList.sort(this.dynamicsort('technicalkey', tempOrder));
this.order=!this.order;
}
}