From 96107502ac35897e5c16842b96445067f1846d66 Mon Sep 17 00:00:00 2001
From: oat_dev <nattapon@frappet.com>
Date: Wed, 10 Jul 2024 11:54:22 +0700
Subject: [PATCH] =?UTF-8?q?fix:=20count=20=E0=B8=9A=E0=B8=A3=E0=B8=B4?=
 =?UTF-8?q?=E0=B8=81=E0=B8=B2=E0=B8=A3=E0=B9=84=E0=B8=A1=E0=B9=88=E0=B8=AD?=
 =?UTF-8?q?=E0=B8=B1=E0=B8=9E=E0=B9=80=E0=B8=94=E0=B8=97=20+=20=E0=B8=A5?=
 =?UTF-8?q?=E0=B8=9A=E0=B8=8A=E0=B8=B7=E0=B9=88=E0=B8=AD=E0=B8=82=E0=B8=AD?=
 =?UTF-8?q?=E0=B8=87=E0=B8=9A=E0=B8=A3=E0=B8=B4=E0=B8=81=E0=B8=B2=E0=B8=A3?=
 =?UTF-8?q?=E0=B8=95=E0=B8=AD=E0=B8=99=E0=B9=81=E0=B8=81=E0=B9=89=E0=B9=84?=
 =?UTF-8?q?=E0=B8=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/04_product-service/MainPage.vue | 957 +++++++++++-----------
 1 file changed, 478 insertions(+), 479 deletions(-)

diff --git a/src/pages/04_product-service/MainPage.vue b/src/pages/04_product-service/MainPage.vue
index 4ae31925..9c22ef78 100644
--- a/src/pages/04_product-service/MainPage.vue
+++ b/src/pages/04_product-service/MainPage.vue
@@ -932,7 +932,10 @@ async function submitService() {
       formDataProductService.value.registeredBranchId = null;
     }
 
-    await createService(formDataProductService.value);
+    const res = await createService(formDataProductService.value);
+    if (res) {
+      stat.value[2].count = stat.value[2].count + 1;
+    }
     totalService.value = totalService.value + 1;
     productAndServiceTab.value = 'service';
   }
@@ -949,6 +952,7 @@ async function submitService() {
   if (productAndServiceTab.value === 'service') {
     await fetchListOfService();
   }
+
   flowStore.rotate();
   clearFormService();
 }
