Add angular material inputs

src/app/shared/agenda/edit-event/edit-event.module.ts

@@ -1,19 +1,47 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
-
 import { IonicModule } from '@ionic/angular';
-
 import { EditEventPageRoutingModule } from './edit-event-routing.module';
-
 import { EditEventPage } from './edit-event.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,
-    EditEventPageRoutingModule
+    EditEventPageRoutingModule,
+    // Angular material
+    MatDatepickerModule,
+    MatInputModule,
+    MatNativeDateModule,
+    NgxMatDatetimePickerModule,
+    NgxMatTimepickerModule,
+    NgxMatNativeDateModule,
+    NgxMatMomentModule,
+    MatSelectModule,
+    MatButtonModule,
+    ReactiveFormsModule,
+    MatDialogModule,
+  ],
+  providers: [
+    { provide: MAT_DATE_LOCALE, useValue: 'pt' },
   ],
   declarations: [EditEventPage],
   exports: [EditEventPage]

src/app/shared/agenda/edit-event/edit-event.page.html

@@ -6,6 +6,7 @@
           <ion-label class="title">Editar Evento</ion-label>
         </div>
       </div>
+      <ion-progress-bar class="calendar-progress-bar" type="indeterminate" *ngIf="showLoader"></ion-progress-bar>
     </div>
   </ion-toolbar>
 </ion-header>
@@ -38,14 +39,18 @@
           <ion-icon slot="start" src="assets/images/icons-calendar.svg"></ion-icon>
         </div>
         <div class="ion-input-class flex-grow-1">
-          <ion-select disabled  placeholder="Selecione agenda"
-          selectedText="{{postEvent.CalendarName}}" 
-          [(ngModel)]="postEvent.CalendarName" 
-          interface="action-sheet" Cancel-text="Cancelar" 
-          required>
-            <ion-select-option value="Oficial">Oficial</ion-select-option>
-            <ion-select-option value="Pessoal">Pessoal</ion-select-option>
-          </ion-select>
+
+          <mat-form-field  class="width-100" placeholder="Selecione agenda">
+            <mat-select [(value)]="postEvent.CalendarName" >
+              <mat-option value="Oficial">
+                Oficial
+              </mat-option>
+              <mat-option value="Pessoal">
+                Pessoal
+              </mat-option>
+            </mat-select>
+          </mat-form-field>
+
         </div>
       </div>
     </div>
@@ -56,16 +61,25 @@
           <ion-icon slot="start" src="assets/images/icons-calendar.svg"></ion-icon>
         </div>
         <div class="ion-input-class flex-grow-1">
-          <ion-select  placeholder="Selecione tipo" 
-          [(ngModel)]="postEvent.Categories[0]"
-          selectedText="{{postEvent.Categories[0]}}" 
-          interface="action-sheet" 
-          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>
+
+          <mat-form-field class="width-100" placeholder="Sample Type" required>
+            <!-- <input matInput type="text" > -->
+            <mat-select matInput [(value)]="postEvent.Categories[0]" >
+              <mat-option value="Reunião">
+                Reunião
+              </mat-option>
+              <mat-option value="Viagem">
+                Viagem
+              </mat-option>
+              <mat-option value="Conferência">
+                Conferência
+              </mat-option>
+              <mat-option value="Encontro">
+                Encontro
+              </mat-option>
+            </mat-select>
+          </mat-form-field>
+
         </div>
       </div>
     </div>
@@ -76,38 +90,54 @@
           <ion-icon slot="start" src="assets/images/icons-calendar.svg"></ion-icon>
         </div>
         <div class="ion-input-class flex-grow-1">
