From 84f5d3b969213f1ecd331ad845704c6b98de3276 Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Thu, 26 Dec 2024 11:36:48 +0700
Subject: [PATCH] refactor: enhance form submission handling and make
 responsible user selection required

---
 .../08_request-list/FormResponsibleUser.vue   |  2 +-
 .../08_request-list/MessengerExpansion.vue    | 41 +++++++++++++------
 2 files changed, 29 insertions(+), 14 deletions(-)

diff --git a/src/pages/08_request-list/FormResponsibleUser.vue b/src/pages/08_request-list/FormResponsibleUser.vue
index e76156b7..5e407f57 100644
--- a/src/pages/08_request-list/FormResponsibleUser.vue
+++ b/src/pages/08_request-list/FormResponsibleUser.vue
@@ -42,7 +42,7 @@ watch(responsibleUserLocal, (lhs, rhs) => {
 
     <div class="col-12 row">
       <SelectUser
-        :required="false"
+        required
         :key="responsibleUserLocal?.toString()"
         class="col-md-5 col-12"
         v-model:value="responsibleUserId"
diff --git a/src/pages/08_request-list/MessengerExpansion.vue b/src/pages/08_request-list/MessengerExpansion.vue
index e8570193..872ddffe 100644
--- a/src/pages/08_request-list/MessengerExpansion.vue
+++ b/src/pages/08_request-list/MessengerExpansion.vue
@@ -7,6 +7,7 @@ import FormResponsibleUser from './FormResponsibleUser.vue';
 import { UndoButton, SaveButton, EditButton } from 'src/components/button';
 import { AttributesForm, Step } from 'src/stores/request-list/types';
 import { useRequestList } from 'src/stores/request-list';
+import { QForm } from 'quasar';
 
 const props = defineProps<{
   readonly?: boolean;
@@ -14,12 +15,18 @@ const props = defineProps<{
   responsibleAreaDistrictId?: string;
 }>();
 
+const emit = defineEmits<{
+  (e: 'updateAttributes', value: AttributesForm): void;
+}>();
+
 const requestListStore = useRequestList();
 
 const state = reactive({
   isEdit: false,
 });
 
+const refForm = ref<InstanceType<typeof QForm>>();
+
 const defaultForm = {
   customerDuty: false,
   customerDutyCost: 30,
@@ -62,6 +69,7 @@ async function triggerSubmit() {
   if (res) {
     attributesForm.value = JSON.parse(JSON.stringify(formData.value));
     state.isEdit = false;
+    emit('updateAttributes', attributesForm.value);
   }
 }
 
@@ -100,7 +108,7 @@ function assignToForm() {
           id="btn-info-basic-save"
           icon-only
           type="submit"
-          @click.stop="triggerSubmit"
+          @click.stop="refForm?.submit()"
         />
         <EditButton
           v-if="!state.isEdit"
@@ -114,18 +122,25 @@ function assignToForm() {
 
     <main class="row">
       <section class="col-12">
-        <FormGroupHead>
-          {{
-            $t('general.select', { msg: $t('requestList.employeeMessenger') })
-          }}
-        </FormGroupHead>
-        <FormResponsibleUser
-          :readonly="!state.isEdit"
-          class="surface-1"
-          v-model:responsible-user-local="formData.responsibleUserLocal"
-          v-model:responsible-user-id="formData.responsibleUserId"
-          :district-id="responsibleAreaDistrictId"
-        />
+        <q-form
+          ref="refForm"
+          greedy
+          @submit.prevent
+          @validation-success="triggerSubmit"
+        >
+          <FormGroupHead>
+            {{
+              $t('general.select', { msg: $t('requestList.employeeMessenger') })
+            }}
+          </FormGroupHead>
+          <FormResponsibleUser
+            :readonly="!state.isEdit"
+            class="surface-1"
+            v-model:responsible-user-local="formData.responsibleUserLocal"
+            v-model:responsible-user-id="formData.responsibleUserId"
+            :district-id="responsibleAreaDistrictId"
+          />
+        </q-form>
       </section>
     </main>
   </q-expansion-item>