Task List Enhancements

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('');