feat: เพิ่ม สินค้า

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

@@ -3,32 +3,47 @@ import { ref } from 'vue';
 import AppBox from 'components/app/AppBox.vue';
 const addedProduct = ref<boolean>(false);
 
+import { ProductList } from 'src/stores/product-service/types';
+
 const baseUrl = ref<string>(import.meta.env.VITE_API_BASE_URL);
-defineProps<{
-  title?: string;
-  code?: string;
-  dense?: boolean;
-  outlined?: boolean;
-  readonly?: boolean;
-  separator?: boolean;
-  typeProduct?: string;
-  price?: number;
-  process?: number;
-  id?: string;
-  status?: boolean;
-}>();
+
+withDefaults(
+  defineProps<{
+    data: ProductList;
+    title?: string;
+
+    dense?: boolean;
+    outlined?: boolean;
+    readonly?: boolean;
+    separator?: boolean;
+    typeProduct?: string;
+    status?: boolean;
+
+    isAddProduct?: boolean;
+    isSelected?: boolean;
+  }>(),
+  {
+    isSelected: false,
+  },
+);
 </script>
 
 <template>
   <AppBox
     no-padding
     bordered
+    :class="{ 'is-add-product': isAddProduct }"
     style="box-shadow: var(--shadow-3); width: 240px; height: 286px"
+    @click="$emit('select', data)"
   >
     <div class="q-pa-sm" :class="{ inactive: status }">
       <div class="row flex justify-between text-bold">
         <div class="col-9">{{ title ?? 'title' }}</div>
-        <div class="col-3 relative-position" style="left: 10px; bottom: 10px">
+        <div
+          v-if="isSelected === false"
+          class="col-3 relative-position"
+          style="left: 10px; bottom: 10px"
+        >
           <q-btn
             flat
             round
@@ -79,8 +94,17 @@ defineProps<{
             </q-menu>
           </q-btn>
         </div>
+
+        <q-avatar
+          v-if="isAddProduct"
+          :style="`background-color: var(${typeProduct === 'product' ? '--green-10' : '--orange-8'})`"
+          size="18px"
+          text-color="white"
+        >
+          1
+        </q-avatar>
       </div>
-      <div class="app-text-muted">{{ code ?? 'code' }}</div>
+      <div class="app-text-muted">{{ data.code ?? 'code' }}</div>
       <div class="flex justify-start text-bold">
         <div
           v-if="typeProduct === 'work'"
@@ -98,7 +122,7 @@ defineProps<{
         class="flex justify-end text-bold"
         style="color: var(--green-10)"
       >
-        ฿ {{ price }}
+        ฿ {{ data.price }}
       </div>
 
       <div
@@ -106,7 +130,7 @@ defineProps<{
         :style="`background-color: var(${typeProduct === 'product' ? '--green-0' : '--orange-0'})`"
       >
         <q-img
-          :src="`${baseUrl}/product/${id}/image`"
+          :src="`${baseUrl}/product/${data.id}/image`"
           style="height: 86px; max-width: 100px"
         >
           <template #error>
@@ -138,20 +162,11 @@ defineProps<{
             class="surface-0 rounded q-pa-xs app-text-muted"
             size="20px"
           />
-          {{ process }} วัน
+          {{ data.process }} วัน
         </div>
 
-        <div>
+        <div v-if="isSelected === false">
           <q-btn
-            v-if="addedProduct"
-            unelevated
-            class="q-mr-sm text-white"
-            label="เพิ่มสินค้าแล้ว (1)"
-            @click="addedProduct = false"
-            style="background-color: var(--green-10)"
-          />
-          <q-btn
-            v-else
             unelevated
             dense
             class="q-mr-sm app-text-info"
@@ -173,4 +188,8 @@ defineProps<{
 .inactive {
   opacity: 0.4;
 }
+
+.is-add-product {
+  border-color: var(--green-10);
+}
 </style>