Improve publication forms

src/app/shared/publication/new-action/new-action.module.ts

@@ -8,12 +8,40 @@ import { NewActionPageRoutingModule } from './new-action-routing.module';
 
 import { NewActionPage } from './new-action.page';
 
+
+import { MatNativeDateModule } from '@angular/material/core';
+import {
+  NgxMatDatetimePickerModule,
+  NgxMatNativeDateModule,
+  NgxMatTimepickerModule
+} from '@angular-material-components/datetime-picker';
+import { ReactiveFormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MatSelectModule } from '@angular/material/select';
+import { NgxMatMomentModule } from '@angular-material-components/moment-adapter';
+import { MAT_DATE_LOCALE } from '@angular/material/core';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { MatInputModule } from '@angular/material/input';
+import { MatDialogModule } from '@angular/material/dialog';
+
 @NgModule({
   imports: [
     CommonModule,
     FormsModule,
     IonicModule,
-    NewActionPageRoutingModule
+    NewActionPageRoutingModule,
+    // Angular material
+    MatDatepickerModule,
+    MatInputModule,
+    MatNativeDateModule,
+    NgxMatDatetimePickerModule,
+    NgxMatTimepickerModule,
+    NgxMatNativeDateModule,
+    NgxMatMomentModule,
+    MatSelectModule,
+    MatButtonModule,
+    ReactiveFormsModule,
+    MatDialogModule,
   ],
   exports: [NewActionPage],
   declarations: [NewActionPage]

src/app/shared/publication/new-action/new-action.page.html

@@ -20,7 +20,7 @@
 <ion-content>
   <div class="content-container">
 
-    <div class="ion-item-container">
+    <div class="ion-item-container" [class.input-error]="Form?.get('Subject')?.invalid && validateFrom ">
       <ion-input [(ngModel)]="folder.Description" placeholder="Assunto" ></ion-input>
     </div>
 
@@ -31,6 +31,7 @@
         </div>
         <div class="ion-input-class flex-grow-1">
           <ion-datetime 
+          class="d-block d-md-none"
             [(ngModel)]="folder.DateBegin"
             placeholder="Início"
             displayFormat="D MMM YYYY H:mm"
@@ -39,6 +40,25 @@
             min="2018" 
             max="2025">
           </ion-datetime>
+
+
+          <mat-form-field class="width-100 date-hour-picker  d-md-block">
+            <input matInput [ngxMatDatetimePicker]="picker1" 
+              placeholder="Choose a date*" 
+              [formControl]="dateControlStart"
+              [min]="minDate"
+              [disabled]="disabled"
+            >
+            <mat-datepicker-toggle id="new-inicio" matSuffix [for]="picker1"></mat-datepicker-toggle>
+            <ngx-mat-datetime-picker #picker1 
+              [showSpinners]="showSpinners" 
+              [showSeconds]="showSeconds"
+              [stepHour]="stepHour" [stepMinute]="stepMinute" 
+              [stepSecond]="stepSecond"
+              [touchUi]="touchUi">
+            </ngx-mat-datetime-picker>
+          </mat-form-field>
+
         </div>
       </div>
     </div>
@@ -50,7 +70,7 @@
         </div>
         <div class="ion-input-class d-flex flex-grow-1">
           <ion-datetime 
-            class="flex-grow-1"
+            class="flex-grow-1  d-md-none"
             [(ngModel)]="folder.DateEnd"
             placeholder="Fim"
             displayFormat="D MMM YYYY H:mm"
@@ -59,6 +79,24 @@
             min="2018" 
             max="2025">
           </ion-datetime>
+
+
+          <mat-form-field class="width-100 date-hour-picker  d-md-block">
+            <input matInput [ngxMatDatetimePicker]="picker1" 
+              placeholder="Choose a date*" 
+              [formControl]="dateControlEnd"
+              [min]="minDate"
+              [disabled]="disabled"
+            >
+            <mat-datepicker-toggle id="new-inicio" matSuffix [for]="picker1"></mat-datepicker-toggle>
+            <ngx-mat-datetime-picker #picker1 
+              [showSpinners]="showSpinners" 
+              [showSeconds]="showSeconds"
+              [stepHour]="stepHour" [stepMinute]="stepMinute" 
+              [stepSecond]="stepSecond"
+              [touchUi]="touchUi">
+            </ngx-mat-datetime-picker>
+          </mat-form-field>
         </div>
       </div>
     </div>

src/app/shared/publication/new-action/new-action.page.ts

@@ -1,6 +1,7 @@
 import { Component, EventEmitter, OnInit, Output } from '@angular/core';
 import { FormControl, FormGroup, Validators } from '@angular/forms';
 import { AnimationController, ModalController } from '@ionic/angular';
+import * as moment from 'moment';
 import { PublicationFolder } from 'src/app/models/publicationfolder';
 import { PublicationsService } from 'src/app/services/publications.service';
 import { ToastService } from 'src/app/services/toast.service';
@@ -16,10 +17,15 @@ export class NewActionPage implements OnInit {
 
   folder: PublicationFolder;
   segment:string;
-
+  public minDate = new Date();
+  public endMinDate = new Date(new Date().getTime() + 15 * 60000);
   
   Form: FormGroup;
   validateFrom = false
+
+  public dateControlStart = new FormControl(moment("DD MM YYYY hh"));
+  public dateControlEnd = new FormControl(moment("DD MM YYYY hh"));
+
   
   @Output() closeDesktopComponent= new EventEmitter<any>();
 
@@ -28,6 +34,18 @@ export class NewActionPage implements OnInit {
     private toastService: ToastService
   ) { 
     this.folder = new PublicationFolder();
+
+    this.dateControlStart = new FormControl(moment(new Date()));
+    this.dateControlEnd = new FormControl(moment(new Date(new Date().getTime() + 15 * 60000)));
+
+  }
+
+  get dateStart () {
+    return this.dateControlStart.value
+  }
+
+  get dateEnd () {
+    return this.dateControlEnd.value
   }
 
   ngOnInit() {
@@ -55,8 +73,13 @@ export class NewActionPage implements OnInit {
   }
 
 
-
   async save() {
+
+    this.injectValidation()
+    this.runValidation()
+
+    if(this.Form.invalid) return false
+
     this.folder = {
       ProcessId: null,
       Description: this.folder.Description,

src/app/shared/publication/new-publication/new-publication.page.html

@@ -12,15 +12,13 @@
 <ion-content>
 <div class="content-container">
 
-  <div  *ngIf="publicationType!='1'" class="ion-item-container">
+  <div  *ngIf="publicationType!='1'" class="ion-item-container" [class.input-error]="Form?.get('Subject')?.invalid && validateFrom ">
     <ion-input [(ngModel)]="pub.Title" name="title" placeholder="Título" ></ion-input>
   </div>
 
- 
-
   <div *ngIf="publicationType!='1'" class="container-div pb-20">
     <div class="ion-item-class-2 d-flex">
-      <div class="ion-icon-class">
+      <div class="ion-icon-class" >
         <ion-icon slot="start" src="assets/images/icons-description.svg"></ion-icon>
       </div>
       <div class="ion-textarea-class flex-grow-1">

src/app/shared/publication/new-publication/new-publication.page.ts

@@ -14,6 +14,7 @@ import { PhotoService } from 'src/app/services/photo.service';
 //Cordova
 import { Camera, CameraOptions } from '@ionic-native/camera/ngx';
 import { ToastService } from 'src/app/services/toast.service';
+import { FormControl, FormGroup, Validators } from '@angular/forms';
 
 @Component({
   selector: 'app-new-publication',
@@ -30,6 +31,8 @@ export class NewPublicationPage implements OnInit {
 
   Defaultimage:any = '';
 
+  Form: FormGroup;
+  validateFrom = false
 
   photo: SafeResourceUrl;
 
@@ -134,7 +137,30 @@ export class NewPublicationPage implements OnInit {
      });
   }
 
+
+
+  runValidation() {
+    this.validateFrom  = true
+  }
+
+  injectValidation() {
+
+    this.Form = new FormGroup({
+      Subject: new FormControl(this.pub.Title, [
+        Validators.required,
+        // Validators.minLength(4)
+      ])
+    })
+  }
+
+
   async save(){
+
+    this.injectValidation()
+    this.runValidation()
+
+    if(this.Form.invalid) return false
+
     if(this.publicationType == '3'){
        
       if(this.capturedImage != '') {