feat(resource): display deleted resource (DEV-299) (#632)

* feat(resource): display deleted resource

* feat(resource): display deleted resource

* refactor(resource): make tslint happy

* chore(deps): bump js-lib to latest

* test: fix unit tests

Author: kilchenmann

package-lock.json

@@ -33,7 +33,7 @@
     "@angular/platform-browser-dynamic": "^12.2.14",
     "@angular/router": "^12.2.14",
     "@ckeditor/ckeditor5-angular": "^2.0.2",
-    "@dasch-swiss/dsp-js": "^6.0.0",
+    "@dasch-swiss/dsp-js": "^6.1.0",
     "@datadog/browser-rum": "^3.7.0",
     "@ngx-translate/core": "^12.1.2",
     "@ngx-translate/http-loader": "5.0.0",

package.json

@@ -1,6 +1,5 @@
-
 <!-- toolbar -->
-<div class="toolbar" *ngIf="project" [class.deleted]="deletedResource">
+<div class="toolbar" *ngIf="project" [class.deleted]="deletedResource || resource.res.isDeleted">
     <!-- resource info -->
     <h3 class="label mat-title">
         {{resource.res.label}} <span *ngIf="deletedResource">(deleted)</span>
@@ -12,22 +11,23 @@ <h3 class="label mat-title">
     <span class="action">
 
         <!-- Toggle list of properties: all or only the ones with value -->
-        <button mat-icon-button class="toggle-props" [matTooltip]="(showAllProps ? 'Hide empty' : 'Show all')+' properties'" matTooltipPosition="above"
+        <button mat-icon-button class="toggle-props" *ngIf="!resource.res.isDeleted"
+            [matTooltip]="(showAllProps ? 'Hide empty' : 'Show all')+' properties'" matTooltipPosition="above"
             (click)="toggleAllProps(showAllProps)">
             <mat-icon>{{showAllProps ? 'unfold_less' : 'unfold_more'}}</mat-icon>
             <!-- <span class="desktop-only">{{showAllProps ? 'Hide empty' : 'Show all'}} properties</span> -->
         </button>
 
         <!-- Share resource: copy ark url, add to favorites or open in new tab -->
-        <button mat-icon-button class="share-res" matTooltip="Share resource: {{resource.res.versionArkUrl}}" matTooltipPosition="above"
-            [disabled]="deletedResource"
-            [matMenuTriggerFor]="share">
+        <button mat-icon-button class="share-res" matTooltip="Share resource: {{resource.res.versionArkUrl}}"
+            matTooltipPosition="above" [disabled]="deletedResource" [matMenuTriggerFor]="share">
             <mat-icon>share</mat-icon>
             <!-- <span class="desktop-only">Citation Link</span> -->
         </button>
         <mat-menu #share="matMenu" class="res-share-menu">
             <button mat-menu-item matTooltip="Copy ARK url" matTooltipPosition="above"
-                [cdkCopyToClipboard]="resource.res.versionArkUrl" (click)="openSnackBar('ARK URL copied to clipboard!')">
+                [cdkCopyToClipboard]="resource.res.versionArkUrl"
+                (click)="openSnackBar('ARK URL copied to clipboard!')">
                 <mat-icon>content_copy</mat-icon>
                 Copy ARK url to clipboard
             </button>
@@ -41,29 +41,33 @@ <h3 class="label mat-title">
                 <mat-icon>open_in_new</mat-icon>
                 Open resource in new tab
             </button>
-                <!-- TODO: activate favorite action to add resource to collection -->
-                <!--
+            <!-- TODO: activate favorite action to add resource to collection -->
+            <!--
                 <button mat-button class="add-res-to-collection">
                     <mat-icon>star_border</mat-icon>
                 </button>
                 -->
         </mat-menu>
 
         <!-- more menu with: delete, erase resource -->
-        <button *ngIf="editPermissions && project?.status" 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">
-            <button mat-menu-item matTooltip="Edit the label of this resource" matTooltipPosition="above" (click)="openDialog('edit')">
+            <button mat-menu-item matTooltip="Edit the label of this resource" matTooltipPosition="above"
+                (click)="openDialog('edit')">
                 <mat-icon>edit</mat-icon>
                 Edit label
             </button>
-            <button mat-menu-item matTooltip="Move resource to trash bin." matTooltipPosition="above" (click)="openDialog('delete')">
+            <button mat-menu-item matTooltip="Move resource to trash bin." matTooltipPosition="above"
+                (click)="openDialog('delete')">
                 <mat-icon>delete</mat-icon>
                 Delete resource
+                <!-- TODO: or in case of already deleted resource: re-activate resource -->
             </button>
-            <button *ngIf="adminPermissions" mat-menu-item matTooltip="Erase resource forever. This cannot be undone." matTooltipPosition="above"
-                (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>
@@ -73,7 +77,7 @@ <h3 class="label mat-title">
 
 <!-- additional line with project and user information -->
 <div class="infobar mat-caption" *ngIf="project && user">
-    <span *ngIf="displayProjectInfo">This resource belongs to the project
+    <span *ngIf="displayProjectInfo">This resource {{ resource.res.isDeleted ? 'belonged' : 'belongs' }} to the project
         <span class="project link" (click)="openProject(project)" (mouseover)="previewProject(project)">
             <strong>{{project?.shortname}}</strong>
             <mat-icon inline>open_in_new</mat-icon>
@@ -89,8 +93,7 @@ <h3 class="label mat-title">
 
 <!-- list of properties -->
 <div class="properties-container">
-    <div class="properties" *ngIf="resource.resProps.length !== 0; else noProperties">
-
+    <div class="properties" *ngIf="resource.resProps.length > 0; else noProperties">
         <!-- list of properties -->
         <div *ngFor="let prop of resource.resProps; let last = last">
             <!-- show property; all in case of showAll === true or only the ones with prop.values -->
@@ -106,47 +109,35 @@ <h3 class="label mat-title">
                     prop.propDef.subjectType === representationConstants.region &&
                     prop.propDef.objectType !== representationConstants.color
                 ))
