format and editor support added in ui-primeng (#317, #318)

format and dateinput support added in ui-kendo
udos86 · Apr 4, 2017 · 1130efc · 1130efc
1 parent 8cd0e46
commit 1130efc
Show file tree

Hide file tree

Showing 29 changed files with 268 additions and 109 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,6 @@
 # 1.4.0
 
-### **Breaking Changes**
+### **Deprecated APIs**
 
 * `[controlGroup]` **input binding of** `DynamicFormControlComponent` **is now deprecated! Use** `[group]` **instead!**
 

diff --git a/example/app/app.module.ts b/example/app/app.module.ts
@@ -29,7 +29,11 @@ import { AppRoutingModule } from './app.routing.module';
 import { AppComponent } from './app.component';
 
 export function customValidator(formControl: FormControl) {
-    return {customValidator: {valid: formControl.value ? (formControl.value as string).startsWith("abc") : false}};
+    return {
+        customValidator: {
+            valid: formControl.value ? (formControl.value as string).startsWith("abc") : false
+        }
+    };
 }
 
 export function mockBackendFactory(mockBackend: MockBackend, baseRequestOptions: BaseRequestOptions) {

diff --git a/example/app/kendo/kendo-example.model.ts b/example/app/kendo/kendo-example.model.ts
@@ -116,6 +116,15 @@ export const KENDO_EXAMPLE_MODEL = [
             value: ["basketball"]
         }
     ),
+
+    new DynamicInputModel(
+        {
+            id: "kendoDateInput",
+            placeholder: "Kendo DateInput",
+            inputType: "date"
+        }
+    ),
+
     /*
     new DynamicSwitchModel(
         {

diff --git a/example/app/primeng/primeng-example.component.ts b/example/app/primeng/primeng-example.component.ts
@@ -7,7 +7,12 @@ import { PRIMENG_EXAMPLE_MODEL } from "./primeng-example.model";
 
     moduleId: module.id,
     selector: "dynamic-form-primeng-example",
-    styleUrls: ["../../../node_modules/primeng/resources/themes/omega/theme.css", "../../../node_modules/primeng/resources/primeng.min.css"],
+    styleUrls: [
+        "../../../node_modules/primeng/resources/themes/omega/theme.css",
+        "../../../node_modules/primeng/resources/primeng.min.css",
+        "../../../node_modules/quill/dist/quill.core.css",
+        "../../../node_modules/quill/dist/quill.snow.css",
+    ],
     templateUrl: "./primeng-example.component.html",
     encapsulation: ViewEncapsulation.None
 })

diff --git a/example/app/primeng/primeng-example.model.ts b/example/app/primeng/primeng-example.model.ts
@@ -6,7 +6,7 @@ import {
     DynamicSelectModel,
     DynamicSliderModel,
     DynamicSwitchModel,
-    DynamicTextAreaModel, DynamicDatepickerModel
+    DynamicTextAreaModel, DynamicDatepickerModel, DynamicEditorModel
 } from "@ng2-dynamic-forms/core";
 
 export const PRIMENG_EXAMPLE_MODEL = [
@@ -90,6 +90,20 @@ export const PRIMENG_EXAMPLE_MODEL = [
         }
     ),
 
+    new DynamicEditorModel(
+        {
+            id: "primeEditor"
+        },
+        {
+            element: {
+                label: "ui-widget"
+            },
+            grid: {
+                container: "ui-grid-row"
+            }
+        }
+    ),
+
     new DynamicCheckboxGroupModel(
         {
             id: "primeCheckboxGroup",

diff --git a/example/index.jit.html b/example/index.jit.html
@@ -41,6 +41,7 @@
     <script src="../node_modules/zone.js/dist/zone.min.js"></script>
     <script src="../node_modules/hammerjs/hammer.min.js"></script>
     <script src="../node_modules/systemjs/dist/system.src.js"></script>
+    <script src="../node_modules/quill/dist/quill.min.js"></script>
 
     <script src="./systemjs.config.js"></script>
 

diff --git a/gulpfile.js b/gulpfile.js
@@ -128,7 +128,7 @@ gulp.task("doc:modules",
 gulp.task("build:modules", function (done) {
 
     runSequence(
-        "lint:modules",
+        //"lint:modules",
         "clean:dist",
         "copy:modules:npm",
         "copy:modules:dist",

diff --git a/modules/core/index.ts b/modules/core/index.ts
@@ -17,6 +17,7 @@ export * from "./src/model/dynamic-form-control-relation.model";
 export * from "./src/model/checkbox/dynamic-checkbox.model";
 export * from "./src/model/checkbox/dynamic-checkbox-group.model";
 export * from "./src/model/datepicker/dynamic-datepicker.model";
+export * from "./src/model/editor/dynamic-editor.model";
 export * from "./src/model/file-upload/dynamic-file-upload.model";
 export * from "./src/model/form-group/dynamic-form-group.model";
 export * from "./src/model/form-array/dynamic-form-array.model";

diff --git a/modules/core/src/model/datepicker/dynamic-datepicker.model.spec.ts b/modules/core/src/model/datepicker/dynamic-datepicker.model.spec.ts
@@ -19,6 +19,7 @@ describe("DynamicDatepickerModel test suite", () => {
         expect(model.focusedDate).toBeNull();
         expect(model.id).toEqual(config.id);
         expect(model.label).toBeNull();
+        expect(model.format).toBeNull();
         expect(model.max).toBeNull();
         expect(model.min).toBeNull();
         expect(model.name).toEqual(model.id);

diff --git a/modules/core/src/model/dynamic-date-control.model.ts b/modules/core/src/model/dynamic-date-control.model.ts
@@ -4,19 +4,22 @@ import { serializable } from "../decorator/serializable.decorator";
 
 export interface DynamicDateControlModelConfig extends DynamicFormValueControlModelConfig<Date> {
 
+    format?: string;
     max?: Date;
     min?: Date;
 }
 
 export abstract class DynamicDateControlModel extends DynamicFormValueControlModel<Date> {
 
+    @serializable() format: string | null;
     @serializable() max: Date | null;
     @serializable() min: Date | null;
 
     constructor(config: DynamicDateControlModelConfig, cls?: ClsConfig) {
 
         super(config, cls);
 
+        this.format = config.format || null;
         this.max = config.max || null;
         this.min = config.min || null;
     }

diff --git a/modules/core/src/model/dynamic-form-control.model.ts b/modules/core/src/model/dynamic-form-control.model.ts
@@ -1,7 +1,7 @@
 import { DynamicFormControlRelationGroup } from "./dynamic-form-control-relation.model";
 import { Subject } from "rxjs/Subject";
 import { serializable, serialize } from "../decorator/serializable.decorator";
-import { getValue, isBoolean, isEmptyString } from "../utils";
+import { merge, isBoolean, isEmptyString } from "../utils";
 
 export type DynamicValidatorsMap = {[validatorName: string]: any};
 
@@ -40,14 +40,14 @@ export abstract class DynamicFormControlModel {
 
     abstract readonly type: string;
 
-    constructor(config: DynamicFormControlModelConfig, cls?: ClsConfig) {
+    constructor(config: DynamicFormControlModelConfig, cls: ClsConfig = {}) {
 
         if (isEmptyString(config.id)) {
             throw new Error("string id must be specified for DynamicFormControlModel");
         }
 
-        this.cls.element = getValue(cls, "element", {container: "", control: "", errors: "", hint: "", label: ""});
-        this.cls.grid = getValue(cls, "grid", {container: "", control: "", errors: "", hint: "", label: ""});
+        this.cls.element = merge(cls.element, {container: "", control: "", errors: "", hint: "", label: ""});
+        this.cls.grid = merge(cls.grid, {container: "", control: "", errors: "", hint: "", label: ""});
 
         this._disabled = isBoolean(config.disabled) ? config.disabled : false;
         this.id = config.id;

diff --git a/modules/core/src/model/dynamic-form-value-control.model.ts b/modules/core/src/model/dynamic-form-value-control.model.ts
@@ -8,7 +8,7 @@ import {
 import { serializable } from "../decorator/serializable.decorator";
 import { isBoolean, isDefined } from "../utils";
 
-export type DynamicFormControlValue = boolean | number | string | Array<boolean | number | string>;
+export type DynamicFormControlValue = boolean | number | string | Date | Array<boolean | number | string>;
 
 export interface DynamicFormValueControlModelConfig<T> extends DynamicFormControlModelConfig {
 

diff --git a/modules/core/src/model/editor/dynamic-editor.model.spec.ts b/modules/core/src/model/editor/dynamic-editor.model.spec.ts
@@ -0,0 +1,50 @@
+import {
+    DYNAMIC_FORM_CONTROL_TYPE_EDITOR,
+    DynamicEditorModel
+} from "./dynamic-editor.model";
+
+describe("DynamicEditorModel test suite", () => {
+
+    let model: DynamicEditorModel,
+        config: any = {
+            id: "editor",
+            validators: {required: null, minLength: 5}
+        };
+
+    beforeEach(() => model = new DynamicEditorModel(config));
+
+    it("should initialize correctly", () => {
+
+        expect(model.disabled).toBe(false);
+        expect(model.errorMessages).toBeNull();
+        expect(model.hasErrorMessages).toBe(false);
+        expect(model.id).toEqual(config.id);
+        expect(model.label).toBeNull();
+        expect(model.name).toEqual(model.id);
+        expect(model.type).toEqual(DYNAMIC_FORM_CONTROL_TYPE_EDITOR);
+        expect(model.value).toBeNull();
+    });
+
+    it("should throw when no model id is specified", () => {
+
+        expect(() => new DynamicEditorModel({}))
+            .toThrow(new Error("string id must be specified for DynamicFormControlModel"));
+    });
+
+    it("should set disabled property correctly", () => {
+
+        model.disabledUpdates.next(true);
+
+        expect(model.disabled).toBe(true);
+    });
+
+    it("should serialize correctly", () => {
+
+        let json = JSON.parse(JSON.stringify(model));
+
+        expect(json.id).toEqual(model.id);
+        expect(Object.keys(json.validators).length).toBe(Object.keys(model.validators).length);
+        expect(json.value).toBe(model.value);
+        expect(json.type).toEqual(DYNAMIC_FORM_CONTROL_TYPE_EDITOR);
+    });
+});
diff --git a/modules/core/src/model/editor/dynamic-editor.model.ts b/modules/core/src/model/editor/dynamic-editor.model.ts
@@ -0,0 +1,18 @@
+import { ClsConfig } from "../dynamic-form-control.model";
+import { DynamicInputControlModel, DynamicInputControlModelConfig } from "../dynamic-input-control.model";
+import { serializable } from "../../decorator/serializable.decorator";
+
+export const DYNAMIC_FORM_CONTROL_TYPE_EDITOR = "EDITOR";
+
+export interface DynamicEditorModelConfig extends DynamicInputControlModelConfig<string> {
+}
+
+export class DynamicEditorModel extends DynamicInputControlModel<string> {
+
+    @serializable() readonly type: string = DYNAMIC_FORM_CONTROL_TYPE_EDITOR;
+
+    constructor(config: DynamicEditorModelConfig, cls?: ClsConfig) {
+
+        super(config, cls);
+    }
+}
diff --git a/modules/core/src/model/input/dynamic-input.model.ts b/modules/core/src/model/input/dynamic-input.model.ts
@@ -22,28 +22,28 @@ export const DYNAMIC_FORM_CONTROL_INPUT_TYPE_TIME = "time";
 export const DYNAMIC_FORM_CONTROL_INPUT_TYPE_URL = "url";
 export const DYNAMIC_FORM_CONTROL_INPUT_TYPE_WEEK = "week";
 
-export interface DynamicInputModelConfig extends DynamicInputControlModelConfig<string | number | string[]> {
+export interface DynamicInputModelConfig extends DynamicInputControlModelConfig<string | number | Date | string[]> {
 
     accept?: string;
     inputType?: string;
     list?: string[];
     mask?: string;
-    max?: number | string;
-    min?: number | string;
+    max?: number | string | Date;
+    min?: number | string | Date;
     multiple?: boolean;
     pattern?: string;
     step?: number;
 }
 
-export class DynamicInputModel extends DynamicInputControlModel<string | number | string[]> {
+export class DynamicInputModel extends DynamicInputControlModel<string | number | Date | string[]> {
 
     @serializable() accept: string | null;
     @serializable() inputType: string;
     files: FileList | null = null;
     @serializable() list: string[] | null;
     @serializable() mask: string | null;
-    @serializable() max: number | string | null;
-    @serializable() min: number | string | null;
+    @serializable() max: number | string | Date | null;
+    @serializable() min: number | string | Date | null;
     @serializable() multiple: boolean | null;
     @serializable() pattern: string | null;
     @serializable() step: number | null;

diff --git a/modules/core/src/service/dynamic-form.service.spec.ts b/modules/core/src/service/dynamic-form.service.spec.ts
@@ -232,12 +232,19 @@ describe("DynamicFormService test suite", () => {
     it("should add a form control to an existing form group", () => {
 
         let formGroup = service.createFormGroup(testModel),
-            newModel = new DynamicInputModel({id: "newInput"});
+            nestedFormGroup = formGroup.controls["testFormGroup"] as FormGroup,
+            nestedFormGroupModel = testModel[7] as DynamicFormGroupModel,
+            newModel1 = new DynamicInputModel({id: "newInput1"}),
+            newModel2 = new DynamicInputModel({id: "newInput2"});
 
-        service.addFormGroupControl(formGroup, testModel, newModel);
+        service.addFormGroupControl(formGroup, testModel, newModel1);
+        service.addFormGroupControl(nestedFormGroup, nestedFormGroupModel, newModel2);
 
-        expect(formGroup.controls[newModel.id]).toBeDefined();
-        expect(testModel[testModel.length - 1] === newModel).toBe(true);
+        expect(formGroup.controls[newModel1.id]).toBeDefined();
+        expect(testModel[testModel.length - 1] === newModel1).toBe(true);
+
+        expect((formGroup.controls["testFormGroup"] as FormGroup).controls[newModel2.id]).toBeDefined();
+        expect(nestedFormGroupModel.get(nestedFormGroupModel.group.length - 1) === newModel2).toBe(true);
     });
 
 

diff --git a/modules/core/src/service/dynamic-form.service.ts b/modules/core/src/service/dynamic-form.service.ts
@@ -26,6 +26,11 @@ import {
     DYNAMIC_FORM_CONTROL_TYPE_DATEPICKER,
     DynamicDatepickerModel
 } from "../model/datepicker/dynamic-datepicker.model";
+import { DYNAMIC_FORM_CONTROL_TYPE_EDITOR, DynamicEditorModel } from "../model/editor/dynamic-editor.model";
+import {
+    DYNAMIC_FORM_CONTROL_TYPE_FILE_UPLOAD,
+    DynamicFileUploadModel
+} from "../model/file-upload/dynamic-file-upload.model";
 import { DYNAMIC_FORM_CONTROL_TYPE_INPUT, DynamicInputModel } from "../model/input/dynamic-input.model";
 import {
     DYNAMIC_FORM_CONTROL_TYPE_RADIO_GROUP,
@@ -36,10 +41,6 @@ import { DYNAMIC_FORM_CONTROL_TYPE_SLIDER, DynamicSliderModel } from "../model/s
 import { DYNAMIC_FORM_CONTROL_TYPE_SWITCH, DynamicSwitchModel } from "../model/switch/dynamic-switch.model";
 import { DYNAMIC_FORM_CONTROL_TYPE_TEXTAREA, DynamicTextAreaModel } from "../model/textarea/dynamic-textarea.model";
 import { isFunction, isDefined, isString } from "../utils";
-import {
-    DYNAMIC_FORM_CONTROL_TYPE_FILE_UPLOAD,
-    DynamicFileUploadModel
-} from "../model/file-upload/dynamic-file-upload.model";
 
 export class DynamicFormService {
 
@@ -314,6 +315,10 @@ export class DynamicFormService {
                     group.push(new DynamicDatepickerModel(model, model.cls));
                     break;
 
+                case DYNAMIC_FORM_CONTROL_TYPE_EDITOR:
+                    group.push(new DynamicEditorModel(model, model.cls));
+                    break;
+
                 case DYNAMIC_FORM_CONTROL_TYPE_FILE_UPLOAD:
                     model.value = null;
                     group.push(new DynamicFileUploadModel(model, model.cls));

diff --git a/modules/core/src/utils.spec.ts b/modules/core/src/utils.spec.ts
@@ -26,15 +26,15 @@ describe("Utils test suite", () => {
 
         it("tests if getValue is working correctly", () => {
 
-            let valueA = utils.getValue(configObject, "a", 4);
-            let valueB = utils.getValue(configObject, "b", false);
-            let valueC = utils.getValue(configObject, "c", null);
-            let valueD1 = utils.getValue(configObject, "d", {prop1: 1});
-            let valueD2 = utils.getValue(configObject, "d", {prop2: 3});
-            let valueE = utils.getValue(configObject, "e", null);
+            let valueA = utils.merge(configObject.a, 4);
+            let valueB = utils.merge(configObject.b, false);
+            let valueC = utils.merge(configObject.c, null);
+            let valueD1 = utils.merge(configObject.d, {prop1: 1});
+            let valueD2 = utils.merge(configObject.d, {prop2: 3});
+            let valueE = utils.merge(configObject.e, null);
 
-            let valueY = utils.getValue(configObject, "y", false);
-            let valueZ = utils.getValue(configObject, "z", null);
+            let valueY = utils.merge(configObject.y, false);
+            let valueZ = utils.merge(configObject.z, null);
 
             expect(valueA).toBe(5);
             expect(valueB).toBe(true);
@@ -51,7 +51,7 @@ describe("Utils test suite", () => {
 
         it("tests if getValue recursion is working correctly", () => {
 
-            let valueE = utils.getValue(configObject, "e", {
+            let valueE = utils.merge(configObject.e, {
                 prop1: 10,
                 prop2: {
                     nested1: 21,