[CST-22299] reintroduce rating/slider/editor/colorpicker models

Author: FrancescoMolinaro

src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control-container.component.spec.ts

@@ -29,14 +29,18 @@ import { DynamicListDirective } from '@ng-dynamic-forms/core/directive/dynamic-l
 import { DynamicTemplateDirective } from '@ng-dynamic-forms/core/directive/dynamic-template.directive';
 import { DynamicCheckboxModel } from '@ng-dynamic-forms/core/model/checkbox/dynamic-checkbox.model';
 import { DynamicCheckboxGroupModel } from '@ng-dynamic-forms/core/model/checkbox/dynamic-checkbox-group.model';
+import { DynamicColorPickerModel } from '@ng-dynamic-forms/core/model/colorpicker/dynamic-colorpicker.model';
 import { DynamicDatePickerModel } from '@ng-dynamic-forms/core/model/datepicker/dynamic-datepicker.model';
 import { DynamicFormControlModel } from '@ng-dynamic-forms/core/model/dynamic-form-control.model';
+import { DynamicEditorModel } from '@ng-dynamic-forms/core/model/editor/dynamic-editor.model';
 import { DynamicFileUploadModel } from '@ng-dynamic-forms/core/model/file-upload/dynamic-file-upload.model';
 import { DynamicFormArrayModel } from '@ng-dynamic-forms/core/model/form-array/dynamic-form-array.model';
 import { DynamicFormGroupModel } from '@ng-dynamic-forms/core/model/form-group/dynamic-form-group.model';
 import { DynamicInputModel } from '@ng-dynamic-forms/core/model/input/dynamic-input.model';
 import { DynamicRadioGroupModel } from '@ng-dynamic-forms/core/model/radio/dynamic-radio-group.model';
+import { DynamicRatingModel } from '@ng-dynamic-forms/core/model/rating/dynamic-rating.model';
 import { DynamicSelectModel } from '@ng-dynamic-forms/core/model/select/dynamic-select.model';
+import { DynamicSliderModel } from '@ng-dynamic-forms/core/model/slider/dynamic-slider.model';
 import { DynamicSwitchModel } from '@ng-dynamic-forms/core/model/switch/dynamic-switch.model';
 import { DynamicTextAreaModel } from '@ng-dynamic-forms/core/model/textarea/dynamic-textarea.model';
 import { DynamicTimePickerModel } from '@ng-dynamic-forms/core/model/timepicker/dynamic-timepicker.model';
