feat: add product document list (#64)

* feat: product => document select

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

@@ -27,6 +27,7 @@ import DialogForm from 'components/DialogForm.vue';
 import ProfileBanner from 'components/ProfileBanner.vue';
 import SideMenu from 'components/SideMenu.vue';
 import ImageUploadDialog from 'components/ImageUploadDialog.vue';
+import FormDocument from 'src/components/04_product-service/FormDocument.vue';
 import KebabAction from 'src/components/shared/KebabAction.vue';
 import {
   EditButton,
@@ -161,6 +162,7 @@ const imageDialog = ref(false);
 const currentNode = ref<ProductGroup & { type: string }>();
 const expandedTree = ref<string[]>([]);
 const editByTree = ref<'group' | 'type' | undefined>();
+const formProductDocument = ref<string[]>([]);
 
 const treeProductTypeAndGroup = computed(
   () =>
@@ -1016,7 +1018,10 @@ async function assignFormDataProduct(data: Product) {
     expenseType: data.expenseType,
     vatIncluded: data.vatIncluded,
     selectedImage: data.selectedImage,
+    document: data.document,
   };
+  if (prevProduct.value.document)
+    formProductDocument.value = prevProduct.value.document;
   formDataProduct.value = { ...prevProduct.value };
 }
 
@@ -1160,7 +1165,7 @@ async function submitProduct(notClose = false) {
       return;
     }
     const res = await createProduct(
-      formDataProduct.value,
+      { ...formDataProduct.value, document: formProductDocument.value },
       onCreateImageList.value,
     );
 
@@ -1176,6 +1181,7 @@ async function submitProduct(notClose = false) {
     await editProduct(currentIdProduct.value, {
       ...formDataProduct.value,
       status: statusToggle.value ? 'ACTIVE' : 'INACTIVE',
+      document: formProductDocument.value,
     });
   }
   totalProduct.value = totalProduct.value + 1;
@@ -3493,6 +3499,7 @@ watch(
     :close="
       () => {
         dialogProduct = false;
+        formProductDocument = [];
         onCreateImageList = { selectedImage: '', list: [] };
         flowStore.rotate();
       }
@@ -3559,7 +3566,7 @@ watch(
       >
         <div class="q-py-md q-pl-md q-pr-sm">
           <q-item
-            v-for="v in 2"
+            v-for="v in 3"
             :key="v"
             dense
             clickable
@@ -3573,7 +3580,11 @@ watch(
               {{
                 v === 1
                   ? $t('form.field.basicInformation')
-                  : $t('productService.product.priceInformation')
+                  : v === 2
+                    ? $t('productService.product.priceInformation')
+                    : $t('general.information', {
+                        msg: $t('general.attachment'),
+                      })
               }}
             </span>
           </q-item>
@@ -3616,6 +3627,10 @@ watch(
           v-model:calc-vat="formDataProduct.calcVat"
           dense
         />
+        <FormDocument
+          v-if="productTab === 3"
+          v-model:attachment="formProductDocument"
+        />
       </div>
     </div>
   </DialogForm>
@@ -3631,6 +3646,7 @@ watch(
       () => {
         infoProductEdit = false;
         dialogProductEdit = false;
+        formProductDocument = [];
         flowStore.rotate();
       }
     "
@@ -3715,6 +3731,8 @@ watch(
           @click="
             () => {
               formDataProduct = { ...prevProduct };
+              if (prevProduct.document)
+                formProductDocument = prevProduct.document;
               infoProductEdit = false;
             }
           "
@@ -3748,7 +3766,7 @@ watch(
       >
         <div class="q-py-md q-pl-md q-pr-sm">
           <q-item
-            v-for="v in 2"
+            v-for="v in 3"
             :key="v"
             dense
             clickable
@@ -3762,7 +3780,11 @@ watch(
               {{
                 v === 1
                   ? $t('form.field.basicInformation')
-                  : $t('productService.product.priceInformation')
+                  : v === 2
+                    ? $t('productService.product.priceInformation')
+                    : $t('general.information', {
+                        msg: $t('general.attachment'),
+                      })
               }}
             </span>
           </q-item>
@@ -3801,6 +3823,11 @@ watch(
           dense
           :priceDisplay="priceDisplay"
         />
+        <FormDocument
+          v-if="productTab === 3"
+          :readonly="!infoProductEdit"
+          v-model:attachment="formProductDocument"
+        />
       </div>
     </div>
   </DialogForm>