From b13bb6e7e01b9462bda9268e5454fb5d0d3e8617 Mon Sep 17 00:00:00 2001
From: Ochieng Paul <ochiengpaul442@gmail.com>
Date: Mon, 29 Jul 2024 12:18:16 +0300
Subject: [PATCH 1/3] chore: Update photo-view component with dialog template
 and mobile responsiveness

---
 .../photo-view/photo-view.component.html      | 15 ++++++-
 .../photo-view/photo-view.component.scss      | 41 +++++++++++++++++++
 .../photo-view/photo-view.component.ts        | 38 +++++++++++++----
 3 files changed, 84 insertions(+), 10 deletions(-)

diff --git a/libs/shared/src/features/photo/components/photo-view/photo-view.component.html b/libs/shared/src/features/photo/components/photo-view/photo-view.component.html
index d08b4d6d..9242159f 100644
--- a/libs/shared/src/features/photo/components/photo-view/photo-view.component.html
+++ b/libs/shared/src/features/photo/components/photo-view/photo-view.component.html
@@ -1,10 +1,21 @@
 @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">
+    <img [src]="data.uri" [alt]="data.photo.title" />
+    <button mat-icon-button class="close-button" (click)="photoDialog.closeAll()">
+      <mat-icon>close</mat-icon>
+    </button>
+    <button mat-icon-button (click)="promptDelete()" color="warn" class="delete-button">
+      <mat-icon>delete</mat-icon>
+    </button>
+  </div>
+</ng-template>
diff --git a/libs/shared/src/features/photo/components/photo-view/photo-view.component.scss b/libs/shared/src/features/photo/components/photo-view/photo-view.component.scss
index eac3870c..ca8c435c 100644
--- a/libs/shared/src/features/photo/components/photo-view/photo-view.component.scss
+++ b/libs/shared/src/features/photo/components/photo-view/photo-view.component.scss
@@ -26,3 +26,44 @@ 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;
+  justify-content: center;
+  align-items: center;
+
+  img {
+    max-width: 100%;
+    max-height: 100%;
+    object-fit: contain;
+  }
+
+  .close-button {
+    position: absolute;
+    top: 0px;
+    right: 10px;
+    z-index: 1000;
+  }
+
+  .delete-button {
+    // position: absolute;
+    bottom: 10px;
+    left: 10px;
+    z-index: 1000;
+  }
+}
+
+:host ::ng-deep .full-screen-dialog .mat-dialog-container {
+  padding: 0 !important;
+  border-radius: 0;
+  width: 100vw;
+  height: 100vh;
+  max-width: 100vw;
+  max-height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
diff --git a/libs/shared/src/features/photo/components/photo-view/photo-view.component.ts b/libs/shared/src/features/photo/components/photo-view/photo-view.component.ts
index 90dc0093..b19f222e 100644
--- a/libs/shared/src/features/photo/components/photo-view/photo-view.component.ts
+++ b/libs/shared/src/features/photo/components/photo-view/photo-view.component.ts
@@ -1,5 +1,7 @@
-import { Component, effect, input, signal } from '@angular/core';
+import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
+import { Component, effect, Input, signal, TemplateRef,ViewChild } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
+import { MatDialog, MatDialogModule, MatDialogRef } from '@angular/material/dialog';
 import { MatIconModule } from '@angular/material/icon';
 
 import { PicsaDialogService } from '../../../dialog';
@@ -9,27 +11,35 @@ 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('');
+  isMobile = signal(false);
 
-  constructor(private service: PhotoService, private dialog: PicsaDialogService) {
+  @ViewChild('dialogTemplate') dialogTemplate!: TemplateRef<any>;
+
+  constructor(
+    private service: PhotoService,
+    private dialog: PicsaDialogService,
+    public photoDialog: MatDialog,
+    private breakpointObserver: BreakpointObserver
+  ) {
     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(() => {
@@ -38,13 +48,25 @@ export class PhotoViewComponent {
       },
       { allowSignalWrites: true }
     );
+
+    this.breakpointObserver.observe([Breakpoints.Handset]).subscribe((result) => {
+      this.isMobile.set(result.matches);
+    });
+  }
+
+  openPhotoDialog() {
+    this.photoDialog.open(this.dialogTemplate, {
+      data: { photo: this.photo, uri: this.uri() },
+      panelClass: this.isMobile() ? 'full-screen-dialog' : '',
+    });
   }
 
   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();
       }
     });
   }

