Add searching

src/components/task/TaskCardComponent.vue

@@ -13,7 +13,6 @@
     >
       <TaskListComponent :tasks="task.subtasks" />
     </q-expansion-item>
-    <!-- TODO: Add date formatting Mixin? https://jerickson.net/how-to-format-dates-in-vue-3/ -->
   </q-card>
 </template>
 

src/components/task/TaskTableComponent.vue

@@ -5,10 +5,13 @@
       :columns="columns"
       dense
       row-key="$id"
+      flatten
       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"
+      :filter="searchFilter"
+      :filter-method="filterByTitle"
       @row-click="onRowClick"
     >
       <template v-slot:top>
@@ -27,7 +30,7 @@
           @click="deleteTasks"
         />
         <q-space />
-        <q-input borderless debounce="300" color="primary" v-model="filter">
+        <q-input flatten debounce="300" color="primary" v-model="searchFilter">
           <template v-slot:append>
             <q-icon name="search" />
           </template>
@@ -161,6 +164,7 @@ const columns = <QTableProps['columns']>[
 
 const props = defineProps<{ tasks: Task[] }>();
 const taskStore = useTaskStore();
+const searchFilter = ref('');
 const $q = useQuasar();
 
 function onRowClick(evt: Event, row: Task) {
@@ -168,6 +172,20 @@ function onRowClick(evt: Event, row: Task) {
   router.push({ name: 'edit-task', params: { id: row.$id } });
 }
 
+const filterByTitle = (
+  rows: readonly Task[],
+  terms: any,
+  cols: any,
+  cellValueFn: any
+) => {
+  console.log(terms);
+  return terms
+    ? rows.filter((row) =>
+        row.title.toLowerCase().includes(terms.toLowerCase())
+      )
+    : rows;
+};
+
 function deleteTasks() {
   confirmDelete(selected.value);
 }
@@ -185,5 +203,4 @@ function confirmDelete(tasks: Task[]) {
     });
   });
 }
-const filter = ref('');
 </script>