From 6e796049d5a88c5846c0edef4302274221bf522b Mon Sep 17 00:00:00 2001
From: Methapon Metanipat <162551568+Methapon-Frappet@users.noreply.github.com>
Date: Wed, 13 Nov 2024 16:06:32 +0700
Subject: [PATCH] refactor: package workflow (#73)

* fix: service attributes type

* feat: select workflow component

* refactor: dialog properties => select work flow

* refactor: package => work new workflow step

* fix: useless  in future (service properties)

* fix: handle work undefine

---------

Co-authored-by: puriphatt <puriphat@frappet.com>
---
 .../04_product-service/FormServiceWork.vue    |  22 ++-
 .../04_product-service/ServiceProperties.vue  |  74 ++++-----
 .../WorkManagementComponent.vue               | 110 ++++---------
 src/components/dialog/DialogProperties.vue    |  88 +++++++++-
 src/components/shared/select/SelectFlow.vue   | 107 ++++++++++++
 src/pages/04_product-service/MainPage.vue     | 152 ++++++++++++------
 src/stores/product-service/types.ts           |   8 +-
 7 files changed, 374 insertions(+), 187 deletions(-)
 create mode 100644 src/components/shared/select/SelectFlow.vue

diff --git a/src/components/04_product-service/FormServiceWork.vue b/src/components/04_product-service/FormServiceWork.vue
index 0df814f1..8ba05f21 100644
--- a/src/components/04_product-service/FormServiceWork.vue
+++ b/src/components/04_product-service/FormServiceWork.vue
@@ -1,17 +1,20 @@
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n';
 import { moveItemUp, moveItemDown, deleteItem, dialog } from 'stores/utils';
+import { nextTick, ref, watch } from 'vue';
+
+import { WorkflowTemplate } from 'src/stores/workflow-template/types';
+import { ServiceCreate, WorkItems } from 'stores/product-service/types';
 
 import NoData from 'components/NoData.vue';
 import WorkManagementComponent from './WorkManagementComponent.vue';
 import AddButton from '../button/AddButton.vue';
-import { ServiceCreate, WorkItems } from 'stores/product-service/types';
 import TreeView from '../shared/TreeView.vue';
-import { nextTick, ref, watch } from 'vue';
 
 const { t } = useI18n();
 
 const workItems = defineModel<WorkItems[]>('workItems', { default: [] });
+const workflow = defineModel<WorkflowTemplate>('workflow');
 
 const props = defineProps<{
   service?: ServiceCreate;
@@ -75,11 +78,20 @@ async function addWork() {
     id: '',
     name: '',
     attributes: {
-      workflowName: '',
+      workflowStep: workflow.value?.step
+        ? JSON.parse(
+            JSON.stringify(
+              workflow.value.step.map((step) => ({
+                name: step.name,
+                attributes: step.attributes,
+                productsId: [],
+              })),
+            ),
+          )
+        : [],
       additional: [],
       showTotalPrice: false,
-      stepProperties: [],
-      workflowId: '',
+      workflowId: workflow.value ? workflow.value.id : '',
     },
     product: [],
   });
diff --git a/src/components/04_product-service/ServiceProperties.vue b/src/components/04_product-service/ServiceProperties.vue
index 76e72ffc..6d84125f 100644
--- a/src/components/04_product-service/ServiceProperties.vue
+++ b/src/components/04_product-service/ServiceProperties.vue
@@ -65,16 +65,16 @@ function manageProperties(
 ) {
   if (property === 'all' && propertiesOption.value) {
     if (
-      formServiceProperties.value.stepProperties[stepIndex].attributes
+      formServiceProperties.value.stepProperties[stepIndex].properties
         .length === propertiesOption.value.length
     ) {
-      formServiceProperties.value.stepProperties[stepIndex].attributes = [];
+      formServiceProperties.value.stepProperties[stepIndex].properties = [];
       return;
     }
 
     for (const ops of propertiesOption.value) {
       if (
-        formServiceProperties.value.stepProperties[stepIndex].attributes.some(
+        formServiceProperties.value.stepProperties[stepIndex].properties.some(
           (prop) => prop.fieldName === ops.value,
         )
       ) {
@@ -82,14 +82,14 @@ function manageProperties(
       }
 
       if (ops.type === 'date') {
-        formServiceProperties.value.stepProperties[stepIndex].attributes.push({
+        formServiceProperties.value.stepProperties[stepIndex].properties.push({
           type: ops.type,
           fieldName: ops.value,
         });
       }
 
       if (ops.type === 'array') {
-        formServiceProperties.value.stepProperties[stepIndex].attributes.push({
+        formServiceProperties.value.stepProperties[stepIndex].properties.push({
           type: ops.type,
           fieldName: ops.value,
           options: [],
@@ -97,7 +97,7 @@ function manageProperties(
       }
 
       if (ops.type === 'string') {
-        formServiceProperties.value.stepProperties[stepIndex].attributes.push({
+        formServiceProperties.value.stepProperties[stepIndex].properties.push({
           type: ops.type,
           fieldName: ops.value,
           isPhoneNumber: false,
@@ -106,7 +106,7 @@ function manageProperties(
       }
 
       if (ops.type === 'number') {
-        formServiceProperties.value.stepProperties[stepIndex].attributes.push({
+        formServiceProperties.value.stepProperties[stepIndex].properties.push({
           type: ops.type,
           fieldName: ops.value,
           comma: false,
@@ -118,26 +118,26 @@ function manageProperties(
     return;
   }
 
-  if (formServiceProperties.value.stepProperties[stepIndex].attributes) {
+  if (formServiceProperties.value.stepProperties[stepIndex].properties) {
     const propertyIndex = formServiceProperties.value.stepProperties[
       stepIndex
-    ].attributes.findIndex((prop) => prop.fieldName === property);
+    ].properties.findIndex((prop) => prop.fieldName === property);
 
     if (propertyIndex !== -1) {
-      formServiceProperties.value.stepProperties[stepIndex].attributes.splice(
+      formServiceProperties.value.stepProperties[stepIndex].properties.splice(
         propertyIndex,
         1,
       );
     } else {
       if (propertyType === 'date') {
-        formServiceProperties.value.stepProperties[stepIndex].attributes.push({
+        formServiceProperties.value.stepProperties[stepIndex].properties.push({
           type: propertyType,
           fieldName: property,
         });
       }
 
       if (propertyType === 'array') {
-        formServiceProperties.value.stepProperties[stepIndex].attributes.push({
+        formServiceProperties.value.stepProperties[stepIndex].properties.push({
           type: propertyType,
           fieldName: property,
           options: [],
@@ -145,7 +145,7 @@ function manageProperties(
       }
 
       if (propertyType === 'string') {
-        formServiceProperties.value.stepProperties[stepIndex].attributes.push({
+        formServiceProperties.value.stepProperties[stepIndex].properties.push({
           type: propertyType,
           fieldName: property,
           isPhoneNumber: false,
@@ -154,7 +154,7 @@ function manageProperties(
       }
 
       if (propertyType === 'number') {
-        formServiceProperties.value.stepProperties[stepIndex].attributes.push({
+        formServiceProperties.value.stepProperties[stepIndex].properties.push({
           type: propertyType,
           fieldName: property,
           comma: false,
@@ -167,9 +167,9 @@ function manageProperties(
 }
 
 function shouldShowItem(opt: Option, stepIndex: number) {
-  if (formServiceProperties.value.stepProperties[stepIndex].attributes) {
+  if (formServiceProperties.value.stepProperties[stepIndex].properties) {
     const additionalFieldNames = new Set(
-      formServiceProperties.value.stepProperties[stepIndex].attributes.map(
+      formServiceProperties.value.stepProperties[stepIndex].properties.map(
         (o) => o.fieldName,
       ),
     );
@@ -188,19 +188,19 @@ function changeType(fieldName: string, stepIndex: number) {
 
   const idx = formServiceProperties.value.stepProperties[
     stepIndex
-  ].attributes.findIndex((v) => v.fieldName === fieldName);
+  ].properties.findIndex((v) => v.fieldName === fieldName);
 
   if (!idx) return;
 
   if (defaultPropType === 'date') {
-    formServiceProperties.value.stepProperties[stepIndex].attributes.push({
+    formServiceProperties.value.stepProperties[stepIndex].properties.push({
       type: defaultPropType,
       fieldName,
     });
   }
 
   if (defaultPropType === 'array') {
-    formServiceProperties.value.stepProperties[stepIndex].attributes.push({
+    formServiceProperties.value.stepProperties[stepIndex].properties.push({
       type: defaultPropType,
       fieldName,
       options: [],
@@ -208,7 +208,7 @@ function changeType(fieldName: string, stepIndex: number) {
   }
 
   if (defaultPropType === 'string') {
-    formServiceProperties.value.stepProperties[stepIndex].attributes.push({
+    formServiceProperties.value.stepProperties[stepIndex].properties.push({
       type: defaultPropType,
       fieldName,
       isPhoneNumber: false,
@@ -217,7 +217,7 @@ function changeType(fieldName: string, stepIndex: number) {
   }
 
   if (defaultPropType === 'number') {
-    formServiceProperties.value.stepProperties[stepIndex].attributes.push({
+    formServiceProperties.value.stepProperties[stepIndex].properties.push({
       type: defaultPropType,
       fieldName,
       comma: false,
@@ -298,7 +298,7 @@ watch(
       formServiceProperties.value.stepProperties.push({
         id: s.id,
         productsId: [],
-        attributes: [],
+        properties: [],
       });
     });
   },
@@ -366,7 +366,7 @@ watch(
             <q-list
               dense
               v-if="
-                formServiceProperties?.stepProperties[stepIndex].attributes &&
+                formServiceProperties?.stepProperties[stepIndex].properties &&
                 propertiesOption
               "
             >
@@ -380,7 +380,7 @@ watch(
                   <q-icon
                     v-if="
                       formServiceProperties?.stepProperties[stepIndex]
-                        .attributes.length === propertiesOption.length
+                        .properties.length === propertiesOption.length
                     "
                     name="mdi-checkbox-marked"
                     size="xs"
@@ -412,7 +412,7 @@ watch(
                       formServiceProperties?.stepProperties[stepIndex] &&
                       formServiceProperties?.stepProperties[
                         stepIndex
-                      ].attributes.some((add) => add.fieldName === ops.value)
+                      ].properties.some((add) => add.fieldName === ops.value)
                     "
                     name="mdi-checkbox-marked"
                     size="xs"
@@ -443,19 +443,19 @@ watch(
           <div
             v-for="(p, index) in formServiceProperties?.stepProperties[
               stepIndex
-            ].attributes"
+            ].properties"
             :key="index"
             class="bordered surface-1 rounded q-py-sm q-px-md row items-start"
             :class="{
               'q-mt-md': index === 0,
               'q-mb-sm':
                 index !==
-                formServiceProperties.stepProperties[stepIndex].attributes
+                formServiceProperties.stepProperties[stepIndex].properties
                   .length -
                   1,
               'q-mb-md':
                 index ===
-                formServiceProperties.stepProperties[stepIndex].attributes
+                formServiceProperties.stepProperties[stepIndex].properties
                   .length -
                   1,
             }"
@@ -472,7 +472,7 @@ watch(
                 style="color: hsl(var(--text-mute-2))"
                 @click="
                   moveItemUp(
-                    formServiceProperties.stepProperties[stepIndex].attributes,
+                    formServiceProperties.stepProperties[stepIndex].properties,
                     index,
                   )
                 "
@@ -486,14 +486,14 @@ watch(
                 :size="$q.screen.xs ? 'xs' : ''"
                 :disable="
                   index ===
-                  formServiceProperties.stepProperties[stepIndex].attributes
+                  formServiceProperties.stepProperties[stepIndex].properties
                     .length -
                     1
                 "
                 style="color: hsl(var(--text-mute-2))"
                 @click="
                   moveItemDown(
-                    formServiceProperties.stepProperties[stepIndex].attributes,
+                    formServiceProperties.stepProperties[stepIndex].properties,
                     index,
                   )
                 "
@@ -552,13 +552,13 @@ watch(
                   (t: 'string' | 'number' | 'date' | 'array') => {
                     if (
                       !formServiceProperties.stepProperties[stepIndex]
-                        .attributes
+                        .properties
                     )
                       return;
                     if (t === 'date') {
                       formServiceProperties.stepProperties[
                         stepIndex
-                      ].attributes[index] = {
+                      ].properties[index] = {
                         type: t,
                         fieldName: p.fieldName,
                       };
@@ -567,7 +567,7 @@ watch(
                     if (t === 'array') {
                       formServiceProperties.stepProperties[
                         stepIndex
-                      ].attributes[index] = {
+                      ].properties[index] = {
                         type: t,
                         fieldName: p.fieldName,
                         options: [],
@@ -577,7 +577,7 @@ watch(
                     if (t === 'string') {
                       formServiceProperties.stepProperties[
                         stepIndex
-                      ].attributes[index] = {
+                      ].properties[index] = {
                         type: t,
                         fieldName: p.fieldName,
                         isPhoneNumber: false,
@@ -588,7 +588,7 @@ watch(
                     if (t === 'number') {
                       formServiceProperties.stepProperties[
                         stepIndex
-                      ].attributes[index] = {
+                      ].properties[index] = {
                         type: t,
                         fieldName: p.fieldName,
                         comma: false,
@@ -786,7 +786,7 @@ watch(
               class="q-ml-sm"
               @click="
                 confirmDelete(
-                  formServiceProperties.stepProperties[stepIndex].attributes,
+                  formServiceProperties.stepProperties[stepIndex].properties,
                   index,
                 )
               "
diff --git a/src/components/04_product-service/WorkManagementComponent.vue b/src/components/04_product-service/WorkManagementComponent.vue
index 61f67b41..edfe403c 100644
--- a/src/components/04_product-service/WorkManagementComponent.vue
+++ b/src/components/04_product-service/WorkManagementComponent.vue
@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-import { QSelect } from 'quasar';
 import { storeToRefs } from 'pinia';
 import { Icon } from '@iconify/vue';
 import { onMounted, ref, watch } from 'vue';
@@ -9,9 +8,7 @@ import useProductServiceStore from 'stores/product-service';
 import { formatNumberDecimal } from 'stores/utils';
 import { useWorkflowTemplate } from 'src/stores/workflow-template';
 import { Attributes, Product } from 'stores/product-service/types';
-import { WorkflowTemplate } from 'src/stores/workflow-template/types';
 
-import SelectInput from '../shared/SelectInput.vue';
 import NoData from '../NoData.vue';
 import { AddButton } from '../button';
 
@@ -23,7 +20,6 @@ const workflowStore = useWorkflowTemplate();
 const { fetchListOfWork } = productServiceStore;
 const { splitPay, workNameItems } = storeToRefs(productServiceStore);
 
-const { getWorkflowTemplateList } = workflowStore;
 const { data: workflowData } = storeToRefs(workflowStore);
 
 const props = withDefaults(
@@ -72,48 +68,6 @@ defineEmits<{
   (e: 'workProperties'): void;
 }>();
 
-function mapFlowName(id: string): string {
-  if (!id) return workName.value || '';
-  const targetFlow = workflowData.value.find((w) => w.id === id);
-  // workName.value = targetFlow?.name;
-  return targetFlow?.name || attributes.value.workflowName || '';
-}
-
-function mapStepName(id: string) {
-  const targetFlow = workflowData.value.find(
-    (w) => w.id === attributes.value.workflowId,
-  );
-  if (!targetFlow) return;
-  const name = targetFlow.step.find((s) => s.id === id)?.name;
-  return name || '-';
-}
-
-function selectFlow(workflow: WorkflowTemplate) {
-  workName.value = workflow.name;
-  attributes.value.workflowId = workflow.id;
-  attributes.value.workflowName = workflow.name;
-  attributes.value.stepProperties = workflow.step.map((s) => ({
-    id: s.id,
-    attributes: [],
-    productsId: [],
-  }));
-}
-
-async function filter(val: string, update: (...args: unknown[]) => void) {
-  update(
-    async () => {
-      await fetchWorkflowOption(val);
-    },
-
-    (ref: QSelect) => {
-      if (val !== '' && ref.options && ref.options?.length > 0) {
-        ref.setOptionIndex(-1);
-        ref.moveOptionSelection(1, true);
-      }
-    },
-  );
-}
-
 async function fetchWorkflowOption(val?: string) {
   const res = await workflowStore.getWorkflowTemplateList({
     query: val,
@@ -123,13 +77,12 @@ async function fetchWorkflowOption(val?: string) {
 }
 
 function toggleCheckProductInStep(id: string, stepIndex: number) {
-  const index =
-    attributes.value.stepProperties[stepIndex].productsId.indexOf(id);
+  const index = attributes.value.workflowStep[stepIndex].productsId.indexOf(id);
 
-  if (!attributes.value.stepProperties[stepIndex].productsId.includes(id)) {
-    attributes.value.stepProperties[stepIndex].productsId.push(id);
+  if (!attributes.value.workflowStep[stepIndex].productsId.includes(id)) {
+    attributes.value.workflowStep[stepIndex].productsId.push(id);
   } else {
-    attributes.value.stepProperties[stepIndex].productsId.splice(index, 1);
+    attributes.value.workflowStep[stepIndex].productsId.splice(index, 1);
   }
 }
 
@@ -160,7 +113,7 @@ watch(
   () => attributes.value.workflowId,
   () => {
     if (props.readonly) return;
-    attributes.value.stepProperties.forEach((s) => {
+    attributes.value.workflowStep.forEach((s) => {
       s.productsId = productItems.value.map((p) => p.id);
     });
   },
@@ -582,29 +535,33 @@ watch(
               </div>
             </template>
             <div class="q-py-md q-px-md full-width column">
-              <span
-                v-if="
-                  attributes.stepProperties?.length === 0 ||
-                  !attributes.stepProperties
-                "
-                class="app-text-muted"
-              >
-                {{ $t('flow.noProcessStep') }}
+              <span class="app-text-muted">
+                {{
+                  !attributes.workflowId
+                    ? $t('general.no', { msg: $t('flow.title') })
+                    : attributes.workflowStep?.length === 0
+                      ? $t('flow.noProcessStep')
+                      : attributes.workflowStep?.every(
+                            (s) => !s.attributes.properties?.length,
+                          )
+                        ? $t('productService.service.noPropertiesYet')
+                        : ''
+                }}
               </span>
 
               <template
-                v-for="(step, stepIndex) in attributes.stepProperties"
-                :key="step.id"
+                v-for="(step, stepIndex) in attributes.workflowStep"
+                :key="stepIndex"
               >
                 <span
                   v-if="
-                    attributes.stepProperties?.length > 0 &&
-                    step.attributes.length > 0
+                    attributes.workflowStep[stepIndex].attributes.properties
+                      .length > 0
                   "
                 >
                   <q-icon name="mdi-circle-medium" />
                   {{ $t('flow.stepNo', { msg: stepIndex + 1 }) }}:
-                  {{ mapStepName(step.id) }}
+                  {{ step.name }}
 
                   <!-- step att -->
                   <section
@@ -612,13 +569,13 @@ watch(
                   >
                     <div
                       v-if="
-                        attributes.stepProperties[stepIndex].attributes.length >
-                        0
+                        attributes.workflowStep[stepIndex].attributes.properties
+                          .length > 0
                       "
                       class="row q-gutter-sm"
                     >
                       <span
-                        v-for="(att, i) in step.attributes"
+                        v-for="(att, i) in step.attributes.properties"
                         :key="i"
                         class="surface-2 bordered rounded q-px-xs"
                       >
@@ -635,7 +592,7 @@ watch(
                     class="q-pt-sm q-pl-lg column"
                     :class="{
                       'q-pb-sm':
-                        stepIndex !== attributes.stepProperties.length - 1,
+                        stepIndex !== attributes.workflowStep.length - 1,
                     }"
                   >
                     <span class="app-text-muted-2 text-caption">
@@ -652,9 +609,10 @@ watch(
                     >
                       <div v-for="product in productItems" :key="product.id">
                         <q-checkbox
+                          v-if="attributes.workflowStep[stepIndex].productsId"
                           :disable="readonly"
                           :model-value="
-                            attributes.stepProperties[
+                            attributes.workflowStep[
                               stepIndex
                             ].productsId.includes(product.id)
                           "
@@ -675,18 +633,6 @@ watch(
                   </section>
                 </span>
               </template>
-
-              <span
-                v-if="
-                  attributes.workflowId &&
-                  attributes.stepProperties?.every(
-                    (s) => s.attributes.length === 0,
-                  )
-                "
-                class="app-text-muted"
-              >
-                {{ $t('productService.service.noPropertiesYet') }}
-              </span>
             </div>
           </q-expansion-item>
           <!-- <div class="q-py-md q-px-md full-width">
diff --git a/src/components/dialog/DialogProperties.vue b/src/components/dialog/DialogProperties.vue
index 63525138..e6931ca3 100644
--- a/src/components/dialog/DialogProperties.vue
+++ b/src/components/dialog/DialogProperties.vue
@@ -4,27 +4,41 @@ import { moveItemUp, moveItemDown, dialog, deleteItem } from 'stores/utils';
 import { useI18n } from 'vue-i18n';
 
 import useOptionStore from 'src/stores/options';
+import { useWorkflowTemplate } from 'src/stores/workflow-template';
 import { Option } from 'stores/options/types';
+import {
+  WorkFlowPayloadStep,
+  WorkflowTemplate,
+} from 'src/stores/workflow-template/types';
 
+import SelectFlow from '../shared/select/SelectFlow.vue';
 import NoData from '../NoData.vue';
 import DialogForm from '../DialogForm.vue';
-import { WorkFlowPayloadStep } from 'src/stores/workflow-template/types';
 
 const { t } = useI18n();
+const { getWorkflowTemplate } = useWorkflowTemplate();
 const optionStore = useOptionStore();
 
 const props = defineProps<{
   stepIndex?: number;
+
+  selectFlow?: boolean;
+}>();
+
+const emit = defineEmits<{
+  (e: 'submit', currWorkflow: WorkflowTemplate): void;
 }>();
 
 const model = defineModel<boolean>({ required: true, default: false });
+const workflowId = defineModel<string>('workflowId', { default: '' });
 const dataStep = defineModel<WorkFlowPayloadStep[]>('dataStep', {
-  required: true,
   default: [],
 });
 
 const tempStep = ref<WorkFlowPayloadStep[]>([]);
+const tempWorkflowId = ref<string>('');
 const propertiesOption = ref();
+const currWorkflow = ref<WorkflowTemplate>();
 const typeOption = [
   {
     label: 'Text',
@@ -53,9 +67,13 @@ const typeOption = [
 ];
 
 function submit() {
+  workflowId.value = tempWorkflowId.value;
   dataStep.value = JSON.parse(JSON.stringify(tempStep.value));
-
   model.value = false;
+
+  if (props.selectFlow && currWorkflow.value) {
+    emit('submit', currWorkflow.value);
+  }
 }
 
 function close() {
@@ -241,12 +259,37 @@ function confirmDelete(items: unknown[], index: number) {
   });
 }
 
+function assignTemp() {
+  propertiesOption.value = optionStore.globalOption?.servicePropertiesField;
+
+  tempStep.value = JSON.parse(JSON.stringify(dataStep.value));
+  tempWorkflowId.value = workflowId.value;
+}
+
 watch(
   () => model.value,
   () => {
     if (model.value) {
-      propertiesOption.value = optionStore.globalOption?.servicePropertiesField;
-      tempStep.value = JSON.parse(JSON.stringify(dataStep.value));
+      assignTemp();
+    }
+  },
+);
+
+watch(
+  () => tempWorkflowId.value,
+  async (a, b) => {
+    if (props.selectFlow && a !== b && a) {
+      const ret = await getWorkflowTemplate(a);
+      if (ret) {
+        currWorkflow.value = ret;
+        tempStep.value =
+          ret.step.length > 0
+            ? ret.step.map((s) => ({
+                name: s.name,
+                attributes: s.attributes,
+              }))
+            : [];
+      }
     }
   },
 );
@@ -263,8 +306,41 @@ watch(
     :close="close"
   >
     <div class="column">
+      <div
+        v-if="selectFlow"
+        class="bordered-b surface-3 row items-center no-wrap q-py-sm"
+        :class="{
+          'q-px-lg': $q.screen.gt.sm,
+          'q-px-md': !$q.screen.gt.sm,
+        }"
+      >
+        {{ $t('flow.title') }}
+        <SelectFlow
+          style="width: 18vw"
+          class="q-ml-sm"
+          v-model:value="tempWorkflowId"
+          :label="$t('flow.title')"
+          simple
+        />
+      </div>
+
+      <template v-if="$slots.prepend">
+        <slot name="prepend"></slot>
+      </template>
+
+      <div
+        v-if="tempStep.length === 0"
+        class="row surface-1 rounded bordered items-center justify-center col"
+        :class="{
+          'q-ma-lg': $q.screen.gt.sm,
+          'q-ma-md': !$q.screen.gt.sm,
+        }"
+      >
+        <NoData :text="$t('general.no', { msg: $t('flow.processStep') })" />
+      </div>
+
       <section
-        v-for="(step, stepIndex) in dataStep"
+        v-for="(step, stepIndex) in tempStep"
         :key="stepIndex"
         class="column"
       >
diff --git a/src/components/shared/select/SelectFlow.vue b/src/components/shared/select/SelectFlow.vue
new file mode 100644
index 00000000..58dd5659
--- /dev/null
+++ b/src/components/shared/select/SelectFlow.vue
@@ -0,0 +1,107 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+
+import { createSelect, SelectProps } from './select';
+import SelectInput from '../SelectInput.vue';
+
+import { WorkflowTemplate } from 'src/stores/workflow-template/types';
+
+import { useWorkflowTemplate } from 'src/stores/workflow-template';
+
+type SelectOption = WorkflowTemplate;
+
+const value = defineModel<string | null | undefined>('value', {
+  required: true,
+});
+const valueOption = defineModel<SelectOption>('valueOption', {
+  required: false,
+});
+
+const selectOptions = ref<SelectOption[]>([]);
+
+const { getWorkflowTemplateList: getList, getWorkflowTemplate: getById } =
+  useWorkflowTemplate();
+
+defineEmits<{
+  (e: 'create'): void;
+  (e: 'updateValue', val: string): void;
+}>();
+
+type ExclusiveProps = {
+  selectFirstValue?: boolean;
+};
+
+const props = defineProps<SelectProps<typeof getList> & ExclusiveProps>();
+
+const { getOptions, setFirstValue, getSelectedOption, filter } =
+  createSelect<SelectOption>(
+    {
+      value,
+      valueOption,
+      selectOptions,
+      getList: async (query) => {
+        const ret = await getList({
+          query,
+          ...props.params,
+        });
+        if (ret) return ret.result;
+      },
+      getByValue: async (id) => {
+        const ret = await getById(id);
+        if (ret) return ret;
+      },
+    },
+    { valueField: 'id' },
+  );
+
+onMounted(async () => {
+  await getOptions();
+
+  if (props.autoSelectOnSingle && selectOptions.value.length === 1) {
+    setFirstValue();
+  }
+
+  if (props.selectFirstValue) {
+    setDefaultValue();
+  } else await getSelectedOption();
+});
+
+function setDefaultValue() {
+  setFirstValue();
+}
+</script>
+<template>
+  <SelectInput
+    v-model="value"
+    incremental
+    :label
+    :placeholder
+    :readonly
+    :disable="disabled"
+    :option="
+      selectOptions.map((v) => {
+        const ret = {
+          label: v.name,
+          value: v.id,
+        };
+        return ret;
+      })
+    "
+    :hide-selected="false"
+    :fill-input="false"
+    :rules="
+      required ? [(v: string) => !!v || $t('form.error.required')] : undefined
+    "
+    @filter="filter"
+    @update:model-value="(v) => $emit('updateValue', v as string)"
+  >
+    <template #append v-if="clearable">
+      <q-icon
+        v-if="!readonly && value"
+        name="mdi-close-circle"
+        @click.stop="value = ''"
+        class="cursor-pointer clear-btn"
+      />
+    </template>
+  </SelectInput>
+</template>
diff --git a/src/pages/04_product-service/MainPage.vue b/src/pages/04_product-service/MainPage.vue
index 1d45821c..412f3354 100644
--- a/src/pages/04_product-service/MainPage.vue
+++ b/src/pages/04_product-service/MainPage.vue
@@ -1,10 +1,12 @@
 <script setup lang="ts">
-import { ref, watch, reactive } from 'vue';
+import { nextTick, ref, watch, reactive } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { onMounted } from 'vue';
 import { storeToRefs } from 'pinia';
 import { useQuasar, type QTableProps } from 'quasar';
 
+import SelectFlow from 'src/components/shared/select/SelectFlow.vue';
+import DialogProperties from 'src/components/dialog/DialogProperties.vue';
 import ProductCardComponent from 'components/04_product-service/ProductCardComponent.vue';
 import StatCard from 'components/StatCardComponent.vue';
 import DrawerInfo from 'components/DrawerInfo.vue';
@@ -14,7 +16,6 @@ import BasicInfoProduct from 'components/04_product-service/BasicInfoProduct.vue
 import PriceDataComponent from 'components/04_product-service/PriceDataComponent.vue';
 import TotalProductCardComponent from 'components/04_product-service/TotalProductCardComponent.vue';
 import FormServiceWork from 'components/04_product-service/FormServiceWork.vue';
-import ServiceProperties from 'components/04_product-service/ServiceProperties.vue';
 import WorkNameManagement from 'components/04_product-service/WorkNameManagement.vue';
 import useOptionStore from 'stores/options';
 import FormServiceProperties from 'components/04_product-service/FormServiceProperties.vue';
@@ -40,6 +41,7 @@ import useFlowStore from 'stores/flow';
 
 import { dateFormat } from 'src/utils/datetime';
 import { formatNumberDecimal, isRoleInclude } from 'stores/utils';
+const { getWorkflowTemplate } = useWorkflowTemplate();
 
 import { Status } from 'stores/types';
 
@@ -60,6 +62,7 @@ import {
 } from 'stores/product-service/types';
 import { computed } from 'vue';
 import { WorkflowTemplate } from 'src/stores/workflow-template/types';
+import { useWorkflowTemplate } from 'src/stores/workflow-template';
 
 const flowStore = useFlowStore();
 const navigatorStore = useNavigator();
@@ -261,15 +264,14 @@ const formDataProduct = ref<ProductCreate>({
   image: undefined,
 });
 
-const workflow = ref<WorkflowTemplate>();
+const currWorkflow = ref<WorkflowTemplate>();
 const formDataProductService = ref<ServiceCreate>({
   work: [],
   attributes: {
     showTotalPrice: false,
     additional: [],
     workflowId: '',
-    workflowName: '',
-    stepProperties: [],
+    workflowStep: [],
   },
   detail: '',
   name: '',
@@ -860,10 +862,9 @@ const prevService = ref<ServiceCreate>({
   work: [],
   attributes: {
     showTotalPrice: false,
-    workflowName: '',
     workflowId: '',
-    stepProperties: [],
     additional: [],
+    workflowStep: [],
   },
   detail: '',
   name: '',
@@ -1019,16 +1020,16 @@ function clearFormProduct() {
 }
 
 function clearFormService() {
+  currWorkflow.value = undefined;
   formDataProductService.value = {
     code: '',
     name: '',
     detail: '',
     attributes: {
-      workflowName: '',
       workflowId: '',
-      stepProperties: [],
       additional: [],
       showTotalPrice: false,
+      workflowStep: [],
     },
     work: [],
     status: undefined,
@@ -1183,8 +1184,11 @@ function submitAddWorkProduct() {
         installmentNo: splitPay.value > 0 ? 1 : 0,
         nameEn: '',
       });
-      workItems.value[currentWorkIndex.value].attributes.stepProperties.forEach(
+      workItems.value[currentWorkIndex.value].attributes.workflowStep.forEach(
         (s) => {
+          if (!s.hasOwnProperty('productsId')) {
+            s.productsId = [];
+          }
           s.productsId.push(i.id);
         },
       );
@@ -1192,7 +1196,7 @@ function submitAddWorkProduct() {
   });
 
   // filter remain product
-  workItems.value[currentWorkIndex.value].attributes.stepProperties.forEach(
+  workItems.value[currentWorkIndex.value].attributes.workflowStep.forEach(
     (s) => {
       s.productsId = s.productsId.filter((pid) =>
         selectProduct.value.some((i) => i.id === pid),
@@ -1254,10 +1258,9 @@ function triggerConfirmCloseWork() {
 
 const tempValueProperties = ref<Attributes>({
   showTotalPrice: false,
-  workflowName: '',
   workflowId: '',
-  stepProperties: [],
   additional: [],
+  workflowStep: [],
 });
 const currentPropertiesMode = ref<'service' | 'work'>('service');
 
@@ -1331,7 +1334,7 @@ async function alternativeFetch() {
   }
 }
 
-function cloneServiceData() {
+async function cloneServiceData() {
   if (!currentService.value) return;
   const currentSelectedImage = formDataProductService.value.selectedImage;
   formDataProductService.value = {
@@ -1340,6 +1343,7 @@ function cloneServiceData() {
   };
   formDataProductService.value.selectedImage = currentSelectedImage;
 
+  await nextTick();
   workItems.value = currentService.value.work.map((item) => {
     return {
       id: item.id,
@@ -1565,6 +1569,34 @@ watch(
     if (profileFileImg.value !== null) isImageEdit.value = true;
   },
 );
+
+function handleChangeWorkflowId(workflowId: string) {
+  if (workItems.value.length > 0 && currWorkflow.value) {
+    workItems.value.forEach((w) => {
+      w.attributes.workflowId = workflowId;
+      w.attributes.workflowStep = currWorkflow.value
+        ? JSON.parse(
+            JSON.stringify(
+              currWorkflow.value.step.map((step) => ({
+                name: step.name,
+                attributes: step.attributes,
+                productsId: [],
+              })),
+            ),
+          )
+        : [];
+    });
+  }
+}
+
+watch(
+  () => formDataProductService.value.attributes.workflowId,
+  async (a, b) => {
+    if (a && a !== b) {
+      handleChangeWorkflowId(a);
+    }
+  },
+);
 </script>
 
 <template>
@@ -3982,6 +4014,7 @@ watch(
           </div>
           <SaveButton id="btn-info-basic-save" icon-only type="submit" />
         </div>
+
         <BasicInformation
           v-if="serviceTab === 1"
           dense
@@ -3991,10 +4024,30 @@ watch(
           v-model:service-name-th="formDataProductService.name"
         />
 
+        <!-- <div v-if="serviceTab === 1" class="row q-pt-sm">
+          <SelectFlow
+            class="col-4"
+            v-model:value="formDataProductService.attributes.workflowId"
+            :label="$t('flow.title')"
+            simple
+            @update-value="
+              async (id) => {
+                if (id) {
+                  console.log('2');
+                  const ret = await getWorkflowTemplate(id);
+                  if (ret) currWorkflow = ret;
+                  handleChangeWorkflowId(id);
+                }
+              }
+            "
+          />
+        </div> -->
+
         <FormServiceWork
           v-if="serviceTab === 2"
           ref="refAddServiceWork"
           v-model:work-items="workItems"
+          v-model:workflow="currWorkflow"
           :tree-view="serviceTreeView"
           :service="formDataProductService"
           dense
@@ -4048,43 +4101,19 @@ watch(
     </div> -->
   </DialogForm>
 
-  <!-- service properties -->
-  <DialogForm
-    no-address
-    no-app-box
-    height="75vh"
-    width="75%"
-    :title="$t('productService.service.properties')"
-    v-model:modal="propertiesDialog"
-    :submit="
-      () => {
-        if (currentPropertiesMode === 'service') {
-          formDataProductService.attributes = JSON.parse(
-            JSON.stringify(tempValueProperties),
-          );
-        }
-        if (currentPropertiesMode === 'work') {
-          workItems[currentWorkIndex].attributes = JSON.parse(
-            JSON.stringify(tempValueProperties),
-          );
-        }
-
-        propertiesDialog = false;
+  <!-- service properties, work properties -->
+  <DialogProperties
+    v-if="workItems[currentWorkIndex]"
+    selectFlow
+    v-model:data-step="workItems[currentWorkIndex].attributes.workflowStep"
+    v-model:workflow-id="formDataProductService.attributes.workflowId"
+    v-model="propertiesDialog"
+    @submit="
+      (v) => {
+        currWorkflow = v;
       }
     "
-    :close="
-      () => {
-        propertiesDialog = false;
-      }
-    "
-  >
-    <section class="col column">
-      <ServiceProperties
-        v-model:properties-option="propertiesOption"
-        v-model:form-service-properties="tempValueProperties"
-      />
-    </section>
-  </DialogForm>
+  ></DialogProperties>
 
   <!-- manage work name -->
   <DialogForm
@@ -4387,15 +4416,36 @@ watch(
           v-model:service-name-th="formDataProductService.name"
         />
 
+        <!-- <div v-if="serviceTab === 1" class="row q-pt-sm">
+          <SelectFlow
+            :readonly="!infoServiceEdit"
+            class="col-4"
+            v-model:value="formDataProductService.attributes.workflowId"
+            :label="$t('flow.title')"
+            simple
+            @update-value="
+              async (id) => {
+                if (id) {
+                  console.log('2');
+                  const ret = await getWorkflowTemplate(id);
+                  if (ret) currWorkflow = ret;
+                  handleChangeWorkflowId(id);
+                }
+              }
+            "
+          />
+        </div> -->
+
         <FormServiceWork
           v-if="serviceTab === 2"
           ref="refEditServiceWork"
+          v-model:work-items="workItems"
+          v-model:workflow="currWorkflow"
           :service="formDataProductService"
           :tree-view="serviceTreeView"
           :readonly="!infoServiceEdit"
-          v-model:work-items="workItems"
-          dense
           :price-display="priceDisplay"
+          dense
           @add-product="
             async (index) => {
               await fetchListOfProductIsAdd(currentIdGroup);
diff --git a/src/stores/product-service/types.ts b/src/stores/product-service/types.ts
index d34f52de..ad3eb19b 100644
--- a/src/stores/product-service/types.ts
+++ b/src/stores/product-service/types.ts
@@ -1,5 +1,6 @@
 import { Status } from '../types';
 import { UpdatedBy, CreatedBy } from 'stores/types';
+import { WorkFlowPayloadStep } from '../workflow-template/types';
 
 export interface TreeProduct {
   name: string;
@@ -73,12 +74,7 @@ export interface Attributes {
   showTotalPrice: boolean;
   additional?: (PropString | PropNumber | PropDate | PropOptions)[];
   workflowId: string;
-  workflowName: string;
-  stepProperties: {
-    id: string;
-    productsId: string[];
-    attributes: (PropString | PropNumber | PropDate | PropOptions)[];
-  }[];
+  workflowStep: (WorkFlowPayloadStep & { productsId: string[] })[];
 }
 
 export type PropString = {