From 5d565b556707484df31ff8abce8df2a364f9678a Mon Sep 17 00:00:00 2001
From: Paulo Pinto <paulo.pinto@equilibrium.co.ao>
Date: Wed, 2 Sep 2020 12:45:11 +0100
Subject: [PATCH] New Event Fields Control

---
 src/app/pages/cal-modal/cal-modal.module.ts   |   3 +-
 src/app/pages/cal-modal/cal-modal.page.html   | 113 +++++++++++-------
 src/app/pages/cal-modal/cal-modal.page.scss   |   7 +-
 src/app/pages/cal-modal/cal-modal.page.ts     |  31 ++++-
 .../event-detail/event-detail.page.html       |   4 +-
 5 files changed, 108 insertions(+), 50 deletions(-)

diff --git a/src/app/pages/cal-modal/cal-modal.module.ts b/src/app/pages/cal-modal/cal-modal.module.ts
index c20137f89..fb8f9ea1e 100644
--- a/src/app/pages/cal-modal/cal-modal.module.ts
+++ b/src/app/pages/cal-modal/cal-modal.module.ts
@@ -1,6 +1,6 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { FormsModule } from '@angular/forms';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 
 import { IonicModule } from '@ionic/angular';
 
@@ -15,6 +15,7 @@ import { NgCalendarModule } from 'ionic2-calendar';
     FormsModule,
     IonicModule,
     CalModalPageRoutingModule,
+    ReactiveFormsModule,
     NgCalendarModule
   ],
   declarations: [CalModalPage]
diff --git a/src/app/pages/cal-modal/cal-modal.page.html b/src/app/pages/cal-modal/cal-modal.page.html
index ae29f4ead..1d82ebc80 100644
--- a/src/app/pages/cal-modal/cal-modal.page.html
+++ b/src/app/pages/cal-modal/cal-modal.page.html
@@ -11,46 +11,79 @@
 
 <ion-content>
   <div class="div-ion-content">