@@ -105,17 +109,21 @@ describe('DsDynamicFormControlContainerComponent test suite', () => {
   const formModel = [
     new DynamicCheckboxModel({ id: 'checkbox' }),
     new DynamicCheckboxGroupModel({ id: 'checkboxGroup', group: [] }),
+    new DynamicColorPickerModel({ id: 'colorpicker' }),
     new DynamicDatePickerModel({ id: 'datepicker' }),
+    new DynamicEditorModel({ id: 'editor' }),
     new DynamicFileUploadModel({ id: 'upload', url: '' }),
     new DynamicFormArrayModel({ id: 'formArray', groupFactory: () => [] }),
     new DynamicFormGroupModel({ id: 'formGroup', group: [] }),
     new DynamicInputModel({ id: 'input', maxLength: 51 }),
     new DynamicRadioGroupModel({ id: 'radioGroup' }),
+    new DynamicRatingModel({ id: 'rating' }),
     new DynamicSelectModel({
       id: 'select',
       options: [{ value: 'One' }, { value: 'Two' }],
       value: 'One',
     }),
+    new DynamicSliderModel({ id: 'slider' }),
     new DynamicSwitchModel({ id: 'switch' }),
     new DynamicTextAreaModel({ id: 'textarea' }),
     new DynamicTimePickerModel({ id: 'timepicker' }),
@@ -188,7 +196,7 @@ describe('DsDynamicFormControlContainerComponent test suite', () => {
     }),
     new DynamicQualdropModel({ id: 'combobox', readOnly: false, required: false }),
   ];
-  const testModel = formModel[6];
+  const testModel = formModel[8];
   let formGroup: UntypedFormGroup;
   let fixture: ComponentFixture<DsDynamicFormControlContainerComponent>;
   let component: DsDynamicFormControlContainerComponent;
@@ -343,28 +351,32 @@ describe('DsDynamicFormControlContainerComponent test suite', () => {
     const testFn = dsDynamicFormControlMapFn;
     expect(testFn(formModel[0])).toEqual(DynamicNGBootstrapCheckboxComponent);
     expect(testFn(formModel[1])).toEqual(DynamicNGBootstrapCheckboxGroupComponent);
-    expect(testFn(formModel[2])).toEqual(DsDatePickerInlineComponent);
-    (formModel[2] as DynamicDatePickerModel).inline = true;
-    expect(testFn(formModel[2])).toEqual(DynamicNGBootstrapCalendarComponent);
-    expect(testFn(formModel[3])).toBeNull();
-    expect(testFn(formModel[4])).toEqual(DsDynamicFormArrayComponent);
-    expect(testFn(formModel[5])).toEqual(DsDynamicFormGroupComponent);
-    expect(testFn(formModel[6])).toEqual(DynamicNGBootstrapInputComponent);
-    expect(testFn(formModel[7])).toEqual(DynamicNGBootstrapRadioGroupComponent);
-    expect(testFn(formModel[8])).toEqual(DynamicNGBootstrapSelectComponent);
-    expect(testFn(formModel[9])).toBeNull();
-    expect(testFn(formModel[10])).toEqual(DynamicNGBootstrapTextAreaComponent);
-    expect(testFn(formModel[11])).toEqual(DynamicNGBootstrapTimePickerComponent);
-    expect(testFn(formModel[12])).toEqual(DsDynamicOneboxComponent);
-    expect(testFn(formModel[13])).toEqual(DsDynamicScrollableDropdownComponent);
-    expect(testFn(formModel[14])).toEqual(DsDynamicTagComponent);
-    expect(testFn(formModel[15])).toEqual(DsDynamicListComponent);
-    expect(testFn(formModel[16])).toEqual(DsDynamicListComponent);
-    expect(testFn(formModel[17])).toEqual(DsDynamicRelationGroupComponent);
-    expect(testFn(formModel[18])).toEqual(DsDatePickerComponent);
-    expect(testFn(formModel[19])).toEqual(DsDynamicLookupComponent);
-    expect(testFn(formModel[20])).toEqual(DsDynamicLookupComponent);
-    expect(testFn(formModel[21])).toEqual(DsDynamicFormGroupComponent);
+    expect(testFn(formModel[2])).toBeNull();
+    expect(testFn(formModel[3])).toEqual(DsDatePickerInlineComponent);
+    (formModel[3] as DynamicDatePickerModel).inline = true;
+    expect(testFn(formModel[3])).toEqual(DynamicNGBootstrapCalendarComponent);
+    expect(testFn(formModel[4])).toBeNull();
+    expect(testFn(formModel[5])).toBeNull();
+    expect(testFn(formModel[6])).toEqual(DsDynamicFormArrayComponent);
+    expect(testFn(formModel[7])).toEqual(DsDynamicFormGroupComponent);
+    expect(testFn(formModel[8])).toEqual(DynamicNGBootstrapInputComponent);
+    expect(testFn(formModel[9])).toEqual(DynamicNGBootstrapRadioGroupComponent);
+    expect(testFn(formModel[10])).toBeNull();
+    expect(testFn(formModel[11])).toEqual(DynamicNGBootstrapSelectComponent);
+    expect(testFn(formModel[12])).toBeNull();
+    expect(testFn(formModel[13])).toBeNull();
+    expect(testFn(formModel[14])).toEqual(DynamicNGBootstrapTextAreaComponent);
+    expect(testFn(formModel[15])).toEqual(DynamicNGBootstrapTimePickerComponent);
+    expect(testFn(formModel[16])).toEqual(DsDynamicOneboxComponent);
+    expect(testFn(formModel[17])).toEqual(DsDynamicScrollableDropdownComponent);
+    expect(testFn(formModel[18])).toEqual(DsDynamicTagComponent);
+    expect(testFn(formModel[19])).toEqual(DsDynamicListComponent);
+    expect(testFn(formModel[20])).toEqual(DsDynamicListComponent);
+    expect(testFn(formModel[21])).toEqual(DsDynamicRelationGroupComponent);
+    expect(testFn(formModel[22])).toEqual(DsDatePickerComponent);
+    expect(testFn(formModel[23])).toEqual(DsDynamicLookupComponent);
+    expect(testFn(formModel[24])).toEqual(DsDynamicLookupComponent);
+    expect(testFn(formModel[25])).toEqual(DsDynamicFormGroupComponent);
   });
 
 });

