Merge pull request #3 from LSViana/to-do

Introduce a sample To Do app

pages/applications/index.vue

@@ -13,6 +13,11 @@
               <span>Worklog Tracker</span>
             </WlCard>
           </li>
+          <li>
+            <WlCard to="/applications/to-do">
+              <span>To Do</span>
+            </WlCard>
+          </li>
           <li>
             <WlCard>
               <span>Chat</span>

pages/applications/to-do/ToDoTaskForm.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="flex items-center gap-2">
+    <label for="new-task" class="sr-only">New task:</label>
+    <WlInput id="new-task" v-model="newTask" type="text" placeholder="New task..." @keydown.enter="onAddTask"/>
+    <WlButton variant="primary" @click="onAddTask">Add</WlButton>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+
+import WlButton from '~/components/experiments/forms-input/buttons/WlButton.vue'
+import WlInput from '~/components/experiments/forms-input/input/WlInput.vue'
+import { injectTaskStore } from '~/pages/applications/to-do/store'
+
+const taskStore = injectTaskStore()
+
+const newTask = ref('')
+
+function onAddTask () {
+  if (newTask.value.trim() === '') {
+    return
+  }
+
+  taskStore.add(newTask.value)
+  newTask.value = ''
+}
+</script>

pages/applications/to-do/ToDoTaskList.vue

@@ -0,0 +1,16 @@
+<template>
+  <ul>
+    <li v-for="(task, index) in taskStore.items" :key="task.text">
+      <label :for="`input-${index}`" class="flex gap-2 py-1">
+        <input :id="`input-${index}`" type="checkbox" :checked="task.done" @change="task.done = !task.done">
+        <span>{{ task.text }}</span>
+      </label>
+    </li>
+  </ul>
+</template>
+
+<script lang="ts" setup>
+import { injectTaskStore } from '~/pages/applications/to-do/store'
+
+const taskStore = injectTaskStore()
+</script>

pages/applications/to-do/index.vue

@@ -0,0 +1,18 @@
+<template>
+  <NuxtLayout name="home">
+    <WlContainer class="flex flex-col gap-3 p-3">
+      <h2 class="text-2xl">To Do</h2>
+      <ToDoTaskForm/>
+      <ToDoTaskList/>
+    </WlContainer>
+  </NuxtLayout>
+</template>
+
+<script lang="ts" setup>
+import WlContainer from '~/components/shared/layout/WlContainer.vue'
+import { provideTaskStore } from '~/pages/applications/to-do/store'
+import ToDoTaskForm from '~/pages/applications/to-do/ToDoTaskForm.vue'
+import ToDoTaskList from '~/pages/applications/to-do/ToDoTaskList.vue'
+
+provideTaskStore()
+</script>

pages/applications/to-do/store.ts

@@ -0,0 +1,39 @@
+import { inject, provide, reactive } from 'vue'
+
+export class TaskStore {
+  // Try doing this without the `reactive()` call and investigate the differences.
+  items = reactive([
+    {
+      done: false,
+      text: 'Create blog website'
+    },
+    {
+      done: false,
+      text: 'Create to do app'
+    },
+    {
+      done: false,
+      text: 'Create blog article'
+    },
+    {
+      done: false,
+      text: 'Review blog article'
+    }
+  ])
+
+  add (task: string) {
+    this.items.push({
+      done: false,
+      text: task
+    })
+  }
+}
+
+export function provideTaskStore () {
+  // Optionally return the new instance if you need it in the top-level component.
+  provide('tasks', new TaskStore())
+}
+
+export function injectTaskStore () {
+  return inject<TaskStore>('tasks')!
+}