feat: import worker with multiple criteria (#72)

* feat: add i18n import from file

* fix: background color

* feat: add import worker component

* feat: support newer passport

* refactor: update validator

* fix: wrong endpoint

* refactor: change to display passport

* feat: add component and state

* fix: wrong validator

* refactor: add i18n

* refactor: add slont top-append

* refactor: use v-model

* refactor: impurt workder

* fix: criteria

* refactor: add customer branch id

---------

Co-authored-by: Thanaphon Frappet <thanaphon@frappet.com>

src/pages/05_quotation/QuotationForm.vue

@@ -56,6 +56,7 @@ import ToggleButton from 'components/button/ToggleButton.vue';
 import FormAbout from 'components/05_quotation/FormAbout.vue';
 import SelectZone from 'components/shared/SelectZone.vue';
 import PersonCard from 'components/shared/PersonCard.vue';
+import ImportWorker from './ImportWorker.vue';
 import {
   AddButton,
   SaveButton,
@@ -233,6 +234,7 @@ const pageState = reactive({
   fieldSelected: [],
   gridView: false,
   isLoaded: false,
+  importWorker: false,
 
   currentTab: 'all',
   addModal: false,
@@ -1043,9 +1045,50 @@ async function getInvoiceCodeFullPay() {
   const ret = await invoiceStore.getInvoiceList();
   if (ret) code.value = ret.result.at(0)?.code || '';
 }
+
+const importWorkerCriteria = ref<{
+  passport: string[] | null;
+  visa: string[] | null;
+}>({
+  passport: [],
+  visa: [],
+});
+
+async function getWorkerFromCriteria(
+  payload: typeof importWorkerCriteria.value,
+) {
+  const ret = await employeeStore.fetchList({
+    payload: {
+      passport: payload.passport || undefined,
+    },
+    pageSize: 99999, // must include all possible worker
+    page: 1,
+    passport: true,
+    customerBranchId: quotationFormData.value.customerBranchId,
+  });
+
+  if (!ret) return false; // error, do not close dialog
+
+  // TODO: Merge employee into worker list
+  const deduplicate = ret.result.filter(
+    (a) => !selectedWorker.value.find((b) => a.id === b.id),
+  );
+
+  preSelectedWorker.value = [...deduplicate, ...selectedWorker.value];
+
+  convertEmployeeToTable();
+
+  return true;
+}
 </script>
 
 <template>
+  <ImportWorker
+    v-model:open="pageState.importWorker"
+    v-model:data="importWorkerCriteria"
+    :import-worker="getWorkerFromCriteria"
+  />
+
   <div class="column surface-0 fullscreen">
     <div class="color-bar">
       <div class="orange-segment"></div>
@@ -1839,6 +1882,63 @@ async function getInvoiceCodeFullPay() {
         }
       "
     >
+      <template #top-append>
+        <q-btn
+          flat
+          dense
+          round
+          size="sm"
+          icon="mdi-dots-horizontal"
+          :id="`btn-kebab-action`"
+          @click.stop
+          :title="$t('general.additional')"
+        >
+          <q-menu class="bordered" ref="refMenu">
+            <q-list>
+              <q-item
+                v-close-popup
+                dense
+                clickable
+                class="row items-center"
+                style="white-space: nowrap"
+                @click.stop="
+                  () => {
+                    triggerCreateEmployee();
+                  }
+                "
+              >
+                <q-icon
+                  size="xs"
+                  class="q-mr-sm"
+                  name="mdi-plus"
+                  style="color: hsl(var(--info-bg))"
+                />
+                <span>
+                  {{ $t('quotation.addWorker') }}
+                </span>
+              </q-item>
+
+              <q-item
+                v-close-popup
+                dense
+                clickable
+                style="white-space: nowrap"
+                class="row items-center"
+                @click.stop="() => (pageState.importWorker = true)"
+              >
+                <q-icon
+                  size="xs"
+                  class="q-mr-sm"
+                  name="mdi-import"
+                  style="color: hsl(195 90% 50%)"
+                />
+                <span>{{ $t('quotation.importWorker') }}</span>
+              </q-item>
+            </q-list>
+          </q-menu>
+        </q-btn>
+      </template>
+
       <section class="col row scroll">
         <SelectZone
           ref="refSelectZoneEmployee"
@@ -1851,16 +1951,6 @@ async function getInvoiceCodeFullPay() {
           :items="workerList"
           :new-items="newWorkerList"
         >
-          <template #top>
-            <AddButton
-              icon-only
-              @click="
-                () => {
-                  triggerCreateEmployee();
-                }
-              "
-            />
-          </template>
           <template #data="{ item }">
             <PersonCard
               noAction
@@ -1871,7 +1961,7 @@ async function getInvoiceCodeFullPay() {
                   $i18n.locale === 'eng'
                     ? `${item.firstNameEN} ${item.lastNameEN}`
                     : `${item.firstName} ${item.lastName}`,
-                code: item.code,
+                code: item.employeePassport.at(0)?.number,
                 female: item.gender === 'female',
                 male: item.gender === 'male',
                 img: `${baseUrl}/customer/${item.id}/image/${item.selectedImage}`,