Renamed prefixes in angular.json

projects/common-map/src/fm-map/components/select-period-modal/select-period-modal.component.html

@@ -0,0 +1,31 @@
+<ng-template #content let-c="close" let-d="dismiss">
+  
+    <div class="modal-header">
+      <h4 class="modal-title" i18n>Select period</h4>
+      <button type="button" class="close" aria-label="Close" (click)="d('Cross click'); onCloseModal.emit()">
+        <span aria-hidden="true">&times;</span>
+      </button>
+    </div>
+    <div class="modal-body">
+      <ngb-datepicker #dp ngModel (ngModelChange)="onDateChange($event)" [displayMonths]="2" [dayTemplate]="t">
+      </ngb-datepicker>
+
+      <ng-template #t let-date="date" let-focused="focused">
+        <span class="custom-day"
+              [class.focused]="focused"
+              [class.range]="isFrom(date) || isTo(date) || isInside(date) || isHovered(date)"
+              [class.faded]="isHovered(date) || isInside(date)"
+              (mouseenter)="hoveredDate = date"
+              (mouseleave)="hoveredDate = null">
+          {{ date.day }}
+        </span>
+      </ng-template>
+    </div>
+    <div class="modal-footer">
+      <button type="submit" class="btn btn-primary" (click)="handleSelect($event)" i18n>Select</button>
+      <button type="button" class="btn btn-secondary" (click)="c('Close click'); onCloseModal.emit()" i18n>Close</button>
+    </div>
+  
+</ng-template>
+
+

projects/common-map/src/fm-map/components/select-period-modal/select-period-modal.component.scss

@@ -0,0 +1,20 @@
+.custom-day {
+  text-align: center;
+  padding: 0.185rem 0.25rem;
+  display: inline-block;
+  height: 2rem;
+  width: 2rem;
+}
+
+.custom-day.focused {
+  background-color: #e6e6e6;
+}
+
+.custom-day.range, .custom-day:hover {
+  background-color: rgb(2, 117, 216);
+  color: white;
+}
+
+.custom-day.faded {
+  background-color: rgba(2, 117, 216, 0.5);
+}

projects/common-map/src/fm-map/components/select-period-modal/select-period-modal.component.ts

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