Use mdl-date-picker

ng2-components/ng2-activiti-analytics/package.json

@@ -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",

ng2-components/ng2-activiti-analytics/src/components/analytics.component.html

@@ -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">

ng2-components/ng2-activiti-analytics/src/components/widgets/date-range/date-range.widget.css

@@ -0,0 +1,3 @@
+.date-picker-mdl {
+    margin-left: 20px;
+}

ng2-components/ng2-activiti-analytics/src/components/widgets/date-range/date-range.widget.html

@@ -1,16 +1,48 @@
-
 <label>{{field.nameKey | translate}}</label><br>
-<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label date-widget">
+<form [formGroup]="dataForm">
-    <input class="mdl-textfield__input"
+    <fieldset formGroupName="dateRange">
-           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))))$"
+        <span *ngIf="dataForm.get('dateRange').errors && dataForm.get('dateRange').errors.greaterThan">Error: startDate is greater than
-           type="text"
+            endDate</span>
-           (keyup)="onDateRangeChanged(startDate, endDate)" name="startDate" #startDate required>
+        <div class="mdl-grid">
-    <label class="mdl-textfield__label" >StartDate (d/M/yyyy)</label>
+            <div class="mdl-cell mdl-cell--4-col">
-</div>
+                <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
-<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label date-widget">
+                    <input class="mdl-textfield__input"
-    <input class="mdl-textfield__input"
+                           formControlName="startDate"
-           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"
-           type="text"
+                           (onOk)="onOkStart(startElement)"
-           (keyup)="onDateRangeChanged(startDate, endDate)" name="endDate" #endDate required>
+                           id="startDateInput" #startElement>
-    <label class="mdl-textfield__label" >EndDate (d-M-yyyy)</label>
+                    <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>

ng2-components/ng2-activiti-analytics/src/components/widgets/date-range/date-range.widget.ts

@@ -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) {
+    dialogStart: any = new mdDateTimePicker.default({
-        if (startDate.validity.valid && endDate.validity.valid) {
+        type: 'date',
-            let dateStart = this.convertMomentDate(startDate.value);
+        future: moment().add(21, 'years')
-            let endStart = this.convertMomentDate(endDate.value);
+    });
+
+    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';
     }
 
 }

ng2-components/ng2-activiti-analytics/src/i18n/en.json

@@ -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",