fix(02): view fallback image & change status

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

@@ -76,7 +76,7 @@ function deleteFile(name: string) {
         size="xs"
         class="q-pa-sm rounded q-mr-xs"
         color="info"
-        name="mdi-bank"
+        name="mdi-briefcase"
         style="background-color: var(--surface-3)"
       />
       {{ $t('formDialogTitleByType') }}

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

@@ -221,7 +221,7 @@ onMounted(async () => {
         v-model="userRole"
         :readonly="readonly"
         :hide-dropdown-icon="readonly"
-        :label="$t('formDialogPrefixName')"
+        :label="$t('userRole')"
         :options="roleOptions"
         :rules="[
           (val: string) => !!val || $t('formDialogInputPrefixNameValidate'),

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

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { QSelect } from 'quasar';
 import useOptionStore from 'src/stores/options';
 import { selectFilterOptionRefMod } from 'src/stores/utils';
 import {
@@ -7,7 +8,7 @@ import {
   parseAndFormatDate,
   disabledAfterToday,
 } from 'src/utils/datetime';
-import { ref } from 'vue';
+import { ref, onMounted, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 const { locale } = useI18n();
@@ -23,27 +24,6 @@ const gender = defineModel<string>('gender');
 const birthDate = defineModel<Date | string | null>('birthDate');
 const nationality = defineModel<string>('nationality');
 
-const prefixNameOptions = ref<Record<string, unknown>[]>([]);
-const prefixNameFilter = selectFilterOptionRefMod(
-  ref(optionStore.globalOption.prefix),
-  prefixNameOptions,
-  'label',
-);
-
-const genderOptions = ref<Record<string, unknown>[]>([]);
-const genderFilter = selectFilterOptionRefMod(
-  ref(optionStore.globalOption.gender),
-  genderOptions,
-  'label',
-);
-
-const nationalityOptions = ref<Record<string, unknown>[]>([]);
-const nationalityFilter = selectFilterOptionRefMod(
-  ref(optionStore.globalOption.nationality),
-  nationalityOptions,
-  'label',
-);
-
 defineProps<{
   dense?: boolean;
   outlined?: boolean;
@@ -53,6 +33,63 @@ defineProps<{
   title?: string;
   prefixId: string;
 }>();
+
+const prefixNameOptions = ref<Record<string, unknown>[]>([]);
+let prefixNameFilter: (
+  value: string,
+  update: (callbackFn: () => void, afterFn?: (ref: QSelect) => void) => void,
+) => void;
+
+const genderOptions = ref<Record<string, unknown>[]>([]);
+let genderFilter: (
+  value: string,
+  update: (callbackFn: () => void, afterFn?: (ref: QSelect) => void) => void,
+) => void;
+
+const nationalityOptions = ref<Record<string, unknown>[]>([]);
+let nationalityFilter: (
+  value: string,
+  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,
+  () => {
+    prefixNameFilter = selectFilterOptionRefMod(
+      ref(optionStore.globalOption.prefix),
+      prefixNameOptions,
+      'label',
+    );
+    genderFilter = selectFilterOptionRefMod(
+      ref(optionStore.globalOption.gender),
+      genderOptions,
+      'label',
+    );
+    nationalityFilter = selectFilterOptionRefMod(
+      ref(optionStore.globalOption.nationality),
+      nationalityOptions,
+      'label',
+    );
+  },
+);
 </script>
 <template>
   <div class="row col-12">