Add leave group functionality

master
Max 5 years ago
parent 5bd4ba108f
commit 6135315e16

@ -13,13 +13,19 @@
<span id="username">{{groupProfile.name}}</span> <span id="username">{{groupProfile.name}}</span>
<div class="button-box"> <div class="button-box">
<button mat-icon-button <button mat-icon-button *ngIf="!groupProfile.joined"
class="request-button" class="request-button"
matTooltip="join group" matTooltipShowDelay="500" matTooltip="join group" matTooltipShowDelay="500"
(click)="joinGroup(groupProfile)" (click)="joinGroup(groupProfile)"
[disabled]="!groupProfile.allowedToJoinGroup"> [disabled]="!groupProfile.allowedToJoinGroup">
<mat-icon>group_add</mat-icon> <mat-icon>group_add</mat-icon>
</button> </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 <button mat-icon-button
class="request-button" class="request-button"
matTooltip="create event" matTooltipShowDelay="500" matTooltip="create event" matTooltipShowDelay="500"
@ -65,13 +71,19 @@
(click)="showUserProfile(groupProfile.creator)">created by {{groupProfile.creator.username}} (click)="showUserProfile(groupProfile.creator)">created by {{groupProfile.creator.username}}
@{{groupProfile.creator.handle}}</span> @{{groupProfile.creator.handle}}</span>
<div class="button-box"> <div class="button-box">
<button mat-icon-button <button mat-icon-button *ngIf="!groupProfile.joined"
class="request-button" class="request-button"
matTooltip="join group" matTooltipShowDelay="500" matTooltip="join group" matTooltipShowDelay="500"
(click)="joinGroup(groupProfile)" (click)="joinGroup(groupProfile)"
[disabled]="!groupProfile.allowedToJoinGroup"> [disabled]="!groupProfile.allowedToJoinGroup">
<mat-icon>group_add</mat-icon> <mat-icon>group_add</mat-icon>
</button> </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 <button mat-icon-button
class="request-button" class="request-button"
matTooltip="create event" matTooltipShowDelay="500" matTooltip="create event" matTooltipShowDelay="500"

@ -186,4 +186,9 @@ export class GroupComponent implements OnInit {
this.router.navigateByUrl(''); this.router.navigateByUrl('');
}); });
} }
leaveGroup() {
this.groupService.leaveGroup(this.groupProfile.id).subscribe();
}
} }

@ -13,13 +13,18 @@
[class.selected]="group === selectedGroup"> [class.selected]="group === selectedGroup">
<mat-card-header> <mat-card-header>
<div id="button-box"> <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> <mat-icon>more_vert</mat-icon>
</button> </button>
<mat-menu #menu="matMenu"> <mat-menu #menu="matMenu">
<div *ngIf="group.deletable">
<button mat-menu-item (click)="deleteGroup(group)"> <button mat-menu-item (click)="deleteGroup(group)">
<span>delete group</span> <span>delete group</span>
</button> </button>
</div>
<button mat-menu-item (click)="leaveGroup(group)">
<span>leave group</span>
</button>
</mat-menu> </mat-menu>
</div> </div>
<div mat-card-avatar (click)="showGroupProfile(group)"> <div mat-card-avatar (click)="showGroupProfile(group)">

@ -75,5 +75,9 @@ export class GroupsComponent implements OnInit {
deleteGroup(group: GroupInfo) { deleteGroup(group: GroupInfo) {
this.groupService.deleteGroup(group.id).subscribe(); this.groupService.deleteGroup(group.id).subscribe();
} }
leaveGroup(group: GroupInfo) {
this.groupService.leaveGroup(group.id).subscribe();
}
} }

@ -131,4 +131,18 @@ export class GroupService extends BaseService {
this.data.deleteGroup(groupId); 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);
}));
}
} }

Loading…
Cancel
Save