feat(unified-mobile-desktop-ui): Complete US-511 - Detailed Invoices - Eliminare Buton Filtru Duplicat

Implemented by Ralph autonomous loop.
Iteration: 11

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Claude Agent
2026-01-12 22:57:13 +00:00
parent 2f6aa6a37a
commit 65a051ba0a
3 changed files with 42 additions and 16 deletions

View File

@@ -91,17 +91,17 @@
</div>
</div>
<!-- Mobile Filter Chips (compact summary) -->
<!-- US-510: Removed type filter chip - type is determined by route -->
<div v-if="isMobile" class="mobile-filter-summary">
<div v-if="searchTerm" class="filter-chip active" @click="openFilters">
<!-- US-511: Mobile Filter Chips - display-only (filter action is in MobileTopBar) -->
<div v-if="isMobile && hasActiveFilters" class="mobile-filter-summary">
<div v-if="searchTerm" class="filter-chip active">
<i class="pi pi-search"></i>
<span>{{ searchTerm }}</span>
<i class="pi pi-times" @click.stop="clearSearch"></i>
<i class="pi pi-times" @click="clearSearch"></i>
</div>
<div class="filter-chip" @click="openFilters">
<div v-if="selectedPeriod !== 'all'" class="filter-chip active">
<i class="pi pi-calendar"></i>
<span>{{ getPeriodLabel(selectedPeriod) }}</span>
<i class="pi pi-times" @click="clearPeriod"></i>
</div>
</div>
@@ -710,6 +710,12 @@ const clearSearch = () => {
handleSearch()
}
// US-511: Clear period filter from chip
const clearPeriod = () => {
selectedPeriod.value = 'all'
loadDetailedData()
}
const handleSearch = () => {
firstRow.value = 0
expandedGroups.value.clear()
@@ -947,7 +953,7 @@ onUnmounted(() => {
border-top: 1px solid var(--surface-border);
}
/* Mobile Filter Summary */
/* Mobile Filter Summary - US-511: Display-only chips showing active filters */
.mobile-filter-summary {
display: flex;
gap: var(--space-sm);
@@ -964,12 +970,7 @@ onUnmounted(() => {
border-radius: var(--radius-full);
font-size: var(--text-sm);
color: var(--text-color);
cursor: pointer;
transition: background var(--transition-fast);
}
.filter-chip:active {
background: var(--surface-border);
/* US-511: Removed cursor:pointer - chips are display-only, only close icon is clickable */
}
.filter-chip.active {
@@ -977,9 +978,28 @@ onUnmounted(() => {
color: var(--color-primary);
}
/* US-511: Close icon on filter chips - clickable to remove that filter */
.filter-chip .pi-times {
font-size: 0.75rem;
padding: 2px;
padding: var(--space-xs);
cursor: pointer;
border-radius: var(--radius-full);
transition: background var(--transition-fast);
/* Ensure touch target is adequate */
min-width: 24px;
min-height: 24px;
display: flex;
align-items: center;
justify-content: center;
margin: calc(-1 * var(--space-xs)) calc(-1 * var(--space-xs)) calc(-1 * var(--space-xs)) 0;
}
.filter-chip .pi-times:hover {
background: var(--surface-hover);
}
.filter-chip .pi-times:active {
background: var(--surface-border);
}
/* Loading State */