From 2d0def98a3e004a37283e8453a56e38e4ad284c6 Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Mon, 1 Jul 2024 11:04:24 +0000
Subject: [PATCH] fix: service & product card image

---
 .../TotalProductCardComponent.vue             | 347 +++++++++---------
 src/components/ProfileUpload.vue              |   7 +-
 src/pages/04_product-service/MainPage.vue     |   7 +-
 3 files changed, 185 insertions(+), 176 deletions(-)

diff --git a/src/components/04_product-service/TotalProductCardComponent.vue b/src/components/04_product-service/TotalProductCardComponent.vue
index 3eba2cf6..1530cb18 100644
--- a/src/components/04_product-service/TotalProductCardComponent.vue
+++ b/src/components/04_product-service/TotalProductCardComponent.vue
@@ -39,205 +39,208 @@ withDefaults(
 </script>
 
 <template>
-  <AppBox
-    no-padding
+  <div
     bordered
     :class="{ 'is-add-product': isAddProduct }"
-    style="box-shadow: var(--shadow-3); min-height: 300px"
+    class="column bordered rounded q-pa-sm no-wrap"
+    style="box-shadow: var(--shadow-3); height: 20rem"
     @click="$emit('select', data)"
   >
-    <div class="q-pa-sm">
-      <div class="row flex justify-between text-bold">
-        <div class="col-9" :class="{ inactive: isDisabled }">
-          {{ title ?? 'title' }}
-        </div>
-        <div
-          v-if="isSelected === false"
-          class="col-3 relative-position"
-          style="left: 10px; bottom: 10px"
+    <div class="row flex justify-between text-bold">
+      <div class="col-9" :class="{ inactive: isDisabled }">
+        {{ title ?? 'title' }}
+      </div>
+      <div
+        v-if="isSelected === false"
+        class="col-3 relative-position"
+        style="left: 10px; bottom: 10px"
+      >
+        <q-btn
+          flat
+          round
+          padding="sm"
+          class="absolute-top-right dots-btn"
+          icon="mdi-dots-vertical"
+          size="sm"
+          @click.stop=""
         >
-          <q-btn
-            flat
-            round
-            padding="sm"
-            class="absolute-top-right dots-btn"
-            icon="mdi-dots-vertical"
-            size="sm"
-            @click.stop=""
-          >
-            <q-menu class="bordered">
-              <q-list v-close-popup>
-                <q-item
-                  clickable
-                  dense
-                  class="row q-py-sm"
-                  style="white-space: nowrap"
-                  @click="$emit('menuViewDetail')"
-                >
-                  <q-icon
-                    name="mdi-eye-outline"
-                    class="col-3"
-                    size="xs"
-                    style="color: hsl(var(--green-6-hsl))"
-                  />
-                  <span class="col-9 q-px-md flex items-center">
-                    {{ $t('viewDetail') }}
-                  </span>
-                </q-item>
+          <q-menu class="bordered">
+            <q-list v-close-popup>
+              <q-item
+                clickable
+                dense
+                class="row q-py-sm"
+                style="white-space: nowrap"
+                @click="$emit('menuViewDetail')"
+              >
+                <q-icon
+                  name="mdi-eye-outline"
+                  class="col-3"
+                  size="xs"
+                  style="color: hsl(var(--green-6-hsl))"
+                />
+                <span class="col-9 q-px-md flex items-center">
+                  {{ $t('viewDetail') }}
+                </span>
+              </q-item>
 
-                <q-item
-                  v-if="!isDisabled"
-                  dense
-                  clickable
-                  class="row q-py-sm"
-                  style="white-space: nowrap"
-                  @click="$emit('menuEdit')"
-                  v-close-popup
-                >
-                  <q-icon
-                    name="mdi-pencil-outline"
-                    class="col-3"
-                    size="xs"
-                    style="color: hsl(var(--cyan-6-hsl))"
-                  />
-                  <span class="col-9 q-px-md flex items-center">
-                    {{ $t('edit') }}
-                  </span>
-                </q-item>
+              <q-item
+                v-if="!isDisabled"
+                dense
+                clickable
+                class="row q-py-sm"
+                style="white-space: nowrap"
+                @click="$emit('menuEdit')"
+                v-close-popup
+              >
+                <q-icon
+                  name="mdi-pencil-outline"
+                  class="col-3"
+                  size="xs"
+                  style="color: hsl(var(--cyan-6-hsl))"
+                />
+                <span class="col-9 q-px-md flex items-center">
+                  {{ $t('edit') }}
+                </span>
+              </q-item>
 
-                <q-item dense>
-                  <q-item-section class="q-py-sm">
-                    <div class="q-pa-sm surface-2 rounded">
-                      <q-toggle
-                        dense
-                        size="sm"
-                        @click="$emit('toggleStatus', data?.id)"
-                        :model-value="!isDisabled"
-                        val="xs"
-                        padding="none"
-                      >
-                        <div class="q-ml-xs">
-                          {{
-                            !isDisabled
-                              ? $t('switchOnLabel')
-                              : $t('switchOffLabel')
-                          }}
-                        </div>
-                      </q-toggle>
-                    </div>
-                  </q-item-section>
-                </q-item>
-              </q-list>
-            </q-menu>
-          </q-btn>
-        </div>
-
-        <q-avatar
-          v-if="isAddProduct"
-          :style="`background-color: var(${data?.type === 'product' ? '--teal-10' : '--orange-5'})`"
-          size="18px"
-          text-color="white"
-        >
-          {{ (index ?? 0) + 1 }}
-        </q-avatar>
+              <q-item dense>
+                <q-item-section class="q-py-sm">
+                  <div class="q-pa-sm surface-2 rounded">
+                    <q-toggle
+                      dense
+                      size="sm"
+                      @click="$emit('toggleStatus', data?.id)"
+                      :model-value="!isDisabled"
+                      val="xs"
+                      padding="none"
+                    >
+                      <div class="q-ml-xs">
+                        {{
+                          !isDisabled
+                            ? $t('switchOnLabel')
+                            : $t('switchOffLabel')
+                        }}
+                      </div>
+                    </q-toggle>
+                  </div>
+                </q-item-section>
+              </q-item>
+            </q-list>
+          </q-menu>
+        </q-btn>
       </div>
 
-      <div :class="{ inactive: isDisabled }">
-        <div class="app-text-muted">{{ data?.code ?? 'code' }}</div>
-        <div class="flex justify-start text-bold">
-          <div
-            v-if="data?.type === 'service'"
-            class="bordered q-pa-xs row surface-0"
-            style="font-size: 12px; border-radius: 5px; width: 80px"
-          >
-            <div class="col ellipsis-2-lines">งาน</div>
-            <q-space />
-            <div class="col text-center">{{ data?.work.length }}</div>
-          </div>
+      <q-avatar
+        v-if="isAddProduct"
+        :style="`background-color: var(${data?.type === 'product' ? '--teal-10' : '--orange-5'})`"
+        size="18px"
+        text-color="white"
+      >
+        {{ (index ?? 0) + 1 }}
+      </q-avatar>
+    </div>
+
+    <div :class="{ inactive: isDisabled }" class="column col">
+      <div class="app-text-muted">{{ data?.code ?? 'code' }}</div>
+      <div class="flex justify-start text-bold">
+        <div
+          v-if="data?.type === 'service'"
+          class="bordered q-pa-xs row surface-0"
+          style="font-size: 12px; border-radius: 5px; width: 80px"
+        >
+          <div class="col ellipsis-2-lines">งาน</div>
+          <q-space />
+          <div class="col text-center">{{ data?.work.length }}</div>
         </div>
+      </div>
 
-        <div v-if="data?.type === 'product'" class="flex">
-          <div
-            class="row full-width text-right"
-            style="font-size: 10px; color: hsl(var(--stone-4-hsl))"
-          >
-            <div class="col-4">ราคาขาย</div>
-            <div class="col-4">ราคาตัวแทน</div>
-            <div class="col-4">ราคาค่าดำเนินการ</div>
-          </div>
-
-          <div
-            class="row full-width text-right items-center"
-            style="margin-top: -5px"
-          >
-            <div
-              class="col-4 text-weight-bold"
-              style="font-size: 14px; color: hsl(var(--orange-5-hsl))"
-            >
-              ฿{{ formatNumberDecimal(data?.price, 2) }}
-            </div>
-            <div
-              class="col-4 text-weight-bold"
-              style="font-size: 14px; color: hsl(var(--purple-9-hsl))"
-            >
-              ฿{{ formatNumberDecimal(data?.agentPrice, 2) }}
-            </div>
-            <div
-              class="col-4"
-              style="font-size: 12px; color: hsl(var(--pink-7-hsl))"
-            >
-              ฿{{ formatNumberDecimal(data?.serviceCharge, 2) }}
-            </div>
-          </div>
+      <div v-if="data?.type === 'product'" class="flex">
+        <div
+          class="row full-width text-right"
+          style="font-size: 10px; color: hsl(var(--stone-4-hsl))"
+        >
+          <div class="col-4">ราคาขาย</div>
+          <div class="col-4">ราคาตัวแทน</div>
+          <div class="col-4">ราคาค่าดำเนินการ</div>
         </div>
 
         <div
-          class="flex justify-center rounded items-center q-my-md q-py-lg"
-          :class="[
-            data?.type === 'product' ? 'card__green' : 'card__orange',
-            $q.dark.isActive ? 'dark' : '',
-          ]"
+          class="row full-width text-right items-center"
+          style="margin-top: -5px"
         >
