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>

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"
       >