make the photo show in a pop-up dialog

src/views/GiftedDetails.vue

@@ -40,7 +40,7 @@
       </div>
       <input
         type="number"
-        class="border border-r-0 border-slate-400 px-2 py-2 text-center"
+        class="border border-r-0 border-slate-400 px-2 py-2 text-center w-20"
         v-model="amountInput"
       />
       <div
@@ -55,25 +55,26 @@
       <label class="text-sm">This is given to a project</label>
     </div>
 
-    <div class="flex justify-center mb-4 mt-4">
-      <span v-if="imageUrl">
-        Includes Image:
-        <a :href="imageUrl" target="_blank" class="text-blue-500 ml-4">View</a>
+    <div class="flex justify-center mt-4">
+      <span v-if="imageUrl" class="flex justify-between">
+        <a :href="imageUrl" target="_blank" class="text-blue-500 ml-4">
+          <img :src="imageUrl" class="h-24 rounded-xl" />
+        </a>
         <fa
           icon="trash-can"
           @click="confirmDeleteImage"
-          class="text-red-500 fa-fw ml-8"
+          class="text-red-500 fa-fw ml-8 mt-10"
         />
       </span>
       <span v-else>
-        <router-link
-          :to="{ name: 'gifted-photo' }"
-          class="bg-blue-500 text-white px-1.5 py-1 rounded-md"
-        >
-          <fa icon="camera" class="fa-fw" />
-        </router-link>
+        <fa
+          icon="camera"
+          class="bg-blue-500 text-white px-2 py-2 rounded-md"
+          @click="openPhotoDialog"
+        />
       </span>
     </div>
+    <GiftedPhotoDialog ref="photoDialog" />
 
     <div v-if="!projectId" class="mt-4">
       <input type="checkbox" class="h-6 w-6 mr-2" v-model="givenToUser" />
@@ -114,9 +115,13 @@ import { MASTER_SETTINGS_KEY, Settings } from "@/db/tables/settings";
 import { createAndSubmitGive } from "@/libs/endorserServer";
 import * as libsUtil from "@/libs/util";
 import { accessToken } from "@/libs/crypto";
