change components in edit-event

src/app/pages/agenda/agenda.page.ts

@@ -285,6 +285,7 @@ export class AgendaPage implements OnInit {
     /*     console.log('Event clicked', event); */
     //clear
 
+
     this.setIntervenient([]);
     this.setIntervenientCC([]);
     this.clearPostEvent();

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

@@ -8,6 +8,21 @@ import { EditEventPageRoutingModule } from './edit-event-routing.module';
 
 import { EditEventPage } from './edit-event.page';
 import { AttendeeModalPageModule } from 'src/app/shared/event/attendee-modal/attendee-modal.module';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { MatInputModule } from '@angular/material/input';
+
+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';
 
 @NgModule({
   imports: [
@@ -15,7 +30,16 @@ import { AttendeeModalPageModule } from 'src/app/shared/event/attendee-modal/att
     FormsModule,
     IonicModule,
     EditEventPageRoutingModule,
-
+    MatDatepickerModule,
+    MatInputModule,
+    MatNativeDateModule,
+    NgxMatDatetimePickerModule,
+    NgxMatTimepickerModule,
+    NgxMatNativeDateModule,
+    NgxMatMomentModule,
+    MatSelectModule,
+    MatButtonModule,
+    ReactiveFormsModule,
     //
     AttendeeModalPageModule
   ],

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

@@ -55,19 +55,23 @@
           </div>
 
           <div class="container-div width-100">
-            <div class="ion-item-class-2">
+            <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">
-                <ion-select  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>
+              <div class="ion-input-class flex-grow-1">
+
+                <mat-form-field appearance="none" floatLabel="never" class="width-100 " >
+                  <mat-select placeholder="Selecione agenda*" [(ngModel)]="postEvent.CalendarName" >
+                    <mat-option value="Oficial">
+                      Oficial
+                    </mat-option>
+                    <mat-option value="Pessoal">
+                      Pessoal
+                    </mat-option>
+                  </mat-select>
+                </mat-form-field>
+
               </div>
             </div>
           </div>
@@ -82,21 +86,30 @@
           </div>
 
           <div class="container-div width-100">
-            <div class="ion-item-class-2">
+            <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" [class.input-error]="Form?.get('Categories')?.invalid  && validateFrom ">
-                <ion-select  placeholder="Selecione tipo de evento*"
-                [(ngModel)]="postEvent.Category"
-                selectedText="{{postEvent.Category}}"
-                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>
+              <div class="ion-input-class flex-grow-1" [class.input-error]="Form?.get('Categories')?.invalid  && validateFrom ">
+
+                <mat-form-field appearance="none" floatLabel="never" class="width-100" required>
+                  <!-- <input matInput type="text" > -->
+                  <mat-select placeholder="Selecione o tipo de evento*" matInput [(ngModel)]="postEvent.Category" >
+                    <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>
@@ -115,77 +128,103 @@
               <div class="ion-icon-class">
                 <ion-icon slot="start" src="assets/images/icons-calendar.svg"></ion-icon>
               </div>
-              <div class="ion-input-class width-100" [class.input-error]="Form?.get('Date')?.invalid  && validateFrom ">
-                <ion-datetime
-                  placeholder="Início"
+              <div class="ion-input-class" [class.input-error]="Form?.get('Date')?.invalid  && validateFrom ">
+
+                <mat-form-field appearance="none" floatLabel="never" class="date-hour-picker">
+                  <input matInput [ngxMatDatetimePicker]="picker1"
+                    placeholder="Choose a date"
                     [(ngModel)]="postEvent.StartDate"
-                  displayFormat="D MMM YYYY H:mm"
-                  minuteValues="0,5,10,15,20,25,30,35,40,45,50,55"
-                  monthShortNames="Jan, Fev, Mar, Abr, Mai, Jun, Jul, Aug, Sep, Out, Nov, Dez"
-                  min="{{minDate}}"
-                  max="2025"
+                    [max]="maxDate"
+                    [disabled]="disabled"
                   >
-                </ion-datetime>
-                <!-- <ion-input placeholder="Data início" [(ngModel)]="postData.StartDate"></ion-input> -->
+                  <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>
 
           <div class="container-div width-100">
-            <div class="ion-item-class-2">
+            <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" [class.input-error]="Form?.get('Date')?.invalid  && validateFrom ">
-                <ion-datetime
-                  placeholder="Fim"
+              <div class="ion-input-class  flex-grow-1" [class.input-error]="Form?.get('Date')?.invalid  && validateFrom ">
+
+                <mat-form-field appearance="none" floatLabel="never" floatLabel="never" class="date-hour-picker">
+                  <input matInput [ngxMatDatetimePicker]="fim"
+                    placeholder="Choose a date"
                     [(ngModel)]="postEvent.EndDate"
-                  displayFormat="D MMM YYYY H:mm"
-                  minuteValues="0,5,10,15,20,25,30,35,40,45,50,55"
-                  monthShortNames="Jan, Fev, Mar, Abr, Mai, Jun, Jul, Aug, Sep, Out, Nov, Dez"
-                  min="{{minDate}}"
-                  max="2025"
+                    [max]="maxDate"
+                    [disabled]="disabled"
                   >
-                </ion-datetime>
-                <!-- <ion-input placeholder="Data fim" [(ngModel)]="postData.EndDate"></ion-input> -->
+                  <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">
+                  </ngx-mat-datetime-picker>
+                </mat-form-field>
+
               </div>
             </div>
           </div>
 
-          <div class="container-div width-100">
-            <div class="ion-item-class-2">
+          <div class="container-div d-flex width-100">
+            <div class="ion-item-class-2 width-100 d-flex">
               <div class="ion-icon-class">
                 <ion-icon slot="start" src="assets/images/icons-refresh.svg"></ion-icon>
               </div>
-              <div class="ion-input-class">
-                <ion-select  placeholder="Selecione a repetição*"
+              <div class="ion-input-class flex-grow-1">
+                <mat-form-field appearance="none" floatLabel="never" class="width-100" value="false" interface="action-sheet" required>
+                  <mat-select
+                  placeholder="Selecione repetição*"
                   [(ngModel)]="selectedRecurringType"
-                (ngModelChange)="onSelectedRecurringChanged($event)"
-                interface="action-sheet"
-                Cancel-text="Cancelar" required>
-                  <ion-select-option *ngFor="let recurring of recurringTypes" value="{{recurring.Code}}">{{recurring.Description}}</ion-select-option>
-                </ion-select>
+                  (ngModelChange)="onSelectedRecurringChanged($event)">
+                    <mat-option
+                      *ngFor="let recurring of recurringTypes"
+                      value="{{recurring.Code}}">
+                      {{recurring.Description}}
+                    </mat-option>
+                  </mat-select>
+                </mat-form-field>
+
               </div>
             </div>
           </div>
 
           <div *ngIf="selectedRecurringType != '-1'" class="container-div width-100">
-            <div class="ion-item-class-2">
+            <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 class="ion-input-class">
-                <ion-datetime
-                  placeholder="Última ocorrência"
+              <div (click)="openLastOccurrence()" class="ion-input-class flex-grow-1">
+
+                <mat-form-field class="date-hour-picker">
+                  <input matInput [ngxMatDatetimePicker]="occurrrence"
+                    placeholder="Choose a date"
                     [(ngModel)]="postEvent.EventRecurrence.LastOccurrence"
-                  displayFormat="D MMM YYYY H:mm"
-                  minuteValues="0,5,10,15,20,25,30,35,40,45,50,55"
-                  monthShortNames="Jan, Fev, Mar, Abr, Mai, Jun, Jul, Aug, Sep, Out, Nov, Dez"
-                  min="2021"
-                  max="2025"
+                    [disabled]="disabled"
                   >
-                </ion-datetime>
-                <!-- <ion-input placeholder="Data fim" [(ngModel)]="postData.EndDate"></ion-input> -->
+                  <mat-datepicker-toggle id="last-occurrence" matSuffix [for]="occurrrence"></mat-datepicker-toggle>
+                  <ngx-mat-datetime-picker #occurrrence
+                    [showSpinners]="showSpinners"
+                    [showSeconds]="showSeconds"
+                    [stepHour]="stepHour" [stepMinute]="stepMinute"
+                    [stepSecond]="stepSecond"
+                    [touchUi]="touchUi"
+                    >
+                  </ngx-mat-datetime-picker>
+                </mat-form-field>
+
               </div>
             </div>
           </div>

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

@@ -11,20 +11,33 @@ import { ToastService } from 'src/app/services/toast.service';
 import { Event } from '../../../models/event.model';
 import { AttendeesPageModal } from '../../events/attendees/attendees.page';
 import { SearchPage } from '../../search/search.page';
-import { ThemeService } from 'src/app/services/theme.service'
-
+import { ThemeService } from 'src/app/services/theme.service';
+import { NgxMatDateFormats } from '@angular-material-components/datetime-picker';
+import { NGX_MAT_DATE_FORMATS } from '@angular-material-components/datetime-picker';
 
+const CUSTOM_DATE_FORMATS: NgxMatDateFormats = {
+  parse: {
+    dateInput: "YYYY-MMMM-DD HH:mm"
+  },
+  display: {
+    dateInput: "DD MMM YYYY H:mm",
+    monthYearLabel: "MMM YYYY",
+    dateA11yLabel: "LL",
+    monthYearA11yLabel: "MMMM YYYY"
+  }
+}
 @Component({
   selector: 'app-edit-event',
   templateUrl: './edit-event.page.html',
   styleUrls: ['./edit-event.page.scss'],
+  providers: [
+    { provide: NGX_MAT_DATE_FORMATS, useValue: CUSTOM_DATE_FORMATS },
+  ]
 })
 export class EditEventPage implements OnInit {
 
   Form: FormGroup;
   validateFrom = false
-  public endMinDate = new Date(new Date().getTime() + 15 * 60000);
-  public minDate = new Date().toISOString().slice(0,10)
 
   postEvent: Event;
   isRecurring:string;
@@ -41,6 +54,19 @@ export class EditEventPage implements OnInit {
   recurringTypes: any;
   selectedRecurringType: any;
 
+  public date: any;
+  public disabled = false;
+  public showSpinners = true;
+  public showSeconds = false;
+  public touchUi = false;
+  public enableMeridian = false;
+  public minDate = new Date().toISOString().slice(0,10)
+  public endMinDate = new Date(new Date().getTime() + 15 * 60000).toISOString().slice(0,10)
+  public maxDate: any;
+  public stepHour = 1;
+  public stepMinute = 5;
+  public stepSecond = 5;
+
   loadedEventAttachments: Attachment[] = [];
   taskParticipants: any = [];
   taskParticipantsCc: any = [];
@@ -48,6 +74,11 @@ export class EditEventPage implements OnInit {
 
   showAttendees = 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 navParams: NavParams,
@@ -59,10 +90,12 @@ export class EditEventPage implements OnInit {
     public ThemeService: ThemeService
   ) {
 
-    this.postEvent = new Event();
+    /* this.postEvent = new Event(); */
     this.isEventEdited = false;
-    this.postEvent.EventRecurrence = { Type:'-1', LastOccurrence:''};
+    /* this.postEvent.EventRecurrence = { Type:'-1', LastOccurrence:''}; */
     this.postEvent = this.navParams.get('event');
+    console.log(this.postEvent);
+
     this.caller = this.navParams.get('caller');
     this.initCalendarName = this.postEvent.CalendarName;
 
@@ -99,6 +132,7 @@ export class EditEventPage implements OnInit {
   }
 
   ngOnInit() {
+
     window.onresize = (event) => {
       // if not mobile remove all component
       if( window.innerWidth >= 1024) {
@@ -178,6 +212,28 @@ export class EditEventPage implements OnInit {
     })
   }
 
+  openInicio() {
+    let input: any = document.querySelector('#new-inicio')
+    if(input) {
+      console.log(input)
+      input.click()
+    }
+  }
+
+  openFim() {
+    let input: any = document.querySelector('#new-fim')
+    if(input) {
+      input.click()
+    }
+  }
+
+  openLastOccurrence() {
+    let input: any = document.querySelector('#last-occurrence')
+    if(input) {
+      input.click()
+    }
+  }
+
 
   save() {
 

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

@@ -33,18 +33,11 @@ import { NgxMatMomentModule } from '@angular-material-components/moment-adapter'
     MatDatepickerModule,
     MatInputModule,
     MatNativeDateModule,
-    //
     NgxMatDatetimePickerModule,
     NgxMatTimepickerModule,
     NgxMatNativeDateModule,
-    //
-
     NgxMatMomentModule,
-    // BrowserAnimationsModule,
-    // MatRadioModule,
     MatSelectModule,
-    //MatRadioModule,
-    //MatCheckboxModule,
     MatButtonModule,
     ReactiveFormsModule
   ],