add table actions to datatable, client page, start writing db method for clients
This commit is contained in:
parent
a67e86af44
commit
df1df3f882
@ -1,6 +1,5 @@
|
|||||||
import frappe, json, re
|
import frappe, json, re
|
||||||
from datetime import datetime, date
|
from datetime import datetime, date
|
||||||
from custom_ui.db_utils import calculate_appointment_scheduled_status, calculate_estimate_sent_status, calculate_payment_recieved_status, calculate_job_status
|
|
||||||
|
|
||||||
@frappe.whitelist()
|
@frappe.whitelist()
|
||||||
def get_client_status_counts(weekly=False, week_start_date=None, week_end_date=None):
|
def get_client_status_counts(weekly=False, week_start_date=None, week_end_date=None):
|
||||||
@ -17,13 +16,6 @@ def get_client_status_counts(weekly=False, week_start_date=None, week_end_date=N
|
|||||||
filters.update(base_filters)
|
filters.update(base_filters)
|
||||||
return filters
|
return filters
|
||||||
|
|
||||||
def get_status_total(counts_dicts, status_field):
|
|
||||||
sum_array = []
|
|
||||||
for counts_dict in counts_dicts:
|
|
||||||
sum_array.append(counts_dict[status_field])
|
|
||||||
return sum(sum_array)
|
|
||||||
|
|
||||||
|
|
||||||
onsite_meeting_scheduled_status_counts = {
|
onsite_meeting_scheduled_status_counts = {
|
||||||
"label": "On-Site Meeting Scheduled",
|
"label": "On-Site Meeting Scheduled",
|
||||||
"not_started": frappe.db.count("Address", filters=get_filters("custom_onsite_meeting_scheduled", "Not Started")),
|
"not_started": frappe.db.count("Address", filters=get_filters("custom_onsite_meeting_scheduled", "Not Started")),
|
||||||
@ -58,6 +50,7 @@ def get_client_status_counts(weekly=False, week_start_date=None, week_end_date=N
|
|||||||
job_status_counts,
|
job_status_counts,
|
||||||
payment_received_status_counts
|
payment_received_status_counts
|
||||||
]
|
]
|
||||||
|
|
||||||
categories = []
|
categories = []
|
||||||
for status_dict in status_dicts:
|
for status_dict in status_dicts:
|
||||||
category = {
|
category = {
|
||||||
@ -85,7 +78,28 @@ def get_client_status_counts(weekly=False, week_start_date=None, week_end_date=N
|
|||||||
return categories
|
return categories
|
||||||
|
|
||||||
@frappe.whitelist()
|
@frappe.whitelist()
|
||||||
def get_clients(options):
|
def get_client(client_name):
|
||||||
|
address = frappe.get_doc("Address", client_name)
|
||||||
|
customer_name = [link for link in address.links if link.link_doctype == "Customer"][0].link_name
|
||||||
|
project_names = frappe.db.get_all("Project", fields=["name"], filters=[
|
||||||
|
["or", [
|
||||||
|
["custom_installation_address", "=", address.address_title],
|
||||||
|
["custom_address", "=", address.address_title]
|
||||||
|
]]
|
||||||
|
])
|
||||||
|
|
||||||
|
projects = [frappe.get_doc("Project", proj["name"]) for proj in project_names]
|
||||||
|
customer = frappe.get_doc("Customer", customer_name)
|
||||||
|
# get all associated data as needed
|
||||||
|
return {
|
||||||
|
"address": address,
|
||||||
|
"customer": customer,
|
||||||
|
"projects": projects
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@frappe.whitelist()
|
||||||
|
def get_clients_table_data(options):
|
||||||
options = json.loads(options)
|
options = json.loads(options)
|
||||||
print("DEBUG: Raw options received:", options)
|
print("DEBUG: Raw options received:", options)
|
||||||
defaultOptions = {
|
defaultOptions = {
|
||||||
@ -98,9 +112,6 @@ def get_clients(options):
|
|||||||
options = {**defaultOptions, **options}
|
options = {**defaultOptions, **options}
|
||||||
print("DEBUG: Final options:", options)
|
print("DEBUG: Final options:", options)
|
||||||
|
|
||||||
clients = []
|
|
||||||
tableRows = []
|
|
||||||
|
|
||||||
# Map frontend field names to backend field names
|
# Map frontend field names to backend field names
|
||||||
def map_field_name(frontend_field):
|
def map_field_name(frontend_field):
|
||||||
field_mapping = {
|
field_mapping = {
|
||||||
@ -162,75 +173,23 @@ def get_clients(options):
|
|||||||
|
|
||||||
addresses = frappe.db.get_all(
|
addresses = frappe.db.get_all(
|
||||||
"Address",
|
"Address",
|
||||||
fields=["address_title", "custom_onsite_meeting_scheduled", "custom_estimate_sent_status", "custom_job_status", "custom_payment_received_status"],
|
fields=["name", "address_title", "custom_onsite_meeting_scheduled", "custom_estimate_sent_status", "custom_job_status", "custom_payment_received_status"],
|
||||||
filters=processed_filters,
|
filters=processed_filters,
|
||||||
limit=options["page_size"],
|
limit=options["page_size"],
|
||||||
start=(options["page"] - 1) * options["page_size"],
|
start=(options["page"] - 1) * options["page_size"],
|
||||||
order_by=order_by
|
order_by=order_by
|
||||||
)
|
)
|
||||||
|
|
||||||
# for address in addresses:
|
rows = []
|
||||||
# client = {}
|
for address in addresses:
|
||||||
# tableRow = {}
|
tableRow = {}
|
||||||
|
tableRow["id"] = address["name"]
|
||||||
# on_site_meetings = frappe.db.get_all(
|
tableRow["address_title"] = address["address_title"]
|
||||||
# "On-Site Meeting",
|
tableRow["appointment_scheduled_status"] = address["custom_onsite_meeting_scheduled"]
|
||||||
# fields=["*"],
|
tableRow["estimate_sent_status"] = address["custom_estimate_sent_status"]
|
||||||
# filters={"address": address["address_title"]}
|
tableRow["job_status"] = address["custom_job_status"]
|
||||||
# )
|
tableRow["payment_received_status"] = address["custom_payment_received_status"]
|
||||||
|
rows.append(tableRow)
|
||||||
# quotations = frappe.db.get_all(
|
|
||||||
# "Quotation",
|
|
||||||
# fields=["*"],
|
|
||||||
# filters={"custom_installation_address": address["address_title"]}
|
|
||||||
# )
|
|
||||||
|
|
||||||
# sales_orders = frappe.db.get_all(
|
|
||||||
# "Sales Order",
|
|
||||||
# fields=["*"],
|
|
||||||
# filters={"custom_installation_address": address["address_title"]}
|
|
||||||
# )
|
|
||||||
|
|
||||||
# sales_invvoices = frappe.db.get_all(
|
|
||||||
# "Sales Invoice",
|
|
||||||
# fields=["*"],
|
|
||||||
# filters={"custom_installation_address": address["address_title"]}
|
|
||||||
# )
|
|
||||||
|
|
||||||
# payment_entries = frappe.db.get_all(
|
|
||||||
# "Payment Entry",
|
|
||||||
# fields=["*"],
|
|
||||||
# filters={"custom_installation_address": address["address_title"]}
|
|
||||||
# )
|
|
||||||
|
|
||||||
# jobs = frappe.db.get_all(
|
|
||||||
# "Project",
|
|
||||||
# fields=["*"],
|
|
||||||
# filters={
|
|
||||||
# "custom_installation_address": address["address_title"],
|
|
||||||
# "project_template": "SNW Install"
|
|
||||||
# }
|
|
||||||
# )
|
|
||||||
|
|
||||||
# tasks = frappe.db.get_all(
|
|
||||||
# "Task",
|
|
||||||
# fields=["*"],
|
|
||||||
# filters={"project": jobs[0]["name"]}
|
|
||||||
# ) if jobs else []
|
|
||||||
|
|
||||||
# tableRow["id"] = address["name"]
|
|
||||||
# tableRow["address_title"] = address["address_title"]
|
|
||||||
# tableRow["appointment_scheduled_status"] = calculate_appointment_scheduled_status(on_site_meetings[0]) if on_site_meetings else "Not Started"
|
|
||||||
# tableRow["estimate_sent_status"] = calculate_estimate_sent_status(quotations[0]) if quotations else "Not Started"
|
|
||||||
# tableRow["payment_received_status"] = calculate_payment_recieved_status(sales_invvoices[0], payment_entries) if sales_invvoices and payment_entries else "Not Started"
|
|
||||||
# tableRow["job_status"] = calculate_job_status(jobs[0], tasks) if jobs and tasks else "Not Started"
|
|
||||||
# tableRows.append(tableRow)
|
|
||||||
|
|
||||||
# client["address"] = address
|
|
||||||
# client["on_site_meetings"] = on_site_meetings
|
|
||||||
# client["jobs"] = jobs
|
|
||||||
# client["quotations"] = quotations
|
|
||||||
# clients.append(client)
|
|
||||||
|
|
||||||
return {
|
return {
|
||||||
"pagination": {
|
"pagination": {
|
||||||
@ -239,7 +198,7 @@ def get_clients(options):
|
|||||||
"page_size": options["page_size"],
|
"page_size": options["page_size"],
|
||||||
"total_pages": (count + options["page_size"] - 1) // options["page_size"]
|
"total_pages": (count + options["page_size"] - 1) // options["page_size"]
|
||||||
},
|
},
|
||||||
"data": addresses
|
"data": rows
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
278
frontend/action-behavior-test.html
Normal file
278
frontend/action-behavior-test.html
Normal file
@ -0,0 +1,278 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Updated DataTable Actions Behavior Test</title>
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
font-family: Arial, sans-serif;
|
||||||
|
margin: 20px;
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
.test-case {
|
||||||
|
margin: 20px 0;
|
||||||
|
padding: 15px;
|
||||||
|
border-left: 4px solid #007bff;
|
||||||
|
background-color: #f8f9fa;
|
||||||
|
}
|
||||||
|
.example {
|
||||||
|
background-color: #f1f1f1;
|
||||||
|
padding: 10px;
|
||||||
|
margin: 10px 0;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
table {
|
||||||
|
border-collapse: collapse;
|
||||||
|
width: 100%;
|
||||||
|
margin: 10px 0;
|
||||||
|
}
|
||||||
|
th,
|
||||||
|
td {
|
||||||
|
border: 1px solid #ddd;
|
||||||
|
padding: 8px;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
th {
|
||||||
|
background-color: #f2f2f2;
|
||||||
|
}
|
||||||
|
.code {
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
padding: 2px 5px;
|
||||||
|
border-radius: 3px;
|
||||||
|
font-family: monospace;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1>Updated DataTable Actions Behavior Test</h1>
|
||||||
|
|
||||||
|
<h2>✅ New Action Behavior Summary</h2>
|
||||||
|
|
||||||
|
<div class="test-case">
|
||||||
|
<h3>Action Type Changes:</h3>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<strong>Global Actions</strong>: Default behavior - always available above
|
||||||
|
table
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<strong>Single Selection Actions</strong> (<span class="code"
|
||||||
|
>requiresSelection: true</span
|
||||||
|
>): Above table, enabled only when exactly one row selected
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<strong>Row Actions</strong> (<span class="code">rowAction: true</span>): In
|
||||||
|
actions column, available per row
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<strong>Bulk Actions</strong> (<span class="code"
|
||||||
|
>requiresMultipleSelection: true</span
|
||||||
|
>): Above table when rows selected
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="test-case">
|
||||||
|
<h3>Updated Action Types Matrix:</h3>
|
||||||
|
<table>
|
||||||
|
<tr>
|
||||||
|
<th>Action Type</th>
|
||||||
|
<th>Property</th>
|
||||||
|
<th>Location</th>
|
||||||
|
<th>Enabled When</th>
|
||||||
|
<th>Data Received</th>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Global</td>
|
||||||
|
<td>None (default)</td>
|
||||||
|
<td>Above table</td>
|
||||||
|
<td>Always</td>
|
||||||
|
<td>None</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Single Selection</td>
|
||||||
|
<td><span class="code">requiresSelection: true</span></td>
|
||||||
|
<td>Above table</td>
|
||||||
|
<td>Exactly 1 row selected</td>
|
||||||
|
<td>Selected row object</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Row Action</td>
|
||||||
|
<td><span class="code">rowAction: true</span></td>
|
||||||
|
<td>Actions column</td>
|
||||||
|
<td>Always (per row)</td>
|
||||||
|
<td>Individual row object</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Bulk</td>
|
||||||
|
<td><span class="code">requiresMultipleSelection: true</span></td>
|
||||||
|
<td>Above table (when selected)</td>
|
||||||
|
<td>1+ rows selected</td>
|
||||||
|
<td>Array of selected rows</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="test-case">
|
||||||
|
<h3>Implementation Changes Made:</h3>
|
||||||
|
<ol>
|
||||||
|
<li>
|
||||||
|
<strong>Computed Properties Updated</strong>:
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<span class="code">globalActions</span>: Actions with no special
|
||||||
|
properties
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<span class="code">singleSelectionActions</span>: Actions with
|
||||||
|
<span class="code">requiresSelection: true</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<span class="code">rowActions</span>: Actions with
|
||||||
|
<span class="code">rowAction: true</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<span class="code">bulkActions</span>: Actions with
|
||||||
|
<span class="code">requiresMultipleSelection: true</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<strong>Template Updates</strong>:
|
||||||
|
<ul>
|
||||||
|
<li>Global Actions section now includes single selection actions</li>
|
||||||
|
<li>
|
||||||
|
Single selection actions are disabled unless exactly one row is
|
||||||
|
selected
|
||||||
|
</li>
|
||||||
|
<li>Visual feedback shows selection state</li>
|
||||||
|
<li>
|
||||||
|
Actions column only shows
|
||||||
|
<span class="code">rowAction: true</span> actions
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<strong>New Handler Added</strong>:
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<span class="code">handleSingleSelectionAction</span>: Passes selected
|
||||||
|
row data to action
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
</ol>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="test-case">
|
||||||
|
<h3>Example Configuration (Clients.vue):</h3>
|
||||||
|
<div class="example">
|
||||||
|
<pre>
|
||||||
|
const tableActions = [
|
||||||
|
// Global action - always available
|
||||||
|
{
|
||||||
|
label: "Add Client",
|
||||||
|
action: () => modalStore.openModal("createClient"),
|
||||||
|
icon: "pi pi-plus",
|
||||||
|
style: "primary"
|
||||||
|
},
|
||||||
|
// Single selection action - enabled when exactly one row selected
|
||||||
|
{
|
||||||
|
label: "View Details",
|
||||||
|
action: (rowData) => router.push(`/clients/${rowData.id}`),
|
||||||
|
icon: "pi pi-eye",
|
||||||
|
style: "info",
|
||||||
|
requiresSelection: true
|
||||||
|
},
|
||||||
|
// Bulk action - enabled when rows selected
|
||||||
|
{
|
||||||
|
label: "Export Selected",
|
||||||
|
action: (selectedRows) => exportData(selectedRows),
|
||||||
|
icon: "pi pi-download",
|
||||||
|
style: "success",
|
||||||
|
requiresMultipleSelection: true
|
||||||
|
},
|
||||||
|
// Row actions - appear in each row
|
||||||
|
{
|
||||||
|
label: "Edit",
|
||||||
|
action: (rowData) => editClient(rowData),
|
||||||
|
icon: "pi pi-pencil",
|
||||||
|
style: "secondary",
|
||||||
|
rowAction: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "Quick View",
|
||||||
|
action: (rowData) => showPreview(rowData),
|
||||||
|
icon: "pi pi-search",
|
||||||
|
style: "info",
|
||||||
|
rowAction: true
|
||||||
|
}
|
||||||
|
];</pre
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="test-case">
|
||||||
|
<h3>User Experience Improvements:</h3>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<strong>Clearer Action Organization</strong>: Actions are logically grouped by
|
||||||
|
their purpose
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<strong>Better Visual Feedback</strong>: Users see why certain actions are
|
||||||
|
disabled
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<strong>More Flexible Layout</strong>: Actions can be placed where they make
|
||||||
|
most sense
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<strong>Reduced Clutter</strong>: Row actions only show contextual actions for
|
||||||
|
that specific row
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<strong>Intuitive Behavior</strong>: Single selection actions work like "View
|
||||||
|
Details" - need one item selected
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="test-case">
|
||||||
|
<h3>Action Flow Examples:</h3>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<strong>Adding New Item</strong>: Global action → Always available → No data
|
||||||
|
needed
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<strong>Viewing Item Details</strong>: Single selection action → Select one row
|
||||||
|
→ View details of selected item
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<strong>Editing Item</strong>: Row action → Click edit in specific row → Edit
|
||||||
|
that item
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<strong>Bulk Operations</strong>: Bulk action → Select multiple rows → Operate
|
||||||
|
on all selected
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h2>✅ Testing Checklist</h2>
|
||||||
|
<ul>
|
||||||
|
<li>[ ] Global actions are always enabled and visible above table</li>
|
||||||
|
<li>[ ] Single selection actions are disabled when no rows selected</li>
|
||||||
|
<li>[ ] Single selection actions are disabled when multiple rows selected</li>
|
||||||
|
<li>[ ] Single selection actions are enabled when exactly one row is selected</li>
|
||||||
|
<li>[ ] Single selection actions receive correct row data</li>
|
||||||
|
<li>[ ] Row actions appear in each row's actions column</li>
|
||||||
|
<li>[ ] Row actions receive correct individual row data</li>
|
||||||
|
<li>[ ] Bulk actions appear when rows are selected</li>
|
||||||
|
<li>[ ] Bulk actions receive array of selected row data</li>
|
||||||
|
<li>[ ] Visual feedback shows selection state appropriately</li>
|
||||||
|
</ul>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -11,6 +11,7 @@ A feature-rich data table component built with PrimeVue's DataTable. This compon
|
|||||||
<DataTable
|
<DataTable
|
||||||
:columns="tableColumns"
|
:columns="tableColumns"
|
||||||
:data="tableData"
|
:data="tableData"
|
||||||
|
:tableActions="tableActions"
|
||||||
table-name="my-table"
|
table-name="my-table"
|
||||||
@row-click="handleRowClick"
|
@row-click="handleRowClick"
|
||||||
/>
|
/>
|
||||||
@ -41,6 +42,32 @@ const tableData = ref([
|
|||||||
{ id: 2, name: "Jane Smith", status: "in progress" },
|
{ id: 2, name: "Jane Smith", status: "in progress" },
|
||||||
]);
|
]);
|
||||||
|
|
||||||
|
const tableActions = ref([
|
||||||
|
{
|
||||||
|
label: "Add Item",
|
||||||
|
action: () => console.log("Add clicked"),
|
||||||
|
icon: "pi pi-plus",
|
||||||
|
style: "primary",
|
||||||
|
// Global action - always available
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "View Details",
|
||||||
|
action: (rowData) => console.log("View:", rowData),
|
||||||
|
icon: "pi pi-eye",
|
||||||
|
style: "info",
|
||||||
|
requiresSelection: true,
|
||||||
|
// Single selection action - enabled when exactly one row selected
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "Edit",
|
||||||
|
action: (rowData) => console.log("Edit:", rowData),
|
||||||
|
icon: "pi pi-pencil",
|
||||||
|
style: "secondary",
|
||||||
|
rowAction: true,
|
||||||
|
// Row action - appears in each row's actions column
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
|
||||||
const handleRowClick = (event) => {
|
const handleRowClick = (event) => {
|
||||||
console.log("Row clicked:", event.data);
|
console.log("Row clicked:", event.data);
|
||||||
};
|
};
|
||||||
@ -85,6 +112,12 @@ const handleRowClick = (event) => {
|
|||||||
- **Type:** `Object`
|
- **Type:** `Object`
|
||||||
- **Default:** `{ global: { value: null, matchMode: FilterMatchMode.CONTAINS } }`
|
- **Default:** `{ global: { value: null, matchMode: FilterMatchMode.CONTAINS } }`
|
||||||
|
|
||||||
|
### `tableActions` (Array)
|
||||||
|
|
||||||
|
- **Description:** Array of action objects that define interactive buttons for the table. Actions can be global (always available), single-selection (enabled when exactly one row is selected), row-specific (displayed per row), or bulk (for multiple selected rows).
|
||||||
|
- **Type:** `Array<Object>`
|
||||||
|
- **Default:** `[]`
|
||||||
|
|
||||||
## Server-Side Pagination & Lazy Loading
|
## Server-Side Pagination & Lazy Loading
|
||||||
|
|
||||||
When `lazy` is set to `true`, the DataTable operates in server-side mode with the following features:
|
When `lazy` is set to `true`, the DataTable operates in server-side mode with the following features:
|
||||||
@ -159,6 +192,179 @@ Renders values as clickable buttons:
|
|||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
|
## Table Actions Configuration
|
||||||
|
|
||||||
|
Table actions allow you to add interactive buttons to your DataTable. Actions can be either global (displayed above the table) or row-specific (displayed in an actions column).
|
||||||
|
|
||||||
|
### Action Object Properties
|
||||||
|
|
||||||
|
Each action object in the `tableActions` array supports the following properties:
|
||||||
|
|
||||||
|
#### Basic Properties
|
||||||
|
|
||||||
|
- **`label`** (String, required) - Display text for the button
|
||||||
|
- **`action`** (Function, required) - Function to execute when button is clicked
|
||||||
|
- **`icon`** (String, optional) - PrimeVue icon class (e.g., 'pi pi-plus')
|
||||||
|
- **`style`** (String, optional) - Button severity: 'primary', 'secondary', 'success', 'info', 'warning', 'danger'
|
||||||
|
- **`size`** (String, optional) - Button size: 'small', 'normal', 'large'
|
||||||
|
- **`requiresSelection`** (Boolean, default: false) - When true, action appears above table but is only enabled when exactly one row is selected
|
||||||
|
- **`requiresMultipleSelection`** (Boolean, default: false) - Determines if action is for bulk operations on selected rows
|
||||||
|
- **`rowAction`** (Boolean, default: false) - When true, action appears in each row's actions column
|
||||||
|
- **`layout`** (Object, optional) - Layout configuration for action positioning and styling
|
||||||
|
|
||||||
|
#### Layout Configuration
|
||||||
|
|
||||||
|
The `layout` property allows you to control where and how actions are displayed:
|
||||||
|
|
||||||
|
##### For Top-Level Actions (Global and Single Selection)
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
layout: {
|
||||||
|
position: "left" | "center" | "right", // Where to position in action bar
|
||||||
|
variant: "filled" | "outlined" | "text" // Visual style variant
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
##### For Row Actions
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
layout: {
|
||||||
|
priority: "primary" | "secondary" | "dropdown", // Display priority in row
|
||||||
|
variant: "outlined" | "text" | "compact" | "icon-only" // Visual style
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
##### For Bulk Actions
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
layout: {
|
||||||
|
position: "left" | "center" | "right", // Where to position in bulk action bar
|
||||||
|
variant: "filled" | "outlined" | "text" // Visual style variant
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Action Types
|
||||||
|
|
||||||
|
##### Global Actions (default behavior)
|
||||||
|
|
||||||
|
Global actions are displayed above the table and are always available:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
{
|
||||||
|
label: "Add New Item",
|
||||||
|
action: () => {
|
||||||
|
// Global action - no row data
|
||||||
|
console.log("Opening create modal");
|
||||||
|
},
|
||||||
|
icon: "pi pi-plus",
|
||||||
|
style: "primary"
|
||||||
|
// No requiresSelection, requiresMultipleSelection, or rowAction properties
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
##### Single Selection Actions (`requiresSelection: true`)
|
||||||
|
|
||||||
|
Single selection actions are displayed above the table but are only enabled when exactly one row is selected. They receive the selected row data as a parameter:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
{
|
||||||
|
label: "View Details",
|
||||||
|
action: (rowData) => {
|
||||||
|
// Single selection action - receives selected row data
|
||||||
|
console.log("Viewing:", rowData.name);
|
||||||
|
router.push(`/items/${rowData.id}`);
|
||||||
|
},
|
||||||
|
icon: "pi pi-eye",
|
||||||
|
style: "info",
|
||||||
|
requiresSelection: true
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
##### Row Actions (`rowAction: true`)
|
||||||
|
|
||||||
|
Row actions are displayed in an "Actions" column for each row and receive that row's data as a parameter:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
{
|
||||||
|
label: "Edit",
|
||||||
|
action: (rowData) => {
|
||||||
|
// Row action - receives individual row data
|
||||||
|
console.log("Editing:", rowData.name);
|
||||||
|
openEditModal(rowData);
|
||||||
|
},
|
||||||
|
icon: "pi pi-pencil",
|
||||||
|
style: "secondary",
|
||||||
|
rowAction: true
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
##### Bulk Actions (`requiresMultipleSelection: true`)
|
||||||
|
|
||||||
|
Bulk actions are displayed above the table when rows are selected and receive an array of selected row data:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
{
|
||||||
|
label: "Delete Selected",
|
||||||
|
action: (selectedRows) => {
|
||||||
|
// Bulk action - receives array of selected row data
|
||||||
|
console.log("Deleting:", selectedRows.length, "items");
|
||||||
|
selectedRows.forEach(row => deleteItem(row.id));
|
||||||
|
},
|
||||||
|
icon: "pi pi-trash",
|
||||||
|
style: "danger",
|
||||||
|
requiresMultipleSelection: true
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### Example Table Actions Configuration
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
const tableActions = [
|
||||||
|
// Global action - shows above table, always available
|
||||||
|
{
|
||||||
|
label: "Add Client",
|
||||||
|
action: () => modalStore.openModal("createClient"),
|
||||||
|
icon: "pi pi-plus",
|
||||||
|
style: "primary",
|
||||||
|
},
|
||||||
|
// Single selection action - shows above table, enabled when exactly one row selected
|
||||||
|
{
|
||||||
|
label: "View Details",
|
||||||
|
action: (rowData) => router.push(`/clients/${rowData.id}`),
|
||||||
|
icon: "pi pi-eye",
|
||||||
|
style: "info",
|
||||||
|
requiresSelection: true,
|
||||||
|
},
|
||||||
|
// Bulk action - shows when rows selected
|
||||||
|
{
|
||||||
|
label: "Delete Selected",
|
||||||
|
action: (selectedRows) => {
|
||||||
|
if (confirm(`Delete ${selectedRows.length} clients?`)) {
|
||||||
|
selectedRows.forEach((row) => deleteClient(row.id));
|
||||||
|
}
|
||||||
|
},
|
||||||
|
icon: "pi pi-trash",
|
||||||
|
style: "danger",
|
||||||
|
requiresMultipleSelection: true,
|
||||||
|
},
|
||||||
|
// Row actions - show in each row's actions column
|
||||||
|
{
|
||||||
|
label: "Edit",
|
||||||
|
action: (rowData) => editClient(rowData),
|
||||||
|
icon: "pi pi-pencil",
|
||||||
|
style: "secondary",
|
||||||
|
rowAction: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "Quick View",
|
||||||
|
action: (rowData) => showQuickPreview(rowData),
|
||||||
|
icon: "pi pi-search",
|
||||||
|
style: "info",
|
||||||
|
rowAction: true,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
```
|
||||||
|
|
||||||
## Events
|
## Events
|
||||||
|
|
||||||
### `rowClick`
|
### `rowClick`
|
||||||
@ -253,6 +459,17 @@ const handleLazyLoad = async (event) => {
|
|||||||
- **Automatic filter initialization** on component mount
|
- **Automatic filter initialization** on component mount
|
||||||
- **Cross-component filter synchronization**
|
- **Cross-component filter synchronization**
|
||||||
|
|
||||||
|
### Table Actions
|
||||||
|
|
||||||
|
- **Global actions** displayed above the table for general operations
|
||||||
|
- **Row-specific actions** in dedicated actions column with row data access
|
||||||
|
- **Bulk actions** for selected rows with multi-selection support
|
||||||
|
- **Customizable button styles** with PrimeVue severity levels
|
||||||
|
- **Icon support** using PrimeVue icons
|
||||||
|
- **Automatic action handling** with error catching
|
||||||
|
- **Disabled state** during loading operations
|
||||||
|
- **Dynamic bulk action visibility** based on row selection
|
||||||
|
|
||||||
## Usage Examples
|
## Usage Examples
|
||||||
|
|
||||||
### Server-Side Paginated Table (Recommended for Large Datasets)
|
### Server-Side Paginated Table (Recommended for Large Datasets)
|
||||||
@ -324,6 +541,126 @@ const handleLazyLoad = async (event) => {
|
|||||||
</template>
|
</template>
|
||||||
```
|
```
|
||||||
|
|
||||||
|
### Interactive Table with Actions
|
||||||
|
|
||||||
|
```vue
|
||||||
|
<script setup>
|
||||||
|
import { useRouter } from "vue-router";
|
||||||
|
import { useModalStore } from "./stores/modal";
|
||||||
|
|
||||||
|
const router = useRouter();
|
||||||
|
const modalStore = useModalStore();
|
||||||
|
|
||||||
|
const columns = [
|
||||||
|
{ fieldName: "name", label: "Name", sortable: true, filterable: true },
|
||||||
|
{ fieldName: "status", label: "Status", type: "status", sortable: true },
|
||||||
|
{ fieldName: "email", label: "Email", filterable: true },
|
||||||
|
];
|
||||||
|
|
||||||
|
const data = [
|
||||||
|
{ id: 1, name: "John Doe", status: "completed", email: "john@example.com" },
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
name: "Jane Smith",
|
||||||
|
status: "in progress",
|
||||||
|
email: "jane@example.com",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const tableActions = [
|
||||||
|
// Global action
|
||||||
|
{
|
||||||
|
label: "Add User",
|
||||||
|
action: () => {
|
||||||
|
modalStore.openModal("createUser");
|
||||||
|
},
|
||||||
|
icon: "pi pi-plus",
|
||||||
|
style: "primary",
|
||||||
|
},
|
||||||
|
// Single selection action
|
||||||
|
{
|
||||||
|
label: "View Details",
|
||||||
|
action: (rowData) => {
|
||||||
|
router.push(`/users/${rowData.id}`);
|
||||||
|
},
|
||||||
|
icon: "pi pi-eye",
|
||||||
|
style: "info",
|
||||||
|
requiresSelection: true,
|
||||||
|
},
|
||||||
|
// Bulk actions
|
||||||
|
{
|
||||||
|
label: "Export Selected",
|
||||||
|
action: (selectedRows) => {
|
||||||
|
exportUsers(selectedRows);
|
||||||
|
},
|
||||||
|
icon: "pi pi-download",
|
||||||
|
style: "success",
|
||||||
|
requiresMultipleSelection: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "Delete Selected",
|
||||||
|
action: (selectedRows) => {
|
||||||
|
if (confirm(`Delete ${selectedRows.length} users?`)) {
|
||||||
|
bulkDeleteUsers(selectedRows.map((row) => row.id));
|
||||||
|
}
|
||||||
|
},
|
||||||
|
icon: "pi pi-trash",
|
||||||
|
style: "danger",
|
||||||
|
requiresMultipleSelection: true,
|
||||||
|
},
|
||||||
|
// Row actions
|
||||||
|
{
|
||||||
|
label: "Edit",
|
||||||
|
action: (rowData) => {
|
||||||
|
modalStore.openModal("editUser", rowData);
|
||||||
|
},
|
||||||
|
icon: "pi pi-pencil",
|
||||||
|
style: "secondary",
|
||||||
|
rowAction: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "Quick Actions",
|
||||||
|
action: (rowData) => {
|
||||||
|
showQuickActionsMenu(rowData);
|
||||||
|
},
|
||||||
|
icon: "pi pi-ellipsis-v",
|
||||||
|
style: "info",
|
||||||
|
rowAction: true,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const deleteUser = async (userId) => {
|
||||||
|
// API call to delete user
|
||||||
|
await Api.deleteUser(userId);
|
||||||
|
};
|
||||||
|
|
||||||
|
const bulkDeleteUsers = async (userIds) => {
|
||||||
|
// API call to delete multiple users
|
||||||
|
await Api.bulkDeleteUsers(userIds);
|
||||||
|
};
|
||||||
|
|
||||||
|
const exportUsers = (users) => {
|
||||||
|
// Export selected users to CSV/Excel
|
||||||
|
const csv = generateCSV(users);
|
||||||
|
downloadFile(csv, "users.csv");
|
||||||
|
};
|
||||||
|
|
||||||
|
const refreshData = () => {
|
||||||
|
// Refresh table data
|
||||||
|
location.reload();
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<DataTable
|
||||||
|
:columns="columns"
|
||||||
|
:data="data"
|
||||||
|
:tableActions="tableActions"
|
||||||
|
table-name="users-table"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
```
|
||||||
|
|
||||||
### Basic Client-Side Table
|
### Basic Client-Side Table
|
||||||
|
|
||||||
```vue
|
```vue
|
||||||
@ -427,6 +764,118 @@ const customFilters = {
|
|||||||
</template>
|
</template>
|
||||||
```
|
```
|
||||||
|
|
||||||
|
### Layout-Aware Actions Example
|
||||||
|
|
||||||
|
```vue
|
||||||
|
<script setup>
|
||||||
|
import { ref } from 'vue'
|
||||||
|
import { useRouter } from 'vue-router'
|
||||||
|
import { useModalStore } from '@/stores/modal'
|
||||||
|
|
||||||
|
const router = useRouter()
|
||||||
|
const modalStore = useModalStore()
|
||||||
|
|
||||||
|
const columns = [
|
||||||
|
{ fieldName: 'name', label: 'Client Name', sortable: true, filterable: true },
|
||||||
|
{ fieldName: 'email', label: 'Email', filterable: true },
|
||||||
|
{ fieldName: 'status', label: 'Status', type: 'status', sortable: true }
|
||||||
|
]
|
||||||
|
|
||||||
|
const data = ref([
|
||||||
|
{ id: 1, name: 'Acme Corp', email: 'contact@acme.com', status: 'completed' },
|
||||||
|
{ id: 2, name: 'Tech Solutions', email: 'info@tech.com', status: 'in progress' }
|
||||||
|
])
|
||||||
|
|
||||||
|
const tableActions = [
|
||||||
|
// Left-positioned action with filled style
|
||||||
|
{
|
||||||
|
label: 'Quick Export',
|
||||||
|
icon: 'pi pi-download',
|
||||||
|
action: () => exportAllClients(),
|
||||||
|
severity: 'success',
|
||||||
|
layout: { position: 'left', variant: 'outlined' }
|
||||||
|
},
|
||||||
|
// Center-positioned bulk action
|
||||||
|
{
|
||||||
|
label: 'Archive Selected',
|
||||||
|
icon: 'pi pi-archive',
|
||||||
|
action: (selectedRows) => archiveClients(selectedRows),
|
||||||
|
severity: 'warning',
|
||||||
|
requiresMultipleSelection: true,
|
||||||
|
layout: { position: 'center', variant: 'outlined' }
|
||||||
|
},
|
||||||
|
// Right-positioned main action
|
||||||
|
{
|
||||||
|
label: 'Create Client',
|
||||||
|
icon: 'pi pi-plus',
|
||||||
|
action: () => modalStore.openModal('createClient'),
|
||||||
|
severity: 'info',
|
||||||
|
layout: { position: 'right', variant: 'filled' }
|
||||||
|
},
|
||||||
|
// Single selection action
|
||||||
|
{
|
||||||
|
label: 'Edit Details',
|
||||||
|
icon: 'pi pi-pencil',
|
||||||
|
action: (rowData) => router.push(`/clients/${rowData.id}/edit`),
|
||||||
|
severity: 'secondary',
|
||||||
|
requiresSelection: true,
|
||||||
|
layout: { position: 'left', variant: 'text' }
|
||||||
|
},
|
||||||
|
// Primary row action - most important
|
||||||
|
{
|
||||||
|
label: 'View',
|
||||||
|
icon: 'pi pi-eye',
|
||||||
|
action: (rowData) => router.push(`/clients/${rowData.id}`),
|
||||||
|
severity: 'info',
|
||||||
|
rowAction: true,
|
||||||
|
layout: { priority: 'primary', variant: 'outlined' }
|
||||||
|
},
|
||||||
|
// Secondary row action - less important
|
||||||
|
{
|
||||||
|
label: 'Contact',
|
||||||
|
icon: 'pi pi-phone',
|
||||||
|
action: (rowData) => initiateContact(rowData),
|
||||||
|
severity: 'success',
|
||||||
|
rowAction: true,
|
||||||
|
layout: { priority: 'secondary', variant: 'text' }
|
||||||
|
},
|
||||||
|
// Dropdown row action - additional options
|
||||||
|
{
|
||||||
|
label: 'More',
|
||||||
|
icon: 'pi pi-ellipsis-v',
|
||||||
|
action: (rowData) => showMoreOptions(rowData),
|
||||||
|
rowAction: true,
|
||||||
|
layout: { priority: 'dropdown', variant: 'icon-only' }
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
const exportAllClients = () => {
|
||||||
|
// Export logic
|
||||||
|
}
|
||||||
|
|
||||||
|
const archiveClients = (clients) => {
|
||||||
|
// Archive logic
|
||||||
|
}
|
||||||
|
|
||||||
|
const initiateContact = (client) => {
|
||||||
|
// Contact logic
|
||||||
|
}
|
||||||
|
|
||||||
|
const showMoreOptions = (client) => {
|
||||||
|
// More options logic
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<DataTable
|
||||||
|
:columns="columns"
|
||||||
|
:data="data"
|
||||||
|
:tableActions="tableActions"
|
||||||
|
table-name="clients-with-layout"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
```
|
||||||
|
|
||||||
## Store Integration
|
## Store Integration
|
||||||
|
|
||||||
The component integrates with a Pinia store (`useFiltersStore`) for persistent filter state:
|
The component integrates with a Pinia store (`useFiltersStore`) for persistent filter state:
|
||||||
|
|||||||
@ -7,18 +7,16 @@ const FRAPPE_UPSERT_ESTIMATE_METHOD = "custom_ui.api.db.upsert_estimate";
|
|||||||
const FRAPPE_UPSERT_JOB_METHOD = "custom_ui.api.db.upsert_job";
|
const FRAPPE_UPSERT_JOB_METHOD = "custom_ui.api.db.upsert_job";
|
||||||
const FRAPPE_UPSERT_INVOICE_METHOD = "custom_ui.api.db.upsert_invoice";
|
const FRAPPE_UPSERT_INVOICE_METHOD = "custom_ui.api.db.upsert_invoice";
|
||||||
const FRAPPE_GET_CLIENT_STATUS_COUNTS_METHOD = "custom_ui.api.db.get_client_status_counts";
|
const FRAPPE_GET_CLIENT_STATUS_COUNTS_METHOD = "custom_ui.api.db.get_client_status_counts";
|
||||||
|
const FRAPPE_GET_CLIENT_TABLE_DATA_METHOD = "custom_ui.api.db.get_clients_table_data";
|
||||||
|
const FRAPPE_GET_CLIENT_METHOD = "custom_ui.api.db.get_client";
|
||||||
|
|
||||||
class Api {
|
class Api {
|
||||||
static async request(frappeMethod, args = {}) {
|
static async request(frappeMethod, args = {}) {
|
||||||
args = DataUtils.toSnakeCaseObject(args);
|
args = DataUtils.toSnakeCaseObject(args);
|
||||||
console.log("DEBUG: API - Request Args: ", { method: frappeMethod, args });
|
const request = { method: frappeMethod, args };
|
||||||
|
console.log("DEBUG: API - Request Args: ", request);
|
||||||
try {
|
try {
|
||||||
let response = await frappe.call({
|
let response = await frappe.call(request);
|
||||||
method: frappeMethod,
|
|
||||||
args: {
|
|
||||||
...args,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
response = DataUtils.toCamelCaseObject(response);
|
response = DataUtils.toCamelCaseObject(response);
|
||||||
console.log("DEBUG: API - Request Response: ", response);
|
console.log("DEBUG: API - Request Response: ", response);
|
||||||
return response.message;
|
return response.message;
|
||||||
@ -33,8 +31,8 @@ class Api {
|
|||||||
return await this.request(FRAPPE_GET_CLIENT_STATUS_COUNTS_METHOD, params);
|
return await this.request(FRAPPE_GET_CLIENT_STATUS_COUNTS_METHOD, params);
|
||||||
}
|
}
|
||||||
|
|
||||||
static async getClientDetails(options = {}) {
|
static async getClientDetails(clientName) {
|
||||||
return await this.request("custom_ui.api.db.get_clients", { options });
|
return await this.request(FRAPPE_GET_CLIENT_DETAILS_METHOD);
|
||||||
}
|
}
|
||||||
|
|
||||||
static async getJobDetails() {
|
static async getJobDetails() {
|
||||||
@ -51,13 +49,11 @@ class Api {
|
|||||||
};
|
};
|
||||||
data.push(tableRow);
|
data.push(tableRow);
|
||||||
}
|
}
|
||||||
console.log("DEBUG: API - getJobDetails result: ", data);
|
|
||||||
return data;
|
return data;
|
||||||
}
|
}
|
||||||
|
|
||||||
static async getServiceData() {
|
static async getServiceData() {
|
||||||
const data = DataUtils.dummyServiceData;
|
const data = DataUtils.dummyServiceData;
|
||||||
console.log("DEBUG: API - getServiceData result: ", data);
|
|
||||||
return data;
|
return data;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -69,8 +65,6 @@ class Api {
|
|||||||
route = getDetailedDoc("Pre-Built Routes", rt.name);
|
route = getDetailedDoc("Pre-Built Routes", rt.name);
|
||||||
let tableRow = {};
|
let tableRow = {};
|
||||||
}
|
}
|
||||||
|
|
||||||
console.log("DEBUG: API - getRouteData result: ", data);
|
|
||||||
return data;
|
return data;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -102,6 +96,10 @@ class Api {
|
|||||||
return data;
|
return data;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
static async getClient(clientName) {
|
||||||
|
return await this.request(FRAPPE_GET_CLIENT_METHOD, { clientName });
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Get paginated client data with filtering and sorting
|
* Get paginated client data with filtering and sorting
|
||||||
* @param {Object} paginationParams - Pagination parameters from store
|
* @param {Object} paginationParams - Pagination parameters from store
|
||||||
@ -126,10 +124,7 @@ class Api {
|
|||||||
: null,
|
: null,
|
||||||
for_table: true,
|
for_table: true,
|
||||||
};
|
};
|
||||||
|
const result = await this.request(FRAPPE_GET_CLIENT_TABLE_DATA_METHOD, { options });
|
||||||
console.log("DEBUG: API - Sending options to backend:", options);
|
|
||||||
|
|
||||||
const result = await this.request("custom_ui.api.db.get_clients", { options });
|
|
||||||
return result;
|
return result;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -3,28 +3,36 @@
|
|||||||
<div
|
<div
|
||||||
v-if="hasFilters"
|
v-if="hasFilters"
|
||||||
:key="`filter-controls-${tableName}`"
|
:key="`filter-controls-${tableName}`"
|
||||||
class="filter-controls-panel mb-3 p-3 bg-light rounded custom-data-table"
|
class="dt-filter-panel"
|
||||||
>
|
>
|
||||||
<div class="row g-3 align-items-end">
|
<div class="dt-filter-header">
|
||||||
<div v-for="col in filterableColumns" :key="col.fieldName" class="col-md-4 col-lg-3">
|
<h6 class="dt-filter-title">
|
||||||
<label :for="`filter-${col.fieldName}`" class="form-label small fw-semibold">
|
<i class="pi pi-filter"></i>
|
||||||
|
Filters
|
||||||
|
</h6>
|
||||||
|
</div>
|
||||||
|
<div class="dt-filter-content">
|
||||||
|
<div class="dt-filter-grid">
|
||||||
|
<div v-for="col in filterableColumns" :key="col.fieldName" class="dt-filter-field">
|
||||||
|
<label :for="`filter-${col.fieldName}`" class="dt-filter-label">
|
||||||
{{ col.label }}
|
{{ col.label }}
|
||||||
</label>
|
</label>
|
||||||
<InputText
|
<InputText
|
||||||
:id="`filter-${col.fieldName}`"
|
:id="`filter-${col.fieldName}`"
|
||||||
v-model="pendingFilters[col.fieldName]"
|
v-model="pendingFilters[col.fieldName]"
|
||||||
:placeholder="`Filter by ${col.label.toLowerCase()}...`"
|
:placeholder="`Filter by ${col.label.toLowerCase()}...`"
|
||||||
class="form-control"
|
class="dt-filter-input"
|
||||||
@keyup.enter="applyFilters"
|
@keyup.enter="applyFilters"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-md-4 col-lg-3">
|
</div>
|
||||||
<div class="d-flex gap-2">
|
<div class="dt-filter-actions">
|
||||||
<Button
|
<Button
|
||||||
label="Apply Filters"
|
label="Apply"
|
||||||
icon="pi pi-search"
|
icon="pi pi-check"
|
||||||
@click="applyFilters"
|
@click="applyFilters"
|
||||||
:disabled="!hasFilterChanges"
|
:disabled="!hasFilterChanges"
|
||||||
|
class="dt-btn-primary"
|
||||||
size="small"
|
size="small"
|
||||||
/>
|
/>
|
||||||
<Button
|
<Button
|
||||||
@ -35,45 +43,156 @@
|
|||||||
outlined
|
outlined
|
||||||
size="small"
|
size="small"
|
||||||
:disabled="!hasActiveFilters"
|
:disabled="!hasActiveFilters"
|
||||||
|
class="dt-btn-secondary"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
<div v-if="hasActiveFilters" class="dt-filter-status">
|
||||||
|
<i class="pi pi-info-circle"></i>
|
||||||
|
<span>Active filters: {{ getActiveFiltersText() }}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div v-if="hasActiveFilters" class="mt-2">
|
|
||||||
<small class="text-muted"> Active filters: {{ getActiveFiltersText() }} </small>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Page Jump Controls -->
|
<!-- Page Jump Controls -->
|
||||||
<div
|
<div
|
||||||
v-if="totalPages > 1"
|
v-if="totalPages > 1"
|
||||||
:key="`page-controls-${totalPages}-${getPageInfo().total}`"
|
:key="`page-controls-${totalPages}-${getPageInfo().total}`"
|
||||||
class="page-controls-panel mb-3 p-2 bg-light rounded"
|
class="dt-pagination-panel"
|
||||||
>
|
>
|
||||||
<div class="row g-3 align-items-center">
|
<div class="dt-pagination-content">
|
||||||
<div class="col-auto">
|
<div class="dt-pagination-info">
|
||||||
<small class="text-muted">Quick navigation:</small>
|
<i class="pi pi-info-circle"></i>
|
||||||
|
<span class="dt-pagination-text">
|
||||||
|
Showing {{ getPageInfo().start }} - {{ getPageInfo().end }} of
|
||||||
|
{{ getPageInfo().total }} records
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-auto">
|
<div class="dt-pagination-controls">
|
||||||
|
<label for="page-jump" class="dt-pagination-label">Jump to:</label>
|
||||||
<select
|
<select
|
||||||
|
id="page-jump"
|
||||||
v-model="selectedPageJump"
|
v-model="selectedPageJump"
|
||||||
@change="jumpToPage"
|
@change="jumpToPage"
|
||||||
class="form-select form-select-sm"
|
class="dt-pagination-select"
|
||||||
style="width: auto"
|
|
||||||
>
|
>
|
||||||
<option value="">Jump to page...</option>
|
<option value="">Page...</option>
|
||||||
<option v-for="page in totalPages" :key="page" :value="page">
|
<option v-for="page in totalPages" :key="page" :value="page">
|
||||||
Page {{ page }}
|
Page {{ page }}
|
||||||
</option>
|
</option>
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-auto">
|
|
||||||
<small class="text-muted">
|
|
||||||
Showing {{ getPageInfo().start }} - {{ getPageInfo().end }} of
|
|
||||||
{{ getPageInfo().total }} records
|
|
||||||
</small>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- Bulk Actions Section (when rows are selected) -->
|
||||||
|
<div
|
||||||
|
v-if="hasBulkActions && hasSelectedRows"
|
||||||
|
class="dt-bulk-actions-panel"
|
||||||
|
>
|
||||||
|
<div class="dt-bulk-actions-content">
|
||||||
|
<div class="dt-bulk-actions-groups">
|
||||||
|
<!-- Left positioned bulk actions -->
|
||||||
|
<div v-if="bulkActionsGrouped.left.length > 0" class="dt-action-group dt-action-group-left">
|
||||||
|
<Button
|
||||||
|
v-for="action in bulkActionsGrouped.left"
|
||||||
|
:key="action.label"
|
||||||
|
:label="`${action.label} (${selectedRows.length})`"
|
||||||
|
:severity="action.style || 'warning'"
|
||||||
|
:icon="action.icon"
|
||||||
|
:size="action.size || 'small'"
|
||||||
|
@click="handleBulkAction(action, selectedRows)"
|
||||||
|
:disabled="loading"
|
||||||
|
class="dt-bulk-btn"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<!-- Center positioned bulk actions -->
|
||||||
|
<div v-if="bulkActionsGrouped.center.length > 0" class="dt-action-group dt-action-group-center">
|
||||||
|
<Button
|
||||||
|
v-for="action in bulkActionsGrouped.center"
|
||||||
|
:key="action.label"
|
||||||
|
:label="`${action.label} (${selectedRows.length})`"
|
||||||
|
:severity="action.style || 'warning'"
|
||||||
|
:icon="action.icon"
|
||||||
|
:size="action.size || 'small'"
|
||||||
|
@click="handleBulkAction(action, selectedRows)"
|
||||||
|
:disabled="loading"
|
||||||
|
class="dt-bulk-btn"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<!-- Right positioned bulk actions -->
|
||||||
|
<div v-if="bulkActionsGrouped.right.length > 0" class="dt-action-group dt-action-group-right">
|
||||||
|
<Button
|
||||||
|
v-for="action in bulkActionsGrouped.right"
|
||||||
|
:key="action.label"
|
||||||
|
:label="`${action.label} (${selectedRows.length})`"
|
||||||
|
:severity="action.style || 'warning'"
|
||||||
|
:icon="action.icon"
|
||||||
|
:size="action.size || 'small'"
|
||||||
|
@click="handleBulkAction(action, selectedRows)"
|
||||||
|
:disabled="loading"
|
||||||
|
class="dt-bulk-btn"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="dt-bulk-actions-status">
|
||||||
|
<i class="pi pi-check-circle"></i>
|
||||||
|
<span>{{ selectedRows.length }} row{{ selectedRows.length !== 1 ? "s" : "" }} selected</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Global Actions Section -->
|
||||||
|
<div v-if="hasTopActions" class="dt-global-actions-panel">
|
||||||
|
<div class="dt-global-actions-content">
|
||||||
|
<!-- Left positioned actions -->
|
||||||
|
<div v-if="topActionsGrouped.left.length > 0" class="dt-action-group dt-action-group-left">
|
||||||
|
<Button
|
||||||
|
v-for="action in topActionsGrouped.left"
|
||||||
|
:key="action.label"
|
||||||
|
:label="action.label"
|
||||||
|
:severity="getActionSeverity(action)"
|
||||||
|
:icon="action.icon"
|
||||||
|
:size="action.size || 'small'"
|
||||||
|
@click="handleTopAction(action)"
|
||||||
|
:disabled="getActionDisabled(action)"
|
||||||
|
:class="getActionClasses(action)"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<!-- Center positioned actions -->
|
||||||
|
<div v-if="topActionsGrouped.center.length > 0" class="dt-action-group dt-action-group-center">
|
||||||
|
<Button
|
||||||
|
v-for="action in topActionsGrouped.center"
|
||||||
|
:key="action.label"
|
||||||
|
:label="action.label"
|
||||||
|
:severity="getActionSeverity(action)"
|
||||||
|
:icon="action.icon"
|
||||||
|
:size="action.size || 'small'"
|
||||||
|
@click="handleTopAction(action)"
|
||||||
|
:disabled="getActionDisabled(action)"
|
||||||
|
:class="getActionClasses(action)"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<!-- Right positioned actions -->
|
||||||
|
<div v-if="topActionsGrouped.right.length > 0" class="dt-action-group dt-action-group-right">
|
||||||
|
<Button
|
||||||
|
v-for="action in topActionsGrouped.right"
|
||||||
|
:key="action.label"
|
||||||
|
:label="action.label"
|
||||||
|
:severity="getActionSeverity(action)"
|
||||||
|
:icon="action.icon"
|
||||||
|
:size="action.size || 'small'"
|
||||||
|
@click="handleTopAction(action)"
|
||||||
|
:disabled="getActionDisabled(action)"
|
||||||
|
:class="getActionClasses(action)"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div v-if="singleSelectionActions.length > 0" class="dt-global-actions-status">
|
||||||
|
<i class="pi pi-info-circle"></i>
|
||||||
|
<span v-if="!hasSelectedRows">Select a row to enable single-selection actions</span>
|
||||||
|
<span v-else-if="selectedRows.length > 1">Select only one row to enable single-selection actions</span>
|
||||||
|
<span v-else-if="hasExactlyOneRowSelected">Single-selection actions enabled</span>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<DataTable
|
<DataTable
|
||||||
@ -147,6 +266,62 @@
|
|||||||
/>
|
/>
|
||||||
</template>
|
</template>
|
||||||
</Column>
|
</Column>
|
||||||
|
|
||||||
|
<!-- Actions Column -->
|
||||||
|
<Column
|
||||||
|
v-if="rowActions.length > 0"
|
||||||
|
header="Actions"
|
||||||
|
:exportable="false"
|
||||||
|
class="dt-actions-column"
|
||||||
|
>
|
||||||
|
<template #body="slotProps">
|
||||||
|
<div class="dt-row-actions">
|
||||||
|
<!-- Primary row actions -->
|
||||||
|
<div v-if="rowActionsGrouped.primary.length > 0" class="dt-row-actions-primary">
|
||||||
|
<Button
|
||||||
|
v-for="action in rowActionsGrouped.primary"
|
||||||
|
:key="action.label"
|
||||||
|
:label="action.label"
|
||||||
|
:severity="action.style || 'secondary'"
|
||||||
|
:icon="action.icon"
|
||||||
|
:size="action.size || 'small'"
|
||||||
|
@click="handleRowAction(action, slotProps.data)"
|
||||||
|
:disabled="loading"
|
||||||
|
:class="['dt-row-btn', action.layout?.variant && `dt-row-btn-${action.layout.variant}`]"
|
||||||
|
outlined
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<!-- Secondary row actions -->
|
||||||
|
<div v-if="rowActionsGrouped.secondary.length > 0" class="dt-row-actions-secondary">
|
||||||
|
<Button
|
||||||
|
v-for="action in rowActionsGrouped.secondary"
|
||||||
|
:key="action.label"
|
||||||
|
:label="action.label"
|
||||||
|
:severity="action.style || 'secondary'"
|
||||||
|
:icon="action.icon"
|
||||||
|
:size="action.size || 'small'"
|
||||||
|
@click="handleRowAction(action, slotProps.data)"
|
||||||
|
:disabled="loading"
|
||||||
|
:class="['dt-row-btn', 'dt-row-btn-secondary', action.layout?.variant && `dt-row-btn-${action.layout.variant}`]"
|
||||||
|
text
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<!-- Dropdown menu for overflow actions -->
|
||||||
|
<div v-if="rowActionsGrouped.dropdown.length > 0" class="dt-row-actions-dropdown">
|
||||||
|
<Button
|
||||||
|
icon="pi pi-ellipsis-v"
|
||||||
|
:size="'small'"
|
||||||
|
severity="secondary"
|
||||||
|
text
|
||||||
|
@click="toggleRowDropdown($event, slotProps.data)"
|
||||||
|
class="dt-row-btn dt-row-btn-dropdown"
|
||||||
|
aria-haspopup="true"
|
||||||
|
/>
|
||||||
|
<!-- Dropdown menu would go here - could be implemented with PrimeVue Menu component -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</Column>
|
||||||
</DataTable>
|
</DataTable>
|
||||||
</template>
|
</template>
|
||||||
<script setup>
|
<script setup>
|
||||||
@ -224,6 +399,11 @@ const props = defineProps({
|
|||||||
type: Function,
|
type: Function,
|
||||||
default: null,
|
default: null,
|
||||||
},
|
},
|
||||||
|
// Table actions for rows
|
||||||
|
tableActions: {
|
||||||
|
type: Array,
|
||||||
|
default: () => [],
|
||||||
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
const emit = defineEmits([
|
const emit = defineEmits([
|
||||||
@ -382,6 +562,82 @@ const totalPages = computed(() => {
|
|||||||
return Math.ceil(filteredDataLength / currentRows.value) || 1;
|
return Math.ceil(filteredDataLength / currentRows.value) || 1;
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// Computed properties for table actions
|
||||||
|
const hasActions = computed(() => {
|
||||||
|
return props.tableActions && props.tableActions.length > 0;
|
||||||
|
});
|
||||||
|
|
||||||
|
const globalActions = computed(() => {
|
||||||
|
return props.tableActions.filter(
|
||||||
|
(action) =>
|
||||||
|
!action.requiresSelection && !action.requiresMultipleSelection && !action.rowAction,
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
const singleSelectionActions = computed(() => {
|
||||||
|
return props.tableActions.filter(
|
||||||
|
(action) =>
|
||||||
|
action.requiresSelection && !action.requiresMultipleSelection && !action.rowAction,
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
const rowActions = computed(() => {
|
||||||
|
return props.tableActions.filter((action) => action.rowAction === true);
|
||||||
|
});
|
||||||
|
|
||||||
|
const bulkActions = computed(() => {
|
||||||
|
return props.tableActions.filter((action) => action.requiresMultipleSelection === true);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Layout-based action grouping
|
||||||
|
const topActionsGrouped = computed(() => {
|
||||||
|
const actions = [...globalActions.value, ...singleSelectionActions.value];
|
||||||
|
const groups = {
|
||||||
|
left: actions.filter(action => action.layout?.position === 'left' || !action.layout?.position),
|
||||||
|
center: actions.filter(action => action.layout?.position === 'center'),
|
||||||
|
right: actions.filter(action => action.layout?.position === 'right'),
|
||||||
|
};
|
||||||
|
return groups;
|
||||||
|
});
|
||||||
|
|
||||||
|
const bulkActionsGrouped = computed(() => {
|
||||||
|
const groups = {
|
||||||
|
left: bulkActions.value.filter(action => action.layout?.position === 'left' || !action.layout?.position),
|
||||||
|
center: bulkActions.value.filter(action => action.layout?.position === 'center'),
|
||||||
|
right: bulkActions.value.filter(action => action.layout?.position === 'right'),
|
||||||
|
};
|
||||||
|
return groups;
|
||||||
|
});
|
||||||
|
|
||||||
|
const rowActionsGrouped = computed(() => {
|
||||||
|
const groups = {
|
||||||
|
primary: rowActions.value.filter(action => action.layout?.priority === 'primary' || !action.layout?.priority),
|
||||||
|
secondary: rowActions.value.filter(action => action.layout?.priority === 'secondary'),
|
||||||
|
dropdown: rowActions.value.filter(action => action.layout?.priority === 'dropdown'),
|
||||||
|
};
|
||||||
|
return groups;
|
||||||
|
});
|
||||||
|
|
||||||
|
const hasBulkActions = computed(() => {
|
||||||
|
return bulkActions.value.length > 0;
|
||||||
|
});
|
||||||
|
|
||||||
|
const hasSingleSelectionActions = computed(() => {
|
||||||
|
return singleSelectionActions.value.length > 0;
|
||||||
|
});
|
||||||
|
|
||||||
|
const hasTopActions = computed(() => {
|
||||||
|
return globalActions.value.length > 0 || singleSelectionActions.value.length > 0;
|
||||||
|
});
|
||||||
|
|
||||||
|
const hasSelectedRows = computed(() => {
|
||||||
|
return selectedRows.value && selectedRows.value.length > 0;
|
||||||
|
});
|
||||||
|
|
||||||
|
const hasExactlyOneRowSelected = computed(() => {
|
||||||
|
return selectedRows.value && selectedRows.value.length === 1;
|
||||||
|
});
|
||||||
|
|
||||||
// Initialize pending filters from store
|
// Initialize pending filters from store
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
const currentFilters = filtersStore.getTableFilters(props.tableName);
|
const currentFilters = filtersStore.getTableFilters(props.tableName);
|
||||||
@ -628,6 +884,96 @@ const handleFilterInput = (fieldName, value, filterCallback) => {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// Action handler methods
|
||||||
|
const handleActionClick = (action, rowData = null) => {
|
||||||
|
try {
|
||||||
|
if (typeof action.action === "function") {
|
||||||
|
if (rowData) {
|
||||||
|
// Row-specific action - pass row data
|
||||||
|
action.action(rowData);
|
||||||
|
} else {
|
||||||
|
// Global action - no row data needed
|
||||||
|
action.action();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Error executing action:", error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleGlobalAction = (action) => {
|
||||||
|
handleActionClick(action);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleRowAction = (action, rowData) => {
|
||||||
|
handleActionClick(action, rowData);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSingleSelectionAction = (action) => {
|
||||||
|
if (hasExactlyOneRowSelected.value) {
|
||||||
|
const selectedRow = selectedRows.value[0];
|
||||||
|
handleActionClick(action, selectedRow);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Unified handler for top-level actions (global and single selection)
|
||||||
|
const handleTopAction = (action) => {
|
||||||
|
if (action.requiresSelection) {
|
||||||
|
handleSingleSelectionAction(action);
|
||||||
|
} else {
|
||||||
|
handleGlobalAction(action);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Helper methods for action styling and behavior
|
||||||
|
const getActionSeverity = (action) => {
|
||||||
|
if (action.requiresSelection) {
|
||||||
|
return action.style || 'info';
|
||||||
|
}
|
||||||
|
return action.style || 'primary';
|
||||||
|
};
|
||||||
|
|
||||||
|
const getActionDisabled = (action) => {
|
||||||
|
if (loading.value) return true;
|
||||||
|
if (action.requiresSelection) {
|
||||||
|
return !hasExactlyOneRowSelected.value;
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
};
|
||||||
|
|
||||||
|
const getActionClasses = (action) => {
|
||||||
|
const classes = ['dt-action-btn'];
|
||||||
|
if (action.requiresSelection) {
|
||||||
|
classes.push('dt-action-btn-selection');
|
||||||
|
if (!hasExactlyOneRowSelected.value) {
|
||||||
|
classes.push('dt-action-btn-disabled');
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
classes.push('dt-action-btn-global');
|
||||||
|
}
|
||||||
|
if (action.layout?.variant) {
|
||||||
|
classes.push(`dt-action-btn-${action.layout.variant}`);
|
||||||
|
}
|
||||||
|
return classes;
|
||||||
|
};
|
||||||
|
|
||||||
|
const toggleRowDropdown = (event, rowData) => {
|
||||||
|
// Placeholder for dropdown menu functionality
|
||||||
|
// Could be implemented with PrimeVue OverlayPanel or Menu component
|
||||||
|
console.log('Toggle dropdown for row:', rowData);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleBulkAction = (action, selectedRows) => {
|
||||||
|
try {
|
||||||
|
if (typeof action.action === "function") {
|
||||||
|
// Bulk action - pass array of selected row data
|
||||||
|
action.action(selectedRows);
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Error executing bulk action:", error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
const getBadgeColor = (status) => {
|
const getBadgeColor = (status) => {
|
||||||
switch (status?.toLowerCase()) {
|
switch (status?.toLowerCase()) {
|
||||||
case "completed":
|
case "completed":
|
||||||
@ -717,7 +1063,456 @@ defineExpose({
|
|||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
<style lang="css">
|
<style lang="css">
|
||||||
/* .custom-data-table {
|
/* Modern DataTable Styling */
|
||||||
height: 100%;
|
|
||||||
} */
|
/* Filter Panel Styles */
|
||||||
|
.dt-filter-panel {
|
||||||
|
background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
|
||||||
|
border: 1px solid #e2e8f0;
|
||||||
|
border-radius: 12px;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dt-filter-panel:hover {
|
||||||
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dt-filter-header {
|
||||||
|
padding: 1rem 1.25rem 0.5rem;
|
||||||
|
border-bottom: 1px solid #e2e8f0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dt-filter-title {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #374151;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dt-filter-title i {
|
||||||
|
color: #6366f1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dt-filter-content {
|
||||||
|
padding: 1.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dt-filter-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||||
|
gap: 1rem;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dt-filter-field {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.375rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dt-filter-label {
|
||||||
|
font-size: 0.875rem;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #374151;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dt-filter-input {
|
||||||
|
border: 1px solid #d1d5db;
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 0.625rem;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
transition: border-color 0.2s ease, box-shadow 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dt-filter-input:focus {
|
||||||
|
border-color: #6366f1;
|
||||||
|
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dt-filter-actions {
|
||||||
|
display: flex;
|
||||||
|
gap: 0.75rem;
|
||||||
|
align-items: center;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dt-btn-primary, .dt-btn-secondary {
|
||||||
|
border-radius: 8px;
|
||||||
|
font-weight: 500;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dt-btn-primary:hover {
|
||||||
|
transform: translateY(-1px);
|
||||||
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dt-filter-status {
|
||||||
|
margin-top: 0.75rem;
|
||||||
|
padding: 0.75rem;
|
||||||
|
background: #f3f4f6;
|
||||||
|
border-radius: 8px;
|
||||||
|
font-size: 0.8125rem;
|
||||||
|
color: #6b7280;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Pagination Panel Styles */
|
||||||
|
.dt-pagination-panel {
|
||||||
|
background: linear-gradient(135deg, #ffffff 0%, #f9fafb 100%);
|
||||||
|
border: 1px solid #e5e7eb;
|
||||||
|
border-radius: 10px;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dt-pagination-content {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0.875rem 1.25rem;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dt-pagination-info {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
color: #6b7280;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dt-pagination-info i {
|
||||||
|
color: #6366f1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dt-pagination-controls {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dt-pagination-label {
|
||||||
|
font-size: 0.875rem;
|
||||||
|
color: #374151;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dt-pagination-select {
|
||||||
|
border: 1px solid #d1d5db;
|
||||||
|
border-radius: 6px;
|
||||||
|
padding: 0.375rem 0.75rem;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
background: white;
|
||||||
|
transition: border-color 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dt-pagination-select:focus {
|
||||||
|
border-color: #6366f1;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Bulk Actions Panel Styles */
|
||||||
|
.dt-bulk-actions-panel {
|
||||||
|
background: linear-gradient(135deg, #fef3c7 0%, #fcd34d 100%);
|
||||||
|
border: 1px solid #f59e0b;
|
||||||
|
border-radius: 10px;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
box-shadow: 0 2px 4px rgba(245, 158, 11, 0.1);
|
||||||
|
animation: slideInBulk 0.3s ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes slideInBulk {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(-10px) scale(0.98);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0) scale(1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.dt-bulk-actions-content {
|
||||||
|
padding: 1rem 1.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dt-bulk-actions-groups {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 0.75rem;
|
||||||
|
margin-bottom: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dt-bulk-btn {
|
||||||
|
border-radius: 8px;
|
||||||
|
font-weight: 500;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dt-bulk-btn:hover {
|
||||||
|
transform: translateY(-1px);
|
||||||
|
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dt-bulk-actions-status {
|
||||||
|
padding: 0.5rem 0.75rem;
|
||||||
|
background: rgba(255, 255, 255, 0.8);
|
||||||
|
border-radius: 6px;
|
||||||
|
font-size: 0.8125rem;
|
||||||
|
color: #92400e;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Global Actions Panel Styles */
|
||||||
|
.dt-global-actions-panel {
|
||||||
|
background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
|
||||||
|
border: 1px solid #e2e8f0;
|
||||||
|
border-radius: 10px;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||||
|
border-left: 4px solid #6366f1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dt-global-actions-content {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 1rem 1.25rem;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dt-action-group {
|
||||||
|
display: flex;
|
||||||
|
gap: 0.5rem;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dt-action-group-left {
|
||||||
|
flex: 1;
|
||||||
|
justify-content: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dt-action-group-center {
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dt-action-group-right {
|
||||||
|
justify-content: flex-end;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dt-action-btn {
|
||||||
|
border-radius: 8px;
|
||||||
|
font-weight: 500;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dt-action-btn:hover:not(:disabled) {
|
||||||
|
transform: translateY(-1px);
|
||||||
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dt-action-btn-global {
|
||||||
|
/* Global action styling */
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dt-action-btn-selection {
|
||||||
|
/* Selection action styling */
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dt-action-btn-disabled {
|
||||||
|
opacity: 0.6;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dt-action-btn-outlined {
|
||||||
|
background: transparent;
|
||||||
|
border: 1.5px solid currentColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dt-action-btn-filled {
|
||||||
|
border: none;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dt-global-actions-status {
|
||||||
|
padding: 0.625rem 1.25rem;
|
||||||
|
background: #f3f4f6;
|
||||||
|
border-top: 1px solid #e5e7eb;
|
||||||
|
font-size: 0.8125rem;
|
||||||
|
color: #6b7280;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Row Actions Styles */
|
||||||
|
.dt-actions-column {
|
||||||
|
min-width: 160px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dt-row-actions {
|
||||||
|
display: flex;
|
||||||
|
gap: 0.375rem;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-start;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dt-row-actions-primary {
|
||||||
|
display: flex;
|
||||||
|
gap: 0.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dt-row-actions-secondary {
|
||||||
|
display: flex;
|
||||||
|
gap: 0.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dt-row-actions-dropdown {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dt-row-btn {
|
||||||
|
border-radius: 6px;
|
||||||
|
font-size: 0.8125rem;
|
||||||
|
font-weight: 500;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dt-row-btn:hover {
|
||||||
|
transform: translateY(-1px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dt-row-btn-secondary {
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dt-row-btn-secondary:hover {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dt-row-btn-dropdown {
|
||||||
|
padding: 0.25rem;
|
||||||
|
min-width: auto;
|
||||||
|
width: 2rem;
|
||||||
|
height: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dt-row-btn-icon-only {
|
||||||
|
min-width: auto;
|
||||||
|
width: 2.25rem;
|
||||||
|
padding: 0.375rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dt-row-btn-compact {
|
||||||
|
padding: 0.25rem 0.5rem;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Responsive Design */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.dt-filter-grid {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dt-pagination-content {
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: stretch;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dt-global-actions-content {
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: stretch;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dt-action-group {
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dt-bulk-actions-groups {
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: stretch;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Dark mode support (optional) */
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
.dt-filter-panel,
|
||||||
|
.dt-pagination-panel,
|
||||||
|
.dt-global-actions-panel {
|
||||||
|
background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
|
||||||
|
border-color: #374151;
|
||||||
|
color: #f9fafb;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dt-filter-title,
|
||||||
|
.dt-filter-label,
|
||||||
|
.dt-pagination-label {
|
||||||
|
color: #f9fafb;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dt-filter-input,
|
||||||
|
.dt-pagination-select {
|
||||||
|
background: #374151;
|
||||||
|
border-color: #4b5563;
|
||||||
|
color: #f9fafb;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dt-filter-status,
|
||||||
|
.dt-global-actions-status {
|
||||||
|
background: #374151;
|
||||||
|
color: #d1d5db;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Animation utilities */
|
||||||
|
.dt-fade-in {
|
||||||
|
animation: fadeIn 0.3s ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes fadeIn {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(10px);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.dt-slide-in {
|
||||||
|
animation: slideIn 0.3s ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes slideIn {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateX(-10px);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateX(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
9
frontend/src/components/pages/Client.vue
Normal file
9
frontend/src/components/pages/Client.vue
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
<template>
|
||||||
|
<div>{{ clientId }}</div>
|
||||||
|
</template>
|
||||||
|
<script setup>
|
||||||
|
defineProps({
|
||||||
|
clientId: String,
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<style lang="css"></style>
|
||||||
@ -11,15 +11,11 @@
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="filter-container" class="filter-container">
|
|
||||||
<button @click="onClick" id="add-customer-button" class="interaction-button">
|
|
||||||
Add
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<DataTable
|
<DataTable
|
||||||
:data="tableData"
|
:data="tableData"
|
||||||
:columns="columns"
|
:columns="columns"
|
||||||
:filters="filters"
|
:filters="filters"
|
||||||
|
:tableActions="tableActions"
|
||||||
tableName="clients"
|
tableName="clients"
|
||||||
:lazy="true"
|
:lazy="true"
|
||||||
:totalRecords="totalRecords"
|
:totalRecords="totalRecords"
|
||||||
@ -38,11 +34,13 @@ 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 { useModalStore } from "../../stores/modal";
|
import { useModalStore } from "../../stores/modal";
|
||||||
|
import { useRouter } from "vue-router";
|
||||||
|
|
||||||
const loadingStore = useLoadingStore();
|
const loadingStore = useLoadingStore();
|
||||||
const paginationStore = usePaginationStore();
|
const paginationStore = usePaginationStore();
|
||||||
const filtersStore = useFiltersStore();
|
const filtersStore = useFiltersStore();
|
||||||
const modalStore = useModalStore();
|
const modalStore = useModalStore();
|
||||||
|
const router = useRouter();
|
||||||
|
|
||||||
const tableData = ref([]);
|
const tableData = ref([]);
|
||||||
const totalRecords = ref(0);
|
const totalRecords = ref(0);
|
||||||
@ -56,11 +54,6 @@ const currentFilters = computed(() => {
|
|||||||
return filtersStore.getTableFilters("clients");
|
return filtersStore.getTableFilters("clients");
|
||||||
});
|
});
|
||||||
|
|
||||||
const onClick = () => {
|
|
||||||
//frappe.new_doc("Customer");
|
|
||||||
modalStore.openCreateClient();
|
|
||||||
};
|
|
||||||
|
|
||||||
// Handle week change from chart
|
// Handle week change from chart
|
||||||
const handleWeekChange = async (weekParams) => {
|
const handleWeekChange = async (weekParams) => {
|
||||||
console.log("handleWeekChange called with:", weekParams);
|
console.log("handleWeekChange called with:", weekParams);
|
||||||
@ -122,23 +115,99 @@ const columns = [
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: "Appt. Scheduled",
|
label: "Appt. Scheduled",
|
||||||
fieldName: "customOnsiteMeetingScheduled",
|
fieldName: "appointmentScheduledStatus",
|
||||||
type: "status",
|
type: "status",
|
||||||
sortable: true,
|
sortable: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: "Estimate Sent",
|
label: "Estimate Sent",
|
||||||
fieldName: "customEstimateSentStatus",
|
fieldName: "estimateSentStatus",
|
||||||
type: "status",
|
type: "status",
|
||||||
sortable: true,
|
sortable: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: "Payment Received",
|
label: "Payment Received",
|
||||||
fieldName: "customPaymentReceivedStatus",
|
fieldName: "paymentReceivedStatus",
|
||||||
type: "status",
|
type: "status",
|
||||||
sortable: true,
|
sortable: true,
|
||||||
},
|
},
|
||||||
{ label: "Job Status", fieldName: "customJobStatus", type: "status", sortable: true },
|
{ label: "Job Status", fieldName: "jobStatus", type: "status", sortable: true },
|
||||||
|
];
|
||||||
|
|
||||||
|
const tableActions = [
|
||||||
|
{
|
||||||
|
label: "Add Client",
|
||||||
|
action: () => {
|
||||||
|
modalStore.openModal("createClient");
|
||||||
|
},
|
||||||
|
type: "button",
|
||||||
|
style: "primary",
|
||||||
|
icon: "pi pi-plus",
|
||||||
|
layout: {
|
||||||
|
position: "left",
|
||||||
|
variant: "filled"
|
||||||
|
}
|
||||||
|
// Global action - always available
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "View Details",
|
||||||
|
action: (rowData) => {
|
||||||
|
router.push(`/clients/${rowData.id}`);
|
||||||
|
},
|
||||||
|
type: "button",
|
||||||
|
style: "info",
|
||||||
|
icon: "pi pi-eye",
|
||||||
|
requiresSelection: true, // Single selection action - appears above table, enabled when exactly one row selected
|
||||||
|
layout: {
|
||||||
|
position: "center",
|
||||||
|
variant: "outlined"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "Export Selected",
|
||||||
|
action: (selectedRows) => {
|
||||||
|
console.log("Exporting", selectedRows.length, "clients:", selectedRows);
|
||||||
|
// Implementation would export selected clients
|
||||||
|
},
|
||||||
|
type: "button",
|
||||||
|
style: "success",
|
||||||
|
icon: "pi pi-download",
|
||||||
|
requiresMultipleSelection: true, // Bulk action - operates on selected rows
|
||||||
|
layout: {
|
||||||
|
position: "right",
|
||||||
|
variant: "filled"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "Edit",
|
||||||
|
action: (rowData) => {
|
||||||
|
console.log("Editing client:", rowData);
|
||||||
|
// Implementation would open edit modal
|
||||||
|
},
|
||||||
|
type: "button",
|
||||||
|
style: "secondary",
|
||||||
|
icon: "pi pi-pencil",
|
||||||
|
rowAction: true, // Row action - appears in each row's actions column
|
||||||
|
layout: {
|
||||||
|
priority: "primary",
|
||||||
|
variant: "outlined"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "Quick View",
|
||||||
|
action: (rowData) => {
|
||||||
|
console.log("Quick view for:", rowData.addressTitle);
|
||||||
|
// Implementation would show quick preview
|
||||||
|
},
|
||||||
|
type: "button",
|
||||||
|
style: "info",
|
||||||
|
icon: "pi pi-search",
|
||||||
|
rowAction: true, // Row action - appears in each row's actions column
|
||||||
|
layout: {
|
||||||
|
priority: "secondary",
|
||||||
|
variant: "compact"
|
||||||
|
}
|
||||||
|
},
|
||||||
];
|
];
|
||||||
// Handle lazy loading events from DataTable
|
// Handle lazy loading events from DataTable
|
||||||
const handleLazyLoad = async (event) => {
|
const handleLazyLoad = async (event) => {
|
||||||
@ -199,8 +268,6 @@ const handleLazyLoad = async (event) => {
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
console.log("Making API call with:", { paginationParams, filters });
|
|
||||||
|
|
||||||
// Call API with pagination, filters, and sorting
|
// Call API with pagination, filters, and sorting
|
||||||
const result = await Api.getPaginatedClientDetails(paginationParams, filters, sorting);
|
const result = await Api.getPaginatedClientDetails(paginationParams, filters, sorting);
|
||||||
|
|
||||||
@ -210,14 +277,6 @@ const handleLazyLoad = async (event) => {
|
|||||||
|
|
||||||
// Update pagination store with new total
|
// Update pagination store with new total
|
||||||
paginationStore.setTotalRecords("clients", result.pagination.total);
|
paginationStore.setTotalRecords("clients", result.pagination.total);
|
||||||
|
|
||||||
console.log("Updated pagination state:", {
|
|
||||||
tableData: tableData.value.length,
|
|
||||||
totalRecords: totalRecords.value,
|
|
||||||
storeTotal: paginationStore.getTablePagination("clients").totalRecords,
|
|
||||||
storeTotalPages: paginationStore.getTotalPages("clients"),
|
|
||||||
});
|
|
||||||
|
|
||||||
// Cache the result
|
// Cache the result
|
||||||
paginationStore.setCachedPage(
|
paginationStore.setCachedPage(
|
||||||
"clients",
|
"clients",
|
||||||
@ -231,12 +290,6 @@ const handleLazyLoad = async (event) => {
|
|||||||
totalRecords: result.pagination.total,
|
totalRecords: result.pagination.total,
|
||||||
},
|
},
|
||||||
);
|
);
|
||||||
|
|
||||||
console.log("Loaded from API:", {
|
|
||||||
records: result.data.length,
|
|
||||||
total: result.pagination.total,
|
|
||||||
page: paginationParams.page + 1,
|
|
||||||
});
|
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error("Error loading client data:", error);
|
console.error("Error loading client data:", error);
|
||||||
// You could also show a toast or other error notification here
|
// You could also show a toast or other error notification here
|
||||||
@ -287,24 +340,4 @@ onMounted(async () => {
|
|||||||
.chart-section {
|
.chart-section {
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.filter-container {
|
|
||||||
margin-bottom: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.interaction-button {
|
|
||||||
background: #3b82f6;
|
|
||||||
color: white;
|
|
||||||
border: none;
|
|
||||||
padding: 10px 20px;
|
|
||||||
border-radius: 6px;
|
|
||||||
cursor: pointer;
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: 500;
|
|
||||||
transition: background 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.interaction-button:hover {
|
|
||||||
background: #2563eb;
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -9,6 +9,7 @@ import TimeSheets from "./components/pages/TimeSheets.vue";
|
|||||||
import Warranties from "./components/pages/Warranties.vue";
|
import Warranties from "./components/pages/Warranties.vue";
|
||||||
import Home from "./components/pages/Home.vue";
|
import Home from "./components/pages/Home.vue";
|
||||||
import TestDateForm from "./components/pages/TestDateForm.vue";
|
import TestDateForm from "./components/pages/TestDateForm.vue";
|
||||||
|
import Client from "./components/pages/Client.vue";
|
||||||
|
|
||||||
const routes = [
|
const routes = [
|
||||||
{
|
{
|
||||||
@ -17,6 +18,7 @@ const routes = [
|
|||||||
},
|
},
|
||||||
{ path: "/calendar", component: Calendar },
|
{ path: "/calendar", component: Calendar },
|
||||||
{ path: "/clients", component: Clients },
|
{ path: "/clients", component: Clients },
|
||||||
|
{ path: "/clients/:id", component: Client, props: true },
|
||||||
{ path: "/jobs", component: Jobs },
|
{ path: "/jobs", component: Jobs },
|
||||||
{ path: "/routes", component: Routes },
|
{ path: "/routes", component: Routes },
|
||||||
{ path: "/create", component: Create },
|
{ path: "/create", component: Create },
|
||||||
|
|||||||
130
frontend/test-datatable-actions.html
Normal file
130
frontend/test-datatable-actions.html
Normal file
@ -0,0 +1,130 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>DataTable Actions Test</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1>DataTable Actions Implementation Test</h1>
|
||||||
|
|
||||||
|
<h2>Summary of Changes</h2>
|
||||||
|
<ul>
|
||||||
|
<li>✅ Added <code>tableActions</code> prop to DataTable component</li>
|
||||||
|
<li>✅ Added global actions section above the DataTable</li>
|
||||||
|
<li>✅ Added bulk actions section when rows are selected</li>
|
||||||
|
<li>✅ Added actions column for row-specific actions</li>
|
||||||
|
<li>✅ Implemented action handlers with row data passing</li>
|
||||||
|
<li>✅ Added multi-selection support for bulk operations</li>
|
||||||
|
<li>✅ Updated Clients component to use table actions</li>
|
||||||
|
<li>✅ Updated documentation with action configuration examples</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<h2>Key Features Implemented</h2>
|
||||||
|
|
||||||
|
<h3>Global Actions</h3>
|
||||||
|
<p>Actions with <code>requiresSelection: false</code> appear above the table:</p>
|
||||||
|
<pre><code>{
|
||||||
|
label: "Add Client",
|
||||||
|
action: () => modalStore.openModal("createClient"),
|
||||||
|
icon: "pi pi-plus",
|
||||||
|
style: "primary",
|
||||||
|
requiresSelection: false
|
||||||
|
}</code></pre>
|
||||||
|
|
||||||
|
<h3>Bulk Actions</h3>
|
||||||
|
<p>Actions with <code>requiresMultipleSelection: true</code> appear when rows are selected:</p>
|
||||||
|
<pre><code>{
|
||||||
|
label: "Export Selected",
|
||||||
|
action: (selectedRows) => exportData(selectedRows),
|
||||||
|
icon: "pi pi-download",
|
||||||
|
style: "success",
|
||||||
|
requiresMultipleSelection: true
|
||||||
|
}</code></pre>
|
||||||
|
|
||||||
|
<h3>Row Actions</h3>
|
||||||
|
<p>Actions with <code>requiresSelection: true</code> (or omitted) appear in actions column:</p>
|
||||||
|
<pre><code>{
|
||||||
|
label: "View",
|
||||||
|
action: (rowData) => router.push(`/clients/${rowData.id}`),
|
||||||
|
icon: "pi pi-eye",
|
||||||
|
style: "secondary"
|
||||||
|
}</code></pre>
|
||||||
|
|
||||||
|
<h3>Action Handlers</h3>
|
||||||
|
<p>The DataTable automatically passes appropriate data to different action types:</p>
|
||||||
|
<pre><code>// Global action handler
|
||||||
|
const handleGlobalAction = (action) => {
|
||||||
|
action.action(); // No data passed
|
||||||
|
};
|
||||||
|
|
||||||
|
// Row action handler
|
||||||
|
const handleRowAction = (action, rowData) => {
|
||||||
|
action.action(rowData); // Single row data passed
|
||||||
|
};
|
||||||
|
|
||||||
|
// Bulk action handler
|
||||||
|
const handleBulkAction = (action, selectedRows) => {
|
||||||
|
action.action(selectedRows); // Array of selected rows passed
|
||||||
|
};</code></pre>
|
||||||
|
|
||||||
|
<h2>Action Types Supported</h2>
|
||||||
|
<table border="1" style="border-collapse: collapse; width: 100%;">
|
||||||
|
<tr>
|
||||||
|
<th>Action Type</th>
|
||||||
|
<th>Property</th>
|
||||||
|
<th>Data Received</th>
|
||||||
|
<th>Display Location</th>
|
||||||
|
<th>Enabled When</th>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Global</td>
|
||||||
|
<td>Default (no special props)</td>
|
||||||
|
<td>None</td>
|
||||||
|
<td>Above table</td>
|
||||||
|
<td>Always</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Single Selection</td>
|
||||||
|
<td><code>requiresSelection: true</code></td>
|
||||||
|
<td>Selected row object</td>
|
||||||
|
<td>Above table</td>
|
||||||
|
<td>Exactly one row selected</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Row</td>
|
||||||
|
<td><code>rowAction: true</code></td>
|
||||||
|
<td>Individual row object</td>
|
||||||
|
<td>Actions column</td>
|
||||||
|
<td>Always (per row)</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Bulk</td>
|
||||||
|
<td><code>requiresMultipleSelection: true</code></td>
|
||||||
|
<td>Array of selected rows</td>
|
||||||
|
<td>Above table (when rows selected)</td>
|
||||||
|
<td>One or more rows selected</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
|
||||||
|
<h2>Usage in Components</h2>
|
||||||
|
<p>Components can now pass table actions to DataTable:</p>
|
||||||
|
<pre><code><DataTable
|
||||||
|
:data="tableData"
|
||||||
|
:columns="columns"
|
||||||
|
:tableActions="tableActions"
|
||||||
|
tableName="clients"
|
||||||
|
:lazy="true"
|
||||||
|
:totalRecords="totalRecords"
|
||||||
|
:loading="isLoading"
|
||||||
|
@lazy-load="handleLazyLoad"
|
||||||
|
/></code></pre>
|
||||||
|
|
||||||
|
<h2>Browser Compatibility</h2>
|
||||||
|
<p>✅ Vue 3 Composition API compatible<br>
|
||||||
|
✅ PrimeVue components integration<br>
|
||||||
|
✅ Reactive row data passing<br>
|
||||||
|
✅ Error handling for action execution</p>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
</style>
|
||||||
Loading…
x
Reference in New Issue
Block a user