-            )"
-            [class.border-bottom]="prop.values && !last"
-            class="property">
+            )" [class.border-bottom]="prop.values && !last" class="property">
                 <div class="property-label">
                     <!-- label of the property -->
-                    <h3 class="label mat-subheading-1"
-                        [class.label-info]="prop.propDef.comment"
-                        [matTooltip]="prop.propDef.comment"
-                        matTooltipPosition="above">
+                    <h3 class="label mat-subheading-1" [class.label-info]="prop.propDef.comment"
+                        [matTooltip]="prop.propDef.comment" matTooltipPosition="above">
                         {{prop.propDef.label}}
                     </h3>
                 </div>
                 <div class="property-value">
                     <!-- the value(s) of the property -->
                     <div *ngFor="let val of prop.values">
-                        <app-display-edit *ngIf="val"
-                            #displayEdit
-                            [parentResource]="resource.res"
-                            [displayValue]="val"
-                            [propArray]="resource.resProps"
-                            [canDelete]="deleteValueIsAllowed(prop)"
-                            [projectStatus]="project?.status"
-                            [valueUuidToHighlight]="valueUuidToHighlight"
+                        <app-display-edit *ngIf="val" #displayEdit [parentResource]="resource.res" [displayValue]="val"
+                            [propArray]="resource.resProps" [canDelete]="deleteValueIsAllowed(prop)"
+                            [projectStatus]="project?.status" [valueUuidToHighlight]="valueUuidToHighlight"
                             (referredResourceClicked)="openResource($event)"
                             (referredResourceHovered)="previewResource($event)">
                         </app-display-edit>
                     </div>
                     <!-- Add value form -->
                     <div *ngIf="addValueFormIsVisible && propID === prop.propDef.id && project?.status">
-                        <app-add-value #addValue
-                            class="add-value"
-                            [parentResource]="resource.res"
+                        <app-add-value #addValue class="add-value" [parentResource]="resource.res"
                             [resourcePropertyDefinition]="$any(resource.res.entityInfo.properties[prop.propDef.id])"
                             (operationCancelled)="hideAddValueForm()">
                         </app-add-value>
                     </div>
                     <!-- Add button -->
                     <div *ngIf="addValueIsAllowed(prop) && project?.status">
                         <button mat-icon-button type="button" class="value-action create"
-                            (click)="showAddValueForm(prop, $event)"
-                            title="Add a new value">
+                            (click)="showAddValueForm(prop, $event)" title="Add a new value">
                             <mat-icon>add_box</mat-icon>
                         </button>
                     </div>
@@ -156,13 +147,11 @@ <h3 class="label mat-title">
                         <app-progress-indicator *ngIf="loading"></app-progress-indicator>
                         <div *ngIf="!loading">
                             <!-- the value(s) of the incoming links -->
-                            <a class="link link-value" *ngFor="let inRes of incomingLinkResources" (click)="openResource(inRes.id)">{{inRes.label}}</a>
-                            <mat-paginator *ngIf="numberOffAllIncomingLinkRes > 25"
-                                    [length]=numberOffAllIncomingLinkRes
-                                    [pageSize]="25"
-                                    [hidePageSize]="true"
-                                    [pageIndex]="pageEvent.pageIndex"
-                                    (page)="goToPage($event)">
+                            <a class="link link-value" *ngFor="let inRes of incomingLinkResources"
+                                (click)="openResource(inRes.id)">{{inRes.label}}</a>
+                            <mat-paginator *ngIf="numberOffAllIncomingLinkRes > 25" [length]=numberOffAllIncomingLinkRes
+                                [pageSize]="25" [hidePageSize]="true" [pageIndex]="pageEvent.pageIndex"
+                                (page)="goToPage($event)">
                             </mat-paginator>
                         </div>
                     </div>
