feat: Enhance Photo View Component with Dialog Template

libs/shared/src/features/photo/components/photo-view/photo-view.component.html

@@ -1,10 +1,25 @@
 @if(uri()){
-<img [src]="uri()" />
+<img [src]="uri()" (click)="openPhotoDialog()" />
 <!-- TODO - show delete option on long press -->
 <button mat-icon-button (click)="promptDelete()" color="secondary" class="delete-button">
   <mat-icon>close</mat-icon>
 </button>
-
 } @if(errorMsg()){
 <div class="error-msg">{{ errorMsg() }}</div>
 }
+
+<ng-template #dialogTemplate let-data>
+  <div class="photo-dialog">
+    <div
+      mat-icon-button
+      (click)="photoDialog.closeAll()"
+      style="cursor: pointer; width: 100%; display: flex; justify-content: end"
+    >
+      <mat-icon>close</mat-icon>
+    </div>
+    <img [src]="data.uri" [alt]="data.photo.title" />
+    <div (click)="promptDelete()" style="cursor: pointer; color: red; margin-top: 5px">
+      <mat-icon>delete</mat-icon>
+    </div>
+  </div>
+</ng-template>

libs/shared/src/features/photo/components/photo-view/photo-view.component.scss

@@ -26,3 +26,19 @@ button.delete-button.mat-mdc-icon-button.mat-mdc-button-base {
   height: 100%;
   border: 1px solid var(--color-light);
 }
+
+.photo-dialog {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+
+  img {
+    max-width: 70vw;
+    max-height: 70vh;
+    object-fit: contain;
+  }
+}

libs/shared/src/features/photo/components/photo-view/photo-view.component.ts

@@ -1,5 +1,7 @@
-import { Component, effect, input, signal } from '@angular/core';
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { Component, effect, Input, signal, TemplateRef, ViewChild } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
+import { MatDialog, MatDialogModule } from '@angular/material/dialog';
 import { MatIconModule } from '@angular/material/icon';
 
 import { PicsaDialogService } from '../../../dialog';
@@ -9,27 +11,29 @@ import { IPhotoEntry } from '../../schema';
 @Component({
   selector: 'picsa-photo-view',
   standalone: true,
-  imports: [MatButtonModule, MatIconModule],
+  imports: [MatButtonModule, MatIconModule, MatDialogModule],
   templateUrl: './photo-view.component.html',
-  styleUrl: './photo-view.component.scss',
+  styleUrls: ['./photo-view.component.scss'],
 })
 export class PhotoViewComponent {
   /** Input photo document ref */
-  photo = input.required<IPhotoEntry>();
+  @Input() photo!: IPhotoEntry;
   /** Path to resource for render */
   uri = signal('');
   /** Error message to display */
   errorMsg = signal('');
 
-  constructor(private service: PhotoService, private dialog: PicsaDialogService) {
+  @ViewChild('dialogTemplate') dialogTemplate!: TemplateRef<any>;
+
+  constructor(private service: PhotoService, private dialog: PicsaDialogService, public photoDialog: MatDialog) {
     effect(
       async (onCleanup) => {
-        const photo = this.photo();
+        const photo = this.photo;
         const uri = await this.service.getPhotoAttachment(photo.id);
         if (uri) {
           this.uri.set(uri);
         } else {
-          console.error('[Photo] not found', this.photo());
+          console.error('[Photo] not found', this.photo);
           this.errorMsg.set(`Photo not found`);
         }
         onCleanup(() => {
@@ -40,11 +44,18 @@ export class PhotoViewComponent {
     );
   }
 
+  openPhotoDialog() {
+    this.photoDialog.open(this.dialogTemplate, {
+      data: { photo: this.photo, uri: this.uri() },
+    });
+  }
+
   public async promptDelete() {
     const dialogRef = await this.dialog.open('delete');
     dialogRef.afterClosed().subscribe(async (shouldDelete) => {
       if (shouldDelete) {
-        await this.service.deletePhoto(this.photo().id);
+        await this.service.deletePhoto(this.photo.id);
+        this.photoDialog.closeAll();
       }
     });
   }