✨ (production flow) add the possibility to remove teams

src/components/flow/ProductionFlow.vue

@@ -9,8 +9,9 @@ const store = useProductionFlow()
   <section class="production-flow">
     <add-step />
     <ul>
-      <li :key="step.name" v-for="step in store.$state.steps">
+      <li :key="team.name" v-for="team in store.$state.teams">
-        {{ step.name }}
+        {{ team.name }}
+        <button @click="store.removeTeam(team.id)">❌</button>
       </li>
     </ul>
   </section>

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

@@ -1,7 +1,9 @@
 import { pinia } from "@/store/store"
 import { defineStore } from "pinia"
+import { nanoid } from "nanoid"
 
 interface Team {
+  id: string
   name: string
   intention: string
   responsible: string
@@ -9,6 +11,8 @@ interface Team {
   outputs: string[]
 }
 
+type NewTeam = Omit<Team, "id">
+
 interface State {
   teams: Team[]
 }
@@ -16,6 +20,7 @@ interface State {
 const initialState: State = {
   teams: [
     {
+      id: nanoid(),
       name: "In production",
       intention: "Deliver feature to the user",
       responsible: "Product owner",
@@ -28,8 +33,11 @@ const initialState: State = {
 const useStore = defineStore("production-flow", {
   state: () => ({ ...initialState }),
   actions: {
-    addTeam(team: Team) {
+    addTeam(newTeam: NewTeam) {
-      this.$state.teams = [team, ...this.$state.teams]
+      this.$state.teams = [{ id: nanoid(), ...newTeam }, ...this.$state.teams]
+    },
+    removeTeam(id: string) {
+      this.$state.teams = this.$state.teams.filter((team) => team.id !== id)
     },
   },
 })