Added schema form module and components.

Closes #1036.

src/app/app.module.ts

@@ -31,6 +31,7 @@ import { DirectivesModule } from './directives';
 import { ComponentModule } from './components';
 import { DocViewerModule } from './components/doc-viewer/doc-viewer.module';
 import { SmartInputModule } from './components/smart-input/smart-input.module';
+import { SchemaFormModule } from './components/schema-form/schema-form.module';
 
 import { AppComponent } from './containers/app/app.component';
 import { WindowComponent } from './containers/window/window.component';
@@ -108,6 +109,7 @@ const providers = [
     SortablejsModule.forRoot({ animation: 150 }),
     ComponentModule,
     DocViewerModule,
+    SchemaFormModule,
     SmartInputModule,
     DirectivesModule,
     StoreModule.forRoot(reducerToken, { metaReducers }),

src/app/components/index.ts

@@ -32,6 +32,7 @@ import { EnvironmentManagerComponent } from './environment-manager/environment-m
 import { FancyInputComponent } from './fancy-input/fancy-input.component';
 import { PluginElementComponent } from './plugin-element/plugin-element.component';
 import { PreRequestEditorComponent } from './pre-request-editor/pre-request-editor.component';
+import { SchemaFormModule } from './schema-form/schema-form.module';
 
 const COMPONENTS = [
   QueryEditorComponent,
@@ -67,6 +68,7 @@ const COMPONENTS = [
     DirectivesModule,
     SharedModule,
     ClarityModule,
+    SchemaFormModule,
   ],
   declarations: COMPONENTS,
   exports: [ ...COMPONENTS ]

src/app/components/schema-form/schema-form-item-input/schema-form-item-input.component.html

@@ -0,0 +1,4 @@
+<nz-form-label *ngIf="item.description">{{ item.description }}</nz-form-label>
+<nz-form-control>
+  <input nz-input [placeholder]="item.key || ''" [(ngModel)]="data" [name]="item.key" (ngModelChange)="dataChange.next($event)" />
+</nz-form-control>

src/app/components/schema-form/schema-form-item-input/schema-form-item-input.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SchemaFormItemInputComponent } from './schema-form-item-input.component';
+
+describe('SchemaFormItemInputComponent', () => {
+  let component: SchemaFormItemInputComponent;
+  let fixture: ComponentFixture<SchemaFormItemInputComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ SchemaFormItemInputComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SchemaFormItemInputComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/schema-form/schema-form-item-input/schema-form-item-input.component.ts

@@ -0,0 +1,20 @@
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+
+@Component({
+  selector: 'app-schema-form-item-input',
+  templateUrl: './schema-form-item-input.component.html',
+  styles: []
+})
+export class SchemaFormItemInputComponent implements OnInit {
+
+  @Input() item;
+  @Input() data;
+
+  @Output() dataChange = new EventEmitter();
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/components/schema-form/schema-form-item-list/schema-form-item-list.component.html

@@ -0,0 +1,22 @@
+<nz-form-label>{{ item.description }}</nz-form-label>
+<ng-container *ngIf="data">
+  <div
+    *ngFor="let subdata of data; let index = index; trackBy: trackByIndex;"
+    class="ui-form__list-wrapper"
+  >
+    <app-schema-form-item
+      [item]="item.items"
+      [(data)]="data[index]"
+      (dataChange)="dataChange.next(data)"
+    ></app-schema-form-item>
+    <span class="ui-form__list-item-close" (click)="removeField(index)">&#215; {{ 'SCHEMA_FORM_LIST_REMOVE' | translate }}</span>
+  </div>
+</ng-container>
+<nz-form-item>
+  <nz-form-control>
+    <button class="app-button active-grey" (click)="addField()">
+      &#43;
+      {{ 'SCHEMA_FORM_LIST_ADD' | translate }}
+    </button>
+  </nz-form-control>
+</nz-form-item>

src/app/components/schema-form/schema-form-item-list/schema-form-item-list.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SchemaFormItemListComponent } from './schema-form-item-list.component';
+
+describe('SchemaFormItemListComponent', () => {
+  let component: SchemaFormItemListComponent;
+  let fixture: ComponentFixture<SchemaFormItemListComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ SchemaFormItemListComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SchemaFormItemListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/schema-form/schema-form-item-list/schema-form-item-list.component.ts

@@ -0,0 +1,40 @@
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+
+@Component({
+  selector: 'app-schema-form-item-list',
+  templateUrl: './schema-form-item-list.component.html',
+  styles: []
+})
+export class SchemaFormItemListComponent implements OnInit {
+
+  @Input() item;
+  @Input() data;
+
+  @Output() dataChange = new EventEmitter();
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+  addField() {
+    if (!this.data || !Array.isArray(this.data)) {
+      this.data = [];
+    }
+
+    this.data.push('');
+    this.dataChange.next(this.data);
+  }
+
+  removeField(index) {
+    if (this.data && Array.isArray(this.data)) {
+      this.data = this.data.filter((_, i) => i !== index);
+      this.dataChange.next(this.data);
+    }
+  }
+
+  trackByIndex(index) {
+    return index;
+  }
+
+}

src/app/components/schema-form/schema-form-item/schema-form-item.component.html

@@ -0,0 +1,43 @@
+<nz-form-item class="ui-form__item">
+  <ng-container [ngSwitch]="item.type">
+    <ng-container *ngSwitchCase="'number'">
+      <nz-form-label>{{ item.description }}</nz-form-label>
+      <nz-form-control>
+        <nz-input-number [(ngModel)]="data" [name]="item.key" (ngModelChange)="onInput($event, item)"></nz-input-number>
+      </nz-form-control>
+    </ng-container>
+    <ng-container *ngSwitchCase="'boolean'">
+      <nz-form-label>{{ item.description }}</nz-form-label>
+      <nz-form-control>
+        <nz-switch [(ngModel)]="data" [name]="item.key" (ngModelChange)="onInput($event, item)"></nz-switch>
+      </nz-form-control>
+    </ng-container>
+    <app-schema-form-item-input
+      *ngSwitchCase="'string'"
+      [item]="item"
+      [(data)]="data"
+      (dataChange)="onInput($event, item)"
+    ></app-schema-form-item-input>
+    <ng-container *ngSwitchCase="'array'">
+      <app-schema-form-item-list
+        [item]="item"
+        [(data)]="data"
+        (dataChange)="onInput($event, item)"
+      ></app-schema-form-item-list>
+    </ng-container>
+    <ng-container *ngSwitchDefault>
+      <ng-container *ngIf="item.ref">
+        <ng-container [ngSwitch]="item.refType">
+          <ng-container *ngSwitchCase="'enum.string'">
+              <nz-form-label>{{ item.description }}</nz-form-label>
+              <nz-form-control>
+                <nz-select [(ngModel)]="data" name="item.key" nzPlaceHolder="Choose" (ngModelChange)="onInput($event, item)">
+                  <nz-option *ngFor="let option of item.ref.enum" [nzValue]="option" [nzLabel]="getOptionLabel(option)"></nz-option>
+                </nz-select>
+              </nz-form-control>
+          </ng-container>
+        </ng-container>
+      </ng-container>
+    </ng-container>
+  </ng-container>
+</nz-form-item>

src/app/components/schema-form/schema-form-item/schema-form-item.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SchemaFormItemComponent } from './schema-form-item.component';
+
+describe('SchemaFormItemComponent', () => {
+  let component: SchemaFormItemComponent;
+  let fixture: ComponentFixture<SchemaFormItemComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ SchemaFormItemComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SchemaFormItemComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/schema-form/schema-form-item/schema-form-item.component.ts

@@ -0,0 +1,29 @@
+import { Component, OnInit, Input, Output, EventEmitter, ChangeDetectionStrategy } from '@angular/core';
+import config from 'app/config';
+
+@Component({
+  selector: 'app-schema-form-item',
+  templateUrl: './schema-form-item.component.html',
+  styles: [],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class SchemaFormItemComponent implements OnInit {
+
+  @Input() item;
+  @Input() data;
+
+  @Output() dataChange = new EventEmitter();
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+  getOptionLabel(option) {
+    return config.languages[option] || option;
+  }
+  onInput(event, item) {
+    // console.log(event, item);
+    this.dataChange.next(this.data);
+  }
+
+}

src/app/components/schema-form/schema-form.module.ts

@@ -0,0 +1,30 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { ClarityModule } from '@clr/angular';
+
+import { SharedModule } from '../../shared/shared.module';
+import { ComponentModule } from '..';
+
+import { SchemaFormComponent } from './schema-form/schema-form.component';
+import { SchemaFormItemComponent } from './schema-form-item/schema-form-item.component';
+import { SchemaFormItemInputComponent } from './schema-form-item-input/schema-form-item-input.component';
+import { SchemaFormItemListComponent } from './schema-form-item-list/schema-form-item-list.component';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    SharedModule,
+  ],
+  declarations: [
+    SchemaFormComponent,
+    SchemaFormItemComponent,
+    SchemaFormItemInputComponent,
+    SchemaFormItemListComponent,
+  ],
+  exports: [
+    SchemaFormComponent,
+  ],
+})
+export class SchemaFormModule { }

src/app/components/schema-form/schema-form/schema-form.component.html

@@ -0,0 +1,10 @@
+<div class="ui-form-wrapper">
+  <form nz-form>
+    <app-schema-form-item
+      *ngFor="let item of schemaProperties"
+      [item]="item"
+      [(data)]="formData[item.key]"
+      (dataChange)="onInput($event, item)"
+    ></app-schema-form-item>
+  </form>
+</div>

src/app/components/schema-form/schema-form/schema-form.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SchemaFormComponent } from './schema-form.component';
+
+describe('SchemaFormComponent', () => {
+  let component: SchemaFormComponent;
+  let fixture: ComponentFixture<SchemaFormComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ SchemaFormComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SchemaFormComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});