-
Notifications
You must be signed in to change notification settings - Fork 6
/
resource-class-info.component.html
124 lines (121 loc) · 7.3 KB
/
resource-class-info.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
<mat-card class="resource-class" cdkDrag cdkDragBoundary=".drag-drop-stop">
<!-- class card header -->
<mat-card-header class="resource-class-header" cdkDragHandle>
<!-- TODO: the res class icon is missing in ClassDefinition from DSP-JS-Lib; DSP-JS has to be updated first (s. DSP-1366) -->
<!-- <mat-icon mat-card-avatar>{{resourceClass.icon}}</mat-icon> -->
<mat-card-title [matTooltip]="(resourceClass.comment ? resourceClass.comment : '')" matTooltipPosition="above">
{{resourceClass.label | appTruncate: 24}}
</mat-card-title>
<mat-card-subtitle>
<span [matTooltip]="'id: ' + resourceClass.id" matTooltipPosition="above" matTooltipClass="wide-tooltip">
{{resourceClass.id | split: '#':1}}
</span>
<span> · </span>
<span matTooltip="subclass of" matTooltipPosition="above">
{{subClassOfLabel}}
</span>
</mat-card-subtitle>
<span class="resource-class-header-action">
<span class="resource-class-more" *ngIf="projectStatus"
[matTooltip]="(ontology.lastModificationDate ? 'more' : 'This data model can\'t be edited because of missing lastModificationDate!')">
<button mat-icon-button [matMenuTriggerFor]="resClassMenu" class="res-class-menu" [disabled]="!ontology.lastModificationDate" (click)="canBeDeleted()">
<mat-icon>more_horiz</mat-icon>
</button>
</span>
<span class="resource-class-size" [matTooltip]="(expanded ? 'Collapse class' : 'Expand class')">
<button mat-icon-button (click)="expanded = !expanded">
<mat-icon>{{expanded ? "expand_less" : "expand_more"}}</mat-icon>
</button>
</span>
</span>
<mat-menu #resClassMenu="matMenu" xPosition="before">
<button mat-menu-item class="res-class-edit"
(click)="editResourceClass.emit({iri: resourceClass.id, label: resourceClass.label})">
Edit resource class info
</button>
<span [matTooltip]="(classCanBeDeleted ? 'This class doesn\'t have any instances yet' : null)" matTooltipPosition="before">
<button mat-menu-item (click)="openResource(resourceClass.id)" [disabled]="classCanBeDeleted">
Open resource instances
</button>
</span>
<span [matTooltip]="(classCanBeDeleted ? null : 'This class can\'t be deleted because it is in use')" matTooltipPosition="before">
<button mat-menu-item [disabled]="!classCanBeDeleted" class="res-class-delete"
(click)="deleteResourceClass.emit({iri: resourceClass.id, label: resourceClass.label})">
Delete resource class
</button>
</span>
</mat-menu>
</mat-card-header>
<!-- resource class card content with list of properties -->
<mat-card-content *ngIf="expanded">
<mat-list cdkDropList class="resource-class-properties" (cdkDropListDropped)="drop($event)"
*ngIf="propsToDisplay.length; else noProperties">
<div cdkDrag [cdkDragDisabled]="!ontology.lastModificationDate || !cardinalityUpdateEnabled"
*ngFor="let prop of propsToDisplay; let i = index;">
<div class="drag-n-drop-placeholder" *cdkDragPlaceholder></div>
<mat-list-item class="property" [disabled]="loadProperty">
<span cdkDragHandle mat-list-icon class="list-icon gui-order">
<span [class.hide-on-hover]="cardinalityUpdateEnabled && lastModificationDate">{{i + 1}})</span>
<span *ngIf="lastModificationDate && cardinalityUpdateEnabled"
class="display-on-hover drag-n-drop-handle">
<mat-icon>drag_indicator</mat-icon>
</span>
</span>
<!-- display only properties if they exist in list of properties;
objectType is not a linkValue (otherwise we have the property twice) -->
<app-property-info class="property-info"
[propDef]="propsToDisplay[i].propDef"
[propCard]="propsToDisplay[i]"
[projectCode]="projectCode"
[projectStatus]="projectStatus"
[resourceIri]="resourceClass.id"
[(lastModificationDate)]="lastModificationDate"
(removePropertyFromClass)="removeProperty($event)">
</app-property-info>
</mat-list-item>
</div>
</mat-list>
<!-- message if the class doesn't have any property -->
<ng-template #noProperties>
<p>There is no property assigned to this class yet.</p>
</ng-template>
<!-- button to assign new property to class -->
<mat-list>
<!-- here we have to know if the class has values or not;
this information is important to handle the cardinality (1 resp. 1-n); we get this information from the canReplaceCardinality method -->
<mat-list-item *ngIf="lastModificationDate && projectStatus" class="property link" [matMenuTriggerFor]="addPropertyMenu" (click)="canReplaceCardinality()">
<span mat-list-icon class="list-icon">
<mat-icon>add</mat-icon>
</span>
Add property
</mat-list-item>
</mat-list>
<mat-menu #addPropertyMenu="matMenu" xPosition="after">
<button mat-menu-item [matMenuTriggerFor]="newFromPropType">Create new from type</button>
<button mat-menu-item [matMenuTriggerFor]="addExistingProp">Add existing property</button>
</mat-menu>
<mat-menu #newFromPropType="matMenu">
<ng-container *ngFor="let type of defaultProperties">
<button mat-menu-item [matMenuTriggerFor]="sub_menu">{{type.group}}</button>
<mat-menu #sub_menu="matMenu" class="default-nested-sub-menu">
<button mat-menu-item *ngFor="let ele of type.elements" [value]="ele"
[matTooltip]="ele.description" matTooltipPosition="after"
(click)="addNewProperty(ele)">
<mat-icon>{{ele.icon}}</mat-icon> {{ele.label}}
</button>
</mat-menu>
</ng-container>
</mat-menu>
<mat-menu #addExistingProp="matMenu" class="default-nested-sub-menu">
<ng-container *ngFor="let onto of existingProperties">
<button mat-menu-item [disabled]="!onto.properties.length" [matMenuTriggerFor]="sub_menu">{{ onto.ontologyLabel }}</button>
<mat-menu #sub_menu="matMenu" class="default-nested-sub-menu">
<button mat-menu-item *ngFor="let prop of onto.properties" [matTooltip]="prop.propDef.comment" matTooltipPosition="after"
(click)="addExistingProperty(prop)">
<mat-icon>{{prop.propType?.icon}}</mat-icon> {{prop.propDef.label}}
</button>
</mat-menu>
</ng-container>
</mat-menu>
</mat-card-content>
</mat-card>