partial implementatiom of add/edit vocabulary term

This commit is contained in:
Michele Artini 2023-01-30 14:58:42 +01:00
parent e83bd36fc1
commit 4cf13df0ab
3 changed files with 124 additions and 21 deletions

View File

@ -1 +1,77 @@
XXXXXX <form [formGroup]="termForm" (ngSubmit)="onSubmit()">
<h1 mat-dialog-title *ngIf="data.code">Edit term</h1>
<h1 mat-dialog-title *ngIf="!data.code">New term</h1>
<div mat-dialog-content>
<mat-form-field appearance="fill" style="width: 100%;">
<mat-label>Code</mat-label>
<input matInput formControlName="code" required />
<mat-error *ngIf="termForm.get('id')?.invalid">This field is <strong>required</strong></mat-error>
</mat-form-field>
<mat-form-field appearance="fill" style="width: 100%;">
<mat-label>Name</mat-label>
<input matInput formControlName="name" required />
<mat-error *ngIf="termForm.get('name')?.invalid">This field is <strong>required</strong></mat-error>
</mat-form-field>
<mat-form-field appearance="fill" style="width: 100%;">
<mat-label>Encoding</mat-label>
<input matInput formControlName="encoding" />
</mat-form-field>
*** TO COMPLETE ***
<table>
<thead>
<tr>
<th>Synonym</th>
<th style="width: 20%">Encoding</th>
<th style="width: 8em"></th>
</tr>
</thead>
<tbody>
<tr *ngIf="synonyms.length == 0">
<td colspan="3">0 synonym(s)</td>
</tr>
<tr *ngFor="let s of synonyms; index as i">
<td>{{s.term}}</td>
<td>{{s.encoding}}</td>
<td class="table-buttons">
<button mat-stroked-button color="warn" (ng-click)="removeSynonym(i)" [mat-dialog-close]="false">delete</button>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>
<mat-form-field appearance="outline" style="width: 100%;">
<mat-label>New term</mat-label>
<input matInput [(ngModel)]="tmpSynonym.term" />
</mat-form-field>
</td>
<td>
<mat-form-field appearance="outline" style="width: 100%;">
<mat-label>New encoding</mat-label>
<input matInput [(ngModel)]="tmpSynonym.encoding" />
</mat-form-field>
</td>
<td class="table-buttons">
<button mat-stroked-button color="primary" (ng-click)="addSynonym()" [mat-dialog-close]="false"
[disabled]="tmpSynonym.term.length == 0 || tmpSynonym.encoding.length == 0">add</button>
</tr>
</tfoot>
</table>
</div>
<div mat-dialog-actions>
<button mat-stroked-button color="primary" type="submit" [disabled]="!termForm.valid">Submit</button>
<button mat-stroked-button color="primary" mat-dialog-close>Close</button>
<mat-error *ngIf="termForm.errors?.['serverError']">
{{ termForm.errors?.['serverError'] }}
</mat-error>
</div>
</form>

View File

