chore(structure): reorganized file structure, added modules

Author: artemtek

dist/ngx-forms.js

@@ -1,3 +1,3 @@
-export { FieldConfig, Field } from "./src/app/types";
-export { NgxFormModule } from "./src/app";
-export { DynamicFormComponent } from "./src/app/containers/dynamic-form/dynamic-form.component";
+export { FieldConfig, Field } from "./src/types";
+export { NgxFormModule } from "./src/app/app.module";
+export { DynamicFormDirective } from "./src/app/dynamic-form/dynamic-form.component";

index.d.ts

@@ -0,0 +1,67 @@
+import { NgModule, NO_ERRORS_SCHEMA, ModuleWithProviders } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ReactiveFormsModule, FormsModule } from '@angular/forms';
+import { DynamicFormDirective } from './dynamic-form/dynamic-form.component';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { FIELD_DICT_TOKEN, LAYOUTS_TOKEN, FormsExtensions } from '../types';
+import { FormFieldsModule, defaultInputs } from './fields/fields.module';
+import { FormLayoutsModule, defaultLayouts } from './layouts/layouts.module';
+import { DynamicFieldModule } from './dynamic-field/dynamic-field.module';
+
+@NgModule({
+    imports: [
+        CommonModule,
+        BrowserAnimationsModule,
+        ReactiveFormsModule,
+        FormsModule,
+        FormLayoutsModule,
+        FormFieldsModule,
+        DynamicFieldModule
+    ],
+    declarations: [
+        DynamicFormDirective
+    ],
+    exports: [
+        DynamicFormDirective
+    ],
+    providers: [
+        {
+            provide: FIELD_DICT_TOKEN,
+            useValue: defaultInputs
+        },
+        {
+            provide: LAYOUTS_TOKEN,
+            useValue: defaultLayouts
+        }
+    ],
+    schemas: [
+        NO_ERRORS_SCHEMA
+    ]
+})
+export class NgxFormModule {
+    public static forRoot({ fieldDictionary, layoutDictionary }: FormsExtensions): ModuleWithProviders {
+        if (fieldDictionary) { Object.keys(fieldDictionary).forEach(key => defaultInputs[key] = fieldDictionary[key]); }
+        if (layoutDictionary) { Object.keys(layoutDictionary).forEach(key => defaultLayouts[key] = layoutDictionary[key]); }
+
+        return {
+            ngModule: NgxFormModule,
+            providers: [
+                {
+                    provide: FIELD_DICT_TOKEN,
+                    useValue: defaultInputs
+                },
+                {
+                    provide: LAYOUTS_TOKEN,
+                    useValue: defaultLayouts
+                }
+            ]
+        };
+    }
+}
+
+
+// TODO: next
+// break down Nav module into Groups module
+// unit tests
+// create different default layouts for ngx-forms
+// make nav part of group-layout

src/app.ts

@@ -7,7 +7,7 @@ import { DynamicFieldDirective } from "./dynamic-field.directive"
 import { By } from '@angular/platform-browser';
 import { FieldConfig, FieldDictionary, FIELD_DICT_TOKEN } from "../../types";
 import { FormInputComponent } from "../form-input/form-input.component";
