Updates to Tasks

src/components/task/TaskEditComponent.vue

@@ -1,5 +1,5 @@
 <template>
-  <q-form @submit="onSubmit" @reset="onReset" class="q-gutter-md">
+  <q-form @submit="onSubmit" class="q-gutter-md">
     <q-input
       filled
       v-model="modifiedTask.title"
@@ -52,6 +52,9 @@
         use-input
         use-chips
         multiple
+        clearable
+        emit-value
+        map-options
         input-debounce="250"
         @new-value="addTag"
         :options="skillTagOptions"
@@ -70,13 +73,14 @@
         use-input
         use-chips
         multiple
+        clearable
+        emit-value
+        map-options
         input-debounce="250"
-        @new-value="addTag"
         :options="taskTagOptions"
         option-label="name"
         option-value="$id"
         @filter="filterTaskTags"
-        new-value-mode="add-unique"
       >
       </q-select>
     </div>
@@ -108,6 +112,9 @@
         v-model="modifiedTask.depends_on"
         use-input
         multiple
+        clearable
+        emit-value
+        map-options
         input-debounce="250"
         :options="tasks"
         option-label="title"
@@ -122,6 +129,9 @@
         hint="Add a boat, if applicable"
         v-model="modifiedTask.boat"
         use-input
+        clearable
+        emit-value
+        map-options
         input-debounce="250"
         :options="boatList"
         option-label="name"
@@ -137,7 +147,6 @@
         flat
         class="q-ml-sm"
       />
-      <q-btn label="Reset" type="reset" color="primary" flat class="q-ml-sm" />
       <q-btn
         label="Cancel"
         color="secondary"
@@ -173,20 +182,17 @@ const defaultTask = <Task>{
   depends_on: [],
 };
 
+taskStore.fetchTasks();
+
 const { taskId } = props;
 const targetTask = taskId && taskStore.tasks.find((t) => t.$id === taskId);
 const modifiedTask = reactive(targetTask ? targetTask : defaultTask);
 
-taskStore.fetchSkillTags();
+let tasks = taskStore.tasks;
-taskStore.fetchTaskTags();
-taskStore.fetchTasks();
-
-const tasks = ref<Task[]>(taskStore.tasks);
-
 const boatList = ref<Boat[]>(useBoatStore().boats);
 
