Update to angular 8.2
This commit is contained in:
Willem Dantuma
@@ -1,93 +1,93 @@
|
||||
import { Component, Output, ViewChild, EventEmitter, Input, ElementRef, HostListener } from '@angular/core';
|
||||
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
|
||||
import { NgbModal, NgbModalRef, NgbDateStruct, NgbCalendar, NgbDateAdapter } from "@ng-bootstrap/ng-bootstrap";
|
||||
import { NgbDateNativeAdapter } from '@farmmaps/common';
|
||||
|
||||
|
||||
const equals = (one: NgbDateStruct, two: NgbDateStruct) =>
|
||||
one && two && two.year === one.year && two.month === one.month && two.day === one.day;
|
||||
|
||||
const before = (one: NgbDateStruct, two: NgbDateStruct) =>
|
||||
!one || !two ? false : one.year === two.year ? one.month === two.month ? one.day === two.day
|
||||
? false : one.day < two.day : one.month < two.month : one.year < two.year;
|
||||
|
||||
const after = (one: NgbDateStruct, two: NgbDateStruct) =>
|
||||
!one || !two ? false : one.year === two.year ? one.month === two.month ? one.day === two.day
|
||||
? false : one.day > two.day : one.month > two.month : one.year > two.year;
|
||||
|
||||
@Component({
|
||||
selector: 'fm-map-select-period-modal',
|
||||
templateUrl: 'select-period-modal.component.html',
|
||||
styleUrls: ['select-period-modal.component.scss']
|
||||
})
|
||||
export class SelectPeriodModalComponent {
|
||||
|
||||
private modalName: string = 'selectPeriodModal';
|
||||
private modalRef: NgbModalRef;
|
||||
private dateAdapter = new NgbDateNativeAdapter();
|
||||
hoveredDate: NgbDateStruct;
|
||||
fromDate: NgbDateStruct;
|
||||
toDate: NgbDateStruct;
|
||||
|
||||
@ViewChild('content') _templateModal:ElementRef;
|
||||
|
||||
@Input() set modalState(_modalState:any) {;
|
||||
if(_modalState == this.modalName) {
|
||||
this.openModal()
|
||||
} else if(this.modalRef) {
|
||||
this.closeModal();
|
||||
}
|
||||
}
|
||||
|
||||
@Input() set startDate(_modalState: Date) {
|
||||
this.fromDate = this.dateAdapter.fromModel(_modalState);
|
||||
}
|
||||
|
||||
@Input() set endDate(_modalState: Date) {
|
||||
var d = new Date(_modalState);
|
||||
d.setDate(d.getDate() - 1);
|
||||
this.toDate = this.dateAdapter.fromModel(d);
|
||||
}
|
||||
|
||||
@Output() onCloseModal = new EventEmitter<any>();
|
||||
@Output() onSelect = new EventEmitter<{ startDate: Date, endDate: Date }>();
|
||||
|
||||
constructor(private modalService: NgbModal, private calendar: NgbCalendar) { }
|
||||
|
||||
openModal() {
|
||||
//Timeout trick to avoid ExpressionChangedAfterItHasBeenCheckedError
|
||||
setTimeout(() => this.modalRef = this.modalService.open(this._templateModal, { backdrop: 'static', keyboard: false}));
|
||||
}
|
||||
|
||||
closeModal() {
|
||||
this.modalRef.close();
|
||||
}
|
||||
|
||||
ngOnInit(): void {
|
||||
}
|
||||
|
||||
onDateChange(date: NgbDateStruct) {
|
||||
if (!this.fromDate && !this.toDate) {
|
||||
this.fromDate = date;
|
||||
} else if (this.fromDate && !this.toDate && after(date, this.fromDate)) {
|
||||
this.toDate = date;
|
||||
} else {
|
||||
this.toDate = null;
|
||||
this.fromDate = date;
|
||||
}
|
||||
}
|
||||
|
||||
handleSelect(event:MouseEvent) {
|
||||
event.preventDefault();
|
||||
if (this.fromDate && this.toDate && before(this.fromDate, this.toDate)) {
|
||||
var endDate = new Date(this.dateAdapter.toModel(this.toDate));
|
||||
endDate.setDate(endDate.getDate() + 1);
|
||||
this.onSelect.emit({startDate:this.dateAdapter.toModel(this.fromDate),endDate:endDate})
|
||||
}
|
||||
}
|
||||
|
||||
isHovered = date => this.fromDate && !this.toDate && this.hoveredDate && after(date, this.fromDate) && before(date, this.hoveredDate);
|
||||
isInside = date => after(date, this.fromDate) && before(date, this.toDate);
|
||||
isFrom = date => equals(date, this.fromDate);
|
||||
isTo = date => equals(date, this.toDate);
|
||||
}
|
||||
import { Component, Output, ViewChild, EventEmitter, Input, ElementRef, HostListener } from '@angular/core';
|
||||
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
|
||||
import { NgbModal, NgbModalRef, NgbDateStruct, NgbCalendar, NgbDateAdapter } from "@ng-bootstrap/ng-bootstrap";
|
||||
import { NgbDateNativeAdapter } from '@farmmaps/common';
|
||||
|
||||
|
||||
const equals = (one: NgbDateStruct, two: NgbDateStruct) =>
|
||||
one && two && two.year === one.year && two.month === one.month && two.day === one.day;
|
||||
|
||||
const before = (one: NgbDateStruct, two: NgbDateStruct) =>
|
||||
!one || !two ? false : one.year === two.year ? one.month === two.month ? one.day === two.day
|
||||
? false : one.day < two.day : one.month < two.month : one.year < two.year;
|
||||
|
||||
const after = (one: NgbDateStruct, two: NgbDateStruct) =>
|
||||
!one || !two ? false : one.year === two.year ? one.month === two.month ? one.day === two.day
|
||||
? false : one.day > two.day : one.month > two.month : one.year > two.year;
|
||||
|
||||
@Component({
|
||||
selector: 'fm-map-select-period-modal',
|
||||
templateUrl: 'select-period-modal.component.html',
|
||||
styleUrls: ['select-period-modal.component.scss']
|
||||
})
|
||||
export class SelectPeriodModalComponent {
|
||||
|
||||
private modalName: string = 'selectPeriodModal';
|
||||
private modalRef: NgbModalRef;
|
||||
private dateAdapter = new NgbDateNativeAdapter();
|
||||
hoveredDate: NgbDateStruct;
|
||||
fromDate: NgbDateStruct;
|
||||
toDate: NgbDateStruct;
|
||||
|
||||
@ViewChild('content', { static: true }) _templateModal:ElementRef;
|
||||
|
||||
@Input() set modalState(_modalState:any) {;
|
||||
if(_modalState == this.modalName) {
|
||||
this.openModal()
|
||||
} else if(this.modalRef) {
|
||||
this.closeModal();
|
||||
}
|
||||
}
|
||||
|
||||
@Input() set startDate(_modalState: Date) {
|
||||
this.fromDate = this.dateAdapter.fromModel(_modalState);
|
||||
}
|
||||
|
||||
@Input() set endDate(_modalState: Date) {
|
||||
var d = new Date(_modalState);
|
||||
d.setDate(d.getDate() - 1);
|
||||
this.toDate = this.dateAdapter.fromModel(d);
|
||||
}
|
||||
|
||||
@Output() onCloseModal = new EventEmitter<any>();
|
||||
@Output() onSelect = new EventEmitter<{ startDate: Date, endDate: Date }>();
|
||||
|
||||
constructor(private modalService: NgbModal, private calendar: NgbCalendar) { }
|
||||
|
||||
openModal() {
|
||||
//Timeout trick to avoid ExpressionChangedAfterItHasBeenCheckedError
|
||||
setTimeout(() => this.modalRef = this.modalService.open(this._templateModal, { backdrop: 'static', keyboard: false}));
|
||||
}
|
||||
|
||||
closeModal() {
|
||||
this.modalRef.close();
|
||||
}
|
||||
|
||||
ngOnInit(): void {
|
||||
}
|
||||
|
||||
onDateChange(date: NgbDateStruct) {
|
||||
if (!this.fromDate && !this.toDate) {
|
||||
this.fromDate = date;
|
||||
} else if (this.fromDate && !this.toDate && after(date, this.fromDate)) {
|
||||
this.toDate = date;
|
||||
} else {
|
||||
this.toDate = null;
|
||||
this.fromDate = date;
|
||||
}
|
||||
}
|
||||
|
||||
handleSelect(event:MouseEvent) {
|
||||
event.preventDefault();
|
||||
if (this.fromDate && this.toDate && before(this.fromDate, this.toDate)) {
|
||||
var endDate = new Date(this.dateAdapter.toModel(this.toDate));
|
||||
endDate.setDate(endDate.getDate() + 1);
|
||||
this.onSelect.emit({startDate:this.dateAdapter.toModel(this.fromDate),endDate:endDate})
|
||||
}
|
||||
}
|
||||
|
||||
isHovered = date => this.fromDate && !this.toDate && this.hoveredDate && after(date, this.fromDate) && before(date, this.hoveredDate);
|
||||
isInside = date => after(date, this.fromDate) && before(date, this.toDate);
|
||||
isFrom = date => equals(date, this.fromDate);
|
||||
isTo = date => equals(date, this.toDate);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user