Merge branch 'max_dev' of Software_Engineering_I/greenvironment-frontend into master

master
Max_ES 5 years ago committed by Gitea
commit d0483dcb1c

@ -22,8 +22,9 @@
</div> </div>
</div> </div>
<mat-form-field class="input"> <mat-form-field class="input">
<textarea matInput #content type="text" (input)="onTextInputChange()" [(ngModel)]="textInputValue" [disabled]="posting" <textarea matInput #content type="text" maxlength="2048" (input)="onTextInputChange()" [(ngModel)]="textInputValue" [disabled]="posting"
mat-autosize="true" matAutosizeMaxRows="3" placeholder="post something"></textarea> mat-autosize="true" matAutosizeMaxRows="3" placeholder="post something"></textarea>
<mat-hint align="end">{{content.value.length}} / 2048</mat-hint>
</mat-form-field> </mat-form-field>
<input style="display: none" id="fileInput" type="file" accept="video/*,image/*" (change)="onFileInputChange($event)" #fileInput> <input style="display: none" id="fileInput" type="file" accept="video/*,image/*" (change)="onFileInputChange($event)" #fileInput>
<div class="input"> <div class="input">

@ -13,30 +13,20 @@
<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"
matTooltip="delete this group" matTooltipShowDelay="0"
(click)="deleteGroup()"> (click)="deleteGroup()">
<mat-icon>delete</mat-icon> <mat-icon>delete</mat-icon>
</button> </button>
@ -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>
@ -67,34 +57,24 @@
<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"
matTooltip="delete this group" matTooltipShowDelay="0"
(click)="deleteGroup()"> (click)="deleteGroup()">
<mat-icon>delete</mat-icon> <mat-icon>delete</mat-icon>
</button> </button>
@ -116,24 +96,24 @@
</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>
<button *ngIf="event.deletable" mat-icon-button class="request-button" matTooltip="delete event"
matTooltipShowDelay="0" (click)="deleteEvent(event)">
<mat-icon>delete</mat-icon>
</button>
</div> </div>
</mat-card-header> </mat-card-header>
</mat-card> </mat-card>
@ -145,8 +125,32 @@
Members Members
</mat-panel-title> </mat-panel-title>
</mat-expansion-panel-header> </mat-expansion-panel-header>
<div class="list"> <div id="list">
<user-list [userList]="groupProfile.members"></user-list> <mat-card class="member-card" *ngFor="let user of groupProfile.members"
[class.selected]="user === selectedUser" tabindex="0">
<mat-card-header>
<div mat-card-avatar (click)="showUserProfile(user)">
<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>
</button>
<mat-menu #menu="matMenu">
<button *ngIf="!user.isGroupAdmin" mat-menu-item (click)="addGroupAdmin(user)">
<span>give admin rights</span>
</button>
<button *ngIf="user.isGroupAdmin" mat-menu-item (click)="removeGroupAdmin(user)">
<span>revoke admin rights</span>
</button>
</mat-menu>
</div>
</mat-card-header>
</mat-card>
</div> </div>
</mat-expansion-panel> </mat-expansion-panel>
</mat-accordion> </mat-accordion>
@ -157,4 +161,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>

@ -107,12 +107,62 @@ $mat-card-header-size: 100px !default
margin-top: 0.5em margin-top: 0.5em
margin-bottom: 0.5em margin-bottom: 0.5em
.profile-picture .profile-picture:hover
background-image: url(https://material.angular.io/assets/img/examples/shiba1.jpg) cursor: pointer
$mat-card-header-size-small: 54px !default
.profile-picture-small
height: $mat-card-header-size-small
width: $mat-card-header-size-small
border-radius: 50%
flex-shrink: 0
background-size: cover background-size: cover
transition-duration: 0.5s
z-index: 10
object-fit: cover
.profile-picture:hover .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 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

@ -174,6 +174,10 @@ export class GroupComponent implements OnInit {
}); });
} }
public deleteEvent(event: Event) {
this.groupService.deleteEvent(event.id).subscribe();
}
public showUserProfile(user: User) { public showUserProfile(user: User) {
this.router.navigate(['profile/' + user.userID]); this.router.navigate(['profile/' + user.userID]);
} }
@ -198,6 +202,14 @@ 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,

