Remove build errors

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

@@ -8,12 +8,41 @@ import { EditActionPageRoutingModule } from './edit-action-routing.module';
 
 import { EditActionPage } from './edit-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';
+import { MatMenuModule } from '@angular/material/menu';
+
 @NgModule({
   imports: [
     CommonModule,
     FormsModule,
     IonicModule,
-    EditActionPageRoutingModule
+    EditActionPageRoutingModule,
+    // Angular material
+    MatDatepickerModule,
+    MatInputModule,
+    MatNativeDateModule,
+    NgxMatDatetimePickerModule,
+    NgxMatTimepickerModule,
+    NgxMatNativeDateModule,
+    NgxMatMomentModule,
+    MatSelectModule,
+    MatButtonModule,
+    ReactiveFormsModule,
+    MatDialogModule,
   ],
   exports: [EditActionPage],
   declarations: [EditActionPage]

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

@@ -1,7 +1,7 @@
 <ion-header class="ion-no-border pt-20 px-20">
   <div class="title-content d-flex align-center justify-space-between ">
     <div class="div-title">
-      <ion-label class="title"> Editar acção presidencial</ion-label>
+      <ion-label class="title">123 Editar acção presidencial</ion-label>
     </div>
     <!-- <div class="actionType">
       <ion-segment [(ngModel)]="segment" (ionChange)="segmentChanged($event)">
@@ -30,15 +30,36 @@
           <ion-icon slot="start" src="assets/images/icons-calendar.svg"></ion-icon>
         </div>
         <div class="ion-input-class flex-grow-1">
-          <ion-datetime 
+          <ion-datetime
+            class="d-block d-md-none"
             [(ngModel)]="folder.DateBegin"
             placeholder="Início"
             displayFormat="D MMM YYYY H:mm"
             minuteValues="0,15,30,45"
             monthShortNames="Jan, Fev, Mar, Abr, Mai, Jun, Jul, Aug, Sep, Out, Nov, Dez"
             min="2018" 
-            max="2025">
+            max="2025"
+            class="d-block d-md-none">
           </ion-datetime>
+
+
+          <mat-form-field class="width-100 date-hour-picker d-none  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>
@@ -50,7 +71,7 @@
         </div>
         <div class="ion-input-class d-flex flex-grow-1">
           <ion-datetime 
-            class="flex-grow-1"
+            class="flex-grow-1 d-block d-md-none"
             [(ngModel)]="folder.DateEnd"
             placeholder="Fim"
             displayFormat="D MMM YYYY H:mm"
@@ -59,6 +80,23 @@
             min="2018" 
             max="2022">
           </ion-datetime>
+
+          <mat-form-field class="width-100 date-hour-picker d-none 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/edit-action/edit-action.page.ts

@@ -1,4 +1,6 @@
 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { FormControl, FormGroup, Validators } from '@angular/forms';
+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';
@@ -10,6 +12,24 @@ import { ToastService } from 'src/app/services/toast.service';
 })
 export class EditActionPage implements OnInit {
 
+  Form: FormGroup;
+  validateFrom = false
+
+  
+  public date: any;
+  public disabled = false;
+  public showSpinners = true;
+  public showSeconds = false;
+  public touchUi = false;
+  public enableMeridian = false;
+  public minDate: any;
+  public maxDate: any;
+  public stepHour = 1;
+  public stepMinute = 5;
+  public stepSecond = 5;
+  public dateControlStart = new FormControl(moment("DD MM YYYY hh"));
+  public dateControlEnd = new FormControl(moment("DD MM YYYY hh"));
+  
   folder: PublicationFolder;
   @Input() folderId: string;
   @Output() closeDesktopComponent= new EventEmitter<any>();
@@ -26,16 +46,41 @@ export class EditActionPage implements OnInit {
     this.getPublicationDetail();
   }
 
-  close(){
+  close() {
     this.closeDesktopComponent.emit();
   }
 
-  getPublicationDetail(){
+  getPublicationDetail() {
     this.publicationsService.GetPresidentialAction(this.folderId).subscribe(res=>{
       this.folder = res; 
     });
   }
 
+  get dateValid() {
+    if (window.innerWidth <= 800) {
+      return this.folder.DateBegin < this.folder.DateEnd? ['ok']: []
+    } else {
+      return ['ok']
+    }
+  }
+
+  runValidation() {
+    this.validateFrom  = true
+  }
+
+  injectValidation() {
+
+    this.Form = new FormGroup({
+      Subject: new FormControl(this.folder.Description, [
+        Validators.required,
+        // Validators.minLength(4)
+      ]),
+      Date: new FormControl(this.dateValid, [
+        Validators.required
+      ]),
+    })
+  }
+
   async save() {
     let body = {
       ProcessId: this.folderId,
@@ -55,7 +100,5 @@ export class EditActionPage implements OnInit {
     } catch (error) {
       this.toastService.badRequest('Não foi possivel atualizar a acção presidencial')
     }
-
   }
-
 }