From a5a64b30dcbabdd96a4ce1bdc75ad5b92b798adf Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Tue, 14 Jan 2025 09:38:49 +0700
Subject: [PATCH] feat: creditNote => add validation rules

---
 src/pages/11_credit-note/FormPage.vue         | 28 +++++++++++++------
 .../expansion/CreditNoteExpansion.vue         |  2 ++
 2 files changed, 22 insertions(+), 8 deletions(-)

diff --git a/src/pages/11_credit-note/FormPage.vue b/src/pages/11_credit-note/FormPage.vue
index c69400f8..a66e6f3d 100644
--- a/src/pages/11_credit-note/FormPage.vue
+++ b/src/pages/11_credit-note/FormPage.vue
@@ -30,6 +30,7 @@ import { storeToRefs } from 'pinia';
 import useOptionStore from 'src/stores/options';
 import { dialogWarningClose } from 'src/stores/utils';
 import { useI18n } from 'vue-i18n';
+import { QForm } from 'quasar';
 
 const route = useRoute();
 const router = useRouter();
@@ -39,6 +40,7 @@ const configStore = useConfigStore();
 const { data: config } = storeToRefs(configStore);
 const { t } = useI18n();
 
+const refForm = ref<InstanceType<typeof QForm>>();
 const creditNoteData = ref<CreditNote>();
 const quotationData = ref<CreditNote['quotation']>();
 const view = ref<CreditNoteStatus | null>(null);
@@ -556,6 +558,7 @@ onMounted(async () => {
               @click="i.handler()"
             />
           </nav>
+
           <DocumentExpansion
             readonly
             :registered-branch-id="quotationData?.registeredBranchId"
@@ -567,12 +570,20 @@ onMounted(async () => {
             @goto-quotation="goToQuotation"
           />
 
-          <CreditNoteExpansion
-            v-if="view === null"
-            :readonly="readonly"
-            v-model:reason="currentFormData.reason"
-            v-model:detail="currentFormData.detail"
-          />
+          <q-form
+            ref="refForm"
+            greedy
+            @submit.prevent
+            @validation-success="submit"
+          >
+            <CreditNoteExpansion
+              v-if="view === null"
+              :readonly="readonly"
+              v-model:reason="currentFormData.reason"
+              v-model:detail="currentFormData.detail"
+            />
+          </q-form>
+
           <ProductExpansion
             v-if="view === null"
             creditNote
@@ -634,7 +645,6 @@ onMounted(async () => {
             "
           />
 
-          <!-- TODO: bind additional file -->
           <AdditionalFileExpansion
             v-if="view !== CreditNoteStatus.Success"
             :readonly="false"
@@ -731,9 +741,11 @@ onMounted(async () => {
         >
           {{ $t('general.view', { msg: $t('general.example') }) }}
         </MainButton>
+        <!-- @click="submit" -->
         <SaveButton
           v-if="!readonly"
-          @click="submit"
+          type="submit"
+          @click.stop="(e) => refForm?.submit(e)"
           :label="$t('creditNote.label.submit')"
           icon="mdi-account-multiple-check-outline"
           solid
diff --git a/src/pages/11_credit-note/expansion/CreditNoteExpansion.vue b/src/pages/11_credit-note/expansion/CreditNoteExpansion.vue
index 31da0211..0dca2631 100644
--- a/src/pages/11_credit-note/expansion/CreditNoteExpansion.vue
+++ b/src/pages/11_credit-note/expansion/CreditNoteExpansion.vue
@@ -35,6 +35,7 @@ const detail = defineModel<string>('detail');
           { label: $t('creditNote.label.reasonReturn'), value: 'Return' },
           { label: $t('creditNote.label.reasonCanceled'), value: 'Canceled' },
         ]"
+        :rules="[(val: string) => !!val || $t('form.error.required')]"
       ></SelectInput>
       <q-input
         :readonly
@@ -44,6 +45,7 @@ const detail = defineModel<string>('detail');
         dense
         class="col"
         v-model="detail"
+        :rules="[(val: string) => !!val || $t('form.error.required')]"
       ></q-input>
     </main>
   </q-expansion-item>