this repo has no description
✨ (production flow) add the possibility to remove teams
+13
-4
+3
-2
src/components/flow/ProductionFlow.vue
+3
-2
src/components/flow/ProductionFlow.vue
···
9
9
<section class="production-flow">
10
10
<add-step />
11
11
<ul>
12
-
<li :key="step.name" v-for="step in store.$state.steps">
13
-
{{ step.name }}
12
+
<li :key="team.name" v-for="team in store.$state.teams">
13
+
{{ team.name }}
14
+
<button @click="store.removeTeam(team.id)">❌</button>
14
15
</li>
15
16
</ul>
16
17
</section>
+10
-2
src/modules/flow/store/useProductionFlow.store.ts
+10
-2
src/modules/flow/store/useProductionFlow.store.ts
···
1
1
import { pinia } from "@/store/store"
2
2
import { defineStore } from "pinia"
3
+
import { nanoid } from "nanoid"
3
4
4
5
interface Team {
6
+
id: string
5
7
name: string
6
8
intention: string
7
9
responsible: string
···
9
11
outputs: string[]
10
12
}
11
13
14
+
type NewTeam = Omit<Team, "id">
15
+
12
16
interface State {
13
17
teams: Team[]
14
18
}
···
16
20
const initialState: State = {
17
21
teams: [
18
22
{
23
+
id: nanoid(),
19
24
name: "In production",
20
25
intention: "Deliver feature to the user",
21
26
responsible: "Product owner",
···
28
33
const useStore = defineStore("production-flow", {
29
34
state: () => ({ ...initialState }),
30
35
actions: {
31
-
addTeam(team: Team) {
32
-
this.$state.teams = [team, ...this.$state.teams]
36
+
addTeam(newTeam: NewTeam) {
37
+
this.$state.teams = [{ id: nanoid(), ...newTeam }, ...this.$state.teams]
38
+
},
39
+
removeTeam(id: string) {
40
+
this.$state.teams = this.$state.teams.filter((team) => team.id !== id)
33
41
},
34
42
},
35
43
})