refactor: show mode list

src/pages/05_quotation/QuotationFormWorkerSelect.vue

@@ -46,6 +46,8 @@ import {
   columnsAttachment,
 } from 'src/pages/03_customer-management/constant';
 import { storeToRefs } from 'pinia';
+import ToggleView from 'src/components/shared/ToggleView.vue';
+import TableWorker from 'src/components/shared/table/TableWorker.vue';
 
 const API_BASE_URL = import.meta.env.VITE_API_BASE_URL;
 
@@ -55,6 +57,8 @@ const quotationForm = useQuotationForm();
 const { locale } = useI18n();
 const ocrStore = useOcrStore();
 
+const viewMode = ref<boolean>(false);
+
 const { state: employeeFormState, currentFromDataEmployee } =
   storeToRefs(employeeFormStore);
 
@@ -329,14 +333,15 @@ watch(() => state.search, getWorkerList);
     <div class="column full-height no-wrap surface-2">
       <section class="row q-mb-md">
         <header
-          class="row items-center q-py-sm q-px-md justify-between full-width surface-3 bordered-b no-wrap"
+          class="row items-center q-py-sm q-px-md justify-end full-width surface-3 bordered-b no-wrap"
         >
+          <ToggleView v-model="viewMode" class="q-mr-sm full-height" />
+
           <q-input
             for="input-search"
             outlined
             dense
             :label="$t('general.search')"
-            class="q-mr-md col-md-4"
             :bg-color="$q.dark.isActive ? 'dark' : 'white'"
             v-model="state.search"
             debounce="500"
@@ -447,7 +452,7 @@ watch(() => state.search, getWorkerList);
           <div class="full-width q-pt-md">
             <section
               :class="{ ['items-center']: workerList.length === 0 }"
-              class="row q-col-gutter-md scroll"
+              class="row scroll"
             >
               <div
                 style="display: inline-block; margin-inline: auto"
@@ -455,52 +460,58 @@ watch(() => state.search, getWorkerList);
               >
                 <NoData :not-found="!!state.search" />
               </div>
-              <div
-                :key="emp.id"
-                v-for="(emp, index) in workerList.map((data) => ({
-                  ...data,
-                  _selectedIndex: selectedIndex(data),
-                }))"
-                class="col-md-2 col-sm-6 col-12"
+              <TableWorker
+                v-model:selected="workerSelected"
+                :rows="workerList"
+                :disabledWorkerId
+                :grid="viewMode"
               >
-                <button
-                  class="selectable-item full-width"
-                  :class="{
-                    ['selectable-item__selected']: emp._selectedIndex !== -1,
-                    ['selectable-item__disabled']: disabledWorkerId?.some(
-                      (id) => id === emp.id,
-                    ),
-                  }"
-                  @click="toggleSelect(emp)"
-                >
-                  <PersonCard
-                    no-action
-                    class="full-width"
-                    :prefix-id="'employee-' + index"
-                    :data="{
-                      name:
-                        locale === Lang.English
-                          ? `${emp.firstNameEN} ${emp.lastNameEN}`
-                          : `${emp.firstName} ${emp.lastName}`,
-                      code: emp.employeePassport?.at(0)?.number || '-',
-                      female: emp.gender === 'female',
-                      male: emp.gender === 'male',
-                      img: getEmployeeImageUrl(emp),
-                      fallbackImg: `/images/employee-avatar-${emp.gender}.png`,
-                      detail: [
-                        {
-                          icon: 'mdi-passport',
-                          value: optionStore.mapOption(emp.nationality),
-                        },
-                        {
-                          icon: 'mdi-clock-outline',
-                          value: calculateAge(emp.dateOfBirth),
-                        },
-                      ],
-                    }"
-                  />
-                </button>
-              </div>
+                <template #grid="{ item: emp, index }">
+                  <div :key="emp.id" class="col-md-2 col-sm-6 col-12">
+                    <button
+                      class="selectable-item full-width"
+                      :class="{
+                        ['selectable-item__selected']:
+                          emp._selectedIndex !== -1,
+                        ['selectable-item__disabled']: disabledWorkerId?.some(
+                          (id) => id === emp.id,
+                        ),
+                      }"
+                      @click="toggleSelect(emp)"
+                    >
+                      <span class="selectable-item__pos">
+                        {{ (emp._selectedIndex || 0) + 1 }}
+                      </span>
+                      <PersonCard
+                        no-action
+                        class="full-width"
+                        :prefix-id="'employee-' + index"
+                        :data="{
+                          name:
+                            locale === Lang.English
+                              ? `${emp.firstNameEN} ${emp.lastNameEN}`
+                              : `${emp.firstName} ${emp.lastName}`,
+                          code: emp.employeePassport?.at(0)?.number || '-',
+                          female: emp.gender === 'female',
+                          male: emp.gender === 'male',
+                          img: getEmployeeImageUrl(emp),
+                          fallbackImg: `/images/employee-avatar-${emp.gender}.png`,
+                          detail: [
+                            {
+                              icon: 'mdi-passport',
+                              value: optionStore.mapOption(emp.nationality),
+                            },
+                            {
+                              icon: 'mdi-clock-outline',
+                              value: calculateAge(emp.dateOfBirth),
+                            },
+                          ],
+                        }"
+                      />
+                    </button>
+                  </div>
+                </template>
+              </TableWorker>
             </section>
           </div>
         </q-expansion-item>