Update profile card to support file upload

abdayassin · May 13, 2021 · f7bd8ea · f7bd8ea
1 parent 50434db
commit f7bd8ea
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 7 deletions.
diff --git a/src/app/modules/main/profile/components/profile-card/profile-card.component.html b/src/app/modules/main/profile/components/profile-card/profile-card.component.html
@@ -14,7 +14,16 @@
 
           <ng-container *ngIf="!(isLoading$ | async); else loading">
             <form name="profileForm" [formGroup]="profileForm">
-              <div class="displayName">
+
+
+              <div class="avatar-upload">
+                <div class="full-width">
+                  <app-file-upload 
+                  formControlName="avatar">
+                  </app-file-upload>
+                </div>
+              </div>
+              <div class="display-name">
                 <mat-form-field class="full-width" appearance="outline">
                   <input
                     formControlName="display_name"

diff --git a/src/app/modules/main/profile/components/profile-card/profile-card.component.scss b/src/app/modules/main/profile/components/profile-card/profile-card.component.scss
@@ -19,10 +19,14 @@ mat-card {
   padding: 2em 0;
 }
 
+.profile-avatar {
+  object-fit: contain;
+}
+
 .profile-avatar img{
   border: 1px solid lightgrey;
   border-radius: 50%;
-  max-width: 400px;
+  max-width: 300px;
   min-width: 250px;
   width: 100%;
 }
@@ -39,4 +43,4 @@ mat-card {
 
 .spinner {
   position: relative;
-}
+}
diff --git a/src/app/modules/main/profile/components/profile-card/profile-card.component.ts b/src/app/modules/main/profile/components/profile-card/profile-card.component.ts
@@ -1,7 +1,7 @@
 import { Component, Input, OnInit } from '@angular/core';
 import { FormControl, FormGroup, Validators } from '@angular/forms';
 import { Observable } from 'rxjs';
-import { skip, take } from 'rxjs/operators';
+import { take } from 'rxjs/operators';
 import { UserModel } from 'src/app/core/models/user.model';
 import { ProfileQuery } from '../../state/profile.query';
 import { ProfileService } from '../../state/profile.service';
@@ -15,14 +15,17 @@ export class ProfileCardComponent implements OnInit {
 
   profileForm: FormGroup;
   isLoading$ : Observable<boolean>;
-  profileInfo?: UserModel;  
+  profileInfo?: UserModel;
+  fileToUpload: File;  
 
   constructor(
     private profileQuery: ProfileQuery,
     private profileService: ProfileService) { 
+
     this.profileForm = new FormGroup({
       email: new FormControl({ value: '', disabled: true}),
-      display_name: new FormControl('', Validators.minLength(6))
+      display_name: new FormControl('', Validators.minLength(6)),
+      avatar: new FormControl('')
     });
   }
 
@@ -50,5 +53,4 @@ export class ProfileCardComponent implements OnInit {
       });
     }
   }
-
 }