julien/failwell
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

♻️ (task form) extract task form to a separate component

Browse Source
This commit is contained in:
Julien Calixte
2023-05-08 14:38:01 +02:00
parent 1f15374283
commit e95d0dcc97
2 changed files with 82 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
src/modules/task/components/NewTaskForm.vue
View File

@@ -1,79 +1,10 @@
<script setup lang="ts"> <script setup lang="ts">
import EstimationTimeArrival from '@/components/EstimationTimeArrival.vue'
import { createUuid } from '@/shared/create-uuid' import { createUuid } from '@/shared/create-uuid'
import { computed, ref } from 'vue' import TaskForm from './TaskForm.vue'
import { useRouter } from 'vue-router'
import type { Stepable } from '../interfaces/stepable'
import { Task } from '../models/task'
import { useTaskStore } from '../stores/useTask.store'
import StepInput from './StepInput.vue'
const store = useTaskStore()
const router = useRouter()
const id = createUuid() const id = createUuid()
const title = ref('')
const link = ref('')
const steps = ref<Stepable[]>([])
const totalEstimation = computed(() =>
steps.value.map((step) => step.estimation).reduce((a, b) => a + b, 0)
)
const saveTask = () => {
const task = new Task(id, title.value)
if (link.value) {
task.link = link.value
}
task.addSteps(...steps.value)
if (Task.validate(task)) {
store.saveTask(task)
router.push({
name: 'task-view',
params: {
id
}
})
}
return false
}
</script> </script>
<template> <template>
<div class="columns is-centered"> <task-form :id="id" />
<div class="column is-half">
<h1 class="title">Create a task</h1>
<h2 class="subtitle">
<estimation-time-arrival :estimation="totalEstimation" />
</h2>
<form @submit.prevent="saveTask">
<div class="field">
<label class="label" for="title">Title</label>
<div class="control">
<input class="input" type="text" id="title" v-model="title" />
</div>
</div>
<div class="field">
<label class="label" for="link">User story link</label>
<div class="control">
<input class="input" type="text" id="link" v-model="link" />
</div>
</div>
<step-input v-model="steps" />
<button class="button is-primary is-fullwidth" type="submit">
save
</button>
</form>
</div>
</div>
</template> </template>
<style scoped lang="scss">
form {
padding: 1rem 0;
}
</style>

80
src/modules/task/components/TaskForm.vue Normal file
View File

@@ -0,0 +1,80 @@
<script setup lang="ts">
import EstimationTimeArrival from '@/components/EstimationTimeArrival.vue'
import { computed, ref } from 'vue'
import { useRouter } from 'vue-router'
import type { Stepable } from '../interfaces/stepable'
import { Task } from '../models/task'
import { useTaskStore } from '../stores/useTask.store'
import StepInput from './StepInput.vue'
const store = useTaskStore()
const router = useRouter()
const props = defineProps<{ id: string }>()
const id = computed(() => props.id)
const steps = ref<Stepable[]>([])
const title = ref('')
const link = ref('')
const totalEstimation = computed(() =>
steps.value.map((step) => step.estimation).reduce((a, b) => a + b, 0)
)
const saveTask = () => {
const task = new Task(id.value, title.value)
if (link.value) {
task.link = link.value
}
task.addSteps(...steps.value)
if (Task.validate(task)) {
store.saveTask(task)
router.push({
name: 'task-view',
params: {
id: id.value
}
})
}
return false
}
</script>
<template>
<div class="task-form columns is-centered">
<div class="column is-half">
<h1 class="title">Create a task</h1>
<h2 class="subtitle">
<estimation-time-arrival :estimation="totalEstimation" />
</h2>
<form @submit.prevent="saveTask">
<div class="field">
<label class="label" for="title">Title</label>
<div class="control">
<input class="input" type="text" id="title" v-model="title" />
</div>
</div>
<div class="field">
<label class="label" for="link">User story link</label>
<div class="control">
<input class="input" type="text" id="link" v-model="link" />
</div>
</div>
<step-input v-model="steps" />
<button class="button is-primary is-fullwidth" type="submit">
save
</button>
</form>
</div>
</div>
</template>
<style scoped lang="scss">
.task-form {
form {
padding: 1rem 0;
}
}
</style>