refactor(front): use section with title prop and pagination on all widgets
This commit is contained in:
ArneBo
parent
e09d0a20fa
commit
2e63cad388
|
|
@ -8,14 +8,15 @@ import { useI18n } from 'vue-i18n'
|
|||
|
||||
import axios from 'axios'
|
||||
|
||||
import AlbumCard from '~/components/album/Card.vue'
|
||||
import Button from '~/components/ui/Button.vue'
|
||||
import Layout from '~/components/ui/Layout.vue'
|
||||
import Spacer from '~/components/ui/Spacer.vue'
|
||||
import Loader from '~/components/ui/Loader.vue'
|
||||
|
||||
import usePage from '~/composables/navigation/usePage'
|
||||
import useErrorHandler from '~/composables/useErrorHandler'
|
||||
|
||||
import AlbumCard from '~/components/album/Card.vue'
|
||||
import Section from '~/components/ui/Section.vue'
|
||||
import Loader from '~/components/ui/Loader.vue'
|
||||
import Pagination from '~/components/ui/Pagination.vue'
|
||||
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
interface Props {
|
||||
|
|
@ -23,6 +24,7 @@ interface Props {
|
|||
showCount?: boolean
|
||||
search?: boolean
|
||||
limit?: number
|
||||
title?: string
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
|
|
@ -36,6 +38,7 @@ const store = useStore()
|
|||
const query = ref('')
|
||||
const albums = reactive([] as Album[])
|
||||
const count = ref(0)
|
||||
const page = usePage()
|
||||
const nextPage = ref()
|
||||
|
||||
const isLoading = ref(false)
|
||||
|
|
@ -46,6 +49,7 @@ const fetchData = async (url = 'albums/') => {
|
|||
const params = {
|
||||
q: query.value,
|
||||
...props.filters,
|
||||
page: page.value,
|
||||
page_size: props.limit
|
||||
}
|
||||
|
||||
|
|
@ -60,44 +64,39 @@ const fetchData = async (url = 'albums/') => {
|
|||
isLoading.value = false
|
||||
}
|
||||
|
||||
setTimeout(fetchData, 1000)
|
||||
|
||||
const performSearch = () => {
|
||||
albums.length = 0
|
||||
fetchData()
|
||||
}
|
||||
|
||||
watch(
|
||||
() => store.state.moderation.lastUpdate,
|
||||
[() => store.state.moderation.lastUpdate, page],
|
||||
() => fetchData(),
|
||||
{ immediate: true }
|
||||
)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="album-widget">
|
||||
<h2
|
||||
v-if="!!$slots.title"
|
||||
>
|
||||
<slot name="title" />
|
||||
<span
|
||||
v-if="showCount"
|
||||
class="ui tiny circular label"
|
||||
>{{ count }}</span>
|
||||
</h2>
|
||||
<slot />
|
||||
<Section
|
||||
:h2="title"
|
||||
align-left
|
||||
small-items
|
||||
>
|
||||
<inline-search-bar
|
||||
v-if="search"
|
||||
style="grid-column: 1 / -1;"
|
||||
v-model="query"
|
||||
@search="performSearch"
|
||||
/>
|
||||
<Loader v-if="isLoading" />
|
||||
<template v-if="!isLoading && albums.length > 0">
|
||||
<Layout flex>
|
||||
<album-card
|
||||
v-for="album in albums"
|
||||
:key="album.id"
|
||||
:album="album"
|
||||
/>
|
||||
</Layout>
|
||||
</template>
|
||||
<slot
|
||||
v-if="!isLoading && albums.length === 0"
|
||||
|
|
@ -106,17 +105,14 @@ watch(
|
|||
<empty-state
|
||||
:refresh="true"
|
||||
@refresh="fetchData"
|
||||
style="grid-column: 1 / -1;"
|
||||
/>
|
||||
</slot>
|
||||
<template v-if="nextPage">
|
||||
<Spacer />
|
||||
<Button
|
||||
v-if="nextPage"
|
||||
primary
|
||||
@click="fetchData(nextPage)"
|
||||
>
|
||||
{{ t('components.audio.album.Widget.button.more') }}
|
||||
</Button>
|
||||
</template>
|
||||
</div>
|
||||
<Pagination
|
||||
v-if="albums && count > props.limit"
|
||||
v-model:page="page"
|
||||
:pages="Math.ceil((count || 0) / props.limit)"
|
||||
style="grid-column: 1 / -1;"
|
||||
/>
|
||||
</Section>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,25 +1,26 @@
|
|||
<script setup lang="ts">
|
||||
import type { Artist } from '~/types'
|
||||
|
||||
import { reactive, ref, watch } from 'vue'
|
||||
import { reactive, ref, watch, onMounted } from 'vue'
|
||||
import { useStore } from '~/store'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
|
||||
import axios from 'axios'
|
||||
|
||||
import ArtistCard from '~/components/artist/Card.vue'
|
||||
import Button from '~/components/ui/Button.vue'
|
||||
|
||||
import useErrorHandler from '~/composables/useErrorHandler'
|
||||
import usePage from '~/composables/navigation/usePage'
|
||||
|
||||
import ArtistCard from '~/components/artist/Card.vue'
|
||||
import Section from '~/components/ui/Section.vue'
|
||||
import Pagination from '~/components/ui/Pagination.vue'
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
interface Props {
|
||||
filters: Record<string, string | boolean>
|
||||
search?: boolean
|
||||
header?: boolean
|
||||
limit?: number
|
||||
title?: string
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
|
|
@ -33,6 +34,7 @@ const store = useStore()
|
|||
const query = ref('')
|
||||
const artists = reactive([] as Artist[])
|
||||
const count = ref(0)
|
||||
const page = usePage()
|
||||
const nextPage = ref()
|
||||
|
||||
const isLoading = ref(false)
|
||||
|
|
@ -43,6 +45,7 @@ const fetchData = async (url = 'artists/') => {
|
|||
const params = {
|
||||
q: query.value,
|
||||
...props.filters,
|
||||
page: page.value,
|
||||
page_size: props.limit
|
||||
}
|
||||
|
||||
|
|
@ -57,46 +60,31 @@ const fetchData = async (url = 'artists/') => {
|
|||
isLoading.value = false
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
setTimeout(fetchData, 1000)
|
||||
})
|
||||
|
||||
const performSearch = () => {
|
||||
artists.length = 0
|
||||
fetchData()
|
||||
}
|
||||
|
||||
watch(
|
||||
() => store.state.moderation.lastUpdate,
|
||||
[() => store.state.moderation.lastUpdate, page],
|
||||
() => fetchData(),
|
||||
{ immediate: true }
|
||||
)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<h3
|
||||
v-if="header"
|
||||
class="ui header"
|
||||
>
|
||||
<slot name="title" />
|
||||
<span class="ui tiny circular label">{{ count }}</span>
|
||||
</h3>
|
||||
<inline-search-bar
|
||||
v-if="search"
|
||||
v-model="query"
|
||||
@search="performSearch"
|
||||
<Section
|
||||
align-left
|
||||
:h2="title"
|
||||
>
|
||||
<Loader
|
||||
v-if="isLoading"
|
||||
style="grid-column: 1 / -1;"
|
||||
/>
|
||||
<div class="ui hidden divider" />
|
||||
<div style="display:flex; flex-wrap:wrap; gap: 32px; margin-top:32px;">
|
||||
<div
|
||||
v-if="isLoading"
|
||||
class="ui inverted active dimmer"
|
||||
>
|
||||
<div class="ui loader" />
|
||||
</div>
|
||||
<artist-card
|
||||
v-for="artist in artists"
|
||||
:key="artist.id"
|
||||
:artist="artist"
|
||||
/>
|
||||
</div>
|
||||
<slot
|
||||
v-if="!isLoading && artists.length === 0"
|
||||
name="empty-state"
|
||||
|
|
@ -106,14 +94,21 @@ watch(
|
|||
@refresh="fetchData"
|
||||
/>
|
||||
</slot>
|
||||
<template v-if="nextPage">
|
||||
<div class="ui hidden divider" />
|
||||
<Button
|
||||
v-if="nextPage"
|
||||
@click="fetchData(nextPage)"
|
||||
>
|
||||
{{ t('components.audio.artist.Widget.button.more') }}
|
||||
</Button>
|
||||
</template>
|
||||
</div>
|
||||
<inline-search-bar
|
||||
v-if="!isLoading && search"
|
||||
v-model="query"
|
||||
@search="performSearch"
|
||||
style="grid-column: 1 / -1;"
|
||||
/>
|
||||
<artist-card
|
||||
v-for="artist in artists"
|
||||
:key="artist.id"
|
||||
:artist="artist"
|
||||
/>
|
||||
<Pagination
|
||||
v-if="artists && count > limit"
|
||||
v-model:page="page"
|
||||
:pages="Math.ceil((count || 0) / limit)"
|
||||
/>
|
||||
</Section>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -59,33 +59,39 @@ const fetchData = async (url = 'channels/') => {
|
|||
}
|
||||
|
||||
onMounted(() => {
|
||||
fetchData()
|
||||
setTimeout(fetchData, 1000)
|
||||
})
|
||||
|
||||
watch(() => [props.filters, page], () => {
|
||||
fetchData()
|
||||
}, { deep: true })
|
||||
watch([() => props.filters, page],
|
||||
() => fetchData(),
|
||||
{ deep: true }
|
||||
)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Section aling-left :h2="title" class="channel-widget">
|
||||
<slot />
|
||||
<Loader v-if="isLoading" />
|
||||
<Section
|
||||
align-left
|
||||
:h2="title"
|
||||
>
|
||||
<Loader v-if="isLoading" style="grid-column: 1 / -1;" />
|
||||
<template
|
||||
v-if="!isLoading && channels.length === 0"
|
||||
style="grid-column: 1 / -1;"
|
||||
>
|
||||
<empty-state
|
||||
:refresh="true"
|
||||
@refresh="fetchData('channels/')"
|
||||
/>
|
||||
</template>
|
||||
<channel-card
|
||||
v-for="object in channels"
|
||||
:key="object.uuid"
|
||||
:object="object"
|
||||
/>
|
||||
</Section>
|
||||
<template v-if="!isLoading && channels.length === 0">
|
||||
<empty-state
|
||||
:refresh="true"
|
||||
@refresh="fetchData('channels/')"
|
||||
<Pagination
|
||||
v-if="channels && count > limit"
|
||||
v-model:page="page"
|
||||
:pages="Math.ceil((count || 0) / limit)"
|
||||
/>
|
||||
</template>
|
||||
<Pagination
|
||||
v-if="channels && count > limit"
|
||||
v-model:page="page"
|
||||
:pages="Math.ceil((count || 0) / limit)"
|
||||
/>
|
||||
</Section>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -8,9 +8,9 @@ import { useI18n } from 'vue-i18n'
|
|||
import { getArtistCoverUrl } from '~/utils/utils'
|
||||
|
||||
import axios from 'axios'
|
||||
|
||||
import usePage from '~/composables/navigation/usePage'
|
||||
import useWebSocketHandler from '~/composables/useWebSocketHandler'
|
||||
import Button from '~/components/ui/Button.vue'
|
||||
|
||||
import PlayButton from '~/components/audio/PlayButton.vue'
|
||||
import TagsList from '~/components/tags/List.vue'
|
||||
import Section from '~/components/ui/Section.vue'
|
||||
|
|
@ -18,6 +18,7 @@ import Alert from '~/components/ui/Alert.vue'
|
|||
import Spacer from '~/components/ui/Spacer.vue'
|
||||
import Loader from '~/components/ui/Loader.vue'
|
||||
import Heading from '~/components/ui/Heading.vue'
|
||||
import Pagination from '~/components/ui/Pagination.vue'
|
||||
|
||||
import useErrorHandler from '~/composables/useErrorHandler'
|
||||
|
||||
|
|
@ -30,16 +31,15 @@ interface Props {
|
|||
filters: Record<string, string | boolean>
|
||||
url: string
|
||||
isActivity?: boolean
|
||||
showCount?: boolean
|
||||
limit?: number
|
||||
itemClasses?: string
|
||||
websocketHandlers?: string[]
|
||||
title?: string
|
||||
}
|
||||
|
||||
const emit = defineEmits<Events>()
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
isActivity: true,
|
||||
showCount: false,
|
||||
limit: 9,
|
||||
itemClasses: '',
|
||||
websocketHandlers: () => []
|
||||
|
|
@ -50,7 +50,7 @@ const { t } = useI18n()
|
|||
|
||||
const objects = reactive([] as Listening[])
|
||||
const count = ref(0)
|
||||
const nextPage = ref<string | null>(null)
|
||||
const page = usePage()
|
||||
|
||||
const isLoading = ref(false)
|
||||
|
||||
|
|
@ -59,12 +59,12 @@ const fetchData = async (url = props.url) => {
|
|||
|
||||
const params = {
|
||||
...clone(props.filters),
|
||||
page_size: props.limit
|
||||
page: page.value,
|
||||
page_size: props.limit ?? 9
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await axios.get(url, { params })
|
||||
nextPage.value = response.data.next
|
||||
count.value = response.data.count
|
||||
|
||||
const newObjects = !props.isActivity
|
||||
|
|
@ -80,11 +80,11 @@ const fetchData = async (url = props.url) => {
|
|||
}
|
||||
|
||||
onMounted(() => {
|
||||
fetchData()
|
||||
setTimeout(fetchData, 1000)
|
||||
})
|
||||
|
||||
watch(
|
||||
() => store.state.moderation.lastUpdate,
|
||||
[() => store.state.moderation.lastUpdate, page],
|
||||
() => fetchData(),
|
||||
{ immediate: true }
|
||||
)
|
||||
|
|
@ -113,18 +113,17 @@ watch(() => props.websocketHandlers.includes('Listen'), (to) => {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<!-- TODO: Use activity.vue -->
|
||||
<div class="track-widget">
|
||||
<h2 v-if="!!$slots.title">
|
||||
<slot name="title" />
|
||||
<span
|
||||
v-if="showCount"
|
||||
class="ui tiny circular label"
|
||||
>{{ count }}</span>
|
||||
</h2>
|
||||
<Spacer :size="8" />
|
||||
<Section
|
||||
:h2="title"
|
||||
medium-items
|
||||
align-left
|
||||
>
|
||||
<Loader v-if="isLoading"
|
||||
style="grid-column: 1 / -1;"
|
||||
/>
|
||||
<Alert
|
||||
v-if="!isLoading && count === 0"
|
||||
style="grid-column: 1 / -1;"
|
||||
blue
|
||||
align-items="center"
|
||||
>
|
||||
|
|
@ -133,103 +132,94 @@ watch(() => props.websocketHandlers.includes('Listen'), (to) => {
|
|||
{{ t('components.audio.track.Widget.empty.noResults') }}
|
||||
</h4>
|
||||
</Alert>
|
||||
<Section
|
||||
<!-- TODO: Use activity.vue -->
|
||||
<div class="funkwhale activity"
|
||||
v-if="count > 0"
|
||||
medium-items
|
||||
alignLeft
|
||||
>
|
||||
<div class="funkwhale activity"
|
||||
v-for="object in objects"
|
||||
:key="object.id"
|
||||
:class="['item', itemClasses]"
|
||||
>
|
||||
<div class="activity-image">
|
||||
<img
|
||||
v-if="object.track.album && object.track.album.cover"
|
||||
v-lazy="store.getters['instance/absoluteUrl'](object.track.album.cover.urls.medium_square_crop)"
|
||||
alt=""
|
||||
>
|
||||
<img
|
||||
v-else-if="object.track.cover"
|
||||
v-lazy="store.getters['instance/absoluteUrl'](object.track.cover.urls.medium_square_crop)"
|
||||
alt=""
|
||||
>
|
||||
<img
|
||||
v-else-if="object.track.artist_credit && object.track.artist_credit.length > 1"
|
||||
v-lazy="getArtistCoverUrl(object.track.artist_credit)"
|
||||
alt=""
|
||||
>
|
||||
<i
|
||||
v-else
|
||||
class="bi bi-vinyl-fill"
|
||||
/>
|
||||
<!-- TODO: Add Playbutton overlay -->
|
||||
</div>
|
||||
<div class="activity-content">
|
||||
<router-link
|
||||
class="funkwhale link artist"
|
||||
:to="{name: 'library.tracks.detail', params: {id: object.track.id}}"
|
||||
>
|
||||
<Heading :h3="object.track.title" title />
|
||||
</router-link>
|
||||
<Spacer :size="2"/>
|
||||
<div
|
||||
v-if="object.track.artist_credit"
|
||||
class="funkwhale link artist"
|
||||
>
|
||||
<span
|
||||
v-for="ac in object.track.artist_credit"
|
||||
:key="ac.artist.id"
|
||||
>
|
||||
<router-link
|
||||
class="discrete link"
|
||||
:to="{ name: 'library.artists.detail', params: { id: ac.artist.id } }"
|
||||
>
|
||||
{{ ac.credit }}
|
||||
</router-link>
|
||||
<span v-if="ac.joinphrase">{{ ac.joinphrase }}</span>
|
||||
</span>
|
||||
</div>
|
||||
<TagsList
|
||||
label-classes="tiny"
|
||||
:truncate-size="20"
|
||||
:limit="2"
|
||||
:show-more="false"
|
||||
:tags="object.track.tags"
|
||||
/>
|
||||
<Spacer :size="4"/>
|
||||
<div
|
||||
v-if="isActivity"
|
||||
class="extra"
|
||||
>
|
||||
<router-link
|
||||
class="funkwhale link user"
|
||||
:to="{name: 'profile.overview', params: {username: object.actor.name}}"
|
||||
>
|
||||
<span class="at symbol" />{{ object.actor.name }}
|
||||
</router-link>
|
||||
<span class="right floated"><human-date :date="object.creation_date" /></span>
|
||||
</div>
|
||||
</div>
|
||||
<play-button
|
||||
:account="object.actor"
|
||||
:dropdown-only="true"
|
||||
:track="object.track"
|
||||
square-small
|
||||
v-for="object in objects"
|
||||
:key="object.id"
|
||||
:class="['item', itemClasses]">
|
||||
<div class="activity-image">
|
||||
<img
|
||||
v-if="object.track.album && object.track.album.cover"
|
||||
v-lazy="store.getters['instance/absoluteUrl'](object.track.album.cover.urls.medium_square_crop)"
|
||||
alt=""
|
||||
>
|
||||
<img
|
||||
v-else-if="object.track.cover"
|
||||
v-lazy="store.getters['instance/absoluteUrl'](object.track.cover.urls.medium_square_crop)"
|
||||
alt=""
|
||||
>
|
||||
<img
|
||||
v-else-if="object.track.artist_credit && object.track.artist_credit.length > 1"
|
||||
v-lazy="getArtistCoverUrl(object.track.artist_credit)"
|
||||
alt=""
|
||||
>
|
||||
<i
|
||||
v-else
|
||||
class="bi bi-vinyl-fill"
|
||||
/>
|
||||
<!-- TODO: Add Playbutton overlay -->
|
||||
</div>
|
||||
</Section>
|
||||
<Loader v-if="isLoading" />
|
||||
<template v-if="nextPage">
|
||||
<Spacer />
|
||||
<Button
|
||||
primary
|
||||
@click="fetchData(nextPage as string)"
|
||||
>
|
||||
{{ t('components.audio.track.Widget.button.more') }}
|
||||
</Button>
|
||||
</template>
|
||||
</div>
|
||||
<div class="activity-content">
|
||||
<router-link
|
||||
class="funkwhale link artist"
|
||||
:to="{name: 'library.tracks.detail', params: {id: object.track.id}}"
|
||||
>
|
||||
<Heading :h3="object.track.title" title />
|
||||
</router-link>
|
||||
<Spacer :size="2"/>
|
||||
<div
|
||||
v-if="object.track.artist_credit"
|
||||
class="funkwhale link artist"
|
||||
>
|
||||
<span
|
||||
v-for="ac in object.track.artist_credit"
|
||||
:key="ac.artist.id"
|
||||
>
|
||||
<router-link
|
||||
class="discrete link"
|
||||
:to="{ name: 'library.artists.detail', params: { id: ac.artist.id } }"
|
||||
>
|
||||
{{ ac.credit }}
|
||||
</router-link>
|
||||
<span v-if="ac.joinphrase">{{ ac.joinphrase }}</span>
|
||||
</span>
|
||||
</div>
|
||||
<TagsList
|
||||
label-classes="tiny"
|
||||
:truncate-size="20"
|
||||
:limit="2"
|
||||
:show-more="false"
|
||||
:tags="object.track.tags"
|
||||
/>
|
||||
<Spacer :size="4"/>
|
||||
<div
|
||||
v-if="isActivity"
|
||||
class="extra"
|
||||
>
|
||||
<router-link
|
||||
class="funkwhale link user"
|
||||
:to="{name: 'profile.overview', params: {username: object.actor.name}}"
|
||||
>
|
||||
<span class="at symbol" />{{ object.actor.name }}
|
||||
</router-link>
|
||||
<span class="right floated"><human-date :date="object.creation_date" /></span>
|
||||
</div>
|
||||
</div>
|
||||
<play-button
|
||||
:account="object.actor"
|
||||
:dropdown-only="true"
|
||||
:track="object.track"
|
||||
square-small
|
||||
/>
|
||||
</div>
|
||||
<Pagination
|
||||
v-if="count > props.limit"
|
||||
v-model:page="page"
|
||||
:pages="Math.ceil((count || 0) / props.limit)"
|
||||
style="grid-column: 1 / -1;"
|
||||
/>
|
||||
</Section>
|
||||
</template>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -9,9 +9,8 @@ import axios from 'axios'
|
|||
|
||||
import LibraryCard from '~/views/content/remote/Card.vue'
|
||||
import Button from '~/components/ui/Button.vue'
|
||||
import Layout from '~/components/ui/Layout.vue'
|
||||
import Section from '~/components/ui/Section.vue'
|
||||
import Loader from '~/components/ui/Loader.vue'
|
||||
import Spacer from '~/components/ui/Spacer.vue'
|
||||
|
||||
import useErrorHandler from '~/composables/useErrorHandler'
|
||||
|
||||
|
|
@ -21,6 +20,7 @@ interface Events {
|
|||
|
||||
interface Props {
|
||||
url: string
|
||||
title?: string
|
||||
}
|
||||
|
||||
const { t } = useI18n()
|
||||
|
|
@ -53,7 +53,7 @@ const fetchData = async (url = props.url) => {
|
|||
}
|
||||
|
||||
onMounted(() => {
|
||||
fetchData()
|
||||
setTimeout(fetchData, 1000)
|
||||
})
|
||||
|
||||
watch(() => props.url, () => {
|
||||
|
|
@ -62,37 +62,34 @@ watch(() => props.url, () => {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<h3
|
||||
v-if="!!$slots.title"
|
||||
class="ui header"
|
||||
>
|
||||
<slot name="title" />
|
||||
</h3>
|
||||
<Section
|
||||
:h2="title"
|
||||
align-left
|
||||
small-items
|
||||
>
|
||||
<Loader v-if="isLoading" style="grid-column: 1 / -1;" />
|
||||
<p
|
||||
v-if="!isLoading && libraries.length > 0"
|
||||
style="grid-column: 1 / -1;"
|
||||
class="ui subtitle"
|
||||
>
|
||||
<slot />
|
||||
</p>
|
||||
<p
|
||||
v-if="!isLoading && libraries.length === 0"
|
||||
style="grid-column: 1 / -1;"
|
||||
class="ui subtitle"
|
||||
>
|
||||
{{ t('components.federation.LibraryWidget.empty.noMatch') }}
|
||||
</p>
|
||||
<div class="ui hidden divider" />
|
||||
<Layout flex>
|
||||
<Loader v-if="isLoading" />
|
||||
<library-card
|
||||
v-for="library in libraries"
|
||||
:key="library.uuid"
|
||||
:display-scan="false"
|
||||
:display-follow="store.state.auth.authenticated && library.actor.full_username != store.state.auth.fullUsername"
|
||||
:initial-library="library"
|
||||
:display-copy-fid="true"
|
||||
/>
|
||||
</Layout>
|
||||
<library-card
|
||||
v-for="library in libraries"
|
||||
:key="library.uuid"
|
||||
:display-scan="false"
|
||||
:display-follow="store.state.auth.authenticated && library.actor.full_username != store.state.auth.fullUsername"
|
||||
:initial-library="library"
|
||||
:display-copy-fid="true"
|
||||
/>
|
||||
<template v-if="nextPage">
|
||||
<Spacer />
|
||||
<Button
|
||||
|
|
@ -103,5 +100,5 @@ watch(() => props.url, () => {
|
|||
{{ t('components.federation.LibraryWidget.button.showMore') }}
|
||||
</Button>
|
||||
</template>
|
||||
</div>
|
||||
</Section>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -9,6 +9,9 @@ import Pagination from '~/components/vui/Pagination.vue'
|
|||
import { computed, ref } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
import Loader from '~/components/ui/Loader.vue'
|
||||
import Spacer from '~/components/ui/Spacer.vue'
|
||||
|
||||
interface Events {
|
||||
(e: 'libraries-loaded', libraries: Library[]): void
|
||||
}
|
||||
|
|
@ -57,14 +60,14 @@ const paginatedDiscs = computed(() => props.object.tracks.slice(props.paginateBy
|
|||
<div
|
||||
v-if="!isLoadingTracks"
|
||||
>
|
||||
<!-- <h2 class="ui header">
|
||||
<h2 class="ui header">
|
||||
<span v-if="isSerie">
|
||||
{{ t('components.library.AlbumDetail.header.episodes') }}
|
||||
</span>
|
||||
<span v-else>
|
||||
{{ t('components.library.AlbumDetail.header.tracks') }}
|
||||
</span>
|
||||
</h2> -->
|
||||
</h2>
|
||||
|
||||
<channel-entries
|
||||
v-if="artistCredit && artistCredit[0].artist.channel && isSerie"
|
||||
|
|
@ -73,6 +76,8 @@ const paginatedDiscs = computed(() => props.object.tracks.slice(props.paginateBy
|
|||
:filters="{channel: artistCredit[0].artist.channel.uuid, album: object.id, ordering: '-creation_date'}"
|
||||
/>
|
||||
|
||||
<Loader v-if="isLoadingTracks" />
|
||||
|
||||
<template v-else>
|
||||
<template v-if="discCount > 1">
|
||||
<div
|
||||
|
|
@ -125,12 +130,11 @@ const paginatedDiscs = computed(() => props.object.tracks.slice(props.paginateBy
|
|||
</template>
|
||||
|
||||
<template v-if="artistCredit && !artistCredit[0]?.artist.channel && !isSerie">
|
||||
<h2>
|
||||
{{ t('components.library.AlbumDetail.header.libraries') }}
|
||||
</h2>
|
||||
<Spacer />
|
||||
<library-widget
|
||||
:url="'albums/' + object.id + '/libraries/'"
|
||||
@loaded="emit('libraries-loaded', $event)"
|
||||
:title="t('components.library.AlbumDetail.header.libraries')"
|
||||
>
|
||||
{{ t('components.library.AlbumDetail.description.libraries') }}
|
||||
</library-widget>
|
||||
|
|
|
|||
|
|
@ -80,29 +80,22 @@ fetchData()
|
|||
v-if="scope === 'all'"
|
||||
:show-modification-date="true"
|
||||
:filters="{ordering: '-creation_date'}"
|
||||
:limit="12"
|
||||
:limit="8"
|
||||
:title="t('components.library.Home.header.newChannels')"
|
||||
>
|
||||
</channels-widget>
|
||||
/>
|
||||
|
||||
<track-widget
|
||||
:title="t('components.library.Home.header.recentlyListened')"
|
||||
:url="'history/listenings/'"
|
||||
:filters="{ scope, ordering: '-creation_date', ...qualityFilters }"
|
||||
:websocket-handlers="['Listen']"
|
||||
>
|
||||
<template #title>
|
||||
{{ t('components.library.Home.header.recentlyListened') }}
|
||||
</template>
|
||||
</track-widget>
|
||||
/>
|
||||
|
||||
<track-widget
|
||||
:title="t('components.library.Home.header.recentlyFavorited')"
|
||||
:url="'favorites/tracks/'"
|
||||
:filters="{scope: scope, ordering: '-creation_date'}"
|
||||
>
|
||||
<template #title>
|
||||
{{ t('components.library.Home.header.recentlyFavorited') }}
|
||||
</template>
|
||||
</track-widget>
|
||||
/>
|
||||
|
||||
<album-widget :filters="{scope: scope, playable: true, ordering: '-creation_date', ...qualityFilters}">
|
||||
<template #title>
|
||||
|
|
|
|||
|
|
@ -9,17 +9,20 @@ import { useI18n } from 'vue-i18n'
|
|||
import axios from 'axios'
|
||||
|
||||
import useErrorHandler from '~/composables/useErrorHandler'
|
||||
import usePage from '~/composables/navigation/usePage'
|
||||
|
||||
import PlaylistCard from '~/components/playlists/Card.vue'
|
||||
import Button from '~/components/ui/Button.vue'
|
||||
import Layout from '~/components/ui/Layout.vue'
|
||||
import Section from '~/components/ui/Section.vue'
|
||||
import Alert from '~/components/ui/Alert.vue'
|
||||
import Spacer from '~/components/ui/Spacer.vue'
|
||||
import Loader from '~/components/ui/Loader.vue'
|
||||
import Pagination from '~/components/ui/Pagination.vue'
|
||||
|
||||
interface Props {
|
||||
filters: Record<string, unknown>
|
||||
url: string
|
||||
title?: string
|
||||
}
|
||||
|
||||
const { t } = useI18n()
|
||||
|
|
@ -29,19 +32,25 @@ const props = defineProps<Props>()
|
|||
const store = useStore()
|
||||
|
||||
const objects = reactive([] as Playlist[])
|
||||
const isLoading = ref(false)
|
||||
const page = usePage()
|
||||
const nextPage = ref('')
|
||||
const count = ref(0)
|
||||
|
||||
const isLoading = ref(false)
|
||||
|
||||
const fetchData = async (url = props.url) => {
|
||||
isLoading.value = true
|
||||
|
||||
try {
|
||||
const params = {
|
||||
...props.filters,
|
||||
page_size: props.filters.limit ?? 3
|
||||
page: page.value,
|
||||
page_size: props.filters.limit ?? 4
|
||||
}
|
||||
|
||||
const response = await axios.get(url, { params })
|
||||
nextPage.value = response.data.next
|
||||
count.value = response.data.count
|
||||
objects.push(...response.data.results)
|
||||
} catch (error) {
|
||||
useErrorHandler(error as Error)
|
||||
|
|
@ -50,35 +59,24 @@ const fetchData = async (url = props.url) => {
|
|||
isLoading.value = false
|
||||
}
|
||||
|
||||
setTimeout(fetchData, 1000)
|
||||
|
||||
watch(
|
||||
() => store.state.moderation.lastUpdate,
|
||||
[() => store.state.moderation.lastUpdate, page],
|
||||
() => fetchData(),
|
||||
{ immediate: true }
|
||||
)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="playlist-widget">
|
||||
<h2 v-if="!!$slots.title">
|
||||
<slot name="title" />
|
||||
</h2>
|
||||
|
||||
<Section
|
||||
align-left
|
||||
:h2="title"
|
||||
>
|
||||
<Loader v-if="isLoading"/>
|
||||
|
||||
<Layout
|
||||
v-else-if="objects.length > 0"
|
||||
flex
|
||||
gap-16
|
||||
>
|
||||
<PlaylistCard
|
||||
v-for="playlist in objects"
|
||||
:key="playlist.id"
|
||||
:playlist="playlist"
|
||||
/>
|
||||
</Layout>
|
||||
|
||||
<Alert
|
||||
v-else
|
||||
v-if="!isLoading && objects.length === 0"
|
||||
style="grid-column: 1 / -1;"
|
||||
blue
|
||||
align-items="center"
|
||||
>
|
||||
|
|
@ -97,16 +95,15 @@ watch(
|
|||
{{ t('components.playlists.Widget.button.create') }}
|
||||
</Button>
|
||||
</Alert>
|
||||
|
||||
<template v-if="nextPage">
|
||||
<Spacer />
|
||||
<Button
|
||||
v-if="nextPage"
|
||||
primary
|
||||
@click="fetchData(nextPage)"
|
||||
>
|
||||
{{ t('components.playlists.Widget.button.more') }}
|
||||
</Button>
|
||||
</template>
|
||||
</div>
|
||||
<PlaylistCard
|
||||
v-for="playlist in objects"
|
||||
:key="playlist.id"
|
||||
:playlist="playlist"
|
||||
/>
|
||||
</Section>
|
||||
<Pagination
|
||||
v-if="objects && count > props.filters.limit"
|
||||
v-model:page="page"
|
||||
:pages="Math.ceil((count || 0) / props.filters.limit)"
|
||||
/>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@ import TrackWidget from '~/components/audio/track/Widget.vue'
|
|||
import AlbumWidget from '~/components/album/Widget.vue'
|
||||
import RadioButton from '~/components/radios/Button.vue'
|
||||
import Layout from '~/components/ui/Layout.vue'
|
||||
import Header from '~/components/ui/Header.vue'
|
||||
|
||||
interface Props {
|
||||
object?: Actor
|
||||
|
|
@ -26,47 +27,45 @@ const { t } = useI18n()
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<Layout stack>
|
||||
<radio-button
|
||||
v-if="recentActivity > 0"
|
||||
class="right floated"
|
||||
type="account"
|
||||
:object?-id="{username: object?.preferred_username, fullUsername: object?.full_username}"
|
||||
:client-only="true"
|
||||
/>
|
||||
<Layout stack gap-64>
|
||||
<Header
|
||||
align-left
|
||||
medium-items
|
||||
:h1="t('views.auth.ProfileBase.link.overview')"
|
||||
>
|
||||
<template #action>
|
||||
<radio-button
|
||||
v-if="recentActivity > 0"
|
||||
class="right floated"
|
||||
type="account"
|
||||
:object-id="{username: object?.preferred_username, fullUsername: object?.full_username}"
|
||||
:client-only="true"
|
||||
/>
|
||||
</template>
|
||||
</Header>
|
||||
|
||||
<track-widget
|
||||
:url="'history/listenings/'"
|
||||
:filters="{ scope: `actor:${object?.full_username}`, ordering: '-creation_date', ...qualityFilters}"
|
||||
:websocket-handlers="['Listen']"
|
||||
@count="recentActivity = $event"
|
||||
>
|
||||
<template #title>
|
||||
{{ t('components.library.Home.header.recentlyListened') }}
|
||||
</template>
|
||||
</track-widget>
|
||||
|
||||
:title="t('components.library.Home.header.recentlyListened')"
|
||||
/>
|
||||
<track-widget
|
||||
:url="'favorites/tracks/'"
|
||||
:filters="{scope: 'actor:${object?.full_username}', ordering: '-creation_date'}"
|
||||
>
|
||||
<template #title>
|
||||
{{ t('components.library.Home.header.recentlyFavorited') }}
|
||||
</template>
|
||||
</track-widget>
|
||||
:filters="{scope: `actor:${object?.full_username}`, ordering: '-creation_date'}"
|
||||
:title="t('components.library.Home.header.recentlyFavorited')"
|
||||
/>
|
||||
|
||||
<playlist-widget
|
||||
:url="'playlists/'"
|
||||
:filters="{scope: `actor:${object?.full_username}`, playable: true, ordering: '-modification_date'}"
|
||||
>
|
||||
<template #title>
|
||||
{{ t('views.auth.ProfileActivity.header.playlists') }}
|
||||
</template>
|
||||
</playlist-widget>
|
||||
:title="t('views.auth.ProfileActivity.header.playlists')"
|
||||
/>
|
||||
|
||||
<album-widget :filters="{scope: `actor:${object?.full_username}`, playable: true, ordering: '-creation_date', ...qualityFilters}">
|
||||
<template #title>
|
||||
{{ t('components.library.Home.header.recentlyAdded') }}
|
||||
</template>
|
||||
</album-widget>
|
||||
<album-widget
|
||||
:filters="{scope: `actor:${object?.full_username}`, playable: true, ordering: '-creation_date', ...qualityFilters}"
|
||||
:title="t('components.library.Home.header.recentlyAdded')"
|
||||
/>
|
||||
</Layout>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -129,7 +129,6 @@ const recentActivity = ref(0)
|
|||
</Layout>
|
||||
<Tabs>
|
||||
<Tab :title="t('views.auth.ProfileBase.link.overview')" :to="{name: 'profile.overview', params: routerParams}">
|
||||
<h2>{{ t('views.auth.ProfileBase.link.overview') }}</h2>
|
||||
<router-view
|
||||
:object="object"
|
||||
@updated="fetchData"
|
||||
|
|
|
|||
Loading…
Reference in New Issue