src/external-libraries/ng-dynamic-forms/core/model/colorpicker/dynamic-colorpicker.model.spec.ts

@@ -0,0 +1,35 @@
+import {
+  DYNAMIC_FORM_CONTROL_TYPE_COLORPICKER,
+  DynamicColorPickerModel,
+} from './dynamic-colorpicker.model';
+
+describe('DynamicColorPickerModel test suite', () => {
+  let model: DynamicColorPickerModel;
+  const config = {
+    id: 'colorpicker',
+    value: '#ffffff',
+  };
+
+  beforeEach(() => model = new DynamicColorPickerModel(config));
+
+  it('should initialize correctly', () => {
+    expect(model.disabled).toBe(false);
+    expect(model.format).toBeNull();
+    expect(model.hidden).toBe(false);
+    expect(model.id).toEqual(config.id);
+    expect(model.inline).toBe(false);
+    expect(model.label).toBeNull();
+    expect(model.type).toEqual(DYNAMIC_FORM_CONTROL_TYPE_COLORPICKER);
+    expect(model.value).toBe(config.value);
+    expect(model.disabledChanges).toBeDefined();
+    expect(model.valueChanges).toBeDefined();
+  });
+
+  it('should serialize correctly', () => {
+    const json = JSON.parse(JSON.stringify(model));
+
+    expect(json.id).toEqual(model.id);
+    expect(json.value).toBe(model.value);
+    expect(json.type).toEqual(DYNAMIC_FORM_CONTROL_TYPE_COLORPICKER);
+  });
+});

src/external-libraries/ng-dynamic-forms/core/model/colorpicker/dynamic-colorpicker.model.ts

@@ -0,0 +1,31 @@
+import { serializable } from '../../decorator/serializable.decorator';
+import {
+  isBoolean,
+  isString,
+} from '../../utils/core.utils';
+import {
+  DynamicFormValueControlModel,
+  DynamicFormValueControlModelConfig,
+} from '../dynamic-form-value-control.model';
+import { DynamicFormControlLayout } from '../misc/dynamic-form-control-layout.model';
+
+export const DYNAMIC_FORM_CONTROL_TYPE_COLORPICKER = 'COLORPICKER';
+
+export interface DynamicColorPickerModelConfig extends DynamicFormValueControlModelConfig<string | object> {
+    format?: string;
+    inline?: boolean;
+}
+
+export class DynamicColorPickerModel extends DynamicFormValueControlModel<string | object> {
+    @serializable() format: string | null;
+    @serializable() inline: boolean;
+
+    @serializable() readonly type: string = DYNAMIC_FORM_CONTROL_TYPE_COLORPICKER;
+
+    constructor(config: DynamicColorPickerModelConfig, layout?: DynamicFormControlLayout) {
+      super(config, layout);
+
+      this.format = isString(config.format) ? config.format : null;
+      this.inline = isBoolean(config.inline) ? config.inline : false;
+    }
+}

src/external-libraries/ng-dynamic-forms/core/model/editor/dynamic-editor.model.spec.ts

