Task list improvements

src/components/task/TaskCardComponent.vue

@@ -13,7 +13,6 @@
     >
       <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>
 

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,13 +52,14 @@
         use-input
         use-chips
         multiple
+        clearable
+        emit-value
+        map-options
         input-debounce="250"
-        @new-value="addTag"
         :options="skillTagOptions"
         option-label="name"
         option-value="$id"
         @filter="filterSkillTags"
-        new-value-mode="add-unique"
       >
       </q-select>
     </div>
@@ -70,13 +71,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 +110,9 @@
         v-model="modifiedTask.depends_on"
         use-input
         multiple
+        clearable
+        emit-value
+        map-options
         input-debounce="250"
         :options="tasks"
         option-label="title"
@@ -122,6 +127,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 +145,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"
@@ -150,7 +157,7 @@
 </template>
 
 <script setup lang="ts">
-import { reactive, ref, Ref } from 'vue';
+import { computed, reactive, ref, Ref } from 'vue';
 import { useRouter } from 'vue-router';
 import { useTaskStore, TASKSTATUS } from 'src/stores/task';
 import type { TaskTag, SkillTag, Task } from 'src/stores/task';
@@ -173,39 +180,45 @@ 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();
-taskStore.fetchTaskTags();
-taskStore.fetchTasks();
-
-const tasks = ref<Task[]>(taskStore.tasks);
-
+let tasks = taskStore.tasks;
 const boatList = ref<Boat[]>(useBoatStore().boats);
 
-const skillTagOptions = ref<SkillTag[]>();
-const taskTagOptions = ref<TaskTag[]>();
+const skillTagOptions = ref<SkillTag[]>(taskStore.skillTags);
+const taskTagOptions = ref<TaskTag[]>(taskStore.taskTags);
 
-function filterSkillTags(val: string, update: (cb: () => void) => void): void {
-  return filterTags(skillTagOptions, taskStore.skillTags, val, update);
-}
-function filterTaskTags(val: string, update: (cb: () => void) => void): void {
-  return filterTags(taskTagOptions, taskStore.taskTags, val, update);
-}
-function filterTasks(val: string, update: (cb: () => void) => void): void {
-  if (val === '') {
-    update(() => {
-      tasks.value = taskStore.tasks;
-    });
-    return;
-  }
+const filterSkillTags = computed(
+  () =>
+    (val: string, update: (cb: () => void) => void): void => {
+      return filterTags(skillTagOptions, taskStore.skillTags, val, update);
+    }
+);
+const filterTaskTags = computed(
+  () =>
+    (val: string, update: (cb: () => void) => void): void => {
+      return filterTags(taskTagOptions, taskStore.taskTags, val, update);
+    }
+);
+const filterTasks = computed(
+  () =>
+    (val: string, update: (cb: () => void) => void): void => {
+      if (val === '') {
+        update(() => {
+          tasks = taskStore.tasks;
+        });
+        return;
+      }
 
-  update(() => {
-    tasks.value = taskStore.filterTasks(val);
-  });
-}
+      update(() => {
+        tasks = taskStore.filterTasksByTitle(val);
+      });
+    }
+);
 
 function filterTags(
   optionVar: Ref<(SkillTag | TaskTag)[] | undefined>,
@@ -227,9 +240,6 @@ function filterTags(
   });
 }
 
