Team-Greenvironment
/
greenvironment-frontend
mirror of https://github.com/Team-Greenvironment/greenvironment-frontend.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Add add/remove group admin functionallity

Browse Source
master
Max 5 years ago
parent 079456aecc
commit fae9e79f24
6 changed files with 178 additions and 151 deletions
Show Stats Download Patch File Download Diff File

123
src/app/components/group/group.component.html
Unescape Escape View File

@ -4,40 +4,30 @@
<mat-toolbar id="toolbar" fxShow="true" fxHide.gt-sm="true"> <mat-toolbar id="toolbar" fxShow="true" fxHide.gt-sm="true">
<mat-toolbar-row> <mat-toolbar-row>
<div class="hover-box" matTooltip="upload new picture" *ngIf="isAdmin" (click)="openFileUploadDialog()"> <div class="hover-box" matTooltip="upload new picture" *ngIf="isAdmin" (click)="openFileUploadDialog()">
<img class="profile-picture" [src]="groupProfile.picture"/> <img class="profile-picture" [src]="groupProfile.picture" />
<mat-icon id="icon">camera_alt</mat-icon> <mat-icon id="icon">camera_alt</mat-icon>
</div> </div>
<div *ngIf="!isAdmin" (click)="openPfpLightbox()"> <div *ngIf="!isAdmin" (click)="openPfpLightbox()">
<img class="profile-picture" [src]="groupProfile.picture"/> <img class="profile-picture" [src]="groupProfile.picture" />
</div> </div>
<span id="username">{{groupProfile.name}}</span> <span id="username">{{groupProfile.name}}</span>
<div class="button-box"> <div class="button-box">
<button mat-icon-button *ngIf="!groupProfile.joined" <button mat-icon-button *ngIf="!groupProfile.joined" class="request-button" matTooltip="join group"
class="request-button" matTooltipShowDelay="500" (click)="joinGroup(groupProfile)" [disabled]="!groupProfile.allowedToJoinGroup">
matTooltip="join group" matTooltipShowDelay="500"
(click)="joinGroup(groupProfile)"
[disabled]="!groupProfile.allowedToJoinGroup">
<mat-icon>group_add</mat-icon> <mat-icon>group_add</mat-icon>
</button> </button>
<button mat-icon-button *ngIf="groupProfile.joined" <button mat-icon-button *ngIf="groupProfile.joined" class="request-button" matTooltip="leave group"
class="request-button" matTooltipShowDelay="500" (click)="leaveGroup(groupProfile)">
matTooltip="leave group" matTooltipShowDelay="500"
(click)="leaveGroup(groupProfile)">
<mat-icon>directions_run</mat-icon> <mat-icon>directions_run</mat-icon>
</button> </button>
<button mat-icon-button <button mat-icon-button class="request-button" matTooltip="create event" matTooltipShowDelay="500"
class="request-button" (click)="openDialog()" [disabled]="!isAdmin">
matTooltip="create event" matTooltipShowDelay="500"
(click)="openDialog()"
[disabled]="!isAdmin">
<mat-icon>event</mat-icon> <mat-icon>event</mat-icon>
</button> </button>
<div style="display: contents;" *ngIf="groupProfile.deletable"> <div style="display: contents;" *ngIf="groupProfile.deletable">
<button mat-icon-button <button mat-icon-button class="request-button" matTooltip="delete this group" matTooltipShowDelay="0"
class="request-button" (click)="deleteGroup()">
matTooltip="delete this group" matTooltipShowDelay="0"
(click)="deleteGroup()">
<mat-icon>delete</mat-icon> <mat-icon>delete</mat-icon>
</button> </button>
</div> </div>
@ -45,8 +35,8 @@
</mat-toolbar-row> </mat-toolbar-row>
<mat-toolbar-row> <mat-toolbar-row>
<div class="info-box"> <div class="info-box">
<span id="handle" class="pointer" <span id="handle" class="pointer" (click)="showUserProfile(groupProfile.creator)">created by
(click)="showUserProfile(groupProfile.creator)">created by {{groupProfile.creator.username}} {{groupProfile.creator.username}}
@{{groupProfile.creator.handle}}</span> @{{groupProfile.creator.handle}}</span>
</div> </div>
</mat-toolbar-row> </mat-toolbar-row>
@ -60,42 +50,32 @@
<mat-toolbar id="toolbar" fxShow="true" fxHide.lt-md="true"> <mat-toolbar id="toolbar" fxShow="true" fxHide.lt-md="true">
<mat-toolbar-row> <mat-toolbar-row>
<div class="hover-box" matTooltip="upload new picture" *ngIf="isAdmin" (click)="openFileUploadDialog()"> <div class="hover-box" matTooltip="upload new picture" *ngIf="isAdmin" (click)="openFileUploadDialog()">
<img class="profile-picture" [src]="groupProfile.picture"/> <img class="profile-picture" [src]="groupProfile.picture" />
<mat-icon id="icon">camera_alt</mat-icon> <mat-icon id="icon">camera_alt</mat-icon>
</div> </div>
<div *ngIf="!isAdmin" (click)="openPfpLightbox()"> <div *ngIf="!isAdmin" (click)="openPfpLightbox()">
<img class="profile-picture" [src]="groupProfile.picture"/> <img class="profile-picture" [src]="groupProfile.picture" />
</div> </div>
<span id="username">{{groupProfile.name}}</span> <span id="username">{{groupProfile.name}}</span>
<span id="handle" class="pointer" <span id="handle" class="pointer" (click)="showUserProfile(groupProfile.creator)">created by
(click)="showUserProfile(groupProfile.creator)">created by {{groupProfile.creator.username}} {{groupProfile.creator.username}}
@{{groupProfile.creator.handle}}</span> @{{groupProfile.creator.handle}}</span>
<div class="button-box"> <div class="button-box">
<button mat-icon-button *ngIf="!groupProfile.joined" <button mat-icon-button *ngIf="!groupProfile.joined" class="request-button" matTooltip="join group"
class="request-button" matTooltipShowDelay="500" (click)="joinGroup(groupProfile)" [disabled]="!groupProfile.allowedToJoinGroup">
matTooltip="join group" matTooltipShowDelay="500"
(click)="joinGroup(groupProfile)"
[disabled]="!groupProfile.allowedToJoinGroup">
<mat-icon>group_add</mat-icon> <mat-icon>group_add</mat-icon>
</button> </button>
<button mat-icon-button *ngIf="groupProfile.joined" <button mat-icon-button *ngIf="groupProfile.joined" class="request-button" matTooltip="leave group"
class="request-button" matTooltipShowDelay="500" (click)="leaveGroup(groupProfile)">
matTooltip="leave group" matTooltipShowDelay="500"
(click)="leaveGroup(groupProfile)">
<mat-icon>directions_run</mat-icon> <mat-icon>directions_run</mat-icon>
</button> </button>
<button mat-icon-button <button mat-icon-button class="request-button" matTooltip="create event" matTooltipShowDelay="500"
class="request-button" (click)="openDialog()" [disabled]="!isAdmin">
matTooltip="create event" matTooltipShowDelay="500"
(click)="openDialog()"
[disabled]="!isAdmin">
<mat-icon>event</mat-icon> <mat-icon>event</mat-icon>
</button> </button>
<div style="display: contents;" *ngIf="groupProfile.deletable"> <div style="display: contents;" *ngIf="groupProfile.deletable">
<button mat-icon-button <button mat-icon-button class="request-button" matTooltip="delete this group" matTooltipShowDelay="0"
class="request-button" (click)="deleteGroup()">
matTooltip="delete this group" matTooltipShowDelay="0"
(click)="deleteGroup()">
<mat-icon>delete</mat-icon> <mat-icon>delete</mat-icon>
</button> </button>
</div> </div>
@ -116,22 +96,18 @@
</mat-panel-title> </mat-panel-title>
</mat-expansion-panel-header> </mat-expansion-panel-header>
<div class="list"> <div class="list">
<mat-card class="card" *ngFor="let event of groupProfile.events" <mat-card class="card" *ngFor="let event of groupProfile.events" [class.selected]="event === selectedEvent"
[class.selected]="event === selectedEvent" tabindex="0">
tabindex="0">
<mat-card-header> <mat-card-header>
<mat-card-title>{{event.name}}</mat-card-title> <mat-card-title>{{event.name}}</mat-card-title>
<mat-card-subtitle>{{event.date}}</mat-card-subtitle> <mat-card-subtitle>{{event.date}}</mat-card-subtitle>
<div class="button-box"> <div class="button-box">
<button *ngIf="!event.joined" mat-icon-button class="request-button" <button *ngIf="!event.joined" mat-icon-button class="request-button" matTooltip="join event"
matTooltip="join event" matTooltipShowDelay="500" matTooltipShowDelay="500" (click)="joinEvent(event)">
(click)="joinEvent(event)">
<mat-icon>event_available</mat-icon> <mat-icon>event_available</mat-icon>
</button> </button>
<button *ngIf="event.joined" mat-icon-button class="request-button" <button *ngIf="event.joined" mat-icon-button class="request-button" matTooltip="leave event"
matTooltip="leave event" matTooltipShowDelay="500" matTooltipShowDelay="500" (click)="leaveEvent(event)" [disabled]="!event.joined">
(click)="leaveEvent(event)"
[disabled]="!event.joined">
<mat-icon>event_busy</mat-icon> <mat-icon>event_busy</mat-icon>
</button> </button>
</div> </div>
@ -145,36 +121,30 @@
Members Members
</mat-panel-title> </mat-panel-title>
</mat-expansion-panel-header> </mat-expansion-panel-header>
<div class="list">
<user-list [userList]="groupProfile.members"></user-list>
</div>
</mat-expansion-panel>
<mat-expansion-panel expanded>
<mat-expansion-panel-header>
<mat-panel-title>
Admins
</mat-panel-title>
</mat-expansion-panel-header>
<div id="list"> <div id="list">
<mat-card class="card" *ngFor="let admin of groupProfile.admins" <mat-card class="member-card" *ngFor="let user of groupProfile.members"
[class.selected]="admin === selectedAdmin" [class.selected]="user === selectedUser" tabindex="0">
tabindex="0">
<mat-card-header> <mat-card-header>
<div id="button-box"> <div mat-card-avatar (click)="showUserProfile(user)">
<button mat-icon-button [matMenuTriggerFor]="menu" id="menu-button"> <img class="card-picture" [src]="user.profilePicture" />
</div>
<mat-card-title class="pointer" (click)="showUserProfile(user)">{{user.username}}</mat-card-title>
<mat-card-subtitle class="pointer" (click)="showUserProfile(user)">{{user.handle}}</mat-card-subtitle>
<mat-card-subtitle *ngIf="user.isGroupAdmin" class="pointer" (click)="showUserProfile(user)">[admin]
</mat-card-subtitle>
<div id="icon-box" *ngIf="isAdmin">
<button mat-icon-button [matMenuTriggerFor]="menu">
<mat-icon>more_vert</mat-icon> <mat-icon>more_vert</mat-icon>
</button> </button>
<mat-menu #menu="matMenu"> <mat-menu #menu="matMenu">
<button mat-menu-item (click)="removeFriend(friend)"> <button *ngIf="!user.isGroupAdmin" mat-menu-item (click)="addGroupAdmin(user)">
<span>remove friend</span> <span>give admin rights</span>
</button>
<button *ngIf="user.isGroupAdmin" mat-menu-item (click)="removeGroupAdmin(user)">
<span>revoke admin rights</span>
</button> </button>
</mat-menu> </mat-menu>
</div> </div>
<div mat-card-avatar (click)="showFriendProfile(admin)">
<img class="profile-picture-small" [src]="admin.profilePicture"/>
</div>
<mat-card-title (click)="showFriendProfile(admin)">{{admin.username}}</mat-card-title>
<mat-card-subtitle (click)="showFriendProfile(admin)">{{admin.handle}}</mat-card-subtitle>
</mat-card-header> </mat-card-header>
</mat-card> </mat-card>
</div> </div>
@ -187,4 +157,3 @@
</div> </div>
<mat-spinner *ngIf="loading" style="margin:0 auto; margin-top: 10em;" diameter="100"></mat-spinner> <mat-spinner *ngIf="loading" style="margin:0 auto; margin-top: 10em;" diameter="100"></mat-spinner>
</div> </div>

