From 6ae6ae6812d3fefc1374fc6f034d1c50be4ca4bb Mon Sep 17 00:00:00 2001
From: rocketdebris <rocketdebris@gmail.com>
Date: Mon, 19 Jan 2026 15:38:47 -0500
Subject: [PATCH] Added routing to filter the datatable based on the subject
 line of the task.

---
 frontend/src/components/pages/Tasks.vue | 27 ++++++++++++++++++++++---
 1 file changed, 24 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/pages/Tasks.vue b/frontend/src/components/pages/Tasks.vue
index 1e9515e..0e7a9ec 100644
--- a/frontend/src/components/pages/Tasks.vue
+++ b/frontend/src/components/pages/Tasks.vue
@@ -21,18 +21,22 @@
 <script setup>
 import DataTable from "../common/DataTable.vue";
 import { ref, onMounted, watch, computed } from "vue";
-import { useRouter } from "vue-router";
+import { useRouter, useRoute } from "vue-router";
 import Api from "../../api";
 import { useLoadingStore } from "../../stores/loading";
 import { usePaginationStore } from "../../stores/pagination";
 import { useFiltersStore } from "../../stores/filters";
 import { useNotificationStore } from "../../stores/notifications-primevue";
+import { FilterMatchMode } from "@primevue/core";
 
 const loadingStore = useLoadingStore();
 const paginationStore = usePaginationStore();
 const filtersStore = useFiltersStore();
 const notifications = useNotificationStore();
 
+const route = useRoute();
+const subject = route.query.subject;
+
 const tableData = ref([]);
 const totalRecords = ref(0);
 const isLoading = ref(false);
@@ -46,13 +50,18 @@ const statusOptions = ref([
 	"Cancelled",
 ]);
 
+const filters = {
+	subject: { value: null, matchMode: FilterMatchMode.CONTAINS },
+};
+
 // Computed property to get current filters for the chart
 const currentFilters = computed(() => {
 	return filtersStore.getTableFilters("tasks");
 });
 
 const columns = [
-	{ label: "Task", fieldName: "subject", type: "text", sortable: true, filterable: true },
+	{ label: "Task", fieldName: "subject", type: "text", sortable: true, filterable: true,
+	filterInputID: "subjectFilterId" },
 	{ label: "Job", fieldName: "project", type: "link", sortable: true,
 		onLinkClick: (link, rowData) => handleProjectClick(link, rowData)
 	},
@@ -92,7 +101,7 @@ const tableActions = [
 				try {
 					// Uncomment when API is ready
 					await Api.setTaskStatus(rowData.id, option);
-					
+
 					// Find and update the row in the table data
 					const rowIndex = tableData.value.findIndex(row => row.id === rowData.id);
 					if (rowIndex >= 0) {
@@ -211,6 +220,10 @@ watch(showCompleted, () => {
 
 // Load initial data
 onMounted(async () => {
+	if (subject) {
+		const inputElement = document.getElementById(`filter-subject`);
+		inputElement.text = subject;
+	}
 	notifications.addWarning("Tasks page coming soon");
 	// Initialize pagination and filters
 	paginationStore.initializeTablePagination("tasks", { rows: 10 });
@@ -222,6 +235,14 @@ onMounted(async () => {
 	const initialFilters = filtersStore.getTableFilters("tasks");
 	const initialSorting = filtersStore.getTableSorting("tasks");
 
+	if (subject) {
+		console.log(subject);
+		console.log(initialFilters);
+		console.log(initialFilters.subject);
+		initialFilters.subject.value = subject;
+		//initialFilters = {...initialFilters, subject: {value: subject, match_mode: "contains"}};
+	}
+
 	const optionsResult = await Api.getTaskStatusOptions();
 	statusOptions.value = optionsResult;
 	console.log("DEBUG: Loaded Status options: ", statusOptions.value)