@@ -0,0 +1,42 @@
+import {
+  DYNAMIC_FORM_CONTROL_TYPE_EDITOR,
+  DynamicEditorModel,
+} from './dynamic-editor.model';
+
+describe('DynamicEditorModel test suite', () => {
+  let model: DynamicEditorModel;
+  const 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.hidden).toBe(false);
+    expect(model.id).toEqual(config.id);
+    expect(model.label).toBeNull();
+    expect(model.type).toEqual(DYNAMIC_FORM_CONTROL_TYPE_EDITOR);
+    expect(model.value).toBeNull();
+    expect(model.disabledChanges).toBeDefined();
+    expect(model.valueChanges).toBeDefined();
+  });
+
+  it('should set disabled property correctly', () => {
+    model.disabled = true;
+
+    expect(model.disabled).toBe(true);
+  });
+
+  it('should serialize correctly', () => {
+    const json = JSON.parse(JSON.stringify(model));
+
+    expect(json.id).toEqual(model.id);
+    expect(Object.keys(json.validators).length).toBe(Object.keys(model.validators as any).length);
+    expect(json.value).toBe(model.value);
+    expect(json.type).toEqual(DYNAMIC_FORM_CONTROL_TYPE_EDITOR);
+  });
+});

src/external-libraries/ng-dynamic-forms/core/model/editor/dynamic-editor.model.ts

@@ -0,0 +1,19 @@
+import { serializable } from '../../decorator/serializable.decorator';
+import {
+  DynamicInputControlModel,
+  DynamicInputControlModelConfig,
+} from '../dynamic-input-control.model';
+import { DynamicFormControlLayout } from '../misc/dynamic-form-control-layout.model';
+
+export const DYNAMIC_FORM_CONTROL_TYPE_EDITOR = 'EDITOR';
+// eslint-disable-next-line  @typescript-eslint/no-empty-object-type
+export interface DynamicEditorModelConfig extends DynamicInputControlModelConfig<string> {
+}
+
+export class DynamicEditorModel extends DynamicInputControlModel<string> {
+    @serializable() readonly type: string = DYNAMIC_FORM_CONTROL_TYPE_EDITOR;
+
+    constructor(config: DynamicEditorModelConfig, layout?: DynamicFormControlLayout) {
+      super(config, layout);
+    }
+}

src/external-libraries/ng-dynamic-forms/core/model/rating/dynamic-rating.model.spec.ts

@@ -0,0 +1,35 @@
+import {
+  DYNAMIC_FORM_CONTROL_TYPE_RATING,
+  DynamicRatingModel,
+} from './dynamic-rating.model';
+
+describe('DynamicRatingModel test suite', () => {
+  let model: DynamicRatingModel;
+  const config = {
+    id: 'rating',
+    max: 5,
+    value: 2,
+  };
+
+  beforeEach(() => model = new DynamicRatingModel(config));
+
+  it('should initialize correctly', () => {
+    expect(model.disabled).toBe(false);
+    expect(model.hidden).toBe(false);
+    expect(model.id).toEqual(config.id);
+    expect(model.label).toBeNull();
+    expect(model.max).toBe(config.max);
+    expect(model.type).toEqual(DYNAMIC_FORM_CONTROL_TYPE_RATING);
+    expect(model.value).toBe(config.value);
+    expect(model.disabledChanges).toBeDefined();
+    expect(model.valueChanges).toBeDefined();
+  });
+
+  it('should serialize correctly', () => {
+    const json = JSON.parse(JSON.stringify(model));
+
+    expect(json.id).toEqual(model.id);
+    expect(json.value).toBe(model.value);
+    expect(json.type).toEqual(DYNAMIC_FORM_CONTROL_TYPE_RATING);
+  });
+});

src/external-libraries/ng-dynamic-forms/core/model/rating/dynamic-rating.model.ts

