From e633b2b7eb23b2db4f83afe8d7ee9a144a2dd7b5 Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Thu, 15 Aug 2024 11:46:26 +0700
Subject: [PATCH] refactor(04): service work product img

---
 .../WorkManagementComponent.vue                 | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/src/components/04_product-service/WorkManagementComponent.vue b/src/components/04_product-service/WorkManagementComponent.vue
index 5c5f73ac..528123a3 100644
--- a/src/components/04_product-service/WorkManagementComponent.vue
+++ b/src/components/04_product-service/WorkManagementComponent.vue
@@ -6,7 +6,9 @@ import useProductServiceStore from 'stores/product-service';
 import useOptionStore from 'stores/options';
 import { Attributes, ProductList } from 'stores/product-service/types';
 import { storeToRefs } from 'pinia';
+import { ref } from 'vue';
 
+const baseUrl = ref<string>(import.meta.env.VITE_API_BASE_URL);
 const productServiceStore = useProductServiceStore();
 const optionStore = useOptionStore();
 
@@ -184,7 +186,7 @@ defineEmits<{
           <div class="q-py-md q-px-md full-width">
             <div
               v-if="attributes.additional.length > 0"
-              class="row items-center full-width surface-1 q-py-md q-px-sm q-gutter-sm"
+              class="row items-center full-width surface-1 q-pb-md q-pt-sm q-px-sm q-gutter-sm"
             >
               <div
                 v-for="(p, index) in attributes.additional"
@@ -269,9 +271,17 @@ defineEmits<{
                   <div class="row no-wrap">
                     <div class="bordered q-mx-md col-3 image-box">
                       <q-img
-                        src="blank-image.png"
+                        :src="`${baseUrl}/product/${product?.id}/image?ts=${Date.now()}`"
                         style="object-fit: cover; width: 100%; height: 100%"
-                      ></q-img>
+                      >
+                        <template #error>
+                          <div
+                            class="surface-3 full-width full-height no-padding"
+                          >
+                            <q-img src="blank-image.png"></q-img>
+                          </div>
+                        </template>
+                      </q-img>
                     </div>
                     <div class="column col justify-between">
                       <span
@@ -356,6 +366,7 @@ defineEmits<{
   border-color: var(--teal-9);
   border-radius: 10px;
   background-color: var(--surface-3);
+  overflow: hidden;
 }
 
 :deep(i.q-icon.mdi.mdi-chevron-down-circle.q-expansion-item__toggle-icon) {