fix: workflow template => flow form data, scroll to last item, sidemenu active

src/pages/04_flow-managment/MainPage.vue

@@ -5,6 +5,7 @@ import StatCardComponent from 'src/components/StatCardComponent.vue';
 import CreateButton from 'src/components/AddButton.vue';
 import PaginationComponent from 'src/components/PaginationComponent.vue';
 import FlowDialog from '../04_product-service/FlowDialog.vue';
+import { WorkflowTemplatePayload } from 'src/stores/workflow-template/types';
 
 const pageState = reactive({
   hideStat: false,
@@ -16,6 +17,11 @@ const pageState = reactive({
   addModal: false,
 });
 
+const formFlowData = ref<WorkflowTemplatePayload>({
+  name: '',
+  step: [],
+});
+
 const statusFilter = ref<'all' | 'statusACTIVE' | 'statusINACTIVE'>('all');
 
 function triggerAddDialog() {
@@ -259,5 +265,5 @@ function triggerAddDialog() {
     </section>
   </div>
 
-  <FlowDialog v-model="pageState.addModal" />
+  <FlowDialog v-model="pageState.addModal" v-model:flow-data="formFlowData" />
 </template>

src/pages/04_product-service/FlowDialog.vue

@@ -2,21 +2,11 @@
 import DialogForm from 'src/components/DialogForm.vue';
 import SideMenu from 'src/components/SideMenu.vue';
 import FormFlow from 'src/components/04_flow-management/FormFlow.vue';
-import { ref } from 'vue';
-
-type WorkFlow = {
-  name: string;
-  step: FlowStep[];
-};
-
-type FlowStep = {
-  responsiblePersonId: string[];
-  value: string[];
-  name: string;
-};
+import { WorkflowTemplatePayload } from 'src/stores/workflow-template/types';
+import { nextTick } from 'vue';
 
 const model = defineModel<boolean>({ required: true, default: false });
-const flowData = defineModel<WorkFlow>('flowStep', {
+const flowData = defineModel<WorkflowTemplatePayload>('flowData', {
   required: true,
   default: {
     name: '',
@@ -24,11 +14,6 @@ const flowData = defineModel<WorkFlow>('flowStep', {
   },
 });
 
-const mockFlowData = ref<WorkFlow>({
-  name: '',
-  step: [],
-});
-
 withDefaults(
   defineProps<{
     readonly?: boolean;
@@ -36,18 +21,17 @@ withDefaults(
   { readonly: false },
 );
 
-function addStep() {
-  mockFlowData.value.step.push({
+async function addStep() {
+  flowData.value.step.push({
     responsiblePersonId: [''],
     value: [''],
     name: '',
   });
 
+  await nextTick();
   const scrollTarget = document.getElementById(
-    `input-flow-step-name-${mockFlowData.value.step.length - 1}`,
+    `input-flow-step-name-${flowData.value.step.length - 1}`,
   );
-  console.log(`input-flow-step-name-${mockFlowData.value.step.length - 1}`);
-  console.log(scrollTarget);
   if (scrollTarget)
     scrollTarget.scrollIntoView({ behavior: 'instant', inline: 'center' });
 }
@@ -106,14 +90,14 @@ function addStep() {
 
       <section
         class="col-12 col-md-10"
-        id="customer-form-content"
         :class="{
           'q-py-md q-pr-md ': $q.screen.gt.sm,
           'q-py-md q-px-lg': !$q.screen.gt.sm,
         }"
         style="height: 100%; max-height: 100%; overflow-y: auto"
+        id="flow-form"
       >
-        <FormFlow id="#flow-form" v-model:flow-data="mockFlowData" />
+        <FormFlow v-model:flow-data="flowData" />
       </section>
     </div>
   </DialogForm>