Merge pull request #628 from ita-social-projects/feature/delete-photo

Delete photo

src/app/component/shared/components/edit-photo-pop-up/edit-photo-pop-up.component.html

@@ -5,7 +5,7 @@
          alt="cencel">
   </button>
   <div class="wrapper" 
-       *ngIf="!selectedPhoto; else elseBlock">
+       *ngIf="!selectedPhoto && !isNotification; else elseBlock">
     <img src="{{ avatarImg }}" 
          alt="avatar" 
          class="profile-avatar">
@@ -22,6 +22,10 @@
                accept=".jpg, .jpeg, .png" 
                (change)="onSelectPhoto($event)">
       </label>
+      <button type="button" 
+              class="primary-global-button delete" 
+              [disabled]="isDefaultPhoto"
+              (click)="isNotification=true">{{"user.edit-profile.btn.delete" | translate }}</button>
     </div>
   </div>
   <ng-template #elseBlock>
@@ -50,9 +54,31 @@
           <button type="button" 
                   class="secondary-global-button" 
                   [disabled]="isWarning" 
-                  (click)="savePhoto()">{{"user.edit-profile.btn.save-photo" | translate }}</button>
+                  (click)="savePhoto()">
+            <span *ngIf="loadingAnim"
+                  class="spinner-border spinner-border-sm"
+                  role="status"
+                  aria-hidden="true"></span>
+            {{"user.edit-profile.btn.save-photo" | translate }}</button>
         </div>
       </div>
     </div>
   </ng-template>
+  <div *ngIf="isNotification"
+        class="wrapper">
+    <p>{{"user.edit-profile.notification" | translate }}</p>
+    <div class="buttons">
+      <button type="button" 
+              class="primary-global-button" 
+              (click)="isNotification=false">{{"user.edit-profile.btn.continue" | translate }}</button>
+      <button type="button" 
+              class="secondary-global-button" 
+              (click)="deletePhoto()">
+        <span *ngIf="loadingAnim"
+              class="spinner-border spinner-border-sm"
+              role="status"
+              aria-hidden="true"></span>
+        {{ "user.edit-profile.btn.yes-delete" | translate }}</button>
+    </div>
+  </div>
 </div>

src/app/component/shared/components/edit-photo-pop-up/edit-photo-pop-up.component.scss

@@ -3,38 +3,22 @@
 
 $title-font: 'Montserrat';
 $main-font: 'Open Sans';
