Basic Task Display

src/boot/appwrite.ts

@@ -21,6 +21,8 @@ client
 const AppwriteIds = {
   databaseId: '65ee1cbf9c2493faf15f',
   collectionIdTask: '65ee1cd5b550023fae4f',
+  collectionIdTaskTags: '65ee21d72d5c8007c34c',
+  collectionIdSkillTags: '66072582a74d94a4bd01',
 };
 
 const account = new Account(client);

src/components/task/NewTaskComponent.vue

@@ -0,0 +1,6 @@
+<template>
+  <div>My component</div>
+</template>
+
+<script setup lang="ts">
+</script>

src/components/task/TaskComponent.vue

@@ -1,6 +1,23 @@
 <template>
-  <div>My component</div>
+  <q-item-section>
+    <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>
+  </q-item-section>
+  <q-expansion-item
+    v-if="task.subtasks && task.subtasks.length"
+    expand-separator
+    label="Subtasks"
+    default-opened
+  >
+    <TaskListComponent :tasks="task.subtasks" />
+  </q-expansion-item>
+  <!-- TODO: Add date formatting Mixin? https://jerickson.net/how-to-format-dates-in-vue-3/ -->
 </template>
 
 <script setup lang="ts">
+import { defineProps } from 'vue';
+import type { Task } from 'src/stores/task';
+
+const props = defineProps<{ task: Task }>();
 </script>

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>

src/components/task/TaskTableComponent.vue

@@ -0,0 +1,87 @@
+<template>
+  <div class="q-pa-md">
+    <q-table
+      :rows="tasks"
+      :columns="columns"
+      row-key="$id"
+      no-data-label="I didn't find anything for you"
+      no-results-label="The filter didn't uncover any results"
+    >
+      <template v-slot:top>
+        <q-btn
+          color="primary"
+          :disable="loading"
+          label="New Task"
+          @click="newTask"
+        />
+        <q-btn
+          v-if="tasks.length !== 0"
+          class="q-ml-sm"
+          color="primary"
+          :disable="loading"
+          label="Delete task(s)"
+          @click="deleteTask"
+        />
+        <q-space />
+        <q-input
+          borderless
+          dense
+          debounce="300"
+          color="primary"
+          v-model="filter"
+        >
+          <template v-slot:append>
+            <q-icon name="search" />
+          </template>
+        </q-input>
+      </template>
+    </q-table>
+    <q-table :rows="taskStore.skillTags"></q-table>
+    <q-table :rows="taskStore.taskTags"></q-table>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineProps, ref } from 'vue';
+import { useTaskStore, Task } from 'src/stores/task';
+import type { QTableProps } from 'quasar';
+
+const loading = ref(false); // Placeholder
+const columns = <QTableProps['columns']>[
+  {
+    name: 'title',
+    required: true,
+    label: 'Title',
+    align: 'left',
+    field: 'title',
+    sortable: true,
+  },
+  {
+    name: 'description',
+    align: 'left',
+    label: 'Description',
+    field: 'description',
+    sortable: false,
+  },
+  {
+    name: 'status',
+    align: 'left',
+    label: 'Status',
+    field: 'status',
+    sortable: true,
+  },
+];
+
+const props = defineProps<{ tasks: Task[] }>();
+const taskStore = useTaskStore();
+taskStore.fetchTaskTags();
+taskStore.fetchSkillTags();
+
+function newTask() {
+  return;
+}
+function deleteTask() {
+  return;
+}
+const filter = ref('');
+</script>

src/pages/TaskPage.vue

@@ -1,15 +1,19 @@
 <template>
   <toolbar-component pageTitle="Tasks" />
   <q-page padding>
-    <TaskListComponent :tasks="taskStore.taskHierarchy" />
+    <TaskListComponent v-if="$q.screen.lt.sm" :tasks="taskStore.tasks" />
+    <TaskTableComponent v-else :tasks="taskStore.tasks" />
   </q-page>
 </template>
 
 <script setup lang="ts">
+import { ref } from 'vue';
 import { useTaskStore } from 'stores/task';
 import ToolbarComponent from 'src/components/ToolbarComponent.vue';
 import TaskListComponent from 'src/components/task/TaskListComponent.vue';
+import TaskTableComponent from 'src/components/task/TaskTableComponent.vue';
 
 const taskStore = useTaskStore();
+
 taskStore.fetchTasks(); // Fetch on mount
 </script>

src/stores/task.ts

@@ -11,9 +11,20 @@ export interface Task extends Models.Document {
   completed: boolean;
 }
 
+export interface TaskTag extends Models.Document {
+  name: string;
+  description: string;
+}
+export interface SkillTag extends Models.Document {
+  name: string;
+  description: string;
+}
+
 export const useTaskStore = defineStore('tasks', {
   state: () => ({
     tasks: [] as Task[],
+    taskTags: [] as TaskTag[],
+    skillTags: [] as SkillTag[],
   }),
 
   actions: {
@@ -28,6 +39,30 @@ export const useTaskStore = defineStore('tasks', {
         console.error('Failed to fetch tasks', error);
       }
     },
+    async fetchTaskTags() {
+      // This is fine for a small number of tags, but more than a few hundred tags, we'd need to optimize
+      try {
+        const response = await databases.listDocuments(
+          AppwriteIds.databaseId,
+          AppwriteIds.collectionIdTaskTags
+        );
+        this.taskTags = response.documents as TaskTag[];
+      } catch (error) {
+        console.error('Failed to fetch tasks', error);
+      }
+    },
+    async fetchSkillTags() {
+      // This is fine for a small number of tags, but more than a few hundred tags, we'd need to optimize
+      try {
+        const response = await databases.listDocuments(
+          AppwriteIds.databaseId,
+          AppwriteIds.collectionIdSkillTags
+        );
+        this.skillTags = response.documents as SkillTag[];
+      } catch (error) {
+        console.error('Failed to fetch tasks', error);
+      }
+    },
     async addTask(task: Task) {
       try {
         const response = await databases.createDocument(