refactor: add new data employee

src/components/shared/SelectZone.vue

@@ -6,6 +6,7 @@ const props = withDefaults(
   defineProps<{
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     items: any;
+    newItems: any;
     color?: string;
     borderSearchSection?: boolean;
     itemClass?: string;
@@ -15,6 +16,7 @@ const props = withDefaults(
   }>(),
   {
     items: () => [],
+    newItems: () => [],
     color: 'var(--brand-1)',
     noItemsIcon: 'mdi-close',
     itemClass: 'col-md-2 col-sm-6 col-12',
@@ -83,24 +85,57 @@ function assignSelect(to: unknown[], from: unknown[]) {
     <slot name="tab"></slot>
 
     <section class="col q-ma-md">
-      <div v-if="items.length > 0" class="row q-col-gutter-md">
-        <div v-for="(item, i) in items" :key="i" :class="`${itemClass}`">
-          <div
-            class="rounded cursor-pointer relative-position"
-            :style="`border: 1px solid ${selectedItem.includes(item) ? color : 'transparent'}`"
-            @click="() => select(item)"
-          >
+      <div v-if="items.length > 0 || newItems.length > 0" class="column">
+        <!-- NOTE: START - item -->
+        <div class="row q-col-gutter-md">
+          <div v-for="(item, i) in items" :key="i" :class="`${itemClass}`">
             <div
-              v-if="selectedItem.includes(item)"
-              class="badge absolute-top-right flex justify-center q-ma-sm"
-              :style="`background-color: ${color}`"
+              class="rounded cursor-pointer relative-position"
+              :style="`border: 1px solid ${selectedItem.includes(item) ? color : 'transparent'}`"
+              @click="() => select(item)"
             >
-              {{ selectedItem.indexOf(item) + 1 }}
+              <div
+                v-if="selectedItem.includes(item)"
+                class="badge absolute-top-right flex justify-center q-ma-sm"
+                :style="`background-color: ${color}`"
+              >
+                {{ selectedItem.indexOf(item) + 1 }}
+              </div>
+              <slot name="data" :item="item"></slot>
+            </div>
+          </div>
+        </div>
+        <!-- NOTE: END - item -->
+
+        <q-separator
+          v-if="newItems.length !== 0"
+          dark
+          inset
+          :class="{ 'q-mb-md': !$q.screen.lt.md, 'q-my-md': $q.screen.lt.md }"
+        />
+
+        <!-- NOTE: START - newItem -->
+        <div v-if="newItems.length !== 0" class="row q-col-gutter-md">
+          <div v-for="(item, i) in newItems" :key="i" :class="`${itemClass}`">
+            <div
+              class="rounded cursor-pointer relative-position"
+              :style="`border: 1px solid ${selectedItem.includes(item) ? color : 'transparent'}`"
+              @click="() => select(item)"
+            >
+              <div
+                v-if="selectedItem.includes(item)"
+                class="badge absolute-top-right flex justify-center q-ma-sm"
+                :style="`background-color: ${color}`"
+              >
+                {{ selectedItem.indexOf(item) + 1 }}
+              </div>
+              <slot name="newData" :item="item"></slot>
             </div>
-            <slot name="data" :item="item"></slot>
           </div>
         </div>
       </div>
+      <!-- NOTE: END - newItem -->
+
       <div v-else class="flex justify-center full-height">
         <span class="col column items-center justify-center app-text-muted">
           <q-avatar style="background: var(--surface-0)" class="q-mb-md">

src/pages/05_quotation/QuotationForm.vue

@@ -89,7 +89,8 @@ const date = ref();
 
 const preSelectedWorker = ref<Employee[]>([]);
 const selectedWorker = ref<Employee[]>([]);
-const workerList = ref<EmployeeWorker[]>([]);
+const workerList = ref<Employee[]>([]);
+const newWorkerList = ref<EmployeeWorker[]>([]);
 
 const agentPrice = ref(false);
 const summaryPrice = ref<{
@@ -326,22 +327,7 @@ onMounted(async () => {
     const retEmp = await customerStore.fetchBranchEmployee(
       quotationFormData.value.customerBranchId,
     );
-    if (retEmp)
-      workerList.value = retEmp.data.result.map((value) => ({
-        alienReferencNumber: '',
-        documentExpireDate: new Date(),
-        lastNameEN: value.lastNameEN,
-        lastName: value.lastName,
-        middleNameEN: value.middleNameEN,
-        middleName: value.middleName,
-        firstNameEN: value.firstNameEN,
-        firstName: value.firstName,
-        namePrefix: value.namePrefix,
-        nationality: value.nationality,
-        gender: value.gender,
-        dateOfBirth: value.dateOfBirth,
-        code: value.code,
-      }));
+    if (retEmp) workerList.value = workerList.value = retEmp.data.result;
   }
 
   pageState.isLoaded = true;
@@ -357,21 +343,7 @@ watch(
     if (!v) return;
     const retEmp = await customerStore.fetchBranchEmployee(v);
     if (retEmp) {
-      workerList.value = retEmp.data.result.map((value) => ({
-        alienReferencNumber: '',
-        documentExpireDate: new Date(),
-        lastNameEN: value.lastNameEN,
-        lastName: value.lastName,
-        middleNameEN: value.middleNameEN,
-        middleName: value.middleName,
-        firstNameEN: value.firstNameEN,
-        firstName: value.firstName,
-        namePrefix: value.namePrefix,
-        nationality: value.nationality,
-        gender: value.gender,
-        dateOfBirth: value.dateOfBirth,
-        code: value.code,
-      }));
+      workerList.value = workerList.value = retEmp.data.result;
     }
   },
 );
@@ -523,10 +495,7 @@ watch(
                 </nav>
               </section>
             </template>
-            <div
-              class="surface-1 q-pa-md full-width"
-              style="overflow-x: scroll"
-            >
+            <div class="surface-1 q-pa-md full-width">
               <ProductItem
                 :agent-price="agentPrice"
                 @delete="toggleDeleteProduct"
@@ -642,6 +611,7 @@ watch(
           ref="refSelectZoneEmployee"
           v-model:selected-item="preSelectedWorker"
           :items="workerList"
+          :new-items="newWorkerList"
         >
           <template #top>
             <AddButton
@@ -681,6 +651,35 @@ watch(
               }"
             ></PersonCard>
           </template>
+
+          <template #newData="{ item }">
+            <PersonCard
+              noAction
+              prefixId="asda"
+              class="full-width"
+              :data="{
+                name:
+                  $i18n.locale === 'eng'
+                    ? `${item.firstNameEN} ${item.lastNameEN}`
+                    : `${item.firstName} ${item.lastName}`,
+                code: item.code,
+                female: item.gender === 'female',
+                male: item.gender === 'male',
+                img: `${baseUrl}/customer/${item.id}/image/${item.selectedImage}`,
+                fallbackImg: '/images/employee-avatar.png',
+                detail: [
+                  {
+                    icon: 'mdi-passport',
+                    value: optionStore.mapOption(item.nationality),
+                  },
+                  {
+                    icon: 'mdi-clock-outline',
+                    value: calculateAge(item.dateOfBirth),
+                  },
+                ],
+              }"
+            ></PersonCard>
+          </template>
         </SelectZone>
       </section>
     </DialogForm>
@@ -710,7 +709,7 @@ watch(
     :title="$t('form.title.create', { name: $t('customer.employee') })"
     :submit="
       () => {
-        workerList.push(formDataEmployee);
+        newWorkerList.push(formDataEmployee);
         quotationForm.injectNewEmployee(formDataEmployee, () =>
           setDefaultFormEmployee(),
         );