add link to User Story

src/modules/task/components/NewTaskForm.vue

@@ -14,19 +14,30 @@ const router = useRouter()
 const id = createUuid()
 
 const title = ref(faker.animal.bird())
-const steps = ref([createStepFixture(), createStepFixture()])
+const link = ref(faker.internet.url())
+const steps = ref(
+  Array.from({ length: Math.floor(Math.random() * 10) }, () =>
+    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)
+  if (link.value) {
+    task.link = link.value
+  }
   task.addSteps(...steps.value)
 
   if (Task.validate(task)) {
     store.saveTask(task)
     router.push({
-      name: 'home'
+      name: 'task-view',
+      params: {
+        id
+      }
     })
   }
 
@@ -44,6 +55,10 @@ const saveTask = () => {
         <label for="title">Title</label>
         <input type="text" id="title" v-model="title" />
       </div>
+      <div>
+        <label for="link">User story link</label>
+        <input type="text" id="link" v-model="link" />
+      </div>
       <StepInput v-model="steps" />
     </form>
   </div>

src/views/task/TaskView.vue

@@ -15,9 +15,16 @@ const task = computed(() => taskStore.getTask(props.id))
   <div class="task-view" v-if="task">
     <h1>{{ task.title }}</h1>
     <h2>{{ task.totalEstimation }} minutes</h2>
+    <a
+      v-if="task.link"
+      :href="task.link"
+      target="_blank"
+      rel="noopener noreferrer"
+      >User Story link</a
+    >
     <ul>
       <li v-for="step in task.steps" :key="step.id">
-        {{ step.title }} | {{ step.estimation }}
+        <div>{{ step.title }} | {{ step.estimation }}</div>
       </li>
     </ul>
   </div>