Skip to content

Commit c070698

Browse files
jscharettjscharett
authored
feat(options): adds parsing of options (#9)
* refactor: adds lodash typing * refactor: simplifies layout service This commit reworks the logic in layout service in order to make it easier to understand. The inital logic was pulled from angular-json-schema-form, but was proving to be difficult to follow as more functioanlity was added. This will hopefully break up the code a bit and make it more readable and maintainable * feat(options): formalized layout options Merges a few schema props into layout options as well as copying extra layout layout props into layout options. Mimics angular-json-schema-form * feat(options): add standard form options * refactor: adds additional use cases * docs: Adds missing docs * test: Add test cases for create * refactor: code cleanup * chore: update package lock
1 parent b89ddbf commit c070698

25 files changed

+1302
-631
lines changed

‎package-lock.json

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

‎package.json

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,11 +43,13 @@
4343
"@angular/router": "~7.2.0",
4444
"@types/ace": "0.0.36",
4545
"@types/json-schema": "^7.0.3",
46+
"@types/lodash": "^4.14.136",
4647
"ajv": "^6.10.0",
4748
"brace": "^0.11.0",
4849
"core-js": "^2.5.4",
4950
"json-schema-traverse": "^0.4.1",
50-
"lodash": "^4.17.11",
51+
"lodash": "^4.17.14",
52+
"lodash-decorators": "^6.0.1",
5153
"ng2-ace-editor": "0.3.9",
5254
"rxjs": "~6.5.2",
5355
"tslib": "^1.9.0",

‎projects/demo/src/app/app.component.html

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -88,6 +88,59 @@
8888
fxLayoutAlign.lt-sm="flex-start center">
8989
<div fxFlex="0 0 calc(50% - 12px)">
9090
<mat-card>
91+
<details>
92+
<summary>Options</summary>
93+
<div style="display: flex; flex-direction: column;">
94+
<mat-form-field>
95+
<input matInput placeholder="Action" [(ngModel)]="options.action">
96+
</mat-form-field>
97+
<mat-form-field>
98+
<mat-select
99+
[(ngModel)]="options.autocomplete"
100+
name="autocomplete"
101+
placeholder="AutoComplete">
102+
<mat-option [value]="undefined"></mat-option>
103+
<mat-option [value]="'on'">On</mat-option>
104+
<mat-option [value]="'off'">Off</mat-option>
105+
</mat-select>
106+
</mat-form-field>
107+
<mat-form-field>
108+
<mat-select
109+
[(ngModel)]="options.enctype"
110+
name="enctype"
111+
placeholder="Enctype">
112+
<mat-option [value]="undefined"></mat-option>
113+
<mat-option [value]="'application/x-www-form-urlencoded'">Application</mat-option>
114+
<mat-option [value]="'multipart/form-data'">Multipart form data</mat-option>
115+
<mat-option [value]="'text/plain'">Text plain</mat-option>
116+
</mat-select>
117+
</mat-form-field>
118+
<mat-form-field>
119+
<mat-select
120+
[(ngModel)]="options.method"
121+
name="method"
122+
placeholder="Method">
123+
<mat-option [value]="undefined"></mat-option>
124+
<mat-option [value]="'get'">Get</mat-option>
125+
<mat-option [value]="'post'">Post</mat-option>
126+
<mat-option [value]="'dialog'">Dialog</mat-option>
127+
</mat-select>
128+
</mat-form-field>
129+
<mat-form-field>
130+
<mat-select
131+
[(ngModel)]="options.target"
132+
name="target"
133+
placeholder="Target">
134+
<mat-option [value]="undefined"></mat-option>
135+
<mat-option [value]="'_self'">Self</mat-option>
136+
<mat-option [value]="'_blank'">Blank</mat-option>
137+
<mat-option [value]="'_parent'">Parent</mat-option>
138+
<mat-option [value]="'_top'">Top</mat-option>
139+
<!-- <mat-option [value]="'iframename'">Iframe</mat-option> -->
140+
</mat-select>
141+
</mat-form-field>
142+
</div>
143+
</details>
91144
<!-- <h4 class="default-cursor" (click)="toggleVisible('options')">
92145
{{visible.options ? '▼' : '▶'}} Selected Framework and Options
93146
</h4>
@@ -167,6 +220,11 @@
167220
<jsf-json-schema-form
168221
[schema]="jsonFormSchema"
169222
[layout]="jsonFormLayout"
223+
[action]="options.action"
224+
[autocomplete]="options.autocomplete"
225+
[enctype]="options.enctype"
226+
[method]="options.method"
227+
[target]="options.target"
170228
></jsf-json-schema-form>
171229
<!-- loadExternalAssets="true"
172230
[form]="jsonFormObject"

‎projects/demo/src/app/app.component.ts

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -79,6 +79,14 @@ export class AppComponent implements OnInit {
7979
maxLines: 1000,
8080
printMargin: false
8181
};
82+
83+
options = {
84+
action: undefined,
85+
autocomplete: undefined,
86+
enctype: undefined,
87+
method: undefined,
88+
target: undefined
89+
};
8290
@ViewChild(MatMenuTrigger) menuTrigger: MatMenuTrigger;
8391

8492
public examplesObservable: Observable<Array<any>>;

‎projects/demo/src/app/app.module.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { FlexLayoutModule } from '@angular/flex-layout';
44
import { FormsModule } from '@angular/forms';
55
import {
66
MatButtonModule, MatCardModule, MatCheckboxModule, MatIconModule,
7-
MatMenuModule, MatSelectModule, MatToolbarModule
7+
MatInputModule, MatMenuModule, MatSelectModule, MatToolbarModule
88
} from '@angular/material';
99
import { BrowserModule } from '@angular/platform-browser';
1010
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@@ -26,8 +26,8 @@ import { RootComponent } from './root.component';
2626
],
2727
imports: [
2828
BrowserModule, BrowserAnimationsModule, FormsModule, HttpClientModule, FlexLayoutModule,
29-
MatButtonModule, MatCardModule, MatCheckboxModule,
30-
MatIconModule, MatMenuModule, MatSelectModule, MatToolbarModule,
29+
MatButtonModule, MatCardModule, MatCheckboxModule, MatIconModule,
30+
MatInputModule, MatMenuModule, MatSelectModule, MatToolbarModule,
3131
RouterModule.forRoot(routes),
3232

3333
AceEditorModule,

‎projects/demo/src/assets/examples/ngx/kitchen-sink.json

Lines changed: 18 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,8 @@
88
"apikey": {
99
"title": "API key",
1010
"type": "string",
11-
"default": "supercalifragilisticexpialidocious"
11+
"default": "supercalifragilisticexpialidocious",
12+
"readOnly": true
1213
},
1314
"firstName": {
1415
"title": "First Name",
@@ -37,7 +38,8 @@
3738
"type": "string"
3839
},
3940
"postalCode": {
40-
"type": "string"
41+
"type": "string",
42+
"readOnly": false
4143
}
4244
}
4345
}
@@ -49,11 +51,23 @@
4951
"address.line1",
5052
"/address/line2",
5153
{
52-
"key": "address.city"
54+
"key": "address.city",
55+
"title": "City",
56+
"options": {
57+
"accesskey": "c",
58+
"tabindex": 1,
59+
"style": "color: red;"
60+
}
5361
},
5462
{
5563
"key": "/address/postalCode",
56-
"name": "zipCode"
64+
"name": "zipCode",
65+
"readonly": true,
66+
"options": {
67+
"disabled": true,
68+
"dirname": true
69+
},
70+
"htmlClass": "zipCode"
5771
}
5872
]
5973
}

