Add group picture upload

master
Max 5 years ago
parent d6f2af77c3
commit 04b975be27

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

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

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

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

@ -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());
}
}

Loading…
Cancel
Save