From fae9e79f24489d3deedda353d7c3139d4dafa78d Mon Sep 17 00:00:00 2001 From: Max Date: Sun, 26 Jan 2020 20:56:22 +0100 Subject: [PATCH] Add add/remove group admin functionallity --- src/app/components/group/group.component.html | 125 +++++++----------- src/app/components/group/group.component.sass | 42 ++++++ src/app/components/group/group.component.ts | 42 +++--- src/app/models/group.ts | 15 ++- src/app/models/user.ts | 13 +- src/app/services/group/group.service.ts | 92 ++++++------- 6 files changed, 178 insertions(+), 151 deletions(-) diff --git a/src/app/components/group/group.component.html b/src/app/components/group/group.component.html index 1196c44..64677ef 100644 --- a/src/app/components/group/group.component.html +++ b/src/app/components/group/group.component.html @@ -4,40 +4,30 @@
- + camera_alt
- +
{{groupProfile.name}}
- - -
-
@@ -45,8 +35,8 @@
- created by {{groupProfile.creator.username}} + created by + {{groupProfile.creator.username}} @{{groupProfile.creator.handle}}
@@ -60,42 +50,32 @@
- + camera_alt
- +
{{groupProfile.name}} - created by {{groupProfile.creator.username}} + created by + {{groupProfile.creator.username}} @{{groupProfile.creator.handle}}
- - -
-
@@ -116,22 +96,18 @@
- + {{event.name}} {{event.date}}
- -
@@ -145,36 +121,30 @@ Members -
- -
- - - - - Admins - -
- + -
- - +
-
- -
- {{admin.username}} - {{admin.handle}}
@@ -186,5 +156,4 @@

