/
resource-instance-form.component.html
100 lines (90 loc) · 4.31 KB
/
resource-instance-form.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
<!-- Step1: form to select one project, one ontology, one resource -->
<form *ngIf="selectResourceForm && showNextStepForm" [formGroup]="selectResourceForm"
class="resource-instance-form stepOne form-content" (ngSubmit)="nextStep()">
<!-- select one project -->
<div *ngIf="usersProjects?.length > 0">
<app-select-project
[formGroup]="selectResourceForm"
[usersProjects]="usersProjects"
[selectedProject]="selectedProject"
(projectSelected)="selectOntologies($event)">
</app-select-project>
</div>
<!-- select one ontology -->
<span>
<div *ngIf="ontologiesMetadata?.ontologies.length > 0">
<app-select-ontology #selectOntology
[formGroup]="selectResourceForm"
[ontologiesMetadata]="ontologiesMetadata"
[selectedOntology]="selectedOntology"
(ontologySelected)="selectResourceClasses($event)">
</app-select-ontology>
</div>
</span>
<!-- select one resource -->
<span *ngIf="resourceClasses?.length > 0">
<app-select-resource-class #selectResourceClass
[formGroup]="selectResourceForm"
[resourceClassDefinitions]="resourceClasses"
[selectedResourceClass]="selectedResourceClass"
(resourceClassSelected)="selectProperties($event)">
</app-select-resource-class>
</span>
<span *ngIf="errorMessage">
<p class="errorIfNoElement"><strong>{{errorMessage}}</strong></p>
</span>
<!-- action buttons: cancel and next -->
<div class="form-panel form-action">
<span>
<button mat-button type="button" (click)="closeDialog.emit()">
{{ 'appLabels.form.action.cancel' | translate }}
</button>
</span>
<span class="fill-remaining-space"></span>
<span>
<!-- check each 'selected' property in addition to the forms validity because the form is actually valid when fetching ontologies and resource classes -->
<button mat-raised-button type="button" color="primary"
[disabled]="(!selectedProject || !selectedOntology || !selectedResourceClass || !selectResourceForm.valid) || this.errorMessage" (click)="nextStep()" class="form-next">
<app-progress-indicator *ngIf="loading" [status]="0" class="next-progress"></app-progress-indicator>
Next
</button>
</span>
</div>
</form>
<!-- Step2: create property values and submit data -->
<form *ngIf="propertiesParentForm && !showNextStepForm" [formGroup]="propertiesParentForm" class="resource-instance-form stepTwo form-content" (ngSubmit)="submitData()" appInvalidControlScroll>
<!-- upload file -->
<app-upload *ngIf="hasFileValue"
[parentForm]="propertiesParentForm"
[representation]="hasFileValue"
(fileInfo)="setFileValue($event)">
</app-upload>
<!-- create property values -->
<app-select-properties #selectProps
[ontologyInfo]="ontologyInfo"
[selectedResourceClass]="selectedResourceClass"
[properties]="properties"
[parentForm]="propertiesParentForm"
[currentOntoIri]="selectedOntology"
class="select-properties">
</app-select-properties>
<!-- action buttons: previous, cancel and save -->
<div class="form-panel form-action">
<span>
<button mat-button type="button" (click)="prevStep($event)">
← {{ 'appLabels.form.action.back' | translate }}
</button>
</span>
<button mat-button type="button" (click)="closeDialog.emit()">
{{ 'appLabels.form.action.cancel' | translate }}
</button>
<span class="fill-remaining-space"></span>
<span>
<button mat-raised-button type="submit" [color]="error ? 'warn' : 'primary'" class="form-submit" [disabled]="!propertiesParentForm.valid">
<app-progress-indicator *ngIf="loading && !error" [color]="'white'" [status]="0" class="submit-progress"></app-progress-indicator>
<mat-icon *ngIf="!loading && error">close</mat-icon>
{{ !loading && error ? ('appLabels.form.action.retry' | translate) : ('appLabels.form.action.submit' | translate) }}
</button>
</span>
</div>
</form>