+$buttonColor: #13aa57;
+$linkColor: #056b33;
+$disabledColor: #839c94;
+$errorColor : #f03127;
+$secondErrorColor : #b42626;
 
 .main-container {
   position: relative;
   width: 631px;
   height: 400px;
   font-family: $main-font;
-  padding: 56px 0;
-  margin: 0 auto;
+  display: flex;
+  justify-content: center;
+  align-items: center;
   background: #fff;
 
-  .primary-global-button {
-    background: #fff;
-    color: #13aa57;
-    width: 132px;
-    margin-right: 24px;
-
-    &:hover {
-      border: 1px solid #056b33;
-      color: #056b33;
-    }
-  }
-
-  .secondary-global-button {
-    background: #13aa57;
-    color: #fff;
-    padding: 16px 24px;
-
-    &:hover {
-      background: #056b33;
-    }
-  }
-
   .cancel {
     position: absolute;
     top: 26px;
@@ -48,6 +32,7 @@ $main-font: 'Open Sans';
     display: flex;
     flex-direction: column;
     align-items: center;
+    justify-content: center;
 
     .profile-avatar {
       border-radius: 100px;
@@ -73,7 +58,7 @@ $main-font: 'Open Sans';
     .warning {
       font-family: 'Open sans', sans-serif;
       font-size: 14px;
-      color: red;
+      color: $errorColor;
       padding: 0;
     }
 
@@ -88,7 +73,7 @@ $main-font: 'Open Sans';
 
       .primary-global-button,
       .secondary-global-button {
-        border: 1px solid #13aa57;
+        border: 1px solid $buttonColor;
         box-sizing: border-box;
         border-radius: 5px;
         font-style: normal;
@@ -98,9 +83,56 @@ $main-font: 'Open Sans';
         line-height: 16px;
       }
 
-      button:disabled {
-        background: #839c94;
-        border: 1px solid #839c94;
+      .primary-global-button {
+        background: #fff;
+        color: $buttonColor;
+        min-width: 132px;
+        margin-right: 24px;
+        padding: 16px;
+
+        &:hover {
+          border: 1px solid $linkColor;
+          color: $linkColor;
+        }
+      }
+
+      .delete {
+        background: $errorColor;
+        border: 1px solid $errorColor;
+        border-radius: 3px;
+        color: #fff;
+        margin-left: 24px;
+
+        &:hover {
+          border: 1px solid $secondErrorColor;
+          background: $secondErrorColor;
+          color: #fff;
+        }
+
+        &:disabled {
+          background: $disabledColor;
+          border: 1px solid $disabledColor;
+        }
+      }
+
+      .secondary-global-button {
+        background: $buttonColor;
+        color: #fff;
+        padding: 16px 24px;
+        display: flex;
+        align-items: center;
+
+        &:hover {
+          background: $linkColor;
+        }
+
+        &:focus {
+          outline: none;
+        }
+
+        .spinner-border {
+          margin-right: 10px;
+        }
       }
 
       .change {

src/app/component/shared/components/edit-photo-pop-up/edit-photo-pop-up.component.ts

@@ -20,6 +20,9 @@ export class EditPhotoPopUpComponent implements OnInit {
   public selectedPhoto = false;
   public selectedFile: File = null;
   public selectedFileUrl: string;
+  public isDefaultPhoto: boolean;
+  public isNotification: boolean;
+  public loadingAnim: boolean;
   private croppedImage: string;
 
   constructor(private matDialogRef: MatDialogRef<EditPhotoPopUpComponent>,
@@ -32,14 +35,6 @@ export class EditPhotoPopUpComponent implements OnInit {
     this.setUserAvatar();
   }
 
-  private setUserAvatar() {
-    this.avatarImg = this.data.img;
-  }
-
-  public closeEditPhoto(): void {
-    this.matDialogRef.close();
-  }
-
   public onSelectPhoto(event): void {
     this.isWarning = false;
     this.selectedFile = event.target.files[0] as File;
@@ -48,27 +43,12 @@ export class EditPhotoPopUpComponent implements OnInit {
     reader.onload = (ev) => this.handleFile(ev);
   }
 
-  private handleFile(event): void {
-    this.selectedFileUrl = event.target.result;
-    this.files[0] = { url: this.selectedFileUrl, file: this.selectedFile };
-    if (!this.isWarning && typeof this.selectedFile !== 'undefined') {
-      this.showWarning();
-      this.selectedPhoto = !this.isWarning ? true : this.selectedPhoto;
-    }
-  }
-
-  public showWarning(): void {
-    const imageVal = this.files.filter(item => item.file.type === 'image/jpeg' || item.file.type === 'image/png');
-    this.isWarning = imageVal.length < 1;
-  }
-
   public imageCropped(event: ImageCroppedEvent): void {
     this.croppedImage = event.base64;
   }
 
   public savePhoto(): void {
-    this.files = this.files.map(item => ({...item, url: this.croppedImage}));
-
+    this.loadingAnim = true;
     const body = {
       id: this.profileService.userId,
       profilePicturePath: this.croppedImage
@@ -78,13 +58,52 @@ export class EditPhotoPopUpComponent implements OnInit {
 
     this.editProfileService.updateProfilePhoto(formData)
     .subscribe(
-     () => this.matDialogRef.close(),
-     () => this.dialog.open(ErrorComponent, {
-       hasBackdrop: false,
-       closeOnNavigation: true,
-       position: { top: '100px' },
-       panelClass: 'custom-dialog-container',
-     })
-   );
+      () => {
+        this.loadingAnim = false;
+        this.closeEditPhoto();
+      },
+      () => this.openErrorDialog());
+  }
+
+  public deletePhoto(): void {
+    this.loadingAnim = true;
+    this.editProfileService.deleProfilePhoto().subscribe(
+      () => {
+        this.loadingAnim = false;
+        this.closeEditPhoto();
+      },
+      () => this.openErrorDialog());
+  }
+
+  public closeEditPhoto(): void {
+    this.matDialogRef.close();
+  }
+
+  private setUserAvatar() {
+    this.avatarImg = this.data.img;
+    this.isDefaultPhoto = /DEFAULT_PROFILE_PICTURE.png/.test(this.avatarImg);
+  }
+
+  private handleFile(event): void {
+    this.selectedFileUrl = event.target.result;
+    this.files[0] = { url: this.selectedFileUrl, file: this.selectedFile };
+    if (!this.isWarning && typeof this.selectedFile !== 'undefined') {
+      this.showWarning();
+      this.selectedPhoto = !this.isWarning ? true : this.selectedPhoto;
+    }
+  }
+
+  private showWarning(): void {
+    const imageVal = this.files.filter(item => item.file.type === 'image/jpeg' || item.file.type === 'image/png');
+    this.isWarning = imageVal.length < 1;
+  }
+
+  private openErrorDialog(): void {
+    this.dialog.open(ErrorComponent, {
+      hasBackdrop: false,
+      closeOnNavigation: true,
+      position: { top: '100px' },
+      panelClass: 'custom-dialog-container',
+    });
   }
 }

src/app/component/user/components/profile/edit-profile/personal-photo/personal-photo.component.ts

@@ -1,7 +1,6 @@
 import { Component, OnInit, OnDestroy } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { Subscription } from 'rxjs';
-import { map } from 'rxjs/operators';
 import { EditPhotoPopUpComponent } from '@shared/components/edit-photo-pop-up/edit-photo-pop-up.component';
 import { ProfileService } from '../../profile-service/profile.service';
 
@@ -12,7 +11,6 @@ import { ProfileService } from '../../profile-service/profile.service';
 })
 export class PersonalPhotoComponent implements OnInit, OnDestroy {
   public avatarImg: string;
-  public avatarDefault = './assets/img/profileAvatarBig.png';
   public avatarSubscription: Subscription;
   public currentPage = 'edit photo';
   public editIcon = './assets/img/profile/icons/edit-photo.svg';
@@ -26,11 +24,8 @@ export class PersonalPhotoComponent implements OnInit, OnDestroy {
 
   private setUserAvatar(): void {
     this.avatarSubscription = this.profileService.getUserInfo()
-    .pipe(
-      map((el) => el.profilePicturePath)
-    )
-    .subscribe((img) => {
-      this.avatarImg = img && img !== ' ' ? img : this.avatarDefault;
+    .subscribe((el) => {
+      this.avatarImg = el.profilePicturePath;
     });
   }
 

src/app/component/user/services/edit-profile.service.ts

@@ -24,4 +24,8 @@ export class EditProfileService {
   public updateProfilePhoto(data): Observable<object[]> {
     return this.http.patch<object[]>(`${this.url}user/profilePicture`, data);
   }
+
+  public deleProfilePhoto(): Observable<object> {
+    return this.http.patch<object>(`${this.url}user/deleteProfilePicture`, this.httpOptions);
+  }
 }

src/assets/i18n/en.json

@@ -472,12 +472,16 @@
       "picture-tooltip": "Download PNG or JPG only. File size should be less than 10MB",
       "change-photo": "Do you want to change your profile picture?",
       "would-you-like": "Would you like to save changes?",
+      "notification": "Are you sure you want to delete the photo?",
       "btn":{
         "cancel": "Cancel",
         "save": "Save",
         "new-photo": "Upload new photo",
         "change-photo": "Change photo",
-        "save-photo": "Save photo"
+        "save-photo": "Save photo",
+        "delete": "Delete photo",
+        "continue": "Continue editing",
+        "yes-delete": "Yes, delete"
       }
     },
     "footer": {

src/assets/i18n/ru.json

@@ -477,12 +477,16 @@
       "picture-tooltip": "Загружайте только PNG или JPEG. Размер файла не должен превышать 10Mb",
       "change-photo": "Вы хотите изменить изображение своего профиля?",
       "would-you-like": "Вы хотите сохранить изменения?",
+      "notification": "Вы уверены, что хотите удалить фото?",
       "btn": {
         "cancel": "Отменить",
         "save": "Сохранить",
         "new-photo": "Загрузить новое фото",
         "change-photo": "Измени фотографию",
-        "save-photo": "Сохранить фото"
+        "save-photo": "Сохранить фото",
+        "delete": "Удалить фото",
+        "continue": "Продолжить редактирование",
+        "yes-delete": "Да, удалить"
       }
     },
     "footer": {

src/assets/i18n/uk.json

@@ -477,12 +477,16 @@
       "picture-tooltip": "Завантажуйте лише PNG або JPEG. Розмір файлу не повинен перевищувати 10Mb",
       "change-photo": "Ви хочете змінити свою фотографію профілю?",
       "would-you-like": "Хочете зберегти зміни?",
+      "notification": "Ви впевнені, що хочете видалити фотографію?",
       "btn": {
         "cancel": "Скасувати",
         "save": "Зберегти",
         "new-photo": "Завантажити нове фото",
         "change-photo": "Змінити фотографію",
-        "save-photo": "Зберегти фото"
+        "save-photo": "Зберегти фото",
+        "delete": "Видалити фото",
+        "continue":"Продовжити редагування",
+        "yes-delete": "Tак, видалити"
       }
     },
     "footer": {