events and members are displayed on group page now

master
Max 5 years ago
parent c9c6a9b836
commit 284f8995e0

@ -1,7 +1,7 @@
<h1 mat-dialog-title>Create a new event!</h1>
<div mat-dialog-content>
<mat-form-field style="display:contents;">
<input matInput placeholder="Enter groupname" #name>
<input matInput placeholder="Enter eventname" #name>
</mat-form-field>
<mat-form-field style="display:contents;">
<input matInput [matDatepicker]="picker" placeholder="Choose a date" #date disabled>
@ -11,5 +11,5 @@
</div>
<div mat-dialog-actions>
<button mat-button (click)="onNoClick()">Cancel</button>
<button mat-button cdkFocusInitial (click)="createEvent(name.value, date.value)">Create Group</button>
<button mat-button cdkFocusInitial (click)="createEvent(name.value, date.value)">Create Event</button>
</div>

@ -38,13 +38,23 @@
<mat-toolbar-row>
<div class="profile-picture"></div>
<span id="username">{{groupProfile.name}}</span>
<span id="handle">created by {{groupProfile.creator.username}} @{{groupProfile.creator.handle}}</span>
<button mat-icon-button
class="request-button"
(click)="joinGroup(groupProfile)"
[disabled]="!groupProfile.allowedToJoinGroup">
<mat-icon>group_add</mat-icon>
</button>
<span id="handle" class="pointer" (click)="showUserProfile(groupProfile.creator)">created by {{groupProfile.creator.username}} @{{groupProfile.creator.handle}}</span>
<div class="button-box">
<button mat-icon-button
class="request-button"
matTooltip="join group" matTooltipShowDelay="500"
(click)="joinGroup(groupProfile)"
[disabled]="!groupProfile.allowedToJoinGroup">
<mat-icon>group_add</mat-icon>
</button>
<button mat-icon-button
class="request-button"
matTooltip="create event" matTooltipShowDelay="500"
(click)="openDialog()"
[disabled]="!isAdmin">
<mat-icon>event</mat-icon>
</button>
</div>
</mat-toolbar-row>
<mat-toolbar-row>
<div class="info-box">
@ -52,6 +62,49 @@
</div>
</mat-toolbar-row>
</mat-toolbar>
<mat-accordion>
<mat-expansion-panel *ngIf="groupProfile.events.length > 0" expanded>
<mat-expansion-panel-header>
<mat-panel-title>
Events
</mat-panel-title>
</mat-expansion-panel-header>
<div class="list">
<mat-card class="card" *ngFor="let event of groupProfile.events"
[class.selected]="event === selectedEvent"
tabindex="0">
<mat-card-header>
<mat-card-title>{{event.name}}</mat-card-title>
<mat-card-subtitle >{{event.date}}</mat-card-subtitle>
<!--<div class="icon-box">
<button mat-icon-button class="request-button" (click)="sendFriendRequest(user)" [disabled]="!user.allowedToSendRequest"><mat-icon>person_add</mat-icon></button>
</div>-->
</mat-card-header>
</mat-card>
</div>
</mat-expansion-panel>
<mat-expansion-panel [expanded]="groupProfile.events.length < 1">
<mat-expansion-panel-header>
<mat-panel-title>
Members
</mat-panel-title>
</mat-expansion-panel-header>
<div class="list">
<mat-card class="card" *ngFor="let user of groupProfile.members"
[class.selected]="user === selectedUser"
tabindex="0">
<mat-card-header>
<div mat-card-avatar class="profile-picture" (click)="showUserProfile(user)"></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>
<div class="icon-box">
<button mat-icon-button class="request-button" (click)="sendFriendRequest(user)" [disabled]="!user.allowedToSendRequest"><mat-icon>person_add</mat-icon></button>
</div>
</mat-card-header>
</mat-card>
</div>
</mat-expansion-panel>
</mat-accordion>
</div>
<div id="profilecontainer" *ngIf="groupNotFound">
<h1>Group not found :(</h1>

@ -13,6 +13,7 @@
max-width: 1200px
margin: 0 auto
$mat-card-header-size: 100px !default
#profile-card-container
margin: 0 auto
width: 100%
@ -38,30 +39,45 @@
margin: 0 0.5em
#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
// 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-table
.card
box-sizing: border-box
width: 100%
max-width: 690px
margin: 0 auto
.mat-header-cell
padding-right: 0.5em
$mat-card-header-size: 100px !default
.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
// Makes `<img>` tags behave like `background-size: cover`. Not supported
// in IE, but we're using it as a progressive enhancement.
object-fit: cover
#postlist
margin: 0.5em auto
padding: 0
max-width: 690px
margin-top: 0.5em
outline: none
user-select: none
/deep/ .mat-card-header-text
width: 1000%
margin: 0
margin-left: 16px
.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
.profile-picture
background-image: url(https://material.angular.io/assets/img/examples/shiba1.jpg)
background-size: cover
.profile-picture:hover
cursor: pointer
.pointer
cursor: pointer
/deep/ .mat-expansion-panel
background: #e6e6e6
/deep/.dark-theme .mat-expansion-panel
background: #121212

@ -30,9 +30,7 @@ export class DialogCreateEventComponent {
createEvent(name: string, date: string) {
name = name.trim();
if (name && date) {
this.group.createEvent(name, (new Date(date)).getTime().toString(), this.groupId).subscribe(response => {
console.log(response);
});
this.group.createEvent(name, (new Date(date)).getTime().toString(), this.groupId);
this.dialogRef.close();
}
}
@ -93,6 +91,9 @@ export class GroupComponent implements OnInit {
this.isAdmin = true;
}
}
for (const member of this.groupProfile.members) {
member.allowedToSendRequest = this.requestService.isAllowedToSendRequest(member.userID, this.self);
}
} else { this.groupNotFound = true; }
this.loading = false;
});
@ -108,4 +109,13 @@ export class GroupComponent implements OnInit {
group.allowedToJoinGroup = false;
this.requestService.joinGroup(group);
}
public showUserProfile(user: User) {
this.router.navigate(['profile/' + user.userID]);
}
public sendFriendRequest(user: User) {
user.allowedToSendRequest = false;
this.requestService.sendFriendRequest(user);
}
}

