refactor: workflow dialog & mock data

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

@@ -1,8 +1,56 @@
 <script lang="ts" setup>
 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;
+};
 
 const model = defineModel<boolean>({ required: true, default: false });
+const flowData = defineModel<WorkFlow>('flowStep', {
+  required: true,
+  default: {
+    name: '',
+    step: [],
+  },
+});
+
+const mockFlowData = ref<WorkFlow>({
+  name: '',
+  step: [],
+});
+
+withDefaults(
+  defineProps<{
+    readonly?: boolean;
+  }>(),
+  { readonly: false },
+);
+
+function addStep() {
+  mockFlowData.value.step.push({
+    responsiblePersonId: [''],
+    value: [''],
+    name: '',
+  });
+
+  const scrollTarget = document.getElementById(
+    `input-flow-step-name-${mockFlowData.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' });
+}
 </script>
 <template>
   <DialogForm :title="$t('flow.title')" v-model:modal="model">
@@ -23,7 +71,12 @@ const model = defineModel<boolean>({ required: true, default: false });
             :menu="[
               {
                 name: $t('general.name', { msg: $t('flow.template') }),
-                anchor: 'form-group',
+                anchor: 'form-flow-template',
+              },
+              {
+                name: $t('flow.processStep'),
+                anchor: 'form-flow-step',
+                useBtn: true,
               },
             ]"
             background="transparent"
@@ -31,8 +84,23 @@ const model = defineModel<boolean>({ required: true, default: false });
               background: 'hsla(var(--blue-6-hsl) / .2)',
               foreground: 'var(--blue-6)',
             }"
-            scroll-element="#group-form"
-          />
+            scroll-element="#flow-form"
+          >
+            <template v-slot:btn-form-flow-step>
+              <q-btn
+                dense
+                flat
+                icon="mdi-plus"
+                size="sm"
+                rounded
+                id="btn-add-step"
+                padding="0px 0px"
+                style="color: var(--stone-9)"
+                @click.stop="addStep"
+                :disabled="readonly"
+              />
+            </template>
+          </SideMenu>
         </div>
       </section>
 
@@ -45,19 +113,7 @@ const model = defineModel<boolean>({ required: true, default: false });
         }"
         style="height: 100%; max-height: 100%; overflow-y: auto"
       >
-        <div class="row col-12">
-          <div class="col-12 q-pb-sm text-weight-bold text-body1">
-            <q-icon
-              flat
-              size="xs"
-              class="q-pa-sm rounded q-mr-xs"
-              color="info"
-              name="mdi-office-building-outline"
-              style="background-color: var(--surface-3)"
-            />
-            {{ $t(`general.name`, { msg: $t('') }) }}
-          </div>
-        </div>
+        <FormFlow id="#flow-form" v-model:flow-data="mockFlowData" />
       </section>
     </div>
   </DialogForm>