feat(resource-instance): add subclass creation support (DEV-553)

angular.json

@@ -106,6 +106,22 @@
                             "vendorChunk": false,
                             "buildOptimizer": false,
                             "budgets": []
+                        },
+                        "ls-test-server": {
+                            "fileReplacements": [
+                                {
+                                    "replace": "src/environments/environment.ts",
+                                    "with": "src/environments/environment.ls-test-server.ts"
+                                }
+                            ],
+                            "optimization": false,
+                            "sourceMap": true,
+                            "namedChunks": true,
+                            "aot": true,
+                            "extractLicenses": false,
+                            "vendorChunk": false,
+                            "buildOptimizer": false,
+                            "budgets": []
                         }
                     }
                 },
@@ -123,6 +139,9 @@
                         },
                         "test-server": {
                             "browserTarget": "dsp-app:build:test-server"
+                        },
+                        "ls-test-server": {
+                            "browserTarget": "dsp-app:build:ls-test-server"
                         }
                     }
                 },
@@ -176,6 +195,9 @@
                         },
                         "test-server": {
                             "devServerTarget": "dsp-app:serve:test-server"
+                        },
+                        "ls-test-server": {
+                            "devServerTarget": "dsp-app:serve:ls-test-server"
                         }
                     }
                 }

package.json

@@ -9,6 +9,7 @@
     "ng": "ng",
     "start": "ng serve",
     "start-with-test-server": "ng serve --configuration test-server",
+    "start-with-ls-test-server": "ng serve --configuration ls-test-server",
     "lint-ci": "eslint --color -c .eslintrc.js --ext .ts ./src/app",
     "lint-local": "eslint --color --fix -c .eslintrc.js --ext .ts ./src/app",
     "e2e": "ng e2e",

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

@@ -402,7 +402,7 @@
     <div *ngSwitchCase="'createLinkResource'">
         <app-dialog-header [title]="data.title" [subtitle]="'Create a new linked resource'"></app-dialog-header>
         <mat-dialog-content>
-            <app-create-link-resource [parentResource]="data.parentResource" [propDef]="data.id" [resourceClassDef]="data.resourceClassDefinition" (closeDialog)="dialogRef.close($event)"></app-create-link-resource>
+            <app-create-link-resource [parentResource]="data.parentResource" [propDef]="data.id" [resourceClassDef]="data.resourceClassDefinition" [currentOntoIri]="data.ontoIri" (closeDialog)="dialogRef.close($event)"></app-create-link-resource>
         </mat-dialog-content>
     </div>
 

src/app/main/dialog/dialog.component.ts

