this repo has no description
♻️ (production flow) add input design system and change step to te…
+37
-29
+1
-1
src/components/flow/ProductionFlow.vue
+1
-1
src/components/flow/ProductionFlow.vue
-23
src/modules/flow/components/AddFlow.vue
-23
src/modules/flow/components/AddFlow.vue
···
1
-
<script setup lang="ts">
2
-
import { useProductionFlow } from "@/modules/flow/store/useProductionFlow.store";
3
-
4
-
const store = useProductionFlow();
5
-
const addStep = () => {
6
-
store.addStep({
7
-
name: "Recette",
8
-
outputs: ["Go production"],
9
-
prerequisites: ["app in staging"],
10
-
});
11
-
};
12
-
</script>
13
-
14
-
<template>
15
-
<form class="add-flow" @submit.prevent>
16
-
<button @click="addStep">Add a step</button>
17
-
</form>
18
-
</template>
19
-
20
-
<style scoped>
21
-
.add-flow {
22
-
}
23
-
</style>
+31
src/modules/flow/components/AddStep.vue
+31
src/modules/flow/components/AddStep.vue
···
1
+
<script setup lang="ts">
2
+
import FormInput from "@/components/design-system/form/FormInput.vue"
3
+
import { useProductionFlow } from "@/modules/flow/store/useProductionFlow.store"
4
+
import { ref } from "vue"
5
+
6
+
const store = useProductionFlow()
7
+
const newTeam = ref("")
8
+
9
+
const addTeam = () => {
10
+
store.addTeam({
11
+
name: "User Acceptance Testing",
12
+
outputs: ["Go for live"],
13
+
prerequisites: ["new app version is step in staging environment"],
14
+
intention:
15
+
"Test the app as a whole to validate that the User Experience has no bug",
16
+
responsible: "Product Owner",
17
+
})
18
+
}
19
+
</script>
20
+
21
+
<template>
22
+
<form class="add-step" @submit.prevent>
23
+
<FormInput id="team" label="Team" v-model="newTeam" />
24
+
<button @click="addTeam">Add a step</button>
25
+
</form>
26
+
</template>
27
+
28
+
<style scoped lang="scss">
29
+
.add-step {
30
+
}
31
+
</style>
+5
-5
src/modules/flow/store/useProductionFlow.store.ts
+5
-5
src/modules/flow/store/useProductionFlow.store.ts
···
1
1
import { pinia } from "@/store/store"
2
2
import { defineStore } from "pinia"
3
3
4
-
interface Step {
4
+
interface Team {
5
5
name: string
6
6
intention: string
7
7
responsible: string
···
10
10
}
11
11
12
12
interface State {
13
-
steps: Step[]
13
+
teams: Team[]
14
14
}
15
15
16
16
const initialState: State = {
17
-
steps: [
17
+
teams: [
18
18
{
19
19
name: "In production",
20
20
intention: "Deliver feature to the user",
···
28
28
const useStore = defineStore("production-flow", {
29
29
state: () => ({ ...initialState }),
30
30
actions: {
31
-
addStep(step: Step) {
32
-
this.$state.steps = [step, ...this.$state.steps]
31
+
addTeam(team: Team) {
32
+
this.$state.teams = [team, ...this.$state.teams]
33
33
},
34
34
},
35
35
})