From 6bcc0023cd2a0bb1fd46ad259b162726891a4eab Mon Sep 17 00:00:00 2001
From: Trent Larson <trent@trentlarson.com>
Date: Sat, 11 May 2024 07:09:48 -0600
Subject: [PATCH] style the sharing screen (plus other fixes)

---
 src/components/GiftedDialog.vue |  2 +-
 src/components/QuickNav.vue     | 10 +++---
 src/views/GiftedDetails.vue     | 60 ++++++++++++++++++++++-----------
 src/views/SharedPhotoView.vue   | 54 ++++++++++++++++++++---------
 4 files changed, 86 insertions(+), 40 deletions(-)

diff --git a/src/components/GiftedDialog.vue b/src/components/GiftedDialog.vue
index 2ad08b0..9dd8f01 100644
--- a/src/components/GiftedDialog.vue
+++ b/src/components/GiftedDialog.vue
@@ -15,7 +15,7 @@
           class="rounded-l border border-r-0 border-slate-400 bg-slate-200 text-center text-blue-500 px-2 py-2 w-20"
           @click="changeUnitCode()"
         >
-          {{ libsUtil.UNIT_SHORT[unitCode] }}
+          {{ libsUtil.UNIT_SHORT[unitCode] || unitCode }}
         </span>
         <div
           class="border border-r-0 border-slate-400 bg-slate-200 px-4 py-2"
diff --git a/src/components/QuickNav.vue b/src/components/QuickNav.vue
index 53630d5..3cf70d0 100644
--- a/src/components/QuickNav.vue
+++ b/src/components/QuickNav.vue
@@ -12,7 +12,7 @@
         }"
       >
         <router-link :to="{ name: 'home' }" class="block text-center py-3 px-1">
-          <fa icon="house-chimney" class="fa-fw"></fa>
+          <fa icon="house-chimney" class="fa-fw" />
         </router-link>
       </li>
       <!-- Search -->
@@ -28,7 +28,7 @@
           :to="{ name: 'discover' }"
           class="block text-center py-3 px-1"
         >
-          <fa icon="magnifying-glass" class="fa-fw"></fa>
+          <fa icon="magnifying-glass" class="fa-fw" />
         </router-link>
       </li>
       <!-- Projects -->
@@ -44,7 +44,7 @@
           :to="{ name: 'projects' }"
           class="block text-center py-3 px-1"
         >
-          <fa icon="hand" class="fa-fw"></fa>
+          <fa icon="hand" class="fa-fw" />
         </router-link>
       </li>
       <!-- Contacts -->
@@ -60,7 +60,7 @@
           :to="{ name: 'contacts' }"
           class="block text-center py-3 px-1"
         >
-          <fa icon="users" class="fa-fw"></fa>
+          <fa icon="users" class="fa-fw" />
         </router-link>
       </li>
       <!-- Profile -->
@@ -76,7 +76,7 @@
           :to="{ name: 'account' }"
           class="block text-center py-3 px-1"
         >
-          <fa icon="circle-user" class="fa-fw"></fa>
+          <fa icon="circle-user" class="fa-fw" />
         </router-link>
       </li>
     </ul>
diff --git a/src/views/GiftedDetails.vue b/src/views/GiftedDetails.vue
index a37c2e3..9d53398 100644
--- a/src/views/GiftedDetails.vue
+++ b/src/views/GiftedDetails.vue
@@ -5,10 +5,13 @@
   <!-- CONTENT -->
   <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
     <!-- Back -->
-    <div class="text-lg text-center font-light relative px-7">
+    <div
+      v-if="!hideBackButton"
+      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="cancel()"
+        @click="cancelBack()"
       >
         <fa icon="chevron-left" class="fa-fw"></fa>
       </h1>
@@ -31,7 +34,7 @@
         class="rounded-l border border-r-0 border-slate-400 bg-slate-200 text-center text-blue-500 px-2 py-2 w-20"
         @click="changeUnitCode()"
       >
-        {{ libsUtil.UNIT_SHORT[unitCode] }}
+        {{ libsUtil.UNIT_SHORT[unitCode] || unitCode }}
       </span>
       <div
         class="border border-r-0 border-slate-400 bg-slate-200 px-4 py-2"