-import { FormInputHiddenComponent } from '../form-hidden/form-hidden.component';
+import { FormInputHiddenComponent } from '../form-hidden/form-hidden.component'; // mock this inputs instead of importing
 
 const defaultInputs: FieldDictionary = {
     text: FormInputComponent,

src/app/app.module.ts

@@ -21,13 +21,15 @@ export class DynamicFieldDirective implements Field, OnInit, OnDestroy {
     ngOnInit() {
         if (!this.group) { throw new Error('group is not set'); }
         if (!this.inputs[this.field.type]) { throw new Error(`Input with type "${this.field.type}" was not found`); }
-
+        
         const componentReference = this.inputs[this.field.type];
         const component = this.resolver.resolveComponentFactory<Field>(componentReference);
         this.component = this.container.createComponent(component);
         this.component.instance.field = this.field;
         this.component.instance.group = this.group;
 
+        console.log('creating control ', this.field.type)
+
         this.component.instance.model = this.model;
         this.group.addControl(this.field.name, this.createControl(this.field));
 

src/app/containers/dynamic-form/dynamic-form.component.ts

@@ -0,0 +1,19 @@
+import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
+import { DynamicFieldDirective } from './dynamic-field.directive';
+import { CommonModule } from '@angular/common';
+
+@NgModule({
+    imports: [
+        CommonModule
+    ],
+    declarations: [
+        DynamicFieldDirective
+    ],
+    exports: [
+        DynamicFieldDirective
+    ],
+    schemas: [
+        NO_ERRORS_SCHEMA
+    ]
+})
+export class DynamicFieldModule { }

src/app/containers/dynamic-panel/dynamic-panel.component.ts

@@ -1,8 +1,8 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { DynamicPanelComponent } from '../dynamic-panel/dynamic-panel.component';
+import { PanelComponent } from '../layout-group-panel/layout-group-panel.component';
 import { DynamicFieldDirective } from '../../components/dynamic-field/dynamic-field.directive';
 import { Component, NgModule } from "@angular/core";
-import { DynamicFormComponent } from "./dynamic-form.component";
+import { DynamicFormDirective } from "./dynamic-form.component";
 import { ReactiveFormsModule, FormsModule } from '@angular/forms';
 import { FormInputComponent } from '../../components/form-input/form-input.component';
 import { CommonModule } from '@angular/common';
@@ -47,14 +47,14 @@ class TestComponent implements IDynamicForm {
 })
 class TestModule { }
 
-describe('DynamicFormComponent', () => {
+describe('DynamicFormDirective', () => {
     let component: TestComponent;
     let fixture: ComponentFixture<TestComponent>;
     let directiveEl;
 
     beforeEach(async(() => {
         TestBed.configureTestingModule({
-            declarations: [DynamicFieldDirective, TestComponent, DynamicFormComponent, DynamicPanelComponent],
+            declarations: [DynamicFieldDirective, TestComponent, DynamicFormDirective, PanelComponent],
             imports: [FormsModule, ReactiveFormsModule, TestModule, FormNavModule],
             providers: [{ provide: FIELD_DICT_TOKEN, useValue: defaultInputs }]
         })
@@ -87,8 +87,8 @@ describe('DynamicFormComponent', () => {
         expect(directiveEl).not.toBeNull();
     });
 
-    it('loads dynamic-panel component', () => {
-        directiveEl = fixture.debugElement.query(By.directive(DynamicPanelComponent));
+    it('loads layout-group-panel component', () => {
+        directiveEl = fixture.debugElement.query(By.directive(PanelComponent));
         expect(directiveEl).not.toBeNull();
     });
 
@@ -107,21 +107,21 @@ describe('DynamicFormComponent', () => {
     });
 });
 
-describe('DynamicFormComponent Core', () => {
-    let component: DynamicFormComponent;
-    let fixture: ComponentFixture<DynamicFormComponent>;
+describe('DynamicFormDirective Core', () => {
+    let component: DynamicFormDirective;
+    let fixture: ComponentFixture<DynamicFormDirective>;
     let model = { test: 'test', title: 'title' };
 
     beforeEach(() => {
         TestBed.configureTestingModule({
-            declarations: [DynamicFieldDirective, TestComponent, DynamicFormComponent, DynamicPanelComponent],
+            declarations: [DynamicFieldDirective, TestComponent, DynamicFormDirective, PanelComponent],
             imports: [FormsModule, ReactiveFormsModule, TestModule, FormNavModule],
             providers: [{ provide: FIELD_DICT_TOKEN, useValue: defaultInputs }]
         }).compileComponents();
     });
 
     beforeEach(() => {
-        fixture = TestBed.createComponent(DynamicFormComponent);
+        fixture = TestBed.createComponent(DynamicFormDirective);
         component = fixture.componentInstance;
         component.formConfig = {
             form: [