add table actions to datatable, client page, start writing db method for clients
This commit is contained in:
parent
a67e86af44
commit
df1df3f882
9 changed files with 1844 additions and 194 deletions
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue