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
jscharett · Jul 16, 2019 · c070698 · c070698
1 parent b89ddbf
commit c070698
Show file tree

Hide file tree

Showing 25 changed files with 1,302 additions and 631 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -43,11 +43,13 @@
     "@angular/router": "~7.2.0",
     "@types/ace": "0.0.36",
     "@types/json-schema": "^7.0.3",
+    "@types/lodash": "^4.14.136",
     "ajv": "^6.10.0",
     "brace": "^0.11.0",
     "core-js": "^2.5.4",
     "json-schema-traverse": "^0.4.1",
-    "lodash": "^4.17.11",
+    "lodash": "^4.17.14",
+    "lodash-decorators": "^6.0.1",
     "ng2-ace-editor": "0.3.9",
     "rxjs": "~6.5.2",
     "tslib": "^1.9.0",

diff --git a/projects/demo/src/app/app.component.html b/projects/demo/src/app/app.component.html
@@ -88,6 +88,59 @@
     fxLayoutAlign.lt-sm="flex-start center">
     <div fxFlex="0 0 calc(50% - 12px)">
         <mat-card>
+            <details>
+                <summary>Options</summary>
+                <div style="display: flex; flex-direction: column;">
+                    <mat-form-field>
+                        <input matInput placeholder="Action" [(ngModel)]="options.action">
+                    </mat-form-field>
+                    <mat-form-field>
+                        <mat-select
+                            [(ngModel)]="options.autocomplete"
+                            name="autocomplete"
+                            placeholder="AutoComplete">
+                            <mat-option [value]="undefined"></mat-option>
+                            <mat-option [value]="'on'">On</mat-option>
+                            <mat-option [value]="'off'">Off</mat-option>
+                        </mat-select>
+                    </mat-form-field>
+                    <mat-form-field>
+                        <mat-select
+                            [(ngModel)]="options.enctype"
+                            name="enctype"
+                            placeholder="Enctype">
+                            <mat-option [value]="undefined"></mat-option>
+                            <mat-option [value]="'application/x-www-form-urlencoded'">Application</mat-option>
+                            <mat-option [value]="'multipart/form-data'">Multipart form data</mat-option>
+                            <mat-option [value]="'text/plain'">Text plain</mat-option>
+                        </mat-select>
+                    </mat-form-field>
+                    <mat-form-field>
+                        <mat-select
+                            [(ngModel)]="options.method"
+                            name="method"
+                            placeholder="Method">
+                            <mat-option [value]="undefined"></mat-option>
+                            <mat-option [value]="'get'">Get</mat-option>
+                            <mat-option [value]="'post'">Post</mat-option>
+                            <mat-option [value]="'dialog'">Dialog</mat-option>
+                        </mat-select>
+                    </mat-form-field>
+                    <mat-form-field>
+                        <mat-select
+                            [(ngModel)]="options.target"
+                            name="target"
+                            placeholder="Target">
+                            <mat-option [value]="undefined"></mat-option>
+                            <mat-option [value]="'_self'">Self</mat-option>
+                            <mat-option [value]="'_blank'">Blank</mat-option>
+                            <mat-option [value]="'_parent'">Parent</mat-option>
+                            <mat-option [value]="'_top'">Top</mat-option>
+                            <!-- <mat-option [value]="'iframename'">Iframe</mat-option> -->
+                        </mat-select>
+                    </mat-form-field>
+                </div>
+            </details>
         <!-- <h4 class="default-cursor" (click)="toggleVisible('options')">
             {{visible.options ? '▼' : '▶'}} Selected Framework and Options
         </h4>
@@ -167,6 +220,11 @@
                         <jsf-json-schema-form
                             [schema]="jsonFormSchema"
                             [layout]="jsonFormLayout"
+                            [action]="options.action"
+                            [autocomplete]="options.autocomplete"
+                            [enctype]="options.enctype"
+                            [method]="options.method"
+                            [target]="options.target"
                         ></jsf-json-schema-form>
                             <!-- loadExternalAssets="true"
                             [form]="jsonFormObject"

