refactor: store data in field instead of attribute

src/pages/08_request-list/FormDuty.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-const duty = defineModel<boolean>('duty', { required: true });
+const duty = defineModel<boolean>('duty', { required: false });
 const dutyCost = defineModel<number>('dutyCost', { required: false });
 
 withDefaults(

src/pages/08_request-list/FormExpansion.vue

@@ -3,7 +3,7 @@ import { reactive, ref } from 'vue';
 import FormGroupHead from './FormGroupHead.vue';
 import FormDuty from './FormDuty.vue';
 import FormIssue from './FormIssue.vue';
-import FormEmployee from './FormEmployee.vue';
+import FormResponsibleUser from './FormResponsibleUser.vue';
 
 import { UndoButton, SaveButton, EditButton } from 'src/components/button';
 import { AttributesForm, Step } from 'src/stores/request-list/types';
@@ -25,8 +25,8 @@ const defaultForm = {
   customerDutyCost: 30,
   companyDuty: false,
   companyDutyCost: 30,
-  localEmployee: true,
-  employeeId: '',
+  responsibleUserLocal: true,
+  responsibleUserId: '',
   individualDuty: false,
   individualDutyCost: 10,
 };
@@ -37,8 +37,8 @@ const attributesForm = defineModel<AttributesForm>('attributesForm', {
     customerDutyCost: 30,
     companyDuty: false,
     companyDutyCost: 30,
-    localEmployee: true,
-    employeeId: '',
+    responsibleUserLocal: true,
+    responsibleUserId: '',
     individualDuty: false,
     individualDutyCost: 10,
   },
@@ -55,7 +55,8 @@ function triggerUndo() {
 async function triggerSubmit() {
   const payload = {
     ...props.step,
-    attributes: { form: formData.value },
+    ...formData.value,
+    attributes: {},
   };
   const res = await requestListStore.editStatusRequestWork(payload);
 
@@ -150,11 +151,11 @@ function assignToForm() {
             $t('general.select', { msg: $t('requestList.employeeMessenger') })
           }}
         </FormGroupHead>
-        <FormEmployee
+        <FormResponsibleUser
           :readonly="!state.isEdit"
           class="surface-1"
-          v-model:local-employee="formData.localEmployee"
-          v-model:employee-id="formData.employeeId"
+          v-model:responsible-user-local="formData.responsibleUserLocal"
+          v-model:responsible-user-id="formData.responsibleUserId"
           :district-id="responsibleAreaDistrictId"
         />
       </section>

src/pages/08_request-list/FormResponsibleUser.vue

@@ -2,8 +2,12 @@
 import SelectUser from 'src/components/shared/select/SelectUser.vue';
 import { watch } from 'vue';
 
-const localEmployee = defineModel<boolean>('localEmployee', { required: true });
-const employeeId = defineModel<string>('employeeId', { required: false });
+const responsibleUserLocal = defineModel<boolean>('responsibleUserLocal', {
+  required: false,
+});
+const responsibleUserId = defineModel<string>('responsibleUserId', {
+  required: false,
+});
 
 defineProps<{
   readonly?: boolean;
@@ -11,22 +15,22 @@ defineProps<{
   cost?: boolean;
 }>();
 
-watch(localEmployee, (lhs, rhs) => {
-  if (lhs && !rhs) employeeId.value = '';
+watch(responsibleUserLocal, (lhs, rhs) => {
+  if (lhs && !rhs) responsibleUserId.value = '';
 });
 </script>
 <template>
   <div class="row items-center q-px-md q-py-xs">
     <div class="col-12 row">
       <q-radio
-        v-model="localEmployee"
+        v-model="responsibleUserLocal"
         :val="true"
         :label="$t('requestList.localEmployee')"
         :disable="readonly"
         class="col"
       />
       <q-radio
-        v-model="localEmployee"
+        v-model="responsibleUserLocal"
         :val="false"
         :label="$t('requestList.nonLocalEmployee')"
         :disable="readonly"
@@ -38,12 +42,12 @@ watch(localEmployee, (lhs, rhs) => {
 
     <div class="col-12 row">
       <SelectUser
-        :key="localEmployee.toString()"
+        :key="responsibleUserLocal.toString()"
         class="col-md-5 col-12"
-        v-model:value="employeeId"
+        v-model:value="responsibleUserId"
         :params="{
           userType: 'MESSENGER',
-          responsibleDistrictId: localEmployee ? districtId : undefined,
+          responsibleDistrictId: responsibleUserLocal ? districtId : undefined,
         }"
         :readonly
         :label="$t('general.select', { msg: $t('personnel.MESSENGER') })"

src/pages/08_request-list/RequestListView.vue

@@ -722,8 +722,7 @@ function isInstallmentPaySuccess(installmentNo: number) {
                     }"
                     :id="value.id"
                     :attributes-form="
-                      value.stepStatus?.[pageState.currentStep - 1]?.attributes
-                        ?.form
+                      value.stepStatus?.[pageState.currentStep - 1]
                     "
                     :responsible-area-district-id="
                       data.quotation.customerBranch.districtId

src/stores/request-list/index.ts

@@ -240,8 +240,16 @@ export const useRequestList = defineStore('request-list', () => {
     const res = await api.put<Step>(
       `/request-work/${body.requestWorkId}/step-status/${body.step}`,
       {
+        customerDuty: body.customerDuty,
+        customerDutyCost: body.customerDutyCost,
+        companyDuty: body.customerDuty,
+        companyDutyCost: body.companyDutyCost,
+        individualDuty: body.individualDuty,
+        individualDutyCost: body.individualDutyCost,
+        responsibleUserLocal: body.responsibleUserLocal,
+        responsibleUserId: body.responsibleUserId,
         attributes: body.attributes,
-        requestWorkStatus: body.workStatus,
+        workStatus: body.workStatus,
         requestWorkId: undefined,
         step: undefined,
       },

src/stores/request-list/types.ts

@@ -72,14 +72,14 @@ export type Attributes = {
 };
 
 export type AttributesForm = {
-  customerDuty: boolean;
+  customerDuty?: boolean;
   customerDutyCost?: number;
-  companyDuty: boolean;
+  companyDuty?: boolean;
   companyDutyCost?: number;
-  localEmployee: boolean;
-  employeeId?: string;
-  individualDuty: boolean;
+  individualDuty?: boolean;
   individualDutyCost?: number;
+  responsibleUserLocal?: boolean;
+  responsibleUserId?: string;
 };
 
 export type Step = {
@@ -87,4 +87,12 @@ export type Step = {
   requestWorkId: string;
   workStatus?: RequestWorkStatus;
   step: number;
+  customerDuty?: boolean;
+  customerDutyCost?: number;
+  companyDuty?: boolean;
+  companyDutyCost?: number;
+  individualDuty?: boolean;
+  individualDutyCost?: number;
+  responsibleUserLocal?: boolean;
+  responsibleUserId?: string;
 };