Datatables enhacements to support products (#1641)

Co-authored-by: Jose Alberto Hernandez <alberto@MacBook-Pro.local>

src/app/shared/form-dialog/formfield/formfield.component.html

@@ -1,7 +1,7 @@
 <div [formGroup]="form" fxFlexFill>
 
   <div *ngIf="formfield.controlType==='input' || formfield.controlType==='select'" fxFlexFill>
-    
+
     <mat-form-field fxFlexFill>
 
       <mat-label>{{ formfield.label }}</mat-label>
@@ -26,7 +26,7 @@
 
   <mat-form-field fxFlexFill *ngIf="formfield.controlType==='datepicker'" (click)="datePicker.open()">
     <mat-label>{{ formfield.label }}</mat-label>
-    <input matInput [matDatepicker]="datePicker" [min]="formfield.minDate" [max]="formfield.maxDate"  
+    <input matInput [matDatepicker]="datePicker" [min]="formfield.minDate" [max]="formfield.maxDate"
       [formControlName]="formfield.controlName" [required]="formfield.required">
     <mat-datepicker-toggle matSuffix [for]="datePicker"></mat-datepicker-toggle>
     <mat-datepicker #datePicker></mat-datepicker>
@@ -35,6 +35,17 @@
     </mat-error>
   </mat-form-field>
 
+  <mat-form-field fxFlexFill *ngIf="formfield.controlType==='datetimepicker'" (click)="datePicker.open()">
+    <mat-label>{{ formfield.label }}</mat-label>
+    <input matInput [ngxMatDatetimePicker]="datetimePicker" [min]="formfield.minDate" [max]="formfield.maxDate"
+      [formControlName]="formfield.controlName" [required]="formfield.required">
+    <mat-datepicker-toggle matSuffix [for]="datetimePicker"></mat-datepicker-toggle>
+    <ngx-mat-datetime-picker #datetimePicker [enableMeridian]="true"></ngx-mat-datetime-picker>
+    <mat-error *ngIf="form.controls[formfield.controlName].hasError('required')">
+      {{ formfield.label }} is <strong>required</strong>
+    </mat-error>
+  </mat-form-field>
+
   <mat-checkbox *ngIf="formfield.controlType==='checkbox'" labelPosition="before" [checked]="formfield.value"
     [formControlName]="formfield.controlName" [required]="formfield.required">
     {{ formfield.label }}

src/app/shared/form-dialog/formfield/model/datetimepicker-base.ts

@@ -0,0 +1,15 @@
+import { FormfieldBase } from './formfield-base';
+
+export class DateTimepickerBase extends FormfieldBase {
+
+  controlType = 'datetimepicker';
+  minDate: Date;
+  maxDate: Date;
+
+  constructor(options: {} = {}) {
+    super(options);
+    this.minDate = options['minDate'] || new Date(2000, 0, 1);
+    this.maxDate = options['maxDate'] || new Date();
+  }
+
+}

src/app/shared/form-dialog/formfield/model/formfield-base.ts

@@ -3,7 +3,7 @@ export class FormfieldBase {
   controlType: string;
   controlName: string;
   label: string;
-  value: string;
+  value: any;
   required: boolean;
   order: number;
 
@@ -11,7 +11,7 @@ export class FormfieldBase {
               controlType?: string,
               controlName?: string,
               label?: string,
-              value?: string,
+              value?: any,
               required?: boolean,
               order?: number
     } = {}) {