feat(ontology): edit data model info (DSP-1208)

package.json

@@ -32,7 +32,7 @@
     "@angular/platform-browser-dynamic": "^9.1.13",
     "@angular/router": "^9.1.13",
     "@ckeditor/ckeditor5-angular": "^1.2.3",
-    "@dasch-swiss/dsp-js": "^2.1.1",
+    "@dasch-swiss/dsp-js": "^2.2.0",
     "@dasch-swiss/dsp-ui": "^1.2.2",
     "@ngx-translate/core": "^12.1.2",
     "@ngx-translate/http-loader": "5.0.0",

src/app/main/dialog/dialog.component.html

@@ -213,15 +213,16 @@
 
     <!-- Ontology editor: create new ontology -->
     <div *ngSwitchCase="'createOntology'">
-        <app-dialog-header [title]="'Data model'" [subtitle]="'Create new'"></app-dialog-header>
+        <app-dialog-header [title]="data.title" [subtitle]="'Create new'"></app-dialog-header>
         <app-ontology-form [projectcode]="data.project" (closeDialog)="dialogRef.close($event)"
             [existingOntologyNames]="data.existing"></app-ontology-form>
     </div>
 
     <div *ngSwitchCase="'editOntology'">
-        <app-dialog-header [title]="'Data model'" [subtitle]="'Edit'" (close)="dialogRef.close()">
+        <app-dialog-header [title]="data.title" [subtitle]="'Customize data model'" (close)="dialogRef.close()">
         </app-dialog-header>
-        <p class="todo" [innerHtml]="notYetImplemented"></p>
+        <app-ontology-form [iri]="data.id" [projectcode]="data.project" (closeDialog)="dialogRef.close($event)"
+            [existingOntologyNames]="data.existing"></app-ontology-form>
     </div>
 
     <div *ngSwitchCase="'deleteOntology'">

src/app/project/ontology/ontology-form/ontology-form.component.html

@@ -1,23 +1,31 @@
 <dsp-progress-indicator *ngIf="loading"></dsp-progress-indicator>
 
-<form [formGroup]="ontologyForm" (ngSubmit)="createOntology()" class="form" *ngIf="!loading">
+<form [formGroup]="ontologyForm" (ngSubmit)="submitData()" class="form" *ngIf="!loading">
     <!-- auto complete list to select resource classes -->
     <div class="form-content">
         <mat-form-field class="large-field ontology-name">
-            <input matInput [maxlength]="nameMaxLength" [formControl]="ontologyForm.controls['name']"
+            <input matInput class="ontology-name" [maxlength]="nameMaxLength" [formControl]="ontologyForm.controls['name']"
                 [placeholder]="'Set a unique name *'">
-            <mat-hint *ngIf="formErrors.name">
+            <mat-hint *ngIf="formErrors.name" class="medium-field">
                 {{ formErrors.name }}
             </mat-hint>
+            <mat-hint align="end">{{ontologyForm.controls['name'].value.length}} / {{nameMaxLength}}</mat-hint>
         </mat-form-field>
 
         <mat-form-field class="large-field ontology-label">
-            <input matInput [formControl]="ontologyForm.controls['label']" [placeholder]="'Label'"
+            <input matInput [formControl]="ontologyForm.controls['label']" [placeholder]="iri ? 'Label *' : 'Label'"
                 [value]="ontologyLabel">
-                <span matPrefix>{{project.shortname}}:&nbsp;</span>
-                <mat-hint *ngIf="formErrors.label">
-                    {{ formErrors.label }}
-                </mat-hint>
+            <span *ngIf="!iri" matPrefix>{{project.shortname}}:&nbsp;</span>
+            <mat-hint *ngIf="formErrors.label">
+                {{ formErrors.label }}
+            </mat-hint>
+        </mat-form-field>
+
+        <mat-form-field class="large-field ontology-comment">
+            <textarea matInput [formControl]="ontologyForm.controls['comment']"
+                [placeholder]="'Comment'" [value]="ontologyComment"
+                [matAutosizeMinRows]="6" [matAutosizeMaxRows]="12">
+            </textarea>
         </mat-form-field>
 
         <div class="form-panel form-action">
@@ -28,8 +36,11 @@
             </span>
             <span class="fill-remaining-space"></span>
             <span>
-                <button mat-raised-button type="submit" color="primary" [disabled]="!ontologyForm.valid">
-                    Create
+                <button mat-raised-button type="submit" [color]="error ? 'warn' : 'primary'" [disabled]="!ontologyForm.valid">
+                    <dsp-progress-indicator [color]="'white'" [status]="0" *ngIf="loading" class="submit-progress">
+                    </dsp-progress-indicator>
+                    <mat-icon *ngIf="error && !loading">close</mat-icon>
+                    {{error ? 'Failed' : (iri ? 'Update' : 'Create')}}
                 </button>
             </span>
         </div>

src/app/project/ontology/ontology-form/ontology-form.component.spec.ts

