mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-05-26 17:24:56 +00:00
Use mdl-date-picker
This commit is contained in:
mauriziovitale84
parent
ea7e2b9c39
commit
8f3dbb0d7d
@ -54,6 +54,7 @@
|
||||
"alfresco-js-api": "^0.3.0",
|
||||
"chart.js": "^2.1.4",
|
||||
"core-js": "^2.4.1",
|
||||
"md-date-time-picker": "^2.2.0",
|
||||
"ng2-alfresco-core": "0.3.2",
|
||||
"ng2-charts": "1.1.0",
|
||||
"ng2-translate": "2.5.0",
|
||||
|
||||
@ -40,6 +40,7 @@
|
||||
(dateRangeChanged)="onDateRangeChange($event)"></date-range-widget>
|
||||
</div>
|
||||
<div *ngSwitchCase="'dateInterval'">
|
||||
<br>
|
||||
<dropdown-widget [field]="field" [showDefaultOption]="false"
|
||||
(fieldChanged)="onDateRangeIntervalChange(field)"></dropdown-widget>
|
||||
</div>
|
||||
@ -49,7 +50,9 @@
|
||||
</div>
|
||||
</div>
|
||||
<br><br>
|
||||
<button type="submit" class="btn btn-default" (click)="createReport()">CREATE REPORT</button>
|
||||
<button type="submit" class="mdl-button mdl-js-button mdl-button--fab" (click)="createReport()" >
|
||||
<i class="material-icons">refresh</i>
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div *ngFor="let report of reports">
|
||||
|
||||
@ -0,0 +1,3 @@
|
||||
.date-picker-mdl {
|
||||
margin-left: 20px;
|
||||
}
|
||||
@ -1,16 +1,48 @@
|
||||
|
||||
<label>{{field.nameKey | translate}}</label><br>
|
||||
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label date-widget">
|
||||
<input class="mdl-textfield__input"
|
||||
pattern="^(((0[1-9]|[12]\d|3[01])\/(0[13578]|1[02])\/((19|[2-9]\d)\d{2}))|((0[1-9]|[12]\d|30)\/(0[13456789]|1[012])\/((19|[2-9]\d)\d{2}))|((0[1-9]|1\d|2[0-8])\/02\/((19|[2-9]\d)\d{2}))|(29\/02\/((1[6-9]|[2-9]\d)(0[48]|[2468][048]|[13579][26])|((16|[2468][048]|[3579][26])00))))$"
|
||||
type="text"
|
||||
(keyup)="onDateRangeChanged(startDate, endDate)" name="startDate" #startDate required>
|
||||
<label class="mdl-textfield__label" >StartDate (d/M/yyyy)</label>
|
||||
</div>
|
||||
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label date-widget">
|
||||
<input class="mdl-textfield__input"
|
||||
pattern="^(((0[1-9]|[12]\d|3[01])\/(0[13578]|1[02])\/((19|[2-9]\d)\d{2}))|((0[1-9]|[12]\d|30)\/(0[13456789]|1[012])\/((19|[2-9]\d)\d{2}))|((0[1-9]|1\d|2[0-8])\/02\/((19|[2-9]\d)\d{2}))|(29\/02\/((1[6-9]|[2-9]\d)(0[48]|[2468][048]|[13579][26])|((16|[2468][048]|[3579][26])00))))$"
|
||||
type="text"
|
||||
(keyup)="onDateRangeChanged(startDate, endDate)" name="endDate" #endDate required>
|
||||
<label class="mdl-textfield__label" >EndDate (d-M-yyyy)</label>
|
||||
<form [formGroup]="dataForm">
|
||||
<fieldset formGroupName="dateRange">
|
||||
<span *ngIf="dataForm.get('dateRange').errors && dataForm.get('dateRange').errors.greaterThan">Error: startDate is greater than
|
||||
endDate</span>
|
||||
<div class="mdl-grid">
|
||||
<div class="mdl-cell mdl-cell--4-col">
|
||||
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
|
||||
<input class="mdl-textfield__input"
|
||||
formControlName="startDate"
|
||||
type="text"
|
||||
(onOk)="onOkStart(startElement)"
|
||||
id="startDateInput" #startElement>
|
||||
<label class="mdl-textfield__label" for="startDateInput">Start Date</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mdl-cell mdl-cell--2-col">
|
||||
<button id="startDateButton" class="mdl-button mdl-js-button mdl-button--fab date-picker-mdl">
|
||||
<i class="material-icons">date_range</i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="mdl-cell mdl-cell--4-col">
|
||||
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
|
||||
<input class="mdl-textfield__input"
|
||||
formControlName="endDate"
|
||||
type="text"
|
||||
(onOk)="onOkEnd(endElement)"
|
||||
id="endDateInput" #endElement>
|
||||
<label class="mdl-textfield__label" for="endDateInput">End Date</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mdl-cell mdl-cell--2-col">
|
||||
<button id="endDateButton" class="mdl-button mdl-js-button mdl-button--fab date-picker-mdl">
|
||||
<i class="material-icons">date_range</i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
</form>
|
||||
<div *ngIf="debug">
|
||||
<p>Form : {{ dataForm.value | json }}</p>
|
||||
|
||||
<p>FormGroup : {{ dataForm.get('dateRange').value | json }}</p>
|
||||
|
||||
<p>FormGroup valid : {{ dataForm.get('dateRange').valid }}</p>
|
||||
|
||||
<p>FormGroup status : {{ dataForm.get('dateRange').errors | json }}</p>
|
||||
</div>
|
||||
@ -15,16 +15,35 @@
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import { Component, Input, Output, EventEmitter } from '@angular/core';
|
||||
import { Component, Input, Output, EventEmitter, ViewChild, ElementRef } from '@angular/core';
|
||||
import { AbstractControl, FormGroup, FormBuilder, Validators } from '@angular/forms';
|
||||
import { WidgetComponent } from './../widget.component';
|
||||
import * as moment from 'moment';
|
||||
|
||||
declare let mdDateTimePicker: any;
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
@Component({
|
||||
moduleId: module.id,
|
||||
selector: 'date-range-widget',
|
||||
templateUrl: './date-range.widget.html',
|
||||
styleUrls: ['./date-range.widget.css']
|
||||
})
|
||||
export class DateRangeWidget {
|
||||
export class DateRangeWidget extends WidgetComponent {
|
||||
|
||||
public static FORMAT_DATE_ACTIVITI: string = 'YYYY-MM-DD';
|
||||
|
||||
@ViewChild('startElement')
|
||||
startElement: any;
|
||||
|
||||
@ViewChild('endElement')
|
||||
endElement: any;
|
||||
|
||||
@Input()
|
||||
field: any;
|
||||
@ -32,18 +51,106 @@ export class DateRangeWidget {
|
||||
@Output()
|
||||
dateRangeChanged: EventEmitter<any> = new EventEmitter<any>();
|
||||
|
||||
constructor() {}
|
||||
dataForm: FormGroup;
|
||||
|
||||
public onDateRangeChanged(startDate: HTMLInputElement, endDate: HTMLInputElement) {
|
||||
if (startDate.validity.valid && endDate.validity.valid) {
|
||||
let dateStart = this.convertMomentDate(startDate.value);
|
||||
let endStart = this.convertMomentDate(endDate.value);
|
||||
dialogStart: any = new mdDateTimePicker.default({
|
||||
type: 'date',
|
||||
future: moment().add(21, 'years')
|
||||
});
|
||||
|
||||
dialogEnd: any = new mdDateTimePicker.default({
|
||||
type: 'date',
|
||||
future: moment().add(21, 'years')
|
||||
});
|
||||
|
||||
debug: boolean = false;
|
||||
|
||||
constructor(public elementRef: ElementRef,
|
||||
private formBuilder: FormBuilder) {
|
||||
super();
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
this.initForm();
|
||||
this.initSartDateDialog();
|
||||
this.initEndDateDialog();
|
||||
}
|
||||
|
||||
initForm() {
|
||||
let today = moment().format(DateRangeWidget.FORMAT_DATE_ACTIVITI);
|
||||
this.dataForm = this.formBuilder.group({
|
||||
dateRange: this.formBuilder.group({
|
||||
startDate: [today, Validators.required],
|
||||
endDate: [today, Validators.required]
|
||||
}, {validator: dateCheck})
|
||||
});
|
||||
this.dataForm.valueChanges.subscribe(data => this.onValueChanged(data));
|
||||
this.dataForm.controls['dateRange'].valueChanges.subscribe(data => this.onGroupValueChanged(data));
|
||||
}
|
||||
|
||||
initSartDateDialog() {
|
||||
this.dialogStart.trigger = this.startElement.nativeElement;
|
||||
|
||||
let startDateButton = document.getElementById('startDateButton');
|
||||
startDateButton.addEventListener('click', () => {
|
||||
this.dialogStart.toggle();
|
||||
});
|
||||
}
|
||||
|
||||
initEndDateDialog() {
|
||||
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(DateRangeWidget.FORMAT_DATE_ACTIVITI);
|
||||
let dateRange: any = this.dataForm.controls['dateRange'];
|
||||
dateRange.patchValue({
|
||||
startDate: date
|
||||
});
|
||||
let materialElemen: any = inputEl.parentElement;
|
||||
if (materialElemen) {
|
||||
materialElemen.MaterialTextfield.change(date);
|
||||
}
|
||||
}
|
||||
|
||||
onOkEnd(inputEl: HTMLInputElement) {
|
||||
let date = this.dialogEnd.time.format(DateRangeWidget.FORMAT_DATE_ACTIVITI);
|
||||
let dateRange: any = this.dataForm.controls['dateRange'];
|
||||
dateRange.patchValue({
|
||||
endDate: date
|
||||
});
|
||||
|
||||
let materialElemen: any = inputEl.parentElement;
|
||||
if (materialElemen) {
|
||||
materialElemen.MaterialTextfield.change(date);
|
||||
}
|
||||
}
|
||||
|
||||
onGroupValueChanged(data: any) {
|
||||
if (this.dataForm.controls['dateRange'].valid) {
|
||||
let dateRange: any = this.dataForm.controls['dateRange'];
|
||||
let dateStart = this.convertMomentDate(dateRange.controls['startDate'].value);
|
||||
// let endStart = this.convertMomentDate(this.dataForm.controls['endDate'].value);
|
||||
console.log(dateStart);
|
||||
}
|
||||
}
|
||||
|
||||
onValueChanged(data: any) {
|
||||
if (this.dataForm.valid) {
|
||||
let dateRange: any = this.dataForm.controls['dateRange'];
|
||||
let dateStart = this.convertMomentDate(dateRange.controls['startDate'].value);
|
||||
let endStart = this.convertMomentDate(dateRange.controls['endDate'].value);
|
||||
this.dateRangeChanged.emit({startDate: dateStart, endDate: endStart});
|
||||
}
|
||||
}
|
||||
|
||||
public convertMomentDate(date: string) {
|
||||
return moment(date, 'DD/MM/YYYY', true).format('YYYY-MM-DD') + 'T00:00:00.000Z';
|
||||
return moment(date, DateRangeWidget.FORMAT_DATE_ACTIVITI, true).format(DateRangeWidget.FORMAT_DATE_ACTIVITI) + 'T00:00:00.000Z';
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -28,8 +28,10 @@
|
||||
"DATE-RANGE-INTERVAL": "Aggregate dates by"
|
||||
},
|
||||
"TASK-SLA": {
|
||||
"TASK": "Task",
|
||||
"PROCESS-DEFINITION": "Process definition",
|
||||
"DATE-RANGE": "Date range"
|
||||
"DATE-RANGE": "Date range",
|
||||
"SLA-DURATION": "What is the time this task needs to be completed in to be within the SLA?"
|
||||
}
|
||||
},
|
||||
"PROCESS-STATUS": "Process status",
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user