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

src/pages/04_product-service/MainPage.vue

@@ -155,6 +155,8 @@ const serviceTab = [
 const currentServiceTab = ref('serviceInformation');
 const propertiesDialog = ref<boolean>(false);
 
+const selectProduct = ref<ProductList[]>([]);
+
 const currentId = ref<string>('');
 const currentIdType = ref<string>('');
 const currentIdService = ref<string>('');
@@ -418,8 +420,6 @@ async function assignFormDataProductService(id: string) {
 }
 
 function assignFormDataProduct(data: ProductList) {
-  console.log(data.detail);
-
   statusToggle.value = data.status === 'INACTIVE' ? false : true;
 
   formDataProduct.value = {
@@ -1032,12 +1032,9 @@ watch(currentStatus, async () => {
         >
           <div v-for="i in product" :key="i.id">
             <TotalProductCardComponent
+              :data="i"
               typeProduct="product"
               :title="i.name"
-              :code="i.code"
-              :price="i.price"
-              :process="i.process"
-              :id="i.id"
               :status="i.status === 'INACTIVE' ? true : false"
               @menuViewDetail="
                 () => {
@@ -1178,7 +1175,63 @@ watch(currentStatus, async () => {
           </template>
         </q-input>
       </div>
-      <TotalProductComponent />
+
+      <AppBox
+        class="row full-width"
+        no-padding
+        style="
+          width: 75vw;
+          display: grid;
+          background: none;
+          grid-template-columns: repeat(4, 1fr);
+          gap: var(--size-3);
+        "
+      >
+        <div v-for="i in product" :key="i.id">
+          <TotalProductCardComponent
+            :isAddProduct="!!selectProduct.find((v) => v.id === i.id)"
+            :isSelected="true"
+            :data="i"
+            typeProduct="product"
+            :title="i.name"
+            :status="i.status === 'INACTIVE' ? true : false"
+            @menuViewDetail="
+              () => {
+                currentIdProduct = i.id;
+                assignFormDataProduct(i);
+                dialogProductEdit = true;
+              }
+            "
+            @menuEdit="
+              () => {
+                currentIdProduct = i.id;
+                infoProductEdit = true;
+                assignFormDataProduct(i);
+                dialogProductEdit = true;
+              }
+            "
+            @viewDetail="
+              () => {
+                currentIdProduct = i.id;
+                infoProductEdit = false;
+                assignFormDataProduct(i);
+                dialogProductEdit = true;
+              }
+            "
+            @select="
+              (data) => {
+                const tempValue = selectProduct.find((v) => v.id === i.id);
+
+                if (tempValue) {
+                  selectProduct = selectProduct.filter((v) => v.id !== i.id);
+                } else {
+                  selectProduct.push(data);
+                }
+              }
+            "
+          />
+        </div>
+      </AppBox>
     </div>
   </FormDialog>