feat(ontology): update cardinality in resource class (DSP-1266) (#377)

* style(ontology): update ontology editor style * feat(ontology): init "update cardinality" funcitonality * chore(ontology): prepare resclass from for card update * feat(ontology): update card * chore(dsp-js): using yalc for dsp-js for the moment * chore(dsp-api): using latest dsp-js version from main branch * chore(dependency): update js-lib to latest version * refactor(ontology): clean up code * feat(ontology): set and replace cardinality * style(ontology): change position of add prop button * feat(ontology): create prop and class name from randomized string * refactor(ontology): fix typo * feat(ontology): disable own res class in res pointer * feat(ontology): replace prop cardinality in res class * feat(ontology): disable edit menu in case of missing lmd * fix(ontology): fix cache issue * refactor(ontology): delete console.log * chore(ontology): replace ontology with data model * refactor(ontology): delete commented code * chore(deps): bump dsp-js from 1.3.0 to 2.0.1 and dsp-ui 1.2.1 to 1.2.2
dasch-swiss · Feb 12, 2021 · 5a766c1 · 5a766c1
1 parent 8133d87
commit 5a766c1
Show file tree

Hide file tree

Showing 15 changed files with 547 additions and 291 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -31,8 +31,8 @@
     "@angular/platform-browser-dynamic": "~9.1.12",
     "@angular/router": "~9.1.12",
     "@ckeditor/ckeditor5-angular": "^1.2.3",
-    "@dasch-swiss/dsp-js": "^1.3.0",
-    "@dasch-swiss/dsp-ui": "^1.2.1",
+    "@dasch-swiss/dsp-js": "^2.0.1",
+    "@dasch-swiss/dsp-ui": "^1.2.2",
     "@ngx-translate/core": "^13.0.0",
     "@ngx-translate/http-loader": "^6.0.0",
     "3d-force-graph": "^1.60.12",

diff --git a/src/app/main/dialog/dialog.component.html b/src/app/main/dialog/dialog.component.html
@@ -12,13 +12,15 @@
 
     <!-- Modify user data -->
     <div *ngSwitchCase="'editUser'">
-        <app-dialog-header [title]="data.name" [subtitle]="'appLabels.form.user.title.edit' | translate"></app-dialog-header>
+        <app-dialog-header [title]="data.name" [subtitle]="'appLabels.form.user.title.edit' | translate">
+        </app-dialog-header>
         <app-user-form [username]="data.name" (closeDialog)="dialogRef.close()"></app-user-form>
     </div>
 
     <!-- Update password -->
     <div *ngSwitchCase="'editPassword'">
-        <app-dialog-header [title]="data.name" [subtitle]="'appLabels.form.user.title.password' | translate"></app-dialog-header>
+        <app-dialog-header [title]="data.name" [subtitle]="'appLabels.form.user.title.password' | translate">
+        </app-dialog-header>
         <app-password-form [username]="data.name" (closeDialog)="dialogRef.close()"></app-password-form>
     </div>
 
@@ -95,13 +97,15 @@
 
     <!-- Modify project information -->
     <div *ngSwitchCase="'editProject'">
-        <app-dialog-header [title]="data.name" [subtitle]="'appLabels.form.project.title.edit' | translate"></app-dialog-header>
+        <app-dialog-header [title]="data.name" [subtitle]="'appLabels.form.project.title.edit' | translate">
+        </app-dialog-header>
         <app-project-form [projectcode]="data.project" (closeDialog)="dialogRef.close()"></app-project-form>
     </div>
 
     <!-- Delete project -->
     <div *ngSwitchCase="'deleteProject'">
-        <app-dialog-header [title]="data.name" [subtitle]="'appLabels.form.project.title.delete' | translate"></app-dialog-header>
+        <app-dialog-header [title]="data.name" [subtitle]="'appLabels.form.project.title.delete' | translate">
+        </app-dialog-header>
         Do you want to deactivate this project?
         <mat-dialog-actions>
             <button mat-button mat-dialog-close class="cancel-button center" [mat-dialog-close]="false">
@@ -117,7 +121,8 @@
 
     <!-- Reactivate project -->
     <div *ngSwitchCase="'activateProject'">
-        <app-dialog-header [title]="data.name" [subtitle]="'appLabels.form.project.title.activate' | translate"></app-dialog-header>
+        <app-dialog-header [title]="data.name" [subtitle]="'appLabels.form.project.title.activate' | translate">
+        </app-dialog-header>
         Do you want to reactivate this project?
         <mat-dialog-actions>
             <button mat-button mat-dialog-close class="cancel-button center" [mat-dialog-close]="false">
@@ -157,7 +162,8 @@
 
     <!-- Delete list -->
     <div *ngSwitchCase="'deleteList'">
-        <app-dialog-header [title]="data.title" [subtitle]="'appLabels.form.lists.title.delete' | translate"></app-dialog-header>
+        <app-dialog-header [title]="data.title" [subtitle]="'appLabels.form.lists.title.delete' | 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">
@@ -202,7 +208,7 @@
     <!-- Ontology editor: customize and add resource class -->
     <div *ngSwitchCase="'addResourceClass'">
         <app-dialog-header [title]="data.title" [subtitle]="data.subtitle"></app-dialog-header>
-        <app-resource-class-form [subClassOf]="data.name" [name]="data.title" [projectIri]="data.project"
+        <app-resource-class-form [iri]="data.id" [name]="data.title" [projectIri]="data.project"
             (closeDialog)="dialogRef.close()" (updateParent)="replaceTitle($event)">
         </app-resource-class-form>
     </div>
@@ -233,6 +239,14 @@
         </mat-dialog-actions>
     </div>
 
+    <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"
+            [showResourceClassForm]="false" [edit]="true" (closeDialog)="dialogRef.close()" (updateParent)="replaceTitle($event)">
+        </app-resource-class-form>
+    </div>
+
     <div *ngSwitchCase="'error'">
         <app-error [status]="data.id"></app-error>
     </div>
@@ -242,7 +256,8 @@
     <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>
+        <app-resource-instance-form (closeDialog)="dialogRef.close()" (updateParent)="replaceTitle($event)">
+        </app-resource-instance-form>
     </div>
 
     <!-- Unknown method (or not yet defined) -->

diff --git a/src/app/project/ontology/default-data/default-properties.ts b/src/app/project/ontology/default-data/default-properties.ts
@@ -147,7 +147,7 @@ export class DefaultProperties {
                     icon: 'link',
                     label: 'Other resource e.g. Person',
                     subPropOf: Constants.HasLinkTo,
-                    objectType: Constants.Resource,
+                    objectType: Constants.LinkValue,
                     gui_ele: Constants.SalsahGui + Constants.HashDelimiter + 'Searchbox',    // 'Autocomplete',
                     group: 'Link'
                 },

diff --git a/src/app/project/ontology/ontology.component.html b/src/app/project/ontology/ontology.component.html
@@ -1,6 +1,7 @@
 <div *ngIf="projectAdmin" class="desktop-only">
 
-    <p class="note warning center">This is a first version of the ontology editor. Some features may not work as intended.</p>
+    <p class="note warning center">This is a first version of the data model editor. Some features may not work as
+        intended.</p>
     <dsp-progress-indicator *ngIf="loading"></dsp-progress-indicator>
 
     <!-- toolbar: select ontology -->
@@ -53,7 +54,7 @@ <h2 class="mat-title">
     </div>
 
     <!-- main content: overview shows resource classes of ontology -->
-    <div *ngIf="ontology" class="ontology-editor drag-drop-stop">
+    <div *ngIf="ontology" class="ontology-editor">
 
         <mat-toolbar class="ontology-editor-header">
             <mat-toolbar-row>
@@ -83,7 +84,7 @@ <h3 class="mat-title" [matTooltip]="ontology.id">{{ontology?.label}}</h3>
 
                 <!-- edit options -->
                 <span class="ontology-actions">
-                    <p class="mat-caption space-reducer">Ontology configuration</p>
+                    <p class="mat-caption space-reducer">Data model configuration</p>
                     <!-- TODO: remove following span as soon edit mode is implemented; it's only for tooltip to use with disabled button  -->
                     <span [matTooltip]="'Edit ontology is not yet implemented'" matTooltipPosition="above">
                         <button mat-button [disabled]="!ontology.lastModificationDate" [disabled]="true"
@@ -102,62 +103,78 @@ <h3 class="mat-title" [matTooltip]="ontology.id">{{ontology?.label}}</h3>
             </mat-toolbar-row>
         </mat-toolbar>
 
-        <p *ngIf="!ontology.lastModificationDate" class="note warning center">This ontology can't be edited because of
-            missing "lastModificationDate"!</p>
-        <div #ontologyEditor *ngIf="!loadOntology && view === 'grid'" class="ontology-editor-canvas">
-            <!-- button to select and add new resource class to the ontology -->
-            <div class="add-resource-class"
-                *ngIf="project?.status && (sysAdmin || projectAdmin) && ontologyIri && ontology.lastModificationDate">
-                <button mat-raised-button color="primary" [matMenuTriggerFor]="addResClassMenu">
-                    Add resource class&nbsp;
-                    <mat-icon>add</mat-icon>
-                </button>
-                <mat-menu #addResClassMenu="matMenu" xPosition="before">
-                    <button mat-menu-item *ngFor="let type of resourceClass"
-                        (click)="openResourceClassForm('addResourceClass', type)">
-                        {{ type?.label }}
+        <div #ontologyEditor *ngIf="!loadOntology && view === 'grid'" class="ontology-editor-container">
+
+            <div class="ontology-editor-subheader">
+                <p *ngIf="!ontology.lastModificationDate" class="note warning center">
+                    This ontology can't be edited because of missing "lastModificationDate"!
+                </p>
+                <!-- button to select and add new resource class to the ontology -->
+                <div class="add-resource-class"
+                    *ngIf="project?.status && (sysAdmin || projectAdmin) && ontologyIri && ontology.lastModificationDate">
+                    <button mat-raised-button color="primary" [matMenuTriggerFor]="addResClassMenu">
+                        Add resource class&nbsp;
+                        <mat-icon>add</mat-icon>
                     </button>
-                </mat-menu>
+                    <mat-menu #addResClassMenu="matMenu" xPosition="before">
+                        <button mat-menu-item *ngFor="let type of resourceClass"
+                            (click)="openResourceClassForm('addResourceClass', type)">
+                            {{ type?.label }}
+                        </button>
+                    </mat-menu>
+                </div>
             </div>
 
-
-            <!-- list of resource classs -->
-            <div *ngFor="let resClass of ontoClasses; let i = index" class="resource-class" cdkDrag
-                cdkDragBoundary=".drag-drop-stop">
-                <mat-toolbar class="resource-class-header" cdkDragHandle>
-                    <mat-toolbar-row>
-                        <h4 mat-card-title [matTooltip]="resClass.label" matTooltipPosition="above">
-                            {{resClass.label | dspTruncate: 24}}</h4>
-                        <span class="fill-remaining-space"></span>
-                        <button mat-icon-button [matMenuTriggerFor]="resClassMenu">
-                            <mat-icon>more_horiz</mat-icon>
-                        </button>
-                        <mat-menu #resClassMenu="matMenu" xPosition="before">
-                            <button mat-menu-item [disabled]="true"
-                                (click)="openResourceClassForm('editResourceClass', {iri: resClass.id, name: '', label: resClass.label})">Edit
-                                (not yet implemented)</button>
-                            <button mat-menu-item
-                                (click)="delete(resClass.id, 'ResourceClass', resClass.label)">Delete</button>
-                        </mat-menu>
-                    </mat-toolbar-row>
-                </mat-toolbar>
-                <div class="resource-class-properties">
-                    <ul>
-                        <span *ngFor="let prop of resClass.propertiesList">
-                            <!-- display only properties with guiOrder and they exist in list of properties
+            <div class="ontology-editor-canvas drag-drop-stop">
+                <div class="ontology-editor-grid">
+
+                    <!-- list of resource classs -->
+                    <div *ngFor="let resClass of ontoClasses; let i = index" class="resource-class" cdkDrag
+                        cdkDragBoundary=".drag-drop-stop">
+                        <mat-toolbar class="resource-class-header" cdkDragHandle>
+                            <mat-toolbar-row>
+                                <h4 mat-card-title [matTooltip]="resClass.label" matTooltipPosition="above">
+                                    {{resClass.label | dspTruncate: 24}}</h4>
+                                <span class="fill-remaining-space"></span>
+                                <button mat-icon-button [matMenuTriggerFor]="resClassMenu"
+                                    [matTooltip]="(ontology.lastModificationDate ? null : 'This ontology can\'t be edited because of missing lastModificationDate!')"
+                                    matTooltipPosition="above">
+                                    <mat-icon>more_horiz</mat-icon>
+                                </button>
+                                <mat-menu #resClassMenu="matMenu" xPosition="before">
+                                    <button mat-menu-item [disabled]="!ontology.lastModificationDate" [disabled]="true"
+                                        (click)="openResourceClassForm('editResourceClass', {iri: resClass.id, name: '', label: resClass.label})">
+                                        Edit info (not yet implemented)
+                                    </button>
+                                    <button mat-menu-item [disabled]="!ontology.lastModificationDate"
+                                        (click)="updateCard(resClass)">
+                                        Update corresponding properties
+                                    </button>
+                                    <button mat-menu-item [disabled]="!ontology.lastModificationDate"
+                                        (click)="delete(resClass.id, 'ResourceClass', resClass.label)">
+                                        Delete resource class
+                                    </button>
+                                </mat-menu>
+                            </mat-toolbar-row>
+                        </mat-toolbar>
+                        <div class="resource-class-properties">
+                            <ul>
+                                <span *ngFor="let prop of resClass.propertiesList">
+                                    <!-- display only properties with guiOrder and they exist in list of properties
                                 and objectType is not a linkValue (otherwise we have the property twice) -->
-                            <li
-                                *ngIf="prop.guiOrder >= 0 && ontology?.properties[prop.propertyIndex] && ontology?.properties[prop.propertyIndex].objectType !== 'http://api.knora.org/ontology/knora-api/v2#LinkValue'">
-                                {{ontology?.properties[prop.propertyIndex].label}}
-                            </li>
-                        </span>
-
-                    </ul>
-                </div>
+                                    <li
+                                        *ngIf="prop.guiOrder >= 0 && ontology?.properties[prop.propertyIndex] && ontology?.properties[prop.propertyIndex].objectType !== 'http://api.knora.org/ontology/knora-api/v2#LinkValue'">
+                                        {{ontology?.properties[prop.propertyIndex].label}}
+                                    </li>
+                                </span>
 
-            </div>
+                            </ul>
+                        </div>
 
+                    </div>
 
+                </div>
+            </div>
         </div>
 
         <div *ngIf="view === 'graph'" class="ontology-viewer">