@@ -3,9 +3,10 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { FormBuilder, ReactiveFormsModule } from '@angular/forms';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
+import { By } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { RouterTestingModule } from '@angular/router/testing';
-import { KnoraApiConnection } from '@dasch-swiss/dsp-js';
+import { KnoraApiConnection, MockProjects } from '@dasch-swiss/dsp-js';
 import {
     AppInitService,
     DspActionModule,
@@ -14,23 +15,23 @@ import {
     DspCoreModule
 } from '@dasch-swiss/dsp-ui';
 import { TranslateModule } from '@ngx-translate/core';
-import { DialogComponent } from 'src/app/main/dialog/dialog.component';
-import { ErrorComponent } from 'src/app/main/error/error.component';
+import { of } from 'rxjs';
+import { CacheService } from 'src/app/main/cache/cache.service';
 import { TestConfig } from 'test.config';
 import { OntologyFormComponent } from './ontology-form.component';
 
 describe('OntologyFormComponent', () => {
-    let component: OntologyFormComponent;
-    let fixture: ComponentFixture<OntologyFormComponent>;
+    let ontologyFormComponent: OntologyFormComponent;
+    let ontologyFormFixture: ComponentFixture<OntologyFormComponent>;
 
     const formBuilder: FormBuilder = new FormBuilder();
 
+    const cacheServiceSpy = jasmine.createSpyObj('CacheService', ['get']);
+
     beforeEach(async(() => {
         TestBed.configureTestingModule({
             declarations: [
-                OntologyFormComponent,
-                DialogComponent,
-                ErrorComponent
+                OntologyFormComponent
             ],
             imports: [
                 BrowserAnimationsModule,
@@ -54,26 +55,95 @@ describe('OntologyFormComponent', () => {
                 {
                     provide: DspApiConnectionToken,
                     useValue: new KnoraApiConnection(TestConfig.ApiConfig)
+                },
+                {
+                    provide: CacheService,
+                    useValue: cacheServiceSpy
                 }
             ]
         })
             .compileComponents();
     }));
 
     beforeEach(() => {
-        fixture = TestBed.createComponent(OntologyFormComponent);
-        component = fixture.componentInstance;
+        // mock cache service for currentOntology
+        const cacheSpy = TestBed.inject(CacheService);
+
+        (cacheSpy as jasmine.SpyObj<CacheService>).get.and.callFake(
+            () => {
+                const response = MockProjects.mockProject();
+                return of(response);
+            }
+        );
 
-        // pass in the form dynamically
-        component.ontologyForm = formBuilder.group({
-            name: null,
-            label: null
-        });
+        ontologyFormFixture = TestBed.createComponent(OntologyFormComponent);
+        ontologyFormComponent = ontologyFormFixture.componentInstance;
+        ontologyFormComponent.projectcode = '00FF';
+        // ontologyFormComponent.iri = 'http://0.0.0.0:3333/ontology/0001/anything/v2';
+        ontologyFormComponent.existingOntologyNames = ['images'];
 
-        fixture.detectChanges();
+        ontologyFormComponent.ngOnInit();
+        ontologyFormFixture.detectChanges();
     });
 
+
     it('should create', () => {
-        expect(component).toBeTruthy();
+        expect(ontologyFormComponent).toBeTruthy();
+    });
+
+    it('should render input elements', () => {
+        const compiled = ontologyFormFixture.debugElement;
+        const nameInput = compiled.query(By.css('.ontology-name input'));
+        const labelInput = compiled.query(By.css('.ontology-label input'));
+        const commentInput = compiled.query(By.css('.ontology-comment textarea'));
+
+        expect(nameInput).toBeTruthy();
+        expect(labelInput).toBeTruthy();
+        expect(commentInput).toBeTruthy();
     });
+
+    it('should test form validity with allowed name', () => {
+        const form = ontologyFormComponent.ontologyForm;
+        expect(form.valid).toBeFalsy();
+
+        const nameInput = form.controls.name;
+        nameInput.setValue('biblio');
+
+        expect(form.valid).toBeTruthy();
+    });
+
+    it('should test form validity with forbidden names', () => {
+        const form = ontologyFormComponent.ontologyForm;
+        expect(form.valid).toBeFalsy();
+
+        const nameInput = form.controls.name;
+
+        nameInput.setValue('ontology');
+        expect(form.valid).toBeFalsy();
+
+        nameInput.setValue('images');
+        expect(form.valid).toBeFalsy();
+
+    });
+
+    it('should test form validity without label', () => {
+        const form = ontologyFormComponent.ontologyForm;
+        expect(form.valid).toBeFalsy();
+
+        const nameInput = form.controls.name;
+        const labelInput = form.controls.label;
+
+        nameInput.setValue('biblio');
+
+        const compiled = ontologyFormFixture.debugElement;
+        expect(ontologyFormComponent.ontologyLabel).toEqual('Biblio');
+        expect(form.valid).toBeTruthy();
+
+
+        labelInput.setValue('Biblio Ontology');
+        expect(ontologyFormComponent.ontologyForm.controls.label.value).toEqual('Biblio Ontology');
+        expect(form.valid).toBeTruthy();
+
+    });
+
 });