refactor(04): input select

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

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { getRole } from 'src/services/keycloak';
+import { selectFilterOptionRefMod } from 'src/stores/utils';
 import { ref, onMounted } from 'vue';
 import { useI18n } from 'vue-i18n';
 const { locale } = useI18n({ useScope: 'global' });
@@ -12,14 +13,17 @@ const code = defineModel<string>('code');
 
 const registeredBranchId = defineModel<string>('registeredBranchId');
 const codeOption = ref<{ id: string; name: string }[]>([]);
+const optionsBranch = defineModel<{ id: string; name: string }[]>(
+  'optionsBranch',
+  { required: true },
+);
 
-const props = defineProps<{
+defineProps<{
   dense?: boolean;
   outlined?: boolean;
   readonly?: boolean;
   separator?: boolean;
   isType?: boolean;
-  optionsBranch: { id: string; name: string }[];
 }>();
 
 onMounted(async () => {
@@ -32,11 +36,17 @@ onMounted(async () => {
   if (locale.value === 'th-th') {
     codeOption.value = option.tha.typeProduct;
   }
-
-  if (!!props.optionsBranch) {
-    registeredBranchId.value = props.optionsBranch[0].id;
-  }
 });
+
+const codeOptions = ref<Record<string, unknown>[]>([]);
+const codeFilter = selectFilterOptionRefMod(codeOption, codeOptions, 'label');
+
+const branchOptions = ref<Record<string, unknown>[]>([]);
+const branchFilter = selectFilterOptionRefMod(
+  optionsBranch,
+  branchOptions,
+  'name',
+);
 </script>
 
 <template>
@@ -46,43 +56,59 @@ onMounted(async () => {
 
   <div class="col-9 row q-col-gutter-md">
     <q-select
-      lazy-rules="ondemand"
-      id="select-br-id"
-      :dense="dense"
       outlined
-      :readonly="readonly"
-      :hide-dropdown-icon="readonly"
+      clearable
+      use-input
+      fill-input
       emit-value
       map-options
-      options-dense
-      clearable
+      hide-selected
       hide-bottom-space
+      input-debounce="0"
       class="col-3"
       v-model="code"
-      :label="$t('productCode')"
+      id="select-br-id"
       option-label="label"
       option-value="value"
-      :options="codeOption"
+      lazy-rules="ondemand"
+      :dense="dense"
+      :readonly="readonly"
+      :options="codeOptions"
+      :label="$t('productCode')"
+      :hide-dropdown-icon="readonly"
       :rules="[(val: string) => !!val]"
-    />
+      @filter="codeFilter"
+    >
+      <template v-slot:no-option>
+        <q-item>
+          <q-item-section class="text-grey">
+            {{ $t('noResults') }}
+          </q-item-section>
+        </q-item>
+      </template>
+    </q-select>
 
     <q-select
-      lazy-rules="ondemand"
-      id="input-source-nationality"
-      :dense="dense"
       outlined
-      :readonly="readonly"
-      :hide-dropdown-icon="readonly"
-      hide-bottom-space
+      clearable
+      use-input
+      fill-input
       emit-value
       map-options
-      options-dense
-      :label="$t('registeredBranch')"
+      hide-selected
+      hide-bottom-space
+      input-debounce="0"
       class="col-3"
-      option-label="name"
       option-value="id"
+      option-label="name"
+      lazy-rules="ondemand"
+      id="input-source-nationality"
       v-model="registeredBranchId"
-      :options="optionsBranch"
+      :dense="dense"
+      :readonly="readonly"
+      :options="branchOptions"
+      :hide-dropdown-icon="readonly"
+      :label="$t('registeredBranch')"
       :rules="[
         (val) => {
           const roles = getRole() || [];
@@ -92,8 +118,16 @@ onMounted(async () => {
           return isSpecialRole || !!val || 'กรุณากรอกข้อมูล';
         },
       ]"
-      clearable
-    />
+      @filter="branchFilter"
+    >
+      <template v-slot:no-option>
+        <q-item>
+          <q-item-section class="text-grey">
+            {{ $t('noResults') }}
+          </q-item-section>
+        </q-item>
+      </template>
+    </q-select>
 
     <q-input
       lazy-rules="ondemand"

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

@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import { getRole } from 'src/services/keycloak';
 import useOptionStore from 'src/stores/options';
-import { onMounted } from 'vue';
+import { selectFilterOptionRefMod } from 'src/stores/utils';
+import { ref } from 'vue';
 
 const optionStore = useOptionStore();
 
@@ -15,15 +16,27 @@ const serviceName = defineModel<string>('serviceNameTh');
 const serviceDescription = defineModel<string>('serviceDescription');
 
 const registeredBranchId = defineModel<string | null>('registeredBranchId');
-const props = defineProps<{
+
+const optionsBranch = defineModel<{ id: string; name: string }[]>(
+  'optionsBranch',
+  { required: true },
+);
+
+defineProps<{
   dense?: boolean;
   outlined?: boolean;
   readonly?: boolean;
   separator?: boolean;
   isType?: boolean;
   service?: boolean;
-  optionsBranch?: { id: string; name: string }[];
 }>();
+
+const branchOptions = ref<Record<string, unknown>[]>([]);
+const branchFilter = selectFilterOptionRefMod(
+  optionsBranch,
+  branchOptions,
+  'name',
+);
 </script>
 
 <template>
@@ -84,22 +97,25 @@ const props = defineProps<{
     />
 
     <q-select
-      lazy-rules="ondemand"
-      id="input-source-nationality"
-      :dense="dense"
       outlined
-      :readonly="readonly"
-      :hide-dropdown-icon="readonly"
-      hide-bottom-space
+      clearable
+      use-input
+      fill-input
       emit-value
       map-options
-      options-dense
-      :label="$t('registeredBranch')"
+      hide-selected
+      hide-bottom-space
       class="col-3"
-      option-label="name"
       option-value="id"
+      option-label="name"
+      lazy-rules="ondemand"
       v-model="registeredBranchId"
-      :options="optionsBranch"
+      id="input-source-nationality"
+      :dense="dense"
+      :readonly="readonly"
+      :options="branchOptions"
+      :hide-dropdown-icon="readonly"
+      :label="$t('registeredBranch')"
       :rules="[
         (val) => {
           const roles = getRole() || [];
@@ -109,8 +125,16 @@ const props = defineProps<{
           return isSpecialRole || !!val || 'กรุณากรอกข้อมูล';
         },
       ]"
-      clearable
-    />
+      @filter="branchFilter"
+    >
+      <template v-slot:no-option>
+        <q-item>
+          <q-item-section class="text-grey">
+            {{ $t('noResults') }}
+          </q-item-section>
+        </q-item>
+      </template>
+    </q-select>
 
     <q-input
       lazy-rules="ondemand"

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

@@ -3200,6 +3200,7 @@ watch(
       <BasicInformation
         dense
         :isType="productMode === 'type'"
+        v-model:options-branch="branchOption"
         v-model:remark="formDataGroup.remark"
         v-model:name="formDataGroup.name"
         v-model:detail="formDataGroup.detail"
@@ -3259,6 +3260,7 @@ watch(
             dense
             :isType="productMode === 'type'"
             :readonly="!isEdit"
+            v-model:options-branch="branchOption"
             v-model:remark="formDataGroup.remark"
             v-model:name="formDataGroup.name"
             v-model:code="formDataGroup.code"
@@ -3448,7 +3450,7 @@ watch(
 
     <template #information>
       <BasicInfoProduct
-        :options-branch="branchOption"
+        v-model:options-branch="branchOption"
         v-model:registered-branch-id="formDataProduct.registeredBranchId"
         v-model:detail="formDataProduct.detail"
         v-model:remark="formDataProduct.remark"
@@ -3516,8 +3518,8 @@ watch(
 
     <template #information>
       <BasicInfoProduct
-        :options-branch="branchOption"
         :readonly="!infoProductEdit"
+        v-model:options-branch="branchOption"
         v-model:registered-branch-id="formDataProduct.registeredBranchId"
         v-model:detail="formDataProduct.detail"
         v-model:remark="formDataProduct.remark"
@@ -3581,7 +3583,7 @@ watch(
         <BasicInformation
           dense
           service
-          :options-branch="branchOption"
+          v-model:options-branch="branchOption"
           v-model:registered-branch-id="
             formDataProductService.registeredBranchId
           "
@@ -3746,7 +3748,7 @@ watch(
           v-if="currentServiceTab === 'serviceInformation'"
           dense
           service
-          :options-branch="branchOption"
+          v-model:options-branch="branchOption"
           v-model:registered-branch-id="
             formDataProductService.registeredBranchId
           "