add activeRange to output

BhavinPatel04 · Nov 25, 2019 · 94eae1d · 94eae1d
1 parent 35179e8
commit 94eae1d
Show file tree

Hide file tree

Showing 13 changed files with 639 additions and 600 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -26,14 +26,14 @@
   "scripts": {
     "setup": "npm install && gulp init",
     "ng": "ng",
-    "start": "ng serve",
+    "start": "npm run build-lib && ng serve",
     "build": "ng build",
     "build-dev": "ng build --dev --output-hashing=all && gulp build",
     "build-prod": "node --max-old-space-size=4076 ./node_modules/.bin/ng build --prod && gulp build",
     "build-lib": "npm run package-lib && npm run bundle-lib-scss",
     "package-lib": "ng-packagr -p ./projects/ngx-datetime-range-picker/ng-package.json",
     "bundle-lib-scss": "scss-bundle -p ./projects/ngx-datetime-range-picker/src/scss-bundle.config.json",
-    "test": "ng test",
+    "test": "npm run build-lib && ng test",
     "lint": "ng lint --fix",
     "e2e": "ng e2e",
     "gh-pages": "ng build --prod --base-href=\"/ngx-datetime-range-picker/\" && ngh --dir dist",

diff --git a/projects/ngx-datetime-range-picker/package.json b/projects/ngx-datetime-range-picker/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ngx-datetime-range-picker",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "homepage": "https://github.com/BhavinPatel04/ngx-datetime-range-picker",
   "bugs": "https://github.com/BhavinPatel04/ngx-datetime-range-picker/issues",
   "repository": {

diff --git a/projects/ngx-datetime-range-picker/src/lib/interfaces/index.ts b/projects/ngx-datetime-range-picker/src/lib/interfaces/index.ts
@@ -1,3 +1,7 @@
+const tuple = <T extends string[]>(...args: T) => args;
+export const CalendarTypes = tuple("daily", "weekly", "monthly", "quarterly", "yearly");
+export type CalendarType = typeof CalendarTypes[number];
+
 export interface AriaLabelsOptions {
   inputField?: string;
 }
@@ -34,6 +38,16 @@ export interface CalendarSides {
   right?: DateSide | TimeSide | ActiveItemSide | string | boolean;
 }
 
+export interface DateTimeRangeChangeOutput {
+  activeRange: string;
+  startDate: string | number;
+  endDate: string | number;
+  startTime?: string;
+  endTime?: string;
+}
+
+export type DateTimeRangeModelChangeOutput = { [key in CalendarType]?: DateTimeRangeChangeOutput };
+
 export interface Options {
   dateArray?: any[];
   startDate?: string | number;
@@ -143,6 +157,4 @@ export interface RowItemOptions {
   columns: number;
 }
 
-type CalendarTypes = "daily" | "weekly" | "monthly" | "quarterly" | "yearly";
-
-export type DateRangeModel = { [key in CalendarTypes]?: Options };
+export type DateRangeModel = { [key in CalendarType]?: Options };
diff --git a/projects/ngx-datetime-range-picker/src/lib/ngx-datetime-range-picker.component.html b/projects/ngx-datetime-range-picker/src/lib/ngx-datetime-range-picker.component.html
@@ -1,5 +1,5 @@
 <div class="m1-date-range-picker">
-  <div class="">
+  <div class="date-input">
     <mat-form-field class="full-width">
       <span matPrefix>
         <mat-icon fontSet="fa" fontIcon="fa-calendar"></mat-icon>

diff --git a/projects/ngx-datetime-range-picker/src/lib/ngx-datetime-range-picker.component.scss b/projects/ngx-datetime-range-picker/src/lib/ngx-datetime-range-picker.component.scss
@@ -9,7 +9,6 @@ $fa-font-path: "~font-awesome/fonts";
   .m1-date-range-picker {
     position: relative;
     border-radius: 0;
-    z-index: 1001;
     width: 100% !important;
 
     .mat-icon {
@@ -58,6 +57,8 @@ $fa-font-path: "~font-awesome/fonts";
     }
 
     .calendar-view {
+      position: absolute;
+      z-index: 1;
       width: fit-content;
       background-color: #fff;
       padding: 12px 8px;

diff --git a/projects/ngx-datetime-range-picker/src/lib/ngx-datetime-range-picker.component.spec.ts b/projects/ngx-datetime-range-picker/src/lib/ngx-datetime-range-picker.component.spec.ts
@@ -3,7 +3,7 @@ import { SimpleChanges } from "@angular/core";
 import { NoopAnimationsModule } from "@angular/platform-browser/animations";
 import { NgxDatetimeRangePickerModule } from "./ngx-datetime-range-picker.module";
 import { NgxDatetimeRangePickerComponent } from "./ngx-datetime-range-picker.component";
-import { DateSide } from "./interfaces";
+import { DateSide, DateTimeRangeChangeOutput, DateTimeRangeModelChangeOutput } from "./interfaces";
 
 declare var require: any;
 const moment = require("moment");
@@ -462,14 +462,16 @@ describe("NgxDatetimeRangePickerComponent", () => {
   it("#getDateRangeModel", () => {
     const startDate = component.config.startDate;
     const endDate = component.config.endDate;
+    component.state.activeRange = "activeRange";
     component.config.type = "daily";
     component.config.outputDateFormat = "YYYY-MM-DD";
     expect(component.getDateRangeModel()).toEqual({
       daily: {
+        activeRange: component.state.activeRange,
         startDate: startDate as string,
         endDate: endDate as string
-      }
-    });
+      } as DateTimeRangeChangeOutput
+    } as DateTimeRangeModelChangeOutput);
   });
 
   it("#doApply", () => {

diff --git a/projects/ngx-datetime-range-picker/src/lib/ngx-datetime-range-picker.component.ts b/projects/ngx-datetime-range-picker/src/lib/ngx-datetime-range-picker.component.ts
@@ -28,7 +28,9 @@ import {
   Config,
   TimeSide,
   DateRow,
-  RowVariables
+  RowVariables,
+  DateTimeRangeChangeOutput,
+  DateTimeRangeModelChangeOutput
 } from "./interfaces/index";
 
 declare var require: any;
@@ -99,6 +101,7 @@ export class NgxDatetimeRangePickerComponent implements OnChanges {
     }
 
     if (settings) {
+      this.service.checkSettingsValidity(settings.currentValue as Settings);
       this.settings = mergeDeep(this.settings, settings.currentValue);
     }
 
@@ -941,24 +944,29 @@ export class NgxDatetimeRangePickerComponent implements OnChanges {
   }
 
   dateRangeSelected() {
-    const dateRangeModel: Options = this.getNgxDatetimeRangePickerModelItem();
+    const dateRangeModel: DateTimeRangeChangeOutput = this.getNgxDatetimeRangeChangeOutput();
     this.state.isCalendarVisible = false;
     this.filterInputBox.nativeElement.classList.remove("empty-filter");
     this.doDateRangeModelChange();
     this.dateRangeChanged.emit(dateRangeModel);
   }
 
-  getDateRangeModel(format?: string): DateRangeModel {
-    let dRModel: DateRangeModel = {};
+  doDateRangeModelChange() {
+    const dateRangeModel: DateTimeRangeModelChangeOutput = this.getDateRangeModel(this.config.inputDateFormat);
+    this.dateRangeModelChange.emit(dateRangeModel);
+  }
+
+  getDateRangeModel(format?: string): DateTimeRangeModelChangeOutput {
+    let dRModel: DateTimeRangeModelChangeOutput = {};
     if (undefined !== this.dateRangeModel && !isEmpty(this.dateRangeModel)) {
       dRModel = cloneDeep(this.dateRangeModel) as {};
     }
-    dRModel[this.config.type] = this.getNgxDatetimeRangePickerModelItem(format);
+    dRModel[this.config.type] = this.getNgxDatetimeRangeChangeOutput(format);
     return dRModel;
   }
 
-  getNgxDatetimeRangePickerModelItem(format?: string): Options {
-    let dateRangeModelItem: Options;
+  getNgxDatetimeRangeChangeOutput(format?: string): DateTimeRangeChangeOutput {
+    let dateRangeChangeOutput: DateTimeRangeChangeOutput;
     let outputDateFormat: string = this.config.outputDateFormat;
     if (undefined !== format) {
       outputDateFormat = format;
@@ -971,21 +979,26 @@ export class NgxDatetimeRangePickerComponent implements OnChanges {
       endDate = this.service.formatToZoneDate(this.config.selectedTimezone, outputDateFormat, endDate);
     }
 
-    dateRangeModelItem = { startDate, endDate };
+    dateRangeChangeOutput = {
+      activeRange: this.state.activeRange,
+      startDate,
+      endDate
+    };
 
     if (this.config.timePicker) {
       const startTime = this.config.startTime;
       const endTime = this.config.endTime;
 
-      dateRangeModelItem = {
+      dateRangeChangeOutput = {
+        activeRange: this.state.activeRange,
         startDate,
         endDate,
         startTime,
         endTime
       };
     }
 
-    return dateRangeModelItem;
+    return dateRangeChangeOutput;
   }
 
   doApply() {
@@ -1021,11 +1034,6 @@ export class NgxDatetimeRangePickerComponent implements OnChanges {
     this.updateInputField();
   }
 
-  doDateRangeModelChange() {
-    const dateRangeModel: DateRangeModel = this.getDateRangeModel(this.config.inputDateFormat);
-    this.dateRangeModelChange.emit(dateRangeModel);
-  }
-
   onTimezoneChange(tz: string) {
     this.state.selectedTimezone = tz;
     this.state.todayTime = this.service.getZoneToday(this.state.selectedTimezone, this.config.viewDateFormat);

diff --git a/projects/ngx-datetime-range-picker/src/lib/ngx-datetime-range-picker.service.ts b/projects/ngx-datetime-range-picker/src/lib/ngx-datetime-range-picker.service.ts
@@ -14,7 +14,9 @@ import {
   DateCharacteristics,
   Config,
   RowOptions,
-  RowVariables
+  CalendarTypes,
+  RowVariables,
+  CalendarType
 } from "./interfaces/index";
 import { Moment } from "moment";
 
@@ -151,6 +153,13 @@ export class NgxDatetimeRangePickerService {
     };
   }
 
+  checkSettingsValidity(settings: Settings) {
+    if (settings.type && !CalendarTypes.includes(settings.type as CalendarType)) {
+      const errMsg = `${settings.type} is an invalid calendar type. It should one of ${[...CalendarTypes]}`;
+      throw new Error(errMsg);
+    }
+  }
+
   formatDateToDefaultFormat(date: string | number, format: string): string {
     let formattedDate = null;
     if (!date) {
@@ -258,7 +267,7 @@ export class NgxDatetimeRangePickerService {
       const value: Moment = format ? moment(date, format) : moment(date);
 
       if (value) {
-        const formattedDate = value.endOf(MOMENT_CONVERSION_MAP[type]).format(DEFAULT_DATE_FORMAT);
+        const formattedDate = value.endOf(MOMENT_CONVERSION_MAP[type as string]).format(DEFAULT_DATE_FORMAT);
         sanitizedDateArray.push(formattedDate);
       } else {
         console.warn(

diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -1,53 +1,68 @@
-<ul class="list-inline filter-container list-group">
-  <li class="filter">
-    <mat-form-field>
-      <mat-select [(value)]="selectedOption" (selectionChange)="onFilterChange($event, 'level')">
-        <mat-option *ngFor="let option of options" [value]="option.value"> {{ option.name }} </mat-option>
-      </mat-select>
-    </mat-form-field>
-  </li>
-  <li class="filter">
-    <ngx-datetime-range-picker
-      name="date"
-      [options]="datePickerOptions"
-      [settings]="datePickerSettings"
-      [(dateRangeModel)]="selectedOptions.date"
-      (dateRangeChanged)="onFilterChange($event, 'date')"
-      required
-    >
-    </ngx-datetime-range-picker>
-  </li>
-  <li class="filter date-range">
-    <ngx-datetime-range-picker
-      name="dateRange"
-      [options]="dateRangePickerOptions"
-      [settings]="dateRangePickerSettings"
-      [(dateRangeModel)]="selectedOptions.dateRange"
-      (dateRangeChanged)="onFilterChange($event, 'date-range')"
-      required
-    >
-    </ngx-datetime-range-picker>
-  </li>
-  <li class="filter date-array-range">
-    <ngx-datetime-range-picker
-      name="dateArrayRange"
-      [options]="dateArrayRangePickerOptions"
-      [settings]="dateArrayRangePickerSettings"
-      [(dateRangeModel)]="selectedOptions.dateArrayRange"
-      (dateRangeChanged)="onFilterChange($event, 'date-array-range')"
-      required
-    >
-    </ngx-datetime-range-picker>
-  </li>
-  <li class="filter date-time-range">
-    <ngx-datetime-range-picker
-      name="dateTimeRange"
-      [options]="dateRangePickerOptions"
-      [settings]="dateTimeRangePickerSettings"
-      [(dateRangeModel)]="selectedOptions.dateTimeRange"
-      (dateRangeChanged)="onFilterChange($event, 'date-range')"
-      required
-    >
-    </ngx-datetime-range-picker>
-  </li>
-</ul>
+<div class="date-container">
+  <mat-form-field>
+    <mat-select [(value)]="selectedOption" (selectionChange)="onFilterChange($event, 'level')">
+      <mat-option *ngFor="let option of options" [value]="option.value"> {{ option.name }} </mat-option>
+    </mat-select>
+  </mat-form-field>
+
+  <ul class="list-inline filter-container">
+    <li class="filter">
+      <ngx-datetime-range-picker
+        class="date"
+        name="date"
+        [options]="datePickerOptions"
+        [settings]="datePickerSettings"
+        [(dateRangeModel)]="selectedOptions.date"
+        (dateRangeChanged)="onFilterChange($event, 'date')"
+        required
+      >
+      </ngx-datetime-range-picker>
+      <div *ngTemplateOutlet="printSelectedDate; context: { date: selectedOptions.date }"></div>
+    </li>
+    <li class="filter">
+      <ngx-datetime-range-picker
+        name="dateRange"
+        class="date-range"
+        [options]="dateRangePickerOptions"
+        [settings]="dateRangePickerSettings"
+        [(dateRangeModel)]="selectedOptions.dateRange"
+        (dateRangeChanged)="onFilterChange($event, 'date-range')"
+        required
+      >
+      </ngx-datetime-range-picker>
+      <div *ngTemplateOutlet="printSelectedDate; context: { date: selectedOptions.dateRange }"></div>
+    </li>
+    <li class="filter">
+      <ngx-datetime-range-picker
+        name="dateArrayRange"
+        class="date-array-range"
+        [options]="dateArrayRangePickerOptions"
+        [settings]="dateArrayRangePickerSettings"
+        [(dateRangeModel)]="selectedOptions.dateArrayRange"
+        (dateRangeChanged)="onFilterChange($event, 'date-array-range')"
+        required
+      >
+      </ngx-datetime-range-picker>
+      <div *ngTemplateOutlet="printSelectedDate; context: { date: selectedOptions.dateArrayRange }"></div>
+    </li>
+    <li class="filter">
+      <ngx-datetime-range-picker
+        name="dateTimeRange"
+        class="date-time-range"
+        [options]="dateRangePickerOptions"
+        [settings]="dateTimeRangePickerSettings"
+        [(dateRangeModel)]="selectedOptions.dateTimeRange"
+        (dateRangeChanged)="onFilterChange($event, 'date-range')"
+        required
+      >
+      </ngx-datetime-range-picker>
+      <div *ngTemplateOutlet="printSelectedDate; context: { date: selectedOptions.dateTimeRange }"></div>
+    </li>
+  </ul>
+</div>
+
+<ng-template #printSelectedDate let-date="date">
+  <code class="selectedDate">
+    <pre>{{ printDate(date) }}</pre>
+  </code>
+</ng-template>