@@ -22,6 +22,7 @@ export interface DialogData {
     selectedResources?: FilteredResources;
     resourceClassDefinition?: string;
     fullSize?: boolean;
+    ontoIri?: string;
 }
 
 export interface ConfirmationWithComment {

src/app/workspace/resource/operations/create-link-resource/create-link-resource.component.html

@@ -8,9 +8,10 @@
 
     <app-select-properties #selectProps
         [ontologyInfo]="ontologyInfo"
-        [resourceClass]="resourceClass"
+        [selectedResourceClass]="resourceClass"
         [properties]="properties"
         [parentForm]="propertiesForm"
+        [currentOntoIri]="currentOntoIri"
         class="select-properties">
     </app-select-properties>
     <div class="form-panel form-action">

src/app/workspace/resource/operations/create-link-resource/create-link-resource.component.ts

@@ -27,6 +27,7 @@ export class CreateLinkResourceComponent implements OnInit {
     @Input() parentResource: ReadResource;
     @Input() propDef: string;
     @Input() resourceClassDef: string;
+    @Input() currentOntoIri: string;
 
     @Output() closeDialog: EventEmitter<any> = new EventEmitter<any>();
 
@@ -49,6 +50,9 @@ export class CreateLinkResourceComponent implements OnInit {
     ) { }
 
     ngOnInit(): void {
+        // console.log('parentResource: ', this.parentResource);
+        // console.log('propDef: ', this.propDef);
+        // console.log('resourceClassDef: ', this.resourceClassDef);
         this.propertiesForm = this._fb.group({});
 
         this._dspApiConnection.v2.ontologyCache.getResourceClassDefinition(this.resourceClassDef).subscribe(
@@ -82,6 +86,7 @@ export class CreateLinkResourceComponent implements OnInit {
     }
 
     onSubmit() {
+        console.log('clicked');
         if (this.propertiesForm.valid) {
             const createResource = new CreateResource();
 

src/app/workspace/resource/operations/display-edit/display-edit.component.html

@@ -19,7 +19,7 @@
             <app-time-value class="parent-value-component" #displayVal *ngSwitchCase="constants.TimeValue" [mode]="mode" [displayValue]="$any(displayValue)"></app-time-value>
             <app-geoname-value class="parent-value-component" #displayVal *ngSwitchCase="constants.GeonameValue" [mode]="mode" [displayValue]="$any(displayValue)"></app-geoname-value>
             <app-link-value class="parent-value-component" #displayVal *ngSwitchCase="constants.LinkValue" [mode]="mode" [displayValue]="$any(displayValue)"
-                        [parentResource]="parentResource" [propIri]="displayValue.property" (referredResourceClicked)="referredResourceClicked.emit($event)" (referredResourceHovered)="referredResourceHovered.emit($event)"></app-link-value>
+                        [parentResource]="parentResource" [propIri]="displayValue.property" [currentOntoIri]="ontoIri" (referredResourceClicked)="referredResourceClicked.emit($event)" (referredResourceHovered)="referredResourceHovered.emit($event)"></app-link-value>
             <!-- <app-date-value class="parent-value-component" #displayVal *ngSwitchCase="constants.DateValue" [mode]="mode" [displayValue]="$any(displayValue)" [displayOptions]="dateDisplayOptions" [labels]="showDateLabels" [ontologyDateFormat]="dateFormat"></app-date-value> -->
             <app-date-value class="parent-value-component" #displayVal *ngSwitchCase="constants.DateValue" [mode]="mode" [displayValue]="$any(displayValue)" [ontologyDateFormat]="dateFormat"></app-date-value>
             <app-list-value class="parent-value-component" #displayVal *ngSwitchCase="constants.ListValue" [mode]="mode" [displayValue]="$any(displayValue)"

src/app/workspace/resource/operations/display-edit/display-edit.component.ts

@@ -119,6 +119,8 @@ export class DisplayEditComponent implements OnInit {
 
     user: ReadUser;
 
+    ontoIri: string;
+
     constructor(
         @Inject(DspApiConnectionToken) private _dspApiConnection: KnoraApiConnection,
         private _valueOperationEventService: ValueOperationEventService,
@@ -128,7 +130,7 @@ export class DisplayEditComponent implements OnInit {
     }
 
     ngOnInit() {
-
+        this.ontoIri = this.parentResource.type.split('#')[0];
         this.mode = 'read';
         this.dateDisplayOptions = 'all';
         this.showDateLabels = true;

src/app/workspace/resource/resource-instance-form/resource-instance-form.component.html

@@ -69,9 +69,10 @@
     <!-- create property values -->
     <app-select-properties #selectProps
         [ontologyInfo]="ontologyInfo"
-        [resourceClass]="selectedResourceClass"
+        [selectedResourceClass]="selectedResourceClass"
         [properties]="properties"
         [parentForm]="propertiesParentForm"
+        [currentOntoIri]="selectedOntology"
         class="select-properties">
     </app-select-properties>
 

src/app/workspace/resource/resource-instance-form/select-properties/select-properties.component.html

@@ -44,7 +44,8 @@
                                     [parentResource]="parentResource"
                                     [parentForm]="parentForm"
                                     [formName]="prop.label + '_' + i"
-                                    [isRequiredProp]="propertyValuesKeyValuePair[prop.id + '-cardinality']">
+                                    [isRequiredProp]="propertyValuesKeyValuePair[prop.id + '-cardinality']"
+                                    [currentOntoIri]="currentOntoIri">
                                 </app-switch-properties>
                             </div>
                             <div class="buttons">

src/app/workspace/resource/resource-instance-form/select-properties/select-properties.component.spec.ts

@@ -21,9 +21,10 @@ import { SwitchPropertiesComponent } from './switch-properties/switch-properties
     <app-select-properties
     #selectProps
     [ontologyInfo]="ontoInfo"
-    [resourceClass]="selectedResourceClass"
+    [selectedResourceClass]="selectedResourceClass"
     [properties]="properties"
-    [parentForm]="propertiesParentForm">
+    [parentForm]="propertiesParentForm"
+    [currentOntoIri]="currentOntoIri">
     </app-select-properties>`
 })
 class TestSelectPropertiesParentComponent implements OnInit {
@@ -38,6 +39,8 @@ class TestSelectPropertiesParentComponent implements OnInit {
 
     propertiesParentForm: FormGroup;
 
+    currentOntoIri: string;
+
     constructor(private _fb: FormBuilder) { }
 
     ngOnInit() {
@@ -48,6 +51,8 @@ class TestSelectPropertiesParentComponent implements OnInit {
         this.selectedResourceClass = this.ontoInfo.classes['http://0.0.0.0:3333/ontology/0001/anything/v2#Thing'];
 
         this.properties = this.ontoInfo.getPropertyDefinitionsByType(ResourcePropertyDefinition).filter(prop => prop.isEditable && !prop.isLinkProperty);
+
+        this.currentOntoIri = 'http://0.0.0.0:3333/ontology/0001/anything/v2';
     }
 
 }

src/app/workspace/resource/resource-instance-form/select-properties/select-properties.component.ts

@@ -28,10 +28,12 @@ export class SelectPropertiesComponent implements OnInit {
 
     @Input() ontologyInfo: ResourceClassAndPropertyDefinitions;
 
-    @Input() resourceClass: ResourceClassDefinition;
+    @Input() selectedResourceClass: ResourceClassDefinition;
 
     @Input() parentForm: FormGroup;
 
+    @Input() currentOntoIri: string;
+
     parentResource = new ReadResource();
 
     index = 0;
@@ -45,6 +47,9 @@ export class SelectPropertiesComponent implements OnInit {
     constructor(private _valueService: ValueService) { }
 
     ngOnInit() {
+        // console.log('ontologyInfo: ', this.ontologyInfo);
+        // console.log('resourceClass: ', this.selectedResourceClass);
+        // console.log('resourceClasses: ', this.resourceClasses);
         if (this.properties) {
             for (const prop of this.properties) {
                 if (prop) {
@@ -79,7 +84,7 @@ export class SelectPropertiesComponent implements OnInit {
         return CardinalityUtil.createValueForPropertyAllowed(
             prop.id,
             this.propertyValuesKeyValuePair[prop.id].length,
-            this.ontologyInfo.classes[this.resourceClass.id]
+            this.ontologyInfo.classes[this.selectedResourceClass.id]
         );
     }
 
@@ -91,8 +96,8 @@ export class SelectPropertiesComponent implements OnInit {
      * @param propId property id
      */
     isPropRequired(propId: string): boolean {
-        if (this.resourceClass !== undefined && propId) {
-            this.resourceClass.propertiesList.filter(
+        if (this.selectedResourceClass !== undefined && propId) {
+            this.selectedResourceClass.propertiesList.filter(
                 (card: IHasProperty) => {
                     if (card.propertyIndex === propId) {
                         // cardinality 1 or 1-N

src/app/workspace/resource/resource-instance-form/select-properties/switch-properties/switch-properties.component.html

@@ -10,7 +10,7 @@
     <app-time-value #createVal *ngSwitchCase="constants.TimeValue" [mode]="mode" [valueRequiredValidator]="isRequiredProp" [parentForm]="parentForm" [formName]="formName"></app-time-value>
     <app-geoname-value #createVal *ngSwitchCase="constants.GeonameValue" [mode]="mode" [valueRequiredValidator]="isRequiredProp" [parentForm]="parentForm" [formName]="formName"></app-geoname-value>
     <app-link-value #createVal *ngSwitchCase="constants.LinkValue" [mode]="mode" [valueRequiredValidator]="isRequiredProp" [parentForm]="parentForm" [formName]="formName"
-                [parentResource]="parentResource" [propIri]="property.id"></app-link-value>
+                [parentResource]="parentResource" [propIri]="property.id" [currentOntoIri]="currentOntoIri"></app-link-value>
     <app-date-value #createVal *ngSwitchCase="constants.DateValue" [mode]="mode" [valueRequiredValidator]="isRequiredProp" [parentForm]="parentForm" [formName]="formName"></app-date-value>
     <app-list-value #createVal *ngSwitchCase="constants.ListValue" [mode]="mode" [valueRequiredValidator]="isRequiredProp" [parentForm]="parentForm" [formName]="formName"
                 [propertyDef]="property"></app-list-value>

src/app/workspace/resource/resource-instance-form/select-properties/switch-properties/switch-properties.component.ts

@@ -1,6 +1,6 @@
 import { Component, Input, OnInit, ViewChild } from '@angular/core';
 import { FormGroup } from '@angular/forms';
-import { Constants, ReadResource, ResourcePropertyDefinition } from '@dasch-swiss/dsp-js';
+import { Constants, ReadResource, ResourceClassDefinition, ResourcePropertyDefinition } from '@dasch-swiss/dsp-js';
 import { BaseValueDirective } from 'src/app/main/directive/base-value.directive';
 import { ValueService } from '../../../services/value.service';
 
@@ -23,6 +23,8 @@ export class SwitchPropertiesComponent implements OnInit {
 
     @Input() isRequiredProp: boolean;
 
+    @Input() currentOntoIri?: string;
+
     mode = 'create';
 
     // gui element in case of textValue
@@ -35,7 +37,6 @@ export class SwitchPropertiesComponent implements OnInit {
     ) { }
 
     ngOnInit(): void {
-
         // the input isRequiredProp provided by KeyValuePair is stored as a number
         // a conversion from a number to a boolean is required by the input valueRequiredValidator
         this.isRequiredProp = !!+this.isRequiredProp;

src/app/workspace/resource/values/link-value/link-value.component.html

@@ -9,8 +9,8 @@
     <mat-form-field class="child-value-component" floatLabel="never">
           <input matInput [formControlName]="'value'" class="value" type="text" placeholder="{{resourceClassLabel}}" aria-label="resource" [matAutocomplete]="auto">
           <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayResource">
-            <mat-option (click)="openDialog('createLinkResource', $event, propIri)">
-                Create New {{resourceClassLabel}}
+            <mat-option *ngFor="let rc of resourceClasses" (click)="openDialog('createLinkResource', $event, propIri, rc)">
+                Create New {{rc?.label}}
             </mat-option>
             <mat-option *ngFor="let res of resources" [value]="res">
                 {{res?.label}}