bnilsen/custom_ui
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Added routing to filter the datatable based on the subject line of the task.

Browse source
This commit is contained in:
rocketdebris 2026-01-19 15:38:47 -05:00
parent ddf758f4b6
commit 6ae6ae6812
1 changed files with 24 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

27
frontend/src/components/pages/Tasks.vue
View file

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