feat: option from json

src/components/03_customer-management/BasicInformation.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref } from 'vue';
+import { onMounted, ref } from 'vue';
 
 const customerName = defineModel<string>('customerName');
 const customerNameEn = defineModel<string>('customerNameEn');
@@ -12,13 +12,6 @@ const customerBranchId = defineModel<string>('customerBranchId');
 const employeeID = defineModel<string>('employeeID');
 const nrcNo = defineModel<string>('nrcNo');
 
-const branchOption = ref([
-  {
-    label: 'uuu',
-    value: 'ad87961c-c44f-47ca-8c1e-0ef30c2b16ba',
-  },
-]);
-
 defineProps<{
   dense?: boolean;
   outlined?: boolean;
@@ -26,7 +19,15 @@ defineProps<{
   separator?: boolean;
   typeCustomer?: string;
   employee?: boolean;
+
+  employeeOwnerOption?: { label: string; value: string }[];
 }>();
+
+defineEmits<{
+  (e: 'filterOwnerBranch', val: string, update: void): void;
+}>();
+
+onMounted(async () => {});
 </script>
 
 <template>
@@ -82,6 +83,8 @@ defineProps<{
   <div v-if="employee" class="col-9 row q-col-gutter-md">
     <q-select
       id="select-employer-branch"
+      use-input
+      input-debounce="0"
       :dense="dense"
       :outlined="!readonly"
       :readonly="readonly"
@@ -94,7 +97,8 @@ defineProps<{
       option-value="value"
       emit-value
       map-options
-      :options="branchOption"
+      :options="employeeOwnerOption"
+      @filter="(val, update) => $emit('filterOwnerBranch', val, update)"
       :rules="[
         (val: string) =>
           !!val || $t('selectValidate') + $t('formDialogEmployerBranchCode'),
@@ -112,6 +116,7 @@ defineProps<{
       v-model="employeeID"
     />
     <q-input
+      mask="## #### ###### #"
       for="input-nrcNo"
       :dense="dense"
       :outlined="!readonly"