partial implementatiom of add/edit vocabulary term

frontends/dnet-is-application/src/app/vocabularies/voc-term-dialog.html

@@ -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>

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

@@ -2,7 +2,7 @@ import { Component, Inject, AfterViewInit, OnInit, ViewChild } from '@angular/co
 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 { Vocabulary, VocabularyTermSynonym } from '../model/controller.model';
 import { ActivatedRoute, Params } from '@angular/router';
 import { Observable, combineLatest } from 'rxjs';
 import { map } from 'rxjs/operators';
@@ -113,7 +113,7 @@ export class VocabularyEditorComponent implements OnInit, AfterViewInit {
   newVocabularyTermDialog(): void {
     if (this.voc?.id) {
       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%'
       });
 
@@ -179,21 +179,43 @@ export class VocDialog {
   styleUrls: ['vocabularies.component.css']
 })
 export class VocTermDialog {
+
   termForm = new FormGroup({
     code: new FormControl(''),
     name: 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) {
-    this.termForm.get('code')?.setValue(data.id);
+    this.termForm.get('code')?.setValue(data.code);
     this.termForm.get('name')?.setValue(data.name);
     this.termForm.get('encoding')?.setValue(data.encoding);
+    this.synonyms = data.synonyms;
   }
 
   onSubmit(): void {
+    let oldCode = this.data.code;
+    let voc = this.data.vocabulary;
+
     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 {

frontends/dnet-is-application/src/app/vocabularies/vocabulary-editor.component.html

@@ -1,15 +1,15 @@
 <h2>Vocabulary Editor</h2>
 
 <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>
-    <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>
 
 <mat-form-field style="width: 100%; margin-top: 10px;">
@@ -20,34 +20,39 @@
 <table mat-table [dataSource]="termsDatasource" matSort class="mat-elevation-z8">
 
   <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>
   </ng-container>
 
   <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>
   </ng-container>
 
   <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>
   </ng-container>
 
   <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;">
-        <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>
   </ng-container>
 
   <ng-container matColumnDef="buttons">
     <th mat-header-cell *matHeaderCellDef style="text-align: right;"></th>
     <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>
   </ng-container>