fix(04): add work btn side menu

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

@@ -471,6 +471,9 @@ const totalProduct = ref<number>(0);
 const totalService = ref<number>(0);
 const filterStat = ref<('group' | 'service' | 'product')[]>([]);
 
+const refAddServiceWork = ref();
+const refEditServiceWork = ref();
+
 // แบ่งหน้า
 const currentPageGroup = ref<number>(1);
 const maxPageGroup = ref<number>(1);
@@ -990,7 +993,6 @@ async function assignFormDataProduct(data: Product) {
     vatIncluded: data.vatIncluded,
     selectedImage: data.selectedImage,
   };
-  console.log(data.calcVat);
   formDataProduct.value = { ...prevProduct.value };
 }
 
@@ -1530,6 +1532,9 @@ watch(
 </script>
 
 <template>
+  <!-- 1:{{ inputSearch }}
+  <br />
+  2:{{ inputSearchProductAndService }} -->
   <ButtonAddComponent
     hide-icon
     v-if="actionDisplay && !currentNoAction"
@@ -3809,14 +3814,40 @@ watch(
             :active="serviceTab === v"
             @click="serviceTab = v"
           >
-            <span class="full-width q-py-sm" style="padding-inline: 20px">
+            <span
+              class="full-width row items-center q-py-sm"
+              style="padding-inline: 20px"
+            >
               {{
                 v === 1
                   ? $t('productService.service.information')
                   : $t('productService.service.workInformation')
               }}
+              <q-btn
+                v-if="v === 2"
+                dense
+                flat
+                icon="mdi-plus"
+                size="sm"
+                rounded
+                padding="0px 0px"
+                class="q-ml-auto"
+                style="color: var(--stone-9)"
+                @click.stop="
+                  () => serviceTab === v && refAddServiceWork.addWork()
+                "
+              />
             </span>
           </q-item>
+          <SideMenu
+            :menu="
+              workItems.map((w, index) => ({
+                name: `${$t('productService.service.work')} ${index + 1} `,
+                anchor: `work-${index}`,
+                sub: true,
+              }))
+            "
+          />
         </div>
       </div>
       <div
@@ -3883,6 +3914,7 @@ watch(
 
         <FormServiceWork
           v-if="serviceTab === 2"
+          ref="refAddServiceWork"
           v-model:work-items="workItems"
           :tree-view="serviceTreeView"
           :service="formDataProductService"
@@ -4198,14 +4230,44 @@ watch(
             :active="serviceTab === v"
             @click="serviceTab = v"
           >
-            <span class="full-width q-py-sm" style="padding-inline: 20px">
+            <span
+              class="full-width row items-center q-py-sm"
+              style="padding-inline: 20px"
+            >
               {{
                 v === 1
                   ? $t('productService.service.information')
                   : $t('productService.service.workInformation')
               }}
+              <q-btn
+                v-if="v === 2 && infoServiceEdit"
+                dense
+                flat
+                icon="mdi-plus"
+                size="sm"
+                rounded
+                padding="0px 0px"
+                class="q-ml-auto"
+                style="color: var(--stone-9)"
+                @click.stop="
+                  () => serviceTab === v && refEditServiceWork.addWork()
+                "
+              />
             </span>
           </q-item>
+          <SideMenu
+            :menu="
+              workItems.map((w, index) => ({
+                name: `${$t('productService.service.work')} ${index + 1} `,
+                anchor: `work-${index}`,
+                sub: true,
+              }))
+            "
+            :active="{
+              background: 'hsla(var(--blue-6-hsl) / .2)',
+              foreground: 'var(--blue-6)',
+            }"
+          />
         </div>
       </div>
       <div
@@ -4230,6 +4292,7 @@ watch(
 
         <FormServiceWork
           v-if="serviceTab === 2"
+          ref="refEditServiceWork"
           :service="formDataProductService"
           :tree-view="serviceTreeView"
           :readonly="!infoServiceEdit"