diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control-container.component.spec.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control-container.component.spec.ts index 8aa2215007..13a9ba4e85 100644 --- a/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control-container.component.spec.ts +++ b/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control-container.component.spec.ts @@ -31,7 +31,6 @@ import { DynamicNGBootstrapCalendarComponent, DynamicNGBootstrapCheckboxComponent, DynamicNGBootstrapCheckboxGroupComponent, - DynamicNGBootstrapDatePickerComponent, DynamicNGBootstrapInputComponent, DynamicNGBootstrapRadioGroupComponent, DynamicNGBootstrapSelectComponent, @@ -65,6 +64,7 @@ import { DsDynamicLookupComponent } from './models/lookup/dynamic-lookup.compone import { DsDynamicFormArrayComponent } from './models/array-group/dynamic-form-array.component'; import { DsDynamicFormGroupComponent } from './models/form-group/dynamic-form-group.component'; import { DsDynamicRelationGroupComponent } from './models/relation-group/dynamic-relation-group.components'; +import { DsDatePickerInlineComponent } from './models/date-picker-inline/dynamic-date-picker-inline.component'; describe('DsDynamicFormControlContainerComponent test suite', () => { @@ -263,7 +263,7 @@ describe('DsDynamicFormControlContainerComponent test suite', () => { expect(testFn(formModel[0])).toEqual(DynamicNGBootstrapCheckboxComponent); expect(testFn(formModel[1])).toEqual(DynamicNGBootstrapCheckboxGroupComponent); expect(testFn(formModel[2])).toBeNull(); - expect(testFn(formModel[3])).toEqual(DynamicNGBootstrapDatePickerComponent); + expect(testFn(formModel[3])).toEqual(DsDatePickerInlineComponent); (formModel[3] as DynamicDatePickerModel).inline = true; expect(testFn(formModel[3])).toEqual(DynamicNGBootstrapCalendarComponent); expect(testFn(formModel[4])).toBeNull(); diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control-container.component.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control-container.component.ts index 1d7b59775a..fc2c788c02 100644 --- a/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control-container.component.ts +++ b/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control-container.component.ts @@ -40,13 +40,13 @@ import { DynamicNGBootstrapCalendarComponent, DynamicNGBootstrapCheckboxComponent, DynamicNGBootstrapCheckboxGroupComponent, - DynamicNGBootstrapDatePickerComponent, DynamicNGBootstrapInputComponent, DynamicNGBootstrapRadioGroupComponent, DynamicNGBootstrapSelectComponent, DynamicNGBootstrapTextAreaComponent, DynamicNGBootstrapTimePickerComponent } from '@ng-dynamic-forms/ui-ng-bootstrap'; +import { TranslateService } from '@ngx-translate/core'; import { DYNAMIC_FORM_CONTROL_TYPE_TYPEAHEAD } from './models/typeahead/dynamic-typeahead.model'; import { DYNAMIC_FORM_CONTROL_TYPE_SCROLLABLE_DROPDOWN } from './models/scrollable-dropdown/dynamic-scrollable-dropdown.model'; @@ -67,6 +67,7 @@ import { DsDynamicFormGroupComponent } from './models/form-group/dynamic-form-gr import { DsDynamicFormArrayComponent } from './models/array-group/dynamic-form-array.component'; import { DsDynamicRelationGroupComponent } from './models/relation-group/dynamic-relation-group.components'; import { DYNAMIC_FORM_CONTROL_TYPE_RELATION_GROUP } from './models/relation-group/dynamic-relation-group.model'; +import { DsDatePickerInlineComponent } from './models/date-picker-inline/dynamic-date-picker-inline.component'; export function dsDynamicFormControlMapFn(model: DynamicFormControlModel): Type | null { switch (model.type) { @@ -83,7 +84,7 @@ export function dsDynamicFormControlMapFn(model: DynamicFormControlModel): Type< case DYNAMIC_FORM_CONTROL_TYPE_DATEPICKER: const datepickerModel = model as DynamicDatePickerModel; - return datepickerModel.inline ? DynamicNGBootstrapCalendarComponent : DynamicNGBootstrapDatePickerComponent; + return datepickerModel.inline ? DynamicNGBootstrapCalendarComponent : DsDatePickerInlineComponent; case DYNAMIC_FORM_CONTROL_TYPE_GROUP: return DsDynamicFormGroupComponent; @@ -168,7 +169,8 @@ export class DsDynamicFormControlContainerComponent extends DynamicFormControlCo constructor( protected componentFactoryResolver: ComponentFactoryResolver, protected layoutService: DynamicFormLayoutService, - protected validationService: DynamicFormValidationService + protected validationService: DynamicFormValidationService, + protected translateService: TranslateService ) { super(componentFactoryResolver, layoutService, validationService); @@ -177,6 +179,11 @@ export class DsDynamicFormControlContainerComponent extends DynamicFormControlCo ngOnChanges(changes: SimpleChanges) { if (changes) { super.ngOnChanges(changes); + if (this.model && this.model.placeholder) { + this.translateService.get(this.model.placeholder).subscribe((placeholder) => { + this.model.placeholder = placeholder; + }) + } } } @@ -188,7 +195,7 @@ export class DsDynamicFormControlContainerComponent extends DynamicFormControlCo } ngAfterViewInit() { - this.showErrorMessagesPreviousStage = this.showErrorMessages + this.showErrorMessagesPreviousStage = this.showErrorMessages; } /** diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker-inline/dynamic-date-picker-inline.component.html b/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker-inline/dynamic-date-picker-inline.component.html new file mode 100644 index 0000000000..8be512256a --- /dev/null +++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker-inline/dynamic-date-picker-inline.component.html @@ -0,0 +1,39 @@ +
+ + + +
+ + + +
+ +
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker-inline/dynamic-date-picker-inline.component.spec.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker-inline/dynamic-date-picker-inline.component.spec.ts new file mode 100644 index 0000000000..da7f5637dd --- /dev/null +++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker-inline/dynamic-date-picker-inline.component.spec.ts @@ -0,0 +1,107 @@ +import { TestBed, async, inject, ComponentFixture } from '@angular/core/testing'; +import { DebugElement } from '@angular/core'; +import { ReactiveFormsModule, FormGroup, FormControl } from '@angular/forms'; +import { NoopAnimationsModule } from '@angular/platform-browser/animations'; +import { By } from '@angular/platform-browser'; +import { TextMaskModule } from 'angular2-text-mask'; +import { NgbDatepickerModule } from '@ng-bootstrap/ng-bootstrap'; +import { DynamicDatePickerModel, DynamicFormsCoreModule, DynamicFormService } from '@ng-dynamic-forms/core'; +import { DsDatePickerInlineComponent } from './dynamic-date-picker-inline.component'; + +describe('DsDatePickerInlineComponent test suite', () => { + + const testModel = new DynamicDatePickerModel({id: 'datepicker'}); + const formModel = [testModel]; + let formGroup: FormGroup; + let fixture: ComponentFixture; + let component: DsDatePickerInlineComponent; + let debugElement: DebugElement; + let testElement: DebugElement; + + beforeEach(async(() => { + + TestBed.configureTestingModule({ + + imports: [ + ReactiveFormsModule, + NoopAnimationsModule, + TextMaskModule, + NgbDatepickerModule.forRoot(), + DynamicFormsCoreModule.forRoot() + ], + declarations: [DsDatePickerInlineComponent] + + }).compileComponents().then(() => { + + fixture = TestBed.createComponent(DsDatePickerInlineComponent); + + component = fixture.componentInstance; + debugElement = fixture.debugElement; + }); + })); + + beforeEach(inject([DynamicFormService], (service: DynamicFormService) => { + + formGroup = service.createFormGroup(formModel); + + component.group = formGroup; + component.model = testModel; + + fixture.detectChanges(); + + testElement = debugElement.query(By.css(`input[id='${testModel.id}']`)); + })); + + it('should initialize correctly', () => { + + expect(component.bindId).toBe(true); + expect(component.control instanceof FormControl).toBe(true); + expect(component.group instanceof FormGroup).toBe(true); + expect(component.model instanceof DynamicDatePickerModel).toBe(true); + + expect(component.blur).toBeDefined(); + expect(component.change).toBeDefined(); + expect(component.focus).toBeDefined(); + + expect(component.onBlur).toBeDefined(); + expect(component.onChange).toBeDefined(); + expect(component.onFocus).toBeDefined(); + + expect(component.hasFocus).toBe(false); + expect(component.isValid).toBe(true); + expect(component.isInvalid).toBe(false); + expect(component.showErrorMessages).toBe(false); + }); + + it('should have an input element', () => { + + expect(testElement instanceof DebugElement).toBe(true); + }); + + it('should emit blur event', () => { + + spyOn(component.blur, 'emit'); + + component.onBlur(null); + + expect(component.blur.emit).toHaveBeenCalled(); + }); + + it('should emit change event', () => { + + spyOn(component.change, 'emit'); + + component.onChange(null); + + expect(component.change.emit).toHaveBeenCalled(); + }); + + it('should emit focus event', () => { + + spyOn(component.focus, 'emit'); + + component.onFocus(null); + + expect(component.focus.emit).toHaveBeenCalled(); + }); +}); diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker-inline/dynamic-date-picker-inline.component.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker-inline/dynamic-date-picker-inline.component.ts new file mode 100644 index 0000000000..6078d2b5a9 --- /dev/null +++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker-inline/dynamic-date-picker-inline.component.ts @@ -0,0 +1,35 @@ +import { Component, EventEmitter, Input, Output, ViewChild } from '@angular/core'; +import { FormGroup } from '@angular/forms'; +import { NgbDatepicker, NgbDatepickerConfig } from '@ng-bootstrap/ng-bootstrap'; +import { + DynamicDatePickerModel, + DynamicFormControlComponent, + DynamicFormLayout, + DynamicFormLayoutService, + DynamicFormValidationService +} from '@ng-dynamic-forms/core'; + +@Component({ + selector: 'ds-date-picker-inline', + templateUrl: './dynamic-date-picker-inline.component.html' +}) +export class DsDatePickerInlineComponent extends DynamicFormControlComponent { + + @Input() bindId = true; + @Input() group: FormGroup; + @Input() layout: DynamicFormLayout; + @Input() model: DynamicDatePickerModel; + + @Output() blur: EventEmitter = new EventEmitter(); + @Output() change: EventEmitter = new EventEmitter(); + @Output() focus: EventEmitter = new EventEmitter(); + + @ViewChild(NgbDatepicker) ngbDatePicker: NgbDatepicker; + + constructor(protected layoutService: DynamicFormLayoutService, + protected validationService: DynamicFormValidationService, + public config: NgbDatepickerConfig) { + + super(layoutService, validationService); + } +} diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts index d35244e6a5..0e3a5b80a1 100644 --- a/src/app/shared/shared.module.ts +++ b/src/app/shared/shared.module.ts @@ -89,6 +89,7 @@ import { ObjectKeysPipe } from './utils/object-keys-pipe'; import { MomentModule } from 'ngx-moment'; import { AuthorityConfidenceStateDirective } from './authority-confidence/authority-confidence-state.directive'; import { MenuModule } from './menu/menu.module'; +import { DsDatePickerInlineComponent } from './form/builder/ds-dynamic-form-ui/models/date-picker-inline/dynamic-date-picker-inline.component'; const MODULES = [ // Do NOT include UniversalModule, HttpModule, or JsonpModule here @@ -189,7 +190,8 @@ const ENTRY_COMPONENTS = [ DsDynamicRelationGroupComponent, DsDatePickerComponent, DsDynamicFormGroupComponent, - DsDynamicFormArrayComponent + DsDynamicFormArrayComponent, + DsDatePickerInlineComponent ]; const PROVIDERS = [