diff --git a/projects/demo/src/app/app.component.ts b/projects/demo/src/app/app.component.ts
@@ -79,6 +79,14 @@ export class AppComponent implements OnInit {
         maxLines: 1000,
         printMargin: false
     };
+
+    options = {
+        action: undefined,
+        autocomplete: undefined,
+        enctype: undefined,
+        method: undefined,
+        target: undefined
+    };
     @ViewChild(MatMenuTrigger) menuTrigger: MatMenuTrigger;
 
     public examplesObservable: Observable<Array<any>>;

diff --git a/projects/demo/src/app/app.module.ts b/projects/demo/src/app/app.module.ts
@@ -4,7 +4,7 @@ import { FlexLayoutModule } from '@angular/flex-layout';
 import { FormsModule } from '@angular/forms';
 import {
     MatButtonModule, MatCardModule, MatCheckboxModule, MatIconModule,
-    MatMenuModule, MatSelectModule, MatToolbarModule
+    MatInputModule, MatMenuModule, MatSelectModule, MatToolbarModule
 } from '@angular/material';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@@ -26,8 +26,8 @@ import { RootComponent } from './root.component';
     ],
     imports: [
         BrowserModule, BrowserAnimationsModule, FormsModule, HttpClientModule, FlexLayoutModule,
-        MatButtonModule, MatCardModule, MatCheckboxModule,
-        MatIconModule, MatMenuModule, MatSelectModule, MatToolbarModule,
+        MatButtonModule, MatCardModule, MatCheckboxModule, MatIconModule,
+        MatInputModule, MatMenuModule, MatSelectModule, MatToolbarModule,
         RouterModule.forRoot(routes),
 
         AceEditorModule,

diff --git a/projects/demo/src/assets/examples/ngx/kitchen-sink.json b/projects/demo/src/assets/examples/ngx/kitchen-sink.json
@@ -8,7 +8,8 @@
             "apikey": {
                 "title": "API key",
                 "type": "string",
-                "default": "supercalifragilisticexpialidocious"
+                "default": "supercalifragilisticexpialidocious",
+                "readOnly": true
             },
             "firstName": {
                 "title": "First Name",
@@ -37,7 +38,8 @@
                         "type": "string"
                     },
                     "postalCode": {
-                        "type": "string"
+                        "type": "string",
+                        "readOnly": false
                     }
                 }
             }
@@ -49,11 +51,23 @@
         "address.line1",
         "/address/line2",
         {
-            "key": "address.city"
+            "key": "address.city",
+            "title": "City",
+            "options": {
+                "accesskey": "c",
+                "tabindex": 1,
+                "style": "color: red;"
+            }
         },
         {
             "key": "/address/postalCode",
-            "name": "zipCode"
+            "name": "zipCode",
+            "readonly": true,
+            "options": {
+                "disabled": true,
+                "dirname": true
+            },
+            "htmlClass": "zipCode"
         }
     ]
 }
