From c266eced3ebc10e3ab726882cd9545f8565fc004 Mon Sep 17 00:00:00 2001
From: Julien Calixte <julienc@bam.tech>
Date: Sun, 9 Apr 2023 09:29:40 +0200
Subject: [PATCH] add total estimation

---
 src/use-cases/task/components/NewTaskForm.vue |  6 +++++-
 src/use-cases/task/components/StepInput.vue   | 12 ++++++++----
 2 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/src/use-cases/task/components/NewTaskForm.vue b/src/use-cases/task/components/NewTaskForm.vue
index 09b28aa..5433a71 100644
--- a/src/use-cases/task/components/NewTaskForm.vue
+++ b/src/use-cases/task/components/NewTaskForm.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { createUuid } from '@/shared/create-uuid'
-import { ref } from 'vue'
+import { computed, ref } from 'vue'
 import { createStepFixture } from '../models/step.fixture'
 import { Task } from '../models/task'
 import StepInput from './StepInput.vue'
@@ -9,6 +9,9 @@ const id = createUuid()
 
 const title = ref('')
 const steps = ref([createStepFixture(), createStepFixture()])
+const totalEstimation = computed(() =>
+  steps.value.map((step) => step.estimation).reduce((a, b) => a + b, 0)
+)
 
 const saveTask = () => {
   const task = new Task(id, title.value)
@@ -25,6 +28,7 @@ const saveTask = () => {
 <template>
   <div>
     <h1>New Task Form</h1>
+    <h2>Estimation: {{ totalEstimation }} minutes</h2>
     <form @submit.prevent="saveTask">
       <div>
         <label for="title">Title</label>
diff --git a/src/use-cases/task/components/StepInput.vue b/src/use-cases/task/components/StepInput.vue
index f259dbe..f5d0a50 100644
--- a/src/use-cases/task/components/StepInput.vue
+++ b/src/use-cases/task/components/StepInput.vue
@@ -30,14 +30,18 @@ const stepsTextarea = computed({
 
 <template>
   <div class="step-input">
-    <textarea v-model="stepsTextarea" cols="40" rows="20"></textarea>
-    <div>beautiful data</div>
+    <label for="steps">steps</label>
+    <textarea
+      id="steps"
+      name="steps"
+      v-model="stepsTextarea"
+      cols="40"
+      rows="20"
+    ></textarea>
   </div>
 </template>
 
 <style scoped>
 .step-input {
-  display: flex;
-  justify-content: space-between;
 }
 </style>