vocabulary editor

This commit is contained in:
Michele Artini 2023-01-31 10:19:19 +01:00
parent 4cf13df0ab
commit a5b318a065
12 changed files with 109 additions and 307 deletions

View File

@ -1,74 +0,0 @@
import { RouterTestingModule } from '@angular/router/testing';
import { LayoutModule } from '@angular/cdk/layout';
import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import { MatListModule } from '@angular/material/list';
import { MatSidenavModule } from '@angular/material/sidenav';
import { MatToolbarModule } from '@angular/material/toolbar';
import { AppComponent } from './app.component';
describe('AppComponent', () => {
let component: AppComponent;
let fixture: ComponentFixture<AppComponent>;
beforeEach(waitForAsync(() => {
TestBed.configureTestingModule({
declarations: [AppComponent],
imports: [
NoopAnimationsModule,
LayoutModule,
MatButtonModule,
MatIconModule,
MatListModule,
MatSidenavModule,
MatToolbarModule,
]
}).compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(AppComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should compile', () => {
expect(component).toBeTruthy();
});
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [
RouterTestingModule
],
declarations: [
AppComponent
],
}).compileComponents();
});
it('should create the app', () => {
const fixture = TestBed.createComponent(AppComponent);
const app = fixture.componentInstance;
expect(app).toBeTruthy();
});
it(`should have as title 'dnet-is-application'`, () => {
const fixture = TestBed.createComponent(AppComponent);
const app = fixture.componentInstance;
expect(app.title).toEqual('dnet-is-application');
});
it('should render title', () => {
const fixture = TestBed.createComponent(AppComponent);
fixture.detectChanges();
const compiled = fixture.nativeElement as HTMLElement;
expect(compiled.querySelector('.content span')?.textContent).toContain('dnet-is-application app is running!');
});
});

View File