-  <ion-item>
-    <ion-label position="floating">Assunto</ion-label>
-    <ion-input type="text" [(ngModel)]="postEvent.Subject"></ion-input>
-  </ion-item>
-  <ion-item>
-    <ion-label position="floating">Descrição</ion-label>
-    <ion-input type="text" [(ngModel)]="postEvent.Body.Text"></ion-input>
-  </ion-item>
-  <ion-item>
-    <ion-label position="floating">Localização</ion-label>
-    <ion-input type="text" [(ngModel)]="postEvent.Location"></ion-input>
-  </ion-item>
-  <ion-item>
-    <ion-label position="floating">Selecione a Agenda</ion-label>
-    <ion-select  [(ngModel)]="postEvent.CalendarName" interface="action-sheet" class="custom-options" Cancel-text="Cancelar">
-      <ion-select-option Pessoal="Reunião">Pessoal</ion-select-option>
-      <ion-select-option Oficial="Viagem">Oficial</ion-select-option>
-    </ion-select>
-  </ion-item>
-  <ion-item>
-    <ion-label position="floating">Tipo de evento</ion-label>
-    <ion-select  [(ngModel)]="postEvent.EventType" interface="action-sheet" class="custom-options" Cancel-text="Cancelar">
-      <ion-select-option value="Reunião">Reunião</ion-select-option>
-      <ion-select-option value="Viagem">Viagem</ion-select-option>
-      <ion-select-option value="Conferência">Conferência</ion-select-option>
-      <ion-select-option value="Encontro">Encontro</ion-select-option>
-    </ion-select>
-  </ion-item>
-  <ion-item>
-    <ion-label position="floating">Data Início</ion-label>
-    <ion-datetime [(ngModel)]="postEvent.StartDate" min="2020" max="2100"
-      displayFormat="D MMM YYYY H:mm"
-      monthShortNames="Jan, Fev, Mar, Abr, Mai, Jun, Jul, Aug, Sep, Out, Nov, Dez"></ion-datetime>
-  </ion-item>
-  <ion-item>
-    <ion-label position="floating">Data Fim</ion-label>
-    <ion-datetime [(ngModel)]="postEvent.EndDate" min="2020" max="2100"
-      displayFormat="D MMM YYYY H:mm"
-      monthShortNames="Jan, Fev, Mar, Abr, Mai, Jun, Jul, Aug, Sep, Out, Nov, Dez"></ion-datetime>
-  </ion-item>
+  <form [formGroup]="ionicForm" novalidate>
+    <ion-item>
+      <ion-label position="floating">Assunto</ion-label>
+      <ion-input formControlName="subject" type="text" [(ngModel)]="postEvent.Subject" required></ion-input>
+    </ion-item>
+    <!-- Error messages -->
+    <span class="error ion-padding" *ngIf="errorControl.subject.errors?.required">
+      Campo obrigatório
+    </span>          
+    <ion-item>
+      <ion-label position="floating">Descrição</ion-label>
+      <ion-input formControlName="description" type="text" [(ngModel)]="postEvent.Body.Text" required></ion-input>
+    </ion-item>
+    <!-- Error messages -->
+    <span class="error ion-padding" *ngIf="errorControl.startdate.errors?.required">
+      Campo obrigatório
+    </span> 
+    <ion-item>
+      <ion-label position="floating">Localização</ion-label>
+      <ion-input formControlName="location" type="text" [(ngModel)]="postEvent.Location" required></ion-input>
+    </ion-item>
+    <!-- Error messages -->
+    <span class="error ion-padding" *ngIf="errorControl.startdate.errors?.required">
+      Campo obrigatório
+    </span> 
+    <ion-item>
+      <ion-label position="floating">Selecione a Agenda</ion-label>
+      <ion-select formControlName="agenda" [(ngModel)]="postEvent.CalendarName" interface="action-sheet" class="custom-options" Cancel-text="Cancelar" required>
+        <ion-select-option Pessoal="Reunião">Pessoal</ion-select-option>
+        <ion-select-option Oficial="Viagem">Oficial</ion-select-option>
+      </ion-select>
+    </ion-item>
+    <!-- Error messages -->
+    <span class="error ion-padding" *ngIf="errorControl.agenda.errors?.required">
+      Campo obrigatório
+    </span> 
+    <ion-item>
+      <ion-label position="floating">Tipo de evento</ion-label>
+      <ion-select formControlName="eventtype" [(ngModel)]="postEvent.EventType" interface="action-sheet" class="custom-options" Cancel-text="Cancelar" required>
+        <ion-select-option value="Reunião">Reunião</ion-select-option>
+        <ion-select-option value="Viagem">Viagem</ion-select-option>
+        <ion-select-option value="Conferência">Conferência</ion-select-option>
+        <ion-select-option value="Encontro">Encontro</ion-select-option>
+      </ion-select>
+    </ion-item>
+    <!-- Error messages -->
+    <span class="error ion-padding" *ngIf="errorControl.startdate.errors?.required">
+      Campo obrigatório
+    </span> 
+    <ion-item>
+      <ion-label position="floating">Data Início</ion-label>
+      <ion-datetime formControlName="startdate" [(ngModel)]="postEvent.StartDate" min="2020" max="2100"
+        displayFormat="D MMM YYYY H:mm" minuteValues="0,15,30,45"
+        monthShortNames="Jan, Fev, Mar, Abr, Mai, Jun, Jul, Aug, Sep, Out, Nov, Dez"
+        required>
+      </ion-datetime>
+    </ion-item>
+    <!-- Error messages -->
+    <span class="error ion-padding" *ngIf="errorControl.startdate.errors?.required">
+      Campo obrigatório
+    </span> 
+    <ion-item>
+      <ion-label position="floating">Data Fim</ion-label>
+      <ion-datetime formControlName="enddate" [(ngModel)]="postEvent.EndDate" min="2020" max="2100"
+        displayFormat="D MMM YYYY H:mm" minuteValues="0,15,30,45"
+        monthShortNames="Jan, Fev, Mar, Abr, Mai, Jun, Jul, Aug, Sep, Out, Nov, Dez"
+        required></ion-datetime>
+    </ion-item>
+    <!-- Error messages -->
+    <span class="error ion-padding" *ngIf="errorControl.enddate.errors?.required">
+      Campo obrigatório
+    </span> 
+  </form>
   <div class="div-attach">
     <ion-item lines="none">
       <ion-icon name="add" slot="end" (click)="openAttendees()"></ion-icon>
diff --git a/src/app/pages/cal-modal/cal-modal.page.scss b/src/app/pages/cal-modal/cal-modal.page.scss
index 2e6a2e951..204177c02 100644
--- a/src/app/pages/cal-modal/cal-modal.page.scss
+++ b/src/app/pages/cal-modal/cal-modal.page.scss
@@ -14,7 +14,12 @@
     margin: 15px 0 0 0;
     padding: 15px;
 }