-function addTag(tag: string) {
-  return;
-}
 // Method to update the model in ISO 8601 format
 const updateDateISO = (value: string) => {
   modifiedTask.due_date = date.formatDate(value, 'YYYY-MM-DD');
@@ -242,17 +252,18 @@ const dateRule = (val: string) => {
 const router = useRouter();
 
 async function onSubmit() {
-  console.log(modifiedTask);
+  //console.log(modifiedTask);
   try {
-    await taskStore.addTask(modifiedTask);
-    console.log('Created Task');
+    if (modifiedTask.$id) {
+      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

@@ -3,30 +3,55 @@
     <q-table
       :rows="tasks"
       :columns="columns"
+      :grid="$q.screen.xs"
       dense
       row-key="$id"
+      flatten
       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"
+      :filter="searchFilter"
+      :filter-method="filterRows"
     >
       <template v-slot:top>
-        <q-btn
-          color="primary"
-          :disable="loading"
-          label="New Task"
-          to="/task/edit"
-        />
-        <q-btn
-          v-if="tasks.length !== 0"
-          class="q-ml-sm"
-          color="primary"
-          :disable="loading"
-          label="Delete task(s)"
-          @click="deleteTasks"
-        />
+        <q-select
+          style="width: 250px"
+          multiple
+          use-chips
+          clearable
+          label="Skills Filter"
+          input-debounce="250"
+          :options="skillTagOptions"
+          v-model="searchFilter.skillTags"
+          option-label="name"
+          option-value="$id"
+        >
+        </q-select>
+        <q-select
+          style="width: 250px"
+          multiple
+          use-chips
+          clearable
+          label="Tag Filter"
+          input-debounce="250"
+          :options="taskTagOptions"
+          v-model="searchFilter.taskTags"
+          option-label="name"
+          option-value="$id"
+        >
+          <template v-slot: prepend>
+            <q-icon name="wrench"></q-icon>
+          </template>
+        </q-select>
         <q-space />
-        <q-input borderless debounce="300" color="primary" v-model="filter">
+        <q-input
+          flatten
+          debounce="300"
+          color="primary"
+          clearable
+          v-model="searchFilter.title"
+        >
           <template v-slot:append>
             <q-icon name="search" />
           </template>
@@ -43,51 +68,160 @@
         </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"
+      <template v-slot:body-cell-skills="props">
+        <q-td :props="props" class="q-gutter-sm">
+          <q-badge
+            v-for="skill in props.value"
+            :key="skill"
+            :color="skill.tagColour"
+            text-color="white"
+            :label="skill.name"
+          />
+        </q-td>
+      </template>
+
+      <template v-slot:body-cell-tags="props">
+        <q-td :props="props" class="q-gutter-sm">
+          <q-badge
+            v-for="tag in props.value"
+            :key="tag"
+            :color="tag.colour"
+            text-color="white"
+            :label="tag.name"
+          />
+        </q-td>
+      </template>
+      <template v-slot:body-cell-actions="props">
+        <q-td :props="props" class="q-gutter-sm">
+          <q-btn
+            label="Sign Up"
+            size="sm"
+            color="primary"
+            :to="{ name: 'signup-task', params: { id: props.value } }"
+          />
+          <q-btn
+            label="Edit"
+            size="sm"
+            color="primary"
+            :to="{ name: 'edit-task', params: { id: props.value } }"
+          />
+        </q-td>
+      </template>
+      <template v-slot:item="props">
+        <div
+          class="q-pa-xs col-xs-12 col-sm-6 col-md-4 col-lg-3 grid-style-transition"
+          :style="props.selected ? 'transform: scale(0.95);' : ''"
+        >
+          <q-card
+            bordered
+            flat
+            :class="
+              props.selected
+                ? $q.dark.isActive
+                  ? 'bg-grey-9'
+                  : 'bg-grey-2'
+                : ''
+            "
+          >
+            <q-card-section>
+              <q-checkbox
+                dense
+                v-model="props.selected"
+                :label="props.row.name"
+              />
+            </q-card-section>
+            <q-separator />
+            <q-list dense>
+              <q-item
+                v-for="col in props.cols.filter((col) => col.name !== 'desc')"
+                :key="col.name"
               >
-                {{ 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>
+                <q-item-section>
+                  <q-item-label>{{ col.label }}</q-item-label>
+                </q-item-section>
+                <q-item-section side>
+                  <q-item-label caption v-if="col.name === 'skills'">
+                    <q-chip
+                      size="sm"
+                      v-for="skill in col.value"
+                      outline
+                      color="primary"
+                      :key="skill.$id"
+                      >{{ skill.name }}</q-chip
+                    ></q-item-label
+                  >
+                  <q-item-label caption v-else-if="col.name === 'tags'">
+                    <q-chip
+                      size="sm"
+                      v-for="tag in col.value"
+                      outline
+                      color="primary"
+                      :key="tag.$id"
+                      >{{ tag.name }}</q-chip
+                    ></q-item-label
+                  >
+                  <q-item-label caption v-else-if="col.name === 'actions'">
+                    <q-btn
+                      label="Sign Up"
+                      size="sm"
+                      color="primary"
+                      :to="{ name: 'signup-task', params: { id: col.value } }"
+                    />
+                    <q-btn
+                      label="Edit"
+                      size="sm"
+                      color="primary"
+                      :to="{ name: 'edit-task', params: { id: col.value } }"
+                    />
+                  </q-item-label>
+                  <q-item-label v-else caption>{{ col.value }}</q-item-label>
+                </q-item-section>
+              </q-item>
+            </q-list>
+          </q-card>
+        </div>
       </template>
     </q-table>
+    <q-page-sticky position="bottom-right" :offset="[18, 18]">
+      <q-fab
+        v-model="fabShow"
+        vertical-actions-align="right"
+        color="primary"
+        glossy
+        icon="keyboard_arrow_up"
+        direction="up"
+      >
+        <q-fab-action
+          color="primary"
+          :disable="loading"
+          label="New Task"
+          to="/task/edit"
+          icon="add"
+        />
+        <q-fab-action
+          v-if="tasks.length !== 0"
+          class="q-ml-sm"
+          color="primary"
+          :disable="loading"
+          label="Delete task(s)"
+          @click="deleteTasks"
+          icon="delete"
+        /> </q-fab
+    ></q-page-sticky>
   </div>
 </template>
 
 <script setup lang="ts">
-import { defineProps, ref } from 'vue';
-import { useTaskStore, Task } from 'src/stores/task';
+import { computed, defineProps, ref } from 'vue';
+import { useTaskStore, Task, SkillTag, TaskTag } 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 fabShow = ref(false);
 const columns = <QTableProps['columns']>[
   {
     name: 'title',
@@ -116,14 +250,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,
   },
   {
@@ -132,7 +267,7 @@ const columns = <QTableProps['columns']>[
     label: 'Boat',
     field: (row) =>
       useBoatStore().boats.find((boat) => boat.$id === row.boat)?.name,
-    sortable: false,
+    sortable: true,
   },
   {
     name: 'volunteers',
@@ -156,24 +291,56 @@ 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
       );
     },
   },
+  { name: 'actions', align: 'center', label: 'Actions', field: '$id' },
 ];
 
 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;
+const searchFilter = ref({
+  title: '',
+  skillTags: <SkillTag[]>[],
+  taskTags: <TaskTag[]>[],
+});
+
+const skillTagOptions = ref<SkillTag[]>(taskStore.skillTags);
+const taskTagOptions = ref<TaskTag[]>(taskStore.taskTags);
+
+function onRowClick(evt: Event, row: Task) {
+  router.push({ name: 'edit-task', params: { id: row.$id } });
 }
+// TODO: Implement server side search
+const filterRows = computed(
+  () => (rows: readonly Task[], terms: any, cols: any, cellValueFn: any) => {
+    let result = rows;
+    result = rows.filter((row) =>
+      terms.title
+        ? row.title.toLowerCase().includes(terms.title.toLowerCase())
+        : true
+    );
+    result = result.filter((row) =>
+      terms.skillTags && terms.skillTags.length > 0
+        ? row.required_skills.some((req_skill) =>
+            terms.skillTags.map((t) => t.$id).includes(req_skill)
+          )
+        : true
+    );
+    result = result.filter((row) =>
+      terms.taskTags && terms.taskTags.length > 0
+        ? row.tags.some((tag) => terms.taskTags.map((t) => t.$id).includes(tag))
+        : true
+    );
+    return result;
+  }
+);
 
 function deleteTasks() {
   confirmDelete(selected.value);
@@ -192,5 +359,4 @@ function confirmDelete(tasks: Task[]) {
     });
   });
 }
-const filter = ref('');
 </script>

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/pages/task/TaskPage.vue

@@ -1,15 +1,13 @@
 <template>
   <toolbar-component pageTitle="Tasks" />
   <q-page padding>
-    <TaskListComponent v-if="$q.screen.lt.sm" :tasks="taskStore.tasks" />
-    <TaskTableComponent v-else :tasks="taskStore.tasks" />
+    <TaskTableComponent :tasks="taskStore.tasks" />
   </q-page>
 </template>
 
 <script setup lang="ts">
 import { useTaskStore } from 'stores/task';
 import ToolbarComponent from 'src/components/ToolbarComponent.vue';
-import TaskListComponent from 'src/components/task/TaskListComponent.vue';
 import TaskTableComponent from 'src/components/task/TaskTableComponent.vue';
 
 const taskStore = useTaskStore();

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[];
-  tags: TaskTag[];
+  /* Array of Appwrite Document IDs */
+  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[];
-  boat?: Boat;
-} // TODO: convert some of these strings into objects.
+  /* Array of Appwrite Document IDs */
+  depends_on: string[];
+  /* 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) => {
-          // 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[];
+        this.tasks = response.documents 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,32 +111,48 @@ 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) {
-      const result = this.tasks.filter((task) =>
+  },
+  // Add more actions as needed (e.g., updateTask, deleteTask)
+  getters: {
+    getTaskById: (state) => (id: string) => {
+      return state.tasks.find((task) => task.$id === id) || null;
+    },
+    getTaskTagById: (state) => (id: string) => {
+      return state.taskTags.find((tag) => tag.$id === id) || null;
+    },
+    getSkillById: (state) => (id: string) => {
+      return state.skillTags.find((tag) => tag.$id === id) || null;
+    },
+    filterTasksByTitle: (state) => (searchQuery: string) => {
+      const result = state.tasks.filter((task) =>
         task.title.toLowerCase().includes(searchQuery.toLowerCase())
       );
       console.log(result);
       return result;
     },
   },
-  // Add more actions as needed (e.g., updateTask, deleteTask)
-  getters: {
-    // A getter to reconstruct the hierarchical structure from flat task data
-    taskHierarchy: (state) => {
-      function buildHierarchy(
-        tasks: Task[],
-        parentId: string | null = null
-      ): Task[] {
-        return tasks
-          .filter((task) => task.parentId === parentId)
-          .map((task) => ({
-            ...task,
-            subtasks: buildHierarchy(tasks, task.$id), // Assuming $id is the task ID field
-          }));
-      }
-      return buildHierarchy(state.tasks);
-    },
-  },
 });