@ -1,23 +0,0 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { ContextsComponent } from './contexts.component';
describe('ContextsComponent', () => {
let component: ContextsComponent;
let fixture: ComponentFixture<ContextsComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ ContextsComponent ]
})
.compileComponents();
fixture = TestBed.createComponent(ContextsComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

View File

@ -1,23 +0,0 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { InfoComponent } from './info.component';
describe('InfoComponent', () => {
let component: InfoComponent;
let fixture: ComponentFixture<InfoComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ InfoComponent ]
})
.compileComponents();
fixture = TestBed.createComponent(InfoComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

View File

@ -1,16 +0,0 @@
import { TestBed } from '@angular/core/testing';
import { ISService } from './is.service';
describe('ISService', () => {
let service: ISService;
beforeEach(() => {
TestBed.configureTestingModule({});
service = TestBed.inject(ISService);
});
it('should be created', () => {
expect(service).toBeTruthy();
});
});

View File

@ -1,23 +0,0 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { MainMenuPanelsComponent } from './main-menu-panels.component';
describe('MainMenuPanelsComponent', () => {
let component: MainMenuPanelsComponent;
let fixture: ComponentFixture<MainMenuPanelsComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ MainMenuPanelsComponent ]
})
.compileComponents();
fixture = TestBed.createComponent(MainMenuPanelsComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

View File

@ -1,32 +0,0 @@
import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import { MatTreeModule } from '@angular/material/tree';
import { MainMenuTreeComponent } from './main-menu-tree.component';
describe('MainMenuTreeComponent', () => {
let component: MainMenuTreeComponent;
let fixture: ComponentFixture<MainMenuTreeComponent>;
beforeEach(waitForAsync(() => {
TestBed.configureTestingModule({
declarations: [ MainMenuTreeComponent ],
imports: [
MatButtonModule,
MatIconModule,
MatTreeModule,
]
}).compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(MainMenuTreeComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should compile', () => {
expect(component).toBeTruthy();
});
});

View File

@ -1,23 +0,0 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { ProtocolsComponent } from './protocols.component';
describe('ProtocolsComponent', () => {
let component: ProtocolsComponent;
let fixture: ComponentFixture<ProtocolsComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ ProtocolsComponent ]
})
.compileComponents();
fixture = TestBed.createComponent(ProtocolsComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

View File

@ -1,23 +0,0 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { ResourcesComponent } from './resources.component';
describe('ResourcesComponent', () => {
let component: ResourcesComponent;
let fixture: ComponentFixture<ResourcesComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ ResourcesComponent ]
})
.compileComponents();
fixture = TestBed.createComponent(ResourcesComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

View File

@ -20,13 +20,68 @@
<input matInput formControlName="encoding" />
</mat-form-field>
*** TO COMPLETE ***
<table>
<table mat-table [dataSource]="synonymsDatasource" class="mat-elevation-z8">
<ng-container matColumnDef="term">
<th mat-header-cell *matHeaderCellDef>Term</th>
<td mat-cell *matCellDef="let element">{{element.term}}</td>
<td mat-footer-cell *matFooterCellDef>
<mat-form-field appearance="fill" style="width: 100%;">
<mat-label>New term</mat-label>
<input matInput formControlName="tmpSynonymTerm" />
</mat-form-field>
</td>
</ng-container>
<ng-container matColumnDef="encoding">
<th mat-header-cell *matHeaderCellDef style="width: 20%;">Encoding</th>
<td mat-cell *matCellDef="let element">{{element.encoding}}</td>
<td mat-footer-cell *matFooterCellDef>
<mat-form-field appearance="fill" style="width: 100%;">
<mat-label>New encoding</mat-label>
<input matInput formControlName="tmpSynonymEncoding" />
</mat-form-field>
</td>
</ng-container>
<ng-container matColumnDef="buttons">
<th mat-header-cell *matHeaderCellDef style="text-align: right; width: 8em;"></th>
<td mat-cell *matCellDef="let index = index" class="table-buttons">
<button mat-stroked-button
color="warn"
type="button"
(click)="removeSynonym(index)">
delete
</button>
</td>
<td mat-footer-cell *matFooterCellDef class="table-buttons">
<button mat-stroked-button
color="primary"
type="button"
(click)="addSynonym()"
[disabled]="!isNewSynonymValid()">
add
</button>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="synonymColums"></tr>
<tr mat-row *matRowDef="let row; columns: synonymColums;"></tr>
<!-- Row shown when there is no matching data. -->
<tr class="mat-row" *matNoDataRow>
<td class="mat-cell" colspan="3" style="padding: 0 16px;">No synonyms</td>
</tr>
<tr mat-footer-row *matFooterRowDef="synonymColums"></tr>
</table>
<!--
<table style="border: 1px solid gray; font-size: 0.9em;">
<thead>
<tr>
<th>Synonym</th>
<th style="width: 20%">Encoding</th>
<th style="text-align: left;">Synonym</th>
<th style="width: 20%; text-align: left;">Encoding</th>
<th style="width: 8em"></th>
</tr>
</thead>
@ -38,32 +93,37 @@
<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-form-field appearance="fill" style="width: 100%;">
<mat-label>New term</mat-label>
<input matInput [(ngModel)]="tmpSynonym.term" />
<input matInput formControlName="tmpSynonymTerm" />
</mat-form-field>
</td>
<td>
<mat-form-field appearance="outline" style="width: 100%;">
<mat-form-field appearance="fill" style="width: 100%;">
<mat-label>New encoding</mat-label>
<input matInput [(ngModel)]="tmpSynonym.encoding" />
<input matInput formControlName="tmpSynonymEncoding" />
</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>
<button mat-stroked-button
color="primary"
type="button"
(click)="addSynonym()"
[disabled]="!isNewSynonymValid()">
add
</button>
</td>
</tr>
</tfoot>
</table>
-->
</div>
<div mat-dialog-actions>
@ -74,4 +134,4 @@
</mat-error>
</div>
</form>
</form>

View File

@ -1,23 +0,0 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { VocabulariesComponent } from './vocabularies.component';
describe('VocabulariesComponent', () => {
let component: VocabulariesComponent;
let fixture: ComponentFixture<VocabulariesComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ VocabulariesComponent ]
})
.compileComponents();
fixture = TestBed.createComponent(VocabulariesComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

View File

@ -1,6 +1,6 @@
import { Component, Inject, AfterViewInit, OnInit, ViewChild } from '@angular/core';
import { ISService } from '../is.service';
import { MatTableDataSource } from '@angular/material/table';
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';
@ -183,24 +183,35 @@ export class VocTermDialog {
termForm = new FormGroup({
code: new FormControl(''),
name: new FormControl(''),
encoding: new FormControl('')
encoding: new FormControl('OPENAIRE'),
tmpSynonymTerm: new FormControl(''),
tmpSynonymEncoding: new FormControl('OPENAIRE')
});
synonyms:VocabularyTermSynonym[] = [];
tmpSynonym:VocabularyTermSynonym = { term: '', encoding: '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.synonyms = data.synonyms;
this.synonymsDatasource.data = data.synonyms;
}
onSubmit(): void {
console.log('SUBMIT');
let oldCode = this.data.code;
let voc = this.data.vocabulary;
const term = Object.assign({}, this.data, this.termForm.value);
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) {
@ -210,12 +221,26 @@ export class VocTermDialog {
}
removeSynonym(pos:number) {
this.synonyms.splice(pos, 1);
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.synonyms.push(Object.assign({}, this.tmpSynonym));
this.tmpSynonym = { term: '', encoding: 'OPENAIRE' };
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 {

View File

@ -1,23 +0,0 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { WfHistoryComponent } from './wf-history.component';
describe('WfHistoryComponent', () => {
let component: WfHistoryComponent;
let fixture: ComponentFixture<WfHistoryComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ WfHistoryComponent ]
})
.compileComponents();
fixture = TestBed.createComponent(WfHistoryComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});