feat(resource): create new resource instance directly from ontology's…

… class (DEV-959) (#755)

* feat(resource): create resource instance from ontology class (DEV-959)

* chore(resource): better data handling in res instance form

* test(resource): fix res instance from test

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

@@ -323,7 +323,11 @@
     <div *ngSwitchCase="'createResource'">
         <app-dialog-header [title]="data.title" [subtitle]="data.subtitle">
         </app-dialog-header>
-        <app-resource-instance-form (closeDialog)="dialogRef.close()" (updateParent)="replaceTitle($event)">
+        <app-resource-instance-form
+            [selectedResourceClassIri]="data.id"
+            [selectedProject]="data.project"
+            (closeDialog)="dialogRef.close()"
+            (updateParent)="replaceTitle($event)">
         </app-resource-instance-form>
     </div>
 

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

@@ -7,7 +7,7 @@ import { FilteredResources } from 'src/app/workspace/results/list-view/list-view
 export interface DialogData {
     mode: string;       // switch mode
     id: string | number;         // main iri or status code
-    project?: string;   // project code
+    project?: string;   // project code (or iri)
     title?: string;
     subtitle?: string;
     comment?: string;

src/app/project/ontology/resource-class-info/resource-class-info.component.html

@@ -33,8 +33,13 @@
                 (click)="editResourceClass.emit({iri: resourceClass.id, label: resourceClass.label})">
                 Edit resource class info
             </button>
+            <span [matTooltip]="'This opens the resource instance form'" matTooltipPosition="before">
+                <button mat-menu-item (click)="createResourceInstance(resourceClass.id, resourceClass.label + ' (' + subClassOfLabel + ')')">
+                    Create new resource instance
+                </button>
+            </span>
             <span [matTooltip]="(classCanBeDeleted ? 'This class doesn\'t have any instances yet' : null)" matTooltipPosition="before">
-                <button mat-menu-item (click)="openResource(resourceClass.id)" [disabled]="classCanBeDeleted">
+                <button mat-menu-item (click)="openResourceInstances(resourceClass.id)" [disabled]="classCanBeDeleted">
                     Open resource instances
                 </button>
             </span>

src/app/project/ontology/resource-class-info/resource-class-info.component.ts

@@ -10,6 +10,7 @@ import {
     KnoraApiConnection,
     PropertyDefinition,
     ReadOntology,
+    ReadProject,
     ResourceClassDefinitionWithAllLanguages,
     ResourcePropertyDefinitionWithAllLanguages,
     UpdateOntology,
@@ -490,7 +491,7 @@ export class ResourceClassInfoComponent implements OnInit {
      * opens resource instances in new tab using gravsearch
      * @param iri
      */
-    openResource(iri: string) {
+    openResourceInstances(iri: string) {
         // open resource instances in new tab:
         // it's important not to indent the gravsearch.
         const gravsearch = `
@@ -514,4 +515,32 @@ OFFSET 0`;
         window.open(doSearchRoute, '_blank');
     }
 
+    createResourceInstance(iri: string, label: string) {
+        let projectIri: string;
+        // get project iri
+        this._cache.get(this.projectCode).subscribe(
+            (res: ReadProject) => {
+                projectIri = res.id;
+            }
+        );
+
+
+        const dialogConfig: MatDialogConfig = {
+            width: '840px',
+            maxHeight: '80vh',
+            position: {
+                top: '112px'
+            },
+            data: { id: iri, mode: 'createResource', project: projectIri, title: label,  subtitle: 'Set the property values of the resource' },
+            disableClose: true
+        };
+
+        const dialogRef = this._dialog.open(
+            DialogComponent,
+            dialogConfig
+        );
+
+        dialogRef.afterClosed().subscribe(() => { });
+    }
+
 }

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

@@ -51,7 +51,7 @@
             <button mat-raised-button type="button" color="primary"
                 [disabled]="(!selectedProject || !selectedOntology || !selectedResourceClass || !selectResourceForm.valid) || this.errorMessage" (click)="nextStep()" class="form-next">
                 <app-progress-indicator *ngIf="loading" [status]="0" [color]="'primary'" class="next-progress"></app-progress-indicator>
-                Next
+                {{ 'appLabels.form.action.next' | translate }}
             </button>
         </span>
     </div>
@@ -70,6 +70,7 @@
 
     <!-- create property values -->
     <app-select-properties #selectProps
+        *ngIf="selectedResourceClass"
         [ontologyInfo]="ontologyInfo"
         [selectedResourceClass]="selectedResourceClass"
         [properties]="properties"
@@ -80,11 +81,9 @@
 
     <!-- action buttons: previous, cancel and save -->
     <div class="form-panel form-action" [class.fixed-at-bottom]="!showNextStepForm">
-        <span>
-            <button mat-button type="button" (click)="prevStep($event)">
-                &larr;&nbsp;{{ 'appLabels.form.action.back' | translate }}
-            </button>
-        </span>
+        <button *ngIf="!selectedResourceClassIri" mat-button type="button" (click)="prevStep($event)">
+            &larr;&nbsp;{{ 'appLabels.form.action.back' | translate }}
+        </button>
         <button mat-button type="button" (click)="closeDialog.emit()">
             {{ 'appLabels.form.action.cancel' | translate }}
         </button>

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

@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Inject, OnDestroy, OnInit, Output, ViewChild } from '@angular/core';
+import { Component, EventEmitter, Inject, Input, OnDestroy, OnInit, Output, ViewChild } from '@angular/core';
 import { FormBuilder, FormGroup } from '@angular/forms';
 import { Router } from '@angular/router';
 import {
@@ -9,7 +9,8 @@ import {
     CreateTextValueAsString,
     CreateValue,
     KnoraApiConnection,
-    OntologiesMetadata, ReadOntology,
+    OntologiesMetadata,
+    ReadOntology,
     ReadResource,
     ResourceClassAndPropertyDefinitions,
     ResourceClassDefinition,
@@ -34,6 +35,11 @@ import { SelectResourceClassComponent } from './select-resource-class/select-res
 })
 export class ResourceInstanceFormComponent implements OnInit, OnDestroy {
 
+    // ontology's resource class iri
+    @Input() selectedResourceClassIri?: string;
+    // corresponding project (iri)
+    @Input() selectedProject?: string;
+
     // output to close dialog
     @Output() closeDialog: EventEmitter<any> = new EventEmitter<any>();
 
@@ -59,7 +65,6 @@ export class ResourceInstanceFormComponent implements OnInit, OnDestroy {
     userWentBack = false;
 
     usersProjects: StoredProject[];
-    selectedProject: string;
     ontologiesMetadata: OntologiesMetadata;
     selectedOntology: string;
     resourceClasses: ResourceClassDefinition[];
@@ -100,24 +105,39 @@ export class ResourceInstanceFormComponent implements OnInit, OnDestroy {
 
     ngOnInit(): void {
 
-        // parent form is empty, it gets passed to the child components
-        this.selectResourceForm = this._fb.group({});
-        this.propertiesParentForm = this._fb.group({});
+        if (this.selectedResourceClassIri && this.selectedProject) {
+            // get ontology iri from res class iri
+            const splittedIri = this.selectedResourceClassIri.split('#');
+            this.selectedOntology = splittedIri[0];
+            this.selectProperties(this.selectedResourceClassIri);
+
+            this.showNextStepForm = false;
+
+            this.propertiesParentForm = this._fb.group({});
+
+        } else {
+
+            // parent form is empty, it gets passed to the child components
+            this.selectResourceForm = this._fb.group({});
+            this.propertiesParentForm = this._fb.group({});
 
-        // initialize projects to be used for the project selection in the creation form
-        this._project.initializeProjects().subscribe(
-            (proj: StoredProject[]) => {
-                this.usersProjects = proj;
+            // initialize projects to be used for the project selection in the creation form
+            this._project.initializeProjects().subscribe(
+                (proj: StoredProject[]) => {
+                    this.usersProjects = proj;
 
-                // notifies the user that he/she is not part of any project
-                if (proj.length === 0) {
-                    this.errorMessage = 'You are not a part of any active projects or something went wrong';
+                    // notifies the user that he/she is not part of any project
+                    if (proj.length === 0) {
+                        this.errorMessage = 'You are not a part of any active projects or something went wrong';
+                    }
                 }
-            }
-        );
+            );
+
+            // boolean to show only the first step of the form (= selectResourceForm)
+            this.showNextStepForm = true;
+        }
+
 
-        // boolean to show only the first step of the form (= selectResourceForm)
-        this.showNextStepForm = true;
 
     }
 
@@ -186,7 +206,6 @@ export class ResourceInstanceFormComponent implements OnInit, OnDestroy {
                         this.propertiesObj[iri] = [createVal];
                     }
                 }
-
             });
 
             if (this.fileValue) {
@@ -420,7 +439,6 @@ export class ResourceInstanceFormComponent implements OnInit, OnDestroy {
                             if (!this.selectPropertiesComponent && this.properties.length === 0 && !this.hasFileValue) {
                                 this.errorMessage = 'No properties defined for the selected resource.';
                             }
-
                             this.loading = false;
 
                         },