Task List Enhancements

src/components/task/TaskCardComponent.vue

@@ -0,0 +1,25 @@
+<template>
+  <q-card>
+    <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.due_date }}</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/ -->
+  </q-card>
+</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/TaskComponent.vue

@@ -1,23 +0,0 @@
-<template>
-  <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.due_date }}</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

@@ -2,7 +2,7 @@
   <div class="q-pa-md" style="max-width: 350px">
     <q-list>
       <div v-for="task in tasks" :key="task.id">
-        <TaskComponent :task="task" />
+        <TaskCardComponent :task="task" />
       </div>
     </q-list>
   </div>
@@ -11,7 +11,7 @@
 <script setup lang="ts">
 import { defineProps } from 'vue';
 import type { Task } from 'src/stores/task';
-import TaskComponent from './TaskComponent.vue';
+import TaskCardComponent from './TaskCardComponent.vue';
 
 const props = defineProps<{ tasks: Task[] }>();
 </script>

src/components/task/TaskTableComponent.vue

@@ -39,7 +39,9 @@
       </template>
       <template v-slot:header="props">
         <q-tr :props="props">
-          <q-th auto-width />
+          <q-th key="desc" auto-width>
+            <q-checkbox v-model="props.selected"></q-checkbox>
+          </q-th>
           <q-th auto-width />
           <q-th v-for="col in props.cols" :key="col.name" :props="props">
             {{ col.label }}
@@ -63,7 +65,7 @@
             />
           </q-td>
           <q-td v-for="col in props.cols" :key="col.name" :props="props">
-            <div v-if="col.name == 'skills'" class="q-gutter-xs">
+            <div v-if="col.name == 'skills'" class="q-gutter-sm">
               <q-badge
                 v-for="skill in props.row.required_skills"
                 :key="skill"
@@ -73,6 +75,16 @@
                 {{ 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>
@@ -82,9 +94,7 @@
           <q-td auto-width />
           <q-td auto-width />
           <q-td colspan="100%">
-            <div class="text-left">
-              {{ props.row.description }}
-            </div>
+            <div class="text-left">{{ props.row.description }}<br /></div>
           </q-td>
         </q-tr>
       </template>
@@ -95,7 +105,9 @@
 <script setup lang="ts">
 import { defineProps, ref } from 'vue';
 import { useTaskStore, Task } from 'src/stores/task';
-import { QTableProps, date } from 'quasar';
+import { QTableProps, date, useQuasar } from 'quasar';
+import { useBoatStore } from 'src/stores/boat';
+import BoatPickerComponent from '../boat/BoatPickerComponent.vue';
 
 const selected = ref([]);
 const loading = ref(false); // Placeholder
@@ -130,18 +142,77 @@ const columns = <QTableProps['columns']>[
     field: 'required_skills',
     sortable: false,
   },
+  {
+    name: 'tags',
+    align: 'left',
+    label: 'Tags',
+    field: 'tags',
+    sortable: false,
+  },
+  {
+    name: 'boat',
+    align: 'left',
+    label: 'Boat',
+    field: (row) =>
+      useBoatStore().boats.find((boat) => boat.$id === row.boat)?.name,
+    sortable: false,
+  },
+  {
+    name: 'volunteers',
+    align: 'left',
+    label: "People Req'd",
+    field: 'volunteers_required',
+    sortable: false,
+  },
+  {
+    name: 'signedup',
+    align: 'left',
+    label: 'Signed Up',
+    field: (row) => row.volunteers.length,
+    sortable: false,
+  },
+  {
+    name: 'depends',
+    align: 'left',
+    label: 'Dependent Tasks',
+    field: 'depends_on',
+    format: (val) => {
+      return (
+        val
+          .map((t: string) => lookupTaskFromId(t))
+          .filter((t: Task) => t)
+          .map((t: Task) => t.title)
+          .join(', ') || null
+      );
+    },
+  },
 ];
 
 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 deleteTasks() {
-  selected.value.map((task: Task) => {
-    console.log('Deleting Task: ' + task.$id);
-    taskStore.deleteTask(task);
-    return;
+  confirmDelete(selected.value);
+}
+function confirmDelete(tasks: Task[]) {
+  $q.dialog({
+    title: 'Confirm',
+    message:
+      'You are about to delete ' + tasks.length + ' tasks.  Are you sure?',
+    cancel: true,
+    persistent: true,
+  }).onOk(() => {
+    selected.value.map((task: Task) => {
+      taskStore.deleteTask(task);
+      return;
+    });
   });
 }
 const filter = ref('');

src/stores/task.ts

@@ -40,6 +40,8 @@ export const useTaskStore = defineStore('tasks', {
   actions: {
     async fetchTasks() {
       try {
+        await this.fetchTaskTags();
+        await this.fetchSkillTags();
         const response = await databases.listDocuments(
           AppwriteIds.databaseId,
           AppwriteIds.collectionIdTask