@@ -171,7 +160,45 @@ <h3 class="label mat-title">
         </div>
 
     </div>
+
+    <!-- deleted resource or resource without any defined properties -->
     <ng-template #noProperties>
-        The resource {{resource?.res.resourceClassLabel}} has no defined properties.
+        <div *ngIf="resource.res.isDeleted" class="properties">
+            <div class="property border-bottom">
+                <div class="property-label">
+                    <!-- delete date -->
+                    <h3 class="label mat-subheading-1">
+                        Deleted on
+                    </h3>
+                </div>
+                <div class="property-value">
+                    {{ resource.res.deleteDate | date }}
+                </div>
+            </div>
+            <div class="property">
+                <div class="property-label">
+                    <!-- Delete comment -->
+                    <h3 class="label mat-subheading-1">
+                        Comment
+                    </h3>
+                </div>
+                <div class="property-value">
+                    {{ resource.res.deleteComment }}
+                </div>
+            </div>
+        </div>
+        <!-- no defined property -->
+        <div *ngIf="!resource.res.isDeleted" class="properties">
+            <div class="property border-bottom">
+                <div class="property-label">
+                    <h3 class="label mat-subheading-1">
+                        Info
+                    </h3>
+                </div>
+                <div class="property-value">
+                    This resource has no defined properties.
+                </div>
+            </div>
+        </div>
     </ng-template>
 </div>

src/app/workspace/resource/properties/properties.component.html

@@ -146,6 +146,15 @@
   }
 }
 
+.no-properties,
+.deleted-resource {
+  margin-top: 16px;
+
+  .comment {
+    margin: 16px;
+  }
+}
+
 .label {
   color: rgba(0, 0, 0, 0.54);
 }

src/app/workspace/resource/properties/properties.component.scss

@@ -423,7 +423,7 @@ export class PropertiesComponent implements OnInit, OnChanges, OnDestroy {
             }
         } else {
             // --> TODO: better error handler!
-            console.error('No properties exist for this resource');
+            console.warn('No properties exist for this resource');
         }
     }
 
@@ -452,7 +452,7 @@ export class PropertiesComponent implements OnInit, OnChanges, OnDestroy {
                 this.regionColorChanged.emit();
             }
         } else {
-            console.error('No properties exist for this resource');
+            console.warn('No properties exist for this resource');
         }
     }
 
@@ -491,7 +491,7 @@ export class PropertiesComponent implements OnInit, OnChanges, OnDestroy {
                 }
                 );
         } else {
-            console.error('No properties exist for this resource');
+            console.warn('No properties exist for this resource');
         }
     }
 

src/app/workspace/resource/properties/properties.component.ts

@@ -34,7 +34,7 @@
         </div>
 
         <!-- tabs -->
-        <mat-tab-group animationDuration="0ms" [(selectedIndex)]="selectedTab" (selectedTabChange)="tabChanged($event)">
+        <mat-tab-group *ngIf="!resource.res.isDeleted; else deletedResource" animationDuration="0ms" [(selectedIndex)]="selectedTab" (selectedTabChange)="tabChanged($event)">
             <!-- first tab for the main resource e.g. book -->
             <mat-tab [label]="resource.res.entityInfo?.classes[resource.res.type].label">
                 <app-properties *ngIf="resource.res" [resource]="resource" [displayProjectInfo]="true"
@@ -44,7 +44,7 @@
 
             <!-- incoming resource -->
             <mat-tab *ngIf="incomingResource"
-                [label]="incomingResource.res.entityInfo.classes[incomingResource.res.type].label">
+                [label]="incomingResource.res.entityInfo?.classes[incomingResource.res.type].label">
                 <app-properties *ngIf="incomingResource.res" [resource]="incomingResource" [displayProjectInfo]="false"
                 [adminPermissions]="adminPermissions" [editPermissions]="editPermissions" [valueUuidToHighlight]="valueUuid">
                 </app-properties>
@@ -69,6 +69,11 @@
 
             </mat-tab>
         </mat-tab-group>
+        <ng-template #deletedResource>
+            <app-properties *ngIf="resource.res" [resource]="resource" [displayProjectInfo]="true"
+                [adminPermissions]="adminPermissions" [editPermissions]="editPermissions" [valueUuidToHighlight]="valueUuid">
+            </app-properties>
+        </ng-template>
     </div>
     <!-- progress indicator -->
     <app-progress-indicator *ngIf="!resource && loading"></app-progress-indicator>