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
|
||||
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()
|
||||
def get_client_status_counts(weekly=False, week_start_date=None, week_end_date=None):
|
||||
@ -16,13 +15,6 @@ def get_client_status_counts(weekly=False, week_start_date=None, week_end_date=N
|
||||
filters = {status_field: status_value}
|
||||
filters.update(base_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 = {
|
||||
"label": "On-Site Meeting Scheduled",
|
||||
@ -58,6 +50,7 @@ def get_client_status_counts(weekly=False, week_start_date=None, week_end_date=N
|
||||
job_status_counts,
|
||||
payment_received_status_counts
|
||||
]
|
||||
|
||||
categories = []
|
||||
for status_dict in status_dicts:
|
||||
category = {
|
||||
@ -85,7 +78,28 @@ def get_client_status_counts(weekly=False, week_start_date=None, week_end_date=N
|
||||
return categories
|
||||
|
||||
@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)
|
||||
print("DEBUG: Raw options received:", options)
|
||||
defaultOptions = {
|
||||
@ -98,9 +112,6 @@ def get_clients(options):
|
||||
options = {**defaultOptions, **options}
|
||||
print("DEBUG: Final options:", options)
|
||||
|
||||
clients = []
|
||||
tableRows = []
|
||||
|
||||
# Map frontend field names to backend field names
|
||||
def map_field_name(frontend_field):
|
||||
field_mapping = {
|
||||
@ -162,75 +173,23 @@ def get_clients(options):
|
||||
|
||||
addresses = frappe.db.get_all(
|
||||
"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,
|
||||
limit=options["page_size"],
|
||||
start=(options["page"] - 1) * options["page_size"],
|
||||
order_by=order_by
|
||||
)
|
||||
|
||||
# for address in addresses:
|
||||
# client = {}
|
||||
# tableRow = {}
|
||||
|
||||
# on_site_meetings = frappe.db.get_all(
|
||||
# "On-Site Meeting",
|
||||
# fields=["*"],
|
||||
# filters={"address": address["address_title"]}
|
||||
# )
|
||||
|
||||
# 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)
|
||||
|
||||
rows = []
|
||||
for address in addresses:
|
||||
tableRow = {}
|
||||
tableRow["id"] = address["name"]
|
||||
tableRow["address_title"] = address["address_title"]
|
||||
tableRow["appointment_scheduled_status"] = address["custom_onsite_meeting_scheduled"]
|
||||
tableRow["estimate_sent_status"] = address["custom_estimate_sent_status"]
|
||||
tableRow["job_status"] = address["custom_job_status"]
|
||||
tableRow["payment_received_status"] = address["custom_payment_received_status"]
|
||||
rows.append(tableRow)
|
||||
|
||||
return {
|
||||
"pagination": {
|
||||
@ -239,7 +198,7 @@ def get_clients(options):
|
||||
"page_size": 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
|
||||
:columns="tableColumns"
|
||||
:data="tableData"
|
||||
:tableActions="tableActions"
|
||||
table-name="my-table"
|
||||
@row-click="handleRowClick"
|
||||
/>
|
||||
@ -41,6 +42,32 @@ const tableData = ref([
|
||||
{ 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) => {
|
||||
console.log("Row clicked:", event.data);
|
||||
};
|
||||
@ -85,6 +112,12 @@ const handleRowClick = (event) => {
|
||||
- **Type:** `Object`
|
||||
- **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
|
||||
|
||||
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
|
||||
|
||||
### `rowClick`
|
||||
@ -253,6 +459,17 @@ const handleLazyLoad = async (event) => {
|
||||
- **Automatic filter initialization** on component mount
|
||||
- **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
|
||||
|
||||
### Server-Side Paginated Table (Recommended for Large Datasets)
|
||||
@ -324,6 +541,126 @@ const handleLazyLoad = async (event) => {
|
||||
</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
|
||||
|
||||
```vue
|
||||
@ -427,6 +764,118 @@ const customFilters = {
|
||||
</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
|
||||
|
||||
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_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_TABLE_DATA_METHOD = "custom_ui.api.db.get_clients_table_data";
|
||||
const FRAPPE_GET_CLIENT_METHOD = "custom_ui.api.db.get_client";
|
||||
|
||||
class Api {
|
||||
static async request(frappeMethod, 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 {
|
||||
let response = await frappe.call({
|
||||
method: frappeMethod,
|
||||
args: {
|
||||
...args,
|
||||
},
|
||||
});
|
||||
let response = await frappe.call(request);
|
||||
response = DataUtils.toCamelCaseObject(response);
|
||||
console.log("DEBUG: API - Request Response: ", response);
|
||||
return response.message;
|
||||
@ -33,8 +31,8 @@ class Api {
|
||||
return await this.request(FRAPPE_GET_CLIENT_STATUS_COUNTS_METHOD, params);
|
||||
}
|
||||
|
||||
static async getClientDetails(options = {}) {
|
||||
return await this.request("custom_ui.api.db.get_clients", { options });
|
||||
static async getClientDetails(clientName) {
|
||||
return await this.request(FRAPPE_GET_CLIENT_DETAILS_METHOD);
|
||||
}
|
||||
|
||||
static async getJobDetails() {
|
||||
@ -51,13 +49,11 @@ class Api {
|
||||
};
|
||||
data.push(tableRow);
|
||||
}
|
||||
console.log("DEBUG: API - getJobDetails result: ", data);
|
||||
return data;
|
||||
}
|
||||
|
||||
static async getServiceData() {
|
||||
const data = DataUtils.dummyServiceData;
|
||||
console.log("DEBUG: API - getServiceData result: ", data);
|
||||
return data;
|
||||
}
|
||||
|
||||
@ -69,8 +65,6 @@ class Api {
|
||||
route = getDetailedDoc("Pre-Built Routes", rt.name);
|
||||
let tableRow = {};
|
||||
}
|
||||
|
||||
console.log("DEBUG: API - getRouteData result: ", data);
|
||||
return data;
|
||||
}
|
||||
|
||||
@ -102,6 +96,10 @@ class Api {
|
||||
return data;
|
||||
}
|
||||
|
||||
static async getClient(clientName) {
|
||||
return await this.request(FRAPPE_GET_CLIENT_METHOD, { clientName });
|
||||
}
|
||||
|
||||
/**
|
||||
* Get paginated client data with filtering and sorting
|
||||
* @param {Object} paginationParams - Pagination parameters from store
|
||||
@ -126,10 +124,7 @@ class Api {
|
||||
: null,
|
||||
for_table: true,
|
||||
};
|
||||
|
||||
console.log("DEBUG: API - Sending options to backend:", options);
|
||||
|
||||
const result = await this.request("custom_ui.api.db.get_clients", { options });
|
||||
const result = await this.request(FRAPPE_GET_CLIENT_TABLE_DATA_METHOD, { options });
|
||||
return result;
|
||||
}
|
||||
|
||||
|
||||
@ -3,44 +3,53 @@
|
||||
<div
|
||||
v-if="hasFilters"
|
||||
: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 v-for="col in filterableColumns" :key="col.fieldName" class="col-md-4 col-lg-3">
|
||||
<label :for="`filter-${col.fieldName}`" class="form-label small fw-semibold">
|
||||
{{ col.label }}
|
||||
</label>
|
||||
<InputText
|
||||
:id="`filter-${col.fieldName}`"
|
||||
v-model="pendingFilters[col.fieldName]"
|
||||
:placeholder="`Filter by ${col.label.toLowerCase()}...`"
|
||||
class="form-control"
|
||||
@keyup.enter="applyFilters"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-md-4 col-lg-3">
|
||||
<div class="d-flex gap-2">
|
||||
<Button
|
||||
label="Apply Filters"
|
||||
icon="pi pi-search"
|
||||
@click="applyFilters"
|
||||
:disabled="!hasFilterChanges"
|
||||
size="small"
|
||||
/>
|
||||
<Button
|
||||
label="Clear"
|
||||
icon="pi pi-times"
|
||||
@click="clearFilters"
|
||||
severity="secondary"
|
||||
outlined
|
||||
size="small"
|
||||
:disabled="!hasActiveFilters"
|
||||
<div class="dt-filter-header">
|
||||
<h6 class="dt-filter-title">
|
||||
<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 }}
|
||||
</label>
|
||||
<InputText
|
||||
:id="`filter-${col.fieldName}`"
|
||||
v-model="pendingFilters[col.fieldName]"
|
||||
:placeholder="`Filter by ${col.label.toLowerCase()}...`"
|
||||
class="dt-filter-input"
|
||||
@keyup.enter="applyFilters"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="hasActiveFilters" class="mt-2">
|
||||
<small class="text-muted"> Active filters: {{ getActiveFiltersText() }} </small>
|
||||
<div class="dt-filter-actions">
|
||||
<Button
|
||||
label="Apply"
|
||||
icon="pi pi-check"
|
||||
@click="applyFilters"
|
||||
:disabled="!hasFilterChanges"
|
||||
class="dt-btn-primary"
|
||||
size="small"
|
||||
/>
|
||||
<Button
|
||||
label="Clear"
|
||||
icon="pi pi-times"
|
||||
@click="clearFilters"
|
||||
severity="secondary"
|
||||
outlined
|
||||
size="small"
|
||||
:disabled="!hasActiveFilters"
|
||||
class="dt-btn-secondary"
|
||||
/>
|
||||
</div>
|
||||
<div v-if="hasActiveFilters" class="dt-filter-status">
|
||||
<i class="pi pi-info-circle"></i>
|
||||
<span>Active filters: {{ getActiveFiltersText() }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -48,31 +57,141 @@
|
||||
<div
|
||||
v-if="totalPages > 1"
|
||||
: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="col-auto">
|
||||
<small class="text-muted">Quick navigation:</small>
|
||||
<div class="dt-pagination-content">
|
||||
<div class="dt-pagination-info">
|
||||
<i class="pi pi-info-circle"></i>
|
||||
<span class="dt-pagination-text">
|
||||
Showing {{ getPageInfo().start }} - {{ getPageInfo().end }} of
|
||||
{{ getPageInfo().total }} records
|
||||
</span>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<div class="dt-pagination-controls">
|
||||
<label for="page-jump" class="dt-pagination-label">Jump to:</label>
|
||||
<select
|
||||
id="page-jump"
|
||||
v-model="selectedPageJump"
|
||||
@change="jumpToPage"
|
||||
class="form-select form-select-sm"
|
||||
style="width: auto"
|
||||
class="dt-pagination-select"
|
||||
>
|
||||
<option value="">Jump to page...</option>
|
||||
<option value="">Page...</option>
|
||||
<option v-for="page in totalPages" :key="page" :value="page">
|
||||
Page {{ page }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<small class="text-muted">
|
||||
Showing {{ getPageInfo().start }} - {{ getPageInfo().end }} of
|
||||
{{ getPageInfo().total }} records
|
||||
</small>
|
||||
</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>
|
||||
|
||||
@ -147,6 +266,62 @@
|
||||
/>
|
||||
</template>
|
||||
</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>
|
||||
</template>
|
||||
<script setup>
|
||||
@ -224,6 +399,11 @@ const props = defineProps({
|
||||
type: Function,
|
||||
default: null,
|
||||
},
|
||||
// Table actions for rows
|
||||
tableActions: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits([
|
||||
@ -382,6 +562,82 @@ const totalPages = computed(() => {
|
||||
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
|
||||
onMounted(() => {
|
||||
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) => {
|
||||
switch (status?.toLowerCase()) {
|
||||
case "completed":
|
||||
@ -717,7 +1063,456 @@ defineExpose({
|
||||
});
|
||||
</script>
|
||||
<style lang="css">
|
||||
/* .custom-data-table {
|
||||
height: 100%;
|
||||
} */
|
||||
/* Modern DataTable Styling */
|
||||
|
||||
/* 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>
|
||||
|
||||
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 id="filter-container" class="filter-container">
|
||||
<button @click="onClick" id="add-customer-button" class="interaction-button">
|
||||
Add
|
||||
</button>
|
||||
</div>
|
||||
<DataTable
|
||||
:data="tableData"
|
||||
:columns="columns"
|
||||
:filters="filters"
|
||||
:tableActions="tableActions"
|
||||
tableName="clients"
|
||||
:lazy="true"
|
||||
:totalRecords="totalRecords"
|
||||
@ -38,11 +34,13 @@ import { useLoadingStore } from "../../stores/loading";
|
||||
import { usePaginationStore } from "../../stores/pagination";
|
||||
import { useFiltersStore } from "../../stores/filters";
|
||||
import { useModalStore } from "../../stores/modal";
|
||||
import { useRouter } from "vue-router";
|
||||
|
||||
const loadingStore = useLoadingStore();
|
||||
const paginationStore = usePaginationStore();
|
||||
const filtersStore = useFiltersStore();
|
||||
const modalStore = useModalStore();
|
||||
const router = useRouter();
|
||||
|
||||
const tableData = ref([]);
|
||||
const totalRecords = ref(0);
|
||||
@ -56,11 +54,6 @@ const currentFilters = computed(() => {
|
||||
return filtersStore.getTableFilters("clients");
|
||||
});
|
||||
|
||||
const onClick = () => {
|
||||
//frappe.new_doc("Customer");
|
||||
modalStore.openCreateClient();
|
||||
};
|
||||
|
||||
// Handle week change from chart
|
||||
const handleWeekChange = async (weekParams) => {
|
||||
console.log("handleWeekChange called with:", weekParams);
|
||||
@ -122,23 +115,99 @@ const columns = [
|
||||
},
|
||||
{
|
||||
label: "Appt. Scheduled",
|
||||
fieldName: "customOnsiteMeetingScheduled",
|
||||
fieldName: "appointmentScheduledStatus",
|
||||
type: "status",
|
||||
sortable: true,
|
||||
},
|
||||
{
|
||||
label: "Estimate Sent",
|
||||
fieldName: "customEstimateSentStatus",
|
||||
fieldName: "estimateSentStatus",
|
||||
type: "status",
|
||||
sortable: true,
|
||||
},
|
||||
{
|
||||
label: "Payment Received",
|
||||
fieldName: "customPaymentReceivedStatus",
|
||||
fieldName: "paymentReceivedStatus",
|
||||
type: "status",
|
||||
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
|
||||
const handleLazyLoad = async (event) => {
|
||||
@ -199,8 +268,6 @@ const handleLazyLoad = async (event) => {
|
||||
return;
|
||||
}
|
||||
|
||||
console.log("Making API call with:", { paginationParams, filters });
|
||||
|
||||
// Call API with pagination, filters, and sorting
|
||||
const result = await Api.getPaginatedClientDetails(paginationParams, filters, sorting);
|
||||
|
||||
@ -210,14 +277,6 @@ const handleLazyLoad = async (event) => {
|
||||
|
||||
// Update pagination store with new 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
|
||||
paginationStore.setCachedPage(
|
||||
"clients",
|
||||
@ -231,12 +290,6 @@ const handleLazyLoad = async (event) => {
|
||||
totalRecords: result.pagination.total,
|
||||
},
|
||||
);
|
||||
|
||||
console.log("Loaded from API:", {
|
||||
records: result.data.length,
|
||||
total: result.pagination.total,
|
||||
page: paginationParams.page + 1,
|
||||
});
|
||||
} catch (error) {
|
||||
console.error("Error loading client data:", error);
|
||||
// You could also show a toast or other error notification here
|
||||
@ -287,24 +340,4 @@ onMounted(async () => {
|
||||
.chart-section {
|
||||
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>
|
||||
|
||||
@ -9,6 +9,7 @@ import TimeSheets from "./components/pages/TimeSheets.vue";
|
||||
import Warranties from "./components/pages/Warranties.vue";
|
||||
import Home from "./components/pages/Home.vue";
|
||||
import TestDateForm from "./components/pages/TestDateForm.vue";
|
||||
import Client from "./components/pages/Client.vue";
|
||||
|
||||
const routes = [
|
||||
{
|
||||
@ -17,6 +18,7 @@ const routes = [
|
||||
},
|
||||
{ path: "/calendar", component: Calendar },
|
||||
{ path: "/clients", component: Clients },
|
||||
{ path: "/clients/:id", component: Client, props: true },
|
||||
{ path: "/jobs", component: Jobs },
|
||||
{ path: "/routes", component: Routes },
|
||||
{ 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