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 | null>('registeredBranchId');
+const registeredBranchId = defineModel<string>('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' }]);
-const serviceCodeOptions = ref<Record<string, unknown>[]>([]);
-const serviceCodeFilter = selectFilterOptionRefMod(
-  serviceCodeOpts,
-  serviceCodeOptions,
-  'label',
+watch(
+  () => optionsBranch.value,
+  () => {
+    branchFilter = selectFilterOptionRefMod(
+      optionsBranch,
+      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"