Group not found :(

-
- +
\ No newline at end of file diff --git a/src/app/components/group/group.component.sass b/src/app/components/group/group.component.sass index 6b9947d..8125bfb 100644 --- a/src/app/components/group/group.component.sass +++ b/src/app/components/group/group.component.sass @@ -121,6 +121,48 @@ $mat-card-header-size-small: 54px !default z-index: 10 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 cursor: pointer diff --git a/src/app/components/group/group.component.ts b/src/app/components/group/group.component.ts index 014483b..2d7cb5f 100644 --- a/src/app/components/group/group.component.ts +++ b/src/app/components/group/group.component.ts @@ -1,15 +1,15 @@ -import {Component, OnInit, ViewChild} from '@angular/core'; -import {Data, NavigationEnd, Router} from '@angular/router'; -import {User} from 'src/app/models/user'; -import {MatSort} from '@angular/material/sort'; -import {RequestService} from 'src/app/services/request/request.service'; -import {DatasharingService} from '../../services/datasharing.service'; -import {GroupService} from 'src/app/services/group/group.service'; -import {Group} from 'src/app/models/group'; -import {Event} from 'src/app/models/event'; -import {MatDialog, MatDialogRef} from '@angular/material/dialog'; -import {DialogGroupFileUploadComponent} from './fileUpload/fileUpload.component'; -import {Lightbox} from 'ngx-lightbox'; +import { Component, OnInit, ViewChild } from '@angular/core'; +import { Data, NavigationEnd, Router } from '@angular/router'; +import { User } from 'src/app/models/user'; +import { MatSort } from '@angular/material/sort'; +import { RequestService } from 'src/app/services/request/request.service'; +import { DatasharingService } from '../../services/datasharing.service'; +import { GroupService } from 'src/app/services/group/group.service'; +import { Group } from 'src/app/models/group'; +import { Event } from 'src/app/models/event'; +import { MatDialog, MatDialogRef } from '@angular/material/dialog'; +import { DialogGroupFileUploadComponent } from './fileUpload/fileUpload.component'; +import { Lightbox } from 'ngx-lightbox'; // DIALOG COMPONENT to create events @Component({ @@ -100,7 +100,7 @@ export class GroupComponent implements OnInit { }); } - @ViewChild(MatSort, {static: true}) sort: MatSort; + @ViewChild(MatSort, { static: true }) sort: MatSort; ngOnInit() { this.loading = true; @@ -185,9 +185,9 @@ export class GroupComponent implements OnInit { private deleteGroup() { this.groupService.deleteGroup(this.groupProfile.id) - .subscribe(response => { - this.router.navigateByUrl(''); - }); + .subscribe(response => { + this.router.navigateByUrl(''); + }); } 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() { this.lightbox.open([{ src: this.groupProfile.picture, thumb: this.groupProfile.picture, - }], 0, {disableScrolling: true}); + }], 0, { disableScrolling: true }); } } diff --git a/src/app/models/group.ts b/src/app/models/group.ts index 51be07f..908613e 100644 --- a/src/app/models/group.ts +++ b/src/app/models/group.ts @@ -1,7 +1,7 @@ -import {User} from 'src/app/models/user'; -import {Event} from 'src/app/models/event'; -import {IGroup} from './interfaces/IGroup'; -import {environment} from 'src/environments/environment'; +import { User } from 'src/app/models/user'; +import { Event } from 'src/app/models/event'; +import { IGroup } from './interfaces/IGroup'; +import { environment } from 'src/environments/environment'; export class Group { id: number; @@ -36,6 +36,13 @@ export class Group { user = new User(); 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) { for (const event of groupDataResponse.events) { diff --git a/src/app/models/user.ts b/src/app/models/user.ts index 6836d10..7e435eb 100644 --- a/src/app/models/user.ts +++ b/src/app/models/user.ts @@ -1,9 +1,9 @@ -import {FriendRequest} from 'src/app/models/friendRequest'; -import {FriendInfo} from 'src/app/models/friendinfo'; -import {GroupInfo} from 'src/app/models/groupinfo'; -import {Post} from 'src/app/models/post'; -import {IUser} from './interfaces/IUser'; -import {environment} from 'src/environments/environment'; +import { FriendRequest } from 'src/app/models/friendRequest'; +import { FriendInfo } from 'src/app/models/friendinfo'; +import { GroupInfo } from 'src/app/models/groupinfo'; +import { Post } from 'src/app/models/post'; +import { IUser } from './interfaces/IUser'; +import { environment } from 'src/environments/environment'; export class User { loggedIn = false; @@ -18,6 +18,7 @@ export class User { joinedAt: string; friendCount: number; groupCount: number; + isGroupAdmin: boolean; darkmode = false; diff --git a/src/app/services/group/group.service.ts b/src/app/services/group/group.service.ts index 5d12fb8..7527fe6 100644 --- a/src/app/services/group/group.service.ts +++ b/src/app/services/group/group.service.ts @@ -1,14 +1,14 @@ -import {Injectable} from '@angular/core'; -import {HttpClient} from '@angular/common/http'; -import {environment} from 'src/environments/environment'; -import {User} from 'src/app/models/user'; -import {Event} from 'src/app/models/event'; -import {BehaviorSubject} from 'rxjs'; -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'; +import { Injectable } from '@angular/core'; +import { HttpClient } from '@angular/common/http'; +import { environment } from 'src/environments/environment'; +import { User } from 'src/app/models/user'; +import { Event } from 'src/app/models/event'; +import { BehaviorSubject } from 'rxjs'; +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){ @@ -18,7 +18,7 @@ const getGroupGraphqlQuery = `query($groupId: ID!) { picture deletable creator{id name handle} - admins{id name handle profilePicture} + admins{id name handle} members{id name handle profilePicture} events{id name dueDate joined} } @@ -40,14 +40,14 @@ export class GroupService extends BaseService { */ private static buildGetGroupBody(id: string): any { return { - query: getGroupGraphqlQuery, variables: {groupId: id} + query: getGroupGraphqlQuery, variables: { groupId: id } }; } public getGroupData(groupId: string) { 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(tap(response => { const group_ = new Group(); @@ -73,16 +73,16 @@ export class GroupService extends BaseService { }; return this.postGraphql(body, null, 0) - .pipe(tap(response => { - const event = new Event(); - event.assignFromResponse(response.data.createEvent); - const group = this.group.getValue(); - group.events.push(event); - this.group.next(group); - })); + .pipe(tap(response => { + const event = new Event(); + event.assignFromResponse(response.data.createEvent); + const group = this.group.getValue(); + group.events.push(event); + this.group.next(group); + })); } - + public addGroupAdmin(userId: string, groupId: string) { const body = { query: `mutation($groupId: ID!, $userId: ID!) { @@ -96,15 +96,15 @@ export class GroupService extends BaseService { }; return this.postGraphql(body, null, 0) - .pipe(tap(response => { - const admins: User[] = []; - for (const admin of response.data.addGroupAdmin) { - admins.push(admin.assignFromResponse(admin)); - } - const group = this.group.getValue(); - group.admins = admins; - this.group.next(group); - })); + .pipe(tap(response => { + const admins: User[] = []; + for (const admin of response.data.addGroupAdmin) { + admins.push(admin.assignFromResponse(admin)); + } + const group = this.group.getValue(); + group.admins = admins; + this.group.next(group); + })); } public removeGroupAdmin(userId: string, groupId: string) { @@ -120,15 +120,15 @@ export class GroupService extends BaseService { }; return this.postGraphql(body, null, 0) - .pipe(tap(response => { - const admins: User[] = []; - for (const admin of response.data.addGroupAdmin) { - admins.push(admin.assignFromResponse(admin)); - } - const group = this.group.getValue(); - group.admins = admins; - this.group.next(group); - })); + .pipe(tap(response => { + const admins: User[] = []; + for (const admin of response.data.addGroupAdmin) { + admins.push(admin.assignFromResponse(admin)); + } + const group = this.group.getValue(); + group.admins = admins; + this.group.next(group); + })); } public joinEvent(eventId: string) { @@ -176,9 +176,9 @@ export class GroupService extends BaseService { } }; return this.postGraphql(body) - .pipe(tap(response => { - this.data.deleteGroup(groupId); - })); + .pipe(tap(response => { + this.data.deleteGroup(groupId); + })); } public leaveGroup(groupId: number) { @@ -190,8 +190,8 @@ export class GroupService extends BaseService { } }; return this.postGraphql(body) - .pipe(tap(response => { - this.data.deleteGroup(groupId); - })); + .pipe(tap(response => { + this.data.deleteGroup(groupId); + })); } }