✨ (flow) add intention and the other fields for step/team

src/components/flow/ProductionFlow.vue

@@ -11,6 +11,7 @@ const store = useProductionFlow()
     <ul>
       <li :key="team.name" v-for="team in store.$state.teams">
         {{ team.name }}
+        <p>{{ team.intention }}</p>
         <button @click="store.removeTeam(team.id)">❌</button>
       </li>
     </ul>

src/modules/flow/components/AddStep.vue

@@ -4,24 +4,45 @@ import { useProductionFlow } from "@/modules/flow/store/useProductionFlow.store"
 import { ref } from "vue"
 
 const store = useProductionFlow()
+
 const newTeam = ref("")
+const prerequisites = ref("")
+const output = ref("")
+const intention = ref("")
+const responsible = ref("")
+
+const clearTeam = () => {
+  newTeam.value = ""
+  prerequisites.value = ""
+  output.value = ""
+  intention.value = ""
+  responsible.value = ""
+}
 
 const addTeam = () => {
   store.addTeam({
     name: newTeam.value,
-    outputs: ["Go for live"],
+    outputs: [output.value],
-    prerequisites: ["new app version is step in staging environment"],
+    prerequisites: [prerequisites.value],
-    intention:
+    intention: intention.value,
-      "Test the app as a whole to validate that the User Experience has no bug",
+    responsible: responsible.value,
-    responsible: "Product Owner",
   })
+  clearTeam()
 }
 </script>
 
 <template>
-  <form class="add-step" @submit.prevent>
+  <form class="add-step" @submit.prevent="addTeam">
-    <FormInput id="team" label="Team" v-model="newTeam" />
+    <FormInput id="team" label="Team (or step)" v-model="newTeam" />
-    <button @click="addTeam">Add a step</button>
+    <FormInput
+      id="prerequisites"
+      label="Prerequisites"
+      v-model="prerequisites"
+    />
+    <FormInput id="output" label="Output" v-model="output" />
+    <FormInput id="intention" label="Intention" v-model="intention" />
+    <FormInput id="responsible" label="Responsible" v-model="responsible" />
+    <button type="submit">Add a step</button>
   </form>
 </template>