diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 2c5b1b3..1dcd433 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -31,7 +31,7 @@ import { ChatcontactsComponent } from './components/chatmanager/chatcontacts/cha
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import {MatTableModule} from '@angular/material/table';
import { InfiniteScrollModule } from 'ngx-infinite-scroll';
-
+import {UserlistComponent} from './components/userlist/userlist.component';
import { MatSliderModule } from '@angular/material/slider';
import { MatFormFieldModule } from '@angular/material/form-field';
@@ -108,7 +108,8 @@ const appRoutes: Routes = [
SearchComponent,
DialogCreateGroupComponent,
GroupComponent,
- DialogCreateEventComponent
+ DialogCreateEventComponent,
+ UserlistComponent,
],
imports: [
BrowserModule,
diff --git a/src/app/components/group/group.component.html b/src/app/components/group/group.component.html
index 52f9d46..854b722 100644
--- a/src/app/components/group/group.component.html
+++ b/src/app/components/group/group.component.html
@@ -103,18 +103,7 @@
-
-
-
- {{user.username}}
- {{user.handle}}
-
-
-
-
-
+
diff --git a/src/app/components/search/search.component.html b/src/app/components/search/search.component.html
index 7d0788c..055ca2e 100644
--- a/src/app/components/search/search.component.html
+++ b/src/app/components/search/search.component.html
@@ -18,20 +18,7 @@
Users
-
-
-
-
- {{user.username}}
- {{user.handle}}
-
-
-
-
-
-
+
0" [expanded]="foundUsers.length < 1">
diff --git a/src/app/components/social/friends/friends.component.html b/src/app/components/social/friends/friends.component.html
index 6fe2159..9a36969 100644
--- a/src/app/components/social/friends/friends.component.html
+++ b/src/app/components/social/friends/friends.component.html
@@ -8,7 +8,9 @@
tabindex="0"
matRipple>
-
+
+
+
{{friend.name}}
{{friend.rankname}}
diff --git a/src/app/components/social/friends/friends.component.sass b/src/app/components/social/friends/friends.component.sass
index 60c656b..23b0fc0 100644
--- a/src/app/components/social/friends/friends.component.sass
+++ b/src/app/components/social/friends/friends.component.sass
@@ -10,12 +10,22 @@
width: 100%
margin-top: 0.5em
cursor: pointer
+ ::ng-deep .mat-card-header-text
+ margin: 0 24px
.mat-card-subtitle
margin: 0
-
+
+$mat-card-header-size: 52px !default
.profile-picture
- background-image: url(https://material.angular.io/assets/img/examples/shiba1.jpg)
- background-size: cover
+ 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
+
#button-box
text-align: right
diff --git a/src/app/components/userlist/userlist.component.html b/src/app/components/userlist/userlist.component.html
new file mode 100644
index 0000000..1e64bd5
--- /dev/null
+++ b/src/app/components/userlist/userlist.component.html
@@ -0,0 +1,12 @@
+
+
+
+
+
+ {{user.username}}
+ {{user.handle}}
+
+
+
+
+
diff --git a/src/app/components/userlist/userlist.component.sass b/src/app/components/userlist/userlist.component.sass
new file mode 100644
index 0000000..c95aa90
--- /dev/null
+++ b/src/app/components/userlist/userlist.component.sass
@@ -0,0 +1,40 @@
+@import '../../../styles/mixins.sass'
+@import '../../../styles/vars.sass'
+
+.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: 0
+ margin-left: 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%
+
+$mat-card-header-size: 54px !default
+.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
diff --git a/src/app/components/userlist/userlist.component.spec.ts b/src/app/components/userlist/userlist.component.spec.ts
new file mode 100644
index 0000000..2977612
--- /dev/null
+++ b/src/app/components/userlist/userlist.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { UserlistComponent } from './userlist.component';
+
+describe('UserlistComponent', () => {
+ let component: UserlistComponent;
+ let fixture: ComponentFixture;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ UserlistComponent ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(UserlistComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/components/userlist/userlist.component.ts b/src/app/components/userlist/userlist.component.ts
new file mode 100644
index 0000000..937131b
--- /dev/null
+++ b/src/app/components/userlist/userlist.component.ts
@@ -0,0 +1,29 @@
+import { Component, OnInit, Input } from '@angular/core';
+import { User } from 'src/app/models/user';
+import { RequestService } from 'src/app/services/request/request.service';
+import { Router } from '@angular/router';
+
+@Component({
+ selector: 'user-list',
+ templateUrl: './userlist.component.html',
+ styleUrls: ['./userlist.component.sass']
+})
+export class UserlistComponent implements OnInit {
+
+ @Input() userList: Array;
+ selectedUser: User;
+
+ constructor(private requestService: RequestService, private router: Router) { }
+
+ ngOnInit() {
+ }
+
+ public sendFriendRequest(user: User) {
+ user.allowedToSendRequest = false;
+ this.requestService.sendFriendRequest(user);
+ }
+
+ public showUserProfile(user: User) {
+ this.router.navigate(['profile/' + user.userID]);
+ }
+}
diff --git a/src/app/models/friendinfo.ts b/src/app/models/friendinfo.ts
index 5a6659c..3acee4a 100644
--- a/src/app/models/friendinfo.ts
+++ b/src/app/models/friendinfo.ts
@@ -5,10 +5,12 @@ export class FriendInfo {
id: number;
name: string;
rankname: string;
+ profilePicture: string;
- constructor(pId: number, pName: string, pLevel: number) {
+ constructor(pId: number, pName: string, pLevel: number, pic: string) {
this.id = pId;
this.name = pName;
this.rankname = this.levellist.getLevelName(pLevel);
+ this.profilePicture = pic;
}
}
diff --git a/src/app/models/user.ts b/src/app/models/user.ts
index 37b3e90..2c26c05 100644
--- a/src/app/models/user.ts
+++ b/src/app/models/user.ts
@@ -3,6 +3,7 @@ import { FriendInfo } from 'src/app/models/friendinfo';
import { GroupInfo } from 'src/app/models/groupinfo';
import { Post } from 'src/app/models/post';
import {IUser} from './interfaces/IUser';
+import { environment } from 'src/environments/environment';
export class User {
loggedIn = false;
@@ -29,13 +30,14 @@ export class User {
be false to avoid multiple invitations*/
public assignFromResponse(userDataResponse: IUser) {
+ this.loggedIn = true;
this.userID = userDataResponse.id;
this.username = userDataResponse.name;
this.handle = userDataResponse.handle;
this.email = userDataResponse.email;
this.points = userDataResponse.points;
this.level = userDataResponse.level;
- this.profilePicture = userDataResponse.profilePicture;
+ this.profilePicture = this.buildProfilePictureUrl(userDataResponse.profilePicture);
this.joinedAt = userDataResponse.joinedAt;
this.friendCount = userDataResponse.friendCount;
this.groupCount = userDataResponse.groupCount;
@@ -45,7 +47,11 @@ export class User {
console.error(err);
}
this.friends = userDataResponse.friends
- .map(friend => new FriendInfo(friend.id, friend.name, friend.level));
+ .map(friend => new FriendInfo(
+ friend.id, friend.name,
+ friend.level,
+ this.buildProfilePictureUrl(friend.profilePicture)
+ ));
this.groups = userDataResponse.groups
.map(group => new GroupInfo(group.id, group.name));
this.chatIDs = userDataResponse.chats.map(chat => chat.id);
@@ -54,4 +60,12 @@ export class User {
this.receivedRequests = userDataResponse.receivedRequests
.map(request => new FriendRequest(request.id, request.sender.id, request.sender.handle, request.sender.name));
}
+
+ buildProfilePictureUrl(path: string): string {
+ if (path) {
+ return environment.greenvironmentUrl + path;
+ } else {
+ return 'assets/images/account_circle-24px.svg';
+ }
+ }
}
diff --git a/src/app/services/chat/chat.service.ts b/src/app/services/chat/chat.service.ts
index b26140a..988f7b5 100644
--- a/src/app/services/chat/chat.service.ts
+++ b/src/app/services/chat/chat.service.ts
@@ -105,14 +105,16 @@ export class ChatService {
let memberID: number;
let memberName: string;
let memberLevel: number;
+ let profilePicture: string;
for (const member of chat.members) {
if (member.id !== this.ownID) {
memberID = member.id;
memberName = member.name;
memberLevel = member.level;
+ profilePicture = member.profilePicture;
}
}
- chatPartners.push(new FriendInfo(memberID, memberName, memberLevel));
+ chatPartners.push(new FriendInfo(memberID, memberName, memberLevel, profilePicture));
}
return chatPartners;
diff --git a/src/app/services/feed/feed.service.ts b/src/app/services/feed/feed.service.ts
index 1f39cdc..a516eb3 100644
--- a/src/app/services/feed/feed.service.ts
+++ b/src/app/services/feed/feed.service.ts
@@ -1,5 +1,5 @@
import { Injectable } from '@angular/core';
-import { Http } from '@angular/http';
+import { HttpClient } from '@angular/common/http';
import { Post } from 'src/app/models/post';
import { Author } from 'src/app/models/author';
import { environment } from 'src/environments/environment';
@@ -21,7 +21,7 @@ export class FeedService {
private mostLikedOffset = 0;
private newOffset = 0;
- constructor(private http: Http) { }
+ constructor(private http: HttpClient) { }
public createPost(pContent: String) {
const headers = new Headers();
@@ -53,7 +53,7 @@ export class FeedService {
}};
return this.http.post(environment.graphQLUrl, body).subscribe(response => {
const updatedposts = this.newPosts.getValue();
- updatedposts.unshift(this.renderPost(response.json()));
+ updatedposts.unshift(this.renderPost(response));
this.newPosts.next(updatedposts);
this.setPost('NEW');
});
@@ -90,7 +90,7 @@ export class FeedService {
}};
return this.http.post(environment.graphQLUrl, body).subscribe(response => {
const updatedposts = this.newPosts.getValue();
- updatedposts.unshift(this.renderPost(response.json()));
+ updatedposts.unshift(this.renderPost(response));
this.newPosts.next(updatedposts);
this.setPost('NEW');
});
@@ -147,9 +147,9 @@ export class FeedService {
this.http.post(environment.graphQLUrl, this.buildJson(sort, 0))
.subscribe(response => {
if (sort === 'NEW') {
- this.newPosts.next(this.renderAllPosts(response.json()));
+ this.newPosts.next(this.renderAllPosts(response));
} else if (sort === 'TOP') {
- this.mostLikedPosts.next(this.renderAllPosts(response.json()));
+ this.mostLikedPosts.next(this.renderAllPosts(response));
}
this.setPost(sort);
});
@@ -164,8 +164,8 @@ export class FeedService {
this.http.post(environment.graphQLUrl, this.buildJson(this.activePostList, this.newOffset))
.subscribe(response => {
let updatedposts = this.newPosts.getValue();
- updatedposts = updatedposts.concat(this.renderAllPosts(response.json()));
- if (this.renderAllPosts(response.json()).length < 1) {
+ updatedposts = updatedposts.concat(this.renderAllPosts(response));
+ if (this.renderAllPosts(response).length < 1) {
this.newPostsAvailable.next(false);
}
this.newPosts.next(updatedposts);
@@ -178,8 +178,8 @@ export class FeedService {
this.http.post(environment.graphQLUrl, this.buildJson(this.activePostList, this.mostLikedOffset))
.subscribe(response => {
let updatedposts = this.mostLikedPosts.getValue();
- updatedposts = updatedposts.concat(this.renderAllPosts(response.json()));
- if (this.renderAllPosts(response.json()).length < 1) {
+ updatedposts = updatedposts.concat(this.renderAllPosts(response));
+ if (this.renderAllPosts(response).length < 1) {
this.topPostsAvailable.next(false);
}
this.mostLikedPosts.next(updatedposts);
diff --git a/src/app/services/group/group.service.ts b/src/app/services/group/group.service.ts
index 83e0fb4..181a388 100644
--- a/src/app/services/group/group.service.ts
+++ b/src/app/services/group/group.service.ts
@@ -35,7 +35,7 @@ export class GroupService {
joined
creator{id name handle}
admins{id name handle}
- members{id name handle}
+ members{id name handle profilePicture}
events{id name dueDate joined}
}
}`, variables: {
@@ -60,6 +60,7 @@ export class GroupService {
user.userID = member.id;
user.username = member.name;
user.handle = member.handle;
+ user.profilePicture = user.buildProfilePictureUrl(member.profilePicture);
group.members.push(user);
}
for (const admin of response.data.getGroup.admins) {
diff --git a/src/app/services/login/login.service.ts b/src/app/services/login/login.service.ts
index 5e1da1c..6a26378 100644
--- a/src/app/services/login/login.service.ts
+++ b/src/app/services/login/login.service.ts
@@ -27,7 +27,8 @@ const graphqlQuery = `mutation($email: String!, $pwHash: String!) {
friends {
id,
name,
- level
+ level,
+ profilePicture
},
groups {
id,
diff --git a/src/app/services/register/register.service.ts b/src/app/services/register/register.service.ts
index e024306..325be66 100644
--- a/src/app/services/register/register.service.ts
+++ b/src/app/services/register/register.service.ts
@@ -49,7 +49,7 @@ export class RegisterService {
user.points = response.data.register.points;
user.level = response.data.register.level;
for (const friend of response.data.register.friends) {
- user.friends.push(new FriendInfo(friend.id, friend.name, friend.level));
+ user.friends.push(new FriendInfo(friend.id, friend.name, friend.level, friend.profilePicture));
}
// user.groupIDs = response.data.register.groups;
user.chatIDs = response.data.register.chats;
@@ -84,7 +84,8 @@ export class RegisterService {
friends {
id,
name,
- level
+ level,
+ profilePicture
},
groups{id},
chats{id},
diff --git a/src/app/services/search/search.service.ts b/src/app/services/search/search.service.ts
index 8c44e90..3b44396 100644
--- a/src/app/services/search/search.service.ts
+++ b/src/app/services/search/search.service.ts
@@ -71,7 +71,7 @@ export class SearchService extends BaseService {
const users = new Array();
for (const foundUser of response.data.search.users) {
const user = new User();
- user.profilePicture = foundUser.profilePicture;
+ user.profilePicture = user.buildProfilePictureUrl(foundUser.profilePicture);
user.username = foundUser.name;
user.userID = foundUser.id;
user.handle = foundUser.handle;
diff --git a/src/app/services/selfservice/self.service.ts b/src/app/services/selfservice/self.service.ts
index 84750c1..bc0c4d8 100644
--- a/src/app/services/selfservice/self.service.ts
+++ b/src/app/services/selfservice/self.service.ts
@@ -47,7 +47,7 @@ export class SelfService {
user.points = response.data.getSelf.points;
user.level = response.data.getSelf.level;
for (const friend of response.data.getSelf.friends) {
- user.friends.push(new FriendInfo(friend.id, friend.name, friend.level));
+ user.friends.push(new FriendInfo(friend.id, friend.name, friend.level, friend.profilePicture));
}
for (const group of response.data.getSelf.groups) {
user.groups.push(new GroupInfo(group.id, group.name));
@@ -79,7 +79,7 @@ export class SelfService {
user.email = 'r@r.com';
user.points = 100;
user.level = 3;
- user.friends.push(new FriendInfo(1, 'Freund77', 4));
+ user.friends.push(new FriendInfo(1, 'Freund77', 4, 'lalala'));
friendRequest = new FriendRequest();
friendRequest.id = 10;
@@ -105,7 +105,8 @@ export class SelfService {
friends {
id,
name,
- level
+ level,
+ profilePicture,
},
groups {
id,