From b66b63101f303628991cbf033b24de5aaeac9f90 Mon Sep 17 00:00:00 2001
From: Patrick Toal <ptoal@takeflight.ca>
Date: Thu, 4 Apr 2024 10:04:36 -0400
Subject: [PATCH] Break out component for refactoring

---
 src/components/task/TaskEditComponent.vue | 261 +++++++++++++++++++++
 src/pages/task/NewTaskPage.vue            | 273 +---------------------
 2 files changed, 263 insertions(+), 271 deletions(-)
 create mode 100644 src/components/task/TaskEditComponent.vue

diff --git a/src/components/task/TaskEditComponent.vue b/src/components/task/TaskEditComponent.vue
new file mode 100644
index 0000000..82f5e2e
--- /dev/null
+++ b/src/components/task/TaskEditComponent.vue
@@ -0,0 +1,261 @@
+<template>
+  <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: 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>
+  </q-form>
+</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 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();
+
+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();
+
+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);
+  } catch (error) {
+    console.error('Failed to create new Task: ', error);
+  }
+}
+
+function onReset() {
+  return;
+}
+</script>
diff --git a/src/pages/task/NewTaskPage.vue b/src/pages/task/NewTaskPage.vue
index bbfa856..cb16a29 100644
--- a/src/pages/task/NewTaskPage.vue
+++ b/src/pages/task/NewTaskPage.vue
@@ -1,166 +1,8 @@
 <template>
-  <toolbar-component pageTitle="Tasks" />
+  <ToolbarComponent 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: 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>
-      </q-form>
+      <TaskEditComponent />
     </div>
   </q-page>
 </template>
@@ -168,115 +10,4 @@
 <script setup lang="ts">
 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();
-
-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();
-
-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);
-  } catch (error) {
-    console.error('Failed to create new Task: ', error);
-  }
-}
-
-function onReset() {
-  return;
-}
 </script>