MaDgIK
/
explore-services
13
0
Fork 0
Code Issues Pull Requests Projects Releases 18 Wiki Activity

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
This commit is contained in:
argiro.kokogiannaki 2017-03-08 11:08:42 +00:00
parent b486713382
commit 89c18ce14f
1 changed files with 72 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
portal-2/src/app/searchPages/searchUtils/dateFilter.component.ts Normal file
View File

@ -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);
}}