adding the dateFilter component - completing previous commit with date ranges

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-portal/trunk@46183 d315682c-612b-4755-9ff5-7f18f6832af3

portal-2/src/app/searchPages/searchUtils/dateFilter.component.ts

@@ -0,0 +1,72 @@
+import {Component, Input, Output, EventEmitter} from '@angular/core';
+import {Observable}       from 'rxjs/Observable';
+
+import { Filter, Value, DateValue} from './searchHelperClasses.class';
+import {IMyOptions, IMyDateModel} from 'mydatepicker';
+import {Dates} from '../../utils/string-utils.class';
+
+@Component({
+    selector: 'date-filter',
+    template: `
+
+    <select *ngIf="dateValue.type!='range' "  name="{{'select_date_type'+filterId}}"    [(ngModel)]=dateValue.type >
+      <option *ngFor="let type of dateValue.types let i = index"  [value]="type" (click)="typeChanged(type)">{{dateValue.typesTitle[i]}}</option>
+    </select>
+    <div *ngIf="dateValue.type=='range' " class="uk-form-row dateFilter" >
+
+      <table >
+      <tr><td>
+      <select name="{{'select_date_type'+filterId}}"    [(ngModel)]=dateValue.type >
+        <option *ngFor="let type of dateValue.types let i = index"  [value]="type" (click)="typeChanged(type)">{{dateValue.typesTitle[i]}}</option>
+      </select></td>
+      <td>
+          From</td><td  style="width: 112px;"><my-date-picker name="from" [options]="myDatePickerOptions"
+                    [(ngModel)]="from" (dateChanged)="onFromDateChanged($event)" ></my-date-picker>
+      </td> <td>
+            To </td><td  style="width: 112px;">     <my-date-picker name="to" [options]="myDatePickerOptions"
+                            [(ngModel)]="to" (dateChanged)="onToDateChanged($event)" ></my-date-picker></td></tr>
+      </table>
+     </div>
+    `
+
+})
+
+export class DateFilterComponent {
+
+    @Input() dateValue = new DateValue("any");
+    @Input() filterId;
+
+    private myDatePickerOptions: IMyOptions = {
+          // other options...
+          dateFormat: 'yyyy-mm-dd',
+          selectionTxtFontSize: '15px',
+          height:'28px',
+          width: '100%',
+          editableDateField: false,
+          showClearDateBtn: false
+      };
+
+      // Initialized to specific date (09.10.2018).
+      public from;//: Object = { date: { year: 2018, month: 10, day: 9 } };
+      public to;//: Object = { date: { year: 2018, month: 10, day: 9 } };
+
+constructor() {
+  this.updateDefaultRangeDates(this.dateValue.from,this.dateValue.to);
+}
+updateDefaultRangeDates(df:Date,dt:Date){
+    this.from = { date: { year: df.getFullYear(), month: (df.getMonth()+1), day: df.getDate() } };
+    this.to = { date: { year: dt.getFullYear(), month: (dt.getMonth()+1), day: dt.getDate() } };
+  }
+typeChanged(type:string){
+  this.dateValue.setDatesByType(type);
+  this.updateDefaultRangeDates(this.dateValue.from, this.dateValue.to);
+}
+
+onFromDateChanged(event: IMyDateModel) {
+  this.dateValue.from = Dates.getDateFromString(event.formatted);
+
+}
+onToDateChanged(event: IMyDateModel) {
+  this.dateValue.to = Dates.getDateFromString(event.formatted);
+
+}}