@ -2,7 +2,7 @@ import { Component, Inject, AfterViewInit, OnInit, ViewChild } from '@angular/co
import { ISService } from '../is.service'; import { ISService } from '../is.service';
import { MatTableDataSource } from '@angular/material/table'; import { MatTableDataSource } from '@angular/material/table';
import { MatSort, Sort } from '@angular/material/sort'; import { MatSort, Sort } from '@angular/material/sort';
import { Vocabulary } from '../model/controller.model'; import { Vocabulary, VocabularyTermSynonym } from '../model/controller.model';
import { ActivatedRoute, Params } from '@angular/router'; import { ActivatedRoute, Params } from '@angular/router';
import { Observable, combineLatest } from 'rxjs'; import { Observable, combineLatest } from 'rxjs';
import { map } from 'rxjs/operators'; import { map } from 'rxjs/operators';
@ -113,7 +113,7 @@ export class VocabularyEditorComponent implements OnInit, AfterViewInit {
newVocabularyTermDialog(): void { newVocabularyTermDialog(): void {
if (this.voc?.id) { if (this.voc?.id) {
const dialogRef = this.dialog.open(VocTermDialog, { const dialogRef = this.dialog.open(VocTermDialog, {
data: { vocabulary: this.voc.id, code: '', name: '', encoding: '', synonyms: []}, data: { vocabulary: this.voc.id, code: '', name: '', encoding: 'OPENAIRE', synonyms: []},
width: '80%' width: '80%'
}); });
@ -179,21 +179,43 @@ export class VocDialog {
styleUrls: ['vocabularies.component.css'] styleUrls: ['vocabularies.component.css']
}) })
export class VocTermDialog { export class VocTermDialog {
termForm = new FormGroup({ termForm = new FormGroup({
code: new FormControl(''), code: new FormControl(''),
name: new FormControl(''), name: new FormControl(''),
encoding: new FormControl('') encoding: new FormControl('')
}); });
synonyms:VocabularyTermSynonym[] = [];
tmpSynonym:VocabularyTermSynonym = { term: '', encoding: 'OPENAIRE' };
constructor(public dialogRef: MatDialogRef<VocDialog>, @Inject(MAT_DIALOG_DATA) public data: any, public service: ISService) { constructor(public dialogRef: MatDialogRef<VocDialog>, @Inject(MAT_DIALOG_DATA) public data: any, public service: ISService) {
this.termForm.get('code')?.setValue(data.id); this.termForm.get('code')?.setValue(data.code);
this.termForm.get('name')?.setValue(data.name); this.termForm.get('name')?.setValue(data.name);
this.termForm.get('encoding')?.setValue(data.encoding); this.termForm.get('encoding')?.setValue(data.encoding);
this.synonyms = data.synonyms;
} }
onSubmit(): void { onSubmit(): void {
let oldCode = this.data.code;
let voc = this.data.vocabulary;
const term = Object.assign({}, this.data, this.termForm.value); const term = Object.assign({}, this.data, this.termForm.value);
this.service.saveVocabularyTerm(term.vocabulary, term, (data: void) => this.dialogRef.close(1), this.termForm);
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.synonyms.splice(pos, 1);
}
addSynonym() {
this.synonyms.push(Object.assign({}, this.tmpSynonym));
this.tmpSynonym = { term: '', encoding: 'OPENAIRE' };
} }
onNoClick(): void { onNoClick(): void {

View File

@ -1,15 +1,15 @@
<h2>Vocabulary Editor</h2> <h2>Vocabulary Editor</h2>
<p> <p>
<b>Vocabulary ID: </b>{{voc?.id}}<br /> <b>Vocabulary ID: </b>{{voc?.id}}<br />
<b>Vocabulary Name: </b>{{voc?.name}}<br /> <b>Vocabulary Name: </b>{{voc?.name}}<br />
<b>Description: </b>{{voc?.description}} <b>Description: </b>{{voc?.description}}
</p> </p>
<p> <p>
<a mat-stroked-button color="primary" [routerLink]="['/adv_resources/vocabulary']">return to vocabulary list</a> <a mat-stroked-button color="primary" [routerLink]="['/adv_resources/vocabulary']">return to vocabulary list</a>
<button mat-stroked-button color="primary" (click)="newVocabularyTermDialog()">create a new term</button> <button mat-stroked-button color="primary" (click)="newVocabularyTermDialog()">create a new term</button>
<a mat-stroked-button color="primary" href="/api/vocs/{{voc?.id}}/terms" target="_blank">Download</a> <a mat-stroked-button color="primary" href="/api/vocs/{{voc?.id}}/terms" target="_blank">Download</a>
</p> </p>
<mat-form-field style="width: 100%; margin-top: 10px;"> <mat-form-field style="width: 100%; margin-top: 10px;">
@ -20,34 +20,39 @@
<table mat-table [dataSource]="termsDatasource" matSort class="mat-elevation-z8"> <table mat-table [dataSource]="termsDatasource" matSort class="mat-elevation-z8">
<ng-container matColumnDef="code"> <ng-container matColumnDef="code">
<th mat-header-cell *matHeaderCellDef style="width: 15%;" mat-sort-header sortActionDescription="Sort by Code"> Code </th> <th mat-header-cell *matHeaderCellDef style="width: 15%;" mat-sort-header sortActionDescription="Sort by Code"> Code
</th>
<td mat-cell *matCellDef="let element"><b>{{element.code}}</b></td> <td mat-cell *matCellDef="let element"><b>{{element.code}}</b></td>
</ng-container> </ng-container>
<ng-container matColumnDef="name"> <ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef style="width: 15%;" mat-sort-header sortActionDescription="Sort by Name"> Name </th> <th mat-header-cell *matHeaderCellDef style="width: 15%;" mat-sort-header sortActionDescription="Sort by Name"> Name
</th>
<td mat-cell *matCellDef="let element"> {{element.name}} </td> <td mat-cell *matCellDef="let element"> {{element.name}} </td>
</ng-container> </ng-container>
<ng-container matColumnDef="encoding"> <ng-container matColumnDef="encoding">
<th mat-header-cell *matHeaderCellDef style="width: 10%;" mat-sort-header sortActionDescription="Sort by Encoding"> Encoding </th> <th mat-header-cell *matHeaderCellDef style="width: 10%;" mat-sort-header sortActionDescription="Sort by Encoding">
Encoding </th>
<td mat-cell *matCellDef="let element">{{element.encoding}}</td> <td mat-cell *matCellDef="let element">{{element.encoding}}</td>
</ng-container> </ng-container>
<ng-container matColumnDef="synonyms"> <ng-container matColumnDef="synonyms">
<th mat-header-cell *matHeaderCellDef style="width: 40%;" mat-sort-header sortActionDescription="Sort by Synonyms"> Description </th> <th mat-header-cell *matHeaderCellDef style="width: 40%;" mat-sort-header sortActionDescription="Sort by Synonyms">
Description </th>
<td mat-cell *matCellDef="let element" style="font-size: 0,7em;"> <td mat-cell *matCellDef="let element" style="font-size: 0,7em;">
<span *ngFor="let s of element.synonyms" class="badge-label badge-info"> <span class="muted" *ngIf="element.synonyms.length == 0">0 synonym(s)</span>
{{s.term}} <span *ngFor="let s of element.synonyms" class="badge-label badge-info">
</span> {{s.term}}
</span>
</td> </td>
</ng-container> </ng-container>
<ng-container matColumnDef="buttons"> <ng-container matColumnDef="buttons">
<th mat-header-cell *matHeaderCellDef style="text-align: right;"></th> <th mat-header-cell *matHeaderCellDef style="text-align: right;"></th>
<td mat-cell *matCellDef="let element" class="table-buttons"> <td mat-cell *matCellDef="let element" class="table-buttons">
<button mat-stroked-button color="primary" (click)="editVocabularyTermDialog(element)">edit</button> <button mat-stroked-button color="primary" (click)="editVocabularyTermDialog(element)">edit</button>
<button mat-stroked-button color="warn" (click)="deleteVocabularyTerm(element)">delete</button> <button mat-stroked-button color="warn" (click)="deleteVocabularyTerm(element)">delete</button>
</td> </td>
</ng-container> </ng-container>
@ -58,4 +63,4 @@
<tr class="mat-row" *matNoDataRow> <tr class="mat-row" *matNoDataRow>
<td class="mat-cell" colspan="5" style="padding: 0 16px;">No data matching the filter "{{input.value}}"</td> <td class="mat-cell" colspan="5" style="padding: 0 16px;">No data matching the filter "{{input.value}}"</td>
</tr> </tr>
</table> </table>