From f94718d5e57d9f32a899d08969f8a770fbff8b78 Mon Sep 17 00:00:00 2001
From: Julien Calixte <julienc@bam.tech>
Date: Sat, 8 Apr 2023 12:38:30 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20(step)=20add=20step=20input=20to=20?=
 =?UTF-8?q?beautifully=20handle=20all=20the=20magic=20inside?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/use-cases/task/components/NewTaskForm.vue |  8 ++++--
 .../task/components/StepInput.test.ts         | 15 +++++++++++
 src/use-cases/task/components/StepInput.vue   | 25 +++++++++++++++++++
 3 files changed, 46 insertions(+), 2 deletions(-)
 create mode 100644 src/use-cases/task/components/StepInput.test.ts
 create mode 100644 src/use-cases/task/components/StepInput.vue

diff --git a/src/use-cases/task/components/NewTaskForm.vue b/src/use-cases/task/components/NewTaskForm.vue
index 75eb7f6..f10ff3d 100644
--- a/src/use-cases/task/components/NewTaskForm.vue
+++ b/src/use-cases/task/components/NewTaskForm.vue
@@ -3,6 +3,7 @@ import { createUuid } from '@/shared/create-uuid'
 import { reactive, ref } from 'vue'
 import type { Step } from '../models/step'
 import { Task } from '../models/task'
+import StepInput from './StepInput.vue'
 
 const id = createUuid()
 
@@ -25,8 +26,11 @@ const saveTask = () => {
   <div>
     <h1>New Task Form</h1>
     <form @submit.prevent="saveTask">
-      <label for="title">Title</label>
-      <input type="text" id="title" v-model="title" />
+      <div>
+        <label for="title">Title</label>
+        <input type="text" id="title" v-model="title" />
+      </div>
+      <StepInput v-model="steps" />
     </form>
   </div>
 </template>
diff --git a/src/use-cases/task/components/StepInput.test.ts b/src/use-cases/task/components/StepInput.test.ts
new file mode 100644
index 0000000..1ce9b31
--- /dev/null
+++ b/src/use-cases/task/components/StepInput.test.ts
@@ -0,0 +1,15 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+import StepInput from './StepInput.vue'
+
+describe('Step input', () => {
+  it('displays a text area with steps inside', () => {
+    const wrapper = mount(StepInput, {
+      props: {
+        modelValue: []
+      }
+    })
+
+    expect(wrapper.text()).toContain('textarea')
+  })
+})
diff --git a/src/use-cases/task/components/StepInput.vue b/src/use-cases/task/components/StepInput.vue
new file mode 100644
index 0000000..a2f06ab
--- /dev/null
+++ b/src/use-cases/task/components/StepInput.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import type { Step } from '../models/step'
+
+defineProps<{
+  modelValue: Step[]
+}>()
+
+const emit = defineEmits<{
+  (event: 'update:modelValue', payload: Step[]): void
+}>()
+</script>
+
+<template>
+  <div class="step-input">
+    <div>textarea</div>
+    <div>beautiful data</div>
+  </div>
+</template>
+
+<style scoped>
+.step-input {
+  display: flex;
+  justify-content: space-between;
+}
+</style>