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

@@ -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">
-        <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 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>
     </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 {
-  return taskStore.tasks.find((t) => t.$id === id) || undefined;
+function onRowClick(evt: Event, row: Task) {
+  console.log(row);
+  router.push({ name: 'edit-task', params: { id: row.$id } });
 }
 
 function deleteTasks() {