1 |
50169
|
argiro.kok
|
import {Component, Input, Output, EventEmitter} from '@angular/core';
|
2 |
55964
|
argiro.kok
|
import {Observable} from 'rxjs';
|
3 |
50169
|
argiro.kok
|
|
4 |
|
|
import { Filter, Value, DateValue} from './searchHelperClasses.class';
|
5 |
|
|
import {IMyOptions, IMyDateModel} from '../../utils/my-date-picker/interfaces/index';
|
6 |
|
|
// import {IMyDateModel} from '../../../utils/my-date-picker/interfaces/my-date-model.interface';
|
7 |
|
|
import {Dates} from '../../utils/string-utils.class';
|
8 |
55964
|
argiro.kok
|
import {FormControl} from "@angular/forms";
|
9 |
|
|
import {MatDatepickerInputEvent} from "@angular/material";
|
10 |
50169
|
argiro.kok
|
|
11 |
|
|
@Component({
|
12 |
|
|
selector: 'date-filter',
|
13 |
|
|
template: `
|
14 |
|
|
|
15 |
55964
|
argiro.kok
|
<select *ngIf="dateValue && dateValue.type!='range' " name="{{'select_date_type'+filterId}}" [(ngModel)]=dateValue.type >
|
16 |
50169
|
argiro.kok
|
<option *ngFor="let type of dateValue.types let i = index" [value]="type" (click)="typeChanged(type)">{{dateValue.typesTitle[i]}}</option>
|
17 |
|
|
</select>
|
18 |
55964
|
argiro.kok
|
<div *ngIf="dateValue && dateValue.type=='range' ">
|
19 |
50169
|
argiro.kok
|
<table class=" uk-table uk-table-responsive" >
|
20 |
55964
|
argiro.kok
|
<tr>
|
21 |
|
|
<td class="uk-padding-remove-top">
|
22 |
|
|
<select name="{{'select_date_type'+filterId}}" [(ngModel)]=dateValue.type >
|
23 |
|
|
<option *ngFor="let type of dateValue.types let i = index" [value]="type" (click)="typeChanged(type)">{{dateValue.typesTitle[i]}}</option>
|
24 |
|
|
</select>
|
25 |
|
|
</td>
|
26 |
|
|
<td>
|
27 |
|
|
From
|
28 |
|
|
</td>
|
29 |
|
|
<td class="uk-padding-remove-top" style="width: 112px;">
|
30 |
|
|
<mat-form-field style="max-width: 112px;">
|
31 |
|
|
<input matInput [matDatepicker]="pickerFrom" placeholder="Choose a date"
|
32 |
|
|
[formControl]="fromDate" (click)="pickerFrom.open()" (dateChange)="fromDateChanged($event)">
|
33 |
|
|
<mat-datepicker-toggle matSuffix [for]="pickerFrom"></mat-datepicker-toggle>
|
34 |
|
|
<mat-datepicker #pickerFrom></mat-datepicker>
|
35 |
|
|
</mat-form-field>
|
36 |
|
|
</td>
|
37 |
|
|
<td>
|
38 |
|
|
To
|
39 |
|
|
</td>
|
40 |
|
|
<td class="uk-padding-remove-top" style="width: 112px;">
|
41 |
|
|
<mat-form-field style="max-width: 112px;">
|
42 |
|
|
<input matInput [matDatepicker]="pickerTo" placeholder="Choose a date"
|
43 |
|
|
[formControl]="toDate" (click)="pickerTo.open()" (dateChange)="toDateChanged($event)">
|
44 |
|
|
<mat-datepicker-toggle matSuffix [for]="pickerTo"></mat-datepicker-toggle>
|
45 |
|
|
<mat-datepicker #pickerTo></mat-datepicker>
|
46 |
|
|
</mat-form-field>
|
47 |
|
|
</td>
|
48 |
|
|
</tr>
|
49 |
50169
|
argiro.kok
|
</table>
|
50 |
55964
|
argiro.kok
|
</div>
|
51 |
|
|
<!-- <div *ngIf="dateValue.type=='range' " class="-row dateFilter" >-->
|
52 |
|
|
|
53 |
|
|
<!-- <table class=" uk-table uk-table-responsive" >-->
|
54 |
|
|
<!-- <tr><td>-->
|
55 |
|
|
<!-- <select name="{{'select_date_type'+filterId}}" [(ngModel)]=dateValue.type >-->
|
56 |
|
|
<!-- <option *ngFor="let type of dateValue.types let i = index" [value]="type" (click)="typeChanged(type)">{{dateValue.typesTitle[i]}}</option>-->
|
57 |
|
|
<!-- </select></td>-->
|
58 |
|
|
<!-- <td>-->
|
59 |
|
|
<!-- From</td><td style="width: 112px;"><my-date-picker name="from" [options]="myDatePickerOptions"-->
|
60 |
|
|
<!-- [(ngModel)]="from" (dateChanged)="onFromDateChanged($event)" ></my-date-picker>-->
|
61 |
|
|
<!-- </td> <td>-->
|
62 |
|
|
<!-- To </td><td style="width: 112px;"> <my-date-picker name="to" [options]="myDatePickerOptions"-->
|
63 |
|
|
<!-- [(ngModel)]="to" (dateChanged)="onToDateChanged($event)" ></my-date-picker></td></tr>-->
|
64 |
|
|
<!-- </table>-->
|
65 |
|
|
<!-- </div>-->
|
66 |
50169
|
argiro.kok
|
`
|
67 |
|
|
|
68 |
|
|
})
|
69 |
|
|
|
70 |
|
|
export class DateFilterComponent {
|
71 |
|
|
|
72 |
|
|
@Input() dateValue = new DateValue("any");
|
73 |
|
|
@Input() filterId;
|
74 |
55667
|
konstantin
|
@Input() validDateFrom: boolean = true;
|
75 |
|
|
@Input() validDateTo: boolean = true;
|
76 |
50169
|
argiro.kok
|
|
77 |
|
|
private myDatePickerOptions: IMyOptions = {
|
78 |
|
|
// other options...
|
79 |
|
|
dateFormat: 'yyyy-mm-dd',
|
80 |
|
|
selectionTxtFontSize: '15px',
|
81 |
|
|
height:'28px',
|
82 |
|
|
width: '100%',
|
83 |
|
|
editableDateField: false,
|
84 |
|
|
showClearDateBtn: false
|
85 |
|
|
};
|
86 |
|
|
|
87 |
|
|
// Initialized to specific date (09.10.2018).
|
88 |
|
|
public from;//: Object = { date: { year: 2018, month: 10, day: 9 } };
|
89 |
|
|
public to;//: Object = { date: { year: 2018, month: 10, day: 9 } };
|
90 |
55964
|
argiro.kok
|
public fromDate;
|
91 |
|
|
public toDate;
|
92 |
50169
|
argiro.kok
|
|
93 |
|
|
constructor() {
|
94 |
55964
|
argiro.kok
|
//this.updateDefaultRangeDates(this.dateValue.from,this.dateValue.to);
|
95 |
|
|
}
|
96 |
|
|
|
97 |
|
|
ngOnInit() {
|
98 |
50169
|
argiro.kok
|
this.updateDefaultRangeDates(this.dateValue.from,this.dateValue.to);
|
99 |
|
|
}
|
100 |
|
|
updateDefaultRangeDates(df:Date,dt:Date){
|
101 |
55964
|
argiro.kok
|
df.setMonth(df.getMonth()-1);
|
102 |
|
|
this.fromDate = new FormControl(df);
|
103 |
|
|
this.toDate = new FormControl(dt);
|
104 |
|
|
|
105 |
|
|
//this.from = { date: { year: df.getFullYear(), month: (df.getMonth()+1), day: df.getDate() } };
|
106 |
|
|
//this.to = { date: { year: dt.getFullYear(), month: (dt.getMonth()+1), day: dt.getDate() } };
|
107 |
50169
|
argiro.kok
|
}
|
108 |
|
|
typeChanged(type:string){
|
109 |
|
|
this.dateValue.setDatesByType(type);
|
110 |
|
|
this.updateDefaultRangeDates(this.dateValue.from, this.dateValue.to);
|
111 |
|
|
}
|
112 |
|
|
|
113 |
55964
|
argiro.kok
|
/*
|
114 |
50169
|
argiro.kok
|
onFromDateChanged(event: IMyDateModel) {
|
115 |
|
|
this.dateValue.from = Dates.getDateFromString(event.formatted);
|
116 |
55667
|
konstantin
|
this.validDateFrom = true;
|
117 |
50169
|
argiro.kok
|
}
|
118 |
|
|
onToDateChanged(event: IMyDateModel) {
|
119 |
|
|
this.dateValue.to = Dates.getDateFromString(event.formatted);
|
120 |
55667
|
konstantin
|
this.validDateTo = true;
|
121 |
55964
|
argiro.kok
|
}
|
122 |
|
|
*/
|
123 |
|
|
|
124 |
|
|
fromDateChanged(event: MatDatepickerInputEvent<Date>) {
|
125 |
|
|
this.dateValue.from = event.value;
|
126 |
|
|
//console.info("FROM: "+Dates.getDateToString(this.dateValue.from));
|
127 |
|
|
}
|
128 |
|
|
|
129 |
|
|
toDateChanged(event: MatDatepickerInputEvent<Date>) {
|
130 |
|
|
this.dateValue.to = event.value;
|
131 |
|
|
//console.info("TO: "+Dates.getDateToString(this.dateValue.to));
|
132 |
|
|
}
|
133 |
|
|
}
|