@@ -1445,7 +1449,6 @@ watch(inputSearchProductAndService, async () => {
           </div>
         </div>
 
-
         <div
           v-if="
             (productMode === 'type' && productType?.length === 0) ||
@@ -1457,410 +1460,45 @@ watch(inputSearchProductAndService, async () => {
           <NoData :not-found="!!inputSearch" />
         </div>
         <template v-else>
-
-        <div class="col flex scroll full-height q-pa-md surface-1">
-          <div class="full-width">
-            <q-table
-              flat
-              bordered
-              :grid="modeView"
-              :rows="
-                (productMode === 'type' ? productType : productGroup) || []
-              "
-              :columns="tbColumn.groupAndType"
-              class="full-width"
-              card-container-class="q-gutter-md  "
-              row-key="name"
-              :rows-per-page-options="[0]"
-              hide-pagination
-              :visible-columns="tbControl.groupAndType.fieldSelected"
-            >
-              <template v-slot:header="props">
-                <q-tr class="surface-2" :props="props">
-                  <q-th
-                    v-for="col in props.cols"
-                    :key="col.name"
-                    :props="props"
-                  >
-                    {{ $t(col.label) }}
-                  </q-th>
-                  <q-th auto-width />
-                </q-tr>
-              </template>
-
-              <template v-slot:body="props">
-                <q-tr
-                  :class="{
-                    'app-text-muted': props.row.status === 'INACTIVE',
-                    'status-active': props.row.status !== 'INACTIVE',
-                    'status-inactive': props.row.status === 'INACTIVE',
-                  }"
-                  :props="props"
-                  @click="
-                    async () => {
-                      if (productMode === 'type') {
-                        pathTypeName = props.row.name;
-                        currentIdType = props.row.id;
-                        productMode = 'service';
-                        productAndServiceTab = 'service';
-
-                        await fetchListOfProduct();
-                        await fetchListOfService();
-                        await fetchListOfProductAndService();
-                        flowStore.rotate();
-                      }
-                      if (productMode === 'group') {
-                        pathGroupName = props.row.name;
-                        currentId = props.row.id;
-                        productMode = 'type';
-                        await fetchListType();
-                        flowStore.rotate();
-                      }
-                    }
-                  "
-                >
-                  <q-td
-                    v-if="tbControl.groupAndType.fieldSelected.includes('name')"
-                  >
-                    <div class="row items-center">
-                      <div
-                        style="
-                          width: 50px;
-                          display: flex;
-                          margin-bottom: var(--size-2);
-                        "
-                      >
-                        <div
-                          :class="`icon-color-${productMode === 'group' ? 'pink' : 'purple'}`"
-                          class="table__icon"
-                        >
-                          <q-icon
-                            size="md"
-                            style="scale: 0.8"
-                            :name="
-                              productMode === 'group'
-                                ? 'mdi-folder'
-                                : 'mdi-folder-table'
-                            "
-                          />
-                        </div>
-                      </div>
-                      <div class="col">
-                        <div class="col">
-                          {{ props.row.name }}
-                        </div>
-                        <div class="col app-text-muted">
-                          {{ props.row.code || '-' }}
-                        </div>
-                      </div>
-                    </div>
-                  </q-td>
-                  <q-td
-                    v-if="
-                      tbControl.groupAndType.fieldSelected.includes('detail')
-                    "
-                  >
-                    {{ props.row.detail || '-' }}
-                  </q-td>
-
-                  <q-td
-                    v-if="
-                      tbControl.groupAndType.fieldSelected.includes(
-                        'formDialogInputRemark',
-                      )
-                    "
-                  >
-                    {{ props.row.remark || '-' }}
-                  </q-td>
-
-                  <q-td
-                    v-if="
-                      tbControl.groupAndType.fieldSelected.includes('createdAt')
-                    "
-                  >
-                    {{ dateFormat(props.row.createdAt) }}
-                  </q-td>
-
-                  <q-td>
-                    <q-btn
-                      icon="mdi-eye-outline"
-                      size="sm"
-                      dense
-                      round
-                      flat
-                      @click.stop="
-                        () => {
-                          if (productMode === 'type') {
-                            currentStatusProduct =
-                              props.row.status === 'INACTIVE';
-                            clearFormGroup();
-                            currentIdType = props.row.id;
-                            assignFormDataGroup(props.row);
-                            isEdit = false;
-                            drawerInfo = true;
-                          }
-                          if (productMode === 'group') {
-                            currentStatusProduct =
-                              props.row.status === 'INACTIVE';
-                            clearFormGroup();
-                            assignFormDataGroup(props.row);
-                            isEdit = false;
-                            currentId = props.row.id;
-                            drawerInfo = true;
-                          }
-                        }
-                      "
-                    />
-
-                    <q-btn
-                      icon="mdi-dots-vertical"
-                      size="sm"
-                      dense
-                      round
-                      flat
-                      @click.stop
-                      :key="props.row.id"
+          <div class="col flex scroll full-height q-pa-md surface-1">
+            <div class="full-width">
+              <q-table
+                flat
+                bordered
+                :grid="modeView"
+                :rows="
+                  (productMode === 'type' ? productType : productGroup) || []
+                "
+                :columns="tbColumn.groupAndType"
+                class="full-width"
+                card-container-class="q-gutter-md  "
+                row-key="name"
+                :rows-per-page-options="[0]"
+                hide-pagination
+                :visible-columns="tbControl.groupAndType.fieldSelected"
+              >
+                <template v-slot:header="props">
+                  <q-tr class="surface-2" :props="props">
+                    <q-th
+                      v-for="col in props.cols"
+                      :key="col.name"
+                      :props="props"
                     >
-                      <q-menu class="bordered">
-                        <q-list v-close-popup>
-                          <q-item
-                             v-close-popup
-                                    clickable
-                            :id="`view-detail-btn-${props.row.name}-view`"
-                            @click.stop="
-                              () => {
-                                if (productMode === 'type') {
-                                  currentStatusProduct =
-                                    props.row.status === 'INACTIVE';
-                                  clearFormGroup();
-                                  currentIdType = props.row.id;
-                                  assignFormDataGroup(props.row);
-                                  isEdit = false;
-                                  drawerInfo = true;
-                                }
-                                if (productMode === 'group') {
-                                  currentStatusProduct =
-                                    props.row.status === 'INACTIVE';
-                                  clearFormGroup();
-                                  assignFormDataGroup(props.row);
-                                  isEdit = false;
-                                  currentId = props.row.id;
-                                  drawerInfo = true;
-                                }
-                              }
-                            "
-                       
-                            dense
-                            class="row q-py-sm"
-                            style="white-space: nowrap"
-                          >
-                            <q-icon
-                              name="mdi-eye-outline"
-                              class="col-3"
-                              size="xs"
-                              style="color: hsl(var(--green-6-hsl))"
-                            />
-                            <span class="col-9 q-px-md flex items-center">
-                              {{ $t('viewDetail') }}
-                            </span>
-                          </q-item>
+                      {{ $t(col.label) }}
+                    </q-th>
+                    <q-th auto-width />
+                  </q-tr>
+                </template>
 
-                          <q-item
-
-                            :id="`view-detail-btn-${props.row.name}-edit`"
-                              v-close-popup
-                                    clickable
-                            dense
-                            class="row q-py-sm"
-                            style="white-space: nowrap"
-                            @click="
-                              () => {
-                                if (productMode === 'type') {
-                                  clearFormGroup();
-                                  currentIdType = props.row.id;
-                                  assignFormDataGroup(props.row);
-                                  isEdit = true;
-                                  drawerInfo = true;
-                                }
-                                if (productMode === 'group') {
-                                  clearFormGroup();
-                                  assignFormDataGroup(props.row);
-                                  isEdit = true;
-                                  currentId = props.row.id;
-
-                                  drawerInfo = true;
-                                }
-                              }
-                            "
-                          >
-                            <q-icon
-                              name="mdi-pencil-outline"
-                              class="col-3"
-                              size="xs"
-                              style="color: hsl(var(--cyan-6-hsl))"
-                            />
-                            <span class="col-9 q-px-md flex items-center">
-                              {{ $t('edit') }}
-                            </span>
-                          </q-item>
-                          <q-item
-                             v-close-popup
-                           
-                            :id="`view-detail-btn-${props.row.name}-delete`"
-                            dense
-                            :clickable="props.row.status === 'CREATED'"
-                            class="row"
-                            :class="{
-                              'surface-3': props.row.status !== 'CREATED',
-                              'app-text-muted': props.row.status !== 'CREATED',
-                            }"
-                            style="white-space: nowrap"
-                            @click="
-                              () => {
-                                if (productMode === 'type') {
-                                  deleteProductById(props.row.id);
-                                }
-                                if (productMode === 'group') {
-                                  deleteProductById(props.row.id);
-                                }
-                              }
-                            "
-                          >
-                            <q-icon
-                              name="mdi-trash-can-outline"
-                              size="xs"
-                              class="col-3"
-                              :class="{
-                                'app-text-negative':
-                                  props.row.status === 'CREATED',
-                              }"
-                            />
-                            <span class="col-9 q-px-md flex items-center">
-                              {{ $t('delete') }}
-                            </span>
-                          </q-item>
-
-                          <q-item dense>
-                            <q-item-section class="q-py-sm">
-                              <div class="q-pa-sm surface-2 rounded">
-                                <q-toggle
-                                  :id="`view-detail-btn-${props.row.name}-status`"
-                                  dense
-                                  size="sm"
-                                  :label="
-                                    props.row.status !== 'INACTIVE'
-                                      ? $t('switchOnLabel')
-                                      : $t('switchOffLabel')
-                                  "
-                                  @click="
-                                    async () => {
-                                      if (productMode === 'type') {
-                                        toggleStatusType(
-                                          props.row.id,
-                                          props.row.status,
-                                        );
-                                      }
-                                      if (productMode === 'group') {
-                                        toggleStatusGroup(
-                                          props.row.id,
-                                          props.row.status,
-                                        );
-                                      }
-                                    }
-                                  "
-                                  :model-value="props.row.status !== 'INACTIVE'"
-                                />
-                              </div>
-                            </q-item-section>
-                          </q-item>
-                        </q-list>
-                      </q-menu>
-                    </q-btn>
-                  </q-td>
-                </q-tr>
-              </template>
-
-              <template v-slot:item="props">
-                <div class="col-3">
-                  <ProductCardComponent
-                    :isType="productMode === 'type'"
-                    :count-product="props.row._count.product"
-                    :count-type="props.row._count.type"
-                    :count-service="props.row._count.service"
-                    :title="props.row.name"
-                    :subtitle="props.row.code"
-                    :date="new Date(props.row.updatedAt)"
-                    :status="props.row.status"
-                    :id="props.row.id"
-                    :isDisabled="props.row.status === 'INACTIVE'"
-                    :color="
-                      {
-                        type: $q.dark.isActive
-                          ? 'var(--purple-7-hsl)'
-                          : 'var(--violet-11-hsl)',
-                        group: 'var(--pink-6-hsl)',
-                      }[productMode] || 'var(--pink-6-hsl)'
-                    "
-                    @toggleStatus="
-                      if (productMode === 'type') {
-                        toggleStatusType(props.row.id, props.row.status);
-                      }
-                      if (productMode === 'group') {
-                        toggleStatusGroup(props.row.id, props.row.status);
-                      }
-                    "
-                    @viewCard="
-                      () => {
-                        if (productMode === 'type') {
-                          currentStatusProduct =
-                            props.row.status === 'INACTIVE';
-                          clearFormGroup();
-                          currentIdType = props.row.id;
-                          assignFormDataGroup(props.row);
-                          isEdit = false;
-                          drawerInfo = true;
-                        }
-                        if (productMode === 'group') {
-                          currentStatusProduct =
-                            props.row.status === 'INACTIVE';
-                          clearFormGroup();
-                          assignFormDataGroup(props.row);
-                          isEdit = false;
-                          currentId = props.row.id;
-                          drawerInfo = true;
-                        }
-                      }
-                    "
-                    @updateCard="
-                      () => {
-                        if (productMode === 'type') {
-                          clearFormGroup();
-                          currentIdType = props.row.id;
-                          assignFormDataGroup(props.row);
-                          isEdit = true;
-                          drawerInfo = true;
-                        }
-                        if (productMode === 'group') {
-                          clearFormGroup();
-                          assignFormDataGroup(props.row);
-                          isEdit = true;
-                          currentId = props.row.id;
-
-                          drawerInfo = true;
-                        }
-                      }
-                    "
-                    @deleteCard="
-                      () => {
-                        if (productMode === 'type') {
-                          deleteProductById(props.row.id);
-                        }
-                        if (productMode === 'group') {
-                          deleteProductById(props.row.id);
-                        }
-                      }
-                    "
-                    @on-click="
+                <template v-slot:body="props">
+                  <q-tr
+                    :class="{
+                      'app-text-muted': props.row.status === 'INACTIVE',
+                      'status-active': props.row.status !== 'INACTIVE',
+                      'status-inactive': props.row.status === 'INACTIVE',
+                    }"
+                    :props="props"
+                    @click="
                       async () => {
                         if (productMode === 'type') {
                           pathTypeName = props.row.name;
@@ -1882,16 +1520,381 @@ watch(inputSearchProductAndService, async () => {
                         }
                       }
                     "
-                  />
-                </div>
-              </template>
-            </q-table>
+                  >
+                    <q-td
+                      v-if="
+                        tbControl.groupAndType.fieldSelected.includes('name')
+                      "
+                    >
+                      <div class="row items-center">
+                        <div
+                          style="
+                            width: 50px;
+                            display: flex;
+                            margin-bottom: var(--size-2);
+                          "
+                        >
+                          <div
+                            :class="`icon-color-${productMode === 'group' ? 'pink' : 'purple'}`"
+                            class="table__icon"
+                          >
+                            <q-icon
+                              size="md"
+                              style="scale: 0.8"
+                              :name="
+                                productMode === 'group'
+                                  ? 'mdi-folder'
+                                  : 'mdi-folder-table'
+                              "
+                            />
+                          </div>
+                        </div>
+                        <div class="col">
+                          <div class="col">
+                            {{ props.row.name }}
+                          </div>
+                          <div class="col app-text-muted">
+                            {{ props.row.code || '-' }}
+                          </div>
+                        </div>
+                      </div>
+                    </q-td>
+                    <q-td
+                      v-if="
+                        tbControl.groupAndType.fieldSelected.includes('detail')
+                      "
+                    >
+                      {{ props.row.detail || '-' }}
+                    </q-td>
 
-    
+                    <q-td
+                      v-if="
+                        tbControl.groupAndType.fieldSelected.includes(
+                          'formDialogInputRemark',
+                        )
+                      "
+                    >
+                      {{ props.row.remark || '-' }}
+                    </q-td>
+
+                    <q-td
+                      v-if="
+                        tbControl.groupAndType.fieldSelected.includes(
+                          'createdAt',
+                        )
+                      "
+                    >
+                      {{ dateFormat(props.row.createdAt) }}
+                    </q-td>
+
+                    <q-td>
+                      <q-btn
+                        icon="mdi-eye-outline"
+                        size="sm"
+                        dense
+                        round
+                        flat
+                        @click.stop="
+                          () => {
+                            if (productMode === 'type') {
+                              currentStatusProduct =
+                                props.row.status === 'INACTIVE';
+                              clearFormGroup();
+                              currentIdType = props.row.id;
+                              assignFormDataGroup(props.row);
+                              isEdit = false;
+                              drawerInfo = true;
+                            }
+                            if (productMode === 'group') {
+                              currentStatusProduct =
+                                props.row.status === 'INACTIVE';
+                              clearFormGroup();
+                              assignFormDataGroup(props.row);
+                              isEdit = false;
+                              currentId = props.row.id;
+                              drawerInfo = true;
+                            }
+                          }
+                        "
+                      />
+
+                      <q-btn
+                        icon="mdi-dots-vertical"
+                        size="sm"
+                        dense
+                        round
+                        flat
+                        @click.stop
+                        :key="props.row.id"
+                      >
+                        <q-menu class="bordered">
+                          <q-list v-close-popup>
+                            <q-item
+                              v-close-popup
+                              clickable
+                              :id="`view-detail-btn-${props.row.name}-view`"
+                              @click.stop="
+                                () => {
+                                  if (productMode === 'type') {
+                                    currentStatusProduct =
+                                      props.row.status === 'INACTIVE';
+                                    clearFormGroup();
+                                    currentIdType = props.row.id;
+                                    assignFormDataGroup(props.row);
+                                    isEdit = false;
+                                    drawerInfo = true;
+                                  }
+                                  if (productMode === 'group') {
+                                    currentStatusProduct =
+                                      props.row.status === 'INACTIVE';
+                                    clearFormGroup();
+                                    assignFormDataGroup(props.row);
+                                    isEdit = false;
+                                    currentId = props.row.id;
+                                    drawerInfo = true;
+                                  }
+                                }
+                              "
+                              dense
+                              class="row q-py-sm"
+                              style="white-space: nowrap"
+                            >
+                              <q-icon
+                                name="mdi-eye-outline"
+                                class="col-3"
+                                size="xs"
+                                style="color: hsl(var(--green-6-hsl))"
+                              />
+                              <span class="col-9 q-px-md flex items-center">
+                                {{ $t('viewDetail') }}
+                              </span>
+                            </q-item>
+
+                            <q-item
+                              :id="`view-detail-btn-${props.row.name}-edit`"
+                              v-close-popup
+                              clickable
+                              dense
+                              class="row q-py-sm"
+                              style="white-space: nowrap"
+                              @click="
+                                () => {
+                                  if (productMode === 'type') {
+                                    clearFormGroup();
+                                    currentIdType = props.row.id;
+                                    assignFormDataGroup(props.row);
+                                    isEdit = true;
+                                    drawerInfo = true;
+                                  }
+                                  if (productMode === 'group') {
+                                    clearFormGroup();
+                                    assignFormDataGroup(props.row);
+                                    isEdit = true;
+                                    currentId = props.row.id;
+
+                                    drawerInfo = true;
+                                  }
+                                }
+                              "
+                            >
+                              <q-icon
+                                name="mdi-pencil-outline"
+                                class="col-3"
+                                size="xs"
+                                style="color: hsl(var(--cyan-6-hsl))"
+                              />
+                              <span class="col-9 q-px-md flex items-center">
+                                {{ $t('edit') }}
+                              </span>
+                            </q-item>
+                            <q-item
+                              v-close-popup
+                              :id="`view-detail-btn-${props.row.name}-delete`"
+                              dense
+                              :clickable="props.row.status === 'CREATED'"
+                              class="row"
+                              :class="{
+                                'surface-3': props.row.status !== 'CREATED',
+                                'app-text-muted':
+                                  props.row.status !== 'CREATED',
+                              }"
+                              style="white-space: nowrap"
+                              @click="
+                                () => {
+                                  if (productMode === 'type') {
+                                    deleteProductById(props.row.id);
+                                  }
+                                  if (productMode === 'group') {
+                                    deleteProductById(props.row.id);
+                                  }
+                                }
+                              "
+                            >
+                              <q-icon
+                                name="mdi-trash-can-outline"
+                                size="xs"
+                                class="col-3"
+                                :class="{
+                                  'app-text-negative':
+                                    props.row.status === 'CREATED',
+                                }"
+                              />
+                              <span class="col-9 q-px-md flex items-center">
+                                {{ $t('delete') }}
+                              </span>
+                            </q-item>
+
+                            <q-item dense>
+                              <q-item-section class="q-py-sm">
+                                <div class="q-pa-sm surface-2 rounded">
+                                  <q-toggle
+                                    :id="`view-detail-btn-${props.row.name}-status`"
+                                    dense
+                                    size="sm"
+                                    :label="
+                                      props.row.status !== 'INACTIVE'
+                                        ? $t('switchOnLabel')
+                                        : $t('switchOffLabel')
+                                    "
+                                    @click="
+                                      async () => {
+                                        if (productMode === 'type') {
+                                          toggleStatusType(
+                                            props.row.id,
+                                            props.row.status,
+                                          );
+                                        }
+                                        if (productMode === 'group') {
+                                          toggleStatusGroup(
+                                            props.row.id,
+                                            props.row.status,
+                                          );
+                                        }
+                                      }
+                                    "
+                                    :model-value="
+                                      props.row.status !== 'INACTIVE'
+                                    "
+                                  />
+                                </div>
+                              </q-item-section>
+                            </q-item>
+                          </q-list>
+                        </q-menu>
+                      </q-btn>
+                    </q-td>
+                  </q-tr>
+                </template>
+
+                <template v-slot:item="props">
+                  <div class="col-3">
+                    <ProductCardComponent
+                      :isType="productMode === 'type'"
+                      :count-product="props.row._count.product"
+                      :count-type="props.row._count.type"
+                      :count-service="props.row._count.service"
+                      :title="props.row.name"
+                      :subtitle="props.row.code"
+                      :date="new Date(props.row.updatedAt)"
+                      :status="props.row.status"
+                      :id="props.row.id"
+                      :isDisabled="props.row.status === 'INACTIVE'"
+                      :color="
+                        {
+                          type: $q.dark.isActive
+                            ? 'var(--purple-7-hsl)'
+                            : 'var(--violet-11-hsl)',
+                          group: 'var(--pink-6-hsl)',
+                        }[productMode] || 'var(--pink-6-hsl)'
+                      "
+                      @toggleStatus="
+                        if (productMode === 'type') {
+                          toggleStatusType(props.row.id, props.row.status);
+                        }
+                        if (productMode === 'group') {
+                          toggleStatusGroup(props.row.id, props.row.status);
+                        }
+                      "
+                      @viewCard="
+                        () => {
+                          if (productMode === 'type') {
+                            currentStatusProduct =
+                              props.row.status === 'INACTIVE';
+                            clearFormGroup();
+                            currentIdType = props.row.id;
+                            assignFormDataGroup(props.row);
+                            isEdit = false;
+                            drawerInfo = true;
+                          }
+                          if (productMode === 'group') {
+                            currentStatusProduct =
+                              props.row.status === 'INACTIVE';
+                            clearFormGroup();
+                            assignFormDataGroup(props.row);
+                            isEdit = false;
+                            currentId = props.row.id;
+                            drawerInfo = true;
+                          }
+                        }
+                      "
+                      @updateCard="
+                        () => {
+                          if (productMode === 'type') {
+                            clearFormGroup();
+                            currentIdType = props.row.id;
+                            assignFormDataGroup(props.row);
+                            isEdit = true;
+                            drawerInfo = true;
+                          }
+                          if (productMode === 'group') {
+                            clearFormGroup();
+                            assignFormDataGroup(props.row);
+                            isEdit = true;
+                            currentId = props.row.id;
+
+                            drawerInfo = true;
+                          }
+                        }
+                      "
+                      @deleteCard="
+                        () => {
+                          if (productMode === 'type') {
+                            deleteProductById(props.row.id);
+                          }
+                          if (productMode === 'group') {
+                            deleteProductById(props.row.id);
+                          }
+                        }
+                      "
+                      @on-click="
+                        async () => {
+                          if (productMode === 'type') {
+                            pathTypeName = props.row.name;
+                            currentIdType = props.row.id;
+                            productMode = 'service';
+                            productAndServiceTab = 'service';
+
+                            await fetchListOfProduct();
+                            await fetchListOfService();
+                            await fetchListOfProductAndService();
+                            flowStore.rotate();
+                          }
+                          if (productMode === 'group') {
+                            pathGroupName = props.row.name;
+                            currentId = props.row.id;
+                            productMode = 'type';
+                            await fetchListType();
+                            flowStore.rotate();
+                          }
+                        }
+                      "
+                    />
+                  </div>
+                </template>
+              </q-table>
+            </div>
           </div>
