Densify table

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/TaskEditComponent.vue

@@ -48,7 +48,7 @@
       <q-select
         label="Skills Required"
         hint="Add a list of required skills, to help people find things in their ability"
-        v-model="skillTagList"
+        v-model="modifiedTask.required_skills"
         use-input
         use-chips
         multiple
@@ -66,7 +66,7 @@
       <q-select
         label="Tags"
         hint="Add Tags to help with searching"
-        v-model="taskTagList"
+        v-model="modifiedTask.tags"
         use-input
         use-chips
         multiple
@@ -105,7 +105,7 @@
       <q-select
         label="Dependencies"
         hint="Add a list of tasks that need to be complete before this one"
-        v-model="dependsList"
+        v-model="modifiedTask.depends_on"
         use-input
         multiple
         input-debounce="250"
@@ -122,7 +122,6 @@
         hint="Add a boat, if applicable"
         v-model="modifiedTask.boat"
         use-input
-        emit-value
         input-debounce="250"
         :options="boatList"
         option-label="name"
@@ -158,7 +157,7 @@ import type { TaskTag, SkillTag, Task } from 'src/stores/task';
 import { date } from 'quasar';
 import { Boat, useBoatStore } from 'src/stores/boat';
 
-const props = defineProps<{ taskId: string }>();
+const props = defineProps<{ taskId?: string }>();
 const taskStore = useTaskStore();
 
 const defaultTask = <Task>{
@@ -172,7 +171,6 @@ const defaultTask = <Task>{
   volunteers_required: 0,
   status: 'ready',
   depends_on: [],
-  boat: '',
 };
 
 const { taskId } = props;
@@ -188,12 +186,7 @@ const tasks = ref<Task[]>(taskStore.tasks);
 const boatList = ref<Boat[]>(useBoatStore().boats);
 
 const skillTagOptions = ref<SkillTag[]>();
-const skillTagList = ref<SkillTag[]>([]);
-
 const taskTagOptions = ref<TaskTag[]>();
-const taskTagList = ref<TaskTag[]>([]);
-
-const dependsList = ref<Task[]>([]);
 
 function filterSkillTags(val: string, update: (cb: () => void) => void): void {
   return filterTags(skillTagOptions, taskStore.skillTags, val, update);
@@ -215,7 +208,7 @@ function filterTasks(val: string, update: (cb: () => void) => void): void {
 }
 
 function filterTags(
-  optionVar: Ref<SkillTag[] | TaskTag[] | undefined>,
+  optionVar: Ref<(SkillTag | TaskTag)[] | undefined>,
   optionSrc: SkillTag[] | TaskTag[],
   val: string,
   update: (cb: () => void) => void
@@ -251,13 +244,6 @@ const router = useRouter();
 async function onSubmit() {
   console.log(modifiedTask);
   try {
-    // It would probably be more performant to store the tags as objects in the
-    // form, and then extract the ID's before submitting.
-    modifiedTask.required_skills = skillTagList.value.map((s) => s['$id']);
-    modifiedTask.tags = taskTagList.value.map((s) => s['$id']);
-    modifiedTask.depends_on = dependsList.value.map(
-      (d) => d['$id']
-    ) as string[];
     await taskStore.addTask(modifiedTask);
     console.log('Created Task');
     router.go(-1);

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

@@ -1,18 +1,21 @@
 <template>
-  <div class="q-pa-md">
+  <div class="q-pa-sm">
     <q-table
       :rows="tasks"
       :columns="columns"
+      dense
       row-key="$id"
       no-data-label="I didn't find anything for you"
       no-results-label="The filter didn't uncover any results"
+      selection="multiple"
+      v-model:selected="selected"
     >
       <template v-slot:top>
         <q-btn
           color="primary"
           :disable="loading"
           label="New Task"
-          to="/task/new"
+          to="/task/edit"
         />
         <q-btn
           v-if="tasks.length !== 0"
@@ -20,21 +23,58 @@
           color="primary"
           :disable="loading"
           label="Delete task(s)"
-          @click="deleteTask"
+          @click="deleteTasks"
         />
         <q-space />
-        <q-input
+        <q-input borderless debounce="300" color="primary" v-model="filter">
-          borderless
-          dense
-          debounce="300"
-          color="primary"
-          v-model="filter"
-        >
           <template v-slot:append>
             <q-icon name="search" />
           </template>
         </q-input>
       </template>
+      <template v-slot:header="props">
+        <q-tr :props="props">
+          <q-th key="desc" auto-width>
+            <q-checkbox dense v-model="props.selected"></q-checkbox>
+          </q-th>
+          <q-th v-for="col in props.cols" :key="col.name" :props="props">
+            {{ col.label }}
+          </q-th>
+        </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>
     </q-table>
   </div>
 </template>
@@ -42,8 +82,11 @@
 <script setup lang="ts">
 import { defineProps, ref } from 'vue';
 import { useTaskStore, Task } from 'src/stores/task';
-import type { QTableProps } 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
 const columns = <QTableProps['columns']>[
   {
@@ -55,11 +98,12 @@ const columns = <QTableProps['columns']>[
     sortable: true,
   },
   {
-    name: 'description',
+    name: 'due_date',
     align: 'left',
-    label: 'Description',
+    label: 'Due Date',
-    field: 'description',
+    field: 'due_date',
-    sortable: false,
+    format: (val) => date.formatDate(val, 'MMM DD, YYYY'),
+    sortable: true,
   },
   {
     name: 'status',
@@ -68,18 +112,85 @@ const columns = <QTableProps['columns']>[
     field: 'status',
     sortable: true,
   },
+  {
+    name: 'skills',
+    align: 'left',
+    label: 'Skills',
+    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 newTask() {
+function lookupTaskFromId(id: string): Task {
-  return;
+  return taskStore.tasks.find((t) => t.$id === id) || undefined;
 }
-function deleteTask() {
+
+function deleteTasks() {
+  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('');
 </script>

src/pages/task/TaskEditPage.vue

@@ -2,7 +2,7 @@
   <ToolbarComponent pageTitle="Tasks" />
   <q-page padding>
     <div class="q-pa-md" style="max-width: 400px">
-      <TaskEditComponent taskId="660eb3627974223bb47a" />
+      <TaskEditComponent />
     </div>
   </q-page>
 </template>

src/router/routes.ts

@@ -57,9 +57,9 @@ const routes: RouteRecordRaw[] = [
             name: 'task-index',
           },
           {
-            path: 'new',
+            path: 'edit',
-            component: () => import('pages/task/NewTaskPage.vue'),
+            component: () => import('pages/task/TaskEditPage.vue'),
-            name: 'new-task',
+            name: 'edit-task',
           },
         ],
       },

src/stores/task.ts

@@ -1,30 +1,33 @@
 import { defineStore } from 'pinia';
 import { AppwriteIds, databases, ID } from 'src/boot/appwrite';
 import type { Models } from 'appwrite';
+import { Boat } from './boat';
 
 export const TASKSTATUS = ['ready', 'complete', 'waiting', 'archived'];
 
 export interface Task extends Partial<Models.Document> {
   title: string;
   description: string;
-  required_skills: string[];
+  required_skills: SkillTag[];
-  tags: string[];
+  tags: TaskTag[];
   due_date: string;
   duration: number;
   volunteers: string[];
   volunteers_required: number;
   status: string;
-  depends_on: string[];
+  depends_on: Task[];
-  boat: string;
+  boat?: Boat;
 } // TODO: convert some of these strings into objects.
 
 export interface TaskTag extends Models.Document {
   name: string;
   description: string;
+  colour: string;
 }
 export interface SkillTag extends Models.Document {
   name: string;
   description: string;
+  tagColour: string;
 }
 
 export const useTaskStore = defineStore('tasks', {
@@ -37,11 +40,30 @@ export const useTaskStore = defineStore('tasks', {
   actions: {
     async fetchTasks() {
       try {
+        await this.fetchTaskTags();
+        await this.fetchSkillTags();
         const response = await databases.listDocuments(
           AppwriteIds.databaseId,
           AppwriteIds.collectionIdTask
         );
-        this.tasks = response.documents as Task[];
+        this.tasks = response.documents.map((document) => {
+          // TODO: Should this be a GraphQL query, instead?
+          // Map over `required_skills` and replace each skill ID with the corresponding skill object from `this.skillTags`
+          const updatedRequiredSkills = document.required_skills.map(
+            (skillId: string) =>
+              this.skillTags.find((skillTag) => skillTag.$id === skillId) || {}
+          );
+          const updatedTaskTags = document.tags.map((tagid: string) =>
+            this.taskTags.find((taskTag) => taskTag.$id === tagid)
+          );
+
+          // Update the `required_skills` property of the document with the new array of skill objects
+          return {
+            ...document,
+            required_skills: updatedRequiredSkills,
+            tags: updatedTaskTags,
+          };
+        }) as Task[];
       } catch (error) {
         console.error('Failed to fetch tasks', error);
       }
@@ -70,13 +92,36 @@ export const useTaskStore = defineStore('tasks', {
         console.error('Failed to fetch skill tags', error);
       }
     },
+    async deleteTask(task: Task | string) {
+      const docId = typeof task === 'string' ? task : task.$id;
+      if (docId === undefined) {
+        console.error('No document ID provided to deleteTask!');
+        return;
+      }
+      try {
+        const response = await databases.deleteDocument(
+          AppwriteIds.databaseId,
+          AppwriteIds.collectionIdTask,
+          docId
+        );
+        this.tasks = this.tasks.filter((task) => docId !== task.$id);
+      } catch (error) {
+        // Need some better error handling, here.
+        console.error('Failed to delete task:', error);
+      }
+    },
     async addTask(task: Task) {
+      const newTask = <Models.Document>{ ...task };
+      newTask.required_skills = task.required_skills.map((s) => s['$id']);
+      newTask.tags = task.tags.map((s) => s['$id']);
+      newTask.depends_on = task.depends_on.map((d) => d['$id']);
+      newTask.boat = task.boat?.$id;
       try {
         const response = await databases.createDocument(
           AppwriteIds.databaseId,
           AppwriteIds.collectionIdTask,
           ID.unique(),
-          task
+          newTask
         );
         this.tasks.push(response as Task);
       } catch (error) {