@ -5,6 +5,7 @@ export class Event {
name: string; name: string;
date: string; date: string;
joined: boolean; joined: boolean;
deletable: boolean;
public assignFromResponse(eventDataResponse: IEvent) { public assignFromResponse(eventDataResponse: IEvent) {
this.id = eventDataResponse.id; this.id = eventDataResponse.id;
@ -12,6 +13,7 @@ export class Event {
const temp = new Date(Number(eventDataResponse.dueDate)); const temp = new Date(Number(eventDataResponse.dueDate));
this.date = temp.toLocaleString('en-GB'); this.date = temp.toLocaleString('en-GB');
this.joined = eventDataResponse.joined; this.joined = eventDataResponse.joined;
this.deletable = eventDataResponse.deletable;
return this; return this;
} }

@ -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) {

@ -7,4 +7,6 @@ export interface IEvent {
dueDate: string; dueDate: string;
joined: boolean; joined: boolean;
deletable: boolean;
} }

@ -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;

@ -20,7 +20,7 @@ const getGroupGraphqlQuery = `query($groupId: ID!) {
creator{id name handle} creator{id name handle}
admins{id name handle} admins{id name handle}
members{id name handle profilePicture} members{id name handle profilePicture}
events{id name dueDate joined} events{id name dueDate joined deletable}
} }
}`; }`;
@ -82,6 +82,55 @@ export class GroupService extends BaseService {
})); }));
} }
public addGroupAdmin(userId: string, groupId: string) {
const body = {
query: `mutation($groupId: ID!, $userId: ID!) {
addGroupAdmin(groupId: $groupId, userId: $userId) {
admins{id name handle profilePicture}
}
}`, variables: {
userId,
groupId
}
};
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);
}));
}
public removeGroupAdmin(userId: string, groupId: string) {
const body = {
query: `mutation($groupId: ID!, $userId: ID!) {
removeGroupAdmin(groupId: $groupId, userId: $userId) {
admins{id name handle profilePicture}
}
}`, variables: {
userId,
groupId
}
};
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);
}));
}
public joinEvent(eventId: string) { public joinEvent(eventId: string) {
const body = { const body = {
query: `mutation($eventId: ID!) { query: `mutation($eventId: ID!) {
@ -97,8 +146,6 @@ export class GroupService extends BaseService {
} }
public leaveEvent(eventId: string) { public leaveEvent(eventId: string) {
const headers = new Headers();
headers.set('Content-Type', 'application/json');
const body = { const body = {
query: `mutation($eventId: ID!) { query: `mutation($eventId: ID!) {
leaveEvent(eventId: $eventId) { leaveEvent(eventId: $eventId) {
@ -108,7 +155,31 @@ export class GroupService extends BaseService {
eventId: eventId eventId: eventId
} }
}; };
return this.postGraphql(body); return this.postGraphql(body)
.pipe(this.retryRated());
}
public deleteEvent(eventId: string) {
const body = {
query: `mutation($eventId: ID!) {
deleteEvent(eventId: $eventId) {
joined
}
}`, variables: {
eventId
}
};
return this.postGraphql(body)
.pipe(this.retryRated())
.pipe(tap(response => {
const group = this.group.getValue();
for (let i = 0; i < group.events.length; i++) {
if (group.events[i].id === eventId) {
group.events.splice(i, 1);
}
}
this.group.next(group);
}));
} }
public changeProfilePicture(file: any, id: number) { public changeProfilePicture(file: any, id: number) {

Loading…
Cancel
Save