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>