More task changes

quasar.config.js

@@ -84,6 +84,15 @@ module.exports = configure(function (/* ctx */) {
       // open: true, // opens browser window automatically
       port: 4000,
       strictport: true,
+      // This works around CORS problems when developing locally, using the Appwrite backend
+      proxy: {
+        '/api': {
+          target: 'https://apidev.bab.toal.ca/',
+          changeOrigin: true,
+          secure: false,
+          rewrite: (path) => path.replace(/^\/api/, ''),
+        },
+      },
       // For reverse-proxying via haproxy
       // hmr: {
       //   clientPort: 443,

src/components/task/TaskListComponent.vue

@@ -2,29 +2,29 @@
   <div class="q-pa-md" style="max-width: 350px">
     <q-list>
       <q-item v-for="task in tasks" :key="task.id">
-        <q-item-section>
-          <q-item-label>{{ task.title }}</q-item-label>
-          <q-item-label caption lines="2">{{ task.description }} </q-item-label>
-        </q-item-section>
-
-        <q-item-section side top>
-          <q-item-label caption>Due: {{ task.dueDate }}</q-item-label>
-          <q-icon name="star" color="yellow" />
-        </q-item-section>
-        <q-item-section>
+        <q-expansion-item
+          v-if="task.subtasks && task.subtasks.length"
+          expand-separator
+          label="Subtasks"
+          default-opened
+        >
+          {{ task }}
           <q-expansion-item
             :header-inset-level="1"
             expand-separator
             label="Subtasks"
             default-opened
-            ><TaskList
-              v-if="task.subtasks && task.subtasks.length"
-              :tasks="task.subtasks"
-            /> </q-expansion-item
-        ></q-item-section>
+          >
+            <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-separator spaced inset />
     </q-list>
   </div>
 </template>