Skip to content

Commit 09f200f

Browse files
vstofvstof
committed
merge
2 parents b5e31da + b15281b commit 09f200f

28 files changed

Lines changed: 368 additions & 597 deletions

‎demo-bootstrap5/app/demo.component.html‎

Lines changed: 103 additions & 104 deletions
Original file line numberDiff line numberDiff line change
@@ -1,66 +1,69 @@
1-
<div class="demo-page-header">
2-
<h1>Angular JSON Schema Form — Demonstration Playground</h1>
3-
<div class="header-content">
4-
An Angular <a href="http://json-schema.org/">JSON Schema</a> Form builder for Angular, similar
5-
to, and mostly API compatible with,
6-
<span class="avoidwrap">
7-
<!-- JSON Schema Form's Angular Schema Form -->
8-
<!-- https://github.com/json-schema-form -->
9-
<!-- http://schemaform.io -->
10-
<a href="http://schemaform.io/examples/bootstrap-example.html">Angular Schema Form</a>,
11-
<!-- Mozilla's React JSON Schema Form -->
12-
<!-- https://github.com/mozilla-services/react-jsonschema-form -->
13-
<a href="https://mozilla-services.github.io/react-jsonschema-form/">React JSON Schema Form</a
14-
>, and
15-
<!-- Joshfire's JSON Form -->
16-
<!-- http://factory.joshfire.com/ -->
17-
<!-- http://github.com/joshfire/jsonform/wiki -->
18-
<a href="http://ulion.github.io/jsonform/playground/">JSON Form</a>. </span
19-
><br />
20-
Choose an example, or create your own, and check out the generated form.<br /><br />
1+
<div class="container">
2+
<div class="row">
3+
<div class="col-12">
4+
<h1>Angular JSON Schema Form — Demonstration Playground</h1>
5+
<div class="header-content">
6+
An Angular <a href="http://json-schema.org/">JSON Schema</a> Form builder for Angular,
7+
similar to, and mostly API compatible with,
8+
<span class="avoidwrap">
9+
<!-- JSON Schema Form's Angular Schema Form -->
10+
<!-- https://github.com/json-schema-form -->
11+
<!-- http://schemaform.io -->
12+
<a href="http://schemaform.io/examples/bootstrap-example.html">Angular Schema Form</a>,
13+
<!-- Mozilla's React JSON Schema Form -->
14+
<!-- https://github.com/mozilla-services/react-jsonschema-form -->
15+
<a href="https://mozilla-services.github.io/react-jsonschema-form/"
16+
>React JSON Schema Form</a
17+
>, and
18+
<!-- Joshfire's JSON Form -->
19+
<!-- http://factory.joshfire.com/ -->
20+
<!-- http://github.com/joshfire/jsonform/wiki -->
21+
<a href="http://ulion.github.io/jsonform/playground/">JSON Form</a>. </span
22+
><br />
23+
Choose an example, or create your own, and check out the generated form.<br /><br />
2124

