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

Changed the Task project and address columns to link types to click and navigate to their respective information.

Browse source
This commit is contained in:
rocketdebris 2026-01-13 10:01:48 -05:00
parent 3a9bc2f6b2
commit 3e1fd039b3
1 changed files with 33 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,6 +1,6 @@
<template> <template>
<div class="page-container"> <div class="page-container">
<h2>Admin Tasks</h2> <h2>Tasks</h2>
<!-- Todo Chart Section --> <!-- Todo Chart Section -->
<div class = "widgets-grid"> <div class = "widgets-grid">
<!-- Widget Cards go here if needed --> <!-- Widget Cards go here if needed -->
@ -8,6 +8,8 @@
<DataTable <DataTable
:data="tableData" :data="tableData"
:columns="columns" :columns="columns"
:filters="filters"
:tableActions="tableActions"
tableName="tasks" tableName="tasks"
:lazy="true" :lazy="true"
:totalRecords="totalRecords" :totalRecords="totalRecords"
@ -18,7 +20,7 @@
</template> </template>
<script setup> <script setup>
import DataTable from "../common/DataTable.vue"; import DataTable from "../common/DataTable.vue";
import { ref, onMounted } from "vue"; import { ref, onMounted, watch } from "vue";
import { useRouter } from "vue-router"; import { useRouter } from "vue-router";
import Api from "../../api"; import Api from "../../api";
import { useLoadingStore } from "../../stores/loading"; import { useLoadingStore } from "../../stores/loading";
@ -37,8 +39,12 @@ const isLoading = ref(false);
const columns = [ const columns = [
{ label: "Task", fieldName: "subject", type: "text", sortable: true, filterable: true }, { label: "Task", fieldName: "subject", type: "text", sortable: true, filterable: true },
{ label: "Project", fieldName: "project", type: "link", sortable: true }, { label: "Project", fieldName: "project", type: "link", sortable: true,
{ label: "Address", fieldName: "address", type: "text", sortable: true }, onLinkClick: (link, rowData) => handleProjectClick(link, rowData)
},
{ label: "Address", fieldName: "address", type: "link", sortable: true,
onLinkClick: (link, rowData) => handlePropertyClick(link, rowData)
},
{ label: "Type", fieldName: "type", type: "text", sortable: true }, { label: "Type", fieldName: "type", type: "text", sortable: true },
{ label: "Overall Status", fieldName: "status", type: "status", sortable: true }, { label: "Overall Status", fieldName: "status", type: "status", sortable: true },
]; ];
@ -160,12 +166,35 @@ const handleLazyLoad = async (event) => {
} }
}; };
const handleProjectClick = (link, rowData) => {
console.log("DEBUG: Project Link Clicked.");
const jobId = encodeURIComponent(rowData.project);
router.push(`/job?jobId=${jobId}`);
};
const handlePropertyClick = (link, rowData) => {
console.log("DEBUG: Property Link Clicked.");
const client = encodeURIComponent(rowData.customerName);
const address = encodeURIComponent(rowData.address);
router.push(`/property?client=${client}&address=${address}`);
}
// If we implement a Task Detail View, this may be helpful // If we implement a Task Detail View, this may be helpful
//const handleRowClick = (event) => { //const handleRowClick = (event) => {
// const rowData = event.data; // const rowData = event.data;
// router.push(`/task?taskId=${rowData.name}`); // router.push(`/task?taskId=${rowData.name}`);
//} //}
// Watch for filters change to update status counts
watch(
() => filtersStore.getTableFilters("tasks"),
async () => {
await refreshStatusCounts();
},
{ deep: true },
);
// Load initial data // Load initial data
onMounted(async () => { onMounted(async () => {
notifications.addWarning("Tasks page coming soon"); notifications.addWarning("Tasks page coming soon");