A number of task improvements. Not optimal tag selection

src/pages/task/NewTaskPage.vue

@@ -0,0 +1,181 @@
+<template>
+  <toolbar-component pageTitle="Tasks" />
+  <q-page padding>
+    <div class="q-pa-md" style="max-width: 400px">
+      <q-form @submit="onSubmit" @reset="onReset" class="q-gutter-md">
+        <q-input
+          filled
+          v-model="newTask.title"
+          label="Task Title"
+          hint="A short description of the task"
+          lazy-rules
+          :rules="[
+            (val) =>
+              (val && val.length > 0) || 'Please enter a title for the task',
+          ]"
+        />
+        <q-editor
+          filled
+          v-model="newTask.description"
+          label="Detailed Description"
+          hint="A detailed description of the task"
+          lazy-rules
+          placeholder="Enter a detailed description..."
+        />
+
+        <q-input
+          filled
+          v-model="newTask.dueDate"
+          mask="date"
+          :rules="[dateRule]"
+          hint="Enter the due date"
+          lazy-rules
+        >
+          <template v-slot:append>
+            <q-icon name="event" class="cursor-pointer">
+              <q-popup-proxy
+                cover
+                transition-show="scale"
+                transition-hide="scale"
+              >
+                <q-date
+                  v-model="newTask.dueDate"
+                  @input="updateDateISO"
+                  today-btn
+                >
+                  <div class="row items-center justify-end">
+                    <q-btn v-close-popup label="Close" color="primary" flat />
+                  </div>
+                </q-date>
+              </q-popup-proxy>
+            </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-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-btn
+            label="Submit"
+            type="submit"
+            color="primary"
+            flat
+            class="q-ml-sm"
+          />
+          <q-btn
+            label="Reset"
+            type="reset"
+            color="primary"
+            flat
+            class="q-ml-sm"
+          />
+          <q-btn
+            label="Cancel"
+            color="secondary"
+            flat
+            class="q-ml-sm"
+            @click="$router.go(-1)"
+          />
+        </div>
+      </q-form>
+    </div>
+  </q-page>
+</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 { useRouter } from 'vue-router';
+import { date } from 'quasar';
+
+const taskStore = useTaskStore();
+
+const tagInput = ref('');
+
+const router = useRouter();
+const newTask = reactive({
+  description: '',
+  dueDate: date.formatDate(Date.now(), 'YYYY-MM-DD'),
+  required_skills: [],
+} as unknown as Task);
+async function onSubmit() {
+  try {
+    await taskStore.addTask(newTask);
+    console.log('Created Task');
+    router.go(-1);
+  } catch (error) {
+    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;
+}
+</script>

src/pages/task/TaskPage.vue

@@ -7,7 +7,6 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
 import { useTaskStore } from 'stores/task';
 import ToolbarComponent from 'src/components/ToolbarComponent.vue';
 import TaskListComponent from 'src/components/task/TaskListComponent.vue';