42
src/app/components/group/group.component.sass
Unescape Escape View File

@ -121,6 +121,48 @@ $mat-card-header-size-small: 54px !default
z-index: 10 z-index: 10
object-fit: cover object-fit: cover
.member-card
box-sizing: border-box
width: 100%
margin-top: 0.5em
outline: none
user-select: none
::ng-deep .mat-card-header-text
width: 1000%
margin: auto 0 auto 24px
.mat-card-subtitle
margin: 0
word-break: break-all
.mat-card-title
margin: 0
word-break: break-all
.request-button
margin-top: 0.5em
margin-bottom: 0.5em
.pointer:hover
cursor: pointer
.icon-box
text-align: right
width: 100%
$pic-size: 40px !default
.card-picture
cursor: pointer
height: $pic-size
width: $pic-size
border-radius: 50%
flex-shrink: 0
background-size: cover
transition-duration: 0.5s
z-index: 10
object-fit: cover
.pointer .pointer
cursor: pointer cursor: pointer

42
src/app/components/group/group.component.ts
Unescape Escape View File

@ -1,15 +1,15 @@
import {Component, OnInit, ViewChild} from '@angular/core'; import { Component, OnInit, ViewChild } from '@angular/core';
import {Data, NavigationEnd, Router} from '@angular/router'; import { Data, NavigationEnd, Router } from '@angular/router';
import {User} from 'src/app/models/user'; import { User } from 'src/app/models/user';
import {MatSort} from '@angular/material/sort'; import { MatSort } from '@angular/material/sort';
import {RequestService} from 'src/app/services/request/request.service'; import { RequestService } from 'src/app/services/request/request.service';
import {DatasharingService} from '../../services/datasharing.service'; import { DatasharingService } from '../../services/datasharing.service';
import {GroupService} from 'src/app/services/group/group.service'; import { GroupService } from 'src/app/services/group/group.service';
import {Group} from 'src/app/models/group'; import { Group } from 'src/app/models/group';
import {Event} from 'src/app/models/event'; import { Event } from 'src/app/models/event';
import {MatDialog, MatDialogRef} from '@angular/material/dialog'; import { MatDialog, MatDialogRef } from '@angular/material/dialog';
import {DialogGroupFileUploadComponent} from './fileUpload/fileUpload.component'; import { DialogGroupFileUploadComponent } from './fileUpload/fileUpload.component';
import {Lightbox} from 'ngx-lightbox'; import { Lightbox } from 'ngx-lightbox';
// DIALOG COMPONENT to create events // DIALOG COMPONENT to create events
@Component({ @Component({
@ -100,7 +100,7 @@ export class GroupComponent implements OnInit {
}); });
} }
@ViewChild(MatSort, {static: true}) sort: MatSort; @ViewChild(MatSort, { static: true }) sort: MatSort;
ngOnInit() { ngOnInit() {
this.loading = true; this.loading = true;
@ -185,9 +185,9 @@ export class GroupComponent implements OnInit {
private deleteGroup() { private deleteGroup() {
this.groupService.deleteGroup(this.groupProfile.id) this.groupService.deleteGroup(this.groupProfile.id)
.subscribe(response => { .subscribe(response => {
this.router.navigateByUrl(''); this.router.navigateByUrl('');
}); });
} }
leaveGroup() { leaveGroup() {
@ -198,11 +198,19 @@ export class GroupComponent implements OnInit {
}); });
} }
addGroupAdmin(user: User) {
this.groupService.addGroupAdmin(user.userID.toString(), this.id).subscribe();
}
removeGroupAdmin(user: User) {
this.groupService.removeGroupAdmin(user.userID.toString(), this.id).subscribe();
}
openPfpLightbox() { openPfpLightbox() {
this.lightbox.open([{ this.lightbox.open([{
src: this.groupProfile.picture, src: this.groupProfile.picture,
thumb: this.groupProfile.picture, thumb: this.groupProfile.picture,
}], 0, {disableScrolling: true}); }], 0, { disableScrolling: true });
} }
} }

