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>

src/stores/task.ts

@@ -135,14 +135,6 @@ export const useTaskStore = defineStore('tasks', {
       }
     },
     // TODO: Enhance this store to include offline caching, and subscription notification when items change on the server.
-
-    filterTasksByTitle(searchQuery: string) {
-      const result = this.tasks.filter((task) =>
-        task.title.toLowerCase().includes(searchQuery.toLowerCase())
-      );
-      console.log(result);
-      return result;
-    },
   },
   // Add more actions as needed (e.g., updateTask, deleteTask)
   getters: {
@@ -155,5 +147,12 @@ export const useTaskStore = defineStore('tasks', {
     getSkillById: (state) => (id: string) => {
       return state.skillTags.find((tag) => tag.$id === id) || null;
     },
+    filterTasksByTitle: (state) => (searchQuery: string) => {
+      const result = state.tasks.filter((task) =>
+        task.title.toLowerCase().includes(searchQuery.toLowerCase())
+      );
+      console.log(result);
+      return result;
+    },
   },
 });