feat: store saved options and fallback

src/components/05_quotation/FormAbout.vue

@@ -19,8 +19,11 @@ const customerBranchId = defineModel<string>('customerBranchId');
 const agentPrice = defineModel<boolean>('agentPrice');
 const special = defineModel<boolean>('special');
 
-const branchOption = ref();
+const branchOption = ref<{ value: string; label: string; labelEN: string }[]>();
-const customerOption = ref();
+const customerOption =
+  ref<
+    { value: string; label: string; labelEN: string; namePrefix: string }[]
+  >();
 
 defineProps<{
   outlined?: boolean;
@@ -57,6 +60,11 @@ async function filter(
   );
 }
 
+const currentSelectedBranchOption =
+  ref<NonNullable<typeof branchOption.value>[number]>();
+const currentSelectedCustomerOption =
+  ref<NonNullable<typeof customerOption.value>[number]>();
+
 async function init(val: string, type: 'branch' | 'customer') {
   const res =
     type === 'branch'
@@ -71,13 +79,28 @@ async function init(val: string, type: 'branch' | 'customer') {
         });
   if (res) {
     if (type === 'branch') {
-      branchOption.value = (res.result as Branch[]).map((v: Branch) => ({
+      const mapped = (res.result as Branch[]).map((v: Branch) => ({
         value: v.id,
         label: v.name,
         labelEN: v.nameEN,
       }));
+
+      if (!mapped.find((v) => v.value === branchId.value) && branchId.value) {
+        if (currentSelectedBranchOption.value?.value !== branchId.value) {
+          const v = await branchStore.fetchById(branchId.value);
+          if (v) {
+            mapped.unshift({
+              value: v.id,
+              label: v.name,
+              labelEN: v.nameEN,
+            });
+            currentSelectedBranchOption.value = mapped.at(0);
+          }
+        }
+      }
+      branchOption.value = mapped;
     } else if (type === 'customer') {
-      customerOption.value = (res.result as CustomerBranch[]).map(
+      const mapped = (res.result as CustomerBranch[]).map(
         (v: CustomerBranch) => ({
           value: v.id,
           label: v.registerName || `${v.firstName} ${v.lastName}` || '-',
@@ -86,6 +109,25 @@ async function init(val: string, type: 'branch' | 'customer') {
           namePrefix: v.namePrefix,
         }),
       );
+
+      if (
+        !mapped.find((v) => v.value === customerBranchId.value) &&
+        customerBranchId.value
+      ) {
+        const v = await customerStore.fetchListCustomerBranchById(
+          customerBranchId.value,
+        );
+
+        if (v) {
+          mapped.unshift({
+            value: v.id,
+            label: v.registerName || `${v.firstName} ${v.lastName}` || '-',
+            labelEN:
+              v.registerNameEN || `${v.firstNameEN} ${v.lastNameEN}` || '-',
+            namePrefix: v.namePrefix,
+          });
+        }
+      }
     }
   }
 }