bvandeusen
1322056b22
ArtistView and SubscriptionsView both two-way-bound a tab ref with the ?tab= query param via identical tab->URL and URL->tab watchers. Extracted useTabQuery(validTabs, defaultTab) — defaultTab accepts a string or a function (ArtistView's default is postCount-dependent), and resolve() is exposed so ArtistView can re-apply it after the artist loads. Both views drop their now-orphaned ref/useRouter imports. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
78 lines
2.3 KiB
Vue
78 lines
2.3 KiB
Vue
<template>
|
|
<div v-if="store.loading && !store.overview" class="fc-artist__loading">
|
|
<v-progress-circular indeterminate color="accent" size="36" />
|
|
</div>
|
|
|
|
<v-container v-else-if="store.notFound" class="pt-2 pb-6">
|
|
<v-alert type="warning" variant="tonal">Artist not found.</v-alert>
|
|
</v-container>
|
|
|
|
<v-container v-else-if="store.error && !store.overview" class="pt-2 pb-6">
|
|
<v-alert type="error" variant="tonal" closable>{{ store.error }}</v-alert>
|
|
</v-container>
|
|
|
|
<template v-else-if="store.overview">
|
|
<ArtistHeader
|
|
v-model="tab"
|
|
:name="store.overview.name"
|
|
:image-count="store.imageCount"
|
|
:post-count="store.postCount"
|
|
:last-added="store.lastAdded"
|
|
/>
|
|
<v-container fluid class="pt-2 pb-4">
|
|
<v-window v-model="tab">
|
|
<v-window-item value="posts">
|
|
<ArtistPostsTab
|
|
:artist-id="store.overview.id"
|
|
@switch-tab="(t) => tab = t"
|
|
/>
|
|
</v-window-item>
|
|
<v-window-item value="gallery">
|
|
<ArtistGalleryTab :slug="slug" />
|
|
</v-window-item>
|
|
<v-window-item value="management">
|
|
<ArtistManagementTab :overview="store.overview" />
|
|
</v-window-item>
|
|
</v-window>
|
|
</v-container>
|
|
</template>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed, watch } from 'vue'
|
|
import { useRoute } from 'vue-router'
|
|
|
|
import { useArtistStore } from '../stores/artist.js'
|
|
import ArtistHeader from '../components/artist/ArtistHeader.vue'
|
|
import ArtistPostsTab from '../components/artist/ArtistPostsTab.vue'
|
|
import ArtistGalleryTab from '../components/artist/ArtistGalleryTab.vue'
|
|
import ArtistManagementTab from '../components/artist/ArtistManagementTab.vue'
|
|
import { useTabQuery } from '../composables/useTabQuery.js'
|
|
|
|
const VALID_TABS = ['posts', 'gallery', 'management']
|
|
|
|
const route = useRoute()
|
|
const store = useArtistStore()
|
|
|
|
const slug = computed(() => route.params.slug)
|
|
const { tab, resolve } = useTabQuery(
|
|
VALID_TABS,
|
|
() => ((store.postCount ?? 0) > 0 ? 'posts' : 'gallery'),
|
|
)
|
|
|
|
watch(slug, async (s) => {
|
|
if (!s) return
|
|
await store.load(s)
|
|
document.title = store.overview
|
|
? `${store.overview.name} — FabledCurator`
|
|
: 'FabledCurator'
|
|
tab.value = resolve()
|
|
}, { immediate: true })
|
|
</script>
|
|
|
|
<style scoped>
|
|
.fc-artist__loading {
|
|
display: flex; justify-content: center; padding: 64px 0;
|
|
}
|
|
</style>
|