-const skillTagOptions = ref<SkillTag[]>();
+const skillTagOptions = ref<SkillTag[]>(taskStore.skillTags);
-const taskTagOptions = ref<TaskTag[]>();
+const taskTagOptions = ref<TaskTag[]>(taskStore.taskTags);
 
 function filterSkillTags(val: string, update: (cb: () => void) => void): void {
   return filterTags(skillTagOptions, taskStore.skillTags, val, update);
@@ -197,13 +203,13 @@ function filterTaskTags(val: string, update: (cb: () => void) => void): void {
 function filterTasks(val: string, update: (cb: () => void) => void): void {
   if (val === '') {
     update(() => {
-      tasks.value = taskStore.tasks;
+      tasks = taskStore.tasks;
     });
     return;
   }
 
   update(() => {
-    tasks.value = taskStore.filterTasks(val);
+    tasks = taskStore.filterTasksByTitle(val);
   });
 }
 
@@ -242,17 +248,18 @@ const dateRule = (val: string) => {
 const router = useRouter();
 
 async function onSubmit() {
-  console.log(modifiedTask);
+  //console.log(modifiedTask);
   try {
-    await taskStore.addTask(modifiedTask);
+    if (modifiedTask.$id) {
-    console.log('Created Task');
+      await taskStore.updateTask(modifiedTask);
+      console.log('Updated Task: ' + modifiedTask.$id);
+    } else {
+      await taskStore.addTask(modifiedTask);
+      console.log('Created Task');
+    }
     router.go(-1);
   } catch (error) {
     console.error('Failed to create new Task: ', error);
   }
 }
-
-function onReset() {
-  return;
-}
 </script>

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">
+      <template v-slot:body-cell-skills="props">
-        <q-tr :props="props">
+        <q-td :props="props" class="q-gutter-sm">
-          <q-td key="desc" auto-width>
+          <q-badge
-            <q-checkbox dense v-model="props.selected"></q-checkbox>
+            v-for="skill in props.value"
-          </q-td>
+            :key="skill"
-          <q-td v-for="col in props.cols" :key="col.name" :props="props">
+            :color="skill.tagColour"
-            <div v-if="col.name == 'skills'" class="q-gutter-sm">
+            text-color="white"
-              <q-badge
+            :label="skill.name"
-                v-for="skill in props.row.required_skills"
+          />
-                :key="skill"
+        </q-td>
-                :color="skill.tagColour"
+      </template>
-                text-color="white"
+
-              >
+      <template v-slot:body-cell-tags="props">
-                {{ skill.name }}
+        <q-td :props="props" class="q-gutter-sm">
-              </q-badge>
+          <q-badge
-            </div>
+            v-for="tag in props.value"
-            <div v-else-if="col.name == 'tags'" class="q-gutter-sm">
+            :key="tag"
-              <q-badge
+            :color="tag.colour"
-                v-for="tag in props.row.tags"
+            text-color="white"
-                :key="tag"
+            :label="tag.name"
-                :color="tag.colour"
+          />
-                text-color="white"
+        </q-td>
-              >
-                {{ tag.name }}
-              </q-badge>
-            </div>
-            <div v-else>
-              {{ col.value }}
-            </div>
-          </q-td>
-        </q-tr>
       </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 {
+function onRowClick(evt: Event, row: Task) {
-  return taskStore.tasks.find((t) => t.$id === id) || undefined;
+  console.log(row);
+  router.push({ name: 'edit-task', params: { id: row.$id } });
 }
 
 function deleteTasks() {

src/pages/task/TaskEditPage.vue

@@ -2,12 +2,15 @@
   <ToolbarComponent pageTitle="Tasks" />
   <q-page padding>
     <div class="q-pa-md" style="max-width: 400px">
-      <TaskEditComponent />
+      <TaskEditComponent :taskId="taskId" />
     </div>
   </q-page>
 </template>
 
 <script setup lang="ts">
+const taskId = useRoute().params.id as string;
+console.log(taskId);
 import ToolbarComponent from 'src/components/ToolbarComponent.vue';
 import TaskEditComponent from 'src/components/task/TaskEditComponent.vue';
+import { useRoute } from 'vue-router';
 </script>

src/router/routes.ts

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

src/stores/task.ts

@@ -1,23 +1,27 @@
 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: SkillTag[];
+  /* Array of Appwrite Document IDs */
-  tags: TaskTag[];
+  required_skills: string[];
+  /* Array of Appwrite Document IDs */
+  tags: string[];
   due_date: string;
   duration: number;
+  /* Array of Appwrite Document IDs */
   volunteers: string[];
   volunteers_required: number;
   status: string;
-  depends_on: Task[];
+  /* Array of Appwrite Document IDs */
-  boat?: Boat;
+  depends_on: string[];
-} // TODO: convert some of these strings into objects.
+  /* Appwrite ID of a Boat resource */
+  boat?: string[];
+}
 
 export interface TaskTag extends Models.Document {
   name: string;
@@ -46,24 +50,7 @@ export const useTaskStore = defineStore('tasks', {
           AppwriteIds.databaseId,
           AppwriteIds.collectionIdTask
         );
-        this.tasks = response.documents.map((document) => {
+        this.tasks = response.documents as Task[];
-          // 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);
       }
@@ -112,10 +99,6 @@ 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']);
-      newTask.boat = task.boat?.$id;
       try {
         const response = await databases.createDocument(
           AppwriteIds.databaseId,
@@ -128,9 +111,32 @@ export const useTaskStore = defineStore('tasks', {
         console.error('Failed to add task:', error);
       }
     },
+    async updateTask(task: Task) {
+      const newTask = <Partial<Models.Document>>{
+        ...task,
+        id: undefined,
+        $databaseId: undefined,
+        $collectionId: undefined,
+      };
+      if (!task.$id) {
+        console.error('No Task ID!');
+        return;
+      }
+      try {
+        const response = await databases.updateDocument(
+          AppwriteIds.databaseId,
+          AppwriteIds.collectionIdTask,
+          task.$id,
+          newTask
+        );
+        this.tasks.push(response as Task);
+      } catch (error) {
+        console.error('Failed to update task:', error);
+      }
+    },
     // TODO: Enhance this store to include offline caching, and subscription notification when items change on the server.
 
-    filterTasks(searchQuery: string) {
+    filterTasksByTitle(searchQuery: string) {
       const result = this.tasks.filter((task) =>
         task.title.toLowerCase().includes(searchQuery.toLowerCase())
       );
@@ -140,20 +146,14 @@ export const useTaskStore = defineStore('tasks', {
   },
   // Add more actions as needed (e.g., updateTask, deleteTask)
   getters: {
-    // A getter to reconstruct the hierarchical structure from flat task data
+    getTaskById: (state) => (id: string) => {
-    taskHierarchy: (state) => {
+      return state.tasks.find((task) => task.$id === id) || null;
-      function buildHierarchy(
+    },
-        tasks: Task[],
+    getTaskTagById: (state) => (id: string) => {
-        parentId: string | null = null
+      return state.taskTags.find((tag) => tag.$id === id) || null;
-      ): Task[] {
+    },
-        return tasks
+    getSkillById: (state) => (id: string) => {
-          .filter((task) => task.parentId === parentId)
+      return state.skillTags.find((tag) => tag.$id === id) || null;
-          .map((task) => ({
-            ...task,
-            subtasks: buildHierarchy(tasks, task.$id), // Assuming $id is the task ID field
-          }));
-      }
-      return buildHierarchy(state.tasks);
     },
   },
 });