start work on customization dialog

frontend/src/app/routes/view/customize-dialog/customize-dialog.component.html

@@ -0,0 +1,6 @@
+<div class="dialog-text">
+  <h1>Customize Image</h1>
+</div>
+<div class="dialog-buttons">
+  <button mat-button (click)="close()">Close</button>
+</div>

frontend/src/app/routes/view/customize-dialog/customize-dialog.component.ts

@@ -0,0 +1,26 @@
+import { Component, Inject, OnInit } from '@angular/core';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import {
+  ConfirmDialogComponent,
+  ConfirmDialogData
+} from 'src/app/util/util-module/confirm-dialog/confirm-dialog.component';
+
+@Component({
+  selector: 'customize-dialog',
+  templateUrl: './customize-dialog.component.html',
+  styleUrls: ['./customize-dialog.component.scss'],
+})
+export class CustomizeDialogComponent implements OnInit {
+  constructor(
+    public dialogRef: MatDialogRef<ConfirmDialogComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: ConfirmDialogData
+  ) {}
+
+  ngOnInit(): void {
+    console.log(this.data);
+  }
+
+  close() {
+    this.dialogRef.close();
+  }
+}

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

@@ -1,11 +1,11 @@
 <div class="container centered">
   <div class="row">
     <div class="col-12">
-      <h1>Image uploaded by {{imageUser?.username}}</h1>
+      <h1>Image uploaded by {{ imageUser?.username }}</h1>
     </div>
 
     <div class="col-12" *ngIf="image !== null">
-      <h3>Uploaded {{(image.created | amTimeAgo)}}</h3>
+      <h3>Uploaded {{ image.created | amTimeAgo }}</h3>
     </div>
 
     <div class="col-12 py-3">
@@ -21,7 +21,7 @@
         <mat-label>Image Format</mat-label>
         <mat-select
           (valueChange)="selectedFormat($event)"
-          [value]="setSelectedValue"
+          [value]="setSelectedFormat"
         >
           <mat-option *ngFor="let format of formatOptions" [value]="format.key">
             {{ format.value }}
@@ -56,6 +56,9 @@
   [open-on-hover]="true"
   (main-click)="download()"
 >
+  <button mat-mini-fab matTooltip="Customize Image" (click)="customize()">
+    <mat-icon> tune </mat-icon>
+  </button>
   <button mat-mini-fab matTooltip="Share image" (click)="share()">
     <mat-icon> share </mat-icon>
   </button>

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

