refactor: workerIndex

src/components/05_quotation/ProductItem.vue

@@ -1,7 +1,6 @@
 <script lang="ts" setup>
-import { computed, onMounted, ref, watch } from 'vue';
+import { computed, ref, watch } from 'vue';
 import { QTableProps } from 'quasar';
-import ThaiBahtText from 'thai-baht-text';
 import { toWords } from 'number-to-words';
 import { storeToRefs } from 'pinia';
 
@@ -9,14 +8,12 @@ import WorkerItem from './WorkerItem.vue';
 import DeleteButton from '../button/DeleteButton.vue';
 import { commaInput } from 'stores/utils';
 import { precisionRound } from 'src/utils/arithmetic';
-import TableComponents from 'components/TableComponents.vue';
 import { QuotationPayload } from 'stores/quotations/types';
 import { formatNumberDecimal } from 'stores/utils';
 import { useConfigStore } from 'stores/config';
 import { Product, Service, Work } from 'src/stores/product-service/types';
-import { read } from 'fs';
 
-defineProps<{
+const props = defineProps<{
   readonly?: boolean;
   agentPrice: boolean;
   employeeRows?: {
@@ -250,10 +247,22 @@ function groupByServiceId() {
   groupList.value = groupedItems;
 }
 
+function handleCheck(
+  index: number,
+  data: QuotationPayload['productServiceList'][number],
+) {
+  const target = data.workerIndex.indexOf(index);
+  if (target > -1) {
+    data.workerIndex.splice(target, 1);
+  } else {
+    data.workerIndex.push(index);
+  }
+}
+
 watch(
   () => rows.value,
   () => {
-    groupByServiceId();
+    if (rows.value.length > 0) groupByServiceId();
   },
 );
 
@@ -263,6 +272,19 @@ watch(
     summaryPrice.value = summary.value;
   },
 );
+
+watch(
+  () => props.employeeRows,
+  (a, b) => {
+    if (a === undefined || b === undefined) return;
+    if (a.length < b.length) {
+      rows.value.forEach((p) => {
+        const maxValue = Math.max(...p.workerIndex);
+        p.workerIndex = p.workerIndex.filter((i) => i !== maxValue);
+      });
+    }
+  },
+);
 </script>
 <template>
   <div class="column">
@@ -278,7 +300,7 @@ watch(
             style="background: var(--orange-5); color: var(--surface-1)"
             size="sm"
           >
-            {{ i + 1 }}
+            <q-icon size="xs" name="mdi-server-outline" />
           </q-avatar>
           {{ item.title }}
         </div>
@@ -419,9 +441,12 @@ watch(
             >
               <q-td colspan="100%" style="padding: 16px">
                 <WorkerItem
+                  @check="(wokerIndex) => handleCheck(wokerIndex, props.row)"
+                  checkable
                   fallback-img="/images/employee-avatar.png"
                   inTable
                   hideQuantity
+                  :check-list="props.row.workerIndex"
                   :rows="employeeRows"
                 />
               </q-td>

src/components/05_quotation/WorkerItem.vue

@@ -1,9 +1,11 @@
 <script lang="ts" setup>
 import { QTableProps } from 'quasar';
 import TableComponents from 'src/components/TableComponents.vue';
+import { onMounted } from 'vue';
 
 defineEmits<{
   (e: 'delete', index: number): void;
+  (e: 'check', index: number): void;
 }>();
 
 withDefaults(
@@ -12,6 +14,7 @@ withDefaults(
     employeeAmount?: number;
     fallbackImg?: string;
     hideQuantity?: boolean;
+    checkable?: boolean;
     inTable?: boolean;
     rows: {
       foreignRefNo: string;
@@ -31,6 +34,8 @@ withDefaults(
   },
 );
 
+const checkList = defineModel<number[]>('checkList', { default: [] });
+
 const columns = [
   {
     name: 'order',
@@ -87,13 +92,26 @@ const columns = [
     <TableComponents
       flat
       bordered
-      button-delete
+      :button-delete="!checkable"
       img-column="employeeName"
       :readonly="readonly"
       :inTable
-      :columns
+      :columns="
+        checkable
+          ? [
+              {
+                name: 'check',
+                align: 'center',
+                label: '',
+                field: 'check',
+              },
+              ...columns.filter((c) => c.name !== 'action'),
+            ]
+          : columns
+      "
       :rows
       hidePagination
+      :customColumn="['check']"
       @delete="(i) => $emit('delete', i)"
     >
       <template v-slot:img-column="{ props }">
@@ -121,6 +139,20 @@ const columns = [
           </div>
         </q-avatar>
       </template>
+
+      <template v-slot:body-cell-check="{ props }">
+        <q-td class="text-center">
+          <q-checkbox
+            size="xs"
+            @click.stop="
+              () => {
+                $emit('check', props.rowIndex);
+              }
+            "
+            :model-value="checkList.includes(props.rowIndex)"
+          ></q-checkbox>
+        </q-td>
+      </template>
     </TableComponents>
 
     <div v-if="!hideQuantity" class="row q-pt-md items-center">