diff --git a/projects/ngx-json-schema-form/ng-package.json b/projects/ngx-json-schema-form/ng-package.json
@@ -1,12 +1,13 @@
 {
-  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
-  "dest": "../../dist/ngx-json-schema-form",
-  "lib": {
-    "entryFile": "src/public-api.ts",
-    "umdModuleIds": {
-        "lodash": "_",
-        "ajv": "Ajv",
-        "json-schema-traverse": "traverse"
+    "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+    "dest": "../../dist/ngx-json-schema-form",
+    "lib": {
+        "entryFile": "src/public-api.ts",
+        "umdModuleIds": {
+            "ajv": "Ajv",
+            "json-schema-traverse": "traverse",
+            "lodash": "_",
+            "lodash-decorators": "lodashDecorators"
+        }
     }
-  }
 }
diff --git a/projects/ngx-json-schema-form/src/lib/json-schema-form.component.html b/projects/ngx-json-schema-form/src/lib/json-schema-form.component.html
@@ -1,4 +1,10 @@
-<form (ngSubmit)="submitForm()">
+<form
+    [attr.action]="action"
+    [attr.autocomplete]="autocomplete"
+    [attr.enctype]="enctype"
+    [attr.method]="method"
+    [attr.target]="target"
+    (ngSubmit)="submitForm()">
     <div *ngFor="let layoutNode of layoutService.layout; trackBy: trackByFn;">
         <jsf-select-widget [layoutNode]="layoutNode"></jsf-select-widget>
     </div>

diff --git a/projects/ngx-json-schema-form/src/lib/json-schema-form.component.ts b/projects/ngx-json-schema-form/src/lib/json-schema-form.component.ts
@@ -58,6 +58,31 @@ export class JsonSchemaFormComponent implements OnChanges, OnInit {
     @Input() schema: JSONSchema7;
     /** Layout used to define how the form is rendered */
     @Input() layout: Array<LayoutItem>;
+    /**
+     * Sets the action attribute of the internal form
+     * See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#Attributes}
+     */
+    @Input() action: string | null;
+    /**
+     * Sets the autocomplete attribute of the internal form
+     * See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#Attributes}
+     */
+    @Input() autocomplete: 'on' | 'off' | null;
+    /**
+     * Sets the enctype attribute of the internal form
+     * See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#Attributes}
+     */
+    @Input() enctype: 'application/x-www-form-urlencoded' | 'multipart/form-data' | 'text/plain' | null;
+    /**
+     * Sets the method attribute of the internal form
+     * See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#Attributes}
+     */
+    @Input() method: 'get' | 'post' | 'dialog' | null;
+    /**
+     * Sets the target attribute of the internal form
+     * See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#Attributes}
+     */
+    @Input() target: '_self' | '_blank' | '_parent' | '_top' | string | null;
 
     private formInitialized = false;
 

diff --git a/projects/ngx-json-schema-form/src/lib/json-schema-form.service.ts b/projects/ngx-json-schema-form/src/lib/json-schema-form.service.ts
@@ -8,6 +8,7 @@ export class JsonSchemaFormService {
 
     /** Sets a widgets properties upon Widget creation */
     initializeControl(control: Widget, bind = true): void {
+        // Do we even need to do this?  seems silly
         control.controlName = control.layoutNode.name;
     }
 

diff --git a/projects/ngx-json-schema-form/src/lib/layout-item.data.ts b/projects/ngx-json-schema-form/src/lib/layout-item.data.ts
@@ -1,31 +1,19 @@
-export interface LayoutBase {
-    /** Name for the item.  Will be used as the input[name] */
-    name?: string;
-}
-export interface LayoutNode extends LayoutBase {
-    /** Unique Identifier for the item */
-    id: string;
-    /** JSON path for accessing data for this layout item */
-    dataPointer?: string;
-    /** Options for */
-    options: any;
-    /** Type of widget is used to represent the data */
-    type: string;
-    /** TODO */
-    // $ref?: any;
-    // arrayItem?;
-    // arrayItemType?;
-    // dataType?;
-    // items?: Array<any>;
-    // recursiveReference?;
-}
 /**  */
-export interface LayoutItem extends LayoutBase {
+export interface LayoutItem {
     /** Object path to map this item to a data value */
     key?: string;
+    /** Name for the item.  Will be used as the input[name] */
+    name?: string;
+    /**
+     * Container for options to set on widgets.
+     * NOTE: this is optional as any undeclared property will automatically be put into an options contianer
+     */
+    options?: {[others: string]: any};
     /**
      * Specify what type of widget is used to represent the data.
      * If not is specified, the JSON Schema will be used to determine the most appropriate widget
      */
     type?: string;
+
+    [others: string]: any;
 }