added group page
parent
7aa028c452
commit
96a9e5baee
@ -0,0 +1,28 @@
|
||||
<div id="profile-page">
|
||||
<div id="profilecontainer" *ngIf="!profileNotFound && !loading">
|
||||
<mat-toolbar color="primary" id="toolbar">
|
||||
<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>
|
||||
</mat-toolbar-row>
|
||||
<mat-toolbar-row>
|
||||
<div id="info-box">
|
||||
<span class="info">{{groupProfile.members.length}} member(s)</span>
|
||||
</div>
|
||||
</mat-toolbar-row>
|
||||
</mat-toolbar>
|
||||
</div>
|
||||
<div id="profilecontainer" *ngIf="profileNotFound">
|
||||
<h1>Profile not found :(</h1>
|
||||
</div>
|
||||
<mat-spinner *ngIf="loading" style="margin:0 auto; margin-top: 10em;" diameter="100"></mat-spinner>
|
||||
</div>
|
||||
|
||||
|
@ -0,0 +1,65 @@
|
||||
@import '../../../styles/mixins.sass'
|
||||
@import '../../../styles/vars.sass'
|
||||
|
||||
#profile-page
|
||||
position: fixed
|
||||
width: 100%
|
||||
height: calc(100% - 56px)
|
||||
overflow: scroll
|
||||
|
||||
#profile
|
||||
padding: 2em
|
||||
max-width: 1200px
|
||||
margin: 0 auto
|
||||
|
||||
#profile-card-container
|
||||
margin: 0 auto
|
||||
width: 100%
|
||||
max-width: 690px
|
||||
.icon-box
|
||||
text-align: right
|
||||
width: 100%
|
||||
.request-button
|
||||
margin-top: 0.5em
|
||||
margin-bottom: 0.5em
|
||||
margin-left: auto
|
||||
#toolbar
|
||||
margin-top: 32px
|
||||
.mat-toolbar-row
|
||||
max-height: 40px
|
||||
#info-box
|
||||
font-size: 14px
|
||||
margin-left: calc(100px + 0.5em)
|
||||
.info
|
||||
margin-right: 3em
|
||||
#username
|
||||
margin: 0 0.5em
|
||||
#handle
|
||||
font-size: 14px
|
||||
|
||||
|
||||
.mat-table
|
||||
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
|
@ -0,0 +1,25 @@
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { GroupComponent } from './group.component';
|
||||
|
||||
describe('GroupComponent', () => {
|
||||
let component: GroupComponent;
|
||||
let fixture: ComponentFixture<GroupComponent>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ GroupComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(GroupComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
@ -0,0 +1,64 @@
|
||||
import { Component, OnInit, ViewChild} from '@angular/core';
|
||||
import {Router, NavigationEnd} from '@angular/router';
|
||||
import { User } from 'src/app/models/user';
|
||||
import {MatSort} from '@angular/material/sort';
|
||||
import { RequestService } from 'src/app/services/request/request.service';
|
||||
import { DatasharingService } from '../../services/datasharing.service';
|
||||
import { GroupService } from 'src/app/services/group/group.service';
|
||||
import { Group } from 'src/app/models/group';
|
||||
|
||||
@Component({
|
||||
selector: 'app-profile',
|
||||
templateUrl: './group.component.html',
|
||||
styleUrls: ['./group.component.sass']
|
||||
})
|
||||
|
||||
export class GroupComponent implements OnInit {
|
||||
groupProfile: Group = new Group();
|
||||
self: User;
|
||||
id: string;
|
||||
groupNotFound = false;
|
||||
|
||||
loading = false;
|
||||
|
||||
constructor(
|
||||
private router: Router,
|
||||
private requestService: RequestService,
|
||||
private data: DatasharingService,
|
||||
private groupService: GroupService) {
|
||||
router.events.forEach((event) => {
|
||||
// check if url changes
|
||||
if (event instanceof NavigationEnd) {
|
||||
const possibleID = this.router.url.substr(this.router.url.lastIndexOf('/') + 1);
|
||||
if (this.id !== possibleID && this.id && this.router.url.includes('group/')) {
|
||||
// reload the group
|
||||
console.log('search for group id: ' + this.router.url.substr(this.router.url.lastIndexOf('/') + 1));
|
||||
this.ngOnInit();
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
@ViewChild(MatSort, {static: true}) sort: MatSort;
|
||||
ngOnInit() {
|
||||
this.loading = true;
|
||||
this.id = this.router.url.substr(this.router.url.lastIndexOf('/') + 1);
|
||||
this.data.currentUserInfo.subscribe(user => {
|
||||
this.self = user;
|
||||
});
|
||||
this.groupService.getGroupData(this.id);
|
||||
this.groupService.group.subscribe(response => {
|
||||
if (response) {
|
||||
this.groupProfile = response;
|
||||
// tslint:disable-next-line:max-line-length
|
||||
this.groupProfile.allowedToJoinGroup = this.requestService.isAllowedToJoinGroup(this.groupProfile.id, this.self);
|
||||
} else { this.groupNotFound = true; }
|
||||
this.loading = false;
|
||||
});
|
||||
}
|
||||
|
||||
public joinGroup(group: Group) {
|
||||
group.allowedToJoinGroup = false;
|
||||
this.requestService.joinGroup(group);
|
||||
}
|
||||
}
|
@ -0,0 +1,12 @@
|
||||
import { TestBed } from '@angular/core/testing';
|
||||
|
||||
import { GroupService } from './group.service';
|
||||
|
||||
describe('GroupService', () => {
|
||||
beforeEach(() => TestBed.configureTestingModule({}));
|
||||
|
||||
it('should be created', () => {
|
||||
const service: GroupService = TestBed.get(GroupService);
|
||||
expect(service).toBeTruthy();
|
||||
});
|
||||
});
|
@ -0,0 +1,78 @@
|
||||
import { Injectable } from '@angular/core';
|
||||
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 { Group } from 'src/app/models/group';
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class GroupService {
|
||||
|
||||
public group: Subject<any> = new Subject();
|
||||
|
||||
constructor(private http: Http) { }
|
||||
|
||||
public getGroupData(groupId: string) {
|
||||
const headers = new Headers();
|
||||
headers.set('Content-Type', 'application/json');
|
||||
this.http.post(environment.graphQLUrl, this.buildGetGroupJson(groupId)).subscribe(result => {
|
||||
// push onto subject
|
||||
this.group.next(this.renderGroup(result.json()));
|
||||
return this.group;
|
||||
});
|
||||
}
|
||||
|
||||
public buildGetGroupJson(id: string): any {
|
||||
const body = {
|
||||
query: `query($groupId: ID!) {
|
||||
getGroup(groupId:$groupId){
|
||||
id
|
||||
name
|
||||
creator{id name handle}
|
||||
admins{id name handle}
|
||||
members{id name handle}
|
||||
}
|
||||
}`, variables: {
|
||||
groupId: id
|
||||
}
|
||||
};
|
||||
return body;
|
||||
}
|
||||
|
||||
public renderGroup(response: any): Group {
|
||||
console.log(response);
|
||||
console.log(response.data.getGroup.creator.id);
|
||||
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;
|
||||
group.creator.userID = response.data.getGroup.creator.id;
|
||||
group.creator.handle = response.data.getGroup.creator.handle;
|
||||
group.creator.username = response.data.getGroup.creator.name;
|
||||
for (const member of response.data.getGroup.members) {
|
||||
const user = new User();
|
||||
user.userID = member.id;
|
||||
user.username = member.name;
|
||||
user.handle = member.handle;
|
||||
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 = admins;
|
||||
console.log(group);
|
||||
return group;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
}
|
Loading…
Reference in New Issue