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

src/app/components/feed/feed.component.html

@@ -22,8 +22,9 @@
           </div>
         </div>
         <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-hint align="end">{{content.value.length}} / 2048</mat-hint>
         </mat-form-field>
         <input style="display: none" id="fileInput" type="file" accept="video/*,image/*" (change)="onFileInputChange($event)" #fileInput>
         <div class="input">

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

@@ -4,40 +4,30 @@
     <mat-toolbar id="toolbar" fxShow="true" fxHide.gt-sm="true">
       <mat-toolbar-row>
         <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>
         </div>
         <div *ngIf="!isAdmin" (click)="openPfpLightbox()">
-          <img class="profile-picture" [src]="groupProfile.picture"/>
+          <img class="profile-picture" [src]="groupProfile.picture" />
         </div>
 
         <span id="username">{{groupProfile.name}}</span>
         <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>
           </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>
           </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>
           </button>
           <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>
             </button>
           </div>
@@ -45,8 +35,8 @@
       </mat-toolbar-row>
       <mat-toolbar-row>
         <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>
         </div>
       </mat-toolbar-row>
@@ -60,42 +50,32 @@
     <mat-toolbar id="toolbar" fxShow="true" fxHide.lt-md="true">
       <mat-toolbar-row>
         <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>
         </div>
         <div *ngIf="!isAdmin" (click)="openPfpLightbox()">
-          <img class="profile-picture" [src]="groupProfile.picture"/>
+          <img class="profile-picture" [src]="groupProfile.picture" />
         </div>
         <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>
         <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>
           </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>
           </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>
           </button>
           <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>
             </button>
           </div>
@@ -116,24 +96,24 @@
             </mat-panel-title>
           </mat-expansion-panel-header>
           <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-title>{{event.name}}</mat-card-title>
                 <mat-card-subtitle>{{event.date}}</mat-card-subtitle>
                 <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>
                   </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>
                   </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>
               </mat-card-header>
             </mat-card>
@@ -145,8 +125,32 @@
               Members
             </mat-panel-title>
           </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>
         </mat-expansion-panel>
       </mat-accordion>
@@ -156,5 +160,4 @@
     <h1>Group not found :(</h1>
   </div>
   <mat-spinner *ngIf="loading" style="margin:0 auto; margin-top: 10em;" diameter="100"></mat-spinner>
-</div>
+</div>
-

src/app/components/group/group.component.sass

@@ -107,13 +107,63 @@ $mat-card-header-size: 100px !default
     margin-top: 0.5em
     margin-bottom: 0.5em
 
-  .profile-picture
-    background-image: url(https://material.angular.io/assets/img/examples/shiba1.jpg)
-    background-size: cover
-
   .profile-picture:hover
     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
+  transition-duration: 0.5s
+  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
 

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

@@ -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
 @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;
@@ -174,6 +174,10 @@ export class GroupComponent implements OnInit {
     });
   }
 
+  public deleteEvent(event: Event) {
+    this.groupService.deleteEvent(event.id).subscribe();
+  }
+
   public showUserProfile(user: User) {
     this.router.navigate(['profile/' + user.userID]);
   }
@@ -185,9 +189,9 @@ export class GroupComponent implements OnInit {
 
   private deleteGroup() {
     this.groupService.deleteGroup(this.groupProfile.id)
-    .subscribe(response => {
+      .subscribe(response => {
-      this.router.navigateByUrl('');
+        this.router.navigateByUrl('');
-    });
+      });
   }
 
   leaveGroup() {
@@ -198,11 +202,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 });
   }
 
 }

src/app/models/event.ts

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

src/app/models/group.ts

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

src/app/models/interfaces/IEvent.ts

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

src/app/models/user.ts

@@ -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 {
   loggedIn = false;
@@ -18,6 +18,7 @@ export class User {
   joinedAt: string;
   friendCount: number;
   groupCount: number;
+  isGroupAdmin: boolean;
 
   darkmode = false;
 

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

@@ -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!) {
   getGroup(groupId:$groupId){
@@ -20,7 +20,7 @@ const getGroupGraphqlQuery = `query($groupId: ID!) {
       creator{id name handle}
       admins{id name handle}
       members{id name handle profilePicture}
-      events{id name dueDate joined}
+      events{id name dueDate joined deletable}
   }
 }`;
 
@@ -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,13 +73,62 @@ export class GroupService extends BaseService {
     };
 
     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);
-    }));
+      }));
+  }
+
+
+  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) {
@@ -97,8 +146,6 @@ export class GroupService extends BaseService {
   }
 
   public leaveEvent(eventId: string) {
-    const headers = new Headers();
-    headers.set('Content-Type', 'application/json');
     const body = {
       query: `mutation($eventId: ID!) {
       leaveEvent(eventId: $eventId) {
@@ -108,7 +155,31 @@ export class GroupService extends BaseService {
         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) {
@@ -127,9 +198,9 @@ export class GroupService extends BaseService {
       }
     };
     return this.postGraphql(body)
-    .pipe(tap(response => {
+      .pipe(tap(response => {
-      this.data.deleteGroup(groupId);
+        this.data.deleteGroup(groupId);
-    }));
+      }));
   }
 
   public leaveGroup(groupId: number) {
@@ -141,8 +212,8 @@ export class GroupService extends BaseService {
       }
     };
     return this.postGraphql(body)
-    .pipe(tap(response => {
+      .pipe(tap(response => {
-      this.data.deleteGroup(groupId);
+        this.data.deleteGroup(groupId);
-    }));
+      }));
   }
 }