@@ -0,0 +1,24 @@
+import { serializable } from '../../decorator/serializable.decorator';
+import { isNumber } from '../../utils/core.utils';
+import {
+  DynamicFormValueControlModel,
+  DynamicFormValueControlModelConfig,
+} from '../dynamic-form-value-control.model';
+import { DynamicFormControlLayout } from '../misc/dynamic-form-control-layout.model';
+
+export const DYNAMIC_FORM_CONTROL_TYPE_RATING = 'RATING';
+
+export interface DynamicRatingModelConfig extends DynamicFormValueControlModelConfig<number> {
+    max?: number;
+}
+
+export class DynamicRatingModel extends DynamicFormValueControlModel<number> {
+    @serializable() max: number | null;
+    @serializable() readonly type: string = DYNAMIC_FORM_CONTROL_TYPE_RATING;
+
+    constructor(config: DynamicRatingModelConfig, layout?: DynamicFormControlLayout) {
+      super(config, layout);
+
+      this.max = isNumber(config.max) ? config.max : 10;
+    }
+}

src/external-libraries/ng-dynamic-forms/core/model/slider/dynamic-slider.model.spec.ts

@@ -0,0 +1,48 @@
+import {
+  DYNAMIC_FORM_CONTROL_TYPE_SLIDER,
+  DynamicSliderModel,
+} from './dynamic-slider.model';
+
+describe('DynamicSliderModel test suite', () => {
+  let model: DynamicSliderModel;
+  const config = {
+    id: 'slider',
+    min: 0,
+    max: 100,
+    step: 1,
+    value: 27,
+    additional: {
+      test: true,
+    },
+  };
+
+  beforeEach(() => model = new DynamicSliderModel(config));
+
+  it('should initialize correctly', () => {
+    expect(model.disabled).toBe(false);
+    expect(model.hidden).toBe(false);
+    expect(model.id).toEqual(config.id);
+    expect(model.label).toBeNull();
+    expect(model.min).toBe(config.min);
+    expect(model.max).toBe(config.max);
+    expect(model.step).toBe(config.step);
+    expect(model.type).toEqual(DYNAMIC_FORM_CONTROL_TYPE_SLIDER);
+    expect(model.value).toBe(config.value);
+    expect(model.vertical).toBe(false);
+    expect(model.disabledChanges).toBeDefined();
+    expect(model.valueChanges).toBeDefined();
+  });
+
+  it('should get additional', () => {
+
+    expect(model.getAdditional('test', null)).toBe(true);
+  });
+
+  it('should serialize correctly', () => {
+    const json = JSON.parse(JSON.stringify(model));
+
+    expect(json.id).toEqual(model.id);
+    expect(json.value).toBe(model.value);
+    expect(json.type).toEqual(DYNAMIC_FORM_CONTROL_TYPE_SLIDER);
+  });
+});

src/external-libraries/ng-dynamic-forms/core/model/slider/dynamic-slider.model.ts

@@ -0,0 +1,37 @@
+import { serializable } from '../../decorator/serializable.decorator';
+import {
+  isBoolean,
+  isNumber,
+} from '../../utils/core.utils';
+import {
+  DynamicFormValueControlModel,
+  DynamicFormValueControlModelConfig,
+} from '../dynamic-form-value-control.model';
+import { DynamicFormControlLayout } from '../misc/dynamic-form-control-layout.model';
+
+export const DYNAMIC_FORM_CONTROL_TYPE_SLIDER = 'SLIDER';
+
+export interface DynamicSliderModelConfig extends DynamicFormValueControlModelConfig<number> {
+    max?: number;
+    min?: number;
+    step?: number;
+    vertical?: boolean;
+}
+
+export class DynamicSliderModel extends DynamicFormValueControlModel<number> {
+    @serializable() max: number | null;
+    @serializable() min: number | null;
+    @serializable() step: number | null;
+    @serializable() vertical: boolean;
+
+    @serializable() readonly type: string = DYNAMIC_FORM_CONTROL_TYPE_SLIDER;
+
+    constructor(config: DynamicSliderModelConfig, layout?: DynamicFormControlLayout) {
+      super(config, layout);
+
+      this.max = isNumber(config.max) ? config.max : 10;
+      this.min = isNumber(config.min) ? config.min : 0;
+      this.step = isNumber(config.step) ? config.step : 1;
+      this.vertical = isBoolean(config.vertical) ? config.vertical : false;
+    }
+}