Fix payee action buttons layout and chart tooltip hover highlight
Place edit and delete buttons side by side in payees table using flex. Debounce chart highlight clear to persist during tooltip hover transitions. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -51,12 +51,14 @@
|
|||||||
</v-chip>
|
</v-chip>
|
||||||
</template>
|
</template>
|
||||||
<template #item.actions="{ item }">
|
<template #item.actions="{ item }">
|
||||||
|
<div class="d-flex align-center ga-1">
|
||||||
<v-btn icon size="x-small" variant="text" @click="openEditDialog(item)">
|
<v-btn icon size="x-small" variant="text" @click="openEditDialog(item)">
|
||||||
<v-icon size="small">mdi-pencil</v-icon>
|
<v-icon size="small">mdi-pencil</v-icon>
|
||||||
</v-btn>
|
</v-btn>
|
||||||
<v-btn icon size="x-small" variant="text" color="error" @click="confirmDelete(item)">
|
<v-btn icon size="x-small" variant="text" color="error" @click="confirmDelete(item)">
|
||||||
<v-icon size="small">mdi-delete</v-icon>
|
<v-icon size="small">mdi-delete</v-icon>
|
||||||
</v-btn>
|
</v-btn>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</v-data-table>
|
</v-data-table>
|
||||||
</v-card>
|
</v-card>
|
||||||
@@ -176,7 +178,7 @@ const headers = [
|
|||||||
{ title: 'Default Category', key: 'defaultCategoryName' },
|
{ title: 'Default Category', key: 'defaultCategoryName' },
|
||||||
{ title: 'Aliases', key: 'aliases', sortable: false },
|
{ title: 'Aliases', key: 'aliases', sortable: false },
|
||||||
{ title: 'Status', key: 'isActive', width: '90px' },
|
{ title: 'Status', key: 'isActive', width: '90px' },
|
||||||
{ title: 'Actions', key: 'actions', sortable: false, width: '90px' },
|
{ title: 'Actions', key: 'actions', sortable: false, width: '100px' },
|
||||||
]
|
]
|
||||||
|
|
||||||
const filteredPayees = computed(() => {
|
const filteredPayees = computed(() => {
|
||||||
|
|||||||
@@ -336,23 +336,34 @@ const spendingChartSeries = computed(() =>
|
|||||||
spending.value?.categories.map(c => c.amount) ?? []
|
spending.value?.categories.map(c => c.amount) ?? []
|
||||||
)
|
)
|
||||||
|
|
||||||
|
let chartLeaveTimer: ReturnType<typeof setTimeout> | null = null
|
||||||
|
|
||||||
|
function setChartHighlight(categoryName: string | null) {
|
||||||
|
if (chartLeaveTimer) { clearTimeout(chartLeaveTimer); chartLeaveTimer = null }
|
||||||
|
if (categoryName) {
|
||||||
|
highlightedCategory.value = categoryName
|
||||||
|
} else {
|
||||||
|
chartLeaveTimer = setTimeout(() => { highlightedCategory.value = null }, 100)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
const spendingChartOptions = computed(() => ({
|
const spendingChartOptions = computed(() => ({
|
||||||
chart: {
|
chart: {
|
||||||
type: 'donut' as const,
|
type: 'donut' as const,
|
||||||
events: {
|
events: {
|
||||||
dataPointMouseEnter: (_e: any, _ctx: any, config: any) => {
|
dataPointMouseEnter: (_e: any, _ctx: any, config: any) => {
|
||||||
const labels = spending.value?.categories.map(c => c.categoryName) ?? []
|
const labels = spending.value?.categories.map(c => c.categoryName) ?? []
|
||||||
highlightedCategory.value = labels[config.dataPointIndex] ?? null
|
setChartHighlight(labels[config.dataPointIndex] ?? null)
|
||||||
},
|
},
|
||||||
dataPointMouseLeave: () => {
|
dataPointMouseLeave: () => {
|
||||||
highlightedCategory.value = null
|
setChartHighlight(null)
|
||||||
},
|
},
|
||||||
legendMouseOver: (_ctx: any, _opts: any, config: any) => {
|
legendMouseOver: (_ctx: any, _opts: any, config: any) => {
|
||||||
const labels = spending.value?.categories.map(c => c.categoryName) ?? []
|
const labels = spending.value?.categories.map(c => c.categoryName) ?? []
|
||||||
highlightedCategory.value = labels[config.seriesIndex] ?? null
|
setChartHighlight(labels[config.seriesIndex] ?? null)
|
||||||
},
|
},
|
||||||
legendMouseOut: () => {
|
legendMouseOut: () => {
|
||||||
highlightedCategory.value = null
|
setChartHighlight(null)
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|||||||
Reference in New Issue
Block a user