refactor: update status

src/pages/05_quotation/QuotationForm.vue

@@ -74,11 +74,6 @@ import { useConfigStore } from 'src/stores/config';
 import QuotationFormMetadata from './QuotationFormMetadata.vue';
 import BadgeComponent from 'src/components/BadgeComponent.vue';
 import PaymentForm from './PaymentForm.vue';
-import TableComponents from 'src/components/TableComponents.vue';
-
-// defineProps<{
-//   readonly?: boolean;
-// }>();
 
 type Node = {
   [key: string]: any;
@@ -309,14 +304,13 @@ async function fetchStatus() {
 
 async function fetchQuotation() {
   if (
-    currentQuotationId.value !== undefined &&
+    (!!currentQuotationId.value || !!quotationFormData.value.id) &&
     quotationFormState.value.mode &&
     quotationFormState.value.mode !== 'create'
   ) {
-    await quotationForm.assignFormData(
-      currentQuotationId.value,
-      quotationFormState.value.mode,
-    );
+    const id = currentQuotationId.value || quotationFormData.value.id || '';
+
+    await quotationForm.assignFormData(id, quotationFormState.value.mode);
     await assignWorkerToSelectedWorker();
   }
 
@@ -401,7 +395,10 @@ async function convertInvoiceToSubmit() {
     };
 
     const res = await quotationForm.submitInvoice();
-    if (res) view.value = View.Payment;
+    if (res) {
+      await fetchQuotation();
+      view.value = View.Payment;
+    }
   }
 }
 
@@ -743,11 +740,9 @@ onMounted(async () => {
 });
 
 watch(
-  () => quotationFormData.value.status,
+  () => quotationFormData.value.quotationStatus,
   () => {
     fetchStatus();
-
-    statusQuotationForm.value.filter((v) => v.title === 'ลูกค้าตอบรับ');
   },
 );
 
@@ -1175,7 +1170,6 @@ const view = ref<View>(View.Quotation);
                   :rows="
                     selectedInstallmentNo.length > 0
                       ? productServiceList.filter((v) => {
-                          console.log(v.installmentNo, selectedInstallmentNo);
                           return (
                             v.installmentNo &&
                             selectedInstallmentNo.includes(v.installmentNo)
@@ -1377,8 +1371,15 @@ const view = ref<View>(View.Quotation);
     </article>
 
     <footer class="surface-1 q-pa-md full-width">
-      <div class="row full-width justify-between">
+      <div
+        class="row full-width"
+        :class="{
+          'justify-between': view !== View.InvoicePre,
+          'justify-end': view === View.InvoicePre,
+        }"
+      >
         <MainButton
+          v-if="view !== View.InvoicePre"
           outlined
           icon="mdi-play-box-outline"
           color="207 96% 32%"
@@ -1389,16 +1390,20 @@ const view = ref<View>(View.Quotation);
 
         <div v-if="view === View.Accepted">
           <MainButton
-            outlined
-            icon="mdi-play-box-outline"
+            solid
+            icon="mdi-account-multiple-check-outline"
             color="207 96% 32%"
-            @click="storeDataLocal"
+            @click="
+              () => {
+                submitAccepted();
+              }
+            "
           >
-            {{ $t('general.view', { msg: $t('general.example') }) }}
+            {{ $t('quotation.customerAcceptance') }}
           </MainButton>
         </div>
 
-        <div v-if="view === View.InvoicePre">
+        <template v-if="view === View.InvoicePre">
           <MainButton
             solid
             icon="mdi-account-multiple-check-outline"
@@ -1411,7 +1416,7 @@ const view = ref<View>(View.Quotation);
           >
             {{ $t('quotation.selectInvoice') }}
           </MainButton>
-        </div>
+        </template>
 
         <div v-if="view === View.Invoice">
           <MainButton
@@ -1432,8 +1437,8 @@ const view = ref<View>(View.Quotation);
           class="row"
           style="gap: var(--size-2)"
           v-if="
-            quotationFormData.quotationStatus === 'Issued' ||
-            !quotationFormData.quotationStatus
+            view === View.Quotation &&
+            quotationFormData.quotationStatus === 'Issued'
           "
         >
           <UndoButton
@@ -1464,19 +1469,6 @@ const view = ref<View>(View.Quotation);
             @click="quotationFormState.mode = 'edit'"
             solid
           />
-          <MainButton
-            v-if="view === View.Quotation"
-            solid
-            icon="mdi-account-multiple-check-outline"
-            color="207 96% 32%"
-            @click="
-              () => {
-                submitAccepted();
-              }
-            "
-          >
-            {{ $t('quotation.customerAcceptance') }}
-          </MainButton>
         </div>
       </div>
     </footer>