@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import { MatDialog } from '@angular/material/dialog';
 import { ActivatedRoute, Router } from '@angular/router';
 import { ImageLinks } from 'picsur-shared/dist/dto/image-links.dto';
 import {
@@ -17,6 +18,7 @@ import { UUIDRegex } from 'picsur-shared/dist/util/common-regex';
 import { ParseMime } from 'picsur-shared/dist/util/parse-mime';
 import { ImageService } from 'src/app/services/api/image.service';
 import { UtilService } from 'src/app/util/util-module/util.service';
+import { CustomizeDialogComponent } from './customize-dialog/customize-dialog.component';
 
 @Component({
   templateUrl: './view.component.html',
@@ -27,7 +29,8 @@ export class ViewComponent implements OnInit {
     private route: ActivatedRoute,
     private router: Router,
     private imageService: ImageService,
-    private utilService: UtilService
+    private utilService: UtilService,
+    private dialog: MatDialog
   ) {}
 
   private id: string;
@@ -36,13 +39,14 @@ export class ViewComponent implements OnInit {
     mime: ImageMime.JPEG,
     type: SupportedMimeCategory.Image,
   };
+  private currentSelectedFormat: string = ImageMime.JPEG;
 
   public formatOptions: {
     value: string;
     key: string;
   }[] = [];
 
-  public setSelectedValue: string = ImageMime.JPEG;
+  public setSelectedFormat: string = ImageMime.JPEG;
 
   public previewLink = '';
   public imageLinks = new ImageLinks();
@@ -78,18 +82,19 @@ export class ViewComponent implements OnInit {
     }
 
     if (this.masterMime.type === SupportedMimeCategory.Image) {
-      this.setSelectedValue = ImageMime.JPEG;
+      this.setSelectedFormat = ImageMime.JPEG;
     } else if (this.masterMime.type === SupportedMimeCategory.Animation) {
-      this.setSelectedValue = AnimMime.GIF;
+      this.setSelectedFormat = AnimMime.GIF;
     } else {
-      this.setSelectedValue = metadata.fileMimes.master;
+      this.setSelectedFormat = metadata.fileMimes.master;
     }
 
-    this.selectedFormat(this.setSelectedValue);
+    this.selectedFormat(this.setSelectedFormat);
     this.updateFormatOptions();
   }
 
   selectedFormat(format: string) {
+    this.currentSelectedFormat = format;
     if (format === 'original') {
       this.imageLinks = this.imageService.CreateImageLinksFromID(this.id, null);
     } else {
@@ -108,6 +113,16 @@ export class ViewComponent implements OnInit {
     this.utilService.shareFile(this.imageLinks.source);
   }
 
+  async customize() {
+    await this.utilService.showCustomDialog(
+      CustomizeDialogComponent,
+      {
+        format: this.currentSelectedFormat,
+      },
+      { dismissable: false }
+    );
+  }
+
   goBackHome() {
     this.router.navigate(['/']);
   }

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

@@ -1,6 +1,7 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
+import { MatDialogModule } from '@angular/material/dialog';
 import { MatDividerModule } from '@angular/material/divider';
 import { MatIconModule } from '@angular/material/icon';
 import { MatSelectModule } from '@angular/material/select';
@@ -8,10 +9,11 @@ import { MomentModule } from 'ngx-moment';
 import { CopyFieldModule } from 'src/app/components/copy-field/copy-field.module';
 import { FabModule } from 'src/app/components/fab/fab.module';
 import { PicsurImgModule } from 'src/app/components/picsur-img/picsur-img.module';
+import { CustomizeDialogComponent } from './customize-dialog/customize-dialog.component';
 import { ViewComponent } from './view.component';
 import { ViewRoutingModule } from './view.routing.module';
 @NgModule({
-  declarations: [ViewComponent],
+  declarations: [ViewComponent, CustomizeDialogComponent],
   imports: [
     CommonModule,
     CopyFieldModule,
@@ -19,6 +21,7 @@ import { ViewRoutingModule } from './view.routing.module';
     MatButtonModule,
     MatSelectModule,
     MatDividerModule,
+    MatDialogModule,
     MatIconModule,
     PicsurImgModule,
     MatIconModule,

frontend/src/app/util/util-module/util.service.ts

@@ -1,3 +1,4 @@
+import { ComponentType } from '@angular/cdk/portal';
 import { Injectable } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { MatSnackBar } from '@angular/material/snack-bar';
@@ -39,20 +40,28 @@ export class UtilService {
   ) {
     let ref = this.snackBar.open(message, '', {
       panelClass: ['mat-toolbar', 'snackbar', type],
-      verticalPosition: this.bootstrap.screenSizeSnapshot() > BSScreenSize.xs ? 'bottom' : 'top',
+      verticalPosition:
+        this.bootstrap.screenSizeSnapshot() > BSScreenSize.xs
+          ? 'bottom'
+          : 'top',
       ...(duration !== null ? { duration } : {}),
     });
   }
 
-  public async showDialog(
-    options: ConfirmDialogData
-  ): Promise<string | undefined> {
+  public async showCustomDialog<T>(
+    component: ComponentType<T>,
+    data: any,
+    options?: {
+      dismissable?: boolean;
+    }
+  ): Promise<any | undefined> {
     return new Promise((resolve, reject) => {
-      const ref = this.dialog.open(ConfirmDialogComponent, {
-        data: options,
-        disableClose: true,
-        closeOnNavigation: false,
-        panelClass: 'small-dialog-padding'
+      const ref = this.dialog.open(component, {
+        data,
+        panelClass: 'small-dialog-padding',
+        ...(options?.dismissable === false
+          ? {}
+          : { disableClose: true, closeOnNavigation: false }),
       });
       const subscription = ref.beforeClosed().subscribe((result) => {
         subscription.unsubscribe();
@@ -61,6 +70,12 @@ export class UtilService {
     });
   }
 
+  public async showDialog(
+    options: ConfirmDialogData
+  ): Promise<string | undefined> {
+    return this.showCustomDialog(ConfirmDialogComponent, options);
+  }
+
   public showDownloadDialog(filename: string): () => void {
     const ref = this.dialog.open(DownloadDialogComponent, {
       data: { name: filename },