Add delete group functionality

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

@@ -27,6 +27,14 @@
                   [disabled]="!isAdmin">
             <mat-icon>event</mat-icon>
           </button>
+          <div style="display: contents;" *ngIf="groupProfile.deletable">
+            <button mat-icon-button
+                    class="request-button"
+                    matTooltip="delete this group" matTooltipShowDelay="0"
+                    (click)="deleteGroup()">
+              <mat-icon>delete</mat-icon>
+            </button>
+          </div>
         </div>
       </mat-toolbar-row>
       <mat-toolbar-row>
@@ -107,6 +115,14 @@
                           (click)="leaveEvent(event)"
                           [disabled]="!event.joined">
                     <mat-icon>event_busy</mat-icon>
+                    <div style="display: contents;" *ngIf="groupProfile.deletable">
+                      <button mat-icon-button
+                              class="request-button"
+                              matTooltip="delete this group" matTooltipShowDelay="0"
+                              (click)="deleteGroup()">
+                        <mat-icon>delete</mat-icon>
+                      </button>
+                    </div>
                   </button>
                 </div>
               </mat-card-header>

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

@@ -151,7 +151,7 @@ export class GroupComponent implements OnInit {
 
   public joinGroup(group: Group) {
     group.allowedToJoinGroup = false;
-    this.requestService.joinGroup(group)
+    this.requestService.joinGroup(group.id)
       .subscribe(() => {
         this.datasharingService.addGroupToUser(group);
       });
@@ -179,4 +179,11 @@ export class GroupComponent implements OnInit {
     user.allowedToSendRequest = false;
     this.requestService.sendFriendRequest(user);
   }
+
+  private deleteGroup() {
+    this.groupService.deleteGroup(this.groupProfile.id)
+    .subscribe(response => {
+      this.router.navigateByUrl('');
+    });
+  }
 }

src/app/components/search/search.component.ts

@@ -78,7 +78,7 @@ export class SearchComponent implements OnInit {
 
   public joinGroup(group: GroupInfo) {
     group.allowedToJoinGroup = false;
-    this.requestService.joinGroup(group)
+    this.requestService.joinGroup(group.id)
       .subscribe(() => {
         this.data.addGroupToUser(group);
       });

src/app/components/social/groups/groups.component.html

@@ -10,13 +10,22 @@
 
 <div id="grouplist">
   <mat-card class="group-card" *ngFor="let group of user.groups"
-    matRipple
-    [class.selected]="group === selectedGroup" (click)="showGroupProfile(group)">
+    [class.selected]="group === selectedGroup">
     <mat-card-header>
-      <div mat-card-avatar>
+      <div id="button-box">
+        <button mat-icon-button [matMenuTriggerFor]="menu" id="menu-button" *ngIf="group.deletable">
+          <mat-icon>more_vert</mat-icon>
+        </button>
+        <mat-menu #menu="matMenu">
+          <button mat-menu-item (click)="deleteGroup(group)">
+            <span>delete group</span>
+          </button>
+        </mat-menu>
+      </div>
+      <div mat-card-avatar (click)="showGroupProfile(group)">
         <img class="group-picture" [src]="group.picture"/>
       </div>
-      <mat-card-title>{{group.name}}</mat-card-title>
+      <mat-card-title (click)="showGroupProfile(group)">{{group.name}}</mat-card-title>
     </mat-card-header>
   </mat-card>
 </div>

src/app/components/social/groups/groups.component.sass

@@ -12,6 +12,9 @@
   outline: none
   user-select: none
   cursor: pointer
+  #button-box
+    text-align: right
+    margin-left: auto
   ::ng-deep .mat-card-header-text
     width: 1000%
     margin: auto 0 auto 24px

src/app/components/social/groups/groups.component.ts

@@ -4,6 +4,7 @@ import {MatDialog, MatDialogRef} from '@angular/material/dialog';
 import {SocialService} from 'src/app/services/social/social.service';
 import {User} from 'src/app/models/user';
 import {DatasharingService} from 'src/app/services/datasharing.service';
+import {GroupService} from 'src/app/services/group/group.service';
 import {Router} from '@angular/router';
 import {IErrorResponse} from '../../../models/interfaces/IErrorResponse';
 
@@ -50,7 +51,9 @@ export class DialogCreateGroupComponent {
 export class GroupsComponent implements OnInit {
   user: User;
 
-  constructor(public dialog: MatDialog, private data: DatasharingService, private router: Router) {
+  constructor(public dialog: MatDialog, private data: DatasharingService,
+    private router: Router,
+    private groupService: GroupService) {
   }
 
   ngOnInit() {
@@ -68,5 +71,9 @@ export class GroupsComponent implements OnInit {
       width: '250px'
     });
   }
+
+  deleteGroup(group: GroupInfo) {
+    this.groupService.deleteGroup(group.id).subscribe();
+  }
 }
 

src/app/models/group.ts

@@ -13,6 +13,7 @@ export class Group {
   events: Event[] = [];
   joined: boolean;
   allowedToJoinGroup = false;
+  deletable: boolean;
 
   public assignFromResponse(groupDataResponse: IGroup) {
     if (!groupDataResponse) {
@@ -23,6 +24,7 @@ export class Group {
     this.picture = this.buildPictureUrl(groupDataResponse.picture);
     let user = new User();
     this.creator = user.assignFromResponse(groupDataResponse.creator);
+    this.deletable = groupDataResponse.deletable;
     if (groupDataResponse.members) {
       for (const member of groupDataResponse.members) {
         user = new User();

src/app/models/groupinfo.ts

@@ -4,12 +4,14 @@ export class GroupInfo {
   id: number;
   name: string;
   picture: string;
+  deletable: boolean;
   allowedToJoinGroup = false;
 
-  constructor(pId: number, pName: string, picture: string) {
+  constructor(pId: number, pName: string, picture: string, deletable: boolean) {
     this.id = pId;
     this.name = pName;
     this.picture = this.buildPictureUrl(picture);
+    this.deletable = deletable;
   }
 
   buildPictureUrl(path: string): string {

src/app/models/interfaces/IGroup.ts

@@ -19,4 +19,6 @@ export interface IGroup {
   events: any;
 
   joined: boolean;
+
+  deletable: boolean;
 }

src/app/models/user.ts

@@ -62,7 +62,7 @@ export class User {
       this.groups.push(group_.assignFromResponse(group));
       } doesnt work because of circular injection*/
       this.groups = userDataResponse.groups
-        .map(group => new GroupInfo(group.id, group.name, group.picture));
+        .map(group => new GroupInfo(group.id, group.name, group.picture, group.deletable));
     }
     if (userDataResponse.chats) {
       this.chatIDs = userDataResponse.chats.map(chat => chat.id);

src/app/services/datasharing.service.ts

@@ -21,6 +21,17 @@ export class DatasharingService {
     this.currentUser.next(user);
   }
 
+  deleteGroup(id: number) {
+    const user: User = this.currentUser.getValue();
+    for (let i = 0; i < user.groups.length; i++) {
+      if (user.groups[i].id === id) {
+        user.groups.splice(i, 1);
+        return;
+      }
+    }
+    this.currentUser.next(user);
+  }
+
   addGroupToUser(group: GroupInfo) {
     const user = this.currentUser.getValue();
     user.groups.push(group);

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

@@ -8,6 +8,7 @@ import {Group} from 'src/app/models/group';
 import {tap} from 'rxjs/operators';
 import {BaseService} from '../base.service';
 import {IFileUploadResult} from '../../models/interfaces/IFileUploadResult';
+import {DatasharingService} from 'src/app/services/datasharing.service';
 
 const getGroupGraphqlQuery = `query($groupId: ID!) {
   getGroup(groupId:$groupId){
@@ -15,6 +16,7 @@ const getGroupGraphqlQuery = `query($groupId: ID!) {
       name
       joined
       picture
+      deletable
       creator{id name handle}
       admins{id name handle}
       members{id name handle profilePicture}
@@ -29,7 +31,7 @@ export class GroupService extends BaseService {
 
   public group: BehaviorSubject<Group> = new BehaviorSubject(new Group());
 
-  constructor(http: HttpClient) {
+  constructor(http: HttpClient, private data: DatasharingService) {
     super(http);
   }
 
@@ -115,4 +117,19 @@ export class GroupService extends BaseService {
     formData.append('groupId', id);
     return this.post<IFileUploadResult>(environment.greenvironmentUrl + '/upload', formData);
   }
+
+  public deleteGroup(groupId: number) {
+    const body = {
+      query: `mutation($groupId: ID!) {
+      deleteGroup(groupId: $groupId) {
+      }
+    }`, variables: {
+        groupId
+      }
+    };
+    return this.postGraphql(body)
+    .pipe(tap(response => {
+      this.data.deleteGroup(groupId);
+    }));
+  }
 }

src/app/services/login/login.service.ts

@@ -34,7 +34,8 @@ const graphqlQuery = `mutation($email: String!, $pwHash: String!) {
     groups {
       id,
       name,
-      picture
+      picture,
+      deletable
     },
     chats{
       id

src/app/services/request/request.service.ts

@@ -126,8 +126,8 @@ export class RequestService extends BaseService {
    * Joins a group
    * @param group
    */
-  public joinGroup(group: GroupInfo) {
-    return this.postGraphql(RequestService.buildJoinGroupBody(group.id));
+  public joinGroup(groupId: number) {
+    return this.postGraphql(RequestService.buildJoinGroupBody(groupId));
   }
 
   /**

src/app/services/search/search.service.ts

@@ -32,6 +32,7 @@ const graphqlQuery = `query($query: String!, $first: Int, $offset: Int) {
       id
       name
       picture
+      deletable
       creator{id name handle}
       members{id name handle}
     }
@@ -91,7 +92,7 @@ export class SearchService extends BaseService {
   public getGroupsForResponse(response: ISearchRequestResult): Array<GroupInfo> {
     const groups = new Array<GroupInfo>();
     for (const group of response.data.search.groups) {
-      groups.push(new GroupInfo(group.id, group.name, group.picture));
+      groups.push(new GroupInfo(group.id, group.name, group.picture, group.deletable));
     }
     return groups;
   }

src/app/services/selfservice/self.service.ts

@@ -27,7 +27,8 @@ const getSelfGraphqlQuery = `{
     groups {
       id,
       name,
-      picture
+      picture,
+      deletable
     },
     chats{
       id