Basic New Task

backup/.env

@@ -0,0 +1,3 @@
+APPWRITE_ENDPOINT=https://apidev.bab.toal.ca/v1
+APPWRITE_PROJECT_ID=65ede55a213134f2b688
+APPWRITE_API_KEY=71f7f899ca605b39a3f24a80a23b34f580fd7e735316152bc0d5ed042bd452e7116c4d0a7f3c77d343690d6cce229020c76de1733c754a402f15bbe9b2cab5a6cd7b3a7c1c0d66cede4f6aee99cdfac14898b7a2006a5eaae24529bbcb19b4c2f6563adff5688dda9c15357c9e98b449e50b6794dfb8cc6ab61e9f073b08a11e

backup/appwrite.json

@@ -0,0 +1,4 @@
+{
+    "projectId": "65ede55a213134f2b688",
+    "projectName": ""
+}

package.json

@@ -17,7 +17,6 @@
     "appwrite": "^13.0.0",
     "pinia": "^2.1.7",
     "vue": "3",
-    "vue-multiselect": "^2.1.9",
     "vue-router": "4"
   },
   "devDependencies": {

src/components/task/TaskComponent.vue

@@ -2,7 +2,7 @@
   <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-label caption>Due: {{ task.due_date }}</q-item-label>
   </q-item-section>
   <q-expansion-item
     v-if="task.subtasks && task.subtasks.length"

src/components/task/TaskEditComponent.vue

@@ -0,0 +1,220 @@
+<template>
+  <q-input
+    filled
+    v-model="newTask.title"
+    label="Task Title"
+    hint="A short description of the task"
+    lazy-rules
+    :rules="[
+            (val: string | any[]) =>
+              (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.due_date"
+    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.due_date" @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>
+  <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>
+  <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" 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>
+</template>
+
+<script setup lang="ts">
+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 props = defineProps<{ newTask: Task }>();
+
+const taskStore = useTaskStore();
+
+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';
+};
+</script>

src/components/task/TaskTableComponent.vue

@@ -36,8 +36,6 @@
         </q-input>
       </template>
     </q-table>
-    <q-table :rows="taskStore.skillTags"></q-table>
-    <q-table :rows="taskStore.taskTags"></q-table>
   </div>
 </template>
 

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;
 }

src/stores/boat.ts

@@ -3,7 +3,7 @@ import { defineStore } from 'pinia';
 // const boatSource = null;
 
 export interface Boat {
-  id: number;
+  $id: string;
   name: string;
   displayName?: string;
   class?: string;
@@ -26,7 +26,7 @@ export interface Boat {
 
 const getSampleData = () => [
   {
-    id: 1,
+    $id: '1',
     name: 'ProjectX',
     displayName: 'PX',
     class: 'J/27',
@@ -52,7 +52,7 @@ and rough engine performance.`,
     ],
   },
   {
-    id: 2,
+    $id: '2',
     name: 'Take5',
     displayName: 'T5',
     class: 'J/27',
@@ -61,7 +61,7 @@ and rough engine performance.`,
     iconsrc: '/tmpimg/take5_avatar32.png',
   },
   {
-    id: 3,
+    $id: '3',
     name: 'WeeBeestie',
     displayName: 'WB',
     class: 'Capri 25',

src/stores/task.ts

@@ -2,12 +2,9 @@ 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 {
+export const TASKSTATUS = ['ready', 'complete', 'waiting', 'archived'];
+
+export interface Task extends Partial<Models.Document> {
   title: string;
   description: string;
   required_skills: string[];
@@ -16,9 +13,8 @@ export interface Task extends Models.Document {
   duration: number;
   volunteers: string[];
   volunteers_required: number;
-  status: TASKSTATUS;
-  depends_on: string;
-  completed: boolean;
+  status: string;
+  depends_on: string[];
   boat: string;
 } // TODO: convert some of these strings into objects.
 
@@ -59,7 +55,7 @@ export const useTaskStore = defineStore('tasks', {
         );
         this.taskTags = response.documents as TaskTag[];
       } catch (error) {
-        console.error('Failed to fetch tasks', error);
+        console.error('Failed to fetch task tags', error);
       }
     },
     async fetchSkillTags() {
@@ -71,7 +67,7 @@ export const useTaskStore = defineStore('tasks', {
         );
         this.skillTags = response.documents as SkillTag[];
       } catch (error) {
-        console.error('Failed to fetch tasks', error);
+        console.error('Failed to fetch skill tags', error);
       }
     },
     async addTask(task: Task) {
@@ -87,6 +83,15 @@ export const useTaskStore = defineStore('tasks', {
         console.error('Failed to add task:', error);
       }
     },
+    // TODO: Enhance this store to include offline caching, and subscription notification when items change on the server.
+
+    filterTasks(searchQuery: string) {
+      const result = this.tasks.filter((task) =>
+        task.title.toLowerCase().includes(searchQuery.toLowerCase())
+      );
+      console.log(result);
+      return result;
+    },
   },
   // Add more actions as needed (e.g., updateTask, deleteTask)
   getters: {

yarn.lock

@@ -5031,11 +5031,6 @@ 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"