110 lines
3.2 KiB
TypeScript
110 lines
3.2 KiB
TypeScript
import { Component, Inject,AfterViewInit, OnInit, ViewChild } from '@angular/core';
|
|
import { ISService } from '../is.service';
|
|
import { MatTableDataSource } from '@angular/material/table';
|
|
import { MatSort, Sort } from '@angular/material/sort';
|
|
import { Vocabulary } 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 { KeyValue, ContextParam } from '../model/controller.model';
|
|
import { FormControl, FormGroup, FormGroupDirective, NgForm, Validators } from '@angular/forms';
|
|
|
|
@Component({
|
|
selector: 'app-vocabularies',
|
|
templateUrl: './vocabularies.component.html',
|
|
styleUrls: ['./vocabularies.component.css']
|
|
})
|
|
export class VocabulariesComponent {
|
|
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();
|
|
});
|
|
}
|
|
|
|
deleteVocabularyDialog(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 {
|
|
}
|
|
|
|
@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();
|
|
}
|
|
} |