Change the colour to Red.

src/components/task/TaskEditComponent.vue

@@ -2,7 +2,7 @@
   <q-form @submit="onSubmit" @reset="onReset" class="q-gutter-md">
     <q-input
       filled
-      v-model="newTask.title"
+      v-model="modifiedTask.title"
       label="Task Title"
       hint="A short description of the task"
       lazy-rules
@@ -13,7 +13,7 @@
     />
     <q-editor
       filled
-      v-model="newTask.description"
+      v-model="modifiedTask.description"
       label="Detailed Description"
       hint="A detailed description of the task"
       lazy-rules
@@ -22,7 +22,7 @@
 
     <q-input
       filled
-      v-model="newTask.due_date"
+      v-model="modifiedTask.due_date"
       mask="date"
       :rules="[dateRule]"
       hint="Enter the due date"
@@ -31,7 +31,11 @@
       <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>
+            <q-date
+              v-model="modifiedTask.due_date"
+              @input="updateDateISO"
+              today-btn
+            >
               <div class="row items-center justify-end">
                 <q-btn v-close-popup label="Close" color="primary" flat />
               </div>
@@ -78,7 +82,7 @@
     </div>
     <q-input
       label="Estimated Duration"
-      v-model.number="newTask.duration"
+      v-model.number="modifiedTask.duration"
       type="number"
       filled
       suffix="hrs"
@@ -86,14 +90,14 @@
     />
     <q-input
       label="Number of Required Volunteers"
-      v-model.number="newTask.volunteers_required"
+      v-model.number="modifiedTask.volunteers_required"
       type="number"
       filled
       style="max-width: 200px"
     />
     <q-select
       label="Status of Task"
-      v-model="newTask.status"
+      v-model="modifiedTask.status"
       :options="TASKSTATUS"
     >
     </q-select>
@@ -116,7 +120,7 @@
       <q-select
         label="Boat"
         hint="Add a boat, if applicable"
-        v-model="newTask.boat"
+        v-model="modifiedTask.boat"
         use-input
         emit-value
         input-debounce="250"
@@ -154,7 +158,10 @@ import type { TaskTag, SkillTag, Task } from 'src/stores/task';
 import { date } from 'quasar';
 import { Boat, useBoatStore } from 'src/stores/boat';
 
-const newTask = reactive<Task>({
+const props = defineProps<{ taskId: string }>();
+const taskStore = useTaskStore();
+
+const defaultTask = <Task>{
   description: '',
   due_date: date.formatDate(Date.now(), 'YYYY-MM-DD'),
   required_skills: [],
@@ -166,9 +173,11 @@ const newTask = reactive<Task>({
   status: 'ready',
   depends_on: [],
   boat: '',
-});
+};
 
-const taskStore = useTaskStore();
+const { taskId } = props;
+const targetTask = taskId && taskStore.tasks.find((t) => t.$id === taskId);
+const modifiedTask = reactive(targetTask ? targetTask : defaultTask);
 
 taskStore.fetchSkillTags();
 taskStore.fetchTaskTags();
@@ -230,7 +239,7 @@ function addTag(tag: string) {
 }
 // Method to update the model in ISO 8601 format
 const updateDateISO = (value: string) => {
-  newTask.due_date = date.formatDate(value, 'YYYY-MM-DD');
+  modifiedTask.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
@@ -240,14 +249,16 @@ const dateRule = (val: string) => {
 const router = useRouter();
 
 async function onSubmit() {
-  console.log(newTask);
+  console.log(modifiedTask);
   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']);
+    modifiedTask.required_skills = skillTagList.value.map((s) => s['$id']);
-    newTask.tags = taskTagList.value.map((s) => s['$id']);
+    modifiedTask.tags = taskTagList.value.map((s) => s['$id']);
-    newTask.depends_on = dependsList.value.map((d) => d['$id']) as string[];
+    modifiedTask.depends_on = dependsList.value.map(
-    await taskStore.addTask(newTask);
+      (d) => d['$id']
+    ) as string[];
+    await taskStore.addTask(modifiedTask);
     console.log('Created Task');
     router.go(-1);
   } catch (error) {

src/pages/ProfilePage.vue

@@ -31,7 +31,7 @@
           <q-chip square icon="verified" color="blue" text-color="white"
             >Capri25</q-chip
           >
-          <q-chip square icon="verified" color="yellow" text-color="white"
+          <q-chip square icon="verified" color="red" text-color="white"
             >Night</q-chip
           >
         </q-item-section>

src/pages/task/NewTaskPage.vue

@@ -2,7 +2,7 @@
   <ToolbarComponent pageTitle="Tasks" />
   <q-page padding>
     <div class="q-pa-md" style="max-width: 400px">
-      <TaskEditComponent />
+      <TaskEditComponent taskId="660eb3627974223bb47a" />
     </div>
   </q-page>
 </template>