Add delete event functionallity

src/app/components/group/group.component.html

@@ -110,6 +110,10 @@
                     matTooltipShowDelay="500" (click)="leaveEvent(event)" [disabled]="!event.joined">
                     <mat-icon>event_busy</mat-icon>
                   </button>
+                  <button *ngIf="event.deletable" mat-icon-button class="request-button" matTooltip="delete event"
+                    matTooltipShowDelay="0" (click)="deleteEvent(event)">
+                    <mat-icon>delete</mat-icon>
+                  </button>
                 </div>
               </mat-card-header>
             </mat-card>

src/app/components/group/group.component.ts

@@ -174,6 +174,10 @@ export class GroupComponent implements OnInit {
     });
   }
 
+  public deleteEvent(event: Event) {
+    this.groupService.deleteEvent(event.id).subscribe();
+  }
+
   public showUserProfile(user: User) {
     this.router.navigate(['profile/' + user.userID]);
   }

src/app/models/event.ts

@@ -1,10 +1,11 @@
-import {IEvent} from './interfaces/IEvent';
+import { IEvent } from './interfaces/IEvent';
 
 export class Event {
   id: string;
   name: string;
   date: string;
   joined: boolean;
+  deletable: boolean;
 
   public assignFromResponse(eventDataResponse: IEvent) {
     this.id = eventDataResponse.id;
@@ -12,6 +13,7 @@ export class Event {
     const temp = new Date(Number(eventDataResponse.dueDate));
     this.date = temp.toLocaleString('en-GB');
     this.joined = eventDataResponse.joined;
+    this.deletable = eventDataResponse.deletable;
 
     return this;
   }

src/app/models/interfaces/IEvent.ts

@@ -7,4 +7,6 @@ export interface IEvent {
   dueDate: string;
 
   joined: boolean;
+
+  deletable: boolean;
 }

src/app/services/group/group.service.ts

@@ -20,7 +20,7 @@ const getGroupGraphqlQuery = `query($groupId: ID!) {
       creator{id name handle}
       admins{id name handle}
       members{id name handle profilePicture}
-      events{id name dueDate joined}
+      events{id name dueDate joined deletable}
   }
 }`;
 
@@ -146,8 +146,6 @@ export class GroupService extends BaseService {
   }
 
   public leaveEvent(eventId: string) {
-    const headers = new Headers();
-    headers.set('Content-Type', 'application/json');
     const body = {
       query: `mutation($eventId: ID!) {
       leaveEvent(eventId: $eventId) {
@@ -157,7 +155,31 @@ export class GroupService extends BaseService {
         eventId: eventId
       }
     };
-    return this.postGraphql(body);
+    return this.postGraphql(body)
+      .pipe(this.retryRated());
+  }
+
+  public deleteEvent(eventId: string) {
+    const body = {
+      query: `mutation($eventId: ID!) {
+      deleteEvent(eventId: $eventId) {
+        joined
+      }
+    }`, variables: {
+        eventId
+      }
+    };
+    return this.postGraphql(body)
+      .pipe(this.retryRated())
+      .pipe(tap(response => {
+        const group = this.group.getValue();
+        for (let i = 0; i < group.events.length; i++) {
+          if (group.events[i].id === eventId) {
+            group.events.splice(i, 1);
+          }
+        }
+        this.group.next(group);
+      }));
   }
 
   public changeProfilePicture(file: any, id: number) {