+import GiftedDialog from "@/components/GiftedDialog.vue";
+import GiftedPhotoDialog from "@/components/GiftedPhotoDialog.vue";
 
 @Component({
   components: {
+    GiftedDialog,
+    GiftedPhotoDialog,
     QuickNav,
     TopMessage,
   },
@@ -198,6 +203,12 @@ export default class GiftedDetails extends Vue {
     this.$router.back();
   }
 
+  openPhotoDialog() {
+    (this.$refs.photoDialog as GiftedPhotoDialog).open((imgUrl) => {
+      this.imageUrl = imgUrl;
+    });
+  }
+
   confirmDeleteImage() {
     this.$notify(
       {

src/views/GiftedPhoto.vue

@@ -1,178 +0,0 @@
-<template>
-  <!-- CONTENT -->
-  <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Breadcrumb -->
-    <div class="mb-8">
-      <!-- Back -->
-      <div class="text-lg text-center font-light relative px-7">
-        <h1
-          class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
-          @click="$router.back()"
-        >
-          <fa icon="chevron-left" class="fa-fw"></fa>
-        </h1>
-      </div>
-
-      <!-- Heading -->
-      <h1 id="ViewHeading" class="text-4xl text-center font-light pt-4">
-        <span v-if="uploading"> Uploading... </span>
-        <span v-else-if="blob"> Look Good? </span>
-        <span v-else> Say "Cheese"! </span>
-      </h1>
-    </div>
-
-    <div v-if="uploading" class="flex justify-center">
-      <fa icon="spinner" class="fa-spin fa-3x text-center block" />
-    </div>
-    <div v-else-if="blob">
-      <div class="flex justify-around">
-        <button
-          @click="uploadImage"
-          class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-2 rounded-full"
-        >
-          <span>Upload</span>
-        </button>
-        <button
-          @click="retryImage"
-          class="bg-slate-500 hover:bg-slate-700 text-white font-bold py-2 px-2 rounded-full"
-        >
-          <span>Retry</span>
-        </button>
-      </div>
-      <img :src="URL.createObjectURL(blob)" class="mt-2 w-full" />
-    </div>
-    <div v-else>
-      <!--
-        Camera "resolution" doesn't change how it shows on screen but rather stretches the result, eg the following which just stretches it vertically:
-        :resolution="{ width: 375, height: 812 }"
-      -->
-      <camera facingMode="environment" autoplay ref="camera">
-        <div class="absolute bottom-0 w-full flex justify-center pb-4">
-          <!-- Button -->
-          <button
-            @click="takeImage"
-            class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-2 rounded-full"
-          >
-            <fa icon="camera" class="fa-fw"></fa>
-          </button>
-        </div>
-      </camera>
-    </div>
-  </section>
-</template>
-
-<script lang="ts">
-import axios from "axios";
-import Camera from "simple-vue-camera";
-import { Component, Vue } from "vue-facing-decorator";
-
-import { DEFAULT_IMAGE_API_SERVER, NotificationIface } from "@/constants/app";
-import { getIdentity } from "@/libs/util";
-import { db } from "@/db/index";
-import { MASTER_SETTINGS_KEY, Settings } from "@/db/tables/settings";
-import { accessToken } from "@/libs/crypto";
-
-@Component({ components: { Camera } })
-export default class GiftedPhoto extends Vue {
-  $notify!: (notification: NotificationIface, timeout?: number) => void;
-
-  activeDid = "";
-  blob: Blob | null = null;
-  uploading = false;
-
-  URL = window.URL || window.webkitURL;
-
-  async mounted() {
-    try {
-      await db.open();
-      const settings = (await db.settings.get(MASTER_SETTINGS_KEY)) as Settings;
-      this.activeDid = settings?.activeDid || "";
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    } catch (err: any) {
-      console.error("Error retrieving settings from database:", err);
-      this.$notify(
-        {
-          group: "alert",
-          type: "danger",
-          title: "Error",
-          text: err.message || "There was an error retrieving your settings.",
-        },
-        -1,
-      );
-    }
-  }
-
-  async takeImage(/* payload: MouseEvent */) {
-    const cameraComponent = this.$refs.camera as InstanceType<typeof Camera>;
-    this.blob = await cameraComponent?.snapshot(); // png is default; if that changes, change extension in formData.append
-    if (!this.blob) {
-      this.$notify(
-        {
-          group: "alert",
-          type: "danger",
-          title: "Error",
-          text: "There was an error taking the picture. Please try again.",
-        },
-        5000,
-      );
-      return;
-    }
-  }
-
-  async retryImage() {
-    this.blob = null;
-  }
-
-  async uploadImage() {
-    this.uploading = true;
-    const identifier = await getIdentity(this.activeDid);
-    const token = await accessToken(identifier);
-    const headers = {
-      Authorization: "Bearer " + token,
-    };
-    const formData = new FormData();
-    if (!this.blob) {
-      // yeah, this should never happen, but it helps with subsequent type checking
-      this.$notify(
-        {
-          group: "alert",
-          type: "danger",
-          title: "Error",
-          text: "There was an error finding the picture. Please try again.",
-        },
-        5000,
-      );
-      this.uploading = false;
-      return;
-    }
-    formData.append("image", this.blob, "snapshot.png");
-    formData.append("claimType", "GiveAction");
-    try {
-      const response = await axios.post(
-        DEFAULT_IMAGE_API_SERVER + "/image",
-        formData,
-        { headers },
-      );
-      this.uploading = false;
-
-      // we won't give a notification here because the user will be taken back to finish
-
-      localStorage.setItem("imageUrl", response.data.url as string);
-      this.$router.back();
-    } catch (error) {
-      console.error("Error uploading the image", error);
-      this.$notify(
-        {
-          group: "alert",
-          type: "danger",
-          title: "Error",
-          text: "There was an error saving the picture. Please try again.",
-        },
-        5000,
-      );
-      this.uploading = false;
-      this.blob = null;
-    }
-  }
-}
-</script>