-          <q-img
-            loading="lazy"
-            :src="`${baseUrl}/${data?.type === 'service' ? 'service' : 'product'}/${data?.id}/image`"
-            style="height: 86px; max-width: 100px"
+          <div
+            class="col-4 text-weight-bold"
+            style="font-size: 14px; color: hsl(var(--orange-5-hsl))"
           >
-            <template #error>
+            ฿{{ formatNumberDecimal(data?.price, 2) }}
+          </div>
+          <div
+            class="col-4 text-weight-bold"
+            style="font-size: 14px; color: hsl(var(--purple-9-hsl))"
+          >
+            ฿{{ formatNumberDecimal(data?.agentPrice, 2) }}
+          </div>
+          <div
+            class="col-4"
+            style="font-size: 12px; color: hsl(var(--pink-7-hsl))"
+          >
+            ฿{{ formatNumberDecimal(data?.serviceCharge, 2) }}
+          </div>
+        </div>
+      </div>
+
+      <div
+        class="col rounded q-my-md items-center justify-center flex"
+        :class="[
+          data?.type === 'product' ? 'card__green' : 'card__orange',
+          $q.dark.isActive ? 'dark' : '',
+        ]"
+        style="overflow: hidden"
+      >
+        <q-img
+          loading="lazy"
+          :src="`${baseUrl}/${data?.type === 'service' ? 'service' : 'product'}/${data?.id}/image`"
+        >
+          <template #error>
+            <div
+              class="full-width items-center justify-center flex"
+              style="background-color: transparent"
+            >
               <q-img
