feat(ontology): form to create and edit property (DSP-1210)

Makefile

@@ -6,6 +6,13 @@ CURRENT_DIR := $(shell dirname $(realpath $(firstword $(MAKEFILE_LIST))))
 
 include vars.mk
 
+#################################
+# Test and lint targets
+#################################
+.PHONY: find-ignored-tests
+find-ignored-tests: ## find all ignored tests (e.g. fdescribe)
+	./find-ignored-tests.sh
+
 #################################
 # Documentation targets
 #################################

src/app/app.module.ts

@@ -61,6 +61,7 @@ import { PropertyFormComponent } from './project/ontology/property-form/property
 import { PropertyInfoComponent } from './project/ontology/property-info/property-info.component';
 import { ResourceClassFormComponent } from './project/ontology/resource-class-form/resource-class-form.component';
 import { ResourceClassInfoComponent } from './project/ontology/resource-class-info/resource-class-info.component';
+import { ResourceClassPropertyFormComponent } from './project/ontology/resource-class-property-form/resource-class-property-form.component';
 import { AddGroupComponent } from './project/permission/add-group/add-group.component';
 import { PermissionComponent } from './project/permission/permission.component';
 import { ProjectFormComponent } from './project/project-form/project-form.component';
@@ -90,108 +91,105 @@ import { SelectResourceClassComponent } from './workspace/resource/resource-inst
 import { ResourceComponent } from './workspace/resource/resource.component';
 import { ResultsComponent } from './workspace/results/results.component';
 
