Skip to content

Commit 64e683a

Browse files
ralconada-gmvralconada-gmv
committed
adding dynamic forms in asset creation
1 parent ffa7aab commit 64e683a

File tree

14 files changed

+925
-183
lines changed

14 files changed

+925
-183
lines changed

‎.vscode/launch.json‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
{
2+
// Use IntelliSense to learn about possible attributes.
3+
// Hover to view descriptions of existing attributes.
4+
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
5+
"version": "0.2.0",
6+
"configurations": [
7+
{
8+
"type": "chrome",
9+
"request": "launch",
10+
"name": "Launch Chrome against localhost",
11+
"url": "http://localhost:4200/inesdata-connector-interface",
12+
"webRoot": "${workspaceFolder}"
13+
}
14+
]
15+
}

‎package-lock.json‎

Lines changed: 162 additions & 31 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,21 +20,29 @@
2020
"@angular/compiler": "^17.1.2",
2121
"@angular/core": "^17.1.2",
2222
"@angular/flex-layout": "~15.0.0-beta.42",
23-
"@angular/forms": "^17.1.2",
23+
"@angular/forms": "^17.3.4",
2424
"@angular/material": "~15.2.9",
2525
"@angular/platform-browser": "^17.1.2",
2626
"@angular/platform-browser-dynamic": "^17.1.2",
2727
"@angular/router": "^17.1.2",
28+
"@jsonforms/angular": "^3.2.1",
29+
"@jsonforms/angular-material": "^3.2.1",
30+
"@jsonforms/core": "^3.2.1",
2831
"@think-it-labs/edc-connector-client": "0.3.0",
2932
"install": "^0.13.0",
33+
"jexl": "^2.3.0",
34+
"jsonld": "^8.3.2",
35+
"ngx-schema-form": "^2.11.0",
3036
"rxjs": "~7.8.1",
37+
"z-schema": "^6.0.1",
3138
"zone.js": "~0.14.2"
3239
},
3340
"devDependencies": {
3441
"@angular-devkit/build-angular": "^17.1.2",
3542
"@angular/cli": "^17.1.2",
3643
"@angular/compiler-cli": "^17.1.2",
3744
"@types/jasmine": "~4.0.3",
45+
"@types/jsonld": "^1.5.13",
3846
"@types/node": "^20.8.7",
3947
"codelyzer": "^6.0.0",
4048
"eslint": "~8.42.0",

‎src/app/app.module.ts‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,11 @@ import { EdcConnectorClient } from "@think-it-labs/edc-connector-client";
2222
import {MatCardModule} from '@angular/material/card';
2323
import {SharedModule} from './shared/shared.module';
2424

25+
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
26+
import { JsonFormsModule } from '@jsonforms/angular';
27+
import { JsonFormsAngularMaterialModule } from '@jsonforms/angular-material';
28+
29+
2530
@NgModule({
2631
imports: [
2732
BrowserModule,
@@ -36,7 +41,11 @@ import {SharedModule} from './shared/shared.module';
3641
MatSnackBarModule,
3742
MatCardModule,
3843
SharedModule,
39-
HttpClientModule
44+
HttpClientModule,
45+
FormsModule,
46+
ReactiveFormsModule,
47+
JsonFormsModule,
48+
JsonFormsAngularMaterialModule,
4049
],
4150
declarations: [
4251
AppComponent

‎src/app/pages/assets/asset-editor-dialog/asset-editor-dialog.component.html‎

Lines changed: 167 additions & 134 deletions
Original file line numberDiff line numberDiff line change
@@ -1,140 +1,173 @@
1-
<mat-dialog-content>
2-
<div>
3-
<mat-form-field class="form-field" color="accent">
4-
<mat-label>Id</mat-label>
5-
<input required [(ngModel)]="id" matInput>
6-
</mat-form-field>
7-
<mat-form-field class="form-field" color="accent">
8-
<mat-label>Name</mat-label>
9-
<input [(ngModel)]="name" matInput>
10-
</mat-form-field>
11-
</div>
12-
<div>
13-
<mat-form-field class="form-field" color="accent">
14-
<mat-label>Content Type</mat-label>
15-
<input [(ngModel)]="contenttype" matInput [placeholder]="'text/plain'">
16-
</mat-form-field>
17-
18-
<mat-form-field class="form-field" color="accent">
19-
<mat-label>Version</mat-label>
20-
<input [(ngModel)]="version" matInput [placeholder]="'1.0'">
21-
</mat-form-field>
22-
</div>
23-
24-
<div>
25-
<mat-form-field class="form-field" color="accent">
26-
<mat-label>Destination</mat-label>
27-
<mat-select [(ngModel)]="storageTypeId">
28-
<mat-option *ngFor="let storageType of storageTypes " [value]="storageType.id">
29-
{{storageType.name}}
30-
</mat-option>
31-
</mat-select>
32-
</mat-form-field>
33-
</div>
34-
35-
<div *ngIf="storageTypeId === 'HttpData'">
36-
<mat-form-field class="form-field" color="accent">
37-
<mat-label>Name</mat-label>
38-
<input [(ngModel)]="httpDataAddress.name" matInput>
39-
</mat-form-field>
40-
41-
<mat-form-field class="form-field" color="accent">
42-
<mat-label>Path</mat-label>
43-
<input [(ngModel)]="httpDataAddress.path" matInput>
44-
</mat-form-field>
45-
46-
<mat-form-field class="form-field" color="accent">
47-
<mat-label>Base URL</mat-label>
48-
<input [(ngModel)]="httpDataAddress.baseUrl" matInput>
49-
</mat-form-field>
50-
51-
<mat-form-field class="form-field" color="accent">
52-
<mat-label>Auth Key</mat-label>
53-
<input [(ngModel)]="httpDataAddress.authKey" matInput>
54-
</mat-form-field>
55-
56-
<mat-form-field class="form-field" color="accent">
57-
<mat-label>Auth Code</mat-label>
58-
<input [(ngModel)]="httpDataAddress.authCode" matInput>
59-
</mat-form-field>
60-
61-
<mat-form-field class="form-field" color="accent">
62-
<mat-label>Secret Name</mat-label>
63-
<input [(ngModel)]="httpDataAddress.secretName" matInput>
64-
</mat-form-field>
65-
66-
<mat-form-field class="form-field" color="accent">
67-
<mat-label>Proxy Body</mat-label>
68-
<input [(ngModel)]="httpDataAddress.proxyBody" matInput>
69-
</mat-form-field>
70-
71-
<mat-form-field class="form-field" color="accent">
72-
<mat-label>Proxy Path</mat-label>
73-
<input [(ngModel)]="httpDataAddress.proxyPath" matInput>
74-
</mat-form-field>
75-
76-
<mat-form-field class="form-field" color="accent">
77-
<mat-label>Proxy Query Params</mat-label>
78-
<input [(ngModel)]="httpDataAddress.proxyQueryParams" matInput>
79-
</mat-form-field>
80-
81-
<mat-form-field class="form-field" color="accent">
82-
<mat-label>Proxy Method</mat-label>
83-
<input [(ngModel)]="httpDataAddress.roxyMethod" matInput>
84-
</mat-form-field>
85-
86-
<mat-form-field class="form-field" color="accent">
87-
<mat-label>Content Type</mat-label>
88-
<input [(ngModel)]="httpDataAddress.contentType" matInput>
89-
</mat-form-field>
90-
</div>
91-
92-
<div *ngIf="storageTypeId === 'AmazonS3'">
93-
<mat-form-field class="form-field" color="accent">
94-
<mat-label>Region</mat-label>
95-
<input required [(ngModel)]="amazonS3DataAddress.region" matInput>
96-
</mat-form-field>
97-
98-
<mat-form-field class="form-field" color="accent">
99-
<mat-label>Bucket Name</mat-label>
100-
<input [(ngModel)]="amazonS3DataAddress.bucketName" matInput>
101-
</mat-form-field>
102-
103-
<mat-form-field class="form-field" color="accent">
104-
<mat-label>Key Prefix</mat-label>
105-
<input [(ngModel)]="amazonS3DataAddress.keyPrefix" matInput>
106-
</mat-form-field>
107-
108-
<mat-form-field class="form-field" color="accent">
109-
<mat-label>Folder Name</mat-label>
110-
<input [(ngModel)]="amazonS3DataAddress.folderName" matInput>
111-
</mat-form-field>
112-
113-
<mat-form-field class="form-field" color="accent">
114-
<mat-label>Access Key Id</mat-label>
115-
<input [(ngModel)]="amazonS3DataAddress.accessKeyId" matInput>
116-
</mat-form-field>
117-
118-
<mat-form-field class="form-field" color="accent">
119-
<mat-label>Secret Access Key</mat-label>
120-
<input [(ngModel)]="amazonS3DataAddress.secretAccessKey" matInput>
121-
</mat-form-field>
122-
123-
<mat-form-field class="form-field" color="accent">
124-
<mat-label>Endpoint Override</mat-label>
125-
<input [(ngModel)]="amazonS3DataAddress.endpointOverride" matInput>
126-
</mat-form-field>
127-
</div>
1281

2+
<mat-dialog-content>
3+
<mat-tab-group>
4+
<mat-tab label="Asset information">
5+
<div class="asset-creation-tab">
6+
<div>
7+
<mat-form-field class="form-field" color="accent">
8+
<mat-label>Id</mat-label>
9+
<input required [(ngModel)]="id" matInput>
10+
</mat-form-field>
11+
<mat-form-field class="form-field" color="accent">
12+
<mat-label>Name</mat-label>
13+
<input [(ngModel)]="name" matInput>
14+
</mat-form-field>
15+
</div>
16+
<div>
17+
<mat-form-field class="form-field" color="accent">
18+
<mat-label>Content Type</mat-label>
19+
<input [(ngModel)]="contenttype" matInput [placeholder]="'text/plain'">
20+
</mat-form-field>
21+
22+
<mat-form-field class="form-field" color="accent">
23+
<mat-label>Version</mat-label>
24+
<input [(ngModel)]="version" matInput [placeholder]="'1.0'">
25+
</mat-form-field>
26+
</div>
27+
</div>
28+
</mat-tab>
29+
30+
<mat-tab label="Detailed information">
31+
<div class="asset-creation-tab">
32+
<div>
33+
<button (click)="setVocaulary(null)" color="{{vocabularyId == null ? 'accent' : 'primary'}}" mat-stroked-button>Default asset</button>
34+
<button *ngFor="let vocabulary of vocabularies" (click)="setVocaulary(vocabulary.id)" color="{{vocabularyId != null && vocabularyId == vocabulary.id ? 'accent' : 'primary'}}" mat-stroked-button>
35+
{{vocabulary.name}}
36+
</button>
37+
</div>
38+
<div *ngIf="vocabularyId">
39+
<h3>{{getVocabulary(vocabularyId).name}}</h3>
40+
<jsonforms
41+
[(data)]="data"
42+
[schema]="schema"
43+
[uischema]="uischema"
44+
[renderers]="renderers"
45+
[ajv]="ajv"
46+
></jsonforms>
47+
</div>
48+
<div *ngIf="! vocabularyId">
49+
<p>No additional metadata is required</p>
50+
</div>
51+
</div>
52+
</mat-tab>
53+
54+
<mat-tab label="Storage information">
55+
<div class="asset-creation-tab">
56+
<div>
57+
<mat-form-field class="form-field" color="accent">
58+
<mat-label>Destination</mat-label>
59+
<mat-select [(ngModel)]="storageTypeId">
60+
<mat-option *ngFor="let storageType of storageTypes " [value]="storageType.id">
61+
{{storageType.name}}
62+
</mat-option>
63+
</mat-select>
64+
</mat-form-field>
65+
</div>
66+
67+
<div *ngIf="storageTypeId === 'HttpData'">
68+
<mat-form-field class="form-field" color="accent">
69+
<mat-label>Name</mat-label>
70+
<input [(ngModel)]="httpDataAddress.name" matInput>
71+
</mat-form-field>
72+
73+
<mat-form-field class="form-field" color="accent">
74+
<mat-label>Path</mat-label>
75+
<input [(ngModel)]="httpDataAddress.path" matInput>
76+
</mat-form-field>
77+
78+
<mat-form-field class="form-field" color="accent">
79+
<mat-label>Base URL</mat-label>
80+
<input [(ngModel)]="httpDataAddress.baseUrl" matInput>
81+
</mat-form-field>
82+
83+
<mat-form-field class="form-field" color="accent">
84+
<mat-label>Auth Key</mat-label>
85+
<input [(ngModel)]="httpDataAddress.authKey" matInput>
86+
</mat-form-field>
87+
88+
<mat-form-field class="form-field" color="accent">
89+
<mat-label>Auth Code</mat-label>
90+
<input [(ngModel)]="httpDataAddress.authCode" matInput>
91+
</mat-form-field>
92+
93+
<mat-form-field class="form-field" color="accent">
94+
<mat-label>Secret Name</mat-label>
95+
<input [(ngModel)]="httpDataAddress.secretName" matInput>
96+
</mat-form-field>
97+
98+
<mat-form-field class="form-field" color="accent">
99+
<mat-label>Proxy Body</mat-label>
100+
<input [(ngModel)]="httpDataAddress.proxyBody" matInput>
101+
</mat-form-field>
102+
103+
<mat-form-field class="form-field" color="accent">
104+
<mat-label>Proxy Path</mat-label>
105+
<input [(ngModel)]="httpDataAddress.proxyPath" matInput>
106+
</mat-form-field>
107+
108+
<mat-form-field class="form-field" color="accent">
109+
<mat-label>Proxy Query Params</mat-label>
110+
<input [(ngModel)]="httpDataAddress.proxyQueryParams" matInput>
111+
</mat-form-field>
112+
113+
<mat-form-field class="form-field" color="accent">
114+
<mat-label>Proxy Method</mat-label>
115+
<input [(ngModel)]="httpDataAddress.roxyMethod" matInput>
116+
</mat-form-field>
117+
118+
<mat-form-field class="form-field" color="accent">
119+
<mat-label>Content Type</mat-label>
120+
<input [(ngModel)]="httpDataAddress.contentType" matInput>
121+
</mat-form-field>
122+
</div>
123+
124+
<div *ngIf="storageTypeId === 'AmazonS3'">
125+
<mat-form-field class="form-field" color="accent">
126+
<mat-label>Region</mat-label>
127+
<input required [(ngModel)]="amazonS3DataAddress.region" matInput>
128+
</mat-form-field>
129+
130+
<mat-form-field class="form-field" color="accent">
131+
<mat-label>Bucket Name</mat-label>
132+
<input [(ngModel)]="amazonS3DataAddress.bucketName" matInput>
133+
</mat-form-field>
134+
135+
<mat-form-field class="form-field" color="accent">
136+
<mat-label>Key Prefix</mat-label>
137+
<input [(ngModel)]="amazonS3DataAddress.keyPrefix" matInput>
138+
</mat-form-field>
139+
140+
<mat-form-field class="form-field" color="accent">
141+
<mat-label>Folder Name</mat-label>
142+
<input [(ngModel)]="amazonS3DataAddress.folderName" matInput>
143+
</mat-form-field>
144+
145+
<mat-form-field class="form-field" color="accent">
146+
<mat-label>Access Key Id</mat-label>
147+
<input [(ngModel)]="amazonS3DataAddress.accessKeyId" matInput>
148+
</mat-form-field>
149+
150+
<mat-form-field class="form-field" color="accent">
151+
<mat-label>Secret Access Key</mat-label>
152+
<input [(ngModel)]="amazonS3DataAddress.secretAccessKey" matInput>
153+
</mat-form-field>
154+
155+
<mat-form-field class="form-field" color="accent">
156+
<mat-label>Endpoint Override</mat-label>
157+
<input [(ngModel)]="amazonS3DataAddress.endpointOverride" matInput>
158+
</mat-form-field>
159+
</div>
160+
</div>
161+
</mat-tab>
162+
</mat-tab-group>
129163
</mat-dialog-content>
130164

131-
132165
<mat-dialog-actions>
133-
<button (click)="onSave()" color="accent" mat-stroked-button>
134-
<mat-icon>add_circle_outline</mat-icon> Create
135-
</button>
166+
<button (click)="onSave()" color="accent" mat-stroked-button>
167+
<mat-icon>add_circle_outline</mat-icon> Create
168+
</button>
136169

137-
<button color="accent" mat-dialog-close mat-stroked-button>
138-
<mat-icon>cancel</mat-icon> Cancel
139-
</button>
170+
<button color="accent" mat-dialog-close mat-stroked-button>
171+
<mat-icon>cancel</mat-icon> Cancel
172+
</button>
140173
</mat-dialog-actions>

0 commit comments

Comments
 (0)