@ -0,0 +1,11 @@
export class Event {
id: number;
name: string;
date: string;
constructor(pId: number, pName: string, pdate: string) {
this.id = pId;
this.name = pName;
this.date = pdate;
}
}

@ -1,4 +1,5 @@
import { User } from 'src/app/models/user';
import { Event } from 'src/app/models/event';
export class Group {
id: number;
@ -7,5 +8,6 @@ export class Group {
creator: User = new User();
members: User[] = new Array();
admins: User[] = new Array();
events: Event[] = new Array();
allowedToJoinGroup = false;
}

@ -3,7 +3,8 @@ import { Http } from '@angular/http';
import { Author } from 'src/app/models/author';
import { environment } from 'src/environments/environment';
import { User } from 'src/app/models/user';
import { Observable, Subject } from 'rxjs';
import { Event } from 'src/app/models/event';
import { Observable, BehaviorSubject } from 'rxjs';
import { Group } from 'src/app/models/group';
@Injectable({
@ -11,7 +12,7 @@ import { Group } from 'src/app/models/group';
})
export class GroupService {
public group: Subject<any> = new Subject();
public group: BehaviorSubject<Group> = new BehaviorSubject(new Group());
constructor(private http: Http) { }
@ -34,6 +35,7 @@ export class GroupService {
creator{id name handle}
admins{id name handle}
members{id name handle}
events{id name dueDate}
}
}`, variables: {
groupId: id
@ -44,8 +46,6 @@ export class GroupService {
public renderGroup(response: any): Group {
const group = new Group();
const members: User[] = new Array();
const admins: User[] = new Array();
if (response.data.getGroup != null) {
group.id = response.data.getGroup.id;
group.name = response.data.getGroup.name;
@ -57,17 +57,20 @@ export class GroupService {
user.userID = member.id;
user.username = member.name;
user.handle = member.handle;
members.push(user);
group.members.push(user);
}
group.members = members;
for (const admin of response.data.getGroup.admins) {
const user = new User();
user.userID = admin.id;
user.username = admin.name;
user.handle = admin.handle;
admins.push(user);
group.admins.push(user);
}
for (const event of response.data.getGroup.events) {
const temp = new Date(Number(event.dueDate));
const date = temp.toLocaleString('en-GB');
group.events.push(new Event(event.id, event.name, date));
}
group.admins = admins;
return group;
}
return null;
@ -88,6 +91,11 @@ export class GroupService {
groupId: groupId
}};
return this.http.post(environment.graphQLUrl, body);
this.http.post(environment.graphQLUrl, body).subscribe(response => {
const event = response.json().data.createEvent;
const temp = new Date(Number(event.dueDate));
const pdate = temp.toLocaleString('en-GB');
this.group.next(this.renderGroup(this.group.getValue().events.push(new Event(event.id, event.name, pdate))));
});
}
}

Loading…
Cancel
Save