-          <ion-datetime 
-            placeholder="Início"
-            [(ngModel)]="postEvent.StartDate"
-            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="2022" 
-          >
-          </ion-datetime>
-          <!-- <ion-input placeholder="Data início" [(ngModel)]="postData.StartDate"></ion-input> -->
+
+          <mat-form-field class="date-hour-picker">
+            <input matInput [ngxMatDatetimePicker]="picker1" 
+              placeholder="Choose a date" 
+              [formControl]="dateControlStart"
+              [min]="minDate" [max]="maxDate" 
+              [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"
+              [color]="color">
+            </ngx-mat-datetime-picker>
+          </mat-form-field>
+
         </div>
       </div>
     </div>
     
     <div class="container-div">
-      <div class="ion-item-class-2 width-100 d-flex">
+      <div  class="ion-item-class-2 width-100 d-flex">
         <div class="ion-icon-class">
           <ion-icon slot="start" src="assets/images/icons-calendar.svg"></ion-icon>
         </div>
         <div class="ion-input-class flex-grow-1">
-          <ion-datetime 
-            placeholder="Fim"
-            [(ngModel)]="postEvent.EndDate"
-            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="2022" 
-          >
-          </ion-datetime>
-          <!-- <ion-input placeholder="Data fim" [(ngModel)]="postData.EndDate"></ion-input> -->
+
+          <mat-form-field class="date-hour-picker">
+            <input matInput [ngxMatDatetimePicker]="fim" 
+              placeholder="Choose a date" 
+              [formControl]="dateControlEnd"
+              [min]="minDate" [max]="maxDate" 
+              [disabled]="disabled"
+            >
+            <mat-datepicker-toggle id="new-fim" matSuffix [for]="fim"></mat-datepicker-toggle>
+            <ngx-mat-datetime-picker #fim 
+              [showSpinners]="showSpinners" 
+              [showSeconds]="showSeconds"
+              [stepHour]="stepHour" [stepMinute]="stepMinute" 
+              [stepSecond]="stepSecond"
+              [touchUi]="touchUi"
+              [color]="color">
+            </ngx-mat-datetime-picker>
+          </mat-form-field>
+
         </div>
       </div>
     </div>
@@ -118,14 +148,18 @@
           <ion-icon slot="start" src="assets/images/icons-refresh.svg"></ion-icon>
         </div>
         <div class="ion-input-class flex-grow-1">
-          <ion-select placeholder="Selecione repetição" 
-          [(ngModel)]="postEvent.IsRecurring"
-          selectedText="{{isRecurring}}" 
-          interface="action-sheet" 
-          Cancel-text="Cancelar" required>
-            <ion-select-option value="false">Não se repete</ion-select-option>
-            <ion-select-option value="true">Repete</ion-select-option>
-          </ion-select>
+
+          <mat-form-field  class="width-100" placeholder="Selecione repetição" value="false" interface="action-sheet" required>
+            <mat-select [(ngModel)]="postEvent.IsRecurring">
+              <mat-option value="false">
+                Não se repete
+              </mat-option>
+              <mat-option value="true">
+                Repete
+              </mat-option>
+            </mat-select>
+          </mat-form-field>
+
         </div>
       </div>
     </div>

src/app/shared/agenda/edit-event/edit-event.page.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+import { Component, OnInit, Input, Output, EventEmitter, ViewChild } from '@angular/core';
 import { ModalController } from '@ionic/angular';
 import { EventBody } from 'src/app/models/eventbody.model';
 import { EventPerson } from 'src/app/models/eventperson.model';
@@ -9,6 +9,10 @@ import { removeDuplicate } from 'src/plugin/removeDuplicate.js'
 import { SearchPage } from 'src/app/pages/search/search.page';
 import { AttachmentsService } from 'src/app/services/attachments.service';
 import { Attachment } from 'src/app/models/attachment.model';
+import { ToastService } from 'src/app/services/toast.service';
+import { FormControl } from '@angular/forms';
+import * as moment from 'moment';
+
 @Component({
   selector: 'app-edit-event',
   templateUrl: './edit-event.page.html',
@@ -24,9 +28,21 @@ export class EditEventPage implements OnInit {
   eventBody: EventBody;
   segment:string = "true";
   eventAttendees: EventPerson[];
-  minDate: string;
+  // minDate: string;
   loadedEventAttachments: Attachment[];
 
+  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;
+
   @Input() taskParticipants: EventPerson[];
   @Input() taskParticipantsCc: EventPerson[];
   @Input() profile:string;
@@ -41,15 +57,41 @@ export class EditEventPage implements OnInit {
   @Output() setIntervenientCC = new EventEmitter<any>();
   @Output() clearPostEvent = new EventEmitter<any>();
 
+  public dateControlStart = new FormControl(moment("DD MM YYYY hh"));
+  public dateControlEnd = new FormControl(moment("DD MM YYYY hh"));
+
+  showLoader = false
+
+  get dateStart () {
+    return this.dateControlStart.value
+  }
+
+  get dateEnd () {
+    return this.dateControlEnd.value
+  }
+
+  @ViewChild('picker') picker: any;
+  @ViewChild('fim') fim: any;
+  @ViewChild('inicio') inicio: any;
+  @ViewChild('picker1') picker1: any;
+
+  public options = [
+    { value: true, label: 'True' },
+    { value: false, label: 'False' }
+  ];
+
+  public listColors = ['primary', 'accent', 'warn'];
+  public stepHours = [1, 2, 3, 4, 5];
+  public stepMinutes = [1, 5, 10, 15, 20, 25];
+  public stepSeconds = [1, 5, 10, 15, 20, 25];
+
+
   constructor(
     private modalController: ModalController,
     private eventsService: EventsService,
     public alertController: AlertController,
     private attachmentsService: AttachmentsService,
-    
-  ) {
-  
-
+    private toastService: ToastService ) {
   }
 
   ngOnInit() {
@@ -94,11 +136,11 @@ export class EditEventPage implements OnInit {
 
     this.getAttachments(this.postEvent.EventId);
 
-
+    this.restoreDatepickerData()
    
   }
   
-  close(){
+  close() {
     this.closeComponent.emit();
     this.setIntervenient.emit([]);
     this.setIntervenientCC.emit([]);
@@ -107,25 +149,30 @@ export class EditEventPage implements OnInit {
     this.deleteTemporaryData();
   }
 
+  async save() {
 
-
-
-  async save(){
-
+    this.getDatepickerData()
     this.postEvent.Attendees = this.taskParticipants.concat(this.taskParticipantsCc);
 
+    this.showLoader = true
     await this.eventsService.editEvent(this.postEvent, 2, 3).subscribe(async () => {
+      this.showLoader = false
+     
       const alert = await this.alertController.create({
         cssClass: 'my-custom-class',
         header: 'Evento actualizado',
         buttons: ['OK']
       });
 
-      
+      this.toastService.successMessage()
       setTimeout(()=>{
         alert.dismiss();
       }, 1500);
 
+    },
+    error => {
+      this.showLoader = false
+      this.toastService.badRequest()
     });
 
     this.clearPostEvent.emit();
@@ -157,8 +204,25 @@ export class EditEventPage implements OnInit {
   }
 
 
-  saveTemporaryData(){
+  getDatepickerData() {
+    if (this.postEvent) {
+      this.postEvent.StartDate = this.dateStart
+      this.postEvent.EndDate = this.dateEnd
+    }
+  }
+
+  restoreDatepickerData() {
+    if (this.postEvent) {
+      this.dateControlStart = new FormControl(moment(this.postEvent.StartDate));
+      this.dateControlEnd = new FormControl(moment(this.postEvent.EndDate));
+    }
+
+  }
+
+  saveTemporaryData() {
     
+    this.getDatepickerData()
+
     window['temp.path:/home/agenda/edit-event.component.ts'] = {
       postEvent: this.postEvent,
       eventBody: this.eventBody,
@@ -166,8 +230,8 @@ export class EditEventPage implements OnInit {
     }
   }
 
-  restoreTemporaryData(): boolean{
-    
+  restoreTemporaryData(): boolean {
+   
     const restoredData =  window['temp.path:/home/agenda/edit-event.component.ts']
 
     if(JSON.stringify(restoredData) != "{}" && undefined != restoredData){
@@ -175,6 +239,8 @@ export class EditEventPage implements OnInit {
       this.eventBody = restoredData.eventBody
       this.segment = restoredData.segment
 
+      this.restoreDatepickerData()
+
       return true;  
     } else {
       return false;