From 430ff80129e262a53e381f93ec2178b6d3ea369d Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Thu, 18 Apr 2024 18:18:31 +0700
Subject: [PATCH] feat: select first

---
 .../02_personnel-management/FormInformation.vue       | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/components/02_personnel-management/FormInformation.vue b/src/components/02_personnel-management/FormInformation.vue
index dd46e92a..8517b04c 100644
--- a/src/components/02_personnel-management/FormInformation.vue
+++ b/src/components/02_personnel-management/FormInformation.vue
@@ -1,7 +1,10 @@
 <script setup lang="ts">
+import { storeToRefs } from 'pinia';
 import useUserStore from 'src/stores/user';
+import { watch } from 'vue';
 
 const userStore = useUserStore();
+const { userOption } = storeToRefs(userStore);
 
 const hqId = defineModel<string | null | undefined>('hqId');
 const brId = defineModel<string | null | undefined>('brId');
@@ -23,6 +26,9 @@ async function selectHq(id: string) {
   brId.value = '';
   userStore.userOption.brOpts = [];
   await userStore.fetchBrOption(id);
+  if (userStore.userOption.brOpts.length === 1) {
+    brId.value = userStore.userOption.brOpts[0].value;
+  }
 }
 </script>
 <template>
@@ -38,10 +44,10 @@ async function selectHq(id: string) {
       options-dense
       hide-bottom-space
       class="col-6"
+      v-model="hqId"
       option-label="label"
       option-value="value"
       label="รหัสสำนักงานใหญ่"
-      v-model="hqId"
       :options="userStore.userOption.hqOpts"
       :rules="[(val: string) => !!val || 'กรุณาเลือกสำนักงานใหญ่']"
       @update:model-value="(val: string) => selectHq(val)"
@@ -54,12 +60,13 @@ async function selectHq(id: string) {
       emit-value
       map-options
       options-dense
+      clearable
       hide-bottom-space
       class="col-6"
+      v-model="brId"
       label="รหัสสาขา"
       option-label="label"
       option-value="value"
-      v-model="brId"
       :options="userStore.userOption.brOpts"
     />
     <q-select