/
properties.component.html
126 lines (118 loc) · 5.7 KB
/
properties.component.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<!-- toolbar -->
<div class="toolbar" *ngIf="project">
<!-- resource info -->
<h3 class="label mat-title">
{{resource.res.label}}
</h3>
<span class="fill-remaining-space"></span>
<!-- tools: share, add to favorites, edit, delete etc. -->
<span>
<!-- TODO: activate favorite action to add resource to collection -->
<!--
<button mat-button class="add-res-to-collection">
<mat-icon>star_border</mat-icon>
</button>
-->
<!-- Toggle list of properties: all or only the ones with value -->
<button mat-button class="toggle-props" matTooltip="Toggle list of properties" matTooltipPosition="above"
(click)="showAllProps = !showAllProps">
<mat-icon>{{showAllProps ? 'unfold_less' : 'unfold_more'}}</mat-icon>
<span class="desktop-only">{{showAllProps ? 'Hide empty' : 'Show all'}} properties</span>
</button>
<!-- TODO: activate delete action to delete the whole resource -->
<!--
<button mat-button class="delete-res">
<mat-icon>delete</mat-icon>
</button>
-->
<!-- Share resource by copying the ark url -->
<button mat-button class="share-res" matTooltip="Share resource by copying ARK url" matTooltipPosition="above"
[matMenuTriggerFor]="share">
<mat-icon>share</mat-icon>
<span class="desktop-only">Citation Link</span>
</button>
<mat-menu #share="matMenu" class="res-share-menu">
<!-- citation link - ARK URL -->
<div class="ark-url-label mat-body">
<label for="clipboard-arkurl">Citation Link (ARK URL)</label>
</div>
<div class="ark-url-input">
<input id="clipboard-arkurl" class="clipboard-arkurl" cols="30" rows="10" readonly
[(ngModel)]="resource.res.versionArkUrl" />
<button mat-button class="btn-copy-arkurl" [cdkCopyToClipboard]="resource.res.versionArkUrl"
matTooltip="Copy ARK url" matTooltipPosition="below" (click)="openSnackBar()">
<mat-icon class="icon-arkurl">content_copy</mat-icon>
</button>
</div>
</mat-menu>
</span>
</div>
<!-- additional line with project and user information -->
<div class="infobar mat-caption" *ngIf="project && user">
<p *ngIf="displayProjectInfo">This resource belongs to the project
<span class="project link" (click)="openProject(project)" (mouseover)="previewProject(project)">
<b>{{project?.shortname}}</b>
<mat-icon inline>open_in_new</mat-icon>
</span>
</p>
<span class="fill-remaining-space"></span>
<p *ngIf="user || resource.res.creationDate">
Created
<span *ngIf="user">by {{(user.username ? user.username : user.givenName + ' ' + user.familyName)}}</span>
<span *ngIf="resource.res.creationDate"> on {{resource.res.creationDate | date}}</span>
</p>
</div>
<!-- list of properties -->
<div class="properties-container">
<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 -->
<div *ngIf="!prop.propDef['isLinkProperty'] && showAllProps || ( prop.values && prop.values.length > 0 )"
[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">
{{prop.propDef.label}}
</h3>
</div>
<div class="property-value">
<!-- the value(s) of the property -->
<div *ngFor="let val of prop.values">
<dsp-display-edit *ngIf="val"
#displayEdit
[parentResource]="resource.res"
[displayValue]="val"
[propArray]="resource.resProps"
(referredResourceClicked)="openResource($event)"
(referredResourceHovered)="previewResource($event)">
</dsp-display-edit>
</div>
<!-- Add value form -->
<div *ngIf="addValueFormIsVisible && propID === prop.propDef.id">
<dsp-add-value #addValue
class="add-value"
[parentResource]="resource.res"
[resourcePropertyDefinition]="$any(resource.res.entityInfo.properties[prop.propDef.id])"
(operationCancelled)="hideAddValueForm()">
</dsp-add-value>
</div>
<!-- Add button -->
<div *ngIf="addValueIsAllowed(prop)">
<button class="create"
(click)="showAddValueForm(prop)"
title="Add a new value">
<mat-icon>add_box</mat-icon>
</button>
</div>
</div>
</div>
</div>
</div>
<ng-template #noProperties>The resource {{resource?.res.resourceClassLabel}} has no defined
properties.</ng-template>
</div>