22-
<div>
23-
<label for="procevent_category_code" class="form-label required">Current example:</label>
24-
<!--
25-
<select
26-
class="form-select"
27-
[(ngModel)]=""
28-
required
29-
id="procevent_category_code"
30-
(change)="loadSelectedExample(example.key, '', example.value.file, example.value.name)"
31-
32-
>
33-
@for (example_type of examples; track example_type) {
34-
<optgroup [label]="example_type.name">
35-
@for (example of example_type.schemas | keyvalue; track example) {
36-
<option
37-
[value]="example.value.file"
25+
<div>
26+
<label for="selectedExample" class="form-label required">Current example:</label>
27+
<select
28+
class="form-select"
29+
[(ngModel)]="selectedExample"
30+
required
31+
id="selectedExample"
32+
(change)="loadSelectedExample()"
3833
>
39-
{{ example.value.name }}
40-
</option>
41-
}
42-
</optgroup>
43-
}
44-
</select>
45-
-->
34+
<option value="">Please select an example</option>
35+
@for (example of exampleSets | keyvalue; track example ) {
36+
<optgroup [label]="example.value.name">
37+
@for (schema of example.value.schemas; track schema) {
38+
<option [value]="example.key + '|' + schema.file">
39+
{{ schema.name }}
40+
</option>
41+
}
42+
</optgroup>
43+
}
44+
</select>
45+
</div>
46+
</div>
47+
<hr />
4648
</div>
4749
</div>
48-
</div>
49-
<div>
50-
<div>
51-
<h4 class="default-cursor" (click)="toggleVisible('options')">
52-
{{ visible.options ? "▼" : "▶" }} Selected Framework and Options
53-
</h4>
54-
@if (visible.options) {
55-
<div fxLayout="column" [@expandSection]="true">
50+
<div class="row">
51+
<div class="col-md-6">
52+
<h4 class="default-cursor" (click)="toggleVisible('options')">
53+
{{ visible.options ? "▼" : "▶" }} Selected Options
54+
</h4>
55+
@if (visible.options) {
56+
<div>
57+
<label for="language" class="form-label required">Language:</label>
5658
<select
59+
class="form-select"
60+
id="language"
5761
[(ngModel)]="selectedLanguage"
58-
(onChange)="loadSelectedLanguage()"
5962
name="language"
6063
placeholder="Language"
6164
>
62-
@for (language of languageList; track language) {
63-
<option [value]="language">{{ languages[language] }}</option>
65+
@for (language of languages | keyvalue; track language) {
66+
<option [value]="language.key">{{ language.value }}</option>
6467
}
6568
</select>
6669
<div class="form-check">
@@ -108,14 +111,13 @@ <h4 class="default-cursor" (click)="toggleVisible('options')">
108111
</label>
109112
</div>
110113
</div>
111-
}
112-
<hr />
113-
<h4 class="default-cursor" (click)="toggleVisible('schema')">
114-
{{ visible.schema ? "▼" : "▶" }} Input JSON Schema and Form Layout
115-
</h4>
116-
@if (visible.schema) {
114+
}
115+
<hr />
116+
<h4 class="default-cursor" (click)="toggleVisible('schema')">
117+
{{ visible.schema ? "▼" : "▶" }} Input JSON Schema and Form Layout
118+
</h4>
119+
@if (visible.schema) {
117120
<div
118-
[@expandSection]="true"
119121
ace-editor
120122
[text]="jsonFormSchema"
121123
[options]="aceEditorOptions"
@@ -126,56 +128,52 @@ <h4 class="default-cursor" (click)="toggleVisible('schema')">
126128
>
127129
(loading form specification...)
128130
</div>
129-
}
130-
</div>
131+
}
132+
</div>
131133

132-
<div>
133-
<h4 class="default-cursor" (click)="toggleVisible('form')">
134-
{{ visible.form ? "▼" : "▶" }} Generated Form
135-
</h4>
136-
@if (visible.form) {
137-
<div class="json-schema-form" [@expandSection]="true">
134+
<div class="col-md-6">
135+
<h4 class="default-cursor" (click)="toggleVisible('form')">
136+
{{ visible.form ? "▼" : "▶" }} Generated Form
137+
</h4>
138+
@if (visible.form) {
139+
<div class="json-schema-form">
138140
@if (!formActive) {
139-
<div>{{ jsonFormStatusMessage }}</div>
141+
<div>{{ jsonFormStatusMessage }}</div>
140142
}
141143
<!-- This is the form! -->
142144
@if (formActive) {
143-
<json-schema-form
144-
loadExternalAssets="true"
145-
[form]="jsonFormObject"
146-
[options]="jsonFormOptions"
147-
framework="bootstrap-5"
148-
[language]="selectedLanguage"
149-
(onChanges)="onChanges($event)"
150-
(onSubmit)="onSubmit($event)"
151-
(isValid)="isValid($event)"
152-
(validationErrors)="validationErrors($event)"
153-
>
154-
</json-schema-form>
145+
<json-schema-form
146+
loadExternalAssets="true"
147+
[form]="jsonFormObject"
148+
[options]="jsonFormOptions"
149+
framework="bootstrap-5"
150+
[language]="selectedLanguage"
151+
(onChanges)="onChanges($event)"
152+
(onSubmit)="onSubmit($event)"
153+
(isValid)="isValid($event)"
154+
(validationErrors)="validationErrors($event)"
155+
>
156+
</json-schema-form>
155157
}
156158
</div>
157-
}
158-
<hr />
159-
<h4 class="default-cursor" (click)="toggleVisible('output')">
160-
{{ visible.output ? "▼" : "▶" }} Form Output
161-
</h4>
162-
@if (visible.output) {
163-
<div fxLayout="column" [@expandSection]="true">
159+
}
160+
<hr />
161+
<h4 class="default-cursor" (click)="toggleVisible('output')">
162+
{{ visible.output ? "▼" : "▶" }} Form Output
163+
</h4>
164+
@if (visible.output) {
165+
<div>
164166
<div>
165-
Valid?:
166-
@if (formIsValid || prettyValidationErrors) {
167-
<strong [class.text-success]="formIsValid" [class.text-danger]="!formIsValid">
168-
{{ formIsValid ? "Yes" : "No" }}
169-
</strong>
170-
}
171-
@if (!formIsValid && !prettyValidationErrors) {
172-
<span>n/a</span>
173-
}
174-
@if (prettyValidationErrors) {
175-
<span>— errors from validationErrors():</span>
176-
}
177-
@if (prettyValidationErrors) {
178-
<div class="data-bad" [innerHTML]="prettyValidationErrors"></div>
167+
Valid?: @if (formIsValid || prettyValidationErrors) {
168+
<strong [class.text-success]="formIsValid" [class.text-danger]="!formIsValid">
169+
{{ formIsValid ? "Yes" : "No" }}
170+
</strong>
171+
} @if (!formIsValid && !prettyValidationErrors) {
172+
<span>n/a</span>
173+
} @if (prettyValidationErrors) {
174+
<span>— errors from validationErrors():</span>
175+
} @if (prettyValidationErrors) {
176+
<div class="data-bad" [innerHTML]="prettyValidationErrors"></div>
179177
}
180178
</div>
181179
<br />
@@ -196,6 +194,7 @@ <h4 class="default-cursor" (click)="toggleVisible('output')">
196194
>
197195
</div>
198196
</div>
199-
}
197+
}
198+
</div>
200199
</div>
201200
</div>

‎demo-bootstrap5/app/demo.component.ts‎

Lines changed: 25 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import {trigger, state, style, animate, transition} from '@angular/animations';
33
import {ActivatedRoute, Router} from '@angular/router';
44
import {HttpClient} from '@angular/common/http';
55

6-
import {Examples} from './example-schemas.model';
6+
import {Examples, ExampleSet} from './example-schemas.model';
77
import {JsonPointer, JsonSchemaFormComponent} from '@ajsf/core';
88
import {CommonModule} from '@angular/common';
99
import {FormsModule} from '@angular/forms';
@@ -26,9 +26,8 @@ export class DemoComponent implements OnInit {
2626
private route = inject(ActivatedRoute);
2727
private router = inject(Router);
2828

29-
examples: any = Examples;
30-
languageList: any = ['de', 'en', 'es', 'fr', 'it', 'pt', 'zh'];
31-
languages: any = {
29+
exampleSets: {[key: string]: ExampleSet} = Examples;
30+
languages: {[key: string]: string} = {
3231
de: 'German',
3332
en: 'English',
3433
es: 'Spanish',
@@ -37,10 +36,7 @@ export class DemoComponent implements OnInit {
3736
pt: 'Portuguese',
3837
zh: 'Chinese',
3938
};
40-
selectedSet = 'ng-jsf';
41-
selectedSetName = '';
42-
selectedExample = 'ng-jsf-flex-layout';
43-
selectedExampleName = 'Flexbox layout';
39+
selectedExample = '';
4440
selectedLanguage = 'en';
4541
visible = {
4642
options: true,
@@ -76,25 +72,27 @@ export class DemoComponent implements OnInit {
7672
ngOnInit() {
7773
// Subscribe to query string to detect schema to load
7874
this.route.queryParams.subscribe((params) => {
79-
if (params['set']) {
80-
this.selectedSet = params['set'];
81-
this.selectedSetName = {
82-
'ng-jsf': '',
83-
asf: 'Angular Schema Form:',
84-
rsf: 'React Schema Form:',
85-
jsf: 'JSONForm:',
86-
}[this.selectedSet];
87-
}
8875
if (params['example']) {
8976
this.selectedExample = params['example'];
90-
this.selectedExampleName = this.examples[this.selectedSet].schemas.find(
91-
(schema) => schema.file === this.selectedExample,
92-
).name;
9377
}
9478
if (params['language']) {
9579
this.selectedLanguage = params['language'];
9680
}
97-
this.loadSelectedExample();
81+
if (this.selectedExample) {
82+
const p = this.selectedExample.split('|');
83+
console.log(p);
84+
const exampleURL = 'assets/example-schemas/' + p[1] + '.json';
85+
this.liveFormData = {};
86+
this.formActive = false;
87+
this.submittedFormData = null;
88+
this.formIsValid = null;
89+
this.formValidationErrors = null;
90+
91+
this.http.get(exampleURL, {responseType: 'text'}).subscribe((schema) => {
92+
this.jsonFormSchema = schema;
93+
this.generateForm(this.jsonFormSchema);
94+
});
95+
}
9896
});
9997
}
10098

@@ -130,7 +128,7 @@ export class DemoComponent implements OnInit {
130128
for (const error of this.formValidationErrors) {
131129
const message = error.message;
132130
const dataPathArray = JsonPointer.parse(error.dataPath);
133-
if (dataPathArray.length) {
131+
if (dataPathArray && dataPathArray.length) {
134132
let field = dataPathArray[0];
135133
for (let i = 1; i < dataPathArray.length; i++) {
136134
const key = dataPathArray[i];
@@ -144,40 +142,11 @@ export class DemoComponent implements OnInit {
144142
return errorArray.join('<br>');
145143
}
146144

147-
loadSelectedExample(
148-
selectedSet: string = this.selectedSet,
149-
selectedSetName: string = this.selectedSetName,
150-
selectedExample: string = this.selectedExample,
151-
selectedExampleName: string = this.selectedExampleName,
152-
) {
153-
if (selectedExample !== this.selectedExample) {
154-
this.formActive = false;
155-
this.selectedSet = selectedSet;
156-
this.selectedSetName = selectedSetName;
157-
this.selectedExample = selectedExample;
158-
this.selectedExampleName = selectedExampleName;
159-
this.router.navigateByUrl(
160-
'/?set=' +
161-
selectedSet +
162-
'&example=' +
163-
selectedExample +
164-
'&language=' +
165-
this.selectedLanguage,
166-
);
167-
this.liveFormData = {};
168-
this.submittedFormData = null;
169-
this.formIsValid = null;
170-
this.formValidationErrors = null;
171-
}
172-
const exampleURL = `assets/example-schemas/${this.selectedExample}.json`;
173-
this.http.get(exampleURL, {responseType: 'text'}).subscribe((schema) => {
174-
this.jsonFormSchema = schema;
175-
this.generateForm(this.jsonFormSchema);
176-
});
177-
}
178-
179-
loadSelectedLanguage() {
180-
window.location.href = `${window.location.pathname}?set=${this.selectedSet}&example=${this.selectedExample}&language=${this.selectedLanguage}`;
145+
loadSelectedExample() {
146+
console.log(this.selectedExample);
147+
this.router.navigateByUrl(
148+
'/?example=' + this.selectedExample + '&language=' + this.selectedLanguage,
149+
);
181150
}
182151

183152
// Display the form entered by the user

0 commit comments

Comments
 (0)