15
src/app/models/group.ts
Unescape Escape View File

@ -1,7 +1,7 @@
import {User} from 'src/app/models/user'; import { User } from 'src/app/models/user';
import {Event} from 'src/app/models/event'; import { Event } from 'src/app/models/event';
import {IGroup} from './interfaces/IGroup'; import { IGroup } from './interfaces/IGroup';
import {environment} from 'src/environments/environment'; import { environment } from 'src/environments/environment';
export class Group { export class Group {
id: number; id: number;
@ -36,6 +36,13 @@ export class Group {
user = new User(); user = new User();
this.admins.push(user.assignFromResponse(admin)); this.admins.push(user.assignFromResponse(admin));
} }
for (const admin of this.admins) {
for (const member of this.members) {
if (member.userID === admin.userID) {
member.isGroupAdmin = true;
}
}
}
} }
if (groupDataResponse.events) { if (groupDataResponse.events) {
for (const event of groupDataResponse.events) { for (const event of groupDataResponse.events) {

13
src/app/models/user.ts
Unescape Escape View File

@ -1,9 +1,9 @@
import {FriendRequest} from 'src/app/models/friendRequest'; import { FriendRequest } from 'src/app/models/friendRequest';
import {FriendInfo} from 'src/app/models/friendinfo'; import { FriendInfo } from 'src/app/models/friendinfo';
import {GroupInfo} from 'src/app/models/groupinfo'; import { GroupInfo } from 'src/app/models/groupinfo';
import {Post} from 'src/app/models/post'; import { Post } from 'src/app/models/post';
import {IUser} from './interfaces/IUser'; import { IUser } from './interfaces/IUser';
import {environment} from 'src/environments/environment'; import { environment } from 'src/environments/environment';
export class User { export class User {
loggedIn = false; loggedIn = false;
@ -18,6 +18,7 @@ export class User {
joinedAt: string; joinedAt: string;
friendCount: number; friendCount: number;
groupCount: number; groupCount: number;
isGroupAdmin: boolean;
darkmode = false; darkmode = false;

90
src/app/services/group/group.service.ts
Unescape Escape View File

@ -1,14 +1,14 @@
import {Injectable} from '@angular/core'; import { Injectable } from '@angular/core';
import {HttpClient} from '@angular/common/http'; import { HttpClient } from '@angular/common/http';
import {environment} from 'src/environments/environment'; import { environment } from 'src/environments/environment';
import {User} from 'src/app/models/user'; import { User } from 'src/app/models/user';
import {Event} from 'src/app/models/event'; import { Event } from 'src/app/models/event';
import {BehaviorSubject} from 'rxjs'; import { BehaviorSubject } from 'rxjs';
import {Group} from 'src/app/models/group'; import { Group } from 'src/app/models/group';
import {tap} from 'rxjs/operators'; import { tap } from 'rxjs/operators';
import {BaseService} from '../base.service'; import { BaseService } from '../base.service';
import {IFileUploadResult} from '../../models/interfaces/IFileUploadResult'; import { IFileUploadResult } from '../../models/interfaces/IFileUploadResult';
import {DatasharingService} from 'src/app/services/datasharing.service'; import { DatasharingService } from 'src/app/services/datasharing.service';
const getGroupGraphqlQuery = `query($groupId: ID!) { const getGroupGraphqlQuery = `query($groupId: ID!) {
getGroup(groupId:$groupId){ getGroup(groupId:$groupId){
@ -18,7 +18,7 @@ const getGroupGraphqlQuery = `query($groupId: ID!) {
picture picture
deletable deletable
creator{id name handle} creator{id name handle}
admins{id name handle profilePicture} admins{id name handle}
members{id name handle profilePicture} members{id name handle profilePicture}
events{id name dueDate joined} events{id name dueDate joined}
} }
@ -40,14 +40,14 @@ export class GroupService extends BaseService {
*/ */
private static buildGetGroupBody(id: string): any { private static buildGetGroupBody(id: string): any {
return { return {
query: getGroupGraphqlQuery, variables: {groupId: id} query: getGroupGraphqlQuery, variables: { groupId: id }
}; };
} }
public getGroupData(groupId: string) { public getGroupData(groupId: string) {
const url = environment.graphQLUrl; const url = environment.graphQLUrl;
return this.http.post(url, GroupService.buildGetGroupBody(groupId), {headers: this.headers}) return this.http.post(url, GroupService.buildGetGroupBody(groupId), { headers: this.headers })
.pipe(this.retryRated()) .pipe(this.retryRated())
.pipe(tap(response => { .pipe(tap(response => {
const group_ = new Group(); const group_ = new Group();
@ -73,13 +73,13 @@ export class GroupService extends BaseService {
}; };
return this.postGraphql(body, null, 0) return this.postGraphql(body, null, 0)
.pipe(tap(response => { .pipe(tap(response => {
const event = new Event(); const event = new Event();
event.assignFromResponse(response.data.createEvent); event.assignFromResponse(response.data.createEvent);
const group = this.group.getValue(); const group = this.group.getValue();
group.events.push(event); group.events.push(event);
this.group.next(group); this.group.next(group);
})); }));
} }
@ -96,15 +96,15 @@ export class GroupService extends BaseService {
}; };
return this.postGraphql(body, null, 0) return this.postGraphql(body, null, 0)
.pipe(tap(response => { .pipe(tap(response => {
const admins: User[] = []; const admins: User[] = [];
for (const admin of response.data.addGroupAdmin) { for (const admin of response.data.addGroupAdmin) {
admins.push(admin.assignFromResponse(admin)); admins.push(admin.assignFromResponse(admin));
} }
const group = this.group.getValue(); const group = this.group.getValue();
group.admins = admins; group.admins = admins;
this.group.next(group); this.group.next(group);
})); }));
} }
public removeGroupAdmin(userId: string, groupId: string) { public removeGroupAdmin(userId: string, groupId: string) {
@ -120,15 +120,15 @@ export class GroupService extends BaseService {
}; };
return this.postGraphql(body, null, 0) return this.postGraphql(body, null, 0)
.pipe(tap(response => { .pipe(tap(response => {
const admins: User[] = []; const admins: User[] = [];
for (const admin of response.data.addGroupAdmin) { for (const admin of response.data.addGroupAdmin) {
admins.push(admin.assignFromResponse(admin)); admins.push(admin.assignFromResponse(admin));
} }
const group = this.group.getValue(); const group = this.group.getValue();
group.admins = admins; group.admins = admins;
this.group.next(group); this.group.next(group);
})); }));
} }
public joinEvent(eventId: string) { public joinEvent(eventId: string) {
@ -176,9 +176,9 @@ export class GroupService extends BaseService {
} }
}; };
return this.postGraphql(body) return this.postGraphql(body)
.pipe(tap(response => { .pipe(tap(response => {
this.data.deleteGroup(groupId); this.data.deleteGroup(groupId);
})); }));
} }
public leaveGroup(groupId: number) { public leaveGroup(groupId: number) {
@ -190,8 +190,8 @@ export class GroupService extends BaseService {
} }
}; };
return this.postGraphql(body) return this.postGraphql(body)
.pipe(tap(response => { .pipe(tap(response => {
this.data.deleteGroup(groupId); this.data.deleteGroup(groupId);
})); }));
} }
} }

Write Preview
Loading…
Cancel
Save