feat(ontology): new cardinality workflow (DSP-1652) (#455)

* refactor(ontology): init new cardinality workflow

* refactor(ontology): more on cardinality

* fix(ontology): update last modification date (DSP-1656)

* feat(ontology): add prop and set cardinality

* fix(ontology): update cardinality if prop not in use

* fix(ontology): cardinality in form

* fix(ontology): add property to res class

* refactor(ontology): clean up code

* feat(ontology): add existing prop to res class

* test(ontology): fix tests

* refactor(ontology): delete unused components and services

* chore(app): undo previous import organisation

* test(resource): fix routes issue in tests

* fix(ontology): make ts-lint happy

* docs(ontology): update ontology documentation

* docs(ontology): update ontology documentation incl. refactoring

* fix(ontology): bug and style fix in property form

docs/assets/style/theme.css

@@ -2,3 +2,8 @@
 .md-tabs {
   background-color: rgb(89, 73, 167) !important;
 }
+
+em {
+    font-size: smaller;
+    text-align: center;
+}

docs/how-to-use/project.md

@@ -2,30 +2,29 @@
 
 ## Project
 
-Once you are [logged in](/user-guide/#login), the dashboard displays the list of your project(s). If you are a project administrator or a system administrator, you can edit the project information or archive your project from the project menu. Archived projects are stored in a list on your dashboard and they can be "reactivated" at any time. 
+Once you are [logged in](/user-guide/#login), the dashboard displays the list of your project(s). If you are a project administrator or a system administrator, you can edit the project information or archive your project from the project menu. Archived projects are stored in a list on your dashboard and they can be "reactivated" at any time.
 
-![Project list and project menu](../assets/images/project-list.png)*https://app2.dasch.swiss/dashboard - By clicking on the project name, you get access to the full project information.*
+![Project list and project menu](../assets/images/project-list.png)*<https://admin.dasch.swiss/dashboard> - By clicking on the project name, you get access to the full project information.*
 
 System administrator can create your new research project. Essential information are required such as the project name, a short project description and institution information.
 
 ![Create a new project](../assets/images/project-create-new.png)<center>*Form to create a new project.*</center>
 
 As project administrator or system administrator, you can define your project, add your team members, create permission groups and as most important, define your data model (ontology) and the lists of your project.
 
-![Project management available functionalities](../assets/images/project-info.png)*https://app2.dasch.swiss/project/0803/info - Project management functionalities; e.g. Incunabula project. Project information page is displayed without restricted content, the other functionalities are reserved for project admin and system admin.*
+![Project management available functionalities](../assets/images/project-info.png)*<https://admin.dasch.swiss/project/0803/info> - Project management functionalities; e.g. Incunabula project. Project information page is displayed without restricted content, the other functionalities are reserved for project admin and system admin.*
 
 ---
 
 ## Collaboration
-&#9888; *WORK IN PROGRESS*
 
 As system admin, you can add users as project member and define their permissions roles: *Who is able to edit or to see data in the project?* Data includes the research sources and their metadata. [Permissions](/user-guide/project/#permission-groups) can be set for the entire project or for single metadata fields. 
 
 A user menu with different actions is accessible for each member of the project (link to the right side of the user line). The admin can appoint another user as project admin (or remove this permission), edit user's information, change user's password if forgotten, and remove a user.
 
-![Collaboration page](../assets/images/project-collaboration.png)*https://app2.dasch.swiss/project/0803/collaboration - Collaboration page where project admin and system admin can add new user to the team.*
+![Collaboration page](../assets/images/project-collaboration.png)*<https://admin.dasch.swiss/project/0803/collaboration> - Collaboration page where project admin and system admin can add new user to the team.*
 
-***Permissions for project admins to add new users as project member will be implemented soon.***
+> **_NOTE:_** **Permissions for project admins to add new users as project member will be implemented soon.**
 
 ---
 
@@ -37,7 +36,6 @@ Project admin can create one or several permission groups in their project to se
 ---
 
 ## Data model
-&#9888; *NOT YET IMPLEMENTED* (only mockups are presented)
 
 The most important step in the project is the definition of the data model. DSP-APP will provide a tool for easy creation of data models. First, you have to know which data and sources you want to work with. The data model can be flexible and customizable. With DSP-APP, you can comply with the FAIR data standard, but compliance is not required to analyze your data.
 
@@ -54,19 +52,38 @@ The questions to answer in creating your data model:
 - data about the person you interviewed
 - location where the photograph was taken
 
-Diagram 1 shows the relationships of the data by source type from these experiences.
+Diagram 1 shows the relationships of the data by resource classes from these experiences.
+
+![Relationship of the data by resource classes](../assets/images/diagram-data-model.png)*Relationship of the data by resource classes*
+
+### Create your data model
+
+Go to your project, select the tab `Data model` and click on button `New data model` or `Create your first data model` (in case of a brand new project). This will open a form in a dialog box where you have to set a unique name and a label. Optional you can also add a short description of form of a comment.
 
-![Relationship of the data by source type](../assets/images/diagram-data-model.png)*Relationship of the data by source type*
+> **_NOTE:_** There are some rules for the unique name:
+>
+> - must be at least 3 characters long
+> - shouldn't begin with a number
+> - shouldn't begin with the letter v and a number
+> - spaces or special characters are not allowed
+> - the term "ontology" is not allowed
+> - the unique name can't be changed afterwards
+
+The label is a combination of project's shortname and the unique name. You can replace with any other string.
+
+![Data model editor | Step 1: Start by creating a new data model.](../assets/images/data-model-create.png)*Data model editor | Step 1: Start by creating a new data model.*
 
 ---
 
-### Select your SOURCE TYPES
+### Create the resource CLASSES
 
-In the data model editor, you select your source types from a predefined list on the right-hand side. Later, you will be able to customize the source type or define an additional default source type, if the one you need doesn't exist by default.
+In the data model editor, you create your resource classes by selecting a default representation type from a predefined list on the right-hand side. 
 
-![Data model editor 1: Select all your main source types by drag and drop; e.g. for an interview, select the source type "Audio / Sound / Interview".](../assets/images/data-model-add-source.png)*Data model editor 1: Select all your main source types by drag and drop; e.g. for an interview, select the source type "Audio / Sound / Interview".*
+Click on `+ Create new class` and select a representation type for your resource class.
 
-In our example with the interview and the photographs, you drag and drop the following main source types from the list on the right-hand side:
+![Data model editor | Step 2: Create all your main resource classes by selecting a predefined representation type; e.g. for a taped interview, select the representation type "Audio / Sound / Interview".](../assets/images/data-model-class-select-representation.png)*Data model editor | Step 2: Create all your main resource classes by selecting a predefined representation type; e.g. for a taped interview, select the representation type "Audio / Sound / Interview".*
+
+In our example with the interview and the photographs, you drag and drop the following main resource classes from the list on the right-hand side:
 
 - Audio / Sound / Interview
 - Transcript
@@ -76,30 +93,42 @@ In our example with the interview and the photographs, you drag and drop the fol
 
 ---
 
-### Select the METADATA fields for each source type (optional)
+### Select or create the PROPERTIES for each resource class
 
-The predefined source types offer a suggested list of metadata fields. This list could help to create a data model simply and quickly. It's also possible to deselect the suggested metadata fields (e.g., no metadata), to adapt others and to customize them.
+<!-- TODO: nice idea, but not yet implemented >>> The predefined resource classes offer a suggested list of metadata fields. This list could help to create a data model simply and quickly. It's also possible to deselect the suggested metadata fields (e.g., no metadata), to adapt others and to customize them. -->
 
-![Data model editor 2: Add additional metadata fields to your source type; e.g. add the missing field "Person".](../assets/images/data-model-add-property.png)*Data model editor 2: Add additional metadata fields to your source type; e.g. add the missing field "Person".*
+There are two possibilites to add properties to a resource class:
 
----
+#### Create new property by selecting from list of default property types
 
-### Customize the SOURCE TYPES and the METADATA fields (optional)
+![Data model editor | Step 3: Add properties to your resource class by selecting from list of default property types.](../assets/images/data-model-property-select-type.png)*Data model editor | Step 3: Add properties to your resource class by selecting from list of default property types.*
 
-It's possible to customize the predefined source type and the metadata field values by clicking on the edit button of the source type. You can rename the source type, rearrange the order of the metadata fields, and set permissions.
+#### Select from list of existing properties
 
-![Data model editor 3: Customize the source type AUDIO; e.g. rename it into Interview](../assets/images/data-model-edit-source.png)*Data model editor 3: Customize the source type AUDIO; e.g. rename it into Interview*
+If you have already created some properties in another resource classes or in the property section <!-- TODO: add link to property section as soon this section exists --> you can select one of them to add it to the resource class. This way you have to define — for example — a "Title" property only once.
 
----
+![Data model editor | Step 3: Add properties to your resource class by selecting from list of already existing properties](/assets/images/data-model-property-select-existing.png)*Data model editor | Step 3: Add properties to your resource class by selecting from list of already existing properties*
+
+In both cases it will open the property form where you have to define a label and optional a comment. If you have selected an existing property, you can also change the label and comment. Be careful in this case, because it can have an effect on other resource classes that use the same property! 
+
+The property type can't be changed here. Depending on the property type you have to set additional attributes, e.g. in a resource link property you have to select a resource class to which the property will point to. Similar in case of a list property where you have to select the corresponding list. In both cases a the linked resource class or the list should already exist.
+
+![Data model editor | Step 4: Define property's label and comment and set the cardinality corresponding to the resource class.](../assets/images/data-model-property-create.png)*Data model editor | Step 4: Define property's label and comment and set the cardinality corresponding to the resource class.*
+
+For each property in a resource class you can define some rules. For example you can define if one of the property can have `multiple` values or if a property is a mandatory (`requiered`) field.
+
+After adding more than one property to a resource class you can change the displayed order by drag'n'drop the properties in the list.
+
+<!--- TODO: add definition for each property type and maybe also for the representation type
 
 ### Connect SOURCE TYPES in the data model (optional)
 
-If you have reusable metadata value in a source type (A), you should create an additional source type (B) and drag-and-drop it over the metadata field of the first source type (A) to connect the two data types.
-E.g., For the metadata "Photographer" in source type "Photograph", you should create a source type "Person" and connect it in "Photograph".
+If you have reusable metadata value in a resource type (A), you should create an additional resource type (B) and drag-and-drop it over the metadata field of the first resource type (A) to connect the two data types.
+E.g., For the metadata "Photographer" in resource type "Photograph", you should create a resource type "Person" and connect it in "Photograph".
 
-![Data model editor 4: Manage connections between the source types.](../assets/images/data-model-example.png)*Data model editor 4: Manage connections between the source types.*
+![Data model editor 4: Manage connections between the resource classes.](../assets/images/data-model-example.png)*Data model editor 4: Manage connections between the resource classes.*
 
-----
+---
 
 ## Lists
 &#9888; *WORK IN PROGRESS*
@@ -109,3 +138,4 @@ Projects often need to define lists or hierarchies of categories that can be ass
 ![Project lists](../assets/images/project-lists.png)*https://app2.dasch.swiss/project/0803/lists - Project lists: create a new list, add items by selecting the language and enter the corresponding value, repeat for each translation and press the + sign to create another item to the same level.*
 
 **The edition of items and child items will be implemented in a later version.**
+-->

src/app/app.module.ts

@@ -71,7 +71,6 @@ 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 { ResourceComponent } from './workspace/resource/resource.component';
 import { ResourceInstanceFormComponent } from './workspace/resource/resource-instance-form/resource-instance-form.component';
 import { ResultsComponent } from './workspace/results/results.component';
@@ -150,7 +149,6 @@ export function httpLoaderFactory(httpClient: HttpClient) {
         PropertyInfoComponent,
         ResourceClassFormComponent,
         ResourceClassInfoComponent,
-        ResourceClassPropertyFormComponent,
         ResourceComponent,
         ResourceInstanceFormComponent,
         ResultsComponent,

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

@@ -258,8 +258,8 @@
     <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" [projectCode]="data.project"
-            [showResourceClassForm]="true" [edit]="true" (closeDialog)="dialogRef.close()">
+        <app-resource-class-form [iri]="data.id" [name]="data.title" [projectCode]="data.project" [edit]="true"
+            (closeDialog)="dialogRef.close()">
         </app-resource-class-form>
     </div>
 
@@ -281,22 +281,21 @@
     <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" [projectCode]="data.project"
-            [showResourceClassForm]="false" [edit]="true" (closeDialog)="dialogRef.close()">
-        </app-resource-class-form>
+        <app-property-form [propertyInfo]="data.propInfo" [resClassIri]="data.parentIri" [guiOrder]="data.position" (closeDialog)="dialogRef.close()">
+        </app-property-form>
     </div>
 
     <div *ngSwitchCase="'createProperty'">
         <app-dialog-header [title]="data.title" [subtitle]="data.subtitle">
         </app-dialog-header>
-        <app-property-form [propertyInfo]="data.propInfo" (closeDialog)="dialogRef.close()">
+        <app-property-form [propertyInfo]="data.propInfo" [resClassIri]="data.parentIri" [guiOrder]="data.position" (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" (closeDialog)="dialogRef.close()">
+        <app-property-form [propertyInfo]="data.propInfo" [resClassIri]="data.parentIri" [guiOrder]="data.position" (closeDialog)="dialogRef.close()">
         </app-property-form>
     </div>
 

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

@@ -1,20 +1,18 @@
 import { Component, EventEmitter, Inject, Input, OnInit, Output } from '@angular/core';
 import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
 import {
-    ApiResponseData,
     ApiResponseError,
     CreateOntology,
     KnoraApiConnection,
     OntologyMetadata,
-    ProjectResponse,
     ReadOntology,
     ReadProject,
     UpdateOntologyMetadata
 } from '@dasch-swiss/dsp-js';
 import { DspApiConnectionToken, existingNamesValidator } from '@dasch-swiss/dsp-ui';
 import { CacheService } from 'src/app/main/cache/cache.service';
 import { ErrorHandlerService } from 'src/app/main/error/error-handler.service';
-import { ResourceClassFormService } from '../resource-class-form/resource-class-form.service';
+import { OntologyService } from '../ontology.service';
 
 export interface NewOntology {
     projectIri: string;
@@ -95,7 +93,7 @@ export class OntologyFormComponent implements OnInit {
         private _cache: CacheService,
         private _errorHandler: ErrorHandlerService,
         private _fb: FormBuilder,
-        private _resourceClassFormService: ResourceClassFormService
+        private _ontologyService: OntologyService
     ) { }
 
     ngOnInit() {
@@ -121,7 +119,7 @@ export class OntologyFormComponent implements OnInit {
                 (response: ReadOntology) => {
                     // add values to the ontology form
                     this.ontologyForm.controls['name'].disable();
-                    const name = this._resourceClassFormService.getOntologyName(this.iri);
+                    const name = this._ontologyService.getOntologyName(this.iri);
                     this.ontologyForm.controls['name'].setValue(name);
                     this.ontologyForm.controls['label'].setValue(response.label);
                     this.ontologyForm.controls['label'].setValidators(

src/app/project/ontology/ontology-visualizer/ontology-visualizer.component.ts

@@ -2,7 +2,7 @@ import { Component, Inject, Input, OnInit, Output } from '@angular/core';
 import { ClassDefinition, KnoraApiConnection, ReadOntology } from '@dasch-swiss/dsp-js';
 import { DspApiConnectionToken } from '@dasch-swiss/dsp-ui';
 import { Link, Node } from '../../../../../node_modules/d3-force-3d';
-import { ResourceClassFormService } from '../resource-class-form/resource-class-form.service';
+import { OntologyService } from '../ontology.service';
 
 export interface NewOntology {
     projectIri: string;
@@ -26,7 +26,7 @@ export class OntologyVisualizerComponent implements OnInit {
 
     constructor(
         @Inject(DspApiConnectionToken) private _dspApiConnection: KnoraApiConnection,
-        private _resourceClassFormService: ResourceClassFormService) { }
+        private _ontologyService: OntologyService) { }
 
     isInNodes(item: string) {
         for (const node of this.nodes) {
@@ -43,7 +43,7 @@ export class OntologyVisualizerComponent implements OnInit {
         let newLabel: string;
         if (resourceInfo[1] !== undefined) {
             type = resourceInfo[1];
-            ontoName = this._resourceClassFormService.getOntologyName(resourceInfo[0]);
+            ontoName = this._ontologyService.getOntologyName(resourceInfo[0]);
             newLabel = ontoName + ':' + type;
         } else {
             type = iri.split('/').pop();