dnet-applications/frontends/dnet-is-application/src/app/vocabularies/vocabularies.component.ts

import { Component, Inject, AfterViewInit, OnInit, ViewChild } from '@angular/core';
import { ISService } from '../common/is.service';
import { MatTable, MatTableDataSource } from '@angular/material/table';
import { MatSort } from '@angular/material/sort';
import { Vocabulary, VocabularyTerm, VocabularyTermSynonym } from '../common/is.model';
import { ActivatedRoute } from '@angular/router';
import { MatDialog, MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
import { FormControl, FormGroup } from '@angular/forms';

@Component({
  selector: 'app-vocabularies',
  templateUrl: './vocabularies.component.html',
  styleUrls: ['./vocabularies.component.css']
})
export class VocabulariesComponent implements OnInit, AfterViewInit {
  vocsDatasource: MatTableDataSource<Vocabulary> = new MatTableDataSource<Vocabulary>([]);

  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<VocabularyTerm> = new MatTableDataSource<VocabularyTerm>([]);
  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<VocDialog>, @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<VocabularyTermSynonym> = new MatTableDataSource<VocabularyTermSynonym>([]);
  synonymColums: string[] = ['term', 'encoding', 'buttons'];
  @ViewChild(MatTable) synonymsTable: MatTable<VocabularyTermSynonym> | undefined;

  constructor(public dialogRef: MatDialogRef<VocDialog>, @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();
  }
}