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

Task Status changes, needs some TLC.

Browse Source
This commit is contained in:
rocketdebris 2026-01-14 15:14:34 -05:00
parent 0c52f3fc23
commit 01ff96fb74
3 changed files with 104 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/src/api.js
View File

@ -24,6 +24,7 @@ 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";
const FRAPPE_GET_TASKS_STATUS_OPTIONS = "custom_ui.api.db.tasks.get_task_status_options";
const FRAPPE_SET_TASK_STATUS_METHOD = "custom_ui.api.db.tasks.set_task_status";
// 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";

78
frontend/src/components/common/DataTable.vue
View File

@ -383,18 +383,46 @@
>
<Select
v-for="action in rowActionsGrouped.select"
:options="action.statusOptions"
:options="action.selectOptions"
:placeholder="action.label"
@change="handleSelectChange(action, slotProps.data, $event)"
/>
</div>
<!-- Render Generic Component -->
<div
v-if="rowActionsGrouped.menu.length > 0"
class="dt-row-actions-menu"
>
<template
v-for="action in rowActionsGrouped.menu"
:key="action.label"
>
<Button
type="button"
:label="action.menuLabel || action.label"
:icon="action.icon"
:size="action.size || 'small'"
:severity="action.style || 'secondary'"
@click="toggleMenu($event, action, slotProps.data)"
aria-haspopup="true"
:disabled="loading"
class="dt-row-btn"
outlined
/>
<Menu
:ref="defineMenuRef(action.label, slotProps.data.id)"
:model="buildMenuItems(action.menuItems || [], slotProps.data)"
:popup="true"
/>
</template>
</div>
</div>
</template>
</Column>
</DataTable>
</template>
<script setup>
import { defineProps, computed, onMounted, watch, ref } from "vue";
import { defineProps, computed, onMounted, watch, ref, reactive } from "vue";
import DataTable from "primevue/datatable";
import Column from "primevue/column";
import Tag from "primevue/tag";
@ -410,6 +438,16 @@ const filtersStore = useFiltersStore();
const loadingStore = useLoadingStore();
const paginationStore = usePaginationStore();
const menuRefs = reactive({});
const activeMenuKey = ref(null);
const defineMenuRef = (label, id) => {
console.log("Defining Menu Refs:", label, id);
const refName = `${label}-${id}`
menuRefs[refName] = ref();
return menuRefs[refName]
}
const props = defineProps({
columns: {
type: Array,
@ -715,6 +753,7 @@ const rowActionsGrouped = computed(() => {
secondary: rowActions.value.filter((action) => action.layout?.priority === "secondary"),
dropdown: rowActions.value.filter((action) => action.layout?.priority === "dropdown"),
select: rowActions.value.filter((action) => action.layout?.priority === "select"),
menu: rowActions.value.filter((action) => action.layout?.priority === "menu"),
};
return groups;
});
@ -1032,7 +1071,38 @@ const handleActionClick = (action, rowData = null) => {
}
};
const toggleMenu = (event, action, rowData) => {
console.log("Menu button toggled");
const menuKey = `${action.label}-${rowData.id}`;
console.log(menuRefs, menuKey);
const menu = menuRefs[menuKey];
console.log(event, action, rowData, menuKey, menu);
if (menu) {
console.log("Menu:", menu);
menu.toggle(event);
activeMenuKey.value = menuKey;
} else {
console.log("Menu undefined.");
}
};
const buildMenuItems = (menuItems, rowData) => {
console.log("DEBUG: Building menuItems:", menuItems);
return menuItems.map(item => ({
...item,
command: () => {
console.log("Clicked from Datatable");
if (typeof item.command === 'function') {
item.command(rowData);
}
}
}));
};
const handleSelectChange = (action, rowData, event) => {
console.log("Action:", action);
console.log("rowData:", rowData);
console.log("event:", event);
try {
if (typeof action.action === "function") {
if (rowData) {
@ -1043,6 +1113,10 @@ const handleSelectChange = (action, rowData, event) => {
action.action();
}
}
if (action.resetComponentOnChange) {
console.log("DEBUG: Resetting Select Component");
event.originalEvent.target.value = null;
}
} catch (error) {
console.error("Error executing action:", error);
}

34
frontend/src/components/pages/Tasks.vue
View File

@ -37,7 +37,15 @@ const tableData = ref([]);
const totalRecords = ref(0);
const isLoading = ref(false);
const showCompleted = ref(false);
const statusOptions = ref([]);
const statusOptions = ref([
"Open",
"Working",
"Pending",
"Review",
"Overdue",
"Completed",
"Cancelled",
]);
// Computed property to get current filters for the chart
const currentFilters = computed(() => {
@ -76,15 +84,27 @@ const tableActions = [
},
{
label: "Set Status",
action: (rowData, newValue) => {
console.log("DEBUG: Row Data:", rowData);
console.log("DEBUG: New Value:", newValue);
},
rowAction: true,
type: "menu",
menuItems: statusOptions.value.map(option => ({
label: option,
command: async (rowData) => {
console.log("Clicked on row:", rowData);
await Api.setTaskStatus(rowData.id, option);
let rowIndex = -1;
for (let i = 0; i<tableData.value.length(); i++) {
if (row.id == tableData.value[i].id) {
rowIndex = i;
}
}
if (rowIndex >= 0) {
tableData.value[rowIndex].status = option;
}
},
})),
layout: {
priority: "select"
priority: "menu"
},
statusOptions: statusOptions.value
},
];