‎projects/ngx-json-schema-form/ng-package.json

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
11
{
2-
"$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
3-
"dest": "../../dist/ngx-json-schema-form",
4-
"lib": {
5-
"entryFile": "src/public-api.ts",
6-
"umdModuleIds": {
7-
"lodash": "_",
8-
"ajv": "Ajv",
9-
"json-schema-traverse": "traverse"
2+
"$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
3+
"dest": "../../dist/ngx-json-schema-form",
4+
"lib": {
5+
"entryFile": "src/public-api.ts",
6+
"umdModuleIds": {
7+
"ajv": "Ajv",
8+
"json-schema-traverse": "traverse",
9+
"lodash": "_",
10+
"lodash-decorators": "lodashDecorators"
11+
}
1012
}
11-
}
1213
}

‎projects/ngx-json-schema-form/src/lib/json-schema-form.component.html

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,10 @@
1-
<form (ngSubmit)="submitForm()">
1+
<form
2+
[attr.action]="action"
3+
[attr.autocomplete]="autocomplete"
4+
[attr.enctype]="enctype"
5+
[attr.method]="method"
6+
[attr.target]="target"
7+
(ngSubmit)="submitForm()">
28
<div *ngFor="let layoutNode of layoutService.layout; trackBy: trackByFn;">
39
<jsf-select-widget [layoutNode]="layoutNode"></jsf-select-widget>
410
</div>

‎projects/ngx-json-schema-form/src/lib/json-schema-form.component.ts

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,31 @@ export class JsonSchemaFormComponent implements OnChanges, OnInit {
5858
@Input() schema: JSONSchema7;
5959
/** Layout used to define how the form is rendered */
6060
@Input() layout: Array<LayoutItem>;
61+
/**
62+
* Sets the action attribute of the internal form
63+
* See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#Attributes}
64+
*/
65+
@Input() action: string | null;
66+
/**
67+
* Sets the autocomplete attribute of the internal form
68+
* See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#Attributes}
69+
*/
70+
@Input() autocomplete: 'on' | 'off' | null;
71+
/**
72+
* Sets the enctype attribute of the internal form
73+
* See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#Attributes}
74+
*/
75+
@Input() enctype: 'application/x-www-form-urlencoded' | 'multipart/form-data' | 'text/plain' | null;
76+
/**
77+
* Sets the method attribute of the internal form
78+
* See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#Attributes}
79+
*/
80+
@Input() method: 'get' | 'post' | 'dialog' | null;
81+
/**
82+
* Sets the target attribute of the internal form
83+
* See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#Attributes}
84+
*/
85+
@Input() target: '_self' | '_blank' | '_parent' | '_top' | string | null;
6186

6287
private formInitialized = false;
6388

‎projects/ngx-json-schema-form/src/lib/json-schema-form.service.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ export class JsonSchemaFormService {
88

99
/** Sets a widgets properties upon Widget creation */
1010
initializeControl(control: Widget, bind = true): void {
11+
// Do we even need to do this? seems silly
1112
control.controlName = control.layoutNode.name;
1213
}
1314

0 commit comments

Comments
 (0)