Basic New Task

src/pages/task/NewTaskPage.vue

@@ -10,7 +10,7 @@
           hint="A short description of the task"
           lazy-rules
           :rules="[
-            (val) =>
+            (val: string | any[]) =>
               (val && val.length > 0) || 'Please enter a title for the task',
           ]"
         />
@@ -25,7 +25,7 @@
 
         <q-input
           filled
-          v-model="newTask.dueDate"
+          v-model="newTask.due_date"
           mask="date"
           :rules="[dateRule]"
           hint="Enter the due date"
@@ -39,7 +39,7 @@
                 transition-hide="scale"
               >
                 <q-date
-                  v-model="newTask.dueDate"
+                  v-model="newTask.due_date"
                   @input="updateDateISO"
                   today-btn
                 >
@@ -51,36 +51,92 @@
             </q-icon>
           </template>
         </q-input>
-        <q-input
-          outlined
-          filled
-          v-model="tagInput"
-          label="Add required skills"
-          @input="filterMatches"
-        />
-        <q-btn
-          label="Add Tags"
-          @click="addTags"
-          color="primary"
-          class="q-ml-md"
-        />
-        <div class="q-mt-md">
-          <q-badge
-            v-for="(tag, index) in newTask.required_skills"
-            :key="index"
-            class="q-mr-sm"
-            >{{ tag }}</q-badge
+        <div>
+          <q-select
+            label="Skills Required"
+            hint="Add a list of required skills, to help people find things in their ability"
+            v-model="skillTagList"
+            use-input
+            use-chips
+            multiple
+            input-debounce="250"
+            @new-value="addTag"
+            :options="skillTagOptions"
+            option-label="name"
+            option-value="$id"
+            @filter="filterSkillTags"
+            new-value-mode="add-unique"
           >
+          </q-select>
         </div>
-        <q-list v-if="matches.length > 0 && tagInput"
-          ><q-item
-            v-for="(match, index) in matches"
-            :key="index"
-            clickable
-            @click="selectMatch(match)"
-            >{{ match }}</q-item
-          ></q-list
+        <div>
+          <q-select
+            label="Tags"
+            hint="Add Tags to help with searching"
+            v-model="taskTagList"
+            use-input
+            use-chips
+            multiple
+            input-debounce="250"
+            @new-value="addTag"
+            :options="taskTagOptions"
+            option-label="name"
+            option-value="$id"
+            @filter="filterTaskTags"
+            new-value-mode="add-unique"
+          >
+          </q-select>
+        </div>
+        <q-input
+          label="Estimated Duration"
+          v-model.number="newTask.duration"
+          type="number"
+          filled
+          suffix="hrs"
+          style="max-width: 200px"
+        />
+        <q-input
+          label="Number of Required Volunteers"
+          v-model.number="newTask.volunteers_required"
+          type="number"
+          filled
+          style="max-width: 200px"
+        />
+        <q-select
+          label="Status of Task"
+          v-model="newTask.status"
+          :options="TASKSTATUS"
         >
+        </q-select>
+        <div>
+          <q-select
+            label="Dependencies"
+            hint="Add a list of tasks that need to be complete before this one"
+            v-model="dependsList"
+            use-input
+            multiple
+            input-debounce="250"
+            :options="tasks"
+            option-label="title"
+            option-value="$id"
+            @filter="filterTasks"
+          >
+          </q-select>
+        </div>
+        <div>
+          <q-select
+            label="Boat"
+            hint="Add a boat, if applicable"
+            v-model="newTask.boat"
+            use-input
+            emit-value
+            input-debounce="250"
+            :options="boatList"
+            option-label="name"
+            option-value="$id"
+          >
+          </q-select>
+        </div>
         <div>
           <q-btn
             label="Submit"
@@ -110,25 +166,108 @@
 </template>
 
 <script setup lang="ts">
-import { reactive, ref, computed } from 'vue';
-import { useTaskStore } from 'src/stores/task';
-import type { Task } from 'src/stores/task';
 import ToolbarComponent from 'src/components/ToolbarComponent.vue';