-
-
-
-
 // translate: AoT requires an exported function for factories
 export function httpLoaderFactory(httpClient: HttpClient) {
     return new TranslateHttpLoader(httpClient, 'assets/i18n/', '.json');
 }
 
 @NgModule({
     declarations: [
+        AccountComponent,
+        AddGroupComponent,
+        AddressTemplateComponent,
+        AddUserComponent,
         AppComponent,
-        ProjectComponent,
+        AttributionTabViewComponent,
         BoardComponent,
-        ProjectFormComponent,
         CollaborationComponent,
-        AddUserComponent,
-        OntologyComponent,
-        UserComponent,
-        PasswordFormComponent,
-        ProfileComponent,
-        ProjectsListComponent,
-        UserFormComponent,
         CollectionListComponent,
-        UserMenuComponent,
-        MainComponent,
-        HeaderComponent,
-        ErrorComponent,
-        LoginComponent,
-        AccountComponent,
-        SelectLanguageComponent,
-        ProjectsComponent,
-        SelectGroupComponent,
-        ResultsComponent,
-        ResourceComponent,
+        ContactsTabViewComponent,
+        CookiePolicyComponent,
         DashboardComponent,
+        DatasetTabViewComponent,
         DialogComponent,
-        SystemComponent,
-        UsersComponent,
-        UsersListComponent,
         DialogHeaderComponent,
+        EditListItemComponent,
+        ErrorComponent,
+        ExternalLinksDirective,
+        FooterComponent,
         GridComponent,
-        CookiePolicyComponent,
         GroupsComponent,
         GroupsListComponent,
-        PermissionComponent,
-        AddGroupComponent,
-        ResourceClassFormComponent,
-        PropertyFormComponent,
-        OntologyFormComponent,
-        OntologyVisualizerComponent,
-        VisualizerComponent,
+        HeaderComponent,
+        HelpComponent,
+        InvalidControlScrollDirective,
         ListComponent,
         ListInfoFormComponent,
         ListItemComponent,
         ListItemFormComponent,
+        LoginComponent,
+        MainComponent,
         MembershipComponent,
-        HelpComponent,
-        FooterComponent,
-        ExternalLinksDirective,
-        InvalidControlScrollDirective,
+        OntologyComponent,
+        OntologyFormComponent,
+        OntologyVisualizerComponent,
+        OrganisationTemplateComponent,
+        PasswordFormComponent,
+        PermissionComponent,
+        PersonTemplateComponent,
+        ProfileComponent,
+        ProjectComponent,
+        ProjectFormComponent,
+        ProjectsComponent,
+        ProjectsListComponent,
+        ProjectTabViewComponent,
+        PropertyFormComponent,
+        PropertyInfoComponent,
+        ResourceClassFormComponent,
+        ResourceClassInfoComponent,
+        ResourceClassPropertyFormComponent,
+        ResourceComponent,
         ResourceInstanceFormComponent,
-        SelectProjectComponent,
+        ResultsComponent,
+        SelectGroupComponent,
+        SelectLanguageComponent,
         SelectOntologyComponent,
-        SelectResourceClassComponent,
+        SelectProjectComponent,
         SelectPropertiesComponent,
+        SelectResourceClassComponent,
         SwitchPropertiesComponent,
-        ProjectTabViewComponent,
-        DatasetTabViewComponent,
-        AttributionTabViewComponent,
+        SystemComponent,
         TermsTabViewComponent,
-        ContactsTabViewComponent,
-        PersonTemplateComponent,
-        AddressTemplateComponent,
-        OrganisationTemplateComponent,
-        EditListItemComponent,
-        PropertyInfoComponent,
-        ResourceClassInfoComponent,
-        UrlTemplateComponent
+        UrlTemplateComponent,
+        UserComponent,
+        UserFormComponent,
+        UserMenuComponent,
+        UsersComponent,
+        UsersListComponent,
+        VisualizerComponent,
     ],
     imports: [
         AppRoutingModule,
-        BrowserModule,
+        AngularSplitModule.forRoot(),
         BrowserAnimationsModule,
+        BrowserModule,
+        ClipboardModule,
         CommonModule,
-        HttpClientModule,
-        DspCoreModule,
-        DspViewerModule,
         DspActionModule,
+        DspCoreModule,
         DspSearchModule,
+        DspViewerModule,
+        FormsModule,
+        HttpClientModule,
         MaterialModule,
         ReactiveFormsModule,
-        FormsModule,
         TranslateModule.forRoot({
             loader: {
                 provide: TranslateLoader,
                 useFactory: httpLoaderFactory,
                 deps: [HttpClient]
             }
-        }),
-        ClipboardModule,
-        AngularSplitModule.forRoot()
+        })
     ],
     providers: [
         {

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

@@ -141,35 +141,41 @@
     <!-- Create new list -->
     <div *ngSwitchCase="'createList'">
         <app-dialog-header [title]="'Create new list'" [subtitle]=""></app-dialog-header>
-        <app-list-info-form [projectcode]="data.project" [mode]="'create'" [projectIri]="data.id" (closeDialog)="dialogRef.close($event)">
+        <app-list-info-form [projectcode]="data.project" [mode]="'create'" [projectIri]="data.id"
+            (closeDialog)="dialogRef.close($event)">
         </app-list-info-form>
     </div>
 
     <!-- Insert list child node -->
     <div *ngSwitchCase="'insertListNode'">
         <app-dialog-header [title]="'Insert new child node'" [subtitle]="">
         </app-dialog-header>
-        <app-edit-list-item [iri]="data.id" [projectIri]="data.project" mode="insert" [projectCode]="data.projectCode" [parentIri]="data.parentIri" [position]="data.position" (closeDialog)="dialogRef.close($event)"></app-edit-list-item>
+        <app-edit-list-item [iri]="data.id" [projectIri]="data.project" mode="insert" [projectCode]="data.projectCode"
+            [parentIri]="data.parentIri" [position]="data.position" (closeDialog)="dialogRef.close($event)">
+        </app-edit-list-item>
     </div>
 
     <!-- Update list info -->
     <div *ngSwitchCase="'editListInfo'">
         <app-dialog-header [title]="data.title" [subtitle]="'Edit list info'">
         </app-dialog-header>
-        <app-list-info-form [iri]="data.id" [mode]="'update'" [projectIri]="data.project" (closeDialog)="dialogRef.close()">
+        <app-list-info-form [iri]="data.id" [mode]="'update'" [projectIri]="data.project"
+            (closeDialog)="dialogRef.close()">
         </app-list-info-form>
     </div>
 
     <!-- Update list child node -->
     <div *ngSwitchCase="'editListNode'">
         <app-dialog-header [title]="data.title" [subtitle]="'Edit child node'">
         </app-dialog-header>
-        <app-edit-list-item [iri]="data.id" [projectIri]="data.project" mode="update" (closeDialog)="dialogRef.close($event)"></app-edit-list-item>
+        <app-edit-list-item [iri]="data.id" [projectIri]="data.project" mode="update"
+            (closeDialog)="dialogRef.close($event)"></app-edit-list-item>
     </div>
 
     <!-- Delete list node-->
     <div *ngSwitchCase="'deleteListNode'">
-        <app-dialog-header [title]="data.title" [subtitle]="'appLabels.form.lists.title.deleteListNode' | translate"></app-dialog-header>
+        <app-dialog-header [title]="data.title" [subtitle]="'appLabels.form.lists.title.deleteListNode' | translate">
+        </app-dialog-header>
         Do you want to delete this node?
         <mat-dialog-actions>
             <button mat-button mat-dialog-close class="cancel-button center" [mat-dialog-close]="false">
@@ -197,7 +203,8 @@
 
     <!-- Delete list -->
     <div *ngSwitchCase="'deleteList'">
-        <app-dialog-header [title]="data.title" [subtitle]="'appLabels.form.lists.title.deleteList' | translate"></app-dialog-header>
+        <app-dialog-header [title]="data.title" [subtitle]="'appLabels.form.lists.title.deleteList' | translate">
+        </app-dialog-header>
         Do you want to delete this list?
         <mat-dialog-actions>
             <button mat-button mat-dialog-close class="cancel-button center" [mat-dialog-close]="false">
@@ -214,7 +221,7 @@
     <!-- Ontology editor: create new ontology -->
     <div *ngSwitchCase="'createOntology'">
         <app-dialog-header [title]="'Data model'" [subtitle]="'Create new'"></app-dialog-header>
-        <app-ontology-form [projectcode]="data.project" (closeDialog)="dialogRef.close($event)"
+        <app-ontology-form [projectCode]="data.project" (closeDialog)="dialogRef.close($event)"
             [existingOntologyNames]="data.existing"></app-ontology-form>
     </div>
 
@@ -250,7 +257,7 @@
     <div *ngSwitchCase="'editResourceClass'">
         <app-dialog-header [title]="data.title" [subtitle]="data.subtitle">
         </app-dialog-header>
-        <app-resource-class-form [iri]="data.id" [name]="data.title" [projectIri]="data.project"
+        <app-resource-class-form [iri]="data.id" [name]="data.title" [projectCode]="data.project"
             [showResourceClassForm]="true" [edit]="true" (closeDialog)="dialogRef.close()">
         </app-resource-class-form>
     </div>
@@ -273,13 +280,39 @@
     <div *ngSwitchCase="'updateCardinality'">
         <app-dialog-header [title]="data.title" [subtitle]="data.subtitle">
         </app-dialog-header>
-        <app-resource-class-form [iri]="data.id" [name]="data.title" [projectIri]="data.project"
+        <app-resource-class-form [iri]="data.id" [name]="data.title" [projectCode]="data.project"
             [showResourceClassForm]="false" [edit]="true" (closeDialog)="dialogRef.close()">
         </app-resource-class-form>
     </div>
 
-    <div *ngSwitchCase="'error'">
-        <app-error [status]="data.id"></app-error>
+    <div *ngSwitchCase="'createProperty'">
+        <app-dialog-header [title]="data.title" [subtitle]="data.subtitle">
+        </app-dialog-header>
+        <app-property-form [propertyInfo]="data.propInfo" [projectIri]="data.project" (closeDialog)="dialogRef.close()">
+        </app-property-form>
+    </div>
+
+    <div *ngSwitchCase="'editProperty'">
+        <app-dialog-header [title]="data.title" [subtitle]="data.subtitle">
+        </app-dialog-header>
+        <app-property-form [propertyInfo]="data.propInfo" [projectIri]="data.project" (closeDialog)="dialogRef.close()">
+        </app-property-form>
+    </div>
+
+
+    <div *ngSwitchCase="'deleteProperty'">
+        <app-dialog-header [title]="data.title" [subtitle]="'Delete property'"></app-dialog-header>
+        Do you want to delete this property?
+        <mat-dialog-actions>
+            <button mat-button mat-dialog-close class="cancel-button center" [mat-dialog-close]="false">
+                Cancel
+            </button>
+            <span class="fill-remaining-space"></span>
+            <button mat-button mat-raised-button [color]="'warn'" class="confirm-button center"
+                [mat-dialog-close]="true">
+                Delete
+            </button>
+        </mat-dialog-actions>
     </div>
 
     <!-- all about RESOURCE -->
@@ -291,11 +324,23 @@
         </app-resource-instance-form>
     </div>
 
+    <!-- general error message -->
+    <div *ngSwitchCase="'error'">
+        <app-error [status]="data.id"></app-error>
+    </div>
+
     <!-- Unknown method (or not yet defined) -->
     <!-- Default dialog content component -->
     <div *ngSwitchDefault>
         <app-dialog-header [title]="'Not yet implemented'" [subtitle]="'ERROR 400'" (close)="dialogRef.close()">
         </app-dialog-header>
         <p class="todo" [innerHtml]="notYetImplemented"></p>
+        <mat-dialog-actions>
+            <span class="fill-remaining-space"></span>
+            <button mat-button mat-dialog-close class="cancel-button center" [mat-dialog-close]="false">
+                OK
+            </button>
+            <span class="fill-remaining-space"></span>
+        </mat-dialog-actions>
     </div>
 </div>

src/app/project/collaboration/add-user/add-user.component.ts

@@ -11,11 +11,10 @@ import {
     UserResponse,
     UsersResponse
 } from '@dasch-swiss/dsp-js';
-import { DspApiConnectionToken, existingNamesValidator } from '@dasch-swiss/dsp-ui';
+import { AutocompleteItem, DspApiConnectionToken, existingNamesValidator } from '@dasch-swiss/dsp-ui';
 import { Observable } from 'rxjs';
 import { map, startWith } from 'rxjs/operators';
 import { CacheService } from 'src/app/main/cache/cache.service';
-import { AutocompleteItem } from 'src/app/main/declarations/autocomplete-item';
 import { DialogComponent } from 'src/app/main/dialog/dialog.component';
 import { ErrorHandlerService } from 'src/app/main/error/error-handler.service';
 

src/app/project/collaboration/select-group/select-group.component.ts

@@ -1,9 +1,8 @@
 import { Component, EventEmitter, Inject, Input, OnInit, Output } from '@angular/core';
 import { FormControl } from '@angular/forms';
 import { ApiResponseData, ApiResponseError, GroupsResponse, KnoraApiConnection } from '@dasch-swiss/dsp-js';
-import { DspApiConnectionToken } from '@dasch-swiss/dsp-ui';
+import { AutocompleteItem, DspApiConnectionToken } from '@dasch-swiss/dsp-ui';
 import { CacheService } from 'src/app/main/cache/cache.service';
-import { AutocompleteItem } from 'src/app/main/declarations/autocomplete-item';
 import { ErrorHandlerService } from 'src/app/main/error/error-handler.service';
 
 @Component({

src/app/project/list/list-info-form/list-info-form.component.html

@@ -4,10 +4,10 @@
     <div *ngIf="!loading" class="form-content list-info">
 
         <!-- list label -->
-        <dsp-string-literal-input [placeholder]="'List label'" [value]="labels"
+        <dsp-string-literal-input [placeholder]="'List label *'" [value]="labels"
             (dataChanged)="handleData($event, 'labels')">
         </dsp-string-literal-input>
-        <mat-hint class="invalid-form" *ngIf="labelInvalidMessage">{{ labelInvalidMessage }}</mat-hint>
+        <mat-hint class="invalid-form string-literal-error" *ngIf="labelInvalidMessage">{{ labelInvalidMessage }}</mat-hint>
 
         <br><br>
 

src/app/project/list/list-item-form/edit-list-item/edit-list-item.component.html

@@ -4,11 +4,11 @@
 
     <!-- list label -->
     <dsp-string-literal-input
-        [placeholder]="'Child node label'"
+        [placeholder]="'Child node label *'"
         [value]="labels"
         (dataChanged)="handleData($event, 'labels')">
     </dsp-string-literal-input>
-    <span class="invalid-form" *ngIf="formInvalidMessage">{{ formInvalidMessage }}</span>
+    <mat-hint class="invalid-form string-literal-error" *ngIf="formInvalidMessage">{{ formInvalidMessage }}</mat-hint>
 
     <br><br>
 

src/app/project/list/list-item-form/edit-list-item/edit-list-item.component.spec.ts

@@ -130,7 +130,7 @@ describe('EditListItemComponent', () => {
             testHostComponent.editListItem.handleData([], 'labels');
             expect(testHostComponent.editListItem.saveButtonDisabled).toBeTruthy();
             testHostFixture.detectChanges();
-            formInvalidMessageDe = editListItemComponentDe.query(By.css('span.invalid-form'));
+            formInvalidMessageDe = editListItemComponentDe.query(By.css('mat-hint.invalid-form'));
             expect(formInvalidMessageDe.nativeElement.innerText).toEqual('A label is required.');
         });