From 67af65afff7b902f49195255b1ce59752c89add9 Mon Sep 17 00:00:00 2001
From: Julien Calixte <julienc@bam.tech>
Date: Sat, 27 May 2023 23:01:35 +0200
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20(production=20flow)=20add?=
 =?UTF-8?q?=20input=20design=20system=20and=20change=20step=20to=20te?=
 =?UTF-8?q?=E2=80=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/flow/ProductionFlow.vue        |  2 +-
 src/modules/flow/components/AddFlow.vue       | 23 --------------
 src/modules/flow/components/AddStep.vue       | 31 +++++++++++++++++++
 .../flow/store/useProductionFlow.store.ts     | 10 +++---
 4 files changed, 37 insertions(+), 29 deletions(-)
 delete mode 100644 src/modules/flow/components/AddFlow.vue
 create mode 100644 src/modules/flow/components/AddStep.vue

diff --git a/src/components/flow/ProductionFlow.vue b/src/components/flow/ProductionFlow.vue
index 2a4ffb0..03e801e 100644
--- a/src/components/flow/ProductionFlow.vue
+++ b/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 }}
diff --git a/src/modules/flow/components/AddFlow.vue b/src/modules/flow/components/AddFlow.vue
deleted file mode 100644
index de4ecb9..0000000
--- a/src/modules/flow/components/AddFlow.vue
+++ /dev/null
@@ -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>
diff --git a/src/modules/flow/components/AddStep.vue b/src/modules/flow/components/AddStep.vue
new file mode 100644
index 0000000..af3c177
--- /dev/null
+++ b/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>
diff --git a/src/modules/flow/store/useProductionFlow.store.ts b/src/modules/flow/store/useProductionFlow.store.ts
index 62a7e69..abf52c0 100644
--- a/src/modules/flow/store/useProductionFlow.store.ts
+++ b/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) {
-      this.$state.steps = [step, ...this.$state.steps]
+    addTeam(team: Team) {
+      this.$state.teams = [team, ...this.$state.teams]
     },
   },
 })