refactor: api select value (#69)

* feat: add file

* fix: wrong type

* feat: select customer component

* fixup! feat: select customer component

* fix: char case

* refactor: fn alias

* chore: add space

* feat: accept fetch parameter

* refactor: naming

* feat: add emit event create

* fix: add suffix to add text

* feat: add before options slot for select input comp

* fix: error when label not found

* fix: value type

* feat: add required param

* fix: wording

* refactor: fix customer

* feat: use new select component

* chore: add note

* feat: add decoration for select with creatable

* feat: emit event

* feat: close popup on click

* feat: adjust alignment

* feat: add readonly params

* feat: add select branch option

* feat: use new select component

* feat: add disabled params

* feat: adjust internal search and select

* refactor: props type

* feat: use new select component

* feat: add lib for select component

* refactor: use factory function instead

* refactor: merge two lines of code

* refactor: move watch inside

* refactor: fix value not in list check

* chore: cleanup

* fix: remove test page size

* chore: remove unused

* feat: use new select component

* fix: typo

* fix: error

* refactor: extract type

* refactor: change ref var to normal var

* refactor: force overwrite params to prevent error on render

* feat: add clearable parameter

* feat: make clearable

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

@@ -1,9 +1,5 @@
 <script setup lang="ts">
-import { QSelect } from 'quasar';
-import { getRole } from 'src/services/keycloak';
-import { selectFilterOptionRefMod } from 'stores/utils';
-import { watch } from 'vue';
-import { ref } from 'vue';
+import SelectBranch from '../shared/select/SelectBranch.vue';
 
 const remark = defineModel<string>('remark');
 const detail = defineModel<string>('detail');
@@ -16,39 +12,16 @@ const serviceName = defineModel<string>('serviceNameTh');
 const serviceDescription = defineModel<string>('serviceDescription');
 const registeredBranchId = defineModel<string>('registeredBranchId');
 
-const optionsBranch = defineModel<{ id: string; name: string }[]>(
-  'optionsBranch',
-  { default: [] },
-);
-
 defineProps<{
   dense?: boolean;
   outlined?: boolean;
   readonly?: boolean;
-  readOnlybranchOption?: boolean;
+  branchReadonly?: boolean;
   separator?: boolean;
   isType?: boolean;
   disableCode?: boolean;
   service?: boolean;
 }>();
-
-const branchOptions = ref<Record<string, unknown>[]>([]);
-let branchFilter = selectFilterOptionRefMod(
-  optionsBranch,
-  branchOptions,
-  'name',
-);
-
-watch(
-  () => optionsBranch.value,
-  () => {
-    branchFilter = selectFilterOptionRefMod(
-      optionsBranch,
-      branchOptions,
-      'name',
-    );
-  },
-);
 </script>
 
 <template>
@@ -80,51 +53,14 @@ watch(
     </div>
 
     <div v-if="!service" class="col-12 row q-col-gutter-sm">
-      <q-select
-        outlined
-        use-input
-        fill-input
-        emit-value
-        map-options
-        hide-selected
-        hide-bottom-space
+      <SelectBranch
         class="col-md-12 col-12"
-        option-value="id"
-        option-label="name"
-        v-model="registeredBranchId"
-        id="input-source-nationality"
-        for="input-source-nationality"
-        :disable="!readonly && readOnlybranchOption"
-        :dense="dense"
-        :readonly="readonly || readOnlybranchOption"
-        :options="branchOptions"
-        :hide-dropdown-icon="readonly || readOnlybranchOption"
-        :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>
+        v-model:value="registeredBranchId"
+        :readonly
+        :disabled="!readonly && branchReadonly"
+        clearable
+        required
+      />
       <q-input
         for="input-code"
         :dense="dense"