Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Merged
merged 7 commits into from Jan 14, 2022
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
5ffdc29
feat(resource): display deleted resource
kilchenmann Jan 12, 2022
0567b7a
Merge branch 'main' into wip/dev-299-deleted-val-and-res
kilchenmann Jan 12, 2022
c21a11a
feat(resource): display deleted resource
kilchenmann Jan 12, 2022
a4870d2
refactor(resource): make tslint happy
kilchenmann Jan 12, 2022
5d275d1
chore(deps): bump js-lib to latest
kilchenmann Jan 14, 2022
d64a80b
test: fix unit tests
kilchenmann Jan 14, 2022
396846b
Merge branch 'main' into wip/dev-299-deleted-val-and-res
kilchenmann Jan 14, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
14 changes: 7 additions & 7 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Expand Up @@ -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",
Expand Down
117 changes: 72 additions & 45 deletions src/app/workspace/resource/properties/properties.component.html
View file
Open in desktop
@@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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 -->
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>
9 changes: 9 additions & 0 deletions src/app/workspace/resource/properties/properties.component.scss
View file
Open in desktop
Expand Up @@ -146,6 +146,15 @@
}
}

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

.comment {
margin: 16px;
}
}

.label {
color: rgba(0, 0, 0, 0.54);
}
Expand Down
6 changes: 3 additions & 3 deletions src/app/workspace/resource/properties/properties.component.ts
View file
Open in desktop
Expand Up @@ -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');
}
}

Expand Down Expand Up @@ -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');
}
}

Expand Down Expand Up @@ -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');
}
}

Expand Down
9 changes: 7 additions & 2 deletions src/app/workspace/resource/resource.component.html
View file
Open in desktop
Expand Up @@ -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)">
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we should also have a similar ngIf for the representation div of this file. As it is now, if I delete a resource with some sort of resource representation (audio, document, image, archive, etc.), I still see the representation. The resource representation is only hidden once I refresh the page.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

oh yes, you're right. I'll update asap

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, that's right. When deleting a resource, it's still visible as it was before (incl. all property values etc) because I do not get the updated resource information yet. In comparison to the current view of a deleted resource does not have any property and value information. But Rebecca is working on a better version, that we still get the whole resource information even when it's deleted. The current implementation in this PR is only a temporary solution to display something. In the previous version, the user was getting a blank page only.

<!-- 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"
Expand All @@ -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>
Expand All @@ -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">
kilchenmann marked this conversation as resolved.
Show resolved Hide resolved
</app-properties>
</ng-template>
</div>
<!-- progress indicator -->
<app-progress-indicator *ngIf="!resource && loading"></app-progress-indicator>
Expand Down