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>

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"

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"

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) }}
+                                        <div class="image-wrapper">
-                                        <QImg
+                                            <VnImg
-                                            :src="`/api/Images/catalog/50x50/${props.row.item?.id}/download?access_token=${token}`"
+                                                :src="`/api/Images/catalog/200x200/${props.row.item?.id}/download?access_token=${token}`"
-                                            spinner-color="primary"
+                                                class="image"
-                                            :ratio="1"
                                                 height="50"
                                                 width="50"
-                                            class="image-wrapper"
+                                                style="
-                                            style="cursor: pointer"
+                                                    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;
+    margin-left: 30%;
+
+    .image {
         border-radius: 50%;
+    }
 }
 
 .no-result {