Added task functionality

src/components/task/TaskTableComponent.vue

@@ -6,13 +6,15 @@
       row-key="$id"
       no-data-label="I didn't find anything for you"
       no-results-label="The filter didn't uncover any results"
+      selection="multiple"
+      v-model:selected="selected"
     >
       <template v-slot:top>
         <q-btn
           color="primary"
           :disable="loading"
           label="New Task"
-          to="/task/new"
+          to="/task/edit"
         />
         <q-btn
           v-if="tasks.length !== 0"
@@ -35,6 +37,57 @@
           </template>
         </q-input>
       </template>
+      <template v-slot:header="props">
+        <q-tr :props="props">
+          <q-th auto-width />
+          <q-th auto-width />
+          <q-th v-for="col in props.cols" :key="col.name" :props="props">
+            {{ col.label }}
+          </q-th>
+        </q-tr>
+      </template>
+
+      <template v-slot:body="props">
+        <q-tr :props="props">
+          <q-td key="desc" auto-width>
+            <q-checkbox v-model="props.selected"></q-checkbox>
+          </q-td>
+          <q-td auto-width>
+            <q-btn
+              size="sm"
+              color="primary"
+              round
+              dense
+              @click="props.expand = !props.expand"
+              :icon="props.expand ? 'remove' : 'add'"
+            />
+          </q-td>
+          <q-td v-for="col in props.cols" :key="col.name" :props="props">
+            <div v-if="col.name == 'skills'" class="q-gutter-xs">
+              <q-badge
+                v-for="skill in props.row.required_skills"
+                :key="skill"
+                :color="skill.tagColour"
+                text-color="white"
+              >
+                {{ skill.name }}
+              </q-badge>
+            </div>
+            <div v-else>
+              {{ col.value }}
+            </div>
+          </q-td>
+        </q-tr>
+        <q-tr v-show="props.expand" :props="props">
+          <q-td auto-width />
+          <q-td auto-width />
+          <q-td colspan="100%">
+            <div class="text-left">
+              {{ props.row.description }}
+            </div>
+          </q-td>
+        </q-tr>
+      </template>
     </q-table>
   </div>
 </template>
@@ -42,8 +95,9 @@
 <script setup lang="ts">
 import { defineProps, ref } from 'vue';
 import { useTaskStore, Task } from 'src/stores/task';
-import type { QTableProps } from 'quasar';
+import { QTableProps, date } from 'quasar';
 
+const selected = ref([]);
 const loading = ref(false); // Placeholder
 const columns = <QTableProps['columns']>[
   {
@@ -55,11 +109,12 @@ const columns = <QTableProps['columns']>[
     sortable: true,
   },
   {
-    name: 'description',
+    name: 'due_date',
     align: 'left',
-    label: 'Description',
-    field: 'description',
-    sortable: false,
+    label: 'Due Date',
+    field: 'due_date',
+    format: (val) => date.formatDate(val, 'MMM DD, YYYY'),
+    sortable: true,
   },
   {
     name: 'status',
@@ -68,6 +123,13 @@ const columns = <QTableProps['columns']>[
     field: 'status',
     sortable: true,
   },
+  {
+    name: 'skills',
+    align: 'left',
+    label: 'Skills',
+    field: 'required_skills',
+    sortable: false,
+  },
 ];
 
 const props = defineProps<{ tasks: Task[] }>();
@@ -75,9 +137,6 @@ const taskStore = useTaskStore();
 taskStore.fetchTaskTags();
 taskStore.fetchSkillTags();
 
-function newTask() {
-  return;
-}
 function deleteTask() {
   return;
 }