From 42008ef74b2a4462299080dcda27864cbccead95 Mon Sep 17 00:00:00 2001
From: Jon <jon@verdnatura.es>
Date: Mon, 17 Jun 2024 09:56:16 +0200
Subject: [PATCH] feat: refs #6896 created VnImg and added to order module

---
 src/components/ui/VnImg.vue                 | 52 +++++++++++++++++++++
 src/pages/Item/Card/ItemDescriptorImage.vue | 11 +++--
 src/pages/Order/Card/OrderCatalogItem.vue   |  4 +-
 src/pages/Order/OrderLines.vue              | 30 +++++++-----
 4 files changed, 82 insertions(+), 15 deletions(-)
 create mode 100644 src/components/ui/VnImg.vue

diff --git a/src/components/ui/VnImg.vue b/src/components/ui/VnImg.vue
new file mode 100644
index 000000000..37dce7c67
--- /dev/null
+++ b/src/components/ui/VnImg.vue
@@ -0,0 +1,52 @@
+<script setup>
+import { ref } from 'vue';
+
+const $props = defineProps({
+    collection: {
+        type: [String, Number],
+        default: null,
+    },
+    size: {
+        type: Boolean,
+        default: false,
+    },
+    zoomSize: {
+        type: String,
+        required: true,
+    },
+    id: {
+        type: Boolean,
+        default: false,
+    },
+});
+const show = ref(false);
+</script>
+<template>
+    <QImg
+        class="img"
+        v-bind="$attrs"
+        @click="show = !show"
+        spinner-color="primary"
+        :ratio="1"
+    />
+    <QDialog v-model="show" v-if="$props.zoomSize">
+        <QImg
+            class="img_zoom"
+            v-bind="$attrs"
+            spinner-color="primary"
+            :ratio="1"
+            style="border-radius: 0%"
+        />
+    </QDialog>
+</template>
+
+<style lang="scss" scoped>
+.img {
+    cursor: pointer;
+    border-radius: 0%;
+}
+.img_zoom {
+    width: 12%;
+    height: auto;
+}
+</style>
diff --git a/src/pages/Item/Card/ItemDescriptorImage.vue b/src/pages/Item/Card/ItemDescriptorImage.vue
index f16a57548..a02f75b6b 100644
--- a/src/pages/Item/Card/ItemDescriptorImage.vue
+++ b/src/pages/Item/Card/ItemDescriptorImage.vue
@@ -3,7 +3,7 @@ import { ref, onMounted } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import EditPictureForm from 'components/EditPictureForm.vue';
-
+import VnImg from 'src/components/ui/VnImg.vue';
 import { useSession } from 'src/composables/useSession';
 import axios from 'axios';
 
@@ -69,7 +69,12 @@ onMounted(async () => {
 
 <template>
     <div class="relative-position">
-        <QImg :src="image" spinner-color="primary" style="min-height: 256px">
+        <VnImg
+            :src="image"
+            spinner-color="primary"
+            style="min-height: 256px"
+            zoom-size="lg"
+        >
             <template #error>
                 <div class="absolute-full picture text-center q-pa-md flex flex-center">
                     <div>
@@ -82,7 +87,7 @@ onMounted(async () => {
                     </div>
                 </div>
             </template>
-        </QImg>
+        </VnImg>
         <QBtn
             v-if="showEditButton"
             color="primary"
diff --git a/src/pages/Order/Card/OrderCatalogItem.vue b/src/pages/Order/Card/OrderCatalogItem.vue
index a2c78305e..9e362ecd0 100644
--- a/src/pages/Order/Card/OrderCatalogItem.vue
+++ b/src/pages/Order/Card/OrderCatalogItem.vue
@@ -3,6 +3,7 @@ import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import VnLv from 'components/ui/VnLv.vue';
+import VnImg from 'src/components/ui/VnImg.vue';
 import OrderCatalogItemDialog from 'pages/Order/Card/OrderCatalogItemDialog.vue';
 import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
 
@@ -29,10 +30,11 @@ const dialog = ref(null);
     <div class="container order-catalog-item overflow-hidden">
         <QCard class="card shadow-6">
             <div class="img-wrapper">
-                <QImg
+                <VnImg
                     :src="`/api/Images/catalog/200x200/${item.id}/download?access_token=${token}`"
                     spinner-color="primary"
                     :ratio="1"
+                    zoom-size="lg"
                     height="192"
                     width="192"
                     class="image"
diff --git a/src/pages/Order/OrderLines.vue b/src/pages/Order/OrderLines.vue
index 71452522a..ecd2fedb7 100644
--- a/src/pages/Order/OrderLines.vue
+++ b/src/pages/Order/OrderLines.vue
@@ -9,6 +9,7 @@ import FetchData from 'components/FetchData.vue';
 import VnLv from 'components/ui/VnLv.vue';
 import FetchedTags from 'components/ui/FetchedTags.vue';
 import VnConfirm from 'components/ui/VnConfirm.vue';
+import VnImg from 'components/ui/VnImg.vue';
 
 import { toCurrency, toDate } from 'src/filters';
 import { useSession } from 'composables/useSession';
@@ -183,16 +184,19 @@ const detailsColumns = ref([
                             <template #body="props">
                                 <QTr :props="props">
                                     <QTd>
-                                        {{ console.log('props: ', props.row.item.id) }}
-                                        <QImg
-                                            :src="`/api/Images/catalog/50x50/${props.row.item?.id}/download?access_token=${token}`"
-                                            spinner-color="primary"
-                                            :ratio="1"
-                                            height="50"
-                                            width="50"
-                                            class="image-wrapper"
-                                            style="cursor: pointer"
-                                        />
+                                        <div class="image-wrapper">
+                                            <VnImg
+                                                :src="`/api/Images/catalog/200x200/${props.row.item?.id}/download?access_token=${token}`"
+                                                class="image"
+                                                height="50"
+                                                width="50"
+                                                style="
+                                                    cursor: pointer;
+                                                    border-radius: 50%;
+                                                "
+                                                zoom-size="lg"
+                                            />
+                                        </div>
                                     </QTd>
                                     <QTd key="item" :props="props" class="item">
                                         <span class="link">
@@ -306,7 +310,11 @@ const detailsColumns = ref([
 .image-wrapper {
     height: 50px;
     width: 50px;
-    border-radius: 50%;
+    margin-left: 30%;
+
+    .image {
+        border-radius: 50%;
+    }
 }
 
 .no-result {