+import TaskEditComponent from 'src/components/task/TaskEditComponent.vue';
+import { 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';
 import { date } from 'quasar';
+import { Boat, useBoatStore } from 'src/stores/boat';
+
+const newTask = reactive<Task>({
+  description: '',
+  due_date: date.formatDate(Date.now(), 'YYYY-MM-DD'),
+  required_skills: [],
+  title: '',
+  tags: [],
+  duration: 0,
+  volunteers: [],
+  volunteers_required: 0,
+  status: 'ready',
+  depends_on: [],
+  boat: '',
+});
 
 const taskStore = useTaskStore();
 
-const tagInput = ref('');
+taskStore.fetchSkillTags();
+taskStore.fetchTaskTags();
+taskStore.fetchTasks();
 
+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);
+}
+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;
+  }
+
+  update(() => {
+    tasks.value = taskStore.filterTasks(val);
+  });
+}
+
+function filterTags(
+  optionVar: Ref<SkillTag[] | TaskTag[] | undefined>,
+  optionSrc: SkillTag[] | TaskTag[],
+  val: string,
+  update: (cb: () => void) => void
+): void {
+  if (val === '') {
+    update(() => {
+      optionVar.value = optionSrc;
+    });
+    return;
+  }
+
+  update(() => {
+    optionVar.value = optionSrc.filter((v) =>
+      v.name.toLowerCase().includes(val.toLowerCase())
+    );
+  });
+}
+
+function addTag(tag: string) {
+  return;
+}
+// Method to update the model in ISO 8601 format
+const updateDateISO = (value: string) => {
+  newTask.due_date = date.formatDate(value, 'YYYY-MM-DD');
+};
+const dateRule = (val: string) => {
+  // Check if the date is valid using Quasar's date utils if needed
+  // For simplicity, we are directly checking the date string validity
+  return (val && !isNaN(Date.parse(val))) || 'Please enter a valid date';
+};
 const router = useRouter();
-const newTask = reactive({
-  description: '',
-  dueDate: date.formatDate(Date.now(), 'YYYY-MM-DD'),
-  required_skills: [],
-} as unknown as Task);
+
 async function onSubmit() {
+  console.log(newTask);
   try {
+    // It would probably be more performant to store the tags as objects in the
+    // form, and then extract the ID's before submitting.
+    newTask.required_skills = skillTagList.value.map((s) => s['$id']);
+    newTask.tags = taskTagList.value.map((s) => s['$id']);
+    newTask.depends_on = dependsList.value.map((d) => d['$id']) as string[];
     await taskStore.addTask(newTask);
     console.log('Created Task');
     router.go(-1);
@@ -136,45 +275,7 @@ async function onSubmit() {
     console.error('Failed to create new Task: ', error);
   }
 }
-taskStore.fetchSkillTags();
-console.log(taskStore.skillTags.map((t) => t.name));
-const matches = computed(() => {
-  if (!tagInput.value) return [];
-  return taskStore.skillTags
-    .map((t) => t.name)
-    .filter((t) => t.toLowerCase().includes(tagInput.value.toLowerCase()));
-});
 
-const addTags = () => {
-  if (tagInput.value.trim() !== '') {
-    const newTags: string[] = tagInput.value
-      .split(',')
-      .map((t) => t.trim())
-      .filter((t) => t !== '' && !newTask.required_skills.includes(t));
-    newTask.required_skills.push(...newTags);
-  }
-};
-
-const filterMatches = () => {
-  return;
-};
-
-// Method to update the model in ISO 8601 format
-const updateDateISO = (value: string) => {
-  newTask.dueDate = date.formatDate(value, 'YYYY-MM-DD');
-};
-const dateRule = (val: string) => {
-  // Check if the date is valid using Quasar's date utils if needed
-  // For simplicity, we are directly checking the date string validity
-  return (val && !isNaN(Date.parse(val))) || 'Please enter a valid date';
-};
-
-const selectMatch = (match: string) => {
-  if (!newTask.required_skills.includes(match)) {
-    newTask.required_skills.push(match);
-    tagInput.value = ''; // Clear input field and close match list
-  }
-};
 function onReset() {
   return;
 }