Add profile pictures in search, social and group page

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,

src/app/components/group/group.component.html

@@ -103,18 +103,7 @@
                 </mat-panel-title>
               </mat-expansion-panel-header>
               <div class="list">
-                <mat-card class="card" *ngFor="let user of groupProfile.members" 
+                <user-list [userList]="groupProfile.members"></user-list>
-                [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="button-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> 

src/app/components/search/search.component.html

@@ -18,20 +18,7 @@
           Users
         </mat-panel-title>
       </mat-expansion-panel-header>
-      <div class="list">
+      <user-list [userList]="foundUsers"></user-list>
-        <mat-card class="card" *ngFor="let user of foundUsers" 
-        [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-expansion-panel *ngIf="foundGroups.length > 0" [expanded]="foundUsers.length < 1">
       <mat-expansion-panel-header>

src/app/components/social/friends/friends.component.html

@@ -8,7 +8,9 @@
     tabindex="0"
     matRipple>
       <mat-card-header>
-        <div mat-card-avatar class="profile-picture"></div>
+        <div mat-card-avatar>
+          <img class="profile-picture" [src]="friend.profilePicture"/>  
+        </div>
         <mat-card-title>{{friend.name}}</mat-card-title>
         <mat-card-subtitle>{{friend.rankname}}</mat-card-subtitle>
       </mat-card-header>

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)
+    height: $mat-card-header-size
-  background-size: cover
+    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

src/app/components/userlist/userlist.component.html

@@ -0,0 +1,12 @@
+  <mat-card class="card" *ngFor = "let user of userList" [class.selected]="user === selectedUser" tabindex="0">
+    <mat-card-header>
+      <div mat-card-avatar>
+        <img class="profile-picture" [src]="user.profilePicture"/>  
+      </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>

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

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<UserlistComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ UserlistComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(UserlistComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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<User>;
+  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]);
+  }
+}

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;
     }
 }

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';
+    }
+  }
 }

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;

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()));
+        updatedposts = updatedposts.concat(this.renderAllPosts(response));
-        if (this.renderAllPosts(response.json()).length < 1) {
+        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()));
+        updatedposts = updatedposts.concat(this.renderAllPosts(response));
-        if (this.renderAllPosts(response.json()).length < 1) {
+        if (this.renderAllPosts(response).length < 1) {
           this.topPostsAvailable.next(false);
         }
         this.mostLikedPosts.next(updatedposts);

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) {

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,

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

src/app/services/search/search.service.ts

@@ -71,7 +71,7 @@ export class SearchService extends BaseService {
     const users = new Array<User>();
       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;

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,