Merge pull request #39 from lnbits/fix_images

feat: add more images for product

static/components/product-card/product-card.html

@@ -1,6 +1,6 @@
 <q-card class="card--product">
   <q-img
-    :src="product.image ? product.image : '/nostrmarket/static/images/placeholder.png'"
+    :src="product.images ? product.images[0] : '/nostrmarket/static/images/placeholder.png'"
     alt="Product Image"
     loading="lazy"
     spinner-color="white"

static/components/stall-details/stall-details.html

@@ -226,43 +226,28 @@
           label="Categories (Hit Enter to add)"
           placeholder="crafts,robots,etc"
         ></q-select>
-        <q-toggle
-          :label="`${productDialog.url ? 'Insert image URL' : 'Upload image file'}`"
-          v-model="productDialog.url"
-        ></q-toggle>
+
         <q-input
-          v-if="productDialog.url"
           filled
           dense
           v-model.trim="productDialog.data.image"
+          @keydown.enter="addProductImage"
           type="url"
           label="Image URL"
-        ></q-input>
-        <q-file
-          v-else
-          class="q-pr-md"
-          filled
-          dense
-          capture="environment"
-          accept="image/jpeg, image/png"
-          :max-file-size="3*1024**2"
-          label="Small image (optional)"
-          clearable
-          @input="imageAdded"
-          @clear="imageCleared"
         >
-          <template v-if="productDialog.data.image" v-slot:before>
-            <img style="height: 1em" :src="productDialog.data.image" />
-          </template>
-          <template v-if="productDialog.data.image" v-slot:append>
-            <q-icon
-              name="cancel"
-              @click.stop.prevent="imageCleared"
-              class="cursor-pointer"
-            />
-          </template>
-        </q-file>
+          <q-btn @click="addProductImage" dense flat icon="add"></q-btn
+        ></q-input>
 
+        <q-chip
+          v-for="imageUrl in productDialog.data.images"
+          :key="imageUrl"
+          removable
+          @remove="removeProductImage(imageUrl)"
+          color="primary"
+          text-color="white"
+        >
+          <span v-text="imageUrl.split('/').pop()"></span>
+        </q-chip>
         <q-input
           filled
           dense

static/components/stall-details/stall-details.js

@@ -27,6 +27,7 @@ async function stallDetails(path) {
             id: null,
             name: '',
             categories: [],
+            images: [],
             image: null,
             price: 0,
 
@@ -170,22 +171,23 @@ async function stallDetails(path) {
             }
           })
       },
-      imageAdded(file) {
-        const image = new Image()
-        image.src = URL.createObjectURL(file)
-        image.onload = async () => {
-          let fit = imgSizeFit(image)
-          let canvas = document.createElement('canvas')
-          canvas.setAttribute('width', fit.width)
-          canvas.setAttribute('height', fit.height)
-          output = await pica.resize(image, canvas)
-          this.productDialog.data.image = output.toDataURL('image/jpeg', 0.4)
-          this.productDialog = {...this.productDialog}
+      addProductImage: function () {
+        if (!isValidImageUrl(this.productDialog.data.image)) {
+          this.$q.notify({
+            type: 'warning',
+            message: 'Not a valid image URL',
+            timeout: 5000
+          })
+          return
         }
-      },
-      imageCleared() {
+        this.productDialog.data.images.push(this.productDialog.data.image)
         this.productDialog.data.image = null
-        this.productDialog = {...this.productDialog}
+      },
+      removeProductImage: function (imageUrl) {
+        const index = this.productDialog.data.images.indexOf(imageUrl)
+        if (index !== -1) {
+          this.productDialog.data.images.splice(index, 1)
+        }
       },
       getProducts: async function () {
         try {
@@ -205,7 +207,7 @@ async function stallDetails(path) {
           id: this.productDialog.data.id,
           name: this.productDialog.data.name,
 
-          image: this.productDialog.data.image,
+          images: this.productDialog.data.images,
           price: this.productDialog.data.price,
           quantity: this.productDialog.data.quantity,
           categories: this.productDialog.data.categories,
@@ -294,6 +296,7 @@ async function stallDetails(path) {
           description: '',
           categories: [],
           image: null,
+          images: [],
           price: 0,
           quantity: 0,
           config: {

static/js/utils.js

@@ -111,3 +111,13 @@ function timeFromNow(time) {
   // Return time from now data
   return `${tfn.time} ${tfn.unitOfTime}`
 }
+
+function isValidImageUrl(string) {
+  let url
+  try {
+    url = new URL(string)
+  } catch (_) {
+    return false
+  }
+  return url.protocol === 'http:' || url.protocol === 'https:'
+}