bvandeusen
958378312c
Allowlist / Alias / ImportTask tables scroll their bodies (height=360/480) but the column headers scrolled away with the rows, so you lost the column labels (operator-flagged 2026-06-27). Add Vuetify `fixed-header` so the header row stays pinned while the body scrolls. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
48 lines
1.5 KiB
Vue
48 lines
1.5 KiB
Vue
<template>
|
|
<MaintenanceTile
|
|
icon="mdi-tag-arrow-right-outline"
|
|
:title="`Tag aliases (${store.rows.length})`"
|
|
blurb="Alternate tag spellings that map to a canonical tag."
|
|
>
|
|
<v-data-table-virtual
|
|
:headers="headers" :items="store.rows" :loading="store.loading"
|
|
height="360" density="compact" fixed-header
|
|
no-data-text="No aliases yet — create one from a suggestion's ⋮ menu."
|
|
>
|
|
<template #item.mapping="{ item }">
|
|
<code>{{ item.alias_string }}</code>
|
|
<span class="mx-2">→</span>
|
|
<strong>{{ item.canonical_tag_name }}</strong>
|
|
</template>
|
|
<template #item.actions="{ item }">
|
|
<v-btn
|
|
icon="mdi-delete" size="x-small" variant="text" color="error"
|
|
@click="store.remove(item.alias_string, item.alias_category)"
|
|
/>
|
|
</template>
|
|
</v-data-table-virtual>
|
|
</MaintenanceTile>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { onMounted } from 'vue'
|
|
import { useAliasesStore } from '../../stores/aliases.js'
|
|
import MaintenanceTile from '../common/MaintenanceTile.vue'
|
|
|
|
const store = useAliasesStore()
|
|
const headers = [
|
|
{ title: 'Mapping', key: 'mapping', sortable: false },
|
|
{ title: 'Category', key: 'alias_category', sortable: true, width: 130 },
|
|
{ title: '', key: 'actions', sortable: false, width: 60 }
|
|
]
|
|
onMounted(() => store.load())
|
|
</script>
|
|
|
|
<style scoped>
|
|
code {
|
|
background: rgb(var(--v-theme-surface-light));
|
|
padding: 1px 6px; border-radius: 4px;
|
|
font-family: 'JetBrains Mono', monospace;
|
|
}
|
|
</style>
|