Add angular material inputs

src/app/app-routing.module.ts

@@ -116,10 +116,6 @@ const routes: Routes = [
     path: 'new-event',
     loadChildren: () => import('./shared/agenda/new-event/new-event.module').then( m => m.NewEventPageModule)
   },
-  {
-    path: 'edit-event',
-    loadChildren: () => import('./shared/agenda/edit-event/edit-event.module').then( m => m.EditEventPageModule)
-  },
   {
     path: 'event-list',
     loadChildren: () => import('./shared/agenda/event-list/event-list.module').then( m => m.EventListPageModule)

src/app/modals/create-process/create-process.module.ts

@@ -7,10 +7,25 @@ import { IonicModule } from '@ionic/angular';
 import { CreateProcessPageRoutingModule } from './create-process-routing.module';
 
 import { CreateProcessPage } from './create-process.page';
-import { EmptyContainerPage } from 'src/app/shared/empty-container/empty-container.page';
 import { EmptyContainerPageModule } from 'src/app/shared/empty-container/empty-container.module';
 import { AttendeeModalPageModule } from 'src/app/shared/event/attendee-modal/attendee-modal.module';
 
+
+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,
@@ -18,7 +33,23 @@ import { AttendeeModalPageModule } from 'src/app/shared/event/attendee-modal/att
     IonicModule,
     CreateProcessPageRoutingModule,
     EmptyContainerPageModule,
-    AttendeeModalPageModule
+    AttendeeModalPageModule,
+    // Angular material
+    MatDatepickerModule,
+    MatInputModule,
+    MatNativeDateModule,
+    NgxMatDatetimePickerModule,
+    NgxMatTimepickerModule,
+    NgxMatNativeDateModule,
+    NgxMatMomentModule,
+    MatSelectModule,
+    MatButtonModule,
+    ReactiveFormsModule,
+    MatDialogModule,
+
+  ],
+  providers: [
+    { provide: MAT_DATE_LOCALE, useValue: 'pt' },
   ],
   declarations: [
     CreateProcessPage

src/app/modals/create-process/create-process.page.html

@@ -28,12 +28,32 @@
               <ion-icon class="icon-time" slot="start" name="time-outline"></ion-icon>
             </div>
             <div class="ion-input-class">
-              <ion-select placeholder="Prazo" [(ngModel)]="postData.Priority" interface="action-sheet" Cancel-text="Cancelar" required>
+
+              <!-- <ion-select class="d-block d-md-none" placeholder="Prazo" [(ngModel)]="postData.Priority" interface="action-sheet" Cancel-text="Cancelar" required>
                 <ion-select-option value="99999861"><b>Normal</b> (4 dias para a execução da tarefa)</ion-select-option>
                 <ion-select-option value="99999862"><b>Urgente</b> (2 dias para a execução da tarefa)</ion-select-option>
                 <ion-select-option value="99999863"><b>Muito Urgente</b> (1 dia para a execução da tarefa)</ion-select-option>
                 <ion-select-option value="99999864"><b>Urgentíssimo</b> (8 horas para a execução da tarefa)</ion-select-option>
-              </ion-select>
+              </ion-select> -->
+              <mat-form-field class="width-100" placeholder="Sample Type" required>
+                <!-- <input matInput type="text" > -->
+                <mat-select matInput [(value)]="postData.Priority" >
+                  <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>

src/app/modals/create-process/create-process.page.ts

@@ -1,5 +1,4 @@
 import { Component, OnInit } from '@angular/core';
-import { Router } from '@angular/router';
 import { AnimationController, ModalController, NavParams } from '@ionic/angular';
 import { Despacho } from 'src/app/models/despacho.model';
 import { EventPerson } from 'src/app/models/eventperson.model';
@@ -8,19 +7,14 @@ import { Folder } from 'src/app/models/folder.model';
 import { AuthService } from 'src/app/services/auth.service';
 import { ProcessesService } from 'src/app/services/processes.service';
 import { environment } from 'src/environments/environment';
-import { AttachmentsService } from 'src/app/services/attachments.service';
-import { AlertService } from 'src/app/services/alert.service';
-import { AddParticipantsModalPage } from 'src/app/pages/gabinete-digital/expediente/add-participants-modal/add-participants-modal.page';
-import { AddParticipantsCcModalPage } from 'src/app/pages/gabinete-digital/expediente/add-participants-cc-modal/add-participants-cc-modal.page';
 import { DiscartExpedientModalPage } from 'src/app/pages/gabinete-digital/discart-expedient-modal/discart-expedient-modal.page';
 import { ExpedienteDetailPage } from 'src/app/pages/gabinete-digital/expediente/expediente-detail/expediente-detail.page';
 import { SearchDocument } from 'src/app/models/search-document';
 import { SearchPage } from 'src/app/pages/search/search.page';
-import { BadRequestPage } from 'src/app/shared/popover/bad-request/bad-request.page';
-import { SuccessMessagePage } from 'src/app/shared/popover/success-message/success-message.page';
 import { User } from 'src/app/models/user.model';
 import { AttendeesPageModal } from 'src/app/pages/events/attendees/attendees.page';
 import { ToastService } from 'src/app/services/toast.service';
+import { FormControl } from '@angular/forms';
 
 @Component({
   selector: 'app-create-process',
@@ -64,13 +58,11 @@ export class CreateProcessPage implements OnInit {
 
   loggeduser: User;
 
+
   constructor(
     private modalController: ModalController,
-    private router:Router,
     private processes:ProcessesService,
-    private attachmentsService: AttachmentsService,
     private navParams: NavParams,
-    private alertController: AlertService,
     private authService: AuthService,
     private userAuth: AuthService,
     private animationController: AnimationController,

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

@@ -28,11 +28,6 @@
                 <ion-input placeholder="Localização" [(ngModel)]="postEvent.Location"></ion-input>
               </div>
             </div>
-            <!-- Error messages -->
-            <!-- <span class="error ion-padding" >
-              Campo obrigatório
-            </span> -->
-        
           </div>
         
           <div class="container-div width-100">
@@ -132,9 +127,6 @@
               </div>
             </div>
           </div>
-          
-  
-  
           <div class="container-div width-100">
             <div (click)="addParticipants()" class="ion-item-class-2 cursor-pointer">
               <div class="ion-icon-class">

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

@@ -3,12 +3,9 @@ import { AlertController, AnimationController, ModalController, NavParams } from
 import { Attachment } from 'src/app/models/attachment.model';
 import { EventBody } from 'src/app/models/eventbody.model';
 import { EventPerson } from 'src/app/models/eventperson.model';
-import { AlertService } from 'src/app/services/alert.service';
 import { AttachmentsService } from 'src/app/services/attachments.service';
 import { EventsService } from 'src/app/services/events.service';
 import { ToastService } from 'src/app/services/toast.service';
-import { BadRequestPage } from 'src/app/shared/popover/bad-request/bad-request.page';
-import { SuccessMessagePage } from 'src/app/shared/popover/success-message/success-message.page';
 import { Event } from '../../../models/event.model';
 import { AttendeesPageModal } from '../../events/attendees/attendees.page';
 import { SearchPage } from '../../search/search.page';

src/app/pages/gabinete-digital/expediente/expedient-task-modal/expedient-task-modal.module.ts

@@ -12,6 +12,22 @@ import { AttendeeModalPageModule } from 'src/app/shared/event/attendee-modal/att
 import { EmptyContainerPageModule } from 'src/app/shared/empty-container/empty-container.module';
 import { BtnModalDismissPageModule } from 'src/app/shared/btn-modal-dismiss/btn-modal-dismiss.module';
 
+
+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';
+
+
 @NgModule({
   imports: [
     CommonModule,
@@ -22,7 +38,20 @@ import { BtnModalDismissPageModule } from 'src/app/shared/btn-modal-dismiss/btn-
     AttendeeModalPageModule,
     EmptyContainerPageModule,
     BtnModalDismissPageModule,
-    
+    // 
+    MatDatepickerModule,
+    MatInputModule,
+    MatNativeDateModule,
+    NgxMatDatetimePickerModule,
+    NgxMatTimepickerModule,
+    NgxMatNativeDateModule,
+    NgxMatMomentModule,
+    MatSelectModule,
+    MatButtonModule,
+    ReactiveFormsModule
+  ],
+  providers: [
+    { provide: MAT_DATE_LOCALE, useValue: 'pt' },
   ],
   declarations: [
     ExpedientTaskModalPage

src/app/pages/gabinete-digital/expediente/expedient-task-modal/expedient-task-modal.page.html

@@ -34,6 +34,25 @@
                 <ion-select-option value="99999863"><b>Muito Urgente</b> (1 dia para a execução da tarefa)</ion-select-option>
                 <ion-select-option value="99999864"><b>Urgentíssimo</b> (8 horas para a execução da tarefa)</ion-select-option>
               </ion-select>
+
+              <mat-form-field class="width-100" placeholder="Sample Type" required>
+                <!-- <input matInput type="text" > -->
+                <mat-select >
+                  <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>

src/app/services/search.service.ts

@@ -27,7 +27,7 @@ export class SearchService {
   }
 
 
-  basicSearch(subject:string, date:string, sender:string, organicEntity:string, docTypeId:string, applicationType:string): Observable<EventSearch>{
+  basicSearch(subject:string, date:string = null, sender:string = null, organicEntity:string = null, docTypeId:string = null, applicationType:string): Observable<EventSearch>{
     // Endpoint
     const geturl = environment.apiURL + 'search';
     // store params

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}}" 
+          <mat-form-field  class="width-100" placeholder="Selecione agenda">
-          [(ngModel)]="postEvent.CalendarName" 
+            <mat-select [(value)]="postEvent.CalendarName" >
-          interface="action-sheet" Cancel-text="Cancelar" 
+              <mat-option value="Oficial">
-          required>
+                Oficial
-            <ion-select-option value="Oficial">Oficial</ion-select-option>
+              </mat-option>
-            <ion-select-option value="Pessoal">Pessoal</ion-select-option>
+              <mat-option value="Pessoal">
-          </ion-select>
+                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]"
+          <mat-form-field class="width-100" placeholder="Sample Type" required>
-          selectedText="{{postEvent.Categories[0]}}" 
+            <!-- <input matInput type="text" > -->
-          interface="action-sheet" 
+            <mat-select matInput [(value)]="postEvent.Categories[0]" >
-          Cancel-text="Cancelar" required>
+              <mat-option value="Reunião">
-            <ion-select-option value="Reunião">Reunião</ion-select-option>
+                Reunião
-            <ion-select-option value="Viagem">Viagem</ion-select-option>
+              </mat-option>
-            <ion-select-option value="Conferência">Conferência</ion-select-option>
+              <mat-option value="Viagem">
-            <ion-select-option value="Encontro">Encontro</ion-select-option>
+                Viagem
-          </ion-select>
+              </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,17 +90,25 @@
           <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"
+          <mat-form-field class="date-hour-picker">
-            [(ngModel)]="postEvent.StartDate"
+            <input matInput [ngxMatDatetimePicker]="picker1" 
-            displayFormat="D MMM YYYY H:mm"
+              placeholder="Choose a date" 
-            minuteValues="0,15,30,45"
+              [formControl]="dateControlStart"
-            monthShortNames="Jan, Fev, Mar, Abr, Mai, Jun, Jul, Aug, Sep, Out, Nov, Dez"
+              [min]="minDate" [max]="maxDate" 
-            min="2018" 
+              [disabled]="disabled"
-            max="2022" 
             >
-          </ion-datetime>
+            <mat-datepicker-toggle id="new-inicio" matSuffix [for]="picker1"></mat-datepicker-toggle>
-          <!-- <ion-input placeholder="Data início" [(ngModel)]="postData.StartDate"></ion-input> -->
+            <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>
@@ -97,17 +119,25 @@
           <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"
+          <mat-form-field class="date-hour-picker">
-            [(ngModel)]="postEvent.EndDate"
+            <input matInput [ngxMatDatetimePicker]="fim" 
-            displayFormat="D MMM YYYY H:mm"
+              placeholder="Choose a date" 
-            minuteValues="0,15,30,45"
+              [formControl]="dateControlEnd"
-            monthShortNames="Jan, Fev, Mar, Abr, Mai, Jun, Jul, Aug, Sep, Out, Nov, Dez"
+              [min]="minDate" [max]="maxDate" 
-            min="2018" 
+              [disabled]="disabled"
-            max="2022" 
             >
-          </ion-datetime>
+            <mat-datepicker-toggle id="new-fim" matSuffix [for]="fim"></mat-datepicker-toggle>
-          <!-- <ion-input placeholder="Data fim" [(ngModel)]="postData.EndDate"></ion-input> -->
+            <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"
+          <mat-form-field  class="width-100" placeholder="Selecione repetição" value="false" interface="action-sheet" required>
-          selectedText="{{isRecurring}}" 
+            <mat-select [(ngModel)]="postEvent.IsRecurring">
-          interface="action-sheet" 
+              <mat-option value="false">
-          Cancel-text="Cancelar" required>
+                Não se repete
-            <ion-select-option value="false">Não se repete</ion-select-option>
+              </mat-option>
-            <ion-select-option value="true">Repete</ion-select-option>
+              <mat-option value="true">
-          </ion-select>
+                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,7 +136,7 @@ export class EditEventPage implements OnInit {
 
     this.getAttachments(this.postEvent.EventId);
 
-
+    this.restoreDatepickerData()
    
   }
   
@@ -107,25 +149,30 @@ export class EditEventPage implements OnInit {
     this.deleteTemporaryData();
   }
 
-
-
-
   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 {
   }
 
 
+  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,
@@ -175,6 +239,8 @@ export class EditEventPage implements OnInit {
       this.eventBody = restoredData.eventBody
       this.segment = restoredData.segment
 
+      this.restoreDatepickerData()
+
       return true;  
     } else {
       return false;

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

@@ -19,7 +19,6 @@ import {
   NgxMatTimepickerModule 
 } from '@angular-material-components/datetime-picker';
 
-
 import { ReactiveFormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
 import { MatSelectModule } from '@angular/material/select';
@@ -32,6 +31,7 @@ import {
 } from '@angular/material-moment-adapter';
 import {DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE} from '@angular/material/core';
 
+
 @NgModule({
   imports: [
     CommonModule,
@@ -59,7 +59,7 @@ import {DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE} from '@angular/material/
   ],
   declarations: [NewEventPage],
   providers: [
-    { provide: MAT_DATE_LOCALE, useValue: 'pt-br' },
+    { provide: MAT_DATE_LOCALE, useValue: 'pt' },
   ],
   exports: [NewEventPage]
 })

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

@@ -6,6 +6,7 @@
           <ion-label class="title">Novo Evento</ion-label>
         </div>
       </div>
+      <ion-progress-bar class="calendar-progress-bar" type="indeterminate" *ngIf="showLoader"></ion-progress-bar>
     </div>
   </ion-toolbar>
 </ion-header>
@@ -13,24 +14,6 @@
 <ion-content>
   <div class="main-content">
 
-    <!-- THIS -->
-
-   
-    <!-- <form class="form-inline">
-      <div class="form-group">
-        <div class="input-group">
-          <input class="form-control" placeholder="yyyy-mm-dd"
-                name="dp"  ngbDatepicker #d="ngbDatepicker">
-          <div class="input-group-append">
-            <button class="btn btn-outline-secondary calendar" (click)="d.toggle()" type="button"></button>
-          </div>
-        </div>
-      </div>
-    </form> -->
-
-    <!-- 2. datepicker in the popup -->
-   <!--  <input type="text" ngbDatepicker #d="ngbDatepicker"/> -->
-
     <div class="ion-item-container">
       <ion-input type="text"  placeholder="Assunto" [(ngModel)]="postEvent.Subject"></ion-input>
     </div>
@@ -43,10 +26,6 @@
           <ion-input type="text" placeholder="Localização" [(ngModel)]="postEvent.Location"></ion-input>
         </div>
       </div>
-      <!-- Error messages -->
-      <!-- <span class="error ion-padding" >
-        Campo obrigatório
-      </span> -->
   
     </div>
     
@@ -55,10 +34,10 @@
         <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">
+        <div class="ion-input-class flex-grow-1 d-flex justify-center align-center material-inputs materia-top ">
 
-          <mat-form-field  class="width-100"  [(ngModel)]="postEvent.CalendarName" placeholder="Selecione agenda" required>
+          <mat-form-field  class="width-100" color="ion-color-secondary"  placeholder="Selecione agenda">
-            <mat-select>
+            <mat-select [(value)]="postEvent.CalendarName" >
               <mat-option value="Oficial">
                 Oficial
               </mat-option>
@@ -77,10 +56,11 @@
         <div class="ion-icon-class">
           <ion-icon slot="start" src="assets/images/icons-description.svg"></ion-icon>
         </div>
-        <div class="ion-input-class flex-grow-1">
+        <div class="ion-input-class flex-grow-1 d-flex justify-center align-center material-inputs materia-top">
 
-          <mat-form-field  class="width-100"  [(ngModel)]="postEvent.Categories[0]" placeholder="Selecione tipo" required>
+          <mat-form-field class="width-100" placeholder="Sample Type" required>
-            <mat-select>
+            <!-- <input matInput type="text" > -->
+            <mat-select matInput [(value)]="postEvent.Categories[0]" >
               <mat-option value="Reunião">
                 Reunião
               </mat-option>
@@ -99,21 +79,28 @@
         </div>
       </div>
     </div>
-  
     <div class="container-div">
       <div class="ion-item-class-2 d-flex">
         <div class="ion-icon-class">
           <ion-icon slot="start" src="assets/images/icons-calendar.svg"></ion-icon>
         </div>
-        <div (click)="openInicio()" class="ion-input-class flex-grow-1">
+        <div  class="ion-input-class  flex-grow-1">
-          <mat-form-field class="date-hour-picker width-100">
+
-            <input matInput [ngxMatDatetimePicker]="picker" placeholder="Choose a date" [formControl]="dateControl"
+          <mat-form-field class="date-hour-picker">
-            [(ngModel)]="postEvent.StartDate" 
+            <input matInput [ngxMatDatetimePicker]="picker1" 
-              [min]="minDate" [max]="maxDate" [disabled]="disabled">
+              placeholder="Choose a date" 
-            <mat-datepicker-toggle id="new-inicio" #inicio  matSuffix [for]="picker"></mat-datepicker-toggle>
+              [formControl]="dateControlStart"
-            <ngx-mat-datetime-picker  #picker [showSpinners]="showSpinners" [showSeconds]="showSeconds"
+              [min]="minDate" [max]="maxDate" 
-              [stepHour]="stepHour" [stepMinute]="stepMinute" [stepSecond]="stepSecond" [touchUi]=false 
+              [disabled]="disabled"
-              [color]="'#0000'" [enableMeridian]="enableMeridian">
+            >
+            <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>
 
@@ -127,14 +114,22 @@
           <ion-icon slot="start" src="assets/images/icons-calendar.svg"></ion-icon>
         </div>
         <div (click)="openFim()" class="ion-input-class flex-grow-1">
-          <mat-form-field class="date-hour-picker width-100">
+
-            <input matInput [ngxMatDatetimePicker]="fim" placeholder="Choose a date" [formControl]="dateControl" 
+          <mat-form-field class="date-hour-picker">
-              [(ngModel)]="postEvent.EndDate"
+            <input matInput [ngxMatDatetimePicker]="fim" 
-              [min]="minDate" [max]="maxDate" [disabled]="disabled">
+              placeholder="Choose a date" 
-            <mat-datepicker-toggle id="new-fim" #inicio  matSuffix [for]="fim"></mat-datepicker-toggle>
+              [formControl]="dateControlEnd"
-            <ngx-mat-datetime-picker [showSpinners]=false  #fim [showSpinners]="showSpinners" [showSeconds]="showSeconds"
+              [min]="minDate" [max]="maxDate" 
-              [stepHour]="stepHour" [stepMinute]="stepMinute" [stepSecond]="stepSecond" [touchUi]=false appearance = "standard"
+              [disabled]="disabled"
-              [color]="'#0000'" [enableMeridian]="enableMeridian">
+            >
+            <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>
 
@@ -147,10 +142,10 @@
         <div class="ion-icon-class">
           <ion-icon slot="start" src="assets/images/icons-refresh.svg"></ion-icon>
         </div>
-        <div class="ion-input-class flex-grow-1">
+        <div class="ion-input-class flex-grow-1 d-flex justify-center align-center material-inputs materia-top">
 
-          <mat-form-field  class="width-100" placeholder="Selecione repetição" value="false" interface="action-sheet" Cancel-text="Cancelar" required>
+          <mat-form-field  class="width-100" placeholder="Selecione repetição" value="false" interface="action-sheet" required>
-            <mat-select>
+            <mat-select [(value)]="postEvent.IsRecurring">
               <mat-option value="false">
                 Não se repete
               </mat-option>

src/app/shared/agenda/new-event/new-event.page.scss

@@ -170,17 +170,14 @@
       .span-color{
         color:red;
       }
-  
   }
   
-  
   .container-div {
     ion-textarea {
       height: 81px;
     }
   }
   
-  
   .app-name{
     background: #42b9f2;
     border-radius: 18px;
@@ -214,3 +211,7 @@
     }
   }
 
+
+.materia-top {
+  padding-top: 7px;
+}

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

@@ -52,7 +52,6 @@ const CUSTOM_DATE_FORMATS: NgxMatDateFormats = {
 
 export class NewEventPage implements OnInit {
 
-
   eventBody: EventBody;
   segment:string = "true";
 
@@ -69,7 +68,6 @@ export class NewEventPage implements OnInit {
   public stepSecond = 5;
   public color: ThemePalette = 'primary';
 
-  
   @Input() profile:string;
   @Input() selectedSegment: string;
   @Input() selectedDate: Date;
@@ -93,7 +91,33 @@ export class NewEventPage implements OnInit {
   loggeduser: User;
   @ViewChild('picker') picker: any;
   @ViewChild('fim') fim: any;
-  // @ViewChild('inicio') inicio: 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];
+
+  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
+  }
+
 
   constructor(
     private modalController: ModalController,
@@ -109,6 +133,9 @@ export class NewEventPage implements OnInit {
   ) {
     this.dateAdapter.setLocale('pt');
     this.loggeduser = userService.ValidatedUser;
+
+    this.dateControlStart = new FormControl(moment(new Date()));
+    this.dateControlEnd = new FormControl(moment(new Date()));
   }
 
   ngOnInit() {
@@ -136,7 +163,7 @@ export class NewEventPage implements OnInit {
           Body: this.eventBody,
           Location: '',
           CalendarId: '',
-          CalendarName: '',
+          CalendarName: 'Oficial',
           StartDate: selectedStartdDate,
           EndDate: new Date(selectedEndDate),
           EventType: 'Reunião',
@@ -194,45 +221,7 @@ export class NewEventPage implements OnInit {
 
 
     this.date = new Date(2021,9,4,5,6,7);
-  }
+    this.getDatepickerData()
-
-  
-  public formGroup = new FormGroup({
-    date: new FormControl(null, [Validators.required]),
-    date2: new FormControl(null, [Validators.required])
-  })
-  public dateControl = new FormControl(new Date(2021,9,4,5,6,7));
-  public dateControlMinMax = new FormControl(new Date());
-
-  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];
-
-  toggleMinDate(evt: any) {
-    if (evt.checked) {
-      this._setMinDate();
-    } else {
-      this.minDate = null;
-    }
-  }
-
-  toggleMaxDate(evt: any) {
-    if (evt.checked) {
-      this._setMaxDate();
-    } else {
-      this.maxDate = null;
-    }
-  }
-
-  closePicker() {
-    this.picker.cancel();
   }
 
   openInicio() {
@@ -250,19 +239,6 @@ export class NewEventPage implements OnInit {
     }
   }
 
-  private _setMinDate() {
-    const now = new Date();
-    this.minDate = new Date();
-    this.minDate.setDate(now.getDate() - 1);
-  }
-
-
-  private _setMaxDate() {
-    const now = new Date();
-    this.maxDate = new Date();
-    this.maxDate.setDate(now.getDate() + 1);
-  }
-
   async getDoc(){
     const modal = await this.modalController.create({
       component: SearchPage,
@@ -292,8 +268,25 @@ export class NewEventPage implements OnInit {
     this.setIntervenientCC.emit([]);
   }
 
+  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, "DD MM YYYY hh:mm"));
+      this.dateControlEnd = new FormControl(moment(this.postEvent.EndDate, "DD MM YYYY hh:mm"));
+    }
+
+  }
+
   async save(){
 
+    this.getDatepickerData()
+
     this.postEvent.Attendees = this.taskParticipants.concat(this.taskParticipantsCc);
 
     if(this.documents.length >= 0) {
@@ -301,11 +294,16 @@ export class NewEventPage implements OnInit {
     }
 
     if(this.loggeduser.Profile == 'MDGPR') {
-      console.log('MD - Aqui');
+      // console.log('MD - Aqui');
-      console.log(this.postEvent);
+      // console.log(this.postEvent);
+
+      this.showLoader = true
+
       this.eventService.postEventMd(this.postEvent, this.postEvent.CalendarName).subscribe(
         async (id) => {
 
+          this.showLoader = false
+
           const eventId: any = id;
 
           const DocumentToSave: EventAttachment[] = this.documents.map((e) => {
@@ -341,6 +339,7 @@ export class NewEventPage implements OnInit {
 
         },
         error => {
+          this.showLoader = false
           this.toastService.badRequest('Evento não criado')
       });
     }
@@ -388,6 +387,7 @@ export class NewEventPage implements OnInit {
   }
 
   afterSave() {
+    this.getDatepickerData()
     this.deleteTemporaryData();
 
     this.onAddEvent.emit(this.postEvent);
@@ -425,6 +425,7 @@ export class NewEventPage implements OnInit {
   }
 
   saveTemporaryData() {
+    this.getDatepickerData()
     window['temp.path:/home/agenda/new-event.component.ts'] = {
       postEvent: this.postEvent,
       eventBody: this.eventBody,
@@ -433,6 +434,8 @@ export class NewEventPage implements OnInit {
   }
 
   restoreTemporaryData(): boolean {
+
+
     const restoredData =  window['temp.path:/home/agenda/new-event.component.ts']
 
     if(JSON.stringify(restoredData) != "{}" && undefined != restoredData) {
@@ -440,8 +443,11 @@ export class NewEventPage implements OnInit {
       this.eventBody = restoredData.eventBody
       this.segment = restoredData.segment
 
+      // restore dater for date and hours picker
+      this.restoreDatepickerData()
       return true;
     } else {
+
       return false;
     }
   }

src/app/shared/gabinete-digital/edit-event-to-approve/edit-event.module.ts

@@ -8,13 +8,39 @@ import { EditEventToApproveComponentRoutingModule } from './edit-event-routing.m
 import { EditEventToApproveComponent } from './edit-event.page';
 import { ComponentsModule } from 'src/app/components/components.module';
 
+
+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';
+
 @NgModule({
   imports: [
     CommonModule,
     FormsModule,
     IonicModule,
     ComponentsModule,
-    EditEventToApproveComponentRoutingModule
+    EditEventToApproveComponentRoutingModule,
+    // Angular material
+    MatDatepickerModule,
+    MatInputModule,
+    MatNativeDateModule,
+    NgxMatDatetimePickerModule,
+    NgxMatTimepickerModule,
+    NgxMatNativeDateModule,
+    NgxMatMomentModule,
+    MatSelectModule,
+    MatButtonModule,
+    ReactiveFormsModule
   ],
   declarations: [
     EditEventToApproveComponent

src/app/shared/gabinete-digital/edit-event-to-approve/edit-event.page.html

@@ -8,7 +8,7 @@
         <ion-header>
           <div class="title-content">
             <div class="middle">
-              <ion-label class="title">Editar Evento Por Aprovar</ion-label>
+              <ion-label class="title">Editar evento por aprovar</ion-label>
             </div>
           </div>
         </ion-header>
@@ -40,14 +40,30 @@
                 <ion-icon slot="start" src="assets/images/icons-calendar.svg"></ion-icon>
               </div>
               <div class="ion-input-class">
+                
                 <ion-select disabled  placeholder="Selecione agenda"
+                  class="d-block d-md-none"
                   selectedText="{{eventProcess.workflowInstanceDataFields.Agenda}}" 
                   [(ngModel)]="eventProcess.workflowInstanceDataFields.Agenda" 
                   interface="action-sheet" Cancel-text="Cancelar" 
-                required>
+                  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="d-none d-md-block width-100" placeholder="Selecione agenda">
+                  <mat-select [(value)]="eventProcess.workflowInstanceDataFields.Agenda" >
+                    <mat-option value="Oficial">
+                      Oficial
+                    </mat-option>
+                    <mat-option value="Pessoal">
+                      Pessoal
+                    </mat-option>
+                  </mat-select>
+                </mat-form-field>
+
               </div>
             </div>
           </div>
@@ -79,8 +95,9 @@
               </div>
               <div class="ion-input-class width-100">
                 <ion-datetime 
+                  class="d-block d-md-none"
                   placeholder="Início"
-                  [(ngModel)]="eventProcess.workflowInstanceDataFields.StartDate"
+                  [(ngModel)]="dateControlEnd"
                   displayFormat="D MMM YYYY H:mm"
                   minuteValues="0,15,30,45"
                   monthShortNames="Jan, Fev, Mar, Abr, Mai, Jun, Jul, Aug, Sep, Out, Nov, Dez"
@@ -88,7 +105,24 @@
                   max="2022" 
                 >
                 </ion-datetime>
-                <!-- <ion-input placeholder="Data início" [(ngModel)]="postData.StartDate"></ion-input> -->
+
+                <mat-form-field class="width-100 date-hour-picker d-none d-md-block">
+                  <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>
@@ -100,6 +134,7 @@
               </div>
               <div class="ion-input-class">
                 <ion-datetime 
+                  class="d-none d-md-none"
                   placeholder="Fim"
                   [(ngModel)]="eventProcess.workflowInstanceDataFields.EndDate"
                   displayFormat="D MMM YYYY H:mm"
@@ -109,7 +144,25 @@
                   max="2022" 
                 >
                 </ion-datetime>
-                <!-- <ion-input placeholder="Data fim" [(ngModel)]="postData.EndDate"></ion-input> -->
+
+                <mat-form-field class="width-100 date-hour-picker d-none d-md-block">
+                  <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>

src/app/shared/gabinete-digital/edit-event-to-approve/edit-event.page.ts

@@ -1,5 +1,7 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { FormControl } from '@angular/forms';
 import { AlertController, AnimationController, ModalController, NavParams } from '@ionic/angular';
+import * as moment from 'moment';
 import { Attachment } from 'src/app/models/attachment.model';
 import { EventPerson } from 'src/app/models/eventperson.model';
 import { SearchDocument } from 'src/app/models/search-document';
@@ -20,6 +22,36 @@ import { SuccessMessagePage} from '../../popover/success-message/success-message
 })
 export class EditEventToApproveComponent implements OnInit {
 
+  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"));
+
+  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;
+  
   serialNumber: string
   loadedAttachments: Attachment[]= []
 
@@ -44,76 +76,6 @@ export class EditEventToApproveComponent implements OnInit {
     }
   }
 
-  // event ={
-  //   "serialNumber":"9073_118",
-  //   "originator":{
-  //     "email":"gilson.manuel@gabinetedigital.local",
-  //     "manager":"",
-  //     "displayName":"",
-  //     "fqn":"K2:GABINETEDIGITAL\\gilson.manuel",
-  //     "username":"GABINETEDIGITAL\\gilson.manuel"
-  //   },
-  //   "actions":null,
-  //   "workflowInstanceFolio":"Final do sprint",
-  //   "taskStartDate":"4/30/2021 9:06:48 AM",
-  //   "workflowID":4365,
-  //   "workflowInstanceID":9073,
-  //   "workflowName":"MDGPR\\Agenda Oficial MDGPR",
-  //   "workflowDisplayName":"Agenda Oficial MDGPR",
-  //   "formURL":"http://bpmdev.gabinetedigital.local/Runtime/Runtime/Form/Exchange+Calendar+Meeting+Approval/?SerialNo=9073_118",
-  //   "workflowInstanceDataFields": {
-  //     "Body":"Será fechado o sprint 1 - 26 Abr - 30 Abr",
-  //     "Location":"Equilibrium - Sala de reuniões",
-  //     "Subject":"Final do sprint",
-  //     "StartDate":"2021-04-30T15:00:00",
-  //     "EndDate":"2021-04-30T15:30:00",
-  //     "Participants":"gilson.manuel@gabinetedigital.local;tiago.kayaya@gabinetedigital.local;solange.vandunem@gabinetedigital.local",
-  //     "CC":"",
-  //     "ReviewUserComments":"teste",
-  //     "Role":0,
-  //     "MDName":"Paulo Pinto",
-  //     "MDEmail":"paulo.pinto@gabinetedigital.local",
-  //     "PREmail":"",
-  //     "OriginatorComments":"",
-  //     "Status":"Active",
-  //     "TimeZone":"W. Central Africa Standard Time",
-  //     "Agenda":"Oficial",
-  //     "EventType":"Reunião",
-  //     "EventID":"",
-  //     "IsRecurring":false,
-  //     "ParticipantsList":[
-  //       {
-  //         "$type":null,
-  //         "EmailAddress":"gilson.manuel@gabinetedigital.local",
-  //         "Name":"Gilson Manuel",
-  //         "IsRequired":true
-  //       },
-  //       {
-  //         "$type":null,
-  //         "EmailAddress":"tiago.kayaya@gabinetedigital.local",
-  //         "Name":"Tiago Kayaya",
-  //         "IsRequired":true
-  //       },
-  //       {
-  //         "$type":null,
-  //         "EmailAddress":"solange.vandunem@gabinetedigital.local",
-  //         "Name":"Solange Van-Dúnem",
-  //         "IsRequired":true
-  //       }
-  //     ],
-  //     "EventOrganizer":"{\"$type\":\"Gabinete.k2RESTidentifier_EventPerson, Gabinete, Version=0.0.0.0, Culture=neutral, PublicKeyToken=null\",\"EmailAddress\":\"agenda.mdgpr@gabinetedigital.local\",\"Name\":\"Agenda do Ministro e Director do Gabinete do PR\",\"IsRequired\":true}",
-  //     "CreateEvent":"",
-  //     "IsAllDayEvent":false,
-  //     "SerializedItem":"{\"$type\":\"GabineteDigitalV4.k2RESTidentifier_NotificationData[], GabineteDigitalV4, Version=0.0.0.0, Culture=neutral, PublicKeyToken=null\",\"$values\":[{\"$type\":\"GabineteDigitalV4.k2RESTidentifier_NotificationData, GabineteDigitalV4, Version=0.0.0.0, Culture=neutral, PublicKeyToken=null\",\"Service\":\"gabinete-digital\",\"Object\":\"event-list\",\"idObject\":\"9073_118\"}]}",
-  //     "MDwxUserID":261,
-  //     "DeserializedItem":"{\"$type\":\"GabineteDigitalV4.k2RESTidentifier_NotificationData, GabineteDigitalV4, Version=0.0.0.0, Culture=neutral, PublicKeyToken=null\",\"Service\":\"gabinete-digital\",\"Object\":\"event-list\",\"idObject\":\"9073_118\"}",
-  //     "Message":"Foi actualizado o",
-  //     "InstanceId":"R0RfR0FCSU5FVEVESUdJVEFMXGdpbHNvbi5tYW51ZWxfMjAyMS0wNC0zMCAwODowNDoyN1o=",
-  //     "For Each Result":"",
-  //     "For Each Index":0
-  //   }
-  // }
-
   show = false
 
   postEvent: Event;
@@ -146,13 +108,14 @@ export class EditEventToApproveComponent implements OnInit {
   ) {
 
     this.serialNumber = this.navParams.get('serialNumber');
-    // this.profile = this.navParams.get('profile');
 
     this.isEventEdited = false;
 
-
     this.getTask()
 
+    this.dateControlStart = new FormControl(moment(new Date()));
+    this.dateControlEnd = new FormControl(moment(new Date()));
+
   }
 
   async getTask() {
@@ -161,6 +124,8 @@ export class EditEventToApproveComponent implements OnInit {
     const result = await this.processes.GetTask(this.serialNumber).subscribe( result =>{
     this.eventProcess = result
       
+    this.restoreDatepickerData()
+  
       console.log(this.eventProcess.workflowInstanceDataFields.Subject)
       
       // description
@@ -171,22 +136,6 @@ export class EditEventToApproveComponent implements OnInit {
       this.InstanceId = this.eventProcess.workflowInstanceDataFields.InstanceId
       this.getAttachments()
   
-
-      // attendees
-      //this.eventProcess.workflowInstanceDataFields.ParticipantsList
-      // subject
-      //this.eventProcess.workflowInstanceDataFields.Subject |  this.eventProcess.workflowInstanceFolio
-      // location
-      //this.eventProcess.workflowInstanceDataFields.Location
-      // startDate
-      //this.eventProcess.taskStartDate
-      // endDate
-      //this.eventProcess.workflowInstanceDataFields.EndDate
-  
-      //  this.eventProcess.workflowInstanceDataFields.Agenda
-  
-      // eventProcess.workflowInstanceDataFields.IsRecurring
-  
       if(this.eventProcess.workflowInstanceDataFields.IsRecurring == false) {
         this.isRecurring = "Não se repete";
       }
@@ -202,18 +151,12 @@ export class EditEventToApproveComponent implements OnInit {
         }
       })
     })
+
+
   }
 
   ngOnInit() {
     
-    
-    window.onresize = (event) => {
-      // if not mobile remove all component
-      if( window.innerWidth >= 800){
-        this.modalController.dismiss();
-      }
-    };
-    
   }
   
   close() {
@@ -221,6 +164,8 @@ export class EditEventToApproveComponent implements OnInit {
   }
 
   save() {  
+    // set dates to eventProcess object
+    this.getDatepickerData()
 
     this.taskParticipantsCc.forEach(e=>{
       e.IsRequired = false
@@ -360,9 +305,7 @@ export class EditEventToApproveComponent implements OnInit {
 
   deleteAttachment(attachment: Attachment, index) {
 
-    console.log('index', index)
     this.loadedAttachments[index]['action'] = 'delete'
-
   }
 
   async getDoc() {
@@ -409,4 +352,18 @@ export class EditEventToApproveComponent implements OnInit {
     });
   }
 
+  restoreDatepickerData() {
+
+    this.dateControlStart = new FormControl(moment(new Date(this.eventProcess.workflowInstanceDataFields.StartDate)));
+    this.dateControlEnd = new FormControl(moment(new Date(this.eventProcess.workflowInstanceDataFields.EndDate)));
+    
+  }
+
+  getDatepickerData() {
+
+    this.eventProcess.workflowInstanceDataFields.StartDate = this.dateStart
+    this.eventProcess.workflowInstanceDataFields.EndDate = this.dateEnd
+  
+  }
+
 }

src/global.scss

@@ -870,3 +870,53 @@ background: rgb(92, 92, 92);
 .modal {
     display: flex !important;
 }
+
+// calendar
+.mat-calendar-body-selected {
+    background-color: #42b9fe !important;
+}
+
+// select background
+// .mat-primary .mat-option.mat-selected:not(.mat-option-disabled), .mat-option-ripple {
+//     background-color: #fafafa !important;
+// }
+
+.mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical), .cdk-keyboard-focused .mat-calendar-body-active > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical), .cdk-program-focused .mat-calendar-body-active > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical) {
+    background-color: #42b9fe36 !important;
+}
+
+.mat-form-field-underline.ng-tns-c193-6.ng-star-inserted, .mat-form-field-underline {
+    display: none;
+}
+
+.date-hour-picker {
+    margin-top: -6px;
+
+    label#mat-form-field-label-7{
+      // display: none;
+    }
+
+    .span.ng-tns-c193-4, .ng-star-inserted {
+      // display: none;
+    }
+  
+    .ng-star-inserted{
+      // display: none;
+      position: absolute;
+      width: 447px;
+      height: 43px;
+      opacity: 0;
+      button {
+        width: 100%;
+        height: 100%;
+      }
+    }
+}
+
+.mat-active span {
+    color: #0d89d1 !important;
+}
+
+// .ng-star-inserted {
+//     opacity: 0;
+// }