-                style="background: none; height: 86px; max-width: 100px"
                 :src="
                   data?.type === 'product'
                     ? '/shop-image.png'
                     : '/service-image.png'
                 "
-                width="100%"
+                width="5rem"
               />
-            </template>
-          </q-img>
-        </div>
-        <div class="row justify-between items-center q-mb-xs">
-          <div class="q-pr-md" v-if="data?.type === 'service'">
-            <q-icon
-              name="mdi-calendar-month"
-              class="surface-0 rounded q-pa-xs app-text-muted"
-              size="20px"
-            />
-            {{ dateFormat(data?.createdAt) }}
-          </div>
+            </div>
+          </template>
+        </q-img>
+      </div>
 
-          <div class="q-pr-md" v-if="data?.type === 'product'">
-            <q-icon
-              name="mdi-clock-outline"
-              class="surface-0 rounded q-pa-xs app-text-muted"
-              size="20px"
-            />
-            {{ data?.process }} วัน
-          </div>
+      <div class="row justify-between items-center q-mb-xs">
+        <div class="q-pr-md" v-if="data?.type === 'service'">
+          <q-icon
+            name="mdi-calendar-month"
+            class="surface-0 rounded q-pa-xs app-text-muted"
+            size="20px"
+          />
+          {{ dateFormat(data?.createdAt) }}
+        </div>
+
+        <div class="q-pr-md" v-if="data?.type === 'product'">
+          <q-icon
+            name="mdi-clock-outline"
+            class="surface-0 rounded q-pa-xs app-text-muted"
+            size="20px"
+          />
+          {{ data?.process }} วัน
         </div>
       </div>
     </div>
