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

remove export button for now

Browse Source
This commit is contained in:
Casey Wittrock 2025-11-11 13:00:34 -06:00
parent 10cda824e8
commit 254cbf37a1
2 changed files with 100 additions and 141 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1107,31 +1107,26 @@ defineExpose({
/* Filter Panel Styles */ /* Filter Panel Styles */
.dt-filter-panel { .dt-filter-panel {
background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%); background: #ffffff;
border: 1px solid #e2e8f0; border: 1px solid #e5e7eb;
border-radius: 12px; border-radius: 6px;
margin-bottom: 1rem; margin-bottom: 0.5rem;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
}
.dt-filter-panel:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
} }
.dt-filter-header { .dt-filter-header {
padding: 1rem 1.25rem 0.5rem; padding: 0.5rem 0.75rem 0.25rem;
border-bottom: 1px solid #e2e8f0; border-bottom: 1px solid #f3f4f6;
} }
.dt-filter-title { .dt-filter-title {
margin: 0; margin: 0;
font-size: 0.875rem; font-size: 0.75rem;
font-weight: 600; font-weight: 600;
color: #374151; color: #374151;
display: flex; display: flex;
align-items: center; align-items: center;
gap: 0.5rem; gap: 0.375rem;
} }
.dt-filter-title i { .dt-filter-title i {
@ -1139,80 +1134,75 @@ defineExpose({
} }
.dt-filter-content { .dt-filter-content {
padding: 1.25rem; padding: 0.75rem;
} }
.dt-filter-grid { .dt-filter-grid {
display: grid; display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem; gap: 0.5rem;
margin-bottom: 1rem; margin-bottom: 0.5rem;
} }
.dt-filter-field { .dt-filter-field {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 0.375rem; gap: 0.25rem;
} }
.dt-filter-label { .dt-filter-label {
font-size: 0.875rem; font-size: 0.75rem;
font-weight: 500; font-weight: 500;
color: #374151; color: #374151;
} }
.dt-filter-input { .dt-filter-input {
border: 1px solid #d1d5db; border: 1px solid #d1d5db;
border-radius: 8px; border-radius: 4px;
padding: 0.625rem; padding: 0.375rem 0.5rem;
font-size: 0.875rem; font-size: 0.75rem;
transition: transition: border-color 0.2s ease;
border-color 0.2s ease, background: #ffffff;
box-shadow 0.2s ease;
} }
.dt-filter-input:focus { .dt-filter-input:focus {
border-color: #6366f1; border-color: #6366f1;
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1); outline: none;
} }
.dt-filter-actions { .dt-filter-actions {
display: flex; display: flex;
gap: 0.75rem; gap: 0.5rem;
align-items: center; align-items: center;
flex-wrap: wrap; flex-wrap: wrap;
} }
.dt-btn-primary, .dt-btn-primary,
.dt-btn-secondary { .dt-btn-secondary {
border-radius: 8px; border-radius: 4px;
font-weight: 500; font-weight: 500;
transition: all 0.2s ease; font-size: 0.75rem;
} padding: 0.375rem 0.75rem;
.dt-btn-primary:hover {
transform: translateY(-1px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
} }
.dt-filter-status { .dt-filter-status {
margin-top: 0.75rem; margin-top: 0.5rem;
padding: 0.75rem; padding: 0.375rem 0.5rem;
background: #f3f4f6; background: #f9fafb;
border-radius: 8px; border-radius: 4px;
font-size: 0.8125rem; font-size: 0.7rem;
color: #6b7280; color: #6b7280;
display: flex; display: flex;
align-items: center; align-items: center;
gap: 0.5rem; gap: 0.375rem;
} }
/* Pagination Panel Styles */ /* Pagination Panel Styles */
.dt-pagination-panel { .dt-pagination-panel {
background: linear-gradient(135deg, #ffffff 0%, #f9fafb 100%); background: #ffffff;
border: 1px solid #e5e7eb; border: 1px solid #e5e7eb;
border-radius: 10px; border-radius: 6px;
margin-bottom: 1rem; margin-bottom: 0.5rem;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
} }
@ -1220,40 +1210,41 @@ defineExpose({
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 0.875rem 1.25rem; padding: 0.5rem 0.75rem;
flex-wrap: wrap; flex-wrap: wrap;
gap: 1rem; gap: 0.5rem;
} }
.dt-pagination-info { .dt-pagination-info {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 0.5rem; gap: 0.375rem;
color: #6b7280; color: #6b7280;
font-size: 0.875rem; font-size: 0.75rem;
} }
.dt-pagination-info i { .dt-pagination-info i {
color: #6366f1; color: #6366f1;
font-size: 0.75rem;
} }
.dt-pagination-controls { .dt-pagination-controls {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 0.5rem; gap: 0.375rem;
} }
.dt-pagination-label { .dt-pagination-label {
font-size: 0.875rem; font-size: 0.75rem;
color: #374151; color: #374151;
font-weight: 500; font-weight: 500;
} }
.dt-pagination-select { .dt-pagination-select {
border: 1px solid #d1d5db; border: 1px solid #d1d5db;
border-radius: 6px; border-radius: 4px;
padding: 0.375rem 0.75rem; padding: 0.25rem 0.5rem;
font-size: 0.875rem; font-size: 0.75rem;
background: white; background: white;
transition: border-color 0.2s ease; transition: border-color 0.2s ease;
} }
@ -1265,27 +1256,27 @@ defineExpose({
/* Bulk Actions Panel Styles */ /* Bulk Actions Panel Styles */
.dt-bulk-actions-panel { .dt-bulk-actions-panel {
background: linear-gradient(135deg, #fef3c7 0%, #fcd34d 100%); background: #fef7ed;
border: 1px solid #f59e0b; border: 1px solid #fed7aa;
border-radius: 10px; border-radius: 6px;
margin-bottom: 1rem; margin-bottom: 0.5rem;
box-shadow: 0 2px 4px rgba(245, 158, 11, 0.1); box-shadow: 0 1px 2px rgba(251, 146, 60, 0.1);
animation: slideInBulk 0.3s ease-out; animation: slideInBulk 0.2s ease-out;
} }
@keyframes slideInBulk { @keyframes slideInBulk {
from { from {
opacity: 0; opacity: 0;
transform: translateY(-10px) scale(0.98); transform: translateY(-5px);
} }
to { to {
opacity: 1; opacity: 1;
transform: translateY(0) scale(1); transform: translateY(0);
} }
} }
.dt-bulk-actions-content { .dt-bulk-actions-content {
padding: 1rem 1.25rem; padding: 0.5rem 0.75rem;
} }
.dt-bulk-actions-groups { .dt-bulk-actions-groups {
@ -1293,55 +1284,51 @@ defineExpose({
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
flex-wrap: wrap; flex-wrap: wrap;
gap: 0.75rem; gap: 0.5rem;
margin-bottom: 0.75rem; margin-bottom: 0.5rem;
} }
.dt-bulk-btn { .dt-bulk-btn {
border-radius: 8px; border-radius: 4px;
font-weight: 500; font-weight: 500;
transition: all 0.2s ease; font-size: 0.75rem;
} padding: 0.375rem 0.75rem;
.dt-bulk-btn:hover {
transform: translateY(-1px);
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
} }
.dt-bulk-actions-status { .dt-bulk-actions-status {
padding: 0.5rem 0.75rem; padding: 0.25rem 0.5rem;
background: rgba(255, 255, 255, 0.8); background: rgba(255, 255, 255, 0.8);
border-radius: 6px; border-radius: 4px;
font-size: 0.8125rem; font-size: 0.7rem;
color: #92400e; color: #ea580c;
display: flex; display: flex;
align-items: center; align-items: center;
gap: 0.5rem; gap: 0.375rem;
font-weight: 500; font-weight: 500;
} }
/* Global Actions Panel Styles */ /* Global Actions Panel Styles */
.dt-global-actions-panel { .dt-global-actions-panel {
background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%); background: #ffffff;
border: 1px solid #e2e8f0; border: 1px solid #e5e7eb;
border-radius: 10px; border-radius: 6px;
margin-bottom: 1rem; margin-bottom: 0.5rem;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
border-left: 4px solid #6366f1; border-left: 3px solid #6366f1;
} }
.dt-global-actions-content { .dt-global-actions-content {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 1rem 1.25rem; padding: 0.5rem 0.75rem;
flex-wrap: wrap; flex-wrap: wrap;
gap: 0.75rem; gap: 0.5rem;
} }
.dt-action-group { .dt-action-group {
display: flex; display: flex;
gap: 0.5rem; gap: 0.375rem;
flex-wrap: wrap; flex-wrap: wrap;
align-items: center; align-items: center;
} }
@ -1360,15 +1347,17 @@ defineExpose({
} }
.dt-action-btn { .dt-action-btn {
border-radius: 8px; border-radius: 4px;
font-weight: 500; font-weight: 500;
font-size: 0.75rem;
padding: 0.375rem 0.75rem;
transition: all 0.2s ease; transition: all 0.2s ease;
position: relative; position: relative;
} }
.dt-action-btn:hover:not(:disabled) { .dt-action-btn:hover:not(:disabled) {
transform: translateY(-1px); transform: translateY(-1px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
} }
.dt-action-btn-global { .dt-action-btn-global {
@ -1397,14 +1386,14 @@ defineExpose({
} }
.dt-global-actions-status { .dt-global-actions-status {
padding: 0.625rem 1.25rem; padding: 0.375rem 0.75rem;
background: #f3f4f6; background: #f9fafb;
border-top: 1px solid #e5e7eb; border-top: 1px solid #f3f4f6;
font-size: 0.8125rem; font-size: 0.7rem;
color: #6b7280; color: #6b7280;
display: flex; display: flex;
align-items: center; align-items: center;
gap: 0.5rem; gap: 0.375rem;
} }
/* Row Actions Styles */ /* Row Actions Styles */
@ -1498,45 +1487,15 @@ defineExpose({
} }
} }
/* 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 */ /* Animation utilities */
.dt-fade-in { .dt-fade-in {
animation: fadeIn 0.3s ease-out; animation: fadeIn 0.2s ease-out;
} }
@keyframes fadeIn { @keyframes fadeIn {
from { from {
opacity: 0; opacity: 0;
transform: translateY(10px); transform: translateY(5px);
} }
to { to {
opacity: 1; opacity: 1;
@ -1545,13 +1504,13 @@ defineExpose({
} }
.dt-slide-in { .dt-slide-in {
animation: slideIn 0.3s ease-out; animation: slideIn 0.2s ease-out;
} }
@keyframes slideIn { @keyframes slideIn {
from { from {
opacity: 0; opacity: 0;
transform: translateX(-10px); transform: translateX(-5px);
} }
to { to {
opacity: 1; opacity: 1;

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

@ -176,21 +176,21 @@ const tableActions = [
variant: "outlined", variant: "outlined",
}, },
}, },
{ // {
label: "Export Selected", // label: "Export Selected",
action: (selectedRows) => { // action: (selectedRows) => {
console.log("Exporting", selectedRows.length, "clients:", selectedRows); // console.log("Exporting", selectedRows.length, "clients:", selectedRows);
// Implementation would export selected clients // // Implementation would export selected clients
}, // },
type: "button", // type: "button",
style: "success", // style: "success",
icon: "pi pi-download", // icon: "pi pi-download",
requiresMultipleSelection: true, // Bulk action - operates on selected rows // requiresMultipleSelection: true, // Bulk action - operates on selected rows
layout: { // layout: {
position: "right", // position: "right",
variant: "filled", // variant: "filled",
}, // },
}, // },
{ {
label: "Edit", label: "Edit",
action: (rowData) => { action: (rowData) => {