From 033e2fc2f6e67ad73321b81188547ada96e5dd87 Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Thu, 26 Dec 2024 10:38:45 +0700
Subject: [PATCH] feat: add reactive employee amount based on rows length in
 WorkerItem component

---
 src/components/05_quotation/WorkerItem.vue | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/components/05_quotation/WorkerItem.vue b/src/components/05_quotation/WorkerItem.vue
index f0039344..9fc56e40 100644
--- a/src/components/05_quotation/WorkerItem.vue
+++ b/src/components/05_quotation/WorkerItem.vue
@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import { QTableProps } from 'quasar';
 import TableComponents from 'src/components/TableComponents.vue';
+import { watch } from 'vue';
 
 const employeeAmount = defineModel<number>('employeeAmount', { default: 1 });
 
@@ -9,7 +10,7 @@ defineEmits<{
   (e: 'check', index: number): void;
 }>();
 
-withDefaults(
+const props = withDefaults(
   defineProps<{
     readonly?: boolean;
     fallbackImg?: string;
@@ -85,6 +86,14 @@ const columns = [
     field: 'action',
   },
 ] satisfies QTableProps['columns'];
+
+watch(
+  () => props.rows,
+  () => {
+    if (props.readonly) return;
+    employeeAmount.value = props.rows.length;
+  },
+);
 </script>
 <template>
   <div>
@@ -175,6 +184,7 @@ const columns = [
         input-class="text-center"
         :readonly
         hide-bottom-space
+        :min="rows.length"
         v-model="employeeAmount"
       />
     </div>