Resumo do dia: Actualizar, apagar evento, editar evento sem erros, progress bar, controlo de rota ao resumo do dia e actualizar, outros.

src/app/pages/events/event-detail/event-detail.page.html

@@ -31,7 +31,7 @@
       </ion-list>
     </ion-item>
     <ion-item>
-      <ion-label position="stacked">Carácter</ion-label>
+      <ion-label position="stacked">Calendário</ion-label>
       <ion-input [(ngModel)]='loadedEvent.CalendarName'></ion-input>
     </ion-item>
     <ion-item>
@@ -55,7 +55,7 @@
     </ion-list>
   </ion-item-group>
   <div class="event-detail-buttons">
-    <!-- <ion-button fill="outline" class="ion-button-left">Recusar</ion-button> -->
+    <ion-button fill="outline" class="ion-button-left" (click)="deleteConfirm()">Apagar</ion-button>
     <ion-button class="ion-button-right" (click)="Save()">Gravar</ion-button>
   </div>
 </ion-content>

src/app/pages/events/event-detail/event-detail.page.ts

@@ -1,9 +1,11 @@
 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { EventsService } from 'src/app/services/events.service';
-
+import { Router } from '@angular/router';
 import { Event } from '../../../models/event.model';
 import { Observable } from 'rxjs';
