279 lines
7.1 KiB
HTML
279 lines
7.1 KiB
HTML
<!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>
|