-        </div>
 
-        
           <div
             v-if="productMode === 'group'"
             class="row items-center justify-between q-px-md q-py-sm"
@@ -2056,7 +2059,6 @@ watch(inputSearchProductAndService, async () => {
               <q-menu class="bordered">
                 <q-list v-close-popup dense>
                   <q-item
-                  
                     clickable
                     class="flex items-center"
                     @click="
@@ -2173,59 +2175,59 @@ watch(inputSearchProductAndService, async () => {
           </div>
         </div>
 
-<q-tabs
-            dense
-            v-model="productAndServiceTab"
-            class="bordered-b q-px-md"
-            align="left"
+        <q-tabs
+          dense
+          v-model="productAndServiceTab"
+          class="bordered-b q-px-md"
+          align="left"
+        >
+          <q-tab
+            name="service"
+            @click="
+              async () => {
+                currentPageServiceAndProduct = 1;
+                inputSearchProductAndService = '';
+                currentStatus = 'All';
+                // await fetchListOfService();
+                flowStore.rotate();
+              }
+            "
           >
-            <q-tab
-              name="service"
-              @click="
-                async () => {
-                  currentPageServiceAndProduct = 1;
-                  inputSearchProductAndService = '';
-                  currentStatus = 'All';
-                  // await fetchListOfService();
-                  flowStore.rotate();
-                }
+            <div
+              class="row"
+              :class="
+                productAndServiceTab === 'service'
+                  ? 'text-bold'
+                  : 'app-text-muted'
               "
             >
-              <div
-                class="row"
-                :class="
-                  productAndServiceTab === 'service'
-                    ? 'text-bold'
-                    : 'app-text-muted'
-                "
-              >
-                {{ $t('service') }}
-              </div>
-            </q-tab>
-            <q-tab
-              name="product"
-              @click="
-                async () => {
-                  currentPageServiceAndProduct = 1;
-                  inputSearchProductAndService = '';
-                  currentStatus = 'All';
-                  // await fetchListOfProduct();
-                  flowStore.rotate();
-                }
+              {{ $t('service') }}
+            </div>
+          </q-tab>
+          <q-tab
+            name="product"
+            @click="
+              async () => {
+                currentPageServiceAndProduct = 1;
+                inputSearchProductAndService = '';
+                currentStatus = 'All';
+                // await fetchListOfProduct();
+                flowStore.rotate();
+              }
+            "
+          >
+            <div
+              class="row"
+              :class="
+                productAndServiceTab === 'product'
+                  ? 'text-bold'
+                  : 'app-text-muted'
               "
             >
-              <div
-                class="row"
-                :class="
-                  productAndServiceTab === 'product'
-                    ? 'text-bold'
-                    : 'app-text-muted'
-                "
-              >
-                {{ $t('product') }}
-              </div>
-            </q-tab>
-          </q-tabs>
+              {{ $t('product') }}
+            </div>
+          </q-tab>
+        </q-tabs>
 
         <div
           v-if="
@@ -2238,7 +2240,6 @@ watch(inputSearchProductAndService, async () => {
         </div>
         <!-- tab -->
         <template v-else>
-          
           <div class="col flex scroll full-height q-pa-md surface-1">
             <div class="full-width">
               <q-table
@@ -2288,7 +2289,7 @@ watch(inputSearchProductAndService, async () => {
                       v-if="
                         {
                           product: tbControl.product.fieldSelected,
-                          
+
                           service: tbControl.service.fieldSelected,
                         }[productAndServiceTab].includes(
                           { product: 'productName', service: 'serviceName' }[
@@ -2466,7 +2467,6 @@ watch(inputSearchProductAndService, async () => {
                         <q-menu class="bordered">
                           <q-list v-close-popup>
                             <q-item
-
                               :id="`view-detail-btn-${props.row.name}-view`"
                               @click.stop="
                                 async () => {
@@ -2484,8 +2484,8 @@ watch(inputSearchProductAndService, async () => {
                                   await fetchListOfOptionBranch();
                                 }
                               "
-                               v-close-popup
-                                    clickable
+                              v-close-popup
+                              clickable
                               dense
                               class="row q-py-sm"
                               style="white-space: nowrap"
@@ -2503,8 +2503,8 @@ watch(inputSearchProductAndService, async () => {
 
                             <q-item
                               :id="`view-detail-btn-${props.row.name}-edit`"
-                               v-close-popup
-                                    clickable
+                              v-close-popup
+                              clickable
                               dense
                               class="row q-py-sm"
                               style="white-space: nowrap"
@@ -2540,8 +2540,7 @@ watch(inputSearchProductAndService, async () => {
                             <q-item
                               :id="`view-detail-btn-${props.row.name}-delete`"
                               dense
-                                 v-close-popup
-                                   
+                              v-close-popup
                               :clickable="props.row.status === 'CREATED'"
                               class="row"
                               :class="{
@@ -2550,16 +2549,16 @@ watch(inputSearchProductAndService, async () => {
                                   props.row.status !== 'CREATED',
                               }"
                               style="white-space: nowrap"
-                              @click="()=>{ 
-                                if (props.row.type === 'product'){
-                                deleteTypeOfProduct(props.row.id)
-                              }
-                              if (props.row.type === 'service') {
-                                deleteServiceById(props.row.id)
+                              @click="
+                                () => {
+                                  if (props.row.type === 'product') {
+                                    deleteTypeOfProduct(props.row.id);
+                                  }
+                                  if (props.row.type === 'service') {
+                                    deleteServiceById(props.row.id);
+                                  }
                                 }
-                              }
-                                "
-
+                              "
                             >
                               <q-icon
                                 name="mdi-trash-can-outline"
@@ -3210,7 +3209,7 @@ watch(inputSearchProductAndService, async () => {
     :edit="!(formDataProductService.status === 'INACTIVE')"
     height="95vh"
     :isEdit="infoServiceEdit"
-    :title="$t('service', { msg: formDataProductService.name })"
+    :title="$t('service')"
     :tabs-list="serviceTab"
     v-model:modal="dialogServiceEdit"
     v-model:current-tab="currentServiceTab"