Basic Task Display

src/components/task/TaskListComponent.vue

@@ -1,30 +1,9 @@
 <template>
   <div class="q-pa-md" style="max-width: 350px">
     <q-list>
-      <q-item v-for="task in tasks" :key="task.id">
-        <q-expansion-item
-          v-if="task.subtasks && task.subtasks.length"
-          expand-separator
-          label="Subtasks"
-          default-opened
-        >
-          {{ task }}
-          <q-expansion-item
-            :header-inset-level="1"
-            expand-separator
-            label="Subtasks"
-            default-opened
-          >
-            <TaskList :tasks="task.subtasks" />
-          </q-expansion-item>
-        </q-expansion-item>
-        <q-item-section v-else>
-          <q-item-label overline>{{ task.title }}</q-item-label>
-          <q-item-label caption lines="2">{{ task.description }} </q-item-label>
-          <q-item-label caption>Due: {{ task.dueDate }}</q-item-label>
-          <!-- TODO: Add date formatting Mixin? https://jerickson.net/how-to-format-dates-in-vue-3/ -->
-        </q-item-section>
-      </q-item>
+      <div v-for="task in tasks" :key="task.id">
+        <TaskComponent :task="task" />
+      </div>
     </q-list>
   </div>
 </template>
@@ -32,6 +11,7 @@
 <script setup lang="ts">
 import { defineProps } from 'vue';
 import type { Task } from 'src/stores/task';
+import TaskComponent from './TaskComponent.vue';
 
 const props = defineProps<{ tasks: Task[] }>();
 </script>