feat(date-time-condition): Added default date-time condition definition

projects/novo-elements/src/elements/date-time-picker/DateTimePicker.ts

@@ -124,6 +124,8 @@ const DATE_TIME_PICKER_VALUE_ACCESSOR = {
   `,
 })
 export class NovoDateTimePickerElement implements ControlValueAccessor {
+  @Input()
+  defaultTime: string;
   @Input()
   minYear: any;
   @Input()
@@ -195,6 +197,11 @@ export class NovoDateTimePickerElement implements ControlValueAccessor {
 
   onDateSelected(event: { month?: any; year?: any; day?: any; date?: Date }) {
     this.datePickerValue = event.date;
+    if (this.defaultTime === 'start') {
+      this.timePickerValue = new Date(this.timePickerValue.setHours(0, 0, 0));
+    } else if (this.defaultTime === 'end') {
+      this.timePickerValue = new Date(this.timePickerValue.setHours(23, 59, 59));
+    }
     this.model = this.createFullDateValue(this.datePickerValue, this.timePickerValue);
     this.setDateLabels(this.model);
     this.onSelect.emit({ date: this.model });
@@ -224,15 +231,15 @@ export class NovoDateTimePickerElement implements ControlValueAccessor {
   writeValue(model: any): void {
     this.model = model;
     if (Helpers.isEmpty(model)) {
-      this.model = new Date();
+      this.model = this.createFullDateValue(this.datePickerValue, this.timePickerValue);
     } else if (!isNaN(model)) {
       this.model = new Date(model);
     }
     this.datePickerValue = this.model;
     this.timePickerValue = this.model;
     if (Helpers.isDate(this.model)) {
-      this.setDateLabels(this.model);
-      this.setTimeLabels(this.model);
+      this.setDateLabels(this.datePickerValue);
+      this.setTimeLabels(this.timePickerValue);
     }
   }
 

projects/novo-elements/src/elements/field/formats/date-time-format.ts

@@ -160,7 +160,7 @@ export class NovoDateTimeFormatDirective extends IMaskDirective<any> implements
     const dateTime =  text.split(', ');
     const hour: string = dateTime[1].slice(0, 2);
     if (!this.military) {
-      const input = dateTime[1].substr(17, 4).replace(/\-/g, '').trim().slice(0, 2);
+      const input = dateTime[1].substr(5, 4).replace(/\-/g, '').trim().slice(0, 2);
       const timePeriod = this.imask.blocks.aa.enum.find((it) => it[0] === input[0]);
       if (this.hourOneFormatRequired(hour)) {
         (event.target as HTMLInputElement).value = `${dateTime[0]}, 01:${dateTime[1].slice(3, dateTime[1].length)}`;

projects/novo-elements/src/elements/field/toggle/picker-toggle.component.html

@@ -7,6 +7,6 @@
   [disabled]="disabled"
   (click)="togglePanel($event)"></novo-button>
 
-<novo-overlay-template [parent]="element" position="above-below">
+<novo-overlay-template [width]="width" [parent]="element" position="above-below">
   <ng-content></ng-content>
 </novo-overlay-template>

projects/novo-elements/src/elements/field/toggle/picker-toggle.component.ts

@@ -64,6 +64,9 @@ export class NovoPickerToggleElement<T = any> implements AfterContentInit, After
   /** An id to select the correct overlay.*/
   @Input() overlayId: string;
 
+  /** Width to pass to overlay.*/
+  @Input() width: string;
+
   /** Whether the toggle button is disabled. */
   @Input()
   get disabled(): boolean {

projects/novo-elements/src/elements/query-builder/condition-definitions/date-time-condition.definition.ts

@@ -0,0 +1,63 @@
+import { ChangeDetectionStrategy, Component, QueryList, ViewChildren, ViewEncapsulation } from '@angular/core';
+import { NovoPickerToggleElement } from './../../field/toggle/picker-toggle.component';
+import { AbstractConditionFieldDef } from './abstract-condition.definition';
+
+/**
+ * Most complicated of the default conditions defs, a date needs to provide a different
+ * input type depending on the operator selected.
+ */
+@Component({
+  selector: 'novo-date-time-condition-def',
+  template: `
+    <ng-container novoConditionFieldDef="DATE">
+      <novo-field *novoConditionOperatorsDef="let formGroup" [formGroup]="formGroup">
+        <novo-select [placeholder]="labels.operator" formControlName="operator" (onSelect)="onOperatorSelect(formGroup)">
+          <novo-option value="before">{{ labels.before }}</novo-option>
+          <novo-option value="after">{{ labels.after }}</novo-option>
+          <novo-option value="within">{{ labels.within }}</novo-option>
+          <novo-option value="isNull">{{ labels.isEmpty }}</novo-option>
+        </novo-select>
+      </novo-field>
+      <ng-container *novoConditionInputDef="let formGroup; viewIndex as viewIndex" [ngSwitch]="formGroup.value.operator" [formGroup]="formGroup">
+        <novo-field *novoSwitchCases="['after']">
+          <input novoInput dateTimeFormat="iso8601" [picker]="datetimepicker" formControlName="value" />
+          <novo-picker-toggle triggerOnFocus [width]="-1" [overlayId]="viewIndex" novoSuffix icon="calendar">
+            <novo-date-time-picker defaultTime="end" (onSelect)="closePanel($event, viewIndex)" #datetimepicker></novo-date-time-picker>
+          </novo-picker-toggle>
+        </novo-field>
+        <novo-field *novoSwitchCases="['before']">
+          <input novoInput dateTimeFormat="iso8601" [picker]="datetimepickerbefore" formControlName="value" />
+          <novo-picker-toggle triggerOnFocus [width]="-1" [overlayId]="viewIndex" novoSuffix icon="calendar">
+            <novo-date-time-picker defaultTime="start" (onSelect)="closePanel($event, viewIndex)" #datetimepickerbefore></novo-date-time-picker>
+          </novo-picker-toggle>
+        </novo-field>
+        <novo-field *novoSwitchCases="['within']">
+          <novo-select [placeholder]="labels.selectDateRange" formControlName="value">
+            <novo-option value="7">{{ labels.next7Days }}</novo-option>
+            <novo-option value="-7">{{ labels.past7Days }}</novo-option>
+            <novo-option value="-30">{{ labels.past30Days }}</novo-option>
+            <novo-option value="-90">{{ labels.past90Days }}</novo-option>
+          </novo-select>
+        </novo-field>
+        <novo-field *novoSwitchCases="['isNull']">
+          <novo-radio-group formControlName="value">
+            <novo-radio [value]="true">{{ labels.yes }}</novo-radio>
+            <novo-radio [value]="false">{{ labels.no }}</novo-radio>
+          </novo-radio-group>
+        </novo-field>
+      </ng-container>
+    </ng-container>
+  `,
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.Default,
+})
+export class NovoDefaultDateTimeConditionDef extends AbstractConditionFieldDef {
+  @ViewChildren(NovoPickerToggleElement)
+  overlayChildren: QueryList<NovoPickerToggleElement>;
+
+  defaultOperator = 'within';
+
+  closePanel(event, viewIndex): void {
+    const overlay = this.overlayChildren.find(item => item.overlayId === viewIndex);
+  }
+}

projects/novo-elements/src/elements/query-builder/criteria-builder/criteria-builder.component.html

@@ -9,7 +9,8 @@
   </novo-stack>
 </form>
 <novo-id-condition-def name="ID"></novo-id-condition-def>
-<novo-date-condition-def name="TIMESTAMP"></novo-date-condition-def>
+<novo-date-condition-def name="DATE"></novo-date-condition-def>
+<novo-date-time-condition-def name="TIMESTAMP"></novo-date-time-condition-def>
 <novo-string-condition-def name="STRING"></novo-string-condition-def>
 <novo-number-condition-def name="FLOAT"></novo-number-condition-def>
 <novo-number-condition-def name="INTEGER"></novo-number-condition-def>

projects/novo-elements/src/elements/query-builder/index.ts

@@ -3,6 +3,7 @@ export * from './condition-definitions/abstract-condition.definition';
 export * from './condition-definitions/address-condition.definition';
 export * from './condition-definitions/boolean-condition.definition';
 export * from './condition-definitions/date-condition.definition';
+export * from './condition-definitions/date-time-condition.definition';
 export * from './condition-definitions/id-condition.definition';
 export * from './condition-definitions/number-condition.definition';
 export * from './condition-definitions/picker-condition.definition';

projects/novo-elements/src/elements/query-builder/query-builder.module.ts

@@ -1,3 +1,4 @@
+import { NovoDateTimePickerModule } from './../date-time-picker/DateTimePicker.module';
 import { DragDropModule } from '@angular/cdk/drag-drop';
 import { CdkTableModule } from '@angular/cdk/table';
 import { CommonModule } from '@angular/common';
@@ -25,6 +26,7 @@ import { ConditionBuilderComponent, ConditionInputOutlet, ConditionOperatorOutle
 import { NovoDefaultAddressConditionDef } from './condition-definitions/address-condition.definition';
 import { NovoDefaultBooleanConditionDef } from './condition-definitions/boolean-condition.definition';
 import { NovoDefaultDateConditionDef } from './condition-definitions/date-condition.definition';
+import { NovoDefaultDateTimeConditionDef } from './condition-definitions/date-time-condition.definition';
 import { NovoDefaultIdConditionDef } from './condition-definitions/id-condition.definition';
 import { NovoDefaultNumberConditionDef } from './condition-definitions/number-condition.definition';
 import { NovoDefaultPickerConditionDef } from './condition-definitions/picker-condition.definition';
@@ -52,6 +54,7 @@ import { NovoConditionFieldDef, NovoConditionInputDef, NovoConditionOperatorsDef
     NovoLoadingModule,
     NovoCardModule,
     NovoDatePickerModule,
+    NovoDateTimePickerModule,
     NovoIconModule,
     NovoRadioModule,
     NovoSearchBoxModule,
@@ -69,6 +72,7 @@ import { NovoConditionFieldDef, NovoConditionInputDef, NovoConditionOperatorsDef
     NovoDefaultAddressConditionDef,
     NovoDefaultBooleanConditionDef,
     NovoDefaultDateConditionDef,
+    NovoDefaultDateTimeConditionDef,
     NovoConditionOperatorsDef,
     NovoConditionInputDef,
     NovoConditionFieldDef,
@@ -83,6 +87,7 @@ import { NovoConditionFieldDef, NovoConditionInputDef, NovoConditionOperatorsDef
     NovoDefaultAddressConditionDef,
     NovoDefaultBooleanConditionDef,
     NovoDefaultDateConditionDef,
+    NovoDefaultDateTimeConditionDef,
     NovoConditionOperatorsDef,
     NovoConditionInputDef,
     NovoConditionFieldDef,

projects/novo-examples/src/components/field/form-usage/form-usage-example.html

@@ -30,28 +30,6 @@
       </novo-picker-toggle>
     </novo-field>
 
-    <!-- <novo-field>
-      <novo-label>Shift Needs?</novo-label>
-      <novo-association-table>
-        <ng-container novoColumnDef="position">
-          <th mat-header-cell *novoHeaderCellDef>No.</th>
-          <td mat-cell *novoCellDef="let element">{{element.position}}</td>
-        </ng-container>
-
-        <tr>
-          <td colspan="3">
-            <novo-field>
-              <novo-label>Date of Birth</novo-label>
-              <input novoInput dateFormat [picker]="datepicker" [formControl]="dateControl" />
-              <novo-picker-toggle novoSuffix icon="calendar">
-                <novo-date-picker #datepicker></novo-date-picker>
-              </novo-picker-toggle>
-            </novo-field>
-          </td>
-        </tr>
-      </novo-association-table>
-    </novo-field> -->
-
     <button theme="primary" [disabled]="!options.valid" (click)="onSubmit(options.value)">Submit
       Form</button>
   </novo-fields>