From a4bc6e48846933a16ae675a558cc3ecef38a76b2 Mon Sep 17 00:00:00 2001
From: Thanaphon Frappet <thanaphon@frappet.com>
Date: Mon, 27 Jan 2025 15:20:02 +0700
Subject: [PATCH] refactor: show mode list

---
 .../QuotationFormWorkerAddDialog.vue          | 180 ++++++------------
 .../QuotationFormWorkerSelect.vue             | 107 ++++++-----
 2 files changed, 118 insertions(+), 169 deletions(-)

diff --git a/src/pages/05_quotation/QuotationFormWorkerAddDialog.vue b/src/pages/05_quotation/QuotationFormWorkerAddDialog.vue
index 67ebbb9e..89904bbf 100644
--- a/src/pages/05_quotation/QuotationFormWorkerAddDialog.vue
+++ b/src/pages/05_quotation/QuotationFormWorkerAddDialog.vue
@@ -23,6 +23,8 @@ import PersonCard from 'src/components/shared/PersonCard.vue';
 import { QuotationFull } from 'src/stores/quotations/types';
 import { Lang } from 'src/utils/ui';
 import NoData from 'src/components/NoData.vue';
+import TableWorker from 'src/components/shared/table/TableWorker.vue';
+import ToggleView from 'src/components/shared/ToggleView.vue';
 
 const API_BASE_URL = import.meta.env.VITE_API_BASE_URL;
 
@@ -104,6 +106,7 @@ const employeeStore = useEmployeeStore();
 const quotationStore = useQuotationStore();
 
 const open = defineModel<boolean>('open', { default: false });
+const viewMode = ref<boolean>(false);
 const workerSelected = ref<Employee[]>([]);
 const workerList = ref<Employee[]>([]);
 const importWorkerCriteria = ref<{
@@ -314,6 +317,8 @@ watch(() => state.search, getWorkerList);
         <q-tab-panel class="q-pa-none" :name="1">
           <div class="column q-pa-md full-height">
             <section class="row justify-end q-mb-md">
+              <ToggleView v-model="viewMode" class="q-mr-sm" />
+
               <q-input
                 for="input-search"
                 outlined
@@ -340,55 +345,59 @@ 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)"
-                  >
-                    <span class="selectable-item__pos">
-                      {{ emp._selectedIndex + 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 #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>
           </div>
@@ -457,86 +466,15 @@ watch(() => state.search, getWorkerList);
                   </template>
 
                   <div class="q-pa-md surface-1">
-                    <q-table
+                    <TableWorker
                       v-model:selected="productWorkerMap[id]"
-                      :rows-per-page-options="[0]"
                       :rows="
                         workerSelected.map((data, i) => ({
                           ...data,
                           _index: i,
                         }))
                       "
-                      :columns
-                      hide-bottom
-                      bordered
-                      flat
-                      hide-pagination
-                      selection="multiple"
-                      card-container-class="q-col-gutter-sm"
-                      class="full-width"
-                    >
-                      <template v-slot:header="props">
-                        <q-tr
-                          style="background-color: hsla(var(--info-bg) / 0.07)"
-                          :props="props"
-                        >
-                          <q-th
-                            v-for="col in columns"
-                            :key="col.name"
-                            :props="props"
-                          >
-                            <template v-if="!col.name.startsWith('#')">
-                              {{ $t(col.label) }}
-                            </template>
-                            <template v-if="col.name === '#check'">
-                              <q-checkbox v-model="props.selected" size="sm" />
-                            </template>
-                          </q-th>
-                        </q-tr>
-                      </template>
-
-                      <template
-                        v-slot:body="props: {
-                          row: Employee & { _index: number };
-                        } & Omit<Parameters<QTableSlots['body']>[0], 'row'>"
-                      >
-                        <q-tr
-                          :class="{ dark: $q.dark.isActive }"
-                          class="text-center"
-                        >
-                          <q-td
-                            v-for="col in columns"
-                            :align="col.align"
-                            :key="col.name"
-                          >
-                            <!-- NOTE: custom column will starts with # -->
-                            <template v-if="!col.name.startsWith('#')">
-                              <q-avatar
-                                v-if="col.name === 'employeeName'"
-                                class="q-mr-sm"
-                                size="md"
-                              >
-                                <q-img
-                                  :src="getEmployeeImageUrl(props.row)"
-                                  :ratio="1"
-                                  class="text-center"
-                                />
-                              </q-avatar>
-                              <span>
-                                {{
-                                  typeof col.field === 'string'
-                                    ? props.row[col.field as keyof Employee]
-                                    : col.field(props.row)
-                                }}
-                              </span>
-                            </template>
-                            <template v-if="col.name === '#check'">
-                              <q-checkbox v-model="props.selected" size="sm" />
-                            </template>
-                          </q-td>
-                        </q-tr>
-                      </template>
-                    </q-table>
+                    />
                   </div>
                 </q-expansion-item>
               </div>
diff --git a/src/pages/05_quotation/QuotationFormWorkerSelect.vue b/src/pages/05_quotation/QuotationFormWorkerSelect.vue
index fc039161..1c89a345 100644
--- a/src/pages/05_quotation/QuotationFormWorkerSelect.vue
+++ b/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>