-
+.error{
+    color:red;
+    font-size: 12px;
+    font-weight: bold;
+    padding-bottom: 20px;
+  }
 /* ion-item{
     display: block;
     border: 1px solid red;
diff --git a/src/app/pages/cal-modal/cal-modal.page.ts b/src/app/pages/cal-modal/cal-modal.page.ts
index 71568bf16..a7a9e512c 100644
--- a/src/app/pages/cal-modal/cal-modal.page.ts
+++ b/src/app/pages/cal-modal/cal-modal.page.ts
@@ -9,6 +9,7 @@ import { AttendeesPage } from 'src/app/pages/events/attendees/attendees.page';
 import { AttendeeModalPage } from '../events/attendee-modal/attendee-modal.page';
 import { EventPerson } from 'src/app/models/eventperson.model';
 import { AlertService } from 'src/app/services/alert.service';
+import { FormGroup, FormBuilder, Validators } from "@angular/forms";
 
 @Component({
   selector: 'app-cal-modal',
@@ -29,13 +30,28 @@ export class CalModalPage implements OnInit {
   eventAttendees: EventPerson[];
   segment:string = "true";
 
-  constructor(private modalCtrl: ModalController, private eventService: EventsService, private alertController:AlertService) { 
-      this.postEvent = new Event();
-      this.postEvent.Body = { BodyType : "1", Text : ""};
-     
+  ionicForm: FormGroup;
+  isSubmitted = false;
+
+  constructor(public formBuilder: FormBuilder, private modalCtrl: ModalController, private eventService: EventsService, private alertController:AlertService) { 
+    this.postEvent = new Event();
+    this.postEvent.Body = { BodyType : "1", Text : ""};
   }
 
   ngOnInit() {
+    this.ionicForm = this.formBuilder.group({
+      subject: ['', [Validators.required]],
+      agenda: ['', [Validators.required]],
+      startdate: ['', [Validators.required]],
+      enddate: ['', [Validators.required]],
+      description: ['', [Validators.required]],
+      location: ['', [Validators.required]],
+      eventtype: ['', [Validators.required]]
+    })
+  }
+
+  get errorControl() {
+    return this.ionicForm.controls;
   }
 
   ngAfterViewInit(): void {
@@ -45,8 +61,11 @@ export class CalModalPage implements OnInit {
   }
 
   save(){
-    this.eventService.postEvent(this.postEvent, this.postEvent.CalendarName).subscribe();
-    this.modalCtrl.dismiss(this.postEvent);
+    if (this.ionicForm.valid) 
+    {
+      this.eventService.postEvent(this.postEvent, this.postEvent.CalendarName).subscribe();
+      this.modalCtrl.dismiss(this.postEvent);
+    }
   }
 
   onViewTitleChanged(title){
diff --git a/src/app/pages/events/event-detail/event-detail.page.html b/src/app/pages/events/event-detail/event-detail.page.html
index 58a28cbfb..6b9c3e9c4 100644
--- a/src/app/pages/events/event-detail/event-detail.page.html
+++ b/src/app/pages/events/event-detail/event-detail.page.html
@@ -53,13 +53,13 @@
         <ion-item>
           <ion-label position="stacked">Data Início</ion-label>
           <ion-datetime value="{{loadedEvent.StartDate}}" [(ngModel)]="loadedEvent.StartDate" min="2020" max="2100"
-            displayFormat="D MMM YYYY H:mm"
+            displayFormat="D MMM YYYY H:mm" minuteValues="0,15,30,45"
             monthShortNames="Jan, Fev, Mar, Abr, Mai, Jun, Jul, Aug, Sep, Out, Nov, Dez"></ion-datetime>
         </ion-item>
         <ion-item>
             <ion-label position="stacked">Data Fim</ion-label>
             <ion-datetime value="{{loadedEvent.EndDate}}" [(ngModel)]="loadedEvent.EndDate" min="2020" max="2100"
-              displayFormat="D MMM YYYY HH:mm"
+              displayFormat="D MMM YYYY HH:mm" minuteValues="0,15,30,45"
               monthShortNames="Jan, Fev, Mar, Abr, Mai, Jun, Jul, Aug, Sep, Out, Nov, Dez"></ion-datetime>
         </ion-item>
           <!-- <div class="div-card-button">