diff options
| author | Adam T. Carpenter <atc@53hor.net> | 2020-11-16 21:41:23 -0500 |
|---|---|---|
| committer | Adam T. Carpenter <atc@53hor.net> | 2020-11-16 21:41:23 -0500 |
| commit | 4060a91d180f4fdef690d9f540d8bdd61ba33f9f (patch) | |
| tree | 71d671d79816895670a7bb845871d37398b048ef | |
| parent | fe5403014267b81142581f54c38e4576a391ea6f (diff) | |
| download | theglassyladies-4060a91d180f4fdef690d9f540d8bdd61ba33f9f.tar.xz theglassyladies-4060a91d180f4fdef690d9f540d8bdd61ba33f9f.zip | |
added thumbnail to product edit card
| -rw-r--r-- | iridescence/src/components/admin/ProductEditCard.vue | 22 |
1 files changed, 19 insertions, 3 deletions
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) || {}; }, |