Updates to Tasks

src/components/task/TaskTableComponent.vue

@@ -9,6 +9,7 @@
       no-results-label="The filter didn't uncover any results"
       selection="multiple"
       v-model:selected="selected"
+      @row-click="onRowClick"
     >
       <template v-slot:top>
         <q-btn
@@ -43,37 +44,28 @@
         </q-tr>
       </template>
 
-      <template v-slot:body="props">
-        <q-tr :props="props">
-          <q-td key="desc" auto-width>
-            <q-checkbox dense v-model="props.selected"></q-checkbox>
-          </q-td>
-          <q-td v-for="col in props.cols" :key="col.name" :props="props">
-            <div v-if="col.name == 'skills'" class="q-gutter-sm">
-              <q-badge
-                v-for="skill in props.row.required_skills"
-                :key="skill"
-                :color="skill.tagColour"
-                text-color="white"
-              >
-                {{ skill.name }}
-              </q-badge>
-            </div>
-            <div v-else-if="col.name == 'tags'" class="q-gutter-sm">
-              <q-badge
-                v-for="tag in props.row.tags"
-                :key="tag"
-                :color="tag.colour"
-                text-color="white"
-              >
-                {{ tag.name }}
-              </q-badge>
-            </div>
-            <div v-else>
-              {{ col.value }}
-            </div>
-          </q-td>
-        </q-tr>
+      <template v-slot:body-cell-skills="props">
+        <q-td :props="props" class="q-gutter-sm">
+          <q-badge
+            v-for="skill in props.value"
+            :key="skill"
+            :color="skill.tagColour"
+            text-color="white"
+            :label="skill.name"
+          />
+        </q-td>
+      </template>
+
+      <template v-slot:body-cell-tags="props">
+        <q-td :props="props" class="q-gutter-sm">
+          <q-badge
+            v-for="tag in props.value"
+            :key="tag"
+            :color="tag.colour"
+            text-color="white"
+            :label="tag.name"
+          />
+        </q-td>
       </template>
     </q-table>
   </div>
@@ -84,8 +76,9 @@ import { defineProps, ref } from 'vue';
 import { useTaskStore, Task } from 'src/stores/task';
 import { QTableProps, date, useQuasar } from 'quasar';
 import { useBoatStore } from 'src/stores/boat';
-import BoatPickerComponent from '../boat/BoatPickerComponent.vue';
+import { useRouter } from 'vue-router';
 
+const router = useRouter();
 const selected = ref([]);
 const loading = ref(false); // Placeholder
 const columns = <QTableProps['columns']>[
@@ -116,14 +109,15 @@ const columns = <QTableProps['columns']>[
     name: 'skills',
     align: 'left',
     label: 'Skills',
-    field: 'required_skills',
+    field: (row) =>
+      row.required_skills.map((s: string) => taskStore.getSkillById(s)),
     sortable: false,
   },
   {
     name: 'tags',
     align: 'left',
     label: 'Tags',
-    field: 'tags',
+    field: (row) => row.tags.map((s: string) => taskStore.getTaskTagById(s)),
     sortable: false,
   },
   {
@@ -156,7 +150,7 @@ const columns = <QTableProps['columns']>[
     format: (val) => {
       return (
         val
-          .map((t: string) => lookupTaskFromId(t))
+          .map((t: string) => taskStore.getTaskById(t))
           .filter((t: Task) => t)
           .map((t: Task) => t.title)
           .join(', ') || null
@@ -168,11 +162,10 @@ const columns = <QTableProps['columns']>[
 const props = defineProps<{ tasks: Task[] }>();
 const taskStore = useTaskStore();
 const $q = useQuasar();
-taskStore.fetchTaskTags();
-taskStore.fetchSkillTags();
 
-function lookupTaskFromId(id: string): Task {
-  return taskStore.tasks.find((t) => t.$id === id) || undefined;
+function onRowClick(evt: Event, row: Task) {
+  console.log(row);
+  router.push({ name: 'edit-task', params: { id: row.$id } });
 }
 
 function deleteTasks() {