CaWittMN08/custom_ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added Tasks Page, Routing, SideBar entry, and API methods.

Browse Source
This commit is contained in:
rocketdebris 2026-01-12 15:50:56 -05:00
parent 909dab62b5
commit 94e1c4dfed
5 changed files with 359 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

88
custom_ui/api/db/tasks.py Normal file
View File

@ -0,0 +1,88 @@
import frappe
from custom_ui.db_utils import process_query_conditions, build_datatable_dict, get_count_or_filters, build_success_response, build_error_response
@frappe.whitelist()
def get_job_task_table_data(filters={}, sortings={}, page=1, page_size=10):
"""Get paginated job tasks table data with filtering and sorting support."""
print("DEBUG: raw task options received:", filters, sortings, page, page_size)
processed_filters, processed_sortings, is_or, page, page_size = process_query_conditions(filters, sortings, page, page_size)
print("DEBUG: Processed Filters:", processed_filters)
if is_or:
count = frappe.db.sql(*get_count_or_filters("Task", filters))[0][0]
else:
count = frappe.db.count("Task", filters=filters)
print(f"DEBUG: Number of tasks returned: {count}")
tasks = frappe.db.get_all(
"Task",
fields=["*"],
filters=filters,
limit=page_size,
start=(page - 1) * page_size,
order_by=processed_sortings
)
tableRows = []
for task in tasks:
tableRow = {}
tableRow["id"] = task["name"]
tableRow["subject"] = task["subject"]
tableRow["address"] = task.get("custom_property", "")
tableRow["status"] = task.get("status", "")
tableRow["type"] = task.get("type", "")
tableRows.append(tableRow)
table_data_dict = build_datatable_dict(data=tableRows, count=count, page=page, page_size=page_size)
return build_success_response(table_data_dict)
@frappe.whitelist()
def get_job_task_list(job_id=""):
if job_id:
try:
tasks = frappe.get_all('Task', filters={"project": job_id})
task_docs = {task_id: frappe.get_doc(task_id) for task_id in tasks}
return build_success_response(task_docs)
except Exception as e:
return build_error_response(str(e), 500)
@frappe.whitelist()
def get_tasks_table_data(filters={}, sortings=[], page=1, page_size=10):
"""Get paginated job table data with filtering and sorting support."""
print("DEBUG: Raw job options received:", filters, sortings, page, page_size)
processed_filters, processed_sortings, is_or, page, page_size = process_query_conditions(filters, sortings, page, page_size)
# Handle count with proper OR filter support
if is_or:
count = frappe.db.sql(*get_count_or_filters("Task", processed_filters))[0][0]
else:
count = frappe.db.count("Task", filters=processed_filters)
tasks = frappe.db.get_all(
"Task",
fields=["*"],
filters=processed_filters if not is_or else None,
or_filters=processed_filters if is_or else None,
limit=page_size,
start=(page - 1) * page_size,
order_by=processed_sortings
)
tableRows = []
for task in tasks:
tableRow = {}
tableRow["id"] = task["name"]
tableRow["subject"] = task["subject"]
tableRow["address"] = task.get("custom_property", "")
tableRow["status"] = task.get("status", "")
tableRows.append(tableRow)
data_table_dict = build_datatable_dict(data=tableRows, count=count, page=page, page_size=page_size)
return build_success_response(data_table_dict)

37
frontend/src/api.js
View File

