add delete button to image view layout

frontend/src/app/routes/view/view.component.html

@@ -57,9 +57,12 @@
   (main-click)="download()"
 >
   <button mat-mini-fab matTooltip="Customize Image" (click)="customize()">
-    <mat-icon> tune </mat-icon>
+    <mat-icon fontSet="material-icons-outlined"> tune </mat-icon>
   </button>
   <button mat-mini-fab matTooltip="Share image" (click)="share()">
-    <mat-icon> share </mat-icon>
+    <mat-icon fontSet="material-icons-outlined"> share </mat-icon>
+  </button>
+  <button *ngIf="canDelete" mat-mini-fab matTooltip="Delete image" (click)="deleteImage()">
+    <mat-icon fontSet="material-icons-outlined"> delete </mat-icon>
   </button>
 </speed-dial>

frontend/src/app/routes/view/view.component.ts

@@ -1,20 +1,26 @@
 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
+import { AutoUnsubscribe } from 'ngx-auto-unsubscribe-decorator';
 import { ImageLinks } from 'picsur-shared/dist/dto/image-links.class';
 import {
   AnimFileType,
   FileType,
   FileType2Ext,
-  ImageFileType, SupportedFileTypeCategory,
+  ImageFileType,
+  SupportedFileTypeCategory,
   SupportedFileTypes
 } from 'picsur-shared/dist/dto/mimes.dto';
+import { Permission } from 'picsur-shared/dist/dto/permissions.enum';
 
 import { EImage } from 'picsur-shared/dist/entities/image.entity';
 import { EUser } from 'picsur-shared/dist/entities/user.entity';
 import { HasFailed, HasSuccess } from 'picsur-shared/dist/types';
 import { UUIDRegex } from 'picsur-shared/dist/util/common-regex';
 import { ParseFileType } from 'picsur-shared/dist/util/parse-mime';
+import { SnackBarType } from 'src/app/models/dto/snack-bar-type.dto';
 import { ImageService } from 'src/app/services/api/image.service';
+import { PermissionService } from 'src/app/services/api/permission.service';
+import { UserService } from 'src/app/services/api/user.service';
 import { UtilService } from 'src/app/util/util-module/util.service';
 import {
   CustomizeDialogComponent,
@@ -31,6 +37,8 @@ export class ViewComponent implements OnInit {
     private readonly router: Router,
     private readonly imageService: ImageService,
     private readonly utilService: UtilService,
+    private readonly permissionService: PermissionService,
+    private readonly userService: UserService,
   ) {}
 
   private id: string;
@@ -54,7 +62,12 @@ export class ViewComponent implements OnInit {
   public image: EImage | null = null;
   public imageUser: EUser | null = null;
 
+  public canDelete: boolean = false;
+
   async ngOnInit() {
+    this.subscribePermissions();
+
+    // Extract and verify params
     const params = this.route.snapshot.paramMap;
 
     this.id = params.get('id') ?? '';
@@ -62,10 +75,12 @@ export class ViewComponent implements OnInit {
       return this.utilService.quitError('Invalid image link');
     }
 
+    // Get metadata
     const metadata = await this.imageService.GetImageMeta(this.id);
     if (HasFailed(metadata))
       return this.utilService.quitError(metadata.getReason());
 
+    // Populate fields with metadata
     this.previewLink = this.imageService.GetImageURL(
       this.id,
       metadata.fileTypes.master,
@@ -76,6 +91,7 @@ export class ViewComponent implements OnInit {
     this.imageUser = metadata.user;
     this.image = metadata.image;
 
+    // Populate default selected format
     const masterFiletype = ParseFileType(metadata.fileTypes.master);
     if (HasSuccess(masterFiletype)) {
       this.masterFileType = masterFiletype;
@@ -93,6 +109,7 @@ export class ViewComponent implements OnInit {
 
     this.selectedFormat(this.setSelectedFormat);
     this.updateFormatOptions();
+    this.updatePermissions();
   }
 
   selectedFormat(format: string) {
@@ -115,6 +132,45 @@ export class ViewComponent implements OnInit {
     this.utilService.shareFile(this.imageLinks.source);
   }
 
+  goBackHome() {
+    this.router.navigate(['/']);
+  }
+
+  async deleteImage() {
+    const pressedButton = await this.utilService.showDialog({
+      title: `Are you sure you want to delete the image?`,
+      description: 'This action cannot be undone.',
+      buttons: [
+        {
+          name: 'cancel',
+          text: 'Cancel',
+        },
+        {
+          color: 'warn',
+          name: 'delete',
+          text: 'Delete',
+        },
+      ],
+    });
+
+    if (pressedButton === 'delete') {
+      const result = await this.imageService.DeleteImage(this.id);
+      if (HasFailed(result)) {
+        return this.utilService.showSnackBar(
+          'Failed to delete image',
+          SnackBarType.Error,
+        );
+      }
+
+      this.utilService.showSnackBar(
+        'Image deleted',
+        SnackBarType.Success,
+      );
+
+      this.router.navigate(['/']);
+    }
+  }
+
   async customize() {
     const options: CustomizeDialogData = {
       imageID: this.id,
@@ -131,8 +187,31 @@ export class ViewComponent implements OnInit {
     });
   }
 
-  goBackHome() {
+  @AutoUnsubscribe()
-    this.router.navigate(['/']);
+  private subscribePermissions() {
+    return this.permissionService.live.subscribe(
+      this.updatePermissions.bind(this),
+    );
+  }
+
+  private updatePermissions() {
+    const permissions = this.permissionService.snapshot;
+    if (permissions.includes(Permission.ImageAdmin)) {
+      this.canDelete = true;
+      return;
+    }
+
+    if (this.imageUser === null) return;
+
+    if (
+      permissions.includes(Permission.ImageUpload) &&
+      this.imageUser.id === this.userService.snapshot?.id
+    ) {
+      this.canDelete = true;
+      return;
+    }
+
+    this.canDelete = false;
   }
 
   private updateFormatOptions() {