♻️ (production flow) add input design system and change step to te…

src/components/flow/ProductionFlow.vue

@@ -7,7 +7,7 @@ const store = useProductionFlow();
 
 <template>
   <section class="production-flow">
-    <add-flow />
+    <add-step />
     <ul>
       <li :key="step.name" v-for="step in store.$state.steps">
         {{ step.name }}

src/modules/flow/components/AddFlow.vue

@@ -1,23 +0,0 @@
-<script setup lang="ts">
-import { useProductionFlow } from "@/modules/flow/store/useProductionFlow.store";
-
-const store = useProductionFlow();
-const addStep = () => {
-  store.addStep({
-    name: "Recette",
-    outputs: ["Go production"],
-    prerequisites: ["app in staging"],
-  });
-};
-</script>
-
-<template>
-  <form class="add-flow" @submit.prevent>
-    <button @click="addStep">Add a step</button>
-  </form>
-</template>
-
-<style scoped>
-.add-flow {
-}
-</style>

src/modules/flow/components/AddStep.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import FormInput from "@/components/design-system/form/FormInput.vue"
+import { useProductionFlow } from "@/modules/flow/store/useProductionFlow.store"
+import { ref } from "vue"
+
+const store = useProductionFlow()
+const newTeam = ref("")
+
+const addTeam = () => {
+  store.addTeam({
+    name: "User Acceptance Testing",
+    outputs: ["Go for live"],
+    prerequisites: ["new app version is step in staging environment"],
+    intention:
+      "Test the app as a whole to validate that the User Experience has no bug",
+    responsible: "Product Owner",
+  })
+}
+</script>
+
+<template>
+  <form class="add-step" @submit.prevent>
+    <FormInput id="team" label="Team" v-model="newTeam" />
+    <button @click="addTeam">Add a step</button>
+  </form>
+</template>
+
+<style scoped lang="scss">
+.add-step {
+}
+</style>

src/modules/flow/store/useProductionFlow.store.ts

@@ -1,7 +1,7 @@
 import { pinia } from "@/store/store"
 import { defineStore } from "pinia"
 
-interface Step {
+interface Team {
   name: string
   intention: string
   responsible: string
@@ -10,11 +10,11 @@ interface Step {
 }
 
 interface State {
-  steps: Step[]
+  teams: Team[]
 }
 
 const initialState: State = {
-  steps: [
+  teams: [
     {
       name: "In production",
       intention: "Deliver feature to the user",
@@ -28,8 +28,8 @@ const initialState: State = {
 const useStore = defineStore("production-flow", {
   state: () => ({ ...initialState }),
   actions: {
-    addStep(step: Step) {
+    addTeam(team: Team) {
-      this.$state.steps = [step, ...this.$state.steps]
+      this.$state.teams = [team, ...this.$state.teams]
     },
   },
 })