From 71978c9f9b84a061f08edc9a09baf6b9f41ac52f Mon Sep 17 00:00:00 2001
From: Ochieng Paul <ochiengpaul442@gmail.com>
Date: Mon, 29 Jul 2024 16:21:34 +0300
Subject: [PATCH 2/3] chore: Update photo-view component with dialog template
 and mobile responsiveness

---
 .../photo-view/photo-view.component.html      |  4 +-
 .../photo-view/photo-view.component.scss      | 40 +++++++------------
 .../photo-view/photo-view.component.ts        | 25 +++++-------
 3 files changed, 27 insertions(+), 42 deletions(-)

diff --git a/libs/shared/src/features/photo/components/photo-view/photo-view.component.html b/libs/shared/src/features/photo/components/photo-view/photo-view.component.html
index 9242159f..bc026f80 100644
--- a/libs/shared/src/features/photo/components/photo-view/photo-view.component.html
+++ b/libs/shared/src/features/photo/components/photo-view/photo-view.component.html
@@ -14,8 +14,8 @@
     <button mat-icon-button class="close-button" (click)="photoDialog.closeAll()">
       <mat-icon>close</mat-icon>
     </button>
-    <button mat-icon-button (click)="promptDelete()" color="warn" class="delete-button">
+    <div (click)="promptDelete()" class="delete-button">
       <mat-icon>delete</mat-icon>
-    </button>
+    </div>
   </div>
 </ng-template>
diff --git a/libs/shared/src/features/photo/components/photo-view/photo-view.component.scss b/libs/shared/src/features/photo/components/photo-view/photo-view.component.scss
index ca8c435c..7af335c5 100644
--- a/libs/shared/src/features/photo/components/photo-view/photo-view.component.scss
+++ b/libs/shared/src/features/photo/components/photo-view/photo-view.component.scss
@@ -32,38 +32,28 @@ button.delete-button.mat-mdc-icon-button.mat-mdc-button-base {
   width: 100%;
   height: 100%;
   display: flex;
+  flex-direction: column;
   justify-content: center;
   align-items: center;
 
   img {
-    max-width: 100%;
-    max-height: 100%;
+    max-width: 70vw;
+    max-height: 70vh;
     object-fit: contain;
   }
-
-  .close-button {
-    position: absolute;
-    top: 0px;
-    right: 10px;
-    z-index: 1000;
-  }
-
-  .delete-button {
-    // position: absolute;
-    bottom: 10px;
-    left: 10px;
-    z-index: 1000;
-  }
 }
 
