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

fix data table

Browse Source
This commit is contained in:
Casey Wittrock 2025-11-11 12:40:47 -06:00
parent 8fa55bea70
commit 10cda824e8
3 changed files with 151 additions and 103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

97
frontend/documentation/components/DataTable.md
View File

@ -768,102 +768,107 @@ const customFilters = {
```vue
<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { useModalStore } from '@/stores/modal'
import { ref } from "vue";
import { useRouter } from "vue-router";
import { useModalStore } from "@/stores/modal";
const router = useRouter()
const modalStore = useModalStore()
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 }
]
{ 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' }
])
{ 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',
label: "Quick Export",
icon: "pi pi-download",
action: () => exportAllClients(),
severity: 'success',
layout: { position: 'left', variant: 'outlined' }
severity: "success",
layout: { position: "left", variant: "outlined" },
},
// Center-positioned bulk action
{
label: 'Archive Selected',
icon: 'pi pi-archive',
label: "Archive Selected",
icon: "pi pi-archive",
action: (selectedRows) => archiveClients(selectedRows),
severity: 'warning',
severity: "warning",
requiresMultipleSelection: true,
layout: { position: 'center', variant: 'outlined' }
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' }
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',
label: "Edit Details",
icon: "pi pi-pencil",
action: (rowData) => router.push(`/clients/${rowData.id}/edit`),
severity: 'secondary',
severity: "secondary",
requiresSelection: true,
layout: { position: 'left', variant: 'text' }
layout: { position: "left", variant: "text" },
},
// Primary row action - most important
{
label: 'View',
icon: 'pi pi-eye',
label: "View",
icon: "pi pi-eye",
action: (rowData) => router.push(`/clients/${rowData.id}`),
severity: 'info',
severity: "info",
rowAction: true,
layout: { priority: 'primary', variant: 'outlined' }
layout: { priority: "primary", variant: "outlined" },
},
// Secondary row action - less important
{
label: 'Contact',
icon: 'pi pi-phone',
label: "Contact",
icon: "pi pi-phone",
action: (rowData) => initiateContact(rowData),
severity: 'success',
severity: "success",
rowAction: true,
layout: { priority: 'secondary', variant: 'text' }
layout: { priority: "secondary", variant: "text" },
},
// Dropdown row action - additional options
{
label: 'More',
icon: 'pi pi-ellipsis-v',
label: "More",
icon: "pi pi-ellipsis-v",
action: (rowData) => showMoreOptions(rowData),
rowAction: true,
layout: { priority: 'dropdown', variant: 'icon-only' }
}
]
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>

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

@ -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;

20
frontend/src/components/pages/Clients.vue
View File

@ -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