Delete photo

.vscode/launch.json

@@ -0,0 +1,15 @@
+{
+  // Use IntelliSense to learn about possible attributes.
+  // Hover to view descriptions of existing attributes.
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "type": "chrome",
+      "request": "launch",
+      "name": "Launch Chrome against localhost",
+      "url": "http://localhost:4200",
+      "webRoot": "${workspaceFolder}"
+    }
+  ]
+}

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

@@ -22,6 +22,9 @@
                accept=".jpg, .jpeg, .png" 
                (change)="onSelectPhoto($event)">
       </label>
+      <button type="button" 
+              class="primary-global-button delete" 
+              (click)="delitePhoto()">{{"user.edit-profile.btn.delete" | translate }}</button>
     </div>
   </div>
   <ng-template #elseBlock>

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

@@ -13,28 +13,6 @@ $main-font: 'Open Sans';
   margin: 0 auto;
   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;
@@ -99,6 +77,43 @@ $main-font: 'Open Sans';
         outline: none;
       }
 
+      .primary-global-button {
+        background: #fff;
+        color: #13aa57;
+        width: 132px;
+        margin-right: 24px;
+
+        &:hover {
+          border: 1px solid #056b33;
+          color: #056b33;
+        }
+      }
+
+      .delete {
+        background: #f03127;
+        border: 1px solid #f03127;
+        border-radius: 3px;
+        color: #fff;
+        margin-left: 24px;
+        margin-right: 24px;
+
+        &:hover {
+          border: 1px solid #b42626;
+          background: #b42626;
+          color: #fff;
+        }
+      }
+
+      .secondary-global-button {
+        background: #13aa57;
+        color: #fff;
+        padding: 16px 24px;
+
+        &:hover {
+          background: #056b33;
+        }
+      }
+
       button:disabled {
         background: #839c94;
         border: 1px solid #839c94;

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

@@ -40,6 +40,11 @@ export class EditPhotoPopUpComponent implements OnInit {
     this.matDialogRef.close();
   }
 
+  public delitePhoto(): void {
+    this.editProfileService.deleProfilePhoto().subscribe(
+      () =>  this.closeEditPhoto());
+  }
+
   public onSelectPhoto(event): void {
     this.isWarning = false;
     this.selectedFile = event.target.files[0] as File;

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

@@ -477,7 +477,8 @@
         "save": "Save",
         "new-photo": "Upload new photo",
         "change-photo": "Change photo",
-        "save-photo": "Save photo"
+        "save-photo": "Save photo",
+        "delete": "Delete photo"
       }
     },
     "footer": {

src/assets/i18n/ru.json

@@ -482,7 +482,8 @@
         "save": "Сохранить",
         "new-photo": "Загрузить новое фото",
         "change-photo": "Измени фотографию",
-        "save-photo": "Сохранить фото"
+        "save-photo": "Сохранить фото",
+        "delete": "Удалить фото"
       }
     },
     "footer": {

src/assets/i18n/uk.json

@@ -482,7 +482,8 @@
         "save": "Зберегти",
         "new-photo": "Завантажити нове фото",
         "change-photo": "Змінити фотографію",
-        "save-photo": "Зберегти фото"
+        "save-photo": "Зберегти фото",
+        "delete": "Видалити фото"
       }
     },
     "footer": {