Files
Cleanuparr/code/frontend/src/app/features/seeker-stats/upgrades-tab/upgrades-tab.component.html
2026-04-25 11:57:38 +03:00

111 lines
3.5 KiB
HTML

<!-- Toolbar -->
<div class="toolbar" stickyAware>
<div class="toolbar__filters">
<app-input
placeholder="Search by title..."
type="search"
[(value)]="searchQuery"
(entered)="onSearchFilterChange()"
/>
<app-select
label="Sort by"
[value]="sortBy()"
[options]="sortOptions"
(valueChange)="onSortByChange($any($event))"
/>
<app-select
label="Sort order"
[value]="sortDirection()"
[options]="sortOrderOptions"
(valueChange)="onSortOrderChange($any($event))"
/>
</div>
<div class="toolbar__actions">
<app-button variant="secondary" size="sm" (clicked)="openFilters()">
<ng-icon name="tablerFilter" />
Filters
@if (activeFilterCount() > 0) {
<app-badge severity="accent" size="sm">{{ activeFilterCount() }}</app-badge>
}
</app-button>
<app-button variant="ghost" size="sm" (clicked)="refresh()">Refresh</app-button>
</div>
</div>
<!-- Stats Bar -->
<div class="stats-bar">
<div class="stats-bar__item">
<span class="stats-bar__value stats-bar__value--success"><app-animated-counter [value]="totalRecords()" [duration]="400" /></span>
<span class="stats-bar__label">Total Upgrades</span>
</div>
</div>
<!-- Upgrades List -->
<app-card [noPadding]="true">
<div class="upgrades-list">
@for (upgrade of upgrades(); track $index) {
<div class="upgrade-row">
<div class="upgrade-row__main">
<ng-icon name="tablerTrendingUp" class="upgrade-row__icon" />
<div class="upgrade-row__scores">
<span class="upgrade-row__score upgrade-row__score--old">{{ upgrade.previousScore }}</span>
<ng-icon name="tablerArrowRight" class="upgrade-row__arrow" />
<span class="upgrade-row__score upgrade-row__score--new">{{ upgrade.newScore }}</span>
<span class="upgrade-row__cutoff">(cutoff: {{ upgrade.cutoffScore }})</span>
</div>
<app-badge [severity]="itemTypeSeverity(upgrade.itemType)" size="sm">
{{ upgrade.itemType }}
</app-badge>
<span class="upgrade-row__time">{{ upgrade.upgradedAt | date:'yyyy-MM-dd HH:mm' }}</span>
</div>
<div class="upgrade-row__title">
{{ upgrade.title }}
</div>
</div>
} @empty {
<app-empty-state
icon="tablerTrendingUp"
heading="No upgrades found"
description="Score upgrades will appear here when items improve their custom format scores."
/>
}
</div>
</app-card>
<!-- Pagination -->
@if (totalRecords() > 0) {
<app-paginator
[totalRecords]="totalRecords()"
[pageSize]="pageSize()"
[currentPage]="currentPage()"
(pageChange)="onPageChange($event)"
(pageSizeChange)="onPageSizeChange($event)"
/>
}
<!-- Filter drawer -->
<app-drawer title="Filter upgrades" [(visible)]="drawerOpen">
<div class="filter-group">
<label class="filter-group__label">Instance</label>
<app-select
[value]="draft().instanceId"
[options]="instanceOptions()"
(valueChange)="updateDraft('instanceId', $any($event))"
/>
</div>
<div class="filter-group">
<label class="filter-group__label">Time range</label>
<app-select
[value]="draft().timeRange"
[options]="timeRangeOptions"
(valueChange)="updateDraft('timeRange', $any($event))"
/>
</div>
<div drawer-footer>
<app-button variant="ghost" (clicked)="resetFilters()">Reset</app-button>
<app-button variant="primary" (clicked)="applyFilters()">Apply</app-button>
</div>
</app-drawer>