Open-ILS/src/eg2/src/app/share/daterange-select/daterange-select.component.ts

   1 import {Component, Input, forwardRef, OnInit} from '@angular/core';
   2 import {NgbDate, NgbCalendar} from '@ng-bootstrap/ng-bootstrap';
   3 import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';
   4
   5 export interface DateRange {
   6     fromDate?: NgbDate;
   7     toDate?: NgbDate;
   8 }
   9
  10 @Component({
  11     selector: 'eg-daterange-select',
  12     templateUrl: './daterange-select.component.html',
  13     styleUrls: [ './daterange-select.component.css' ],
  14     providers: [{
  15         provide: NG_VALUE_ACCESSOR,
  16         useExisting: forwardRef(() => DateRangeSelectComponent),
  17         multi: true
  18     }]
  19 })
  20 export class DateRangeSelectComponent implements ControlValueAccessor, OnInit {
  21
  22     // Number of days in the initial
  23     // date range shown to user
  24     @Input() initialRangeLength = 10;
  25
  26     // Start date of the initial
  27     // date range shown to user
  28     @Input() initialRangeStart = new Date();
  29
  30     hoveredDate: NgbDate;
  31
  32     selectedRange: DateRange;
  33
  34     // Function to disable certain dates
  35     @Input() markDisabled:
  36         (date: NgbDate, current: { year: number; month: number; }) => boolean =
  37         (date: NgbDate, current: { year: number; month: number; }) => false
  38
  39     onChange = (_: any) => {};
  40     onTouched = () => {};
  41
  42     constructor(private calendar: NgbCalendar) { }
  43
  44     ngOnInit() {
  45         this.selectedRange = {
  46             fromDate: new NgbDate(
  47                 this.initialRangeStart.getFullYear(),
  48                 this.initialRangeStart.getMonth() + 1,
  49                 this.initialRangeStart.getDate()),
  50             toDate: this.calendar.getNext(
  51                 this.calendar.getToday(),
  52                 'd',
  53                 this.initialRangeLength)
  54         };
  55     }
  56
  57     onDateSelection(date: NgbDate) {
  58         if (!this.selectedRange.fromDate && !this.selectedRange.toDate) {
  59             this.selectedRange.fromDate = date;
  60         } else if (this.selectedRange.fromDate && !this.selectedRange.toDate && date.after(this.selectedRange.fromDate)) {
  61             this.selectedRange.toDate = date;
  62         } else {
  63             this.selectedRange.toDate = null;
  64             this.selectedRange.fromDate = date;
  65         }
  66         this.onChange(this.selectedRange);
  67     }
  68
  69     isHovered(date: NgbDate) {
  70         return this.selectedRange.fromDate &&
  71             !this.selectedRange.toDate &&
  72             this.hoveredDate &&
  73             date.after(this.selectedRange.fromDate) &&
  74             date.before(this.hoveredDate);
  75     }
  76
  77     isInside(date: NgbDate) {
  78         return date.after(this.selectedRange.fromDate) && date.before(this.selectedRange.toDate);
  79     }
  80
  81     isRange(date: NgbDate) {
  82         return date.equals(this.selectedRange.fromDate) ||
  83             date.equals(this.selectedRange.toDate) ||
  84             this.isInside(date) ||
  85             this.isHovered(date);
  86     }
  87
  88     writeValue(value: DateRange) {
  89         if (value) {
  90             this.selectedRange = value;
  91         }
  92     }
  93     registerOnChange(fn: (value: DateRange) => any): void {
  94         this.onChange = fn;
  95     }
  96     registerOnTouched(fn: () => any): void {
  97         this.onTouched = fn;
  98     }
  99     today(): NgbDate {
 100         return this.calendar.getToday();
 101     }
 102 }