feat: update importNationality to support multiple selections and adjust related logic

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

@@ -29,7 +29,7 @@ const discountCondition = defineModel<string | null | undefined>(
 const sourceNationality = defineModel<string | null | undefined>(
   'sourceNationality',
 );
-const importNationality = defineModel<string | null | undefined>(
+const importNationality = defineModel<string[] | null | undefined>(
   'importNationality',
 );
 const trainingPlace = defineModel<string | null | undefined>('trainingPlace');
@@ -179,18 +179,19 @@ function deleteFile(name: string) {
             (v) => (typeof v === 'string' ? (sourceNationality = v) : '')
           "
         />
+
         <SelectInput
-          :model-value="readonly ? importNationality || '-' : importNationality"
+          v-model="importNationality"
           id="input-import-nationality"
           for="input-import-nationality"
           :option="optionStore.globalOption.nationality"
           class="col-md-3 col-6"
           :readonly
+          multiple
+          :hideSelected="false"
           clearable
+          fillInput
           :label="$t('personnel.form.importNationality')"
-          @update:model-value="
-            (v) => (typeof v === 'string' ? (importNationality = v) : '')
-          "
         />
 
         <SelectInput

src/components/shared/SelectInput.vue

@@ -106,7 +106,7 @@ watch(
     :rules
     @clear="
       () => {
-        model = '';
+        multiple ? (model = []) : (model = '');
       }
     "
   >

src/pages/02_personnel-management/MainPage.vue

@@ -99,7 +99,7 @@ const userFileList = ref<{ name: string; url: string }[]>([]);
 const typeStats = ref<UserTypeStats>();
 const userStats = ref<BranchUserStats[]>();
 
-const searchDate = ref<Date[]>([]);
+const searchDate = ref<[]>([]);
 
 const urlProfile = ref<string>();
 const profileFileImg = ref<File | null>(null);
@@ -126,7 +126,7 @@ const defaultFormData = {
   streetEN: '',
   street: '',
   trainingPlace: null,
-  importNationality: null,
+  importNationality: [],
   sourceNationality: null,
   licenseExpireDate: null,
   licenseIssueDate: null,
@@ -178,7 +178,7 @@ const formData = ref<UserCreate>({
   streetEN: '',
   street: '',
   trainingPlace: null,
-  importNationality: null,
+  importNationality: [],
   sourceNationality: null,
   licenseExpireDate: null,
   licenseIssueDate: null,
@@ -555,6 +555,7 @@ async function triggerChangeStatus(id: string, status: string) {
 async function assignFormData(idEdit: string) {
   if (!userData.value) return;
   const foundUser = userData.value.result.find((user) => user.id === idEdit);
+  console.log(foundUser);
 
   if (foundUser) {
     currentUser.value = foundUser;
@@ -576,7 +577,10 @@ async function assignFormData(idEdit: string) {
       street: foundUser.street,
       streetEN: foundUser.streetEN,
       trainingPlace: foundUser.trainingPlace,
-      importNationality: foundUser.importNationality,
+      importNationality:
+        typeof foundUser.importNationality === 'string'
+          ? [foundUser.importNationality]
+          : foundUser.importNationality,
       sourceNationality: foundUser.sourceNationality,
       licenseNo: foundUser.licenseNo,
       discountCondition: foundUser.discountCondition,
@@ -750,7 +754,7 @@ watch(
     formData.value.responsibleArea = null;
     formData.value.discountCondition = null;
     formData.value.sourceNationality = null;
-    formData.value.importNationality = null;
+    formData.value.importNationality = [];
     formData.value.trainingPlace = null;
     formData.value.checkpoint = null;
     formData.value.checkpointEN = null;

src/stores/user/types.ts

@@ -13,7 +13,7 @@ export type User = {
   createdBy: string;
   status: Status;
   trainingPlace: string | null;
-  importNationality: string | null;
+  importNationality: [] | null;
   sourceNationality: string | null;
   licenseExpireDate: Date | null;
   licenseIssueDate: Date | null;
@@ -82,7 +82,7 @@ export type UserCreate = {
   streetEN: string;
   street: string;
   trainingPlace?: string | null;
-  importNationality?: string | null;
+  importNationality?: string[] | null;
   sourceNationality?: string | null;
   licenseExpireDate?: Date | null;
   licenseIssueDate?: Date | null;