From 6135315e16c8410e07dad8e6e16107f902c18f9c Mon Sep 17 00:00:00 2001
From: Max <maxes2000@t-online.de>
Date: Wed, 22 Jan 2020 15:32:14 +0100
Subject: [PATCH] Add leave group functionality

---
 src/app/components/group/group.component.html    | 16 ++++++++++++++--
 src/app/components/group/group.component.ts      |  5 +++++
 .../social/groups/groups.component.html          | 11 ++++++++---
 .../components/social/groups/groups.component.ts |  4 ++++
 src/app/services/group/group.service.ts          | 14 ++++++++++++++
 5 files changed, 45 insertions(+), 5 deletions(-)

diff --git a/src/app/components/group/group.component.html b/src/app/components/group/group.component.html
index a903837..7022283 100644
--- a/src/app/components/group/group.component.html
+++ b/src/app/components/group/group.component.html
@@ -13,13 +13,19 @@
 
         <span id="username">{{groupProfile.name}}</span>
         <div class="button-box">
-          <button mat-icon-button
+          <button mat-icon-button *ngIf="!groupProfile.joined"
                   class="request-button"
                   matTooltip="join group" matTooltipShowDelay="500"
                   (click)="joinGroup(groupProfile)"
                   [disabled]="!groupProfile.allowedToJoinGroup">
             <mat-icon>group_add</mat-icon>
           </button>
+          <button mat-icon-button *ngIf="groupProfile.joined"
+                  class="request-button"
+                  matTooltip="leave group" matTooltipShowDelay="500"
+                  (click)="leaveGroup(groupProfile)">
+            <mat-icon>directions_run</mat-icon>
+          </button>
           <button mat-icon-button
                   class="request-button"
                   matTooltip="create event" matTooltipShowDelay="500"
@@ -65,13 +71,19 @@
               (click)="showUserProfile(groupProfile.creator)">created by {{groupProfile.creator.username}}
           @{{groupProfile.creator.handle}}</span>
         <div class="button-box">
-          <button mat-icon-button
+          <button mat-icon-button *ngIf="!groupProfile.joined"
                   class="request-button"
                   matTooltip="join group" matTooltipShowDelay="500"
                   (click)="joinGroup(groupProfile)"
                   [disabled]="!groupProfile.allowedToJoinGroup">
             <mat-icon>group_add</mat-icon>
           </button>
+          <button mat-icon-button *ngIf="groupProfile.joined"
+                  class="request-button"
+                  matTooltip="leave group" matTooltipShowDelay="500"
+                  (click)="leaveGroup(groupProfile)">
+            <mat-icon>directions_run</mat-icon>
+          </button>
           <button mat-icon-button
                   class="request-button"
                   matTooltip="create event" matTooltipShowDelay="500"
diff --git a/src/app/components/group/group.component.ts b/src/app/components/group/group.component.ts
index 9476ee9..efb774e 100644
--- a/src/app/components/group/group.component.ts
+++ b/src/app/components/group/group.component.ts
@@ -186,4 +186,9 @@ export class GroupComponent implements OnInit {
       this.router.navigateByUrl('');
     });
   }
+
+  leaveGroup() {
+    this.groupService.leaveGroup(this.groupProfile.id).subscribe();
+  }
+
 }
diff --git a/src/app/components/social/groups/groups.component.html b/src/app/components/social/groups/groups.component.html
index 122a8ed..7781231 100644
--- a/src/app/components/social/groups/groups.component.html
+++ b/src/app/components/social/groups/groups.component.html
@@ -13,12 +13,17 @@
     [class.selected]="group === selectedGroup">
     <mat-card-header>
       <div id="button-box">
-        <button mat-icon-button [matMenuTriggerFor]="menu" id="menu-button" *ngIf="group.deletable">
+        <button mat-icon-button [matMenuTriggerFor]="menu" id="menu-button">
           <mat-icon>more_vert</mat-icon>
         </button>
         <mat-menu #menu="matMenu">
-          <button mat-menu-item (click)="deleteGroup(group)">
-            <span>delete group</span>
+          <div *ngIf="group.deletable">
+            <button mat-menu-item (click)="deleteGroup(group)">
+              <span>delete group</span>
+            </button>
+          </div>
+          <button mat-menu-item (click)="leaveGroup(group)">
+            <span>leave group</span>
           </button>
         </mat-menu>
       </div>
diff --git a/src/app/components/social/groups/groups.component.ts b/src/app/components/social/groups/groups.component.ts
index d5f1c25..bcb87cf 100644
--- a/src/app/components/social/groups/groups.component.ts
+++ b/src/app/components/social/groups/groups.component.ts
@@ -75,5 +75,9 @@ export class GroupsComponent implements OnInit {
   deleteGroup(group: GroupInfo) {
     this.groupService.deleteGroup(group.id).subscribe();
   }
+
+  leaveGroup(group: GroupInfo) {
+    this.groupService.leaveGroup(group.id).subscribe();
+  }
 }
 
diff --git a/src/app/services/group/group.service.ts b/src/app/services/group/group.service.ts
index 907de7e..48beabd 100644
--- a/src/app/services/group/group.service.ts
+++ b/src/app/services/group/group.service.ts
@@ -131,4 +131,18 @@ export class GroupService extends BaseService {
       this.data.deleteGroup(groupId);
     }));
   }
+
+  public leaveGroup(groupId: number) {
+    const body = {
+      query: `mutation($groupId: ID!) {
+      leaveGroup(groupId: $groupId){ id }
+    }`, variables: {
+        groupId
+      }
+    };
+    return this.postGraphql(body)
+    .pipe(tap(response => {
+      this.data.deleteGroup(groupId);
+    }));
+  }
 }