Added task functionality

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"
@@ -158,7 +158,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>{
@@ -188,12 +188,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);
@@ -251,13 +246,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/TaskTableComponent.vue

@@ -6,13 +6,15 @@
       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"
@@ -35,6 +37,57 @@
           </template>
         </q-input>
       </template>
+      <template v-slot:header="props">
+        <q-tr :props="props">
+          <q-th auto-width />
+          <q-th auto-width />
+          <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 v-model="props.selected"></q-checkbox>
+          </q-td>
+          <q-td auto-width>
+            <q-btn
+              size="sm"
+              color="primary"
+              round
+              dense
+              @click="props.expand = !props.expand"
+              :icon="props.expand ? 'remove' : 'add'"
+            />
+          </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">
+              <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>
+              {{ col.value }}
+            </div>
+          </q-td>
+        </q-tr>
+        <q-tr v-show="props.expand" :props="props">
+          <q-td auto-width />
+          <q-td auto-width />
+          <q-td colspan="100%">
+            <div class="text-left">
+              {{ props.row.description }}
+            </div>
+          </q-td>
+        </q-tr>
+      </template>
     </q-table>
   </div>
 </template>
@@ -42,8 +95,9 @@
 <script setup lang="ts">
 import { defineProps, ref } from 'vue';
 import { useTaskStore, Task } from 'src/stores/task';
-import type { QTableProps } from 'quasar';
+import { QTableProps, date } from 'quasar';
 
+const selected = ref([]);
 const loading = ref(false); // Placeholder
 const columns = <QTableProps['columns']>[
   {
@@ -55,11 +109,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,6 +123,13 @@ const columns = <QTableProps['columns']>[
     field: 'status',
     sortable: true,
   },
+  {
+    name: 'skills',
+    align: 'left',
+    label: 'Skills',
+    field: 'required_skills',
+    sortable: false,
+  },
 ];
 
 const props = defineProps<{ tasks: Task[] }>();
@@ -75,9 +137,6 @@ const taskStore = useTaskStore();
 taskStore.fetchTaskTags();
 taskStore.fetchSkillTags();
 
-function newTask() {
-  return;
-}
 function deleteTask() {
   return;
 }

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

@@ -7,24 +7,26 @@ 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;
 } // 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', {
@@ -41,7 +43,24 @@ export const useTaskStore = defineStore('tasks', {
           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);
       }
@@ -71,12 +90,16 @@ export const useTaskStore = defineStore('tasks', {
       }
     },
     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']);
       try {
         const response = await databases.createDocument(
           AppwriteIds.databaseId,
           AppwriteIds.collectionIdTask,
           ID.unique(),
-          task
+          newTask
         );
         this.tasks.push(response as Task);
       } catch (error) {