+import { EventBody } from 'src/app/models/eventbody.model';
+import { AlertController } from '@ionic/angular';
 
 @Component({
   selector: 'app-event-detail',
@@ -15,8 +17,9 @@ export class EventDetailPage implements OnInit {
   loadedEvent: Event;
   eventItem: Observable<Event>;
 
-  constructor(private activatedRoute: ActivatedRoute, private eventsService: EventsService) { 
+  constructor(public alertController: AlertController, private router: Router, private activatedRoute: ActivatedRoute, private eventsService: EventsService) { 
     this.loadedEvent = new Event();
+    this.loadedEvent.Body = new EventBody();
   }
 
   ngOnInit() {
@@ -38,11 +41,59 @@ export class EventDetailPage implements OnInit {
     });
   }
 
+  async deleteConfirm()
+  {
+    const alert = await this.alertController.create({
+      cssClass: 'my-custom-class',
+      header: 'Apagar evento!',
+      message: 'Deseja <strong>apagar</strong> o evento da agenda ' + this.loadedEvent.CalendarName + '?',
+      buttons: [
+        {
+          text: 'Não',
+          role: 'cancel',
+          cssClass: 'secondary',
+          handler: (blah) => { }
+        }, {
+          text: 'Sim',
+          handler: () => {
+            this.Delete();
+          }
+        }
+      ]
+    });
+
+    await alert.present();
+  }
+
+  Delete()
+  {
+    this.eventsService.deleteEvent(this.loadedEvent.EventId, 0).subscribe(async response => 
+      {
+        const alert = await this.alertController.create({
+          cssClass: 'my-custom-class',
+          header: 'Evento removido',
+          buttons: ['OK']
+        });
+    
+        await alert.present();
+
+        this.router.navigate(['/home/events']);
+      });  
+  }
+
   Save()
   {
-    this.eventsService.putEvent(this.loadedEvent, 2, 3).subscribe(response => 
+    this.eventsService.putEvent(this.loadedEvent, 2, 3).subscribe(async response => 
       {
-        this.loadedEvent = response;
+        const alert = await this.alertController.create({
+          cssClass: 'my-custom-class',
+          header: 'Evento actualizado',
+          buttons: ['OK']
+        });
+    
+        await alert.present();
+
+        this.router.navigate(['/home/events']);
       });  
   }
 

src/app/pages/events/events.page.html

@@ -24,23 +24,32 @@
 </ion-header>
 
 <ion-content>
+  <ion-progress-bar type="indeterminate" *ngIf="showLoader"></ion-progress-bar>
+  <ion-refresher name="refresher" slot="fixed" (ionRefresh)="doRefresh($event)">
+    <ion-refresher-content
+      pullingIcon="chevron-down-circle-outline"
+      pullingText="deslize para actualizar"
+      refreshingSpinner="circles"
+      refreshingText="a actualizar...">
+    </ion-refresher-content>
+  </ion-refresher>
   <!-- TABS -->
   <ion-toolbar >
-    <ion-segment [(ngModel)]="segment">
-      <ion-segment-button value="combinada">
+    <ion-segment [(ngModel)]="segment" (ionChange)="onSegmentChange()">
+      <ion-segment-button value="Combinada">
         Combinada
       </ion-segment-button>
-      <ion-segment-button value="oficial">
+      <ion-segment-button value="Oficial">
         Oficial
       </ion-segment-button>
-      <ion-segment-button value="pessoal">
+      <ion-segment-button value="Pessoal">
         Pessoal
       </ion-segment-button>
     </ion-segment>
   </ion-toolbar>
-  <!-- List of Text Items -->
+  <!-- COMBINADA -->
   <div [ngSwitch]="segment">
-    <ion-list *ngSwitchCase="'combinada'" >
+    <ion-list *ngSwitchCase="'Combinada'" >
       <ion-item-group>
         <ion-item-sliding>
           <ion-item lines="none" 
@@ -69,19 +78,16 @@
               </div>
             </div>
           </ion-item>
-      </ion-item-sliding>
-
+        </ion-item-sliding>
       </ion-item-group>
-
     </ion-list>
-  <!-- OFICIAL -->
-    <ion-list *ngSwitchCase="'oficial'">
-      <!-- <ion-item-group>
+    <!-- OFICIAL -->
+    <ion-list *ngSwitchCase="'Oficial'">
+      <ion-item-group>
         <ion-item-sliding>
-          <ion-item-divider>
-            <ion-label>8:00 am</ion-label>
-          </ion-item-divider>
-          <ion-item lines="none" *ngFor="let event of eventsList">
+          <ion-item lines="none" 
+          *ngFor="let event of officialeventsList"
+          [routerLink]="['/home/events', event.EventId]">
             <div class="div-item">
               <div class="div-up">
                 <div class="div-icon">
@@ -100,45 +106,47 @@
                   <p class="item-list-small">{{event.Location}}</p>
                 </div>
                 <div class="div-botton-right">
-                  <ion-icon class="ion-icon-attach" slot="end" name="attach"></ion-icon>
+                  <ion-icon class="ion-icon-attach" slot="end" name="attach-outline"></ion-icon>
                 </div>
               </div>
             </div>
           </ion-item>
         </ion-item-sliding>
-      </ion-item-group> -->
+      </ion-item-group>
     </ion-list>
-
-      <ion-list *ngSwitchCase="'pessoal'">
-        <!-- <ion-item-group>
-          <ion-item-sliding>
-            <ion-item lines="none" *ngFor="let event of eventsList">
-              <div class="div-item">
-                <div class="div-up">
-                  <div class="div-icon">
-                    <ion-icon slot="start" name="reader"></ion-icon>
-                  </div>
-                  <div class="div-content-pessoal">
-                    <h3>{{event.Subject}}</h3>
-                    <p>{{event.StartDate}} - {{event.EndDate}}</p>
-                  </div>
+    <!-- OFICIAL -->
+    <ion-list *ngSwitchCase="'Pessoal'">
+      <ion-item-group>
+        <ion-item-sliding>
+          <ion-item lines="none" 
+          *ngFor="let event of personaleventsList"
+          [routerLink]="['/home/events', event.EventId]">
+            <div class="div-item">
+              <div class="div-up">
+                <div class="div-icon">
+                  <ion-icon slot="start" name="reader"></ion-icon>
                 </div>
-                <div class="div-botton">
-                  <div class="div-botton-left">
-                    <ion-icon class="ion-icon-location" slot="start" name="location"></ion-icon>
-                  </div>
-                  <div class="div-botton-middle">
-                    <p class="item-list-small">{{event.Location}}</p>
-                  </div>
-                  <div class="div-botton-right">
-                    <ion-icon class="ion-icon-attach" slot="end" name="attach"></ion-icon>
-                  </div>
+                <div class="div-content-oficial">
+                  <h3>{{event.Subject}}</h3>
+                  <p>{{event.StartDate}} - {{event.EndDate}}</p>
                 </div>
               </div>
-            </ion-item>
-          </ion-item-sliding>
-        </ion-item-group> -->
-      </ion-list>
+              <div class="div-botton">
+                <div class="div-botton-left">
+                  <ion-icon class="ion-icon-location" slot="start" name="location"></ion-icon>
+                </div>
+                <div class="div-botton-middle">
+                  <p class="item-list-small">{{event.Location}}</p>
+                </div>
+                <div class="div-botton-right">
+                  <ion-icon class="ion-icon-attach" slot="end" name="attach-outline"></ion-icon>
+                </div>
+              </div>
+            </div>
+          </ion-item>
+        </ion-item-sliding>
+      </ion-item-group>
+    </ion-list>
   </div>
 </ion-content>
 

src/app/pages/events/events.page.ts

@@ -3,7 +3,7 @@ import { Component, OnInit, LOCALE_ID } from '@angular/core';
 import { Event } from '../../models/event.model';
 import { EventsService } from 'src/app/services/events.service';
 import { Router } from '@angular/router';
-import { ActivatedRoute } from '@angular/router';
+import { ActivatedRoute, NavigationEnd } from '@angular/router';
 import { formatDate } from '@angular/common';
 
 
@@ -29,21 +29,65 @@ export class EventsPage implements OnInit {
   /* Set segment variable */
   segment:string;
 
-  eventsList: Event[];
+  eventsList: Event[];  
+  officialeventsList: Event[];
+  personaleventsList: Event[];
+
+  showLoader: boolean = true;
 
   constructor(private eventService: EventsService, private router: Router, public activatedRoute: ActivatedRoute) { }
 
   ngOnInit() {
     //Inicializar segment
-    this.segment = "combinada";
+    this.segment = "Combinada";
     this.showGreeting();
 
-    /* Call Get events method */
-      this.eventService.getAllEvents(formatDate(new Date(), 'yyyy-MM-dd', 'pt') + ' 00:00:00', formatDate(new Date(), 'yyyy-MM-dd', 'pt') + ' 23:59:59')
-      .subscribe(response => {
-          this.eventsList = response;
-        }
-      );
+    this.router.events.forEach((event) => {
+      if(event instanceof NavigationEnd && event.url == this.router.url) {
+        this.RefreshEvents();
+      }
+    });
+  }
+
+  doRefresh(event) {
+    this.RefreshEvents();
+
+    setTimeout(() => {
+      event.target.complete();
+    }, 2000);
+  }
+
+  onSegmentChange(){
+    this.RefreshEvents();
+  }
+
+  RefreshEvents(){
+    this.showLoader = true;
+    switch (this.segment)
+    {
+      case "Combinada":
+        this.eventService.getAllEvents(formatDate(new Date(), 'yyyy-MM-dd', 'pt') + ' 00:00:00', formatDate(new Date(), 'yyyy-MM-dd', 'pt') + ' 23:59:59')
+        .subscribe(response => {
+            this.eventsList = response;
+          }
+        );
+        break;
+      case "Pessoal":
+        this.eventService.getEvents(this.segment, formatDate(new Date(), 'yyyy-MM-dd', 'pt') + ' 00:00:00', formatDate(new Date(), 'yyyy-MM-dd', 'pt') + ' 23:59:59')
+        .subscribe(response => {
+            this.personaleventsList = response;
+          }
+        );
+        break;
+      case "Oficial":
+        this.eventService.getEvents(this.segment, formatDate(new Date(), 'yyyy-MM-dd', 'pt') + ' 00:00:00', formatDate(new Date(), 'yyyy-MM-dd', 'pt') + ' 23:59:59')
+        .subscribe(response => {
+            this.officialeventsList = response;
+          }
+        );
+        break;
+    }
+    this.showLoader = false;
   }
 
   showGreeting(){

src/app/services/events.service.ts

@@ -35,7 +35,21 @@ export class EventsService {
       params: params 
     };
 
-    console.log(options);
+    return this.http.get<Event[]>(`${geturl}`, options);
+  }
+
+  getEvents(calendarname:string, startdate:string, enddate:string): Observable<Event[]>{
+    const geturl = environment.apiURL + 'calendar/GetEvents';
+    let params = new HttpParams();
+
+    params = params.set("CalendarName", calendarname);
+    params = params.set("StartDate", startdate);
+    params = params.set("EndDate", enddate);
+    
+    let options = { 
+      headers: this.headers, 
+      params: params 
+    };
 
     return this.http.get<Event[]>(`${geturl}`, options);
   }
@@ -58,10 +72,10 @@ export class EventsService {
   {
     const puturl = environment.apiURL + 'calendar/PutEvent';
 
-    let params: HttpParams;
+    let params = new HttpParams();
 
-    params.append("conflictResolutionMode", conflictResolutionMode.toString());
-    params.append("sendInvitationsOrCancellationsMode", sendInvitationsOrCancellationsMode.toString());
+    params = params.set("conflictResolutionMode", conflictResolutionMode.toString());
+    params = params.set("sendInvitationsOrCancellationsMode", sendInvitationsOrCancellationsMode.toString());
     
     let options = { 
       headers: this.headers, 
@@ -85,4 +99,20 @@ export class EventsService {
     
     return this.http.post<Event>(`${puturl}`, event, options)
   }
+
+  deleteEvent(eventid:string, deletemode:number)
+  {
+    const puturl = environment.apiURL + 'calendar/PostEvent';
+    let params = new HttpParams();
+
+    params = params.set("EventId", eventid);
+    params = params.set("deleteMode", deletemode.toString());
+
+    let options = { 
+      headers: this.headers, 
+      params: params 
+    };
+    
+    return this.http.delete(`${puturl}`, options)
+  }
 }