Skip to content
Permalink
Browse files
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
  • Loading branch information
kilchenmann committed Jan 14, 2022
1 parent cd01d87 commit 2c5fd8064f79d5da202b1274813acbebe16020ea
Show file tree
Hide file tree
Showing 8 changed files with 145 additions and 99 deletions.

Some generated files are not rendered by default. Learn more.

@@ -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",
@@ -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>
@@ -146,6 +146,15 @@
}
}

.no-properties,
.deleted-resource {
margin-top: 16px;

.comment {
margin: 16px;
}
}

.label {
color: rgba(0, 0, 0, 0.54);
}
@@ -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');
}
}

@@ -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>

0 comments on commit 2c5fd80

Please sign in to comment.