refactor: add registered branch to product group

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

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { QSelect } from 'quasar';
-import { getRole } from 'src/services/keycloak';
 import useOptionStore from 'src/stores/options';
 import { selectFilterOptionRefMod } from 'stores/utils';
 import { ref, onMounted, watch } from 'vue';
@@ -15,13 +14,8 @@ const process = defineModel<number>('process');
 const name = defineModel<string>('name');
 const code = defineModel<string>('code');
 const expenseType = defineModel<string>('expenseType');
-const registeredBranchId = defineModel<string>('registeredBranchId');
 
 const codeOption = ref<{ id: string; name: string }[]>([]);
-const optionsBranch = defineModel<{ id: string; name: string }[]>(
-  'optionsBranch',
-  { default: [] },
-);
 
 defineProps<{
   dense?: boolean;
@@ -46,13 +40,6 @@ onMounted(async () => {
 const codeOptions = ref<Record<string, unknown>[]>([]);
 const codeFilter = selectFilterOptionRefMod(codeOption, codeOptions, 'label');
 
-const branchOptions = ref<Record<string, unknown>[]>([]);
-const branchFilter = selectFilterOptionRefMod(
-  optionsBranch,
-  branchOptions,
-  'name',
-);
-
 const expenseTypeOptions = ref<Record<string, unknown>[]>([]);
 let expenseTypeFilter: (
   value: string,
@@ -128,51 +115,6 @@ watch(
           </q-item>
         </template>
       </q-select>
-      <q-select
-        outlined
-        clearable
-        use-input
-        fill-input
-        emit-value
-        map-options
-        hide-selected
-        hide-bottom-space
-        input-debounce="0"
-        class="col-md-3 col-6"
-        option-value="id"
-        option-label="name"
-        id="input-source-nationality"
-        v-model="registeredBranchId"
-        :dense="dense"
-        :readonly="readonly"
-        :options="branchOptions"
-        :hide-dropdown-icon="readonly"
-        :label="$t('productService.product.registeredBranch')"
-        :rules="[
-          (val) => {
-            const roles = getRole() || [];
-            const isSpecialRole = ['admin', 'system', 'head_of_admin'].some(
-              (role) => roles.includes(role),
-            );
-            return (
-              isSpecialRole ||
-              !!val ||
-              $t('form.error.selectField', {
-                field: $t('productService.product.registeredBranch'),
-              })
-            );
-          },
-        ]"
-        @filter="branchFilter"
-      >
-        <template v-slot:no-option>
-          <q-item>
-            <q-item-section class="text-grey">
-              {{ $t('general.noData') }}
-            </q-item-section>
-          </q-item>
-        </template>
-      </q-select>
 
       <q-input
         for="input-name"
@@ -207,19 +149,6 @@ watch(
           />
         </template>
       </q-input>
-      <!-- <q-input
-        
-        for="input-detail"
-        :dense="dense"
-        outlined
-        :readonly="readonly"
-        :borderless="readonly"
-        hide-bottom-space
-        type="textarea"
-        class="col-12"
-        :label="$t('serviceDetail')"
-        v-model="detail"
-      /> -->
       <q-select
         outlined
         clearable

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

@@ -2,6 +2,7 @@
 import { QSelect } from 'quasar';
 import { getRole } from 'src/services/keycloak';
 import { selectFilterOptionRefMod } from 'stores/utils';
+import { watch } from 'vue';
 import { ref } from 'vue';
 
 const remark = defineModel<string>('remark');
@@ -12,8 +13,7 @@ const code = defineModel<string>('code');
 const serviceCode = defineModel<string>('serviceCode');
 const serviceName = defineModel<string>('serviceNameTh');
 const serviceDescription = defineModel<string>('serviceDescription');
-
+const registeredBranchId = defineModel<string>('registeredBranchId');
-const registeredBranchId = defineModel<string | null>('registeredBranchId');
 
 const optionsBranch = defineModel<{ id: string; name: string }[]>(
   'optionsBranch',
@@ -31,18 +31,21 @@ defineProps<{
 }>();
 
 const branchOptions = ref<Record<string, unknown>[]>([]);
-const branchFilter = selectFilterOptionRefMod(
+let branchFilter = selectFilterOptionRefMod(
   optionsBranch,
   branchOptions,
   'name',
 );
 
-const serviceCodeOpts = ref([{ label: 'mou', value: 'mou' }]);
+watch(
-const serviceCodeOptions = ref<Record<string, unknown>[]>([]);
+  () => optionsBranch.value,
-const serviceCodeFilter = selectFilterOptionRefMod(
+  () => {
-  serviceCodeOpts,
+    branchFilter = selectFilterOptionRefMod(
-  serviceCodeOptions,
+      optionsBranch,
-  'label',
+      branchOptions,
+      'name',
+    );
+  },
 );
 </script>
 
@@ -60,6 +63,51 @@ const serviceCodeFilter = selectFilterOptionRefMod(
       {{ $t(`form.field.basicInformation`) }}
     </div>
     <div v-if="!service" class="col-12 row q-col-gutter-sm">
+      <q-select
+        outlined
+        clearable
+        use-input
+        fill-input
+        emit-value
+        map-options
+        hide-selected
+        hide-bottom-space
+        class="col-md-12 col-12"
+        option-value="id"
+        option-label="name"
+        v-model="registeredBranchId"
+        id="input-source-nationality"
+        for="input-source-nationality"
+        :dense="dense"
+        :readonly="readonly"
+        :options="branchOptions"
+        :hide-dropdown-icon="readonly"
+        :label="$t('productService.service.registeredBranch')"
+        :rules="[
+          (val) => {
+            const roles = getRole() || [];
+            const isSpecialRole = ['admin', 'system', 'head_of_admin'].some(
+              (role) => roles.includes(role),
+            );
+            return (
+              isSpecialRole ||
+              !!val ||
+              $t('form.error.selectField', {
+                field: $t('productService.service.registeredBranch'),
+              })
+            );
+          },
+        ]"
+        @filter="branchFilter"
+      >
+        <template v-slot:no-option>
+          <q-item>
+            <q-item-section class="text-grey">
+              {{ $t('general.noData') }}
+            </q-item-section>
+          </q-item>
+        </template>
+      </q-select>
       <q-input
         :dense="dense"
         outlined
@@ -111,39 +159,6 @@ const serviceCodeFilter = selectFilterOptionRefMod(
     </div>
 
     <div v-if="service" class="col-12 row q-col-gutter-sm">
-      <!-- <q-select
-        outlined
-        clearable
-        use-input
-        fill-input
-        emit-value
-        map-options
-        hide-selected
-        hide-bottom-space
-        input-debounce="0"
-        :disable="!readonly && disableCode"
-        class="col-3"
-        v-model="serviceCode"
-        id="select-br-id"
-        option-label="label"
-        option-value="value"
-        
-        :dense="dense"
-        :readonly="readonly"
-        :options="serviceCodeOptions"
-        :label="$t('serviceCode')"
-        :hide-dropdown-icon="readonly || disableCode"
-        :rules="[(val: string) => !!val]"
-        @filter="serviceCodeFilter"
-      >
-        <template v-slot:no-option>
-          <q-item>
-            <q-item-section class="text-grey">
-              {{ $t('general.noData') }}
-            </q-item-section>
-          </q-item>
-        </template>
-      </q-select> -->
       <q-input
         id="input-service-code"
         for="input-service-code"

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

@@ -246,6 +246,7 @@ const formDataGroup = ref<ProductGroupCreate>({
   detail: '',
   name: '',
   code: '',
+  registeredBranchId: '',
 });
 
 const formDataProduct = ref<ProductCreate>({
@@ -719,7 +720,7 @@ async function triggerChangeStatus(
           : t('dialog.message.confirmChangeStatusOn'),
       action: async () => {
         if (type === 'group' || productMode.value === 'group') {
-          const res = await toggleStatusGroup(id, status as Status)
+          await toggleStatusGroup(id, status as Status)
             .then(resolve)
             .catch(reject);
         } else if (type === 'service') {
@@ -847,21 +848,24 @@ function undoProductGroup() {
     detail: previousValue.value.detail,
     name: previousValue.value.name,
     code: previousValue.value.code,
+    registeredBranchId: previousValue.value.registeredBranchId,
   };
   isEdit.value = false;
   flowStore.rotate();
 }
 
-function assignFormDataGroup(data: ProductGroup) {
+async function assignFormDataGroup(data: ProductGroup) {
   previousValue.value = data;
   currentStatusGroupType.value = data.status;
   currentIdGroupType.value = data.id;
+  await fetchListOfOptionBranch();
 
   formDataGroup.value = {
     remark: data.remark,
     detail: data.detail,
     name: data.name,
     code: data.code,
+    registeredBranchId: data.registeredBranchId,
   };
 }
 
@@ -981,6 +985,7 @@ function clearFormGroup() {
     detail: '',
     name: '',
     code: '',
+    registeredBranchId: '',
   };
   currentStatusGroupType.value = 'CREATED';
   dialogInputForm.value = false;
@@ -1481,8 +1486,9 @@ watch(productMode, async () => {
       external-label
       label-position="left"
       @click="
-        () => {
+        async () => {
           clearFormGroup();
+          await fetchListOfOptionBranch();
           dialogInputForm = true;
         }
       "
@@ -1640,12 +1646,12 @@ watch(productMode, async () => {
                     }
                   "
                   @view="
-                    (v: (typeof treeProductTypeAndGroup)[number]) => {
+                    async (v: (typeof treeProductTypeAndGroup)[number]) => {
                       if (v.type === 'group') {
                         editByTree = 'group';
                         currentStatusProduct = v.status === 'INACTIVE';
                         clearFormGroup();
-                        assignFormDataGroup(v);
+                        await assignFormDataGroup(v);
                         isEdit = false;
                         currentIdGropTree = v.id;
                         drawerInfo = true;
@@ -1653,11 +1659,11 @@ watch(productMode, async () => {
                     }
                   "
                   @edit="
-                    (v: (typeof treeProductTypeAndGroup)[number]) => {
+                    async (v: (typeof treeProductTypeAndGroup)[number]) => {
                       editByTree = v.type as typeof editByTree;
                       if (v.type === 'group') {
                         clearFormGroup();
-                        assignFormDataGroup(v);
+                        await assignFormDataGroup(v);
                         isEdit = true;
                         currentIdGropTree = v.id;
                         drawerInfo = true;
@@ -1980,13 +1986,13 @@ watch(productMode, async () => {
                             round
                             flat
                             @click.stop="
-                              () => {
+                              async () => {
                                 if (productMode === 'group') {
                                   editByTree = 'group';
                                   currentStatusProduct =
                                     props.row.status === 'INACTIVE';
                                   clearFormGroup();
-                                  assignFormDataGroup(props.row);
+                                  await assignFormDataGroup(props.row);
                                   isEdit = false;
                                   currentIdGrop = props.row.id;
                                   drawerInfo = true;
@@ -2000,13 +2006,13 @@ watch(productMode, async () => {
                             :status="props.row.status"
                             :idName="props.row.name"
                             @view="
-                              () => {
+                              async () => {
                                 if (productMode === 'group') {
                                   editByTree = 'group';
                                   currentStatusProduct =
                                     props.row.status === 'INACTIVE';
                                   clearFormGroup();
-                                  assignFormDataGroup(props.row);
+                                  await assignFormDataGroup(props.row);
                                   isEdit = false;
                                   currentIdGrop = props.row.id;
                                   drawerInfo = true;
@@ -2014,11 +2020,11 @@ watch(productMode, async () => {
                               }
                             "
                             @edit="
-                              () => {
+                              async () => {
                                 if (productMode === 'group') {
                                   editByTree = 'group';
                                   clearFormGroup();
-                                  assignFormDataGroup(props.row);
+                                  await assignFormDataGroup(props.row);
                                   isEdit = true;
                                   currentIdGrop = props.row.id;
 
@@ -2072,13 +2078,13 @@ watch(productMode, async () => {
                             triggerChangeStatus(props.row.id, props.row.status)
                           "
                           @viewCard="
-                            () => {
+                            async () => {
                               if (productMode === 'group') {
                                 editByTree = 'group';
                                 currentStatusProduct =
                                   props.row.status === 'INACTIVE';
                                 clearFormGroup();
-                                assignFormDataGroup(props.row);
+                                await assignFormDataGroup(props.row);
                                 isEdit = false;
                                 currentIdGrop = props.row.id;
                                 drawerInfo = true;
@@ -2086,10 +2092,10 @@ watch(productMode, async () => {
                             }
                           "
                           @updateCard="
-                            () => {
+                            async () => {
                               if (productMode === 'group') {
                                 clearFormGroup();
-                                assignFormDataGroup(props.row);
+                                await assignFormDataGroup(props.row);
                                 isEdit = true;
                                 currentIdGrop = props.row.id;
 
@@ -2971,9 +2977,11 @@ watch(productMode, async () => {
         <BasicInformation
           ide="form-group"
           dense
+          v-model:options-branch="branchOption"
           v-model:remark="formDataGroup.remark"
           v-model:name="formDataGroup.name"
           v-model:detail="formDataGroup.detail"
+          v-model:registered-branch-id="formDataGroup.registeredBranchId"
         />
       </div>
     </div>
@@ -3140,6 +3148,8 @@ watch(productMode, async () => {
               id="info-group"
               dense
               :readonly="!isEdit"
+              v-model:options-branch="branchOption"
+              v-model:registered-branch-id="formDataGroup.registeredBranchId"
               v-model:remark="formDataGroup.remark"
               v-model:name="formDataGroup.name"
               v-model:code="formDataGroup.code"
@@ -3755,10 +3765,6 @@ watch(productMode, async () => {
           v-if="serviceTab === 1"
           dense
           service
-          v-model:options-branch="branchOption"
-          v-model:registered-branch-id="
-            formDataProductService.registeredBranchId
-          "
           v-model:service-code="formDataProductService.code"
           v-model:service-description="formDataProductService.detail"
           v-model:service-name-th="formDataProductService.name"
@@ -4057,10 +4063,6 @@ watch(productMode, async () => {
           dense
           service
           disableCode
-          v-model:options-branch="branchOption"
-          v-model:registered-branch-id="
-            formDataProductService.registeredBranchId
-          "
           v-model:service-code="formDataProductService.code"
           v-model:service-description="formDataProductService.detail"
           v-model:service-name-th="formDataProductService.name"
@@ -4141,12 +4143,11 @@ watch(productMode, async () => {
             async () => {
               if (!currentNode) return;
 
-              await fetchListOfOptionBranch();
               if (currentNode.type === 'group') {
                 editByTree = 'group';
                 currentStatusProduct = currentNode.status === 'INACTIVE';
                 clearFormGroup();
-                assignFormDataGroup(currentNode);
+                await assignFormDataGroup(currentNode);
                 isEdit = false;
                 currentIdGrop = currentNode.id;
                 drawerInfo = true;
@@ -4168,12 +4169,12 @@ watch(productMode, async () => {
           v-ripple
           v-close-popup
           @click.stop="
-            () => {
+            async () => {
               if (!currentNode) return;
               editByTree = currentNode.type as 'type' | 'group';
               if (currentNode.type === 'group') {
                 clearFormGroup();
-                assignFormDataGroup(currentNode);
+                await assignFormDataGroup(currentNode);
                 isEdit = true;
                 currentIdGrop = currentNode.id;
 

src/stores/my-branch/index.ts

@@ -45,7 +45,7 @@ const useMyBranch = defineStore('useMyBranchStore', () => {
   }
 
   async function fetchListMyBranch(userId: string) {
-    const res = await api.get<Pagination<Branch[]>>(`/user/${userId}/branch`, {
+    const res = await api.get<Pagination<Branch[]>>(`/branch`, {
       headers: {
         'X-Rtid': flowStore.rtid,
       },

src/stores/product-service/types.ts

@@ -195,11 +195,12 @@ export type ProductGroup = {
   detail: string;
   remark: string;
   status: Status;
+  registeredBranchId: string;
   createdBy: CreatedBy;
   createdAt: string;
   updatedBy: UpdatedBy;
   updatedAt: string;
-  _count: { product: number; type: number; service: number };
+  _count: { product: number; service: number };
 };
 
 export interface ProductGroupCreate {
@@ -207,6 +208,7 @@ export interface ProductGroupCreate {
   detail: string;
   name: string;
   code: string;
+  registeredBranchId: string;
 }
 
 export interface ProductGroupUpdate {
@@ -215,4 +217,5 @@ export interface ProductGroupUpdate {
   name: string;
   code: string;
   status: Status;
+  registeredBranchId?: string;
 }