From a19e75e17ddde8d5aad1f3c1d577e1a4cc0be7ea Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Wed, 8 Jan 2025 11:50:07 +0700
Subject: [PATCH] feat: integrate request data into PropertiesExpansion for
 enhanced form handling

---
 .../08_request-list/PropertiesExpansion.vue    | 18 ++++++++++++++++--
 src/pages/08_request-list/RequestListView.vue  |  1 +
 2 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/src/pages/08_request-list/PropertiesExpansion.vue b/src/pages/08_request-list/PropertiesExpansion.vue
index d5641519..48a6785a 100644
--- a/src/pages/08_request-list/PropertiesExpansion.vue
+++ b/src/pages/08_request-list/PropertiesExpansion.vue
@@ -11,11 +11,14 @@ import {
   PropString,
 } from 'src/stores/product-service/types';
 
-import { Attributes } from 'src/stores/request-list/types';
+import { Attributes, RequestData } from 'src/stores/request-list/types';
 
+import { getCustomerName } from 'src/stores/utils';
 import useOptionStore from 'src/stores/options';
 import { useRequestList } from 'src/stores/request-list';
+import { useI18n } from 'vue-i18n';
 
+const { locale } = useI18n();
 const optionStore = useOptionStore();
 const requestListStore = useRequestList();
 
@@ -24,6 +27,7 @@ const props = withDefaults(
     id: string;
     readonly?: boolean;
     propertiesToShow: (PropString | PropNumber | PropDate | PropOptions)[];
+    requestListData: RequestData;
   }>(),
   {
     id: '',
@@ -31,6 +35,8 @@ const props = withDefaults(
   },
 );
 
+const readonlyField = ['quotationNo', 'contactPerson', 'telephone', 'employer'];
+
 const formRemark = ref<string>('');
 const formData = ref<{
   [field: string]: string | number | null | undefined;
@@ -77,10 +83,18 @@ function triggerEdit() {
 }
 
 function assignToForm() {
+  const requestData = props.requestListData;
   formRemark.value = attributes.value?.remark || '';
   formData.value = JSON.parse(
     JSON.stringify(attributes.value?.properties || {}),
   );
+  formData.value['quotationNo'] = requestData.quotation.code;
+  formData.value['contactPerson'] = requestData.quotation.contactName;
+  formData.value['telephone'] = requestData.quotation.contactTel;
+  formData.value['employer'] = getCustomerName(
+    requestData.quotation.customerBranch,
+    { locale: locale.value },
+  );
 }
 
 defineEmits<{
@@ -143,7 +157,7 @@ defineEmits<{
             {{ i + 1 }} {{ optionStore.mapOption(prop.fieldName) }}
           </article>
           <PropertiesToInput
-            :readonly="!state.isEdit"
+            :readonly="!state.isEdit || readonlyField.includes(prop.fieldName)"
             :prop="prop"
             :placeholder="optionStore.mapOption(prop.fieldName)"
             v-model="formData[prop.fieldName]"
diff --git a/src/pages/08_request-list/RequestListView.vue b/src/pages/08_request-list/RequestListView.vue
index 6e85746f..f2edf357 100644
--- a/src/pages/08_request-list/RequestListView.vue
+++ b/src/pages/08_request-list/RequestListView.vue
@@ -816,6 +816,7 @@ function goToQuotation(
                     "
                   />
                   <PropertiesExpansion
+                    :request-list-data="data"
                     :id="value.id"
                     :readonly="
                       data.requestDataStatus === RequestDataStatus.Canceled