refactor: edit color icon and edit optionStore can null

src/components/02_personnel-management/FormPerson.vue

@@ -52,6 +52,24 @@ let nationalityFilter: (
   update: (callbackFn: () => void, afterFn?: (ref: QSelect) => void) => void,
 ) => void;
 
+onMounted(() => {
+  prefixNameFilter = selectFilterOptionRefMod(
+    ref(optionStore.globalOption?.prefix),
+    prefixNameOptions,
+    'label',
+  );
+  genderFilter = selectFilterOptionRefMod(
+    ref(optionStore.globalOption?.gender),
+    genderOptions,
+    'label',
+  );
+  nationalityFilter = selectFilterOptionRefMod(
+    ref(optionStore.globalOption?.nationality),
+    nationalityOptions,
+    'label',
+  );
+});
+
 watch(
   () => optionStore.globalOption,
   () => {
@@ -89,6 +107,7 @@ watch(
 
     <div class="col-12 row q-col-gutter-sm">
       <div class="col-6 row" style="display: flex; gap: var(--size-2)">
+        {{ prefixNameTh }}
         <q-select
           outlined
           use-input
@@ -321,7 +340,7 @@ watch(
                 size="xs"
                 name="mdi-calendar-blank-outline"
                 class="cursor-pointer"
-                color="positive"
+                color="primary"
               />
             </template>
           </q-input>

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

@@ -360,7 +360,7 @@ const insuranceCompanyFilter = selectFilterOptionRefMod(
                 size="xs"
                 name="mdi-calendar-blank-outline"
                 class="cursor-pointer"
-                color="positive"
+                color="primary"
               />
             </template>
             <template v-slot:append>
@@ -422,7 +422,7 @@ const insuranceCompanyFilter = selectFilterOptionRefMod(
                 size="xs"
                 name="mdi-calendar-blank-outline"
                 class="cursor-pointer"
-                color="positive"
+                color="primary"
               />
             </template>
             <template v-slot:append>

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

@@ -262,7 +262,7 @@ const workplaceFilter = selectFilterOptionRefMod(
                 size="xs"
                 name="mdi-calendar-blank-outline"
                 class="cursor-pointer"
-                color="positive"
+                color="primary"
               />
             </template>
             <template v-slot:append>
@@ -336,7 +336,7 @@ const workplaceFilter = selectFilterOptionRefMod(
                 size="xs"
                 name="mdi-calendar-blank-outline"
                 class="cursor-pointer"
-                color="positive"
+                color="primary"
               />
             </template>
             <template v-slot:append>
@@ -399,7 +399,7 @@ const workplaceFilter = selectFilterOptionRefMod(
                 size="xs"
                 name="mdi-calendar-blank-outline"
                 class="cursor-pointer"
-                color="positive"
+                color="primary"
               />
             </template>
             <template v-slot:append>