A number of task improvements. Not optimal tag selection

package.json

@@ -13,10 +13,11 @@
     "build": "quasar build"
   },
   "dependencies": {
-    "@quasar/extras": "^1.16.4",
+    "@quasar/extras": "^1.16.11",
     "appwrite": "^13.0.0",
     "pinia": "^2.1.7",
     "vue": "3",
+    "vue-multiselect": "^2.1.9",
     "vue-router": "4"
   },
   "devDependencies": {
@@ -31,7 +32,7 @@
     "eslint-config-prettier": "^8.1.0",
     "eslint-plugin-vue": "^9.0.0",
     "prettier": "^2.5.1",
-    "quasar": "^2.14.6",
+    "quasar": "^2.15.2",
     "typescript": "^4.5.4",
     "workbox-build": "^7.0.0",
     "workbox-cacheable-response": "^7.0.0",

quasar.config.js

@@ -9,6 +9,7 @@
 // https://v2.quasar.dev/quasar-cli-vite/quasar-config-js
 
 const { configure } = require('quasar/wrappers');
+const path = require('path');
 
 module.exports = configure(function (/* ctx */) {
   return {

src/boot/appwrite.ts

@@ -21,6 +21,8 @@ client
 const AppwriteIds = {
   databaseId: '65ee1cbf9c2493faf15f',
   collectionIdTask: '65ee1cd5b550023fae4f',
+  collectionIdTaskTags: '65ee21d72d5c8007c34c',
+  collectionIdSkillTags: '66072582a74d94a4bd01',
 };
 
 const account = new Account(client);

src/components/task/TaskComponent.vue

@@ -1,6 +1,23 @@
 <template>
-  <div>My component</div>
+  <q-item-section>
+    <q-item-label overline>{{ task.title }}</q-item-label>
+    <q-item-label caption lines="2">{{ task.description }} </q-item-label>
+    <q-item-label caption>Due: {{ task.dueDate }}</q-item-label>
+  </q-item-section>
+  <q-expansion-item
+    v-if="task.subtasks && task.subtasks.length"
+    expand-separator
+    label="Subtasks"
+    default-opened
+  >
+    <TaskListComponent :tasks="task.subtasks" />
+  </q-expansion-item>
+  <!-- TODO: Add date formatting Mixin? https://jerickson.net/how-to-format-dates-in-vue-3/ -->
 </template>
 
 <script setup lang="ts">
+import { defineProps } from 'vue';
+import type { Task } from 'src/stores/task';
+
+const props = defineProps<{ task: Task }>();
 </script>

src/components/task/TaskListComponent.vue

@@ -1,30 +1,9 @@
 <template>
   <div class="q-pa-md" style="max-width: 350px">
     <q-list>
-      <q-item v-for="task in tasks" :key="task.id">
+      <div v-for="task in tasks" :key="task.id">
-        <q-expansion-item
+        <TaskComponent :task="task" />
-          v-if="task.subtasks && task.subtasks.length"
+      </div>
-          expand-separator
-          label="Subtasks"
-          default-opened
-        >
-          {{ task }}
-          <q-expansion-item
-            :header-inset-level="1"
-            expand-separator
-            label="Subtasks"
-            default-opened
-          >
-            <TaskList :tasks="task.subtasks" />
-          </q-expansion-item>
-        </q-expansion-item>
-        <q-item-section v-else>
-          <q-item-label overline>{{ task.title }}</q-item-label>
-          <q-item-label caption lines="2">{{ task.description }} </q-item-label>
-          <q-item-label caption>Due: {{ task.dueDate }}</q-item-label>
-          <!-- TODO: Add date formatting Mixin? https://jerickson.net/how-to-format-dates-in-vue-3/ -->
-        </q-item-section>
-      </q-item>
     </q-list>
   </div>
 </template>
@@ -32,6 +11,7 @@
 <script setup lang="ts">
 import { defineProps } from 'vue';
 import type { Task } from 'src/stores/task';
+import TaskComponent from './TaskComponent.vue';
 
 const props = defineProps<{ tasks: Task[] }>();
 </script>

src/components/task/TaskTableComponent.vue

@@ -0,0 +1,87 @@
+<template>
+  <div class="q-pa-md">
+    <q-table
+      :rows="tasks"
+      :columns="columns"
+      row-key="$id"
+      no-data-label="I didn't find anything for you"
+      no-results-label="The filter didn't uncover any results"
+    >
+      <template v-slot:top>
+        <q-btn
+          color="primary"
+          :disable="loading"
+          label="New Task"
+          to="/task/new"
+        />
+        <q-btn
+          v-if="tasks.length !== 0"
+          class="q-ml-sm"
+          color="primary"
+          :disable="loading"
+          label="Delete task(s)"
+          @click="deleteTask"
+        />
+        <q-space />
+        <q-input
+          borderless
+          dense
+          debounce="300"
+          color="primary"
+          v-model="filter"
+        >
+          <template v-slot:append>
+            <q-icon name="search" />
+          </template>
+        </q-input>
+      </template>
+    </q-table>
+    <q-table :rows="taskStore.skillTags"></q-table>
+    <q-table :rows="taskStore.taskTags"></q-table>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineProps, ref } from 'vue';
+import { useTaskStore, Task } from 'src/stores/task';
+import type { QTableProps } from 'quasar';
+
+const loading = ref(false); // Placeholder
+const columns = <QTableProps['columns']>[
+  {
+    name: 'title',
+    required: true,
+    label: 'Title',
+    align: 'left',
+    field: 'title',
+    sortable: true,
+  },
+  {
+    name: 'description',
+    align: 'left',
+    label: 'Description',
+    field: 'description',
+    sortable: false,
+  },
+  {
+    name: 'status',
+    align: 'left',
+    label: 'Status',
+    field: 'status',
+    sortable: true,
+  },
+];
+
+const props = defineProps<{ tasks: Task[] }>();
+const taskStore = useTaskStore();
+taskStore.fetchTaskTags();
+taskStore.fetchSkillTags();
+
+function newTask() {
+  return;
+}
+function deleteTask() {
+  return;
+}
+const filter = ref('');
+</script>

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

@@ -1,7 +1,8 @@
 <template>
   <toolbar-component pageTitle="Tasks" />
   <q-page padding>
-    <TaskListComponent :tasks="taskStore.taskHierarchy" />
+    <TaskListComponent v-if="$q.screen.lt.sm" :tasks="taskStore.tasks" />
+    <TaskTableComponent v-else :tasks="taskStore.tasks" />
   </q-page>
 </template>
 
@@ -9,7 +10,9 @@
 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();
+
 taskStore.fetchTasks(); // Fetch on mount
 </script>

src/router/routes.ts

@@ -1,24 +1,9 @@
-import ScheduleIndexPage from 'pages/schedule/ScheduleIndexPage.vue';
-import ChecklistPageVue from 'pages/ChecklistPage.vue';
-import LoginPageVue from 'pages/LoginPage.vue';
-import ReferencePageVue from 'src/pages/reference/ReferencePage.vue';
-import ReferenceIndexPageVue from 'src/pages/reference/ReferenceIndexPage.vue';
-import ReferenceItemPageVue from 'src/pages/reference/ReferenceItemPage.vue';
-import MainLayoutVue from 'src/layouts/MainLayout.vue';
-import BoatPageVue from 'src/pages/BoatPage.vue';
-import CertificationPageVue from 'src/pages/CertificationPage.vue';
-import IndexPageVue from 'src/pages/IndexPage.vue';
-import ProfilePageVue from 'src/pages/ProfilePage.vue';
-import TaskPageVue from 'src/pages/TaskPage.vue';
 import { RouteRecordRaw } from 'vue-router';
-import SchedulePageView from 'pages/schedule/SchedulePageView.vue';
-import BoatReservationPageVue from 'src/pages/schedule/BoatReservationPage.vue';
-import BoatScheduleViewVue from 'src/pages/schedule/BoatScheduleView.vue';
 
 const routes: RouteRecordRaw[] = [
   {
     path: '/',
-    component: MainLayoutVue,
+    component: () => import('src/layouts/MainLayout.vue'),
     // If we get so big we need lazy loading, we can use imports again
     // component: () => import('layouts/MainLayout.vue'),
     children: [
@@ -26,69 +11,83 @@ const routes: RouteRecordRaw[] = [
         path: '',
         // If we get so big we need lazy loading, we can use imports again
         // component: () => import('pages/IndexPage.vue'),
-        component: IndexPageVue,
+        component: () => import('src/pages/IndexPage.vue'),
         name: 'index',
       },
       {
         path: '/boat',
-        component: BoatPageVue,
+        component: () => import('src/pages/BoatPage.vue'),
         name: 'boat',
       },
       {
         path: '/schedule',
-        component: SchedulePageView,
+        component: () => import('pages/schedule/SchedulePageView.vue'),
         name: 'schedule',
         children: [
           {
             path: '',
-            component: ScheduleIndexPage,
+            component: () => import('pages/schedule/ScheduleIndexPage.vue'),
             name: 'schedule-index',
           },
           {
             path: 'book',
-            component: BoatReservationPageVue,
+            component: () =>
+              import('src/pages/schedule/BoatReservationPage.vue'),
             name: 'reserve-boat',
           },
           {
             path: 'view',
-            component: BoatScheduleViewVue,
+            component: () => import('src/pages/schedule/BoatScheduleView.vue'),
             name: 'boat-schedule',
           },
         ],
       },
       {
         path: '/certification',
-        component: CertificationPageVue,
+        component: () => import('src/pages/CertificationPage.vue'),
         name: 'certification',
       },
       {
         path: '/task',
-        component: TaskPageVue,
         name: 'task',
+        children: [
+          {
+            path: '',
+            component: () => import('src/pages/task/TaskPage.vue'),
+            name: 'task-index',
+          },
+          {
+            path: 'new',
+            component: () => import('pages/task/NewTaskPage.vue'),
+            name: 'new-task',
+          },
+        ],
       },
       {
         path: '/checklist',
-        component: ChecklistPageVue,
+        component: () => import('pages/ChecklistPage.vue'),
         name: 'checklist',
       },
       {
         path: '/profile',
-        component: ProfilePageVue,
+        component: () => import('src/pages/ProfilePage.vue'),
         name: 'profile',
       },
       {
         path: '/reference',
-        component: ReferencePageVue,
+        component: () => import('src/pages/reference/ReferencePage.vue'),
         name: 'reference',
         children: [
           {
             path: '',
-            component: ReferenceIndexPageVue,
+            component: () =>
+              import('src/pages/reference/ReferenceIndexPage.vue'),
             name: 'reference-index',
           },
           {
             path: '/reference/:id/view',
-            component: ReferenceItemPageVue,
+            component: () =>
+              import('src/pages/reference/ReferenceItemPage.vue'),
           },
         ],
       },
@@ -112,7 +111,7 @@ const routes: RouteRecordRaw[] = [
   },
   {
     path: '/login',
-    component: LoginPageVue,
+    component: () => import('pages/LoginPageVue.vue'),
     name: 'login',
     meta: {
       publicRoute: true,

src/stores/task.ts

@@ -2,18 +2,40 @@ import { defineStore } from 'pinia';
 import { AppwriteIds, databases, ID } from 'src/boot/appwrite';
 import type { Models } from 'appwrite';
 
+export enum TASKSTATUS {
+  READY = 'ready',
+  COMPLETE = 'complete',
+  WAITING = 'waiting',
+}
 export interface Task extends Models.Document {
   title: string;
   description: string;
-  taskLabels: string[];
+  required_skills: string[];
-  dueDate: Date;
+  tags: string[];
-  parentId: string;
+  due_date: string;
+  duration: number;
+  volunteers: string[];
+  volunteers_required: number;
+  status: TASKSTATUS;
+  depends_on: string;
   completed: boolean;
+  boat: string;
+} // TODO: convert some of these strings into objects.
+
+export interface TaskTag extends Models.Document {
+  name: string;
+  description: string;
+}
+export interface SkillTag extends Models.Document {
+  name: string;
+  description: string;
 }
 
 export const useTaskStore = defineStore('tasks', {
   state: () => ({
     tasks: [] as Task[],
+    taskTags: [] as TaskTag[],
+    skillTags: [] as SkillTag[],
   }),
 
   actions: {
@@ -28,6 +50,30 @@ export const useTaskStore = defineStore('tasks', {
         console.error('Failed to fetch tasks', error);
       }
     },
+    async fetchTaskTags() {
+      // This is fine for a small number of tags, but more than a few hundred tags, we'd need to optimize
+      try {
+        const response = await databases.listDocuments(
+          AppwriteIds.databaseId,
+          AppwriteIds.collectionIdTaskTags
+        );
+        this.taskTags = response.documents as TaskTag[];
+      } catch (error) {
+        console.error('Failed to fetch tasks', error);
+      }
+    },
+    async fetchSkillTags() {
+      // This is fine for a small number of tags, but more than a few hundred tags, we'd need to optimize
+      try {
+        const response = await databases.listDocuments(
+          AppwriteIds.databaseId,
+          AppwriteIds.collectionIdSkillTags
+        );
+        this.skillTags = response.documents as SkillTag[];
+      } catch (error) {
+        console.error('Failed to fetch tasks', error);
+      }
+    },
     async addTask(task: Task) {
       try {
         const response = await databases.createDocument(

tsconfig.json

@@ -3,4 +3,4 @@
   "compilerOptions": {
     "baseUrl": "."
   }
-}
+}

yarn.lock

@@ -1115,10 +1115,10 @@
     vite "^2.9.13"
     webpack-merge "^5.8.0"
 
-"@quasar/extras@^1.16.4":
+"@quasar/extras@^1.16.11":
-  version "1.16.9"
+  version "1.16.11"
-  resolved "https://registry.npmjs.org/@quasar/extras/-/extras-1.16.9.tgz"
+  resolved "https://registry.yarnpkg.com/@quasar/extras/-/extras-1.16.11.tgz#84b1efb9097a6e58c3ebfdd5da83ac658056a35c"
-  integrity sha512-SlOhwzXyPQHWgQIS2ncyDdYdksCJvUYNtgsDQqzAKEG3r3d/ejOxvThle79HTK3Q6HB+gQWFG21Ux00Osr5XSw==
+  integrity sha512-sbTBHOA+Hi7ah0P6qSm+xfRXqwJ94ct3NKA3Lkq3iNPYuHD7VXbSWtP2eA7Cu9Fd0WjVoPbngf6yFGg46U3IfQ==
 
 "@quasar/quasar-app-extension-qcalendar@^4.0.0-beta.15":
   version "4.0.0-beta.16"
@@ -4151,10 +4151,10 @@ qs@6.11.0:
   dependencies:
     side-channel "^1.0.4"
 
-quasar@^2.14.6:
+quasar@^2.15.2:
-  version "2.14.7"
+  version "2.15.2"
-  resolved "https://registry.yarnpkg.com/quasar/-/quasar-2.14.7.tgz#dac7a16a4275f01b9c4be43948413a92fa10c801"
+  resolved "https://registry.yarnpkg.com/quasar/-/quasar-2.15.2.tgz#8c945c87d8723696614a56a17ffcc041d8a26ab6"
-  integrity sha512-xp4qpEmiGmXMfImWpA/WSeIHT6RojtxJDHtJcuuJCUmUknaC5UOXsd0aRtQghIQ1WCkx/Fhhg5qmyQuuDx6uEg==
+  integrity sha512-euCm5Elo5SfGNRY18HvKAknkBwesoUAFhZ6BxmliiEVHGes53ZcUKnMwZU/XsRhwiC6VQzBBSk/U0iEcdp/NyA==
 
 queue-microtask@^1.2.2:
   version "1.2.3"
@@ -5031,6 +5031,11 @@ vue-eslint-parser@^9.4.2:
     lodash "^4.17.21"
     semver "^7.3.6"
 
+vue-multiselect@^2.1.9:
+  version "2.1.9"
+  resolved "https://registry.yarnpkg.com/vue-multiselect/-/vue-multiselect-2.1.9.tgz#803628d5ff6c5925320930c965bdaae8934b92b1"
+  integrity sha512-nGEppmzhQQT2iDz4cl+ZCX3BpeNhygK50zWFTIRS+r7K7i61uWXJWSioMuf+V/161EPQjexI8NaEBdUlF3dp+g==
+
 vue-router@4:
   version "4.3.0"
   resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-4.3.0.tgz#d5913f27bf68a0a178ee798c3c88be471811a235"