-  </AppBox>
+  </div>
 </template>
 
 <style scoped>
diff --git a/src/components/ProfileUpload.vue b/src/components/ProfileUpload.vue
index a3cb0dd2..ea08be4c 100644
--- a/src/components/ProfileUpload.vue
+++ b/src/components/ProfileUpload.vue
@@ -11,6 +11,7 @@ withDefaults(
     isService?: boolean;
     labelStatusToggle?: string;
     hideToggle?: boolean;
+    readonly?: boolean;
   }>(),
   {
     hideToggle: true,
@@ -48,7 +49,7 @@ defineEmits<{
       />
     </div>
     <div
-      v-if="urlProfile && !profileSubmit"
+      v-if="urlProfile && !profileSubmit && !readonly"
       class="col-12 row q-mt-md q-col-gutter-x-md"
     >
       <div class="col-6">
@@ -78,7 +79,7 @@ defineEmits<{
     </div>
     <q-btn
       id="btn-profile-edit"
-      v-else-if="urlProfile && profileSubmit"
+      v-else-if="urlProfile && profileSubmit && !readonly"
       dense
       unelevated
       outlined
@@ -91,7 +92,7 @@ defineEmits<{
 
     <q-btn
       id="btn-profile-upload"
-      v-else
+      v-if="!urlProfile && !readonly"
       dense
       unelevated
       outlined
diff --git a/src/pages/04_product-service/MainPage.vue b/src/pages/04_product-service/MainPage.vue
index 52d46018..13a66592 100644
--- a/src/pages/04_product-service/MainPage.vue
+++ b/src/pages/04_product-service/MainPage.vue
@@ -634,6 +634,9 @@ async function assignFormDataProductService(id: string) {
 
   if (res) {
     statusToggle.value = res.status === 'INACTIVE' ? false : true;
+    profileUrl.value = res.imageUrl;
+    profileSubmit.value = true;
+
     currentService.value = JSON.parse(JSON.stringify(res));
 
     prevService.value = {
@@ -732,7 +735,7 @@ function clearFormProduct() {
     code: '',
     image: undefined,
   };
-
+  imageProduct.value = undefined;
   dialogProduct.value = false;
   dialogProductEdit.value = false;
   profileUrl.value = '';
@@ -758,6 +761,7 @@ function clearFormService() {
   dialogServiceEdit.value = false;
   profileUrl.value = '';
   profileSubmit.value = false;
+  imageProduct.value = undefined;
 }
 
 function assignFormDataProductServiceCreate() {
@@ -2172,6 +2176,7 @@ watch(inputSearchProductAndService, async () => {
     <template #prepend>
       <ProfileUpload
         isService
+        :readonly="!infoServiceEdit"
         v-model:url-profile="profileUrl"
         v-model:status-toggle="statusToggle"
         v-model:profile-submit="profileSubmit"