94 lines
3.4 KiB
TypeScript
94 lines
3.4 KiB
TypeScript
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 = '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) {
|
|
const 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)) {
|
|
const 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);
|
|
}
|