fix: disable edit/delete action in deactivated projects (DEV-52) (#550)

* fix(resource): do not display edit buttons in deleted project * fix(project): do not display edit buttons in deleted project and use same style in list editor as we use in ontology editor * test: fix tests * fix(value): fix display-edit action buttons
dasch-swiss · Oct 15, 2021 · d7bec78 · d7bec78
1 parent fb846f9
commit d7bec78
Show file tree

Hide file tree

Showing 21 changed files with 80 additions and 68 deletions.
diff --git a/src/app/project/list/list-info-form/list-info-form.component.ts b/src/app/project/list/list-info-form/list-info-form.component.ts
@@ -36,8 +36,6 @@ export class ListInfoFormComponent implements OnInit {
 
     loading: boolean;
 
-    project: ReadProject;
-
     list: ListNodeInfo;
 
     labels: StringLiteral[];

diff --git a/src/app/project/list/list-item-form/list-item-form.component.html b/src/app/project/list/list-item-form/list-item-form.component.html
@@ -21,7 +21,7 @@
         [placeholder]="labels | appStringifyStringLiteral:'all' | appTruncate: 128" [value]="labels" [readonly]="true"
         (dataChanged)="handleData($event)" [language]="language">
     </app-string-literal-input>
-    <div class="action-bubble" *ngIf="showActionBubble" [@simpleFadeAnimation]="'in'">
+    <div class="action-bubble" *ngIf="showActionBubble && projectStatus" [@simpleFadeAnimation]="'in'">
         <div class="button-container">
             <button mat-button
                     *ngIf="position > 0"

diff --git a/src/app/project/list/list-item-form/list-item-form.component.spec.ts b/src/app/project/list/list-item-form/list-item-form.component.spec.ts
@@ -33,6 +33,7 @@ import { ListItemFormComponent, ListNodeOperation } from './list-item-form.compo
         (refreshParent)="updateView($event)"
         [projectIri]="projectIri"
         [projectCode]="projectCode"
+        [projectStatus]="true"
         [labels]="labels">
     </app-list-item-form>`
 })

diff --git a/src/app/project/list/list-item-form/list-item-form.component.ts b/src/app/project/list/list-item-form/list-item-form.component.ts
@@ -61,6 +61,11 @@ export class ListItemFormComponent implements OnInit {
      */
     @Input() projectCode?: string;
 
+    /**
+     * project status
+     */
+    @Input() projectStatus?: boolean;
+
     /**
      * project id
      */

diff --git a/src/app/project/list/list-item/list-item.component.html b/src/app/project/list/list-item/list-item.component.html
@@ -10,20 +10,20 @@
 
         <!-- existing node: show label in form; value is e.g. {{node.labels[0].value}} -->
         <app-list-item-form [iri]="node.id" [language]="language" (refreshParent)="updateView($event, true)"
-                            [projectIri]="projectIri" [projectCode]="projectCode" [labels]="node.labels"
+                            [projectIri]="projectIri" [projectCode]="projectCode" [projectStatus]="projectStatus" [labels]="node.labels"
                             [position]="node.position" [lastPosition]="last" [parentIri]="parentIri">
         </app-list-item-form>
 
 
         <!-- recursion: list with child nodes -->
         <app-list-item class="child-node" *ngIf="node.id === expandedNode && node.children.length > 0"
                        [language]="language" [childNode]="true" [list]="node.children" [parentIri]="node.id"
-                       [projectIri]="projectIri" [projectCode]="projectCode" (refreshChildren)="updateParentNodeChildren($event, node.position)">
+                       [projectIri]="projectIri" [projectCode]="projectCode" [projectStatus]="projectStatus" (refreshChildren)="updateParentNodeChildren($event, node.position)">
         </app-list-item>
 
 
         <!-- in case of none children: show form to append new item  -->
-        <div *ngIf="node.id === expandedNode && node.children.length === 0" class="child-node">
+        <div *ngIf="node.id === expandedNode && node.children.length === 0 && projectStatus" class="child-node">
             <!-- first child should have an empty list? yes -->
             <app-list-item-form class="append-child-node" [parentIri]="node.id" [projectIri]="projectIri"
                                 [projectCode]="projectCode" [language]="language" [newNode]="true"
@@ -32,7 +32,7 @@
         </div>
 
         <!-- form to append new item to parent node -->
-        <app-list-item-form class="list-node append-child-node" *ngIf="last" [parentIri]="parentIri"
+        <app-list-item-form class="list-node append-child-node" *ngIf="last && projectStatus" [parentIri]="parentIri"
                             [projectIri]="projectIri" [projectCode]="projectCode" [language]="language"
                             [newNode]="true" (refreshParent)="updateView($event)">
         </app-list-item-form>
@@ -41,7 +41,7 @@
 </div>
 
 <!-- new list to create if list is empty -->
-<div class="list" *ngIf="list && list.length === 0">
+<div class="list" *ngIf="list && list.length === 0 && projectStatus">
     <div class="list-node">
         <app-list-item-form [parentIri]="parentIri" [projectIri]="projectIri" [projectCode]="projectCode"
                             [language]="language" [newNode]="true" (refreshParent)="updateView($event)">

diff --git a/src/app/project/list/list-item/list-item.component.ts b/src/app/project/list/list-item/list-item.component.ts
@@ -26,6 +26,8 @@ export class ListItemComponent implements OnInit {
 
     @Input() projectCode: string;
 
+    @Input() projectStatus: boolean;
+
     @Input() projectIri: string;
 
     @Input() childNode: boolean;

diff --git a/src/app/project/list/list.component.html b/src/app/project/list/list.component.html
@@ -45,7 +45,7 @@ <h2 class="mat-title">
 
             <span class="fill-remaining-space"></span>
 
-            <span class="app-toolbar-action" [class.select-form]="lists.length">
+            <span class="app-toolbar-action" [class.select-form]="lists.length" *ngIf="project.status">
                 <button mat-raised-button color="primary" class="create-list-btn"
                     (click)="openDialog('createList', 'List', project.id)">
                     {{lists.length ? 'New list' : 'Create your first list'}}
@@ -66,20 +66,26 @@ <h2 class="mat-title">
                 <p class="mat-body" [matTooltip]="list.comments | appStringifyStringLiteral" matTooltipPosition="above">
                     {{list.comments | appStringifyStringLiteral | appTruncate:64}}</p>
                 <span class="fill-remaining-space"></span>
-                <button mat-button
-                    (click)="$event.stopPropagation(); openDialog('editListInfo', list.labels[0].value, list.id)"
-                    matTooltip="Edit info">
-                    <mat-icon>edit</mat-icon>
-                </button>
-                <button mat-button class="delete"
-                    (click)="$event.stopPropagation(); openDialog('deleteList', list.labels[0].value, list.id)"
-                    matTooltip="Delete list">
-                    <mat-icon>delete</mat-icon>
-                </button>
+
+                <span class="project-actions" *ngIf="project.status">
+                    <p class="mat-caption space-reducer">List configuration</p>
+                    <button mat-button
+                        (click)="$event.stopPropagation(); openDialog('editListInfo', list.labels[0].value, list.id)"
+                        matTooltip="Edit list info">
+                        <mat-icon>edit</mat-icon>
+                        Edit
+                    </button>
+                    <button mat-button class="delete"
+                        (click)="$event.stopPropagation(); openDialog('deleteList', list.labels[0].value, list.id)"
+                        matTooltip="Delete list">
+                        <mat-icon>delete</mat-icon>
+                        Delete
+                    </button>
+                </span>
             </mat-toolbar-row>
         </mat-toolbar>
 
-        <app-list-item [list]="list" [parentIri]="list.id" [projectIri]="project.id" [projectCode]="projectCode">
+        <app-list-item [list]="list" [parentIri]="list.id" [projectIri]="project.id" [projectCode]="projectCode" [projectStatus]="project.status">
         </app-list-item>
 
     </div>

diff --git a/src/app/project/list/list.component.scss b/src/app/project/list/list.component.scss
@@ -17,16 +17,3 @@
   }
 }
 
-.list-editor {
-  mat-toolbar-row {
-    button {
-      margin: 0% 0.5%;
-      padding: 1%;
-      min-width: 6%;
-      border-radius: 40px;
-    }
-    button:hover {
-      background-color: #ebebeb;
-    }
-  }
-}
diff --git a/src/app/project/ontology/ontology.component.html b/src/app/project/ontology/ontology.component.html
@@ -41,7 +41,7 @@ <h2 class="mat-title">
 
                 <span class="fill-remaining-space"></span>
 
-                <span class="app-toolbar-action" [class.select-form]="ontologies.length">
+                <span class="app-toolbar-action" [class.select-form]="ontologies.length" *ngIf="project.status">
                     <button mat-raised-button color="primary" class="create-data-model-btn"
                         (click)="openOntologyForm('createOntology')">
                         {{ontologies.length ? 'New data model' : 'Create your first data model'}}
@@ -98,11 +98,11 @@ <h2 class="mat-title">
 
                 <!-- edit options -->
                 <!-- TODO: move edit and delete function to config menu and add "Create new data model" to this place -->
-                <span class="ontology-actions">
+                <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" [disabled]="!ontology.lastModificationDate"
+                        <button mat-button [disabled]="!ontology.lastModificationDate"
                             (click)="$event.stopPropagation(); openOntologyForm('editOntology', ontology.id)">
                             <mat-icon>edit</mat-icon>
                             Edit
@@ -182,6 +182,7 @@ <h2 class="mat-title">
                     <app-resource-class-info *ngFor="let resClass of ontoClasses"
                         [resourceClass]="resClass"
                         [projectCode]="projectCode"
+                        [projectStatus]="project.status"
                         [ontoProperties]="ontoProperties"
                         [expanded]="expandClasses"
                         [(lastModificationDate)]="lastModificationDate"
@@ -199,20 +200,20 @@ <h2 class="mat-title">
                             <app-property-info
                                 [propDef]="ontology?.properties[prop.id]"
                                 [projectCode]="projectCode"
+                                [projectStatus]="project.status"
                                 [(lastModificationDate)]="lastModificationDate"
                                 (editResourceProperty)="openPropertyForm('editProperty', $event)"
                                 (deleteResourceProperty)="delete('Property', $event)">
                             </app-property-info>
                         </mat-list-item>
-                        <!-- <mat-list-item *ngFor="let prop of ontoProperties">{{prop.label}}</mat-list-item> -->
                     </mat-list>
                 </div>
             </mat-sidenav-content>
         </mat-sidenav-container>
 
-        <div *ngIf="view === 'graph'" class="ontology-viewer">
+        <!-- <div *ngIf="view === 'graph'" class="ontology-viewer">
             <app-ontology-visualizer [ontology]="ontology" [ontoClasses]="ontoClasses"></app-ontology-visualizer>
-        </div>
+        </div> -->
 
         <app-progress-indicator *ngIf="loadOntology && !loading && view !== 'graph'"></app-progress-indicator>
     </div>

diff --git a/src/app/project/ontology/ontology.component.scss b/src/app/project/ontology/ontology.component.scss
@@ -122,19 +122,3 @@ $width: 340px;
   top: 80px;
 }
 
-.mat-caption.space-reducer {
-  margin-top: 0;
-  margin-bottom: 6px;
-}
-.ontology-actions {
-  border-left: 1px solid $primary_200;
-  padding: 0 12px;
-  .mat-caption.space-reducer {
-    margin-top: -6px;
-    margin-bottom: 6px;
-  }
-}
-
-button.space-reducer {
-  margin: 0;
-}
diff --git a/src/app/project/ontology/property-info/property-info.component.html b/src/app/project/ontology/property-info/property-info.component.html
@@ -48,7 +48,7 @@
         </span>
     </div>
 
-    <div class="action-bubble" *ngIf="lastModificationDate && showActionBubble" [@simpleFadeAnimation]="'in'">
+    <div class="action-bubble" *ngIf="lastModificationDate && showActionBubble && projectStatus" [@simpleFadeAnimation]="'in'">
         <!-- property action in case of resource class' view has different buttons and actions -->
         <div class="button-container" *ngIf="propCard">
             <!-- TODO: edit cardinality is disabled for the moment. Will be activated as soon as we use DSP-API 13.9.1 -->

diff --git a/src/app/project/ontology/property-info/property-info.component.ts b/src/app/project/ontology/property-info/property-info.component.ts
@@ -87,6 +87,8 @@ export class PropertyInfoComponent implements OnChanges, AfterContentInit {
 
     @Input() projectCode: string;
 
+    @Input() projectStatus: boolean;
+
     @Input() lastModificationDate?: string;
 
     // event emitter when the lastModificationDate changed; bidirectional binding with lastModificationDate parameter

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
@@ -16,7 +16,7 @@
             </span>
         </mat-card-subtitle>
         <span class="resource-class-header-action">
-            <span class="resource-class-more"
+            <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">
                     <mat-icon>more_horiz</mat-icon>
@@ -73,7 +73,7 @@
         </ng-template>
         <!-- button to assign new property to class -->
         <mat-list>
-            <mat-list-item *ngIf="lastModificationDate" class="property link" [matMenuTriggerFor]="addPropertyMenu">
+            <mat-list-item *ngIf="lastModificationDate && projectStatus" class="property link" [matMenuTriggerFor]="addPropertyMenu">
                 <span mat-list-icon class="list-icon">
                     <mat-icon>add</mat-icon>
                 </span>

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
@@ -28,7 +28,7 @@ import { ResourceClassInfoComponent } from './resource-class-info.component';
  * Property is of type simple text
  */
 @Component({
-    template: '<app-resource-class-info #resClassInfo [resourceClass]="resourceClass"></app-resource-class-info>'
+    template: '<app-resource-class-info #resClassInfo [resourceClass]="resourceClass" [projectStatus]="true"></app-resource-class-info>'
 })
 class HostComponent implements OnInit {
 

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
@@ -38,6 +38,8 @@ export class ResourceClassInfoComponent implements OnInit {
 
     @Input() projectCode: string;
 
+    @Input() projectStatus: boolean;
+
     @Input() ontoProperties: ResourcePropertyDefinitionWithAllLanguages[] = [];
 
     @Input() lastModificationDate?: string;

diff --git a/src/app/workspace/resource/operations/display-edit/display-edit.component.html b/src/app/workspace/resource/operations/display-edit/display-edit.component.html
@@ -30,7 +30,7 @@
                 <button mat-button
                         class="edit"
                         [matTooltip]="'edit'"
-                        *ngIf="!readOnlyValue && canModify && !editModeActive"
+                        *ngIf="!readOnlyValue && canModify && !editModeActive && projectStatus"
                         (click)="activateEditMode()">
                     <mat-icon>edit</mat-icon>
                 </button>
@@ -50,7 +50,7 @@
                 <span [matTooltip]="(canDelete ? 'delete' : 'This value cannot be deleted because at least one value is required')">
                     <button mat-button
                         class="delete"
-                        *ngIf="!readOnlyValue && canModify && !editModeActive"
+                        *ngIf="!readOnlyValue && canModify && !editModeActive && projectStatus"
                         [disabled]="!canDelete"
                         (click)="openDialog()">
                         <mat-icon>delete</mat-icon>

diff --git a/src/app/workspace/resource/operations/display-edit/display-edit.component.spec.ts b/src/app/workspace/resource/operations/display-edit/display-edit.component.spec.ts
@@ -254,7 +254,9 @@ class TestDateValueComponent {
 @Component({
     selector: 'lib-host-component',
     template: `
-      <app-display-edit *ngIf="readValue" #displayEditVal [parentResource]="readResource"
+      <app-display-edit *ngIf="readValue" #displayEditVal
+                        [parentResource]="readResource"
+                        [projectStatus]="true"
                         [displayValue]="readValue"
                         [propArray]="propArray"
                         [canDelete]="deleteIsAllowed"

diff --git a/src/app/workspace/resource/operations/display-edit/display-edit.component.ts b/src/app/workspace/resource/operations/display-edit/display-edit.component.ts
@@ -77,6 +77,8 @@ export class DisplayEditComponent implements OnInit {
 
     @Input() canDelete: boolean;
 
+    @Input() projectStatus: boolean;
+
     @Output() referredResourceClicked: EventEmitter<ReadLinkValue> = new EventEmitter<ReadLinkValue>();
 
     @Output() referredResourceHovered: EventEmitter<ReadLinkValue> = new EventEmitter<ReadLinkValue>();

diff --git a/src/app/workspace/resource/properties/properties.component.html b/src/app/workspace/resource/properties/properties.component.html
@@ -45,7 +45,7 @@ <h3 class="label mat-title">
         </mat-menu>
 
         <!-- more menu with: delete, erase resource -->
-        <button *ngIf="editPermissions" mat-icon-button class="more-menu" matTooltip="More" matTooltipPosition="above" [matMenuTriggerFor]="more" [disabled]="deletedResource">
+        <button *ngIf="editPermissions && project?.status" mat-icon-button class="more-menu" matTooltip="More" matTooltipPosition="above" [matMenuTriggerFor]="more" [disabled]="deletedResource">
             <mat-icon>more_vert</mat-icon>
         </button>
         <mat-menu #more="matMenu" class="res-more-menu">
@@ -57,8 +57,8 @@ <h3 class="label mat-title">
                 <mat-icon>delete</mat-icon>
                 Delete resource
             </button>
-            <button mat-menu-item matTooltip="Erase resource forever. This cannot be undone." matTooltipPosition="above"
-                [disabled]="!adminPermissions" (click)="openDialog('erase')">
+            <button *ngIf="adminPermissions" mat-menu-item matTooltip="Erase resource forever. This cannot be undone." matTooltipPosition="above"
+                (click)="openDialog('erase')">
                 <mat-icon>delete_forever</mat-icon>
                 Erase resource
             </button>
@@ -121,12 +121,13 @@ <h3 class="label mat-title">
                             [displayValue]="val"
                             [propArray]="resource.resProps"
                             [canDelete]="deleteValueIsAllowed(prop)"
+                            [projectStatus]="project?.status"
                             (referredResourceClicked)="openResource($event)"
                             (referredResourceHovered)="previewResource($event)">
                         </app-display-edit>
                     </div>
                     <!-- Add value form -->
-                    <div *ngIf="addValueFormIsVisible && propID === prop.propDef.id">
+                    <div *ngIf="addValueFormIsVisible && propID === prop.propDef.id && project?.status">
                         <app-add-value #addValue
                             class="add-value"
                             [parentResource]="resource.res"
@@ -135,7 +136,7 @@ <h3 class="label mat-title">
                         </app-add-value>
                     </div>
                     <!-- Add button -->
-                    <div *ngIf="addValueIsAllowed(prop)">
+                    <div *ngIf="addValueIsAllowed(prop) && project?.status">
                         <button mat-icon-button class="value-action create"
                             (click)="showAddValueForm(prop)"
                             title="Add a new value">

diff --git a/src/app/workspace/results/list-view/resource-list/resource-list.component.ts b/src/app/workspace/results/list-view/resource-list/resource-list.component.ts
@@ -48,7 +48,9 @@ export class ResourceListComponent implements OnInit {
 
     ngOnInit() {
         // select the first item in the list
-        this.selectResource({ checked: true, resIndex: 0, resId: this.resources.resources[0].id, resLabel: this.resources.resources[0].label, isCheckbox: false });
+        if (this.resources.resources.length) {
+            this.selectResource({ checked: true, resIndex: 0, resId: this.resources.resources[0].id, resLabel: this.resources.resources[0].label, isCheckbox: false });
+        }
     }
 
     selectResource(status: CheckboxUpdate) {

diff --git a/src/assets/style/main.scss b/src/assets/style/main.scss
@@ -161,3 +161,20 @@ app-color-value {
     display: none;
   }
 }
+
+.mat-caption.space-reducer {
+  margin-top: 0;
+  margin-bottom: 6px;
+}
+.project-actions {
+  border-left: 1px solid $primary_200;
+  padding: 0 12px;
+  .mat-caption.space-reducer {
+    margin-top: -6px;
+    margin-bottom: 6px;
+  }
+}
+
+button.space-reducer {
+  margin: 0;
+}