fix: service & product card image

src/components/04_product-service/TotalProductCardComponent.vue

@@ -39,14 +39,13 @@ withDefaults(
 </script>
 
 <template>
-  <AppBox
+  <div
-    no-padding
     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' }}
@@ -142,7 +141,7 @@ withDefaults(
       </q-avatar>
     </div>
 
-      <div :class="{ inactive: isDisabled }">
+    <div :class="{ inactive: isDisabled }" class="column col">
       <div class="app-text-muted">{{ data?.code ?? 'code' }}</div>
       <div class="flex justify-start text-bold">
         <div
@@ -192,30 +191,35 @@ withDefaults(
       </div>
 
       <div
-          class="flex justify-center rounded items-center q-my-md q-py-lg"
+        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`"
-            style="height: 86px; max-width: 100px"
         >
           <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"
               />
+            </div>
           </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
@@ -237,7 +241,6 @@ withDefaults(
       </div>
     </div>
   </div>
-  </AppBox>
 </template>
 
 <style scoped>

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

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"