import { Component, Inject, AfterViewInit, OnInit, ViewChild } from '@angular/core'; import { ISService } from '../is.service'; import { MatTable, MatTableDataSource } from '@angular/material/table'; import { MatSort, Sort } from '@angular/material/sort'; import { Vocabulary, VocabularyTermSynonym } from '../model/controller.model'; import { ActivatedRoute, Params } from '@angular/router'; import { Observable, combineLatest } from 'rxjs'; import { map } from 'rxjs/operators'; import { MatDialog, MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog'; import { VocabularyTerm } from '../model/controller.model'; import { FormControl, FormGroup, FormGroupDirective, NgForm, Validators } from '@angular/forms'; import { EmitterVisitorContext } from '@angular/compiler'; @Component({ selector: 'app-vocabularies', templateUrl: './vocabularies.component.html', styleUrls: ['./vocabularies.component.css'] }) export class VocabulariesComponent implements OnInit, AfterViewInit { vocsDatasource: MatTableDataSource = new MatTableDataSource([]); colums: string[] = ['id', 'name', 'description', 'buttons']; @ViewChild(MatSort) sort: MatSort | undefined constructor(public service: ISService, public route: ActivatedRoute, public dialog: MatDialog) { } ngOnInit() { this.reload(); } ngAfterViewInit() { if (this.sort) this.vocsDatasource.sort = this.sort; } reload() { this.service.loadVocabularies((data: Vocabulary[]) => this.vocsDatasource.data = data); } applyFilter(event: Event) { const filterValue = (event.target as HTMLInputElement).value.trim().toLowerCase(); this.vocsDatasource.filter = filterValue; } newVocabularyDialog(): void { const dialogRef = this.dialog.open(VocDialog, { data: { id: '', name: '', description: '' }, width: '80%' }); dialogRef.afterClosed().subscribe(result => { if (result) this.reload(); }); } editVocabularyDialog(vocabulary: Vocabulary): void { const dialogRef = this.dialog.open(VocDialog, { data: vocabulary, width: '80%' }); dialogRef.afterClosed().subscribe(result => { if (result) this.reload(); }); } deleteVocabulary(vocabulary: Vocabulary): void { if (confirm("Are you sure?")) { this.service.deleteVocabulary(vocabulary.id, (data: void) => this.reload()); } } } @Component({ selector: 'app-vocabulary-editor', templateUrl: './vocabulary-editor.component.html', styleUrls: ['./vocabularies.component.css'] }) export class VocabularyEditorComponent implements OnInit, AfterViewInit { voc?: Vocabulary termsDatasource: MatTableDataSource = new MatTableDataSource([]); colums: string[] = ['code', 'name', 'encoding', 'synonyms', 'buttons']; @ViewChild(MatSort) sort: MatSort | undefined constructor(public service: ISService, public route: ActivatedRoute, public dialog: MatDialog) { } ngOnInit() { this.reload(); } ngAfterViewInit() { if (this.sort) this.termsDatasource.sort = this.sort; } reload() { this.route.queryParams.subscribe((params) => { this.service.loadVocabulary(params['id'], (data: Vocabulary) => this.voc = data); this.service.loadVocabularyTerms(params['id'], (data: VocabularyTerm[]) => this.termsDatasource.data = data); }); } applyFilter(event: Event) { const filterValue = (event.target as HTMLInputElement).value.trim().toLowerCase(); this.termsDatasource.filter = filterValue; } newVocabularyTermDialog(): void { if (this.voc?.id) { const dialogRef = this.dialog.open(VocTermDialog, { data: { vocabulary: this.voc.id, code: '', name: '', encoding: 'OPENAIRE', synonyms: []}, width: '80%' }); dialogRef.afterClosed().subscribe(result => { if (result) this.reload(); }); } } editVocabularyTermDialog(term: VocabularyTerm): void { const dialogRef = this.dialog.open(VocTermDialog, { data: term, width: '80%' }); dialogRef.afterClosed().subscribe(result => { if (result) this.reload(); }); } deleteVocabularyTerm(term: VocabularyTerm): void { if (confirm("Are you sure?") && this.voc?.id && term.code) { this.service.deleteVocabularyTerm(this.voc.id, term.code, (data: void) => this.reload()); } } } @Component({ selector: 'voc-dialog', templateUrl: 'voc-dialog.html', styleUrls: ['vocabularies.component.css'] }) export class VocDialog { vocForm = new FormGroup({ id: new FormControl(''), name: new FormControl(''), description: new FormControl('') }); constructor(public dialogRef: MatDialogRef, @Inject(MAT_DIALOG_DATA) public data: any, public service: ISService) { this.vocForm.get('id')?.setValue(data.id); this.vocForm.get('name')?.setValue(data.name); this.vocForm.get('description')?.setValue(data.description); } onSubmit(): void { const voc = Object.assign({}, this.data, this.vocForm.value); this.service.saveVocabulary(voc, (data: void) => this.dialogRef.close(1), this.vocForm); } onNoClick(): void { this.dialogRef.close(); } } @Component({ selector: 'voc-term-dialog', templateUrl: 'voc-term-dialog.html', styleUrls: ['vocabularies.component.css'] }) export class VocTermDialog { termForm = new FormGroup({ code: new FormControl(''), name: new FormControl(''), encoding: new FormControl('OPENAIRE'), tmpSynonymTerm: new FormControl(''), tmpSynonymEncoding: new FormControl('OPENAIRE') }); synonymsDatasource: MatTableDataSource = new MatTableDataSource([]); synonymColums: string[] = ['term', 'encoding', 'buttons']; @ViewChild(MatTable) synonymsTable: MatTable | undefined; constructor(public dialogRef: MatDialogRef, @Inject(MAT_DIALOG_DATA) public data: any, public service: ISService) { this.termForm.get('code')?.setValue(data.code); this.termForm.get('name')?.setValue(data.name); this.termForm.get('encoding')?.setValue(data.encoding); this.synonymsDatasource.data = data.synonyms; } onSubmit(): void { console.log('SUBMIT'); let oldCode = this.data.code; let voc = this.data.vocabulary; let term:VocabularyTerm = { code : this.termForm.get('code')?.value!, name : this.termForm.get('name')?.value!, encoding : this.termForm.get('encoding')?.value!, synonyms: this.synonymsDatasource.data, vocabulary: voc } this.service.saveVocabularyTerm(voc, term, (data: void) => { if (oldCode && oldCode != term.code) { this.service.deleteVocabularyTerm(voc, oldCode, (data: void) => this.dialogRef.close(1)) } else { this.dialogRef.close(1) } }, this.termForm); } removeSynonym(pos:number) { this.synonymsDatasource.data.splice(pos, 1); this.synonymsTable?.renderRows(); } isNewSynonymValid(): boolean { if (!this.termForm.get('tmpSynonymTerm')) return false; if (!this.termForm.get('tmpSynonymEncoding')) return false; if (this.termForm.get('tmpSynonymTerm')?.value?.trim().length == 0) return false; if (this.termForm.get('tmpSynonymEncoding')?.value?.trim().length == 0) return false; return true; } addSynonym() { this.synonymsDatasource.data.push({ term: this.termForm.get('tmpSynonymTerm')?.value!, encoding: this.termForm.get('tmpSynonymEncoding')?.value! }); this.termForm.get('tmpSynonymTerm')?.setValue(''); this.termForm.get('tmpSynonymEncoding')?.setValue('OPENAIRE'); this.synonymsTable?.renderRows(); } onNoClick(): void { this.dialogRef.close(); } }