feat: enhance request action handling with form data and product filtering

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

@@ -19,7 +19,13 @@ defineProps<{
 }>();
 
 defineEmits<{
-  (e: 'submit'): void;
+  (
+    e: 'submit',
+    data: {
+      form: { responsibleUserLocal: boolean; responsibleUserId: string };
+      selected: { _work: RequestWork }[];
+    },
+  ): void;
 }>();
 
 enum Step {
@@ -58,6 +64,7 @@ function prev() {
               $t('menu.product'),
               $t('requestList.action.configure'),
             ]"
+            :key="i"
           >
             <span class="step" :class="{ ['step__active']: step > i }">
               <span class="step-outer"><span class="step-inner" /></span>
@@ -150,7 +157,7 @@ function prev() {
           v-if="step === Step.Configure"
           id="btn-save"
           solid
-          @click="$emit('submit')"
+          @click="$emit('submit', { form, selected })"
         />
       </div>
     </template>

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

@@ -11,9 +11,10 @@ import PropertiesExpansion from './PropertiesExpansion.vue';
 import FormGroupHead from './FormGroupHead.vue';
 import AvatarGroup from 'src/components/shared/AvatarGroup.vue';
 import { StateButton } from 'components/button';
-import { CancelButton } from 'components/button';
+import { CancelButton, MainButton } from 'components/button';
 import DutyExpansion from './DutyExpansion.vue';
 import MessengerExpansion from './MessengerExpansion.vue';
+import RequestAction from './RequestAction.vue';
 
 // NOTE: Store
 import {
@@ -68,9 +69,41 @@ const statusFile = ref<Attributes>({
 const refDocumentExpansion = ref<InstanceType<typeof DocumentExpansion>[]>([]);
 const data = ref<RequestData>();
 const flow = ref<WorkflowTemplate>();
+const productsList = computed(() =>
+  workList.value
+    ?.filter((v) =>
+      v.productService.work?.attributes.workflowStep?.[
+        pageState.currentStep - 1
+      ]?.productsId.includes(v.productService.productId),
+    )
+    .map((v) => {
+      const _props =
+        v.productService.work?.attributes?.workflowStep[
+          pageState.currentStep - 1
+        ]?.attributes?.properties;
+      return Object.assign(v, {
+        _documentExpansion: _props.some(
+          (v: PropVariant) => v.fieldName === 'documentCheck',
+        ),
+        _formExpansion: _props.some(
+          (v: PropVariant) => v.fieldName === 'designForm',
+        ),
+        _dutyExpansion: _props.some((v: PropVariant) => v.fieldName === 'duty'),
+        _messengerExpansion: _props.some(
+          (v: PropVariant) => v.fieldName === 'messenger',
+        ),
+      });
+    })
+    .sort(
+      (lhs, rhs) =>
+        lhs.productService.installmentNo - rhs.productService.installmentNo,
+    ),
+);
+
 const pageState = reactive({
   hideMetaData: false,
   currentStep: 1,
+  requestActionDialog: false,
 });
 
 // NOTE: Function
@@ -342,6 +375,31 @@ function closeTab() {
     cancel: () => {},
   });
 }
+
+function openRequestAction() {
+  pageState.requestActionDialog = true;
+}
+
+async function submitRequestAction(data: {
+  form: { responsibleUserLocal: boolean; responsibleUserId: string };
+  selected: { _work: RequestWork }[];
+}) {
+  const requestWorksId = data.selected.map((s) => s._work.id);
+
+  const res = await requestListStore.actionRequestWork(
+    route.params['requestListId'] as string,
+    pageState.currentStep,
+    requestWorksId.map((v) => ({
+      responsibleUserId: data.form.responsibleUserId,
+      responsibleUserLocal: data.form.responsibleUserLocal,
+      requestWorkId: v!,
+    })),
+  );
+  if (res) {
+    await getData();
+    pageState.requestActionDialog = false;
+  }
+}
 </script>
 <template>
   <div class="column surface-0 fullscreen" v-if="data">
@@ -671,40 +729,7 @@ function closeTab() {
             </transition>
           </article>
           <!-- product -->
-          <template
+          <template v-for="(value, index) in productsList" :key="value">
-            v-for="(value, index) in workList
-              ?.filter((v) =>
-                v.productService.work?.attributes.workflowStep?.[
-                  pageState.currentStep - 1
-                ]?.productsId.includes(v.productService.productId),
-              )
-              .map((v) => {
-                const _props =
-                  v.productService.work?.attributes?.workflowStep[
-                    pageState.currentStep - 1
-                  ]?.attributes?.properties;
-                return Object.assign(v, {
-                  _documentExpansion: _props.some(
-                    (v: PropVariant) => v.fieldName === 'documentCheck',
-                  ),
-                  _formExpansion: _props.some(
-                    (v: PropVariant) => v.fieldName === 'designForm',
-                  ),
-                  _dutyExpansion: _props.some(
-                    (v: PropVariant) => v.fieldName === 'duty',
-                  ),
-                  _messengerExpansion: _props.some(
-                    (v: PropVariant) => v.fieldName === 'messenger',
-                  ),
-                });
-              })
-              .sort(
-                (lhs, rhs) =>
-                  lhs.productService.installmentNo -
-                  rhs.productService.installmentNo,
-              )"
-            :key="value"
-          >
             <ProductExpansion
               :cancel="data.requestDataStatus === RequestDataStatus.Canceled"
               :readonly="
@@ -873,13 +898,34 @@ function closeTab() {
     </main>
 
     <!-- SEC: Footer -->
-    <footer class="surface-1 q-pa-md full-width text-right">
+    <footer
+      class="surface-1 q-pa-md full-width row justify-end"
+      style="gap: var(--size-2)"
+    >
       <CancelButton
+        outlined
         @click="closeTab()"
         :label="$t('dialog.action.close')"
-        outlined
       />
+      <MainButton
+        v-if="productsList.some((v) => v._messengerExpansion)"
+        solid
+        icon="mdi-account-outline"
+        color="207 96% 32%"
+        @click="openRequestAction"
+      >
+        {{
+          $t('general.manage', { text: $t('requestList.employeeMessenger') })
+        }}
+      </MainButton>
     </footer>
   </div>
+
+  <RequestAction
+    v-model="pageState.requestActionDialog"
+    :work="workList"
+    :responsible-district-id="data?.quotation.customerBranch.districtId || ''"
+    @submit="submitRequestAction"
+  />
 </template>
 <style scoped></style>