Basic Task Display

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>