Add profile picture in feed

src/app/components/feed/postlist/postlist.component.html

@@ -21,16 +21,19 @@
 
 <mat-card class="post" *ngFor = "let post of childPostList" [class.selected]="post === selectedPost" tabindex="0">
   <mat-card-header>
-  <div id="button-box">
-    <button mat-icon-button [matMenuTriggerFor]="menu" id="menu-button" *ngIf="post.deletable">
-      <mat-icon>more_vert</mat-icon>
-    </button>
-    <mat-menu #menu="matMenu">
-      <button mat-menu-item (click)="deletePost(post)">
-        <span>delete post</span>
+    <div mat-card-avatar>
+      <img class="profile-picture" [src]="post.author.profilePicture"/>  
+    </div>
+    <div id="button-box">
+      <button mat-icon-button [matMenuTriggerFor]="menu" id="menu-button" *ngIf="post.deletable">
+        <mat-icon>more_vert</mat-icon>
       </button>
-    </mat-menu>
-  </div>
+      <mat-menu #menu="matMenu">
+        <button mat-menu-item (click)="deletePost(post)">
+          <span>delete post</span>
+        </button>
+      </mat-menu>
+    </div>
   <!-- <div mat-card-avatar class="example-header-image"></div> -->
     <mat-card-title>
       {{post.author.name}}

src/app/components/feed/postlist/postlist.component.sass

@@ -8,7 +8,7 @@
     outline: none
     user-select: none
     ::ng-deep .mat-card-header-text
-        margin: 0px
+        margin-top: 10px
     .mat-card-subtitle 
         display: contents
     a:hover
@@ -31,4 +31,13 @@
         .span
             margin-left: 32px
 
- 
+$mat-card-header-size: 100px !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/models/author.ts

@@ -2,10 +2,12 @@ export class Author {
     id: number;
     name: string;
     handle: string;
+    profilePicture: string;
 
-    constructor(pId: number, pName: string, pHandle: string) {
+    constructor(pId: number, pName: string, pHandle: string, pic: string) {
         this.id = pId;
         this.name = pName;
         this.handle = pHandle;
+        this.profilePicture = pic;
     }
 }

src/app/services/feed/feed.service.ts

@@ -45,6 +45,7 @@ export class FeedService {
           author{
             name,
             handle,
+            profilePicture,
             id},
           createdAt}
       }`, variables: {
@@ -80,6 +81,7 @@ export class FeedService {
           author{
             name,
             handle,
+            profilePicture,
             id},
           createdAt}
       }`, variables: {
@@ -214,6 +216,7 @@ export class FeedService {
           author{
             name,
             handle,
+            profilePicture,
             id},
           createdAt}
       }`, variables: {
@@ -232,7 +235,13 @@ export class FeedService {
     const downvotes: number = post.downvotes;
     const userVote: string = post.userVote;
     const deletable: boolean = post.deletable;
-    const author = new Author(post.author.id, post.author.name, post.author.handle);
+    let profilePicture: string;
+      if (post.author.profilePicture) {
+        profilePicture = environment.greenvironmentUrl + post.author.profilePicture;
+      } else {
+        profilePicture = 'assets/images/account_circle-24px.svg';
+      }
+    const author = new Author(post.author.id, post.author.name, post.author.handle, profilePicture);
     const temp = new Date(Number(post.createdAt));
     const date = temp.toLocaleString('en-GB');
     let activity: Activity;
@@ -258,7 +267,13 @@ export class FeedService {
       const downvotes: number = post.downvotes;
       const userVote: string = post.userVote;
       const deletable: boolean = post.deletable;
-      const author = new Author(post.author.id, post.author.name, post.author.handle);
+      let profilePicture: string;
+      if (post.author.profilePicture) {
+        profilePicture = environment.greenvironmentUrl + post.author.profilePicture;
+      } else {
+        profilePicture = 'assets/images/account_circle-24px.svg';
+      }
+      const author = new Author(post.author.id, post.author.name, post.author.handle, profilePicture);
       const temp = new Date(Number(post.createdAt));
       const date = temp.toLocaleString('en-GB');
       let activity: Activity;

src/app/services/profile/profile.service.ts

@@ -59,6 +59,7 @@ export class ProfileService {
           author{
             name,
             handle,
+            profilePicture
             id},
           createdAt
         }
@@ -97,7 +98,13 @@ export class ProfileService {
         const downvotes: number = post.downvotes;
         const userVote: string = post.userVote;
         const deletable: boolean = post.deletable;
-        const author = new Author(post.author.id, post.author.name, post.author.handle);
+        let profilePicture: string;
+        if (post.author.profilePicture) {
+          profilePicture = environment.greenvironmentUrl + post.author.profilePicture;
+        } else {
+          profilePicture = 'assets/images/account_circle-24px.svg';
+        }
+        const author = new Author(post.author.id, post.author.name, post.author.handle, profilePicture);
         const ptemp = new Date(Number(post.createdAt));
         const pdate = ptemp.toLocaleString('en-GB');
         let activity: Activity;