fix data table
This commit is contained in:
parent
8fa55bea70
commit
10cda824e8
3 changed files with 151 additions and 103 deletions
|
|
@ -1,10 +1,6 @@
|
|||
<template lang="html">
|
||||
<!-- Filter Controls Panel -->
|
||||
<div
|
||||
v-if="hasFilters"
|
||||
:key="`filter-controls-${tableName}`"
|
||||
class="dt-filter-panel"
|
||||
>
|
||||
<div v-if="hasFilters" :key="`filter-controls-${tableName}`" class="dt-filter-panel">
|
||||
<div class="dt-filter-header">
|
||||
<h6 class="dt-filter-title">
|
||||
<i class="pi pi-filter"></i>
|
||||
|
|
@ -85,14 +81,14 @@
|
|||
</div>
|
||||
|
||||
<!-- Bulk Actions Section (when rows are selected) -->
|
||||
<div
|
||||
v-if="hasBulkActions && hasSelectedRows"
|
||||
class="dt-bulk-actions-panel"
|
||||
>
|
||||
<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">
|
||||
<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"
|
||||
|
|
@ -106,7 +102,10 @@
|
|||
/>
|
||||
</div>
|
||||
<!-- Center positioned bulk actions -->
|
||||
<div v-if="bulkActionsGrouped.center.length > 0" class="dt-action-group dt-action-group-center">
|
||||
<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"
|
||||
|
|
@ -120,7 +119,10 @@
|
|||
/>
|
||||
</div>
|
||||
<!-- Right positioned bulk actions -->
|
||||
<div v-if="bulkActionsGrouped.right.length > 0" class="dt-action-group dt-action-group-right">
|
||||
<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"
|
||||
|
|
@ -136,7 +138,12 @@
|
|||
</div>
|
||||
<div class="dt-bulk-actions-status">
|
||||
<i class="pi pi-check-circle"></i>
|
||||
<span>{{ selectedRows.length }} row{{ selectedRows.length !== 1 ? "s" : "" }} selected</span>
|
||||
<span
|
||||
>{{ selectedRows.length }} row{{
|
||||
selectedRows.length !== 1 ? "s" : ""
|
||||
}}
|
||||
selected</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -145,7 +152,10 @@
|
|||
<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">
|
||||
<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"
|
||||
|
|
@ -159,7 +169,10 @@
|
|||
/>
|
||||
</div>
|
||||
<!-- Center positioned actions -->
|
||||
<div v-if="topActionsGrouped.center.length > 0" class="dt-action-group dt-action-group-center">
|
||||
<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"
|
||||
|
|
@ -173,7 +186,10 @@
|
|||
/>
|
||||
</div>
|
||||
<!-- Right positioned actions -->
|
||||
<div v-if="topActionsGrouped.right.length > 0" class="dt-action-group dt-action-group-right">
|
||||
<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"
|
||||
|
|
@ -190,7 +206,9 @@
|
|||
<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="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>
|
||||
|
|
@ -277,7 +295,10 @@
|
|||
<template #body="slotProps">
|
||||
<div class="dt-row-actions">
|
||||
<!-- Primary row actions -->
|
||||
<div v-if="rowActionsGrouped.primary.length > 0" class="dt-row-actions-primary">
|
||||
<div
|
||||
v-if="rowActionsGrouped.primary.length > 0"
|
||||
class="dt-row-actions-primary"
|
||||
>
|
||||
<Button
|
||||
v-for="action in rowActionsGrouped.primary"
|
||||
:key="action.label"
|
||||
|
|
@ -287,12 +308,18 @@
|
|||
:size="action.size || 'small'"
|
||||
@click="handleRowAction(action, slotProps.data)"
|
||||
:disabled="loading"
|
||||
:class="['dt-row-btn', action.layout?.variant && `dt-row-btn-${action.layout.variant}`]"
|
||||
: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">
|
||||
<div
|
||||
v-if="rowActionsGrouped.secondary.length > 0"
|
||||
class="dt-row-actions-secondary"
|
||||
>
|
||||
<Button
|
||||
v-for="action in rowActionsGrouped.secondary"
|
||||
:key="action.label"
|
||||
|
|
@ -302,12 +329,19 @@
|
|||
: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}`]"
|
||||
: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">
|
||||
<div
|
||||
v-if="rowActionsGrouped.dropdown.length > 0"
|
||||
class="dt-row-actions-dropdown"
|
||||
>
|
||||
<Button
|
||||
icon="pi pi-ellipsis-v"
|
||||
:size="'small'"
|
||||
|
|
@ -593,27 +627,33 @@ const bulkActions = computed(() => {
|
|||
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'),
|
||||
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'),
|
||||
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'),
|
||||
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;
|
||||
});
|
||||
|
|
@ -928,9 +968,9 @@ const handleTopAction = (action) => {
|
|||
// Helper methods for action styling and behavior
|
||||
const getActionSeverity = (action) => {
|
||||
if (action.requiresSelection) {
|
||||
return action.style || 'info';
|
||||
return action.style || "info";
|
||||
}
|
||||
return action.style || 'primary';
|
||||
return action.style || "primary";
|
||||
};
|
||||
|
||||
const getActionDisabled = (action) => {
|
||||
|
|
@ -942,14 +982,14 @@ const getActionDisabled = (action) => {
|
|||
};
|
||||
|
||||
const getActionClasses = (action) => {
|
||||
const classes = ['dt-action-btn'];
|
||||
const classes = ["dt-action-btn"];
|
||||
if (action.requiresSelection) {
|
||||
classes.push('dt-action-btn-selection');
|
||||
classes.push("dt-action-btn-selection");
|
||||
if (!hasExactlyOneRowSelected.value) {
|
||||
classes.push('dt-action-btn-disabled');
|
||||
classes.push("dt-action-btn-disabled");
|
||||
}
|
||||
} else {
|
||||
classes.push('dt-action-btn-global');
|
||||
classes.push("dt-action-btn-global");
|
||||
}
|
||||
if (action.layout?.variant) {
|
||||
classes.push(`dt-action-btn-${action.layout.variant}`);
|
||||
|
|
@ -960,7 +1000,7 @@ const getActionClasses = (action) => {
|
|||
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);
|
||||
console.log("Toggle dropdown for row:", rowData);
|
||||
};
|
||||
|
||||
const handleBulkAction = (action, selectedRows) => {
|
||||
|
|
@ -1126,7 +1166,9 @@ defineExpose({
|
|||
border-radius: 8px;
|
||||
padding: 0.625rem;
|
||||
font-size: 0.875rem;
|
||||
transition: border-color 0.2s ease, box-shadow 0.2s ease;
|
||||
transition:
|
||||
border-color 0.2s ease,
|
||||
box-shadow 0.2s ease;
|
||||
}
|
||||
|
||||
.dt-filter-input:focus {
|
||||
|
|
@ -1141,7 +1183,8 @@ defineExpose({
|
|||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.dt-btn-primary, .dt-btn-secondary {
|
||||
.dt-btn-primary,
|
||||
.dt-btn-secondary {
|
||||
border-radius: 8px;
|
||||
font-weight: 500;
|
||||
transition: all 0.2s ease;
|
||||
|
|
@ -1433,22 +1476,22 @@ defineExpose({
|
|||
.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;
|
||||
|
|
@ -1464,20 +1507,20 @@ defineExpose({
|
|||
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;
|
||||
|
|
|
|||
|
|
@ -158,8 +158,8 @@ const tableActions = [
|
|||
icon: "pi pi-plus",
|
||||
layout: {
|
||||
position: "left",
|
||||
variant: "filled"
|
||||
}
|
||||
variant: "filled",
|
||||
},
|
||||
// Global action - always available
|
||||
},
|
||||
{
|
||||
|
|
@ -173,8 +173,8 @@ const tableActions = [
|
|||
requiresSelection: true, // Single selection action - appears above table, enabled when exactly one row selected
|
||||
layout: {
|
||||
position: "center",
|
||||
variant: "outlined"
|
||||
}
|
||||
variant: "outlined",
|
||||
},
|
||||
},
|
||||
{
|
||||
label: "Export Selected",
|
||||
|
|
@ -188,8 +188,8 @@ const tableActions = [
|
|||
requiresMultipleSelection: true, // Bulk action - operates on selected rows
|
||||
layout: {
|
||||
position: "right",
|
||||
variant: "filled"
|
||||
}
|
||||
variant: "filled",
|
||||
},
|
||||
},
|
||||
{
|
||||
label: "Edit",
|
||||
|
|
@ -203,8 +203,8 @@ const tableActions = [
|
|||
rowAction: true, // Row action - appears in each row's actions column
|
||||
layout: {
|
||||
priority: "primary",
|
||||
variant: "outlined"
|
||||
}
|
||||
variant: "outlined",
|
||||
},
|
||||
},
|
||||
{
|
||||
label: "Quick View",
|
||||
|
|
@ -218,8 +218,8 @@ const tableActions = [
|
|||
rowAction: true, // Row action - appears in each row's actions column
|
||||
layout: {
|
||||
priority: "secondary",
|
||||
variant: "compact"
|
||||
}
|
||||
variant: "compact",
|
||||
},
|
||||
},
|
||||
];
|
||||
// Handle lazy loading events from DataTable
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue