mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-07-31 17:38:48 +00:00
[ADF-1095] Date Range picker remains on screen remove md-data-picker (#2190)
* [ADF-1095] Date Range picker remains on screen * created date widget component with md datepicker. * [ADF-1095] Date Range picker remains on screen. * Changed mdl date picker to md date picker. * Updated en.josn with new fields. * Added md libraires to spec files . * [ADF-1095] Date Range picker remains on screen * Removed old id's for start and end date inputs. * remove md-date-time-picker * use local MaterialModule in test * [activiti-analytics] remove encapsulation and fix test * remove from vendor md-date-time-picker
This commit is contained in:
Eugenio Romano
committed by
Mario Romano
Mario Romano
parent
6d30752386
commit
56e65cd652
@@ -15,37 +15,26 @@
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
/* tslint:disable:component-selector */
|
||||
|
||||
/* tslint:disable::no-access-missing-member */
|
||||
import { Component, ElementRef, EventEmitter, Input, OnDestroy, OnInit, Output, ViewChild } from '@angular/core';
|
||||
import { Component, EventEmitter, Input, OnInit, Output, ViewEncapsulation } from '@angular/core';
|
||||
import { AbstractControl, FormControl, FormGroup, Validators } from '@angular/forms';
|
||||
import { DateAdapter, MD_DATE_FORMATS } from '@angular/material';
|
||||
import * as moment from 'moment';
|
||||
import { WidgetComponent } from './../widget.component';
|
||||
|
||||
function dateCheck(c: AbstractControl) {
|
||||
let startDate = moment(c.get('startDate').value);
|
||||
let endDate = moment(c.get('endDate').value);
|
||||
let result = startDate.isAfter(endDate);
|
||||
return result ? {'greaterThan': true} : null;
|
||||
}
|
||||
|
||||
declare let mdDateTimePicker: any;
|
||||
import { Moment } from 'moment';
|
||||
import { MOMENT_DATE_FORMATS, MomentDateAdapter } from 'ng2-alfresco-core';
|
||||
|
||||
@Component({
|
||||
selector: 'date-range-widget',
|
||||
selector: 'adf-date-range-widget',
|
||||
templateUrl: './date-range.widget.html',
|
||||
styleUrls: ['./date-range.widget.css']
|
||||
providers: [
|
||||
{provide: DateAdapter, useClass: MomentDateAdapter},
|
||||
{provide: MD_DATE_FORMATS, useValue: MOMENT_DATE_FORMATS}],
|
||||
styleUrls: ['./date-range.widget.scss'],
|
||||
encapsulation: ViewEncapsulation.None
|
||||
})
|
||||
export class DateRangeWidgetComponent extends WidgetComponent implements OnInit, OnDestroy {
|
||||
export class DateRangeWidgetComponent implements OnInit {
|
||||
|
||||
public static FORMAT_DATE_ACTIVITI: string = 'YYYY-MM-DD';
|
||||
|
||||
@ViewChild('startElement')
|
||||
startElement: any;
|
||||
|
||||
@ViewChild('endElement')
|
||||
endElement: any;
|
||||
public FORMAT_DATE_ACTIVITI: string = 'YYYY-MM-DD';
|
||||
public SHOW_FORMAT: string = 'DD/MM/YYYY';
|
||||
|
||||
@Input('group')
|
||||
public dateRange: FormGroup;
|
||||
@@ -56,152 +45,66 @@ export class DateRangeWidgetComponent extends WidgetComponent implements OnInit,
|
||||
@Output()
|
||||
dateRangeChanged: EventEmitter<any> = new EventEmitter<any>();
|
||||
|
||||
minDate: Moment;
|
||||
maxDate: Moment;
|
||||
startDatePicker: Moment;
|
||||
endDatePicker: Moment;
|
||||
|
||||
debug: boolean = false;
|
||||
|
||||
dialogStart: any;
|
||||
|
||||
dialogEnd: any;
|
||||
|
||||
constructor(public elementRef: ElementRef) {
|
||||
super();
|
||||
constructor(public dateAdapter: DateAdapter<Moment>) {
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
this.initForm();
|
||||
this.addAccessibilityLabelToDatePicker();
|
||||
}
|
||||
let momentDateAdapter = <MomentDateAdapter> this.dateAdapter;
|
||||
momentDateAdapter.overrideDisplyaFormat = this.SHOW_FORMAT;
|
||||
|
||||
initForm() {
|
||||
let startDateForm = this.field.value ? this.field.value.startDate : '' ;
|
||||
let startDate = this.convertToMomentDate(startDateForm);
|
||||
let endDateForm = this.field.value ? this.field.value.endDate : '' ;
|
||||
let endDate = this.convertToMomentDate(endDateForm);
|
||||
if (this.field) {
|
||||
if (this.field.value && this.field.value.startDate) {
|
||||
this.startDatePicker = moment(this.field.value.startDate, this.FORMAT_DATE_ACTIVITI);
|
||||
}
|
||||
|
||||
let startDateControl = new FormControl(startDate);
|
||||
if (this.field.value && this.field.value.endDate) {
|
||||
this.endDatePicker = moment(this.field.value.endDate, this.FORMAT_DATE_ACTIVITI);
|
||||
}
|
||||
}
|
||||
|
||||
let startDateControl = new FormControl(this.startDatePicker);
|
||||
startDateControl.setValidators(Validators.required);
|
||||
this.dateRange.addControl('startDate', startDateControl);
|
||||
|
||||
let endDateControl = new FormControl(endDate);
|
||||
let endDateControl = new FormControl(this.endDatePicker);
|
||||
endDateControl.setValidators(Validators.required);
|
||||
this.dateRange.addControl('endDate', endDateControl);
|
||||
|
||||
this.dateRange.setValidators(dateCheck);
|
||||
this.dateRange.valueChanges.subscribe(data => this.onGroupValueChanged(data));
|
||||
|
||||
this.initSartDateDialog(startDate);
|
||||
this.initEndDateDialog(endDate);
|
||||
this.dateRange.setValidators(this.dateCheck);
|
||||
this.dateRange.valueChanges.subscribe(() => this.onGroupValueChanged());
|
||||
}
|
||||
|
||||
initSartDateDialog(date: string) {
|
||||
let settings: any = {
|
||||
type: 'date',
|
||||
past: moment().subtract(100, 'years'),
|
||||
future: moment().add(100, 'years')
|
||||
};
|
||||
|
||||
settings.init = moment(date, DateRangeWidgetComponent.FORMAT_DATE_ACTIVITI);
|
||||
|
||||
this.dialogStart = new mdDateTimePicker.default(settings);
|
||||
this.dialogStart.trigger = this.startElement.nativeElement;
|
||||
|
||||
let startDateButton = document.getElementById('startDateButton');
|
||||
startDateButton.addEventListener('click', () => {
|
||||
this.dialogStart.toggle();
|
||||
});
|
||||
}
|
||||
|
||||
private addAccessibilityLabelToDatePicker() {
|
||||
let left: any = document.querySelector('#mddtp-date__left');
|
||||
if (left) {
|
||||
left.appendChild(this.createCustomElement('date left'));
|
||||
}
|
||||
|
||||
let right: any = document.querySelector('#mddtp-date__right');
|
||||
if (right) {
|
||||
right.appendChild(this.createCustomElement('date right'));
|
||||
}
|
||||
|
||||
let cancel: any = document.querySelector('#mddtp-date__cancel');
|
||||
if (cancel) {
|
||||
cancel.appendChild(this.createCustomElement('date cancel'));
|
||||
}
|
||||
|
||||
let ok: any = document.querySelector('#mddtp-date__ok');
|
||||
if (ok) {
|
||||
ok.appendChild(this.createCustomElement('date ok'));
|
||||
}
|
||||
}
|
||||
|
||||
private createCustomElement(text: string): HTMLElement {
|
||||
let span = document.createElement('span');
|
||||
span.style.visibility = 'hidden';
|
||||
let rightSpanText = document.createTextNode(text);
|
||||
span.appendChild(rightSpanText);
|
||||
return span;
|
||||
}
|
||||
|
||||
initEndDateDialog(date: string) {
|
||||
let settings: any = {
|
||||
type: 'date',
|
||||
past: moment().subtract(100, 'years'),
|
||||
future: moment().add(100, 'years')
|
||||
};
|
||||
|
||||
settings.init = moment(date, DateRangeWidgetComponent.FORMAT_DATE_ACTIVITI);
|
||||
|
||||
this.dialogEnd = new mdDateTimePicker.default(settings);
|
||||
this.dialogEnd.trigger = this.endElement.nativeElement;
|
||||
|
||||
let endDateButton = document.getElementById('endDateButton');
|
||||
endDateButton.addEventListener('click', () => {
|
||||
this.dialogEnd.toggle();
|
||||
});
|
||||
}
|
||||
|
||||
onOkStart(inputEl: HTMLInputElement) {
|
||||
let date = this.dialogStart.time.format(DateRangeWidgetComponent.FORMAT_DATE_ACTIVITI);
|
||||
this.dateRange.patchValue({
|
||||
startDate: date
|
||||
});
|
||||
let materialElemen: any = inputEl.parentElement;
|
||||
if (materialElemen) {
|
||||
materialElemen.MaterialTextfield.change(date);
|
||||
}
|
||||
}
|
||||
|
||||
onOkEnd(inputEl: HTMLInputElement) {
|
||||
let date = this.dialogEnd.time.format(DateRangeWidgetComponent.FORMAT_DATE_ACTIVITI);
|
||||
this.dateRange.patchValue({
|
||||
endDate: date
|
||||
});
|
||||
|
||||
let materialElemen: any = inputEl.parentElement;
|
||||
if (materialElemen) {
|
||||
materialElemen.MaterialTextfield.change(date);
|
||||
}
|
||||
}
|
||||
|
||||
onGroupValueChanged(data: any) {
|
||||
onGroupValueChanged() {
|
||||
if (this.dateRange.valid) {
|
||||
let dateStart = this.convertToMomentDateWithTime(this.dateRange.controls['startDate'].value);
|
||||
let endStart = this.convertToMomentDateWithTime(this.dateRange.controls['endDate'].value);
|
||||
let dateStart = this.convertToMomentDateWithTime(this.dateRange.controls.startDate.value);
|
||||
let endStart = this.convertToMomentDateWithTime(this.dateRange.controls.endDate.value);
|
||||
this.dateRangeChanged.emit({startDate: dateStart, endDate: endStart});
|
||||
}
|
||||
}
|
||||
|
||||
public convertToMomentDateWithTime(date: string) {
|
||||
return moment(date, DateRangeWidgetComponent.FORMAT_DATE_ACTIVITI, true).format(DateRangeWidgetComponent.FORMAT_DATE_ACTIVITI) + 'T00:00:00.000Z';
|
||||
convertToMomentDateWithTime(date: string) {
|
||||
return moment(date, this.FORMAT_DATE_ACTIVITI, true).format(this.FORMAT_DATE_ACTIVITI) + 'T00:00:00.000Z';
|
||||
}
|
||||
|
||||
private convertToMomentDate(date: string) {
|
||||
if (date) {
|
||||
return moment(date).format(DateRangeWidgetComponent.FORMAT_DATE_ACTIVITI);
|
||||
} else {
|
||||
return moment().format(DateRangeWidgetComponent.FORMAT_DATE_ACTIVITI);
|
||||
}
|
||||
dateCheck(formControl: AbstractControl) {
|
||||
let startDate = moment(formControl.get('startDate').value);
|
||||
let endDate = moment(formControl.get('endDate').value);
|
||||
let result = startDate.isAfter(endDate);
|
||||
return result ? {'greaterThan': true} : null;
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
isStartDateGreaterThanEndDate() {
|
||||
return this.dateRange && this.dateRange.errors && this.dateRange.errors.greaterThan;
|
||||
}
|
||||
|
||||
isStartDateEmpty() {
|
||||
return this.dateRange && this.dateRange.controls.startDate && !this.dateRange.controls.startDate.valid;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user