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>
2024-11-13 16:06:32 +07:00 · 2024-11-13 16:06:32 +07:00 · 6e796049d5
commit 6e796049d5
parent bd718eb492
7 changed files with 374 additions and 187 deletions
--- 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: [],
  });
--- 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,
                )
              "
--- 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">
--- 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"
      >
--- a/src/components/shared/select/SelectFlow.vue
+++ 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>
--- 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);
--- 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 = {