From 02b5a489b539c555d557d8f78d03a88b30470fc6 Mon Sep 17 00:00:00 2001
From: mdelez <60604010+mdelez@users.noreply.github.com>
Date: Thu, 18 Aug 2022 14:42:00 +0200
Subject: [PATCH] feat(ontology): ontology editor read mode (DEV-1183) (#799)

* feat(ontology): ontology editor can now be viewed by project members in read mode

* feat(ontology): allow project members to access ontology editor via the old dashboard
---
 .../beta/settings/settings.component.ts       |  3 -
 .../project/ontology/ontology.component.html  | 20 +++---
 .../project/ontology/ontology.component.ts    | 15 +++--
 .../property-info/property-info.component.ts  |  8 ++-
 .../resource-class-info.component.html        | 67 ++++++++++---------
 .../resource-class-info.component.spec.ts     |  6 +-
 .../resource-class-info.component.ts          |  2 +
 src/app/project/project.component.html        | 16 +++--
 8 files changed, 82 insertions(+), 55 deletions(-)

diff --git a/src/app/project/beta/settings/settings.component.ts b/src/app/project/beta/settings/settings.component.ts
index 9da9a128ca..9ba3a28eaf 100644
--- a/src/app/project/beta/settings/settings.component.ts
+++ b/src/app/project/beta/settings/settings.component.ts
@@ -16,11 +16,8 @@ export class SettingsComponent implements OnInit {
     constructor() { }
 
     ngOnInit(): void {
-        // we need only two items from the old project navigation
         // collaboration
         this.navigation.push(AppGlobal.projectNav[1]);
-        // permissions
-        this.navigation.push(AppGlobal.projectNav[2]);
     }
 
 }
diff --git a/src/app/project/ontology/ontology.component.html b/src/app/project/ontology/ontology.component.html
index 3667f7dae6..886322e909 100644
--- a/src/app/project/ontology/ontology.component.html
+++ b/src/app/project/ontology/ontology.component.html
@@ -1,4 +1,4 @@
-<div *ngIf="projectAdmin && !disableContent">
+<div *ngIf="(projectMember || projectAdmin) && !disableContent">
 
     <app-progress-indicator *ngIf="loading"></app-progress-indicator>
 
@@ -41,7 +41,8 @@ <h2 class="mat-title">
 
                 <span class="fill-remaining-space"></span>
 
-                <span class="app-toolbar-action" [class.select-form]="ontologies.length" *ngIf="project.status">
+                <span class="app-toolbar-action" [class.select-form]="ontologies.length"
+                    *ngIf="project.status && projectAdmin">
                     <button mat-raised-button color="primary" class="create-data-model-btn"
                         (click)="openOntologyForm('createOntology')">
                         {{ontologies.length ? 'New data model' : 'Create your first data model'}}
@@ -101,16 +102,17 @@ <h2 class="mat-title">
                 <span class="ontology-actions project-actions" *ngIf="project.status">
                     <p class="mat-caption space-reducer">Data model configuration</p>
                     <span
-                        [matTooltip]="(ontology.lastModificationDate ? 'Edit data model info' : 'This data model can\'t be edited because of missing lastModificationDate!')">
-                        <button mat-button [disabled]="!ontology.lastModificationDate"
+                        [matTooltip]="(projectAdmin ? (ontology.lastModificationDate ? 'Edit data model info' : 'This data model can\'t be edited because of missing lastModificationDate!') : null)">
+                        <button mat-button [disabled]="!ontology.lastModificationDate || !projectAdmin"
                             (click)="$event.stopPropagation(); openOntologyForm('editOntology', ontology.id)">
                             <mat-icon>edit</mat-icon>
                             Edit
                         </button>
                     </span>
                     <span
-                        [matTooltip]="(ontology.lastModificationDate ? (ontologyCanBeDeleted ? 'Delete data model' : 'This data model can\'t be deleted because it is in use!') : 'This data model can\'t be deleted because of missing lastModificationDate!')">
-                        <button mat-button [disabled]="!ontology.lastModificationDate || !ontologyCanBeDeleted"
+                        [matTooltip]="(projectAdmin ? (ontology.lastModificationDate ? (ontologyCanBeDeleted ? 'Delete data model' : 'This data model can\'t be deleted because it is in use!') : 'This data model can\'t be deleted because of missing lastModificationDate!') : null)">
+                        <button mat-button
+                            [disabled]="(!ontology.lastModificationDate || !ontologyCanBeDeleted) || (!projectAdmin || !sysAdmin)"
                             (click)="$event.stopPropagation(); delete('Ontology', {iri: ontologyIri, label: ontology.label})">
                             <mat-icon>delete</mat-icon>
                             Delete
@@ -182,6 +184,7 @@ <h2 class="mat-title">
                     <app-resource-class-info *ngFor="let resClass of ontoClasses" [resourceClass]="resClass"
                         [projectCode]="projectCode" [projectStatus]="project.status" [ontologies]="ontologies"
                         [expanded]="expandClasses" [(lastModificationDate)]="lastModificationDate"
+                        [userCanEdit]="(projectAdmin || sysAdmin)"
                         (editResourceClass)="openResourceClassForm('editResourceClass', $event)"
                         (deleteResourceClass)="delete('ResourceClass', $event)"
                         (updateCardinality)="initOntology($event)">
@@ -196,6 +199,7 @@ <h2 class="mat-title">
                                  if objectType is a linkValue hide it (otherwise we have the property twice) -->
                             <app-property-info [propDef]="ontology?.properties[prop.id]" [projectCode]="projectCode"
                                 [projectStatus]="project.status" [(lastModificationDate)]="lastModificationDate"
+                                [userCanEdit]="(projectAdmin || sysAdmin)"
                                 (editResourceProperty)="openPropertyForm('editProperty', $event)"
                                 (deleteResourceProperty)="delete('Property', $event)">
                             </app-property-info>
@@ -210,8 +214,8 @@ <h2 class="mat-title">
 
 </div>
 
-<div *ngIf="!projectAdmin && !disableContent" class="content large middle">
+<div *ngIf="!projectMember && !disableContent && !loading" class="content large middle">
     <app-status [status]="403"></app-status>
 </div>
 
-<app-status *ngIf="disableContent" [status]="204"></app-status>
+<app-status *ngIf="disableContent" [status]="204"></app-status>
\ No newline at end of file
diff --git a/src/app/project/ontology/ontology.component.ts b/src/app/project/ontology/ontology.component.ts
index 63aedf8f9f..0f0c10a4de 100644
--- a/src/app/project/ontology/ontology.component.ts
+++ b/src/app/project/ontology/ontology.component.ts
@@ -19,7 +19,8 @@ import {
     PropertyDefinition,
     ReadOntology,
     ReadProject,
-    UpdateOntology
+    UpdateOntology,
+    UserResponse
 } from '@dasch-swiss/dsp-js';
 import { CacheService } from 'src/app/main/cache/cache.service';
 import { DspApiConnectionToken } from 'src/app/main/declarations/dsp-api-tokens';
@@ -58,9 +59,10 @@ export class OntologyComponent implements OnInit {
 
     // permissions of logged-in user
     session: Session;
-    // system admin or project admin is by default false
+    // system admin, project admin, and project member are by default false
     sysAdmin = false;
     projectAdmin = false;
+    projectMember = false;
 
     // project shortcode; as identifier in project cache service
     projectCode: string;
@@ -194,8 +196,13 @@ export class OntologyComponent implements OnInit {
                 // is logged-in user projectAdmin?
                 this.projectAdmin = this.sysAdmin ? this.sysAdmin : this.session.user.projectAdmin.some(e => e === this.project.id);
 
-                // get the ontologies for this project
-                this.initOntologiesList();
+                this._dspApiConnection.admin.usersEndpoint.getUserByUsername(this.session.user.name).subscribe(
+                    (userResponse: ApiResponseData<UserResponse>) => {
+                        this.projectMember = userResponse.body.user.projects.some(p => p.shortcode === this.project.shortcode);
+
+                        // get the ontologies for this project
+                        this.initOntologiesList();
+                    });
 
                 this.ontologyForm = this._fb.group({
                     ontology: new FormControl({
diff --git a/src/app/project/ontology/property-info/property-info.component.ts b/src/app/project/ontology/property-info/property-info.component.ts
index 7e4b59c2d1..ce137dd520 100644
--- a/src/app/project/ontology/property-info/property-info.component.ts
+++ b/src/app/project/ontology/property-info/property-info.component.ts
@@ -102,6 +102,8 @@ export class PropertyInfoComponent implements OnChanges, AfterContentInit {
 
     @Input() lastModificationDate?: string;
 
+    @Input() userCanEdit: boolean; // is user a project admin or sys admin?
+
     // event emitter when the lastModificationDate changed; bidirectional binding with lastModificationDate parameter
     @Output() lastModificationDateChange: EventEmitter<string> = new EventEmitter<string>();
 
@@ -315,8 +317,10 @@ export class PropertyInfoComponent implements OnChanges, AfterContentInit {
      * show action bubble with various CRUD buttons when hovered over.
      */
     mouseEnter() {
-        this.canBeDeleted();
-        this.showActionBubble = true;
+        if (this.userCanEdit) {
+            this.canBeDeleted();
+            this.showActionBubble = true;
+        }
     }
 
     /**
diff --git a/src/app/project/ontology/resource-class-info/resource-class-info.component.html b/src/app/project/ontology/resource-class-info/resource-class-info.component.html
index 640d1847af..dd7eb3da54 100644
--- a/src/app/project/ontology/resource-class-info/resource-class-info.component.html
+++ b/src/app/project/ontology/resource-class-info/resource-class-info.component.html
@@ -18,7 +18,8 @@
         <span class="resource-class-header-action">
             <span class="resource-class-more" *ngIf="projectStatus"
                 [matTooltip]="(ontology.lastModificationDate ? 'more' : 'This data model can\'t be edited because of missing lastModificationDate!')">
-                <button mat-icon-button [matMenuTriggerFor]="resClassMenu" class="res-class-menu" [disabled]="!ontology.lastModificationDate" (click)="canBeDeleted()">
+                <button mat-icon-button [matMenuTriggerFor]="resClassMenu" class="res-class-menu"
+                    [disabled]="!ontology.lastModificationDate" (click)="canBeDeleted()">
                     <mat-icon>more_horiz</mat-icon>
                 </button>
             </span>
@@ -29,22 +30,28 @@
             </span>
         </span>
         <mat-menu #resClassMenu="matMenu" xPosition="before">
-            <button mat-menu-item class="res-class-edit"
-                (click)="editResourceClass.emit({iri: resourceClass.id, label: resourceClass.label})">
-                Edit resource class info
-            </button>
+            <span *ngIf="userCanEdit">
+                <button mat-menu-item class="res-class-edit"
+                    (click)="editResourceClass.emit({iri: resourceClass.id, label: resourceClass.label})">
+                    Edit resource class info
+                </button>
+            </span>
             <span [matTooltip]="'This opens the resource instance form'" matTooltipPosition="before">
-                <button mat-menu-item (click)="createResourceInstance(resourceClass.id, resourceClass.label + ' (' + subClassOfLabel + ')')">
+                <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">
+            <span [matTooltip]="(classCanBeDeleted ? 'This class doesn\'t have any instances yet' : null)"
+                matTooltipPosition="before">
                 <button mat-menu-item (click)="openResourceInstances(resourceClass.id)" [disabled]="classCanBeDeleted">
                     Open resource instances
                 </button>
             </span>
-            <span [matTooltip]="(classCanBeDeleted ? null : 'This class can\'t be deleted because it is in use')" matTooltipPosition="before">
-                <button mat-menu-item [disabled]="!classCanBeDeleted" class="res-class-delete"
+            <span *ngIf="userCanEdit"
+                [matTooltip]="classCanBeDeleted ? null : 'This class can\'t be deleted because it is in use'"
+                matTooltipPosition="before">
+                <button mat-menu-item [disabled]="!classCanBeDeleted || !userCanEdit" class="res-class-delete"
                     (click)="deleteResourceClass.emit({iri: resourceClass.id, label: resourceClass.label})">
                     Delete resource class
                 </button>
@@ -56,40 +63,40 @@
     <mat-card-content *ngIf="expanded">
         <mat-list cdkDropList class="resource-class-properties" (cdkDropListDropped)="drop($event)"
             *ngIf="propsToDisplay.length; else noProperties">
-            <div cdkDrag [cdkDragDisabled]="!ontology.lastModificationDate || !cardinalityUpdateEnabled"
+            <div cdkDrag
+                [cdkDragDisabled]="(!ontology.lastModificationDate || !cardinalityUpdateEnabled) || !userCanEdit"
                 *ngFor="let prop of propsToDisplay; let i = index;">
                 <div class="drag-n-drop-placeholder" *cdkDragPlaceholder></div>
                 <mat-list-item class="property" [disabled]="loadProperty">
                     <span cdkDragHandle mat-list-icon class="list-icon gui-order">
-                        <span [class.hide-on-hover]="cardinalityUpdateEnabled && lastModificationDate">{{i + 1}})</span>
-                        <span *ngIf="lastModificationDate && cardinalityUpdateEnabled"
+                        <span [class.hide-on-hover]="cardinalityUpdateEnabled && lastModificationDate && userCanEdit">
+                            {{i + 1}})
+                        </span>
+                        <span *ngIf="cardinalityUpdateEnabled && lastModificationDate &&  userCanEdit"
                             class="display-on-hover drag-n-drop-handle">
                             <mat-icon>drag_indicator</mat-icon>
                         </span>
                     </span>
                     <!-- display only properties if they exist in list of properties;
                      objectType is not a linkValue (otherwise we have the property twice) -->
-                    <app-property-info class="property-info"
-                        [propDef]="propsToDisplay[i].propDef"
-                        [propCard]="propsToDisplay[i]"
-                        [projectCode]="projectCode"
-                        [projectStatus]="projectStatus"
-                        [resourceIri]="resourceClass.id"
-                        [(lastModificationDate)]="lastModificationDate"
-                        (removePropertyFromClass)="removeProperty($event)">
+                    <app-property-info class="property-info" [propDef]="propsToDisplay[i].propDef"
+                        [propCard]="propsToDisplay[i]" [projectCode]="projectCode" [projectStatus]="projectStatus"
+                        [resourceIri]="resourceClass.id" [(lastModificationDate)]="lastModificationDate"
+                        [userCanEdit]="userCanEdit" (removePropertyFromClass)="removeProperty($event)">
                     </app-property-info>
                 </mat-list-item>
             </div>
         </mat-list>
-        <!-- message if the class doesn't have any property -->
+        <!-- message if the class doesn't have any properties -->
         <ng-template #noProperties>
-            <p>There is no property assigned to this class yet.</p>
+            <p>There are no properties assigned to this class yet.</p>
         </ng-template>
         <!-- button to assign new property to class -->
         <mat-list>
             <!-- here we have to know if the class has values or not;
                 this information is important to handle the cardinality (1 resp. 1-n); we get this information from the canReplaceCardinality method -->
-            <mat-list-item *ngIf="lastModificationDate && projectStatus" class="property link" [matMenuTriggerFor]="addPropertyMenu" (click)="canReplaceCardinality()">
+            <mat-list-item *ngIf="lastModificationDate && projectStatus && userCanEdit" class="property link"
+                [matMenuTriggerFor]="addPropertyMenu" (click)="canReplaceCardinality()">
                 <span mat-list-icon class="list-icon">
                     <mat-icon>add</mat-icon>
                 </span>
@@ -105,9 +112,8 @@
             <ng-container *ngFor="let type of defaultProperties">
                 <button mat-menu-item [matMenuTriggerFor]="sub_menu">{{type.group}}</button>
                 <mat-menu #sub_menu="matMenu" class="default-nested-sub-menu">
-                    <button mat-menu-item *ngFor="let ele of type.elements" [value]="ele"
-                        [matTooltip]="ele.description" matTooltipPosition="after"
-                        (click)="addNewProperty(ele)">
+                    <button mat-menu-item *ngFor="let ele of type.elements" [value]="ele" [matTooltip]="ele.description"
+                        matTooltipPosition="after" (click)="addNewProperty(ele)">
                         <mat-icon>{{ele.icon}}</mat-icon> {{ele.label}}
                     </button>
                 </mat-menu>
@@ -115,10 +121,11 @@
         </mat-menu>
         <mat-menu #addExistingProp="matMenu" class="default-nested-sub-menu">
             <ng-container *ngFor="let onto of existingProperties">
-                <button mat-menu-item [disabled]="!onto.properties.length" [matMenuTriggerFor]="sub_menu">{{ onto.ontologyLabel }}</button>
+                <button mat-menu-item [disabled]="!onto.properties.length" [matMenuTriggerFor]="sub_menu">{{
+                    onto.ontologyLabel }}</button>
                 <mat-menu #sub_menu="matMenu" class="default-nested-sub-menu">
-                    <button mat-menu-item *ngFor="let prop of onto.properties" [matTooltip]="prop.propDef.comment" matTooltipPosition="after"
-                        (click)="addExistingProperty(prop)">
+                    <button mat-menu-item *ngFor="let prop of onto.properties" [matTooltip]="prop.propDef.comment"
+                        matTooltipPosition="after" (click)="addExistingProperty(prop)">
                         <mat-icon>{{prop.propType?.icon}}</mat-icon> {{prop.propDef.label}}
                     </button>
                 </mat-menu>
@@ -126,4 +133,4 @@
 
         </mat-menu>
     </mat-card-content>
-</mat-card>
+</mat-card>
\ No newline at end of file
diff --git a/src/app/project/ontology/resource-class-info/resource-class-info.component.spec.ts b/src/app/project/ontology/resource-class-info/resource-class-info.component.spec.ts
index 044332fdd0..2d04ef9873 100644
--- a/src/app/project/ontology/resource-class-info/resource-class-info.component.spec.ts
+++ b/src/app/project/ontology/resource-class-info/resource-class-info.component.spec.ts
@@ -30,7 +30,7 @@ import { ResourceClassInfoComponent } from './resource-class-info.component';
  * Property is of type simple text
  */
 @Component({
-    template: '<app-resource-class-info #resClassInfo [resourceClass]="resourceClass" [projectStatus]="true"></app-resource-class-info>'
+    template: '<app-resource-class-info #resClassInfo [resourceClass]="resourceClass" [projectStatus]="true" [userCanEdit]="userCanEdit"></app-resource-class-info>'
 })
 class HostComponent implements OnInit {
 
@@ -41,6 +41,8 @@ class HostComponent implements OnInit {
 
     resourceClass: ClassDefinition;
 
+    userCanEdit: boolean;
+
     constructor(
         private _cache: CacheService,
         private _sortingService: SortingService
@@ -72,6 +74,8 @@ class HostComponent implements OnInit {
             }
         );
 
+        this.userCanEdit = true;
+
     }
 
 }
diff --git a/src/app/project/ontology/resource-class-info/resource-class-info.component.ts b/src/app/project/ontology/resource-class-info/resource-class-info.component.ts
index 69c9bf6f85..aacd84e222 100644
--- a/src/app/project/ontology/resource-class-info/resource-class-info.component.ts
+++ b/src/app/project/ontology/resource-class-info/resource-class-info.component.ts
@@ -57,6 +57,8 @@ export class ResourceClassInfoComponent implements OnInit {
 
     @Input() lastModificationDate?: string;
 
+    @Input() userCanEdit: boolean; // is user a project admin or sys admin?
+
     // event emitter when the lastModificationDate changed; bidirectional binding with lastModificationDate parameter
     @Output() lastModificationDateChange: EventEmitter<string> = new EventEmitter<string>();
 
diff --git a/src/app/project/project.component.html b/src/app/project/project.component.html
index ad72e5ab2a..2569ba63e2 100644
--- a/src/app/project/project.component.html
+++ b/src/app/project/project.component.html
@@ -1,11 +1,11 @@
 <div *ngIf="!error; else StatusMsg">
     <!-- normal version -->
     <div *ngIf="!beta">
-        <nav *ngIf="projectAdmin && !loading" mat-tab-nav-bar mat-align-tabs="center"
+        <nav *ngIf="projectMember && !loading" mat-tab-nav-bar mat-align-tabs="center"
             class="navigation tab-bar margin-from-top" animationDuration="0ms" [color]="color">
-            <a mat-tab-link *ngFor="let link of navigation; let first = first" id="{{link.route}}"
+            <a mat-tab-link *ngFor="let link of navigation; let first = first; let i = index" id="{{link.route}}"
                 [routerLink]="link.route" routerLinkActive="active-tab" #rla="routerLinkActive" [active]="rla.isActive"
-                [disabled]="!first && !projectAdmin" [class.deactivated]="!project?.status">
+                [disabled]="!first && !projectAdmin && i !== 3" [class.deactivated]="!project?.status">
                 <mat-icon class="tab-icon">{{link.icon}}</mat-icon>
                 {{link.label}}
             </a>
@@ -20,7 +20,7 @@
                 <!-- Project label -->
                 <div class="link project-title" [routerLink]="'/beta/project/' + project.shortcode">
                     <p #projectTitle matTooltip="{{project.longname}}" matTooltipShowDelay="500"
-                        [matTooltipDisabled]="compareElementHeights(projectTitle)">
+                        [matTooltipDisabled]="compareElementHeights(projectTitle)" matTooltipPosition="right">
                         {{project.longname}}
                     </p>
                 </div>
@@ -65,10 +65,11 @@
                         <mat-expansion-panel [expanded]="first">
                             <mat-expansion-panel-header>
                                 <div class="sidenav-panel-header"
-                                    (click)="projectAdmin ? $event.stopPropagation() : true">
+                                    (click)="projectMember ? $event.stopPropagation() : true">
                                     <mat-panel-title class="mat-subheading-2"
-                                        (click)="projectAdmin ? open('ontology', onto.id) : null">
+                                        (click)="projectMember ? open('ontology', onto.id) : null">
                                         <p #ontoTitle matTooltip="{{onto.label}}" matTooltipShowDelay="500"
+                                            matTooltipPosition="right"
                                             [matTooltipDisabled]="compareElementHeights(ontoTitle)">{{onto.label}}</p>
                                     </mat-panel-title>
                                 </div>
@@ -100,7 +101,8 @@
                         <mat-list-item *ngFor="let list of projectLists" class="list link"
                             (click)="open('list', list.id)">
                             <p #listTitle matTooltip="{{list.labels | appStringifyStringLiteral}}"
-                                matTooltipShowDelay="500" [matTooltipDisabled]="compareElementHeights(listTitle)">
+                                matTooltipShowDelay="500" matTooltipPosition="right"
+                                [matTooltipDisabled]="compareElementHeights(listTitle)">
                                 {{list.labels | appStringifyStringLiteral}}
                             </p>
                             <mat-divider></mat-divider>