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

src/components/04_flow-management/FormFlow.vue

@@ -5,19 +5,9 @@ import { moveItemUp, moveItemDown, deleteItem } from 'src/stores/utils';
 
 import ToggleButton from 'src/components/button/ToggleButton.vue';
 import { DeleteButton } from '../button';
+import { WorkflowTemplatePayload } from 'src/stores/workflow-template/types';
 
-type WorkFlow = {
+const flowData = defineModel<WorkflowTemplatePayload>('flowData', {
-  name: string;
-  step: FlowStep[];
-};
-
-type FlowStep = {
-  responsiblePersonId: string[];
-  value: string[];
-  name: string;
-};
-
-const flowData = defineModel<WorkFlow>('flowData', {
   required: true,
   default: {
     name: '',
@@ -78,13 +68,15 @@ defineEmits<{
         outlined
         dense
         class="col"
+        id="input-flow-template-name"
         v-model="flowData.name"
+        hide-bottom-space
         :label="$t(`general.name`, { msg: $t('flow.step') })"
+        :rules="[(val: string) => !!val || $t('form.error.required')]"
       ></q-input>
     </section>
 
     <section
-      id="form-flow-step"
       class="col-12 q-pb-sm q-pt-lg text-weight-bold text-body1 row items-center"
     >
       <q-icon
@@ -100,6 +92,7 @@ defineEmits<{
 
     <section class="col-12">
       <q-table
+        id="form-flow-step"
         flat
         bordered
         hide-pagination
@@ -124,8 +117,8 @@ defineEmits<{
             <q-td style="width: 60%">
               <section class="row items-center">
                 <q-btn
-                  id="btn-up"
+                  :id="`btn-up-${props.rowIndex}`"
-                  for="btn-up"
+                  :for="`btn-up-${props.rowIndex}`"
                   icon="mdi-arrow-up"
                   size="sm"
                   dense
@@ -136,8 +129,8 @@ defineEmits<{
                   @click.stop="moveItemUp(flowData.step, props.rowIndex)"
                 />
                 <q-btn
-                  id="btn-down"
+                  :id="`btn-down-${props.rowIndex}`"
-                  for="btn-down"
+                  :for="`btn-down-${props.rowIndex}`"
                   icon="mdi-arrow-down"
                   size="sm"
                   dense
@@ -165,14 +158,17 @@ defineEmits<{
                   class="col"
                   :placeholder="$t('general.no', { msg: $t('flow.step') })"
                   v-model="props.row.name"
-                ></q-input>
+                  hide-bottom-space
+                  :rules="[(val: string) => !!val || $t('form.error.required')]"
+                />
               </section>
             </q-td>
 
             <q-td>
               <q-field @click.stop dense outlined>
-                <span class="app-text-muted">
+                <span class="app-text-muted row items-center col">
                   {{ $t('general.no', { msg: $t('flow.responsiblePerson') }) }}
+                  <q-icon name="mdi-chevron-down" class="q-ml-auto" />
                 </span>
                 <q-menu style="width: 18rem" :offset="[0, 4]">
                   <q-list>

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';
+import { WorkflowTemplatePayload } from 'src/stores/workflow-template/types';
-
+import { nextTick } from 'vue';
-type WorkFlow = {
-  name: string;
-  step: FlowStep[];
-};
-
-type FlowStep = {
-  responsiblePersonId: string[];
-  value: string[];
-  name: string;
-};
 
 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() {
+async function addStep() {
-  mockFlowData.value.step.push({
+  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>