/
display-edit.component.html
78 lines (78 loc) · 5.62 KB
/
display-edit.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
<div [class.grid-container]="editModeActive">
<div class="value-component"
(mouseenter)="mouseEnter()"
(mouseleave)="mouseLeave()"
[ngClass]='backgroundColor'>
<span [ngSwitch]="valueTypeOrClass">
<!-- display value is cast as 'any' because the compiler cannot infer the value type expected by the child component -->
<app-text-value-as-string class="parent-value-component" #displayVal *ngSwitchCase="'ReadTextValueAsString'" [mode]="mode" [displayValue]="$any(displayValue)" [textArea]="textArea"></app-text-value-as-string>
<app-text-value-as-html class="parent-value-component" #displayVal *ngSwitchCase="'ReadTextValueAsHtml'" [mode]="mode" [displayValue]="$any(displayValue)"></app-text-value-as-html>
<app-text-value-as-xml class="parent-value-component" #displayVal *ngSwitchCase="'ReadTextValueAsXml'" [mode]="mode" [displayValue]="$any(displayValue)"
(internalLinkClicked)="standoffLinkClicked($event)" (internalLinkHovered)="standoffLinkHovered($event)"></app-text-value-as-xml>
<app-int-value class="parent-value-component" #displayVal *ngSwitchCase="constants.IntValue" [mode]="mode" [displayValue]="$any(displayValue)"></app-int-value>
<app-boolean-value class="parent-value-component" #displayVal *ngSwitchCase="constants.BooleanValue" [mode]="mode" [displayValue]="$any(displayValue)"></app-boolean-value>
<app-uri-value class="parent-value-component" #displayVal *ngSwitchCase="constants.UriValue" [mode]="mode" [displayValue]="$any(displayValue)"></app-uri-value>
<app-decimal-value class="parent-value-component" #displayVal *ngSwitchCase="constants.DecimalValue" [mode]="mode" [displayValue]="$any(displayValue)"></app-decimal-value>
<app-color-value class="parent-value-component" #displayVal *ngSwitchCase="constants.ColorValue" [mode]="mode" [displayValue]="$any(displayValue)"></app-color-value>
<app-interval-value class="parent-value-component" #displayVal *ngSwitchCase="constants.IntervalValue" [mode]="mode" [displayValue]="$any(displayValue)"></app-interval-value>
<app-time-value class="parent-value-component" #displayVal *ngSwitchCase="constants.TimeValue" [mode]="mode" [displayValue]="$any(displayValue)"></app-time-value>
<app-geoname-value class="parent-value-component" #displayVal *ngSwitchCase="constants.GeonameValue" [mode]="mode" [displayValue]="$any(displayValue)"></app-geoname-value>
<app-link-value class="parent-value-component" #displayVal *ngSwitchCase="constants.LinkValue" [mode]="mode" [displayValue]="$any(displayValue)"
[parentResource]="parentResource" [propIri]="displayValue.property" (referredResourceClicked)="referredResourceClicked.emit($event)" (referredResourceHovered)="referredResourceHovered.emit($event)"></app-link-value>
<app-date-value class="parent-value-component" #displayVal *ngSwitchCase="constants.DateValue" [mode]="mode" [displayValue]="$any(displayValue)" [displayOptions]="dateDisplayOptions" [labels]="showDateLabels" [ontologyDateFormat]="dateFormat"></app-date-value>
<app-list-value class="parent-value-component" #displayVal *ngSwitchCase="constants.ListValue" [mode]="mode" [displayValue]="$any(displayValue)"
[propertyDef]="$any(parentResource.entityInfo.properties[displayValue.property])"></app-list-value>
<span *ngSwitchDefault>{{displayValue.strval}}</span>
</span>
<div class="action-bubble" *ngIf="showActionBubble && !editModeActive" [@simpleFadeAnimation]="'in'">
<div class="button-container">
<button mat-button
class="edit"
[matTooltip]="'edit'"
*ngIf="!readOnlyValue && canModify && !editModeActive"
(click)="activateEditMode()">
<mat-icon>edit</mat-icon>
</button>
<button mat-button
class="info"
matTooltip="{{getTooltipText()}}"
matTooltipClass="info-tooltip">
<mat-icon>info</mat-icon>
</button>
<button mat-button
class="comment-toggle"
title="toggle comment"
*ngIf="shouldShowCommentToggle"
(click)="toggleComment()">
<mat-icon>comment</mat-icon>
</button>
<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"
[disabled]="!canDelete"
(click)="openDialog()">
<mat-icon>delete</mat-icon>
</button>
</span>
</div>
</div>
</div>
<div class="crud-buttons" *ngIf="!readOnlyValue">
<button mat-icon-button
*ngIf="editModeActive"
class="value-action save"
title="save"
[disabled]="!displayValueComponent.form.valid"
(click)="saveEditValue()">
<mat-icon>save</mat-icon>
</button>
<button mat-icon-button
*ngIf="editModeActive"
class="value-action cancel"
title="cancel"
(click)="cancelEditValue()">
<mat-icon>undo</mat-icon>
</button>
</div>
</div>