@ -21,6 +21,8 @@ const FRAPPE_UPSERT_JOB_METHOD = "custom_ui.api.db.jobs.upsert_job";
const FRAPPE_GET_JOB_TASK_LIST_METHOD = "custom_ui.api.db.jobs.get_job_task_table_data";
const FRAPPE_GET_INSTALL_PROJECTS_METHOD = "custom_ui.api.db.jobs.get_install_projects";
const FRAPPE_GET_JOB_TEMPLATES_METHOD = "custom_ui.api.db.jobs.get_job_templates";
// Task methods
const FRAPPE_GET_TASKS_METHOD = "custom_ui.api.db.tasks.get_tasks_table_data";
// Invoice methods
const FRAPPE_GET_INVOICES_METHOD = "custom_ui.api.db.invoices.get_invoice_table_data";
const FRAPPE_UPSERT_INVOICE_METHOD = "custom_ui.api.db.invoices.upsert_invoice";
@ -240,7 +242,7 @@ class Api {
static async getJobTemplates(company) {
return await this.request(FRAPPE_GET_JOB_TEMPLATES_METHOD, { company });
}
static async getJobDetails() {
const projects = await this.getDocsList("Project");
const data = [];
@ -339,7 +341,40 @@ class Api {
return result;
}
// ============================================================================
// TASK METHODS
// ============================================================================
/**
* Get paginated job data with filtering and sorting
* @param {Object} paginationParams - Pagination parameters from store
* @param {Object} filters - Filter parameters from store
* @param {Object} sorting - Sorting parameters from store (optional)
* @returns {Promise<{data: Array, pagination: Object}>}
*/
static async getPaginatedTaskDetails(paginationParams = {}, filters = {}, sorting = null) {
const { page = 0, pageSize = 10, sortField = null, sortOrder = null } = paginationParams;
// Use sorting from the dedicated sorting parameter first, then fall back to pagination params
const actualSortField = sorting?.field || sortField;
const actualSortOrder = sorting?.order || sortOrder;
const options = {
page: page + 1, // Backend expects 1-based pages
page_size: pageSize,
filters,
sorting:
actualSortField && actualSortOrder
? `${actualSortField} ${actualSortOrder === -1 ? "desc" : "asc"}`
: null,
for_table: true,
};
console.log("DEBUG: API - Sending task options to backend:", options);
const result = await this.request(FRAPPE_GET_TASKS_METHOD, { options });
return result;
}
// ============================================================================
// INVOICE / PAYMENT METHODS

2
frontend/src/components/SideBar.vue
View File

@ -19,6 +19,7 @@ import {
ReceiveDollars,
NavArrowLeft,
NavArrowRight,
ClipboardCheck,
} from "@iconoir/vue";
import SidebarSpeedDial from "./SidebarSpeedDial.vue";
@ -139,6 +140,7 @@ const categories = ref([
// { name: "Bids", icon: Neighbourhood, url: "/schedule-bid" },
{ name: "Estimates", icon: Calculator, url: "/estimates" },
{ name: "Jobs", icon: Hammer, url: "/jobs" },
{ name: "Tasks", icon: ClipboardCheck, url: "/tasks" },
{ name: "Payments/Invoices", icon: ReceiveDollars, url: "/invoices" },
{ name: "Routes", icon: PathArrowSolid, url: "/routes" },
{ name: "Time Sheets", icon: Clock, url: "/timesheets" },

231
frontend/src/components/pages/Tasks.vue Normal file
View File

@ -0,0 +1,231 @@
<template>
<div class="page-container">
<h2>Admin Tasks</h2>
<!-- Todo Chart Section -->
<div class = "widgets-grid">
<!-- Widget Cards go here if needed -->
</div>
<DataTable
:data="tableData"
:columns="columns"
tableName="tasks"
:lazy="true"
:totalRecords="totalRecords"
:loading="isLoading"
@lazy-load="handleLazyLoad"
/>
</div>
</template>
<script setup>
import DataTable from "../common/DataTable.vue";
import { ref, onMounted } from "vue";
import { useRouter } 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";
const loadingStore = useLoadingStore();
const paginationStore = usePaginationStore();
const filtersStore = useFiltersStore();
const notifications = useNotificationStore();
const tableData = ref([]);
const totalRecords = ref(0);
const isLoading = ref(false);
const columns = [
{ label: "Task", fieldName: "subject", type: "text", sortable: true, filterable: true },
{ label: "Address", fieldName: "address", type: "text", sortable: true },
{ label: "Type", fieldName: "type", type: "text", sortable: true },
{ label: "Overall Status", fieldName: "status", type: "status", sortable: true },
];
const router = useRouter();
const navigateTo = (path) => {
router.push(path);
};
const filterBy = (filter) => {
console.log("DEBUG: Tasks filterBy not implemented yet.");
};
// Handle lazy loading events from DataTable
const handleLazyLoad = async (event) => {
console.log("Tasks page - handling lazy load:", event);
try {
isLoading.value = true;
// Get sorting information from filters store first (needed for cache key)
const sorting = filtersStore.getTableSorting("tasks");
console.log("Current sorting state:", sorting);
// Get pagination parameters
const paginationParams = {
page: event.page || 0,
pageSize: event.rows || 10,
sortField: event.sortField,
sortOrder: event.sortOrder,
};
// Get filters (convert PrimeVue format to API format)
const filters = {};
if (event.filters) {
Object.keys(event.filters).forEach((key) => {
if (key !== "global" && event.filters[key] && event.filters[key].value) {
filters[key] = event.filters[key];
}
});
}
// Clear cache when filters or sorting are active to ensure fresh data
const hasActiveFilters = Object.keys(filters).length > 0;
const hasActiveSorting = paginationParams.sortField && paginationParams.sortOrder;
if (hasActiveFilters || hasActiveSorting) {
paginationStore.clearTableCache("tasks");
}
// Check cache first
const cachedData = paginationStore.getCachedPage(
"tasks",
paginationParams.page,
paginationParams.pageSize,
sorting.field || paginationParams.sortField,
sorting.order || paginationParams.sortOrder,
filters,
);
if (cachedData) {
// Use cached data
tableData.value = cachedData.records;
totalRecords.value = cachedData.totalRecords;
paginationStore.setTotalRecords("tasks", cachedData.totalRecords);
console.log("Loaded from cache:", {
records: cachedData.records.length,
total: cachedData.totalRecords,
page: paginationParams.page + 1,
});
return;
}
console.log("Making API call with:", { paginationParams, filters });
// Call API with pagination, filters, and sorting
const result = await Api.getPaginatedTaskDetails(paginationParams, filters, sorting);
// Update local state - extract from pagination structure
tableData.value = result.data;
totalRecords.value = result.pagination.total;
// Update pagination store with new total
paginationStore.setTotalRecords("tasks", result.pagination.total);
console.log("Updated pagination state:", {
tableData: tableData.value.length,
totalRecords: totalRecords.value,
storeTotal: paginationStore.getTablePagination("tasks").totalRecords,
storeTotalPages: paginationStore.getTotalPages("tasks"),
});
// Cache the result
paginationStore.setCachedPage(
"tasks",
paginationParams.page,
paginationParams.pageSize,
sorting.field || paginationParams.sortField,
sorting.order || paginationParams.sortOrder,
filters,
{
records: result.data,
totalRecords: result.pagination.total,
},
);
console.log("Loaded from API:", {
records: result.data.length,
total: result.pagination.total,
page: paginationParams.page + 1,
});
} catch (error) {
console.error("Error loading job data:", error);
// You could also show a toast or other error notification here
tableData.value = [];
totalRecords.value = 0;
} finally {
isLoading.value = false;
}
};
// If we implement a Task Detail View, this may be helpful
//const handleRowClick = (event) => {
// const rowData = event.data;
// router.push(`/task?taskId=${rowData.name}`);
//}
// Load initial data
onMounted(async () => {
notifications.addWarning("Tasks page coming soon");
// Initialize pagination and filters
paginationStore.initializeTablePagination("tasks", { rows: 10 });
filtersStore.initializeTableFilters("tasks", columns);
filtersStore.initializeTableSorting("tasks");
// // Load first page
const initialPagination = paginationStore.getTablePagination("tasks");
const initialFilters = filtersStore.getTableFilters("tasks");
const initialSorting = filtersStore.getTableSorting("tasks");
await handleLazyLoad({
page: initialPagination.page,
rows: initialPagination.rows,
first: initialPagination.first,
sortField: initialSorting.field || initialPagination.sortField,
sortOrder: initialSorting.order || initialPagination.sortOrder,
});
});
</script>
<style lang="css">
.widgets-grid {
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;*/
}
.page-container {
height: 100%;
margin: 20px;
gap: 20px;
background-color: transparent;
}
</style>

2
frontend/src/router.js
View File

@ -13,6 +13,7 @@ import Client from "./components/pages/Client.vue";
import Property from "./components/pages/Property.vue";
import Estimate from "./components/pages/Estimate.vue";
import Job from "./components/pages/Job.vue";
import Tasks from "./components/pages/Tasks.vue";
const routes = [
{
@ -25,6 +26,7 @@ const routes = [
{ path: "/property", component: Property },
{ path: "/jobs", component: Jobs },
{ path: "/job", component: Job },
{ path: "/tasks", component: Tasks },
{ path: "/invoices", component: Invoices },
{ path: "/estimates", component: Estimates },
{ path: "/estimate", component: Estimate },