Add group picture upload

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

@@ -1,6 +1,6 @@
 import {Component} from '@angular/core';
 import {MatDialogRef} from '@angular/material/dialog';
-import {SelfService} from '../../../services/selfservice/self.service';
+import {GroupService} from '../../../services/group/group.service';
 import {environment} from '../../../../environments/environment';
 import {BehaviorSubject} from 'rxjs';
 
@@ -16,8 +16,9 @@ export class DialogGroupFileUploadComponent {
   public profilePictureUrl: BehaviorSubject<string | null>;
   private file;
   public localFileUrl;
+  groupId: number;
 
-  constructor(public dialogRef: MatDialogRef<DialogGroupFileUploadComponent>, private selfService: SelfService) {
+  constructor(public dialogRef: MatDialogRef<DialogGroupFileUploadComponent>, private groupService: GroupService) {
     this.profilePictureUrl = new BehaviorSubject<string | null>(null);
   }
 
@@ -42,7 +43,7 @@ export class DialogGroupFileUploadComponent {
     if (this.file) {
       this.errorOccurred = false;
       this.uploading = true;
-      this.selfService.changeProfilePicture(this.file).subscribe((response) => {
+      this.groupService.changeProfilePicture(this.file, this.groupId).subscribe((response) => {
         this.uploading = false;
         if (response.success) {
           this.profilePictureUrl.next(environment.greenvironmentUrl + response.fileName);

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

@@ -50,19 +50,37 @@ $mat-card-header-size: 100px !default
   #handle
     font-size: 14px
 
-  .profile-picture
-    background-image: url(https://material.angular.io/assets/img/examples/shiba1.jpg)
-    height: $mat-card-header-size
-    width: $mat-card-header-size
-    border-radius: 50%
-    flex-shrink: 0
-    background-size: cover
+#icon
+  display: none
+  position: absolute
+  z-index: 11
+  color: white
 
-    &:hover
-      height: 200
-    // Makes `<img>` tags behave like `background-size: cover`. Not supported
-    // in IE, but we're using it as a progressive enhancement.
-    object-fit: cover
+$mat-card-header-size: 100px !default
+.hover-box
+  cursor: pointer
+  text-align: center
+  display: flex
+  justify-content: center
+  align-items: center
+  &:hover
+    .profile-picture
+      filter: brightness(70%)
+    #icon
+      display: block
+      filter: none
+// Makes `<img>` tags behave like `background-size: cover`. Not supported
+// in IE, but we're using it as a progressive enhancement.
+
+.profile-picture
+  height: $mat-card-header-size
+  width: $mat-card-header-size
+  border-radius: 50%
+  flex-shrink: 0
+  background-size: cover
+  transition-duration: 0.5s
+  z-index: 10
+  object-fit: cover
 
 .card
   box-sizing: border-box

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

@@ -8,6 +8,7 @@ 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';
 
 // DIALOG COMPONENT to create events
 @Component({
@@ -81,7 +82,7 @@ export class GroupComponent implements OnInit {
     this.data.currentUserInfo.subscribe(user => {
       this.self = user;
     });
-    this.groupService.getGroupData(this.id);
+    this.groupService.getGroupData(this.id).subscribe();
     this.groupService.group.subscribe(response => {
       this.isAdmin = false;
       if (response) {
@@ -109,6 +110,21 @@ export class GroupComponent implements OnInit {
     });
   }
 
+  /**
+   * Opens the file upload dialog
+   */
+  openFileUploadDialog() {
+    const dialogRef = this.dialog.open(DialogGroupFileUploadComponent, {
+      width: '400px'
+    });
+    dialogRef.componentInstance.groupId = this.groupProfile.id;
+    dialogRef.componentInstance.profilePictureUrl.subscribe((profilePictureUrl) => {
+      if (profilePictureUrl) {
+        this.groupProfile.picture = profilePictureUrl;
+      }
+    });
+  }
+
   public joinGroup(group: Group) {
     group.allowedToJoinGroup = false;
     this.requestService.joinGroup(group);

src/app/components/profile/profile.component.ts

@@ -6,7 +6,6 @@ import {RequestService} from 'src/app/services/request/request.service';
 import {DatasharingService} from '../../services/datasharing.service';
 import {ProfileService} from 'src/app/services/profile/profile.service';
 import {HttpClient} from '@angular/common/http';
-import {MatSnackBar} from '@angular/material/snack-bar';
 import {SelfService} from '../../services/selfservice/self.service';
 import {MatDialog} from '@angular/material';
 import {DialogFileUploadComponent} from './fileUpload/fileUpload.component';
@@ -29,7 +28,6 @@ export class ProfileComponent implements OnInit {
 
   constructor(
     private http: HttpClient,
-    private _snackBar: MatSnackBar,
     private router: Router,
     private requestService: RequestService,
     private data: DatasharingService,

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

@@ -44,21 +44,17 @@ export class GroupService extends BaseService {
 
   public getGroupData(groupId: string) {
     const url = environment.graphQLUrl;
-    const headers = new Headers();
-    headers.set('Content-Type', 'application/json');
 
-    return this.http.post(url, GroupService.buildGetGroupBody, {headers: this.headers})
+    return this.http.post(url, GroupService.buildGetGroupBody(groupId), {headers: this.headers})
       .pipe(this.retryRated())
       .pipe(tap(response => {
         const group_ = new Group();
-        this.group.next(group_.assignFromResponse(response));
-        return this.group;
+        this.group.next(group_.assignFromResponse(response.data.getGroup));
+        return this.group.getValue();
       }));
   }
 
   public createEvent(name: string, date: string, groupId: string) {
-    const headers = new Headers();
-    headers.set('Content-Type', 'application/json');
     const body = {
       query: `mutation($groupId: ID!, $name: String, $date: String) {
         createEvent(name: $name, dueDate: $date, groupId: $groupId) {
@@ -78,7 +74,7 @@ export class GroupService extends BaseService {
     .pipe(this.retryRated())
     .pipe(tap(response => {
       const event = new Event();
-      event.assignFromResponse(response.json().data.createEvent);
+      event.assignFromResponse(response.data.createEvent);
       const group = this.group.getValue();
       group.events.push(event);
       this.group.next(group);
@@ -117,4 +113,12 @@ export class GroupService extends BaseService {
       .pipe(this.retryRated());
   }
 
+  public changeProfilePicture(file: any, id: number) {
+    const formData: any = new FormData();
+    formData.append('groupPicture', file);
+    formData.append('groupId', id);
+    return this.http.post<IFileUploadResult>(environment.greenvironmentUrl + '/upload', formData)
+      .pipe(this.retryRated());
+  }
+
 }