feat: custom worker count (#46)

* feat: add worker max type

* feat: add default worker max

* refactor: support adjustable worker max

* refactor: bind worker max to form data

src/components/05_quotation/WorkerItem.vue

@@ -1,17 +1,17 @@
 <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;
 }>();
 
+const employeeAmount = defineModel<number>('employeeAmount', { default: 1 });
+
 withDefaults(
   defineProps<{
     readonly?: boolean;
-    employeeAmount?: number;
     fallbackImg?: string;
     hideQuantity?: boolean;
     checkable?: boolean;
@@ -30,7 +30,6 @@ withDefaults(
   }>(),
   {
     rows: () => [],
-    employeeAmount: 0,
   },
 );
 
@@ -157,15 +156,22 @@ const columns = [
     </TableComponents>
 
     <div v-if="!hideQuantity" class="row q-pt-md items-center">
-      <span class="q-ml-auto">
+      <span class="q-ml-auto q-mr-sm">
         {{ $t('general.numberOf', { msg: $t('quotation.employee') }) }}
       </span>
-      <div
+
-        class="surface-tab bordered rounded flex items-center justify-center q-mx-md"
+      <q-input
-        style="width: 30px; height: 30px"
+        for="worker-count"
-      >
+        dense
-        {{ employeeAmount || '0' }}
+        outlined
-      </div>
+        style="width: 67px"
+        :type="readonly ? 'text' : 'number'"
+        class="col-1"
+        input-class="text-center"
+        :readonly
+        hide-bottom-space
+        v-model="employeeAmount"
+      />
     </div>
   </div>
 </template>

src/pages/05_quotation/QuotationForm.vue

@@ -485,6 +485,7 @@ async function convertDataToFormSubmit() {
 
   quotationFormData.value = {
     id: quotationFormData.value.id,
+    workerMax: quotationFormData.value.workerMax,
     productServiceList: quotationFormData.value.productServiceList,
     urgent: quotationFormData.value.urgent,
     customerBranchId: quotationFormData.value.customerBranchId,
@@ -683,6 +684,10 @@ function convertEmployeeToTable() {
     preSelectedWorker.value,
   );
   pageState.employeeModal = false;
+  quotationFormData.value.workerMax = Math.max(
+    quotationFormData.value.workerMax || 1,
+    selectedWorker.value.length,
+  );
 }
 
 function changeMode(mode: string) {
@@ -1147,7 +1152,16 @@ const view = ref<View>(View.Quotation);
 
               <div class="surface-1 q-pa-md full-width">
                 <WorkerItem
-                  :employee-amount="selectedWorker.length"
+                  @update:employee-amount="
+                    (v) =>
+                      (quotationFormData.workerMax = Math.max(
+                        v,
+                        selectedWorker.length,
+                      ))
+                  "
+                  :employee-amount="
+                    quotationFormData.workerMax || selectedWorker.length
+                  "
                   :readonly="readonly"
                   fallback-img="/images/employee-avatar.png"
                   :rows="

src/pages/05_quotation/form.ts

@@ -23,6 +23,7 @@ const DEFAULT_DATA: QuotationPayload = {
   urgent: false,
   customerBranchId: '',
   worker: [],
+  workerMax: 1,
   payBillDate: new Date(),
   paySplit: [],
   paySplitCount: 0,
@@ -158,8 +159,6 @@ export const useQuotationForm = defineStore('form-quotation', () => {
     if (mode === 'assign') return;
 
     currentFormState.value.mode = mode;
-
-    console.log(currentFormData.value);
   }
 
   async function submitQuotation() {

src/stores/quotations/types.ts

@@ -351,6 +351,7 @@ export type QuotationPayload = {
   registeredBranchId: string;
   urgent: boolean;
   worker: EmployeeWorker[];
+  workerMax: number | null;
   _count: { worker: number };
   discount?: number;
   payBillDate?: Date | null;