-:host ::ng-deep .full-screen-dialog .mat-dialog-container {
-  padding: 0 !important;
-  border-radius: 0;
-  width: 100vw;
-  height: 100vh;
-  max-width: 100vw;
-  max-height: 100vh;
+.photo-dialog .close-button {
+  position: absolute;
+  top: 0px;
+  right: 0px;
   display: flex;
-  justify-content: center;
-  align-items: center;
+  gap: 10px;
+}
+
+.delete-button {
+  position: relative;
+  top: 5px;
+  cursor: pointer;
+  color: red;
 }
diff --git a/libs/shared/src/features/photo/components/photo-view/photo-view.component.ts b/libs/shared/src/features/photo/components/photo-view/photo-view.component.ts
index b19f222e..aa670cd8 100644
--- a/libs/shared/src/features/photo/components/photo-view/photo-view.component.ts
+++ b/libs/shared/src/features/photo/components/photo-view/photo-view.component.ts
@@ -1,8 +1,8 @@
-import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
-import { Component, effect, Input, signal, TemplateRef,ViewChild } from '@angular/core';
+import { Component, effect, Input, signal, TemplateRef, ViewChild } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
-import { MatDialog, MatDialogModule, MatDialogRef } from '@angular/material/dialog';
+import { MatDialog, MatDialogModule } from '@angular/material/dialog';
 import { MatIconModule } from '@angular/material/icon';
+import { Capacitor } from '@capacitor/core';
 
 import { PicsaDialogService } from '../../../dialog';
 import { PhotoService } from '../../photo.service';
@@ -22,16 +22,10 @@ export class PhotoViewComponent {
   uri = signal('');
   /** Error message to display */
   errorMsg = signal('');
-  isMobile = signal(false);
 
   @ViewChild('dialogTemplate') dialogTemplate!: TemplateRef<any>;
 
-  constructor(
-    private service: PhotoService,
-    private dialog: PicsaDialogService,
-    public photoDialog: MatDialog,
-    private breakpointObserver: BreakpointObserver
-  ) {
+  constructor(private service: PhotoService, private dialog: PicsaDialogService, public photoDialog: MatDialog) {
     effect(
       async (onCleanup) => {
         const photo = this.photo;
@@ -48,16 +42,17 @@ export class PhotoViewComponent {
       },
       { allowSignalWrites: true }
     );
-
-    this.breakpointObserver.observe([Breakpoints.Handset]).subscribe((result) => {
-      this.isMobile.set(result.matches);
-    });
   }
 
   openPhotoDialog() {
+    const isMobilePlatform = Capacitor.getPlatform() === 'ios' || Capacitor.getPlatform() === 'android';
     this.photoDialog.open(this.dialogTemplate, {
       data: { photo: this.photo, uri: this.uri() },
-      panelClass: this.isMobile() ? 'full-screen-dialog' : '',
+      width: isMobilePlatform ? '100%' : 'auto',
+      height: isMobilePlatform ? '100%' : 'auto',
+      maxHeight: '100%',
+      maxWidth: '100%',
+      panelClass: 'photo-dialog',
     });
   }
 

From b303f93fab13f581fcdd1546409bc7c72091195b Mon Sep 17 00:00:00 2001
From: Ochieng Paul <ochiengpaul442@gmail.com>
Date: Mon, 29 Jul 2024 22:27:38 +0300
Subject: [PATCH 3/3] chore: Update photo-view component with dialog template
 and mobile responsiveness

---
 .../photo-view/photo-view.component.html          | 12 ++++++++----
 .../photo-view/photo-view.component.scss          | 15 ---------------
 .../components/photo-view/photo-view.component.ts |  8 +-------
 3 files changed, 9 insertions(+), 26 deletions(-)

diff --git a/libs/shared/src/features/photo/components/photo-view/photo-view.component.html b/libs/shared/src/features/photo/components/photo-view/photo-view.component.html
index bc026f80..41ea288a 100644
--- a/libs/shared/src/features/photo/components/photo-view/photo-view.component.html
+++ b/libs/shared/src/features/photo/components/photo-view/photo-view.component.html
@@ -10,11 +10,15 @@
 
 <ng-template #dialogTemplate let-data>
   <div class="photo-dialog">
-    <img [src]="data.uri" [alt]="data.photo.title" />
-    <button mat-icon-button class="close-button" (click)="photoDialog.closeAll()">
+    <div
+      mat-icon-button
+      (click)="photoDialog.closeAll()"
+      style="cursor: pointer; width: 100%; display: flex; justify-content: end"
+    >
       <mat-icon>close</mat-icon>
-    </button>
-    <div (click)="promptDelete()" class="delete-button">
+    </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>
diff --git a/libs/shared/src/features/photo/components/photo-view/photo-view.component.scss b/libs/shared/src/features/photo/components/photo-view/photo-view.component.scss
index 7af335c5..f9df14d1 100644
--- a/libs/shared/src/features/photo/components/photo-view/photo-view.component.scss
+++ b/libs/shared/src/features/photo/components/photo-view/photo-view.component.scss
@@ -42,18 +42,3 @@ button.delete-button.mat-mdc-icon-button.mat-mdc-button-base {
     object-fit: contain;
   }
 }
-
-.photo-dialog .close-button {
-  position: absolute;
-  top: 0px;
-  right: 0px;
-  display: flex;
-  gap: 10px;
-}
-
-.delete-button {
-  position: relative;
-  top: 5px;
-  cursor: pointer;
-  color: red;
-}
diff --git a/libs/shared/src/features/photo/components/photo-view/photo-view.component.ts b/libs/shared/src/features/photo/components/photo-view/photo-view.component.ts
index aa670cd8..0b27269d 100644
--- a/libs/shared/src/features/photo/components/photo-view/photo-view.component.ts
+++ b/libs/shared/src/features/photo/components/photo-view/photo-view.component.ts
@@ -1,8 +1,8 @@
+/* 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 { Capacitor } from '@capacitor/core';
 
 import { PicsaDialogService } from '../../../dialog';
 import { PhotoService } from '../../photo.service';
@@ -45,14 +45,8 @@ export class PhotoViewComponent {
   }
 
   openPhotoDialog() {
-    const isMobilePlatform = Capacitor.getPlatform() === 'ios' || Capacitor.getPlatform() === 'android';
     this.photoDialog.open(this.dialogTemplate, {
       data: { photo: this.photo, uri: this.uri() },
-      width: isMobilePlatform ? '100%' : 'auto',
-      height: isMobilePlatform ? '100%' : 'auto',
-      maxHeight: '100%',
-      maxWidth: '100%',
-      panelClass: 'photo-dialog',
     });
   }