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

Added Job detail page with a datatable displaying all Tasks related to that Job.

Browse source
This commit is contained in:
rocketdebris 2025-12-23 14:48:28 -05:00
parent 49840b6c38
commit b2f77f2ca1
3 changed files with 219 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

119
frontend/src/components/pages/Job.vue
View file

@ -5,15 +5,39 @@
</div>
<div class="info-section">
<div class="address-info">
<Card>
<template #header>
<div class="widget-header">
<h3>Address</h3>
</div>
</template>
<template #content>
<div class="widget-content">
{{ job.customInstallationAddress || "" }}
</div>
</template>
</Card>
</div>
<div class="customer-info">
<Card>
<template #header>
<div class="widget-header">
<h3>Customer</h3>
</div>
</template>
<template #content>
<div class="widget-content">
{{ job.customer || "" }}
</div>
</template>
</Card>
</div>
</div>
<div class="task-list">
<DataTable
:data="tableData"
:columns="columns"
tableName="jobs"
tableName="jobtasks"
:lazy="true"
:totalRecords="totalRecords"
:loading="isLoading"
@ -24,8 +48,10 @@
</template>
<script setup>
import Card from "../common/Card.vue";
import DataTable from "../common/DataTable.vue";
import { ref, onMounted } from "vue";
import { ref, onMounted, computed } from "vue";
import { useRoute } from "vue-router";
import Api from "../../api";
import { useLoadingStore } from "../../stores/loading";
import { usePaginationStore } from "../../stores/pagination";
@ -37,15 +63,23 @@ const paginationStore = usePaginationStore();
const filtersStore = useFiltersStore();
const notifications = useNotificationStore();
const route = useRoute();
const jobIdQuery = computed(() => route.query.jobId || "");
const isNew = computed(() => route.query.new === "true");
const tableData = ref([]);
const totalRecords = ref(0);
const isLoading = ref(false);
const job = ref(null);
const taskList = ref(null);
const columns = [
{ label: "Task", fieldName: "", type: "text", sortable: true, filterable: true },
{ label: "Address", fieldName: "", type: "text", sortable: true, filterable: true },
{ label: "Task", fieldName: "subject", type: "text" },
{ label: "ID", fieldName: "name", type: "text", sortable: true, filterable: true },
{ label: "Category", fieldName: "", type: "text", sortable: true, filterable: true },
{ label: "Status", fieldName: "", type: "text", sortable: true, filterable: true },
{ label: "Status", fieldName: "status", type: "text", sortable: true, filterable: true },
];
const handleLazyLoad = async (event) => {
@ -66,7 +100,7 @@ const handleLazyLoad = async (event) => {
};
// Get filters (convert PrimeVue format to API format)
const filters = {};
const filters = {project: jobIdQuery.value};
if (event.filters) {
Object.keys(event.filters).forEach((key) => {
if (key !== "global" && event.filters[key] && event.filters[key].value) {
@ -109,7 +143,7 @@ const handleLazyLoad = async (event) => {
console.log("Making API call with:", { paginationParams, filters });
// Call API with pagination, filters, and sorting
const result = await Api.getPaginatedJobTaskDetails(tpaginationParams, filters, sorting);
const result = await Api.getPaginatedJobTaskDetails(paginationParams, filters, sorting);
// Update local state - extract from pagination structure
tableData.value = result.data;
@ -155,8 +189,79 @@ const handleLazyLoad = async (event) => {
};
onMounted(async () => {
console.log("DEBUG: Query params:", route.query);
if (jobIdQuery.value) {
// Viewing existing Job
try {
job.value = await Api.getJob(jobIdQuery.value);
//taskList.value = await Api.getJobTaskList(jobIdQuery.value);
console.log("DEBUG: Loaded job:", job.value);
} catch (error) {
console.error("Error loading job from DB:", error);
}
}
// Initialize pagination and filters
paginationStore.initializeTablePagination("jobTasks", { rows: 10 });
filtersStore.initializeTableFilters("jobTasks", columns);
filtersStore.initializeTableSorting("jobsTasks");
// Load first page of tasks
const initialPagination = paginationStore.getTablePagination("jobTasks");
const initialFilters = filtersStore.getTableFilters("jobTasks");
const initialSorting = filtersStore.getTableSorting("jobTasks");
await handleLazyLoad({
page: initialPagination.page,
rows: initialPagination.rows,
first: initialPagination.first,
sortField: initialSorting.field || initialPagination.sortField,
sortOrder: initialSorting.order || initialPagination.sortOrder,
});
});
</script>
<style scoped>
.info-section {
display: flex;
flex-wrap: wrap;
gap: 20px;
margin-bottom: 20px;
}
.widget-header {
display: flex;
align-items: center;
gap: 10px;
padding: 20px 20px 0;
}
.widget-icon {
color: var(--theme-primary-strong);
width: 24px;
height: 24px;
}
.widget-header h3 {
margin: 0;
color: #2c3e50;
font-size: 1.2rem;
}
.widget-content {
display: flex;
flex-direction: column;
margin: 0;
width: 200px;
align-items: center;
padding: 20px 20px 20px;
/*gap: 15px;*/
}
.job-page{
height: 100%;
margin: 20px;
gap: 20px;
background-color: transparent;
}
</style>