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 = {
-  name: string;
-  step: FlowStep[];
-};
-
-type FlowStep = {
-  responsiblePersonId: string[];
-  value: string[];
-  name: string;
-};
-
-const flowData = defineModel<WorkFlow>('flowData', {
+const flowData = defineModel<WorkflowTemplatePayload>('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"
-                  for="btn-up"
+                  :id="`btn-up-${props.rowIndex}`"
+                  :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"
-                  for="btn-down"
+                  :id="`btn-down-${props.rowIndex}`"
+                  :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>