@@ -144,9 +147,11 @@ export default class GiftedDetails extends Vue {
 
   amountInput = "0";
   description = "";
+  destinationNameAfter = "";
   givenToUser = false;
   giverDid: string | undefined;
   giverName = "";
+  hideBackButton = false;
   imageUrl = "";
   isTrade = false;
   message = "";
@@ -161,24 +166,20 @@ export default class GiftedDetails extends Vue {
   libsUtil = libsUtil;
 
   async mounted() {
-    this.amountInput = this.$route.query.amountInput as string;
-    this.description = this.$route.query.description as string;
+    this.amountInput =
+      (this.$route.query.amountInput as string) || this.amountInput;
+    this.description = (this.$route.query.description as string) || "";
+    this.destinationNameAfter = this.$route.query
+      .destinationNameAfter as string;
     this.giverDid = this.$route.query.giverDid as string;
-    this.giverName = this.$route.query.giverName as string;
-    if (this.giverDid && !this.giverName) {
-      this.giverName =
-        this.giverDid === this.activeDid ? "you" : "someone not named";
-    }
-    this.message = this.$route.query.message as string;
+    this.giverName = (this.$route.query.giverName as string) || "";
+    this.hideBackButton = this.$route.query.hideBackButton === "true";
+    this.message = (this.$route.query.message as string) || "";
     this.offerId = this.$route.query.offerId as string;
     this.projectId = this.$route.query.projectId as string;
     this.recipientDid = this.$route.query.recipientDid as string;
-    this.recipientName = this.$route.query.recipientName as string;
-    if (this.recipientDid && !this.recipientName) {
-      this.recipientName =
-        this.recipientDid === this.activeDid ? "you" : "someone not named";
-    }
-    this.unitCode = this.$route.query.unitCode as string;
+    this.recipientName = (this.$route.query.recipientName as string) || "";
+    this.unitCode = (this.$route.query.unitCode as string) || this.unitCode;
 
     this.imageUrl =
       (this.$route.query.imageUrl as string) ||
@@ -205,7 +206,15 @@ export default class GiftedDetails extends Vue {
       this.apiServer = settings?.apiServer || "";
       this.activeDid = settings?.activeDid || "";
 
+      if (this.giverDid && !this.giverName) {
+        this.giverName =
+          this.giverDid === this.activeDid ? "you" : "someone not named";
+      }
       this.givenToUser = this.recipientDid === this.activeDid;
+      if (this.recipientDid && !this.recipientName) {
+        this.recipientName =
+          this.recipientDid === this.activeDid ? "you" : "someone not named";
+      }
       this.showGivenToUser =
         !this.projectId && this.recipientDid === this.activeDid;
 
@@ -257,6 +266,15 @@ export default class GiftedDetails extends Vue {
   }
 
   cancel() {
+    this.deleteImage(); // not awaiting, so they'll go back immediately
+    if (this.destinationNameAfter) {
+      this.$router.push({ name: this.destinationNameAfter });
+    } else {
+      this.$router.back();
+    }
+  }
+
+  cancelBack() {
     this.deleteImage(); // not awaiting, so they'll go back immediately
     this.$router.back();
   }
@@ -301,7 +319,7 @@ export default class GiftedDetails extends Vue {
         // don't bother with a notification
         // (either they'll simply continue or they're canceling and going back)
       } else {
-        console.error("Non-success deleting image:", response);
+        console.error("Problem deleting image:", response);
         this.$notify(
           {
             group: "alert",
@@ -452,7 +470,11 @@ export default class GiftedDetails extends Vue {
           5000,
         );
         localStorage.removeItem("imageUrl");
-        this.$router.back();
+        if (this.destinationNameAfter) {
+          this.$router.push({ name: this.destinationNameAfter });
+        } else {
+          this.$router.back();
+        }
       }
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
     } catch (error: any) {
diff --git a/src/views/SharedPhotoView.vue b/src/views/SharedPhotoView.vue
index 48510ab..86d902d 100644
--- a/src/views/SharedPhotoView.vue
+++ b/src/views/SharedPhotoView.vue
@@ -7,26 +7,45 @@
       Image
     </h1>
     <div v-if="imageBlob">
-      <div v-if="uploading">
+      <div v-if="uploading" class="text-center mb-4">
         <fa icon="spinner" class="fa-spin-pulse" />
       </div>
       <div v-else>
-        Choose the purpose of this image:
-        <br />
-        <button @click="recordGift">Record a Gift</button>
-        <br />
-        <button @click="recordProfile">Save as Profile Image</button>
-        <br />
-        <button @click="cancel">Cancel</button>
+        <div class="text-center mb-4">Choose how to use this image</div>
+        <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
+          <button
+            @click="recordGift"
+            class="text-center text-md font-bold bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-3 rounded-md"
+          >
+            <fa icon="gift" class="fa-fw" />
+            Record a Gift
+          </button>
+          <button
+            @click="recordProfile"
+            class="text-center text-md font-bold bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-3 rounded-md"
+          >
+            <fa icon="circle-user" class="fa-fw" />
+            Save as Profile Image
+          </button>
+          <button
+            @click="cancel"
+            class="text-center text-md font-bold bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-3 rounded-md"
+          >
+            <fa icon="ban" class="fa-fw" />
+            Cancel
+          </button>
+        </div>
       </div>
 
-      <img
-        :src="URL.createObjectURL(imageBlob)"
-        alt="Shared Image"
-        class="rounded"
-      />
+      <div class="flex justify-center">
+        <img
+          :src="URL.createObjectURL(imageBlob)"
+          alt="Shared Image"
+          class="rounded mt-4"
+        />
+      </div>
     </div>
-    <div v-else>
+    <div v-else class="text-center mb-4">
       <p>No image found.</p>
     </div>
   </section>
@@ -93,7 +112,12 @@ export default class SharedPhotoView extends Vue {
       if (url) {
         this.$router.push({
           name: "gifted-details",
-          query: { imageUrl: url },
+          query: {
+            destinationNameAfter: "home",
+            hideBackButton: true,
+            imageUrl: url,
+            recipientDid: this.activeDid,
+          },
         });
       }
     });