From 4060a91d180f4fdef690d9f540d8bdd61ba33f9f Mon Sep 17 00:00:00 2001
From: "Adam T. Carpenter" <atc@53hor.net>
Date: Mon, 16 Nov 2020 21:41:23 -0500
Subject: added thumbnail to product edit card

---
 .../src/components/admin/ProductEditCard.vue       | 22 +++++++++++++++++++---
 1 file changed, 19 insertions(+), 3 deletions(-)

(limited to 'iridescence')

diff --git a/iridescence/src/components/admin/ProductEditCard.vue b/iridescence/src/components/admin/ProductEditCard.vue
index 2927b42..f8895aa 100644
--- a/iridescence/src/components/admin/ProductEditCard.vue
+++ b/iridescence/src/components/admin/ProductEditCard.vue
@@ -6,9 +6,14 @@
           {{ old.id }}: {{ old.name }}
         </p>
       </div>
+      <div class="card-image">
+        <figure v-if="old.id" class="image is-square">
+          <img :src="thumbnail" :alt="name" />
+        </figure>
+      </div>
       <div class="card-content">
         <div class="field">
-          <div class="file has-name is-boxed is-fullwidth">
+          <div class="file has-name is-boxed is-centered is-fullwidth ">
             <label class="file-label">
               <input
                 class="file-input"
@@ -19,12 +24,20 @@
               />
               <span class="file-cta">
                 <span class="file-label has-text-centered">
-                  Upload a Photo
+                  <p v-if="old.photo_thumbnail">
+                    Replace Photo
+                  </p>
+                  <p v-else>
+                    Upload Photo
+                  </p>
                 </span>
               </span>
-              <span class="file-name">
+              <span v-if="filename" class="file-name">
                 {{ filename }}
               </span>
+              <span v-else class="file-name">
+                {{ old.photo_thumbnail }}
+              </span>
             </label>
           </div>
         </div>
@@ -147,6 +160,9 @@ export default {
     };
   },
   computed: {
+    thumbnail: function() {
+      return process.env.VUE_APP_IMAGE_ROOT + "/" + this.old.photo_thumbnail;
+    },
     old: function() {
       return this.$store.getters.products.find(p => p.id == this.oldid) || {};
     },
-- 
cgit v1.2.3