127 lines
4.4 KiB
Vue
127 lines
4.4 KiB
Vue
<template>
|
|
<v-container fluid class="pt-2 pb-6">
|
|
<!-- Sticky tabs: operator-flagged 2026-05-25 — long Import / Maintenance
|
|
panels pushed the tab strip out of the viewport, forcing a scroll-
|
|
to-top just to change tab. AppShell's TopNav is 64px sticky, so the
|
|
tab strip lives directly under it. Background uses the theme surface
|
|
token so it visually merges with the page rather than the
|
|
translucent v-tabs default. -->
|
|
<v-tabs
|
|
v-model="tab" color="accent" class="mb-4"
|
|
style="position: sticky; top: 64px; z-index: 4;
|
|
background: rgb(var(--v-theme-surface));"
|
|
>
|
|
<v-tab value="overview">Overview</v-tab>
|
|
<v-tab value="activity">Activity</v-tab>
|
|
<v-tab value="import">Import</v-tab>
|
|
<v-tab value="cleanup">Cleanup</v-tab>
|
|
<v-tab value="maintenance">Maintenance</v-tab>
|
|
</v-tabs>
|
|
|
|
<v-window v-model="tab">
|
|
<v-window-item value="overview">
|
|
<SystemStatsCards :stats="system.stats" />
|
|
<SystemActivitySummary
|
|
class="mt-4"
|
|
@open-activity="tab = 'activity'"
|
|
/>
|
|
<v-alert
|
|
v-if="system.stats && (system.stats.tasks.pending + system.stats.tasks.queued) > 0"
|
|
type="info" variant="tonal" class="mt-4" closable
|
|
>
|
|
{{ system.stats.tasks.pending + system.stats.tasks.queued }} import task(s) pending.
|
|
<v-btn variant="text" size="small" @click="tab = 'import'">Go to Import tab</v-btn>
|
|
</v-alert>
|
|
<!-- Browser-extension install/download lives on Overview (moved
|
|
from Maintenance 2026-05-25). Overview is the discovery
|
|
surface for "things to set up"; Maintenance is for
|
|
housekeeping of already-set-up systems. -->
|
|
<BrowserExtensionCard class="mt-6" />
|
|
</v-window-item>
|
|
|
|
<v-window-item value="activity">
|
|
<SystemActivityTab />
|
|
</v-window-item>
|
|
|
|
<v-window-item value="import">
|
|
<!-- Order: trigger → recent tasks → filters. Tasks sit directly
|
|
below the trigger so operator sees hit/miss feedback without
|
|
scrolling past the filter card (operator-flagged 2026-05-25). -->
|
|
<ImportTriggerPanel />
|
|
<v-divider class="my-6" />
|
|
<ImportTaskList />
|
|
<v-divider class="my-6" />
|
|
<ImportFiltersForm />
|
|
</v-window-item>
|
|
|
|
<v-window-item value="cleanup">
|
|
<CleanupView />
|
|
</v-window-item>
|
|
|
|
<v-window-item value="maintenance">
|
|
<MaintenancePanel />
|
|
</v-window-item>
|
|
</v-window>
|
|
</v-container>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { onMounted, onUnmounted, ref, watch } from 'vue'
|
|
import { useSystemStore } from '../stores/system.js'
|
|
import { useImportStore } from '../stores/import.js'
|
|
import SystemStatsCards from '../components/settings/SystemStatsCards.vue'
|
|
import SystemActivitySummary from '../components/settings/SystemActivitySummary.vue'
|
|
import SystemActivityTab from '../components/settings/SystemActivityTab.vue'
|
|
import BrowserExtensionCard from '../components/settings/BrowserExtensionCard.vue'
|
|
import ImportTriggerPanel from '../components/settings/ImportTriggerPanel.vue'
|
|
import ImportFiltersForm from '../components/settings/ImportFiltersForm.vue'
|
|
import ImportTaskList from '../components/settings/ImportTaskList.vue'
|
|
import MaintenancePanel from '../components/settings/MaintenancePanel.vue'
|
|
import CleanupView from './CleanupView.vue'
|
|
import { useMLStore } from '../stores/ml.js'
|
|
|
|
const tab = ref('overview')
|
|
const system = useSystemStore()
|
|
const importStore = useImportStore()
|
|
const mlStore = useMLStore()
|
|
|
|
let pollId = null
|
|
|
|
function startPolling() {
|
|
if (pollId) return
|
|
system.refreshStats()
|
|
pollId = setInterval(() => {
|
|
if (!document.hidden) {
|
|
system.refreshStats()
|
|
if (tab.value === 'import') {
|
|
importStore.refreshStatus()
|
|
// Refresh the task list while a batch is in flight so the UI
|
|
// doesn't sit stale next to a ticking imported/skipped counter.
|
|
if (importStore.activeBatch) importStore.loadTasks(true)
|
|
}
|
|
}
|
|
}, 5000)
|
|
}
|
|
|
|
function stopPolling() {
|
|
if (pollId) { clearInterval(pollId); pollId = null }
|
|
}
|
|
|
|
onMounted(() => {
|
|
startPolling()
|
|
importStore.loadSettings()
|
|
importStore.refreshStatus()
|
|
importStore.loadTasks(true)
|
|
})
|
|
onUnmounted(stopPolling)
|
|
|
|
watch(tab, (t) => {
|
|
if (t === 'import') {
|
|
importStore.refreshStatus()
|
|
importStore.loadTasks(true)
|
|
} else if (t === 'maintenance') {
|
|
mlStore.loadSettings()
|
|
}
|
|
})
|
|
</script>
|