Commit ace40e84 authored by Kasper Seweryn's avatar Kasper Seweryn 🥞
Browse files

Migrate Albums and move pagination component

parent eeec65cf
Pipeline #20645 passed with stage
in 20 seconds
......@@ -77,7 +77,7 @@
<script>
import PodcastRow from '~/components/audio/podcast/Row.vue'
import TrackMobileRow from '~/components/audio/track/MobileRow.vue'
import Pagination from '~/components/Pagination.vue'
import Pagination from '~/components/vui/Pagination.vue'
export default {
components: {
......
......@@ -158,7 +158,7 @@ import { clone, uniqBy } from 'lodash-es'
import axios from 'axios'
import TrackRow from '~/components/audio/track/Row.vue'
import TrackMobileRow from '~/components/audio/track/MobileRow.vue'
import Pagination from '~/components/Pagination.vue'
import Pagination from '~/components/vui/Pagination.vue'
export default {
components: {
......
......@@ -162,7 +162,7 @@ const getAttachmentUrl = (uuid: string) => {
<button
v-if="value"
class="ui basic tiny button"
@click.stop.prevent="remove(value)"
@click.stop.prevent="remove(value as string)"
>
<translate translate-context="Content/Radio/Button.Label/Verb">
Remove
......
......@@ -2,7 +2,7 @@
import axios from 'axios'
import $ from 'jquery'
import RadioButton from '~/components/radios/Button.vue'
import Pagination from '~/components/Pagination.vue'
import Pagination from '~/components/vui/Pagination.vue'
import { checkRedirectToLogin } from '~/utils'
import TrackTable from '~/components/audio/track/Table.vue'
import useLogger from '~/composables/useLogger'
......@@ -17,7 +17,7 @@ import { OrderingField, RouteWithPreferences } from '~/store/ui'
interface Props {
orderingConfigName: RouteWithPreferences | null
defaultPage?: number,
defaultPage?: number
defaultPaginateBy?: number
}
......@@ -54,6 +54,9 @@ const updateQueryString = () => router.replace({
}
})
watch(page, updateQueryString)
onOrderingUpdate(updateQueryString)
const results = reactive<Track[]>([])
const nextLink = ref()
const previousLink = ref()
......@@ -92,8 +95,6 @@ const fetchFavorites = async () => {
}
}
watch(page, updateQueryString)
onOrderingUpdate(updateQueryString)
onBeforeRouteUpdate(fetchFavorites)
fetchFavorites()
......@@ -107,37 +108,59 @@ const labels = computed(() => ({
</script>
<template>
<main v-title="labels.title" class="main pusher">
<main
v-title="labels.title"
class="main pusher"
>
<section class="ui vertical center aligned stripe segment">
<div :class="['ui', { 'active': isLoading }, 'inverted', 'dimmer']">
<div class="ui text loader">
<translate translate-context="Content/Favorites/Message">Loading your favorites…</translate>
<translate translate-context="Content/Favorites/Message">
Loading your favorites…
</translate>
</div>
</div>
<h2 v-if="results" class="ui center aligned icon header">
<h2
v-if="results"
class="ui center aligned icon header"
>
<i class="circular inverted heart pink icon" />
<translate
translate-plural="%{ count } favorites"
:translate-n="$store.state.favorites.count"
:translate-params="{ count }"
translate-context="Content/Favorites/Title"
>%{ count } favorite</translate>
>
%{ count } favorite
</translate>
</h2>
<radio-button v-if="$store.state.favorites.count > 0" type="favorites" />
<radio-button
v-if="$store.state.favorites.count > 0"
type="favorites"
/>
</section>
<section v-if="$store.state.favorites.count > 0" class="ui vertical stripe segment">
<section
v-if="$store.state.favorites.count > 0"
class="ui vertical stripe segment"
>
<div :class="['ui', { 'loading': isLoading }, 'form']">
<div class="fields">
<div class="field">
<label for="favorites-ordering">
<translate translate-context="Content/Search/Dropdown.Label/Noun">Ordering</translate>
</label>
<select id="favorites-ordering" v-model="ordering" class="ui dropdown">
<select
id="favorites-ordering"
v-model="ordering"
class="ui dropdown"
>
<option
v-for="option in orderingOptions"
:key="option[0]"
:value="option[0]"
>{{ sharedLabels.filters[option[1]] }}</option>
>
{{ sharedLabels.filters[option[1]] }}
</option>
</select>
</div>
<div class="field">
......@@ -150,10 +173,14 @@ const labels = computed(() => ({
class="ui dropdown"
>
<option value="+">
<translate translate-context="Content/Search/Dropdown">Ascending</translate>
<translate translate-context="Content/Search/Dropdown">
Ascending
</translate>
</option>
<option value="-">
<translate translate-context="Content/Search/Dropdown">Descending</translate>
<translate translate-context="Content/Search/Dropdown">
Descending
</translate>
</option>
</select>
</div>
......@@ -161,15 +188,30 @@ const labels = computed(() => ({
<label for="favorites-results">
<translate translate-context="Content/Search/Dropdown.Label/Noun">Results per page</translate>
</label>
<select id="favorites-results" v-model="paginateBy" class="ui dropdown">
<option :value="12">12</option>
<option :value="25">25</option>
<option :value="50">50</option>
<select
id="favorites-results"
v-model="paginateBy"
class="ui dropdown"
>
<option :value="12">
12
</option>
<option :value="25">
25
</option>
<option :value="50">
50
</option>
</select>
</div>
</div>
</div>
<track-table v-if="results" :show-artist="true" :show-album="true" :tracks="results" />
<track-table
v-if="results"
:show-artist="true"
:show-album="true"
:tracks="results"
/>
<div class="ui center aligned basic segment">
<pagination
v-if="results && count > paginateBy"
......@@ -179,16 +221,26 @@ const labels = computed(() => ({
/>
</div>
</section>
<div v-else class="ui placeholder segment">
<div
v-else
class="ui placeholder segment"
>
<div class="ui icon header">
<i class="broken heart icon" />
<translate
translate-context="Content/Home/Placeholder"
>No tracks have been added to your favorites yet</translate>
>
No tracks have been added to your favorites yet
</translate>
</div>
<router-link :to="'/library'" class="ui success labeled icon button">
<router-link
:to="'/library'"
class="ui success labeled icon button"
>
<i class="headphones icon" />
<translate translate-context="Content/*/Verb">Browse the library</translate>
<translate translate-context="Content/*/Verb">
Browse the library
</translate>
</router-link>
</div>
</main>
......
<script setup lang="ts">
import qs from 'qs'
import axios from 'axios'
import $ from 'jquery'
import { onBeforeRouteUpdate, useRouter } from 'vue-router'
import { computed, onMounted, reactive, ref, watch } from 'vue'
import { useGettext } from 'vue3-gettext'
import { OrderingField, RouteWithPreferences } from '~/store/ui'
import AlbumCard from '~/components/audio/album/Card.vue'
import Pagination from '~/components/vui/Pagination.vue'
import TagsSelector from '~/components/library/TagsSelector.vue'
import useLogger from '~/composables/useLogger'
import useSharedLabels from '~/composables/locale/useSharedLabels'
import useOrdering from '~/composables/useOrdering'
import { useStore } from '~/store'
interface Props {
orderingConfigName: RouteWithPreferences | null
defaultPage?: number
defaultPaginateBy?: number
defaultQuery?: string
defaultTags?: string[]
scope?: string
}
const props = withDefaults(defineProps<Props>(), {
defaultPage: 1,
defaultPaginateBy: 1,
defaultQuery: '',
defaultTags: () => [],
scope: 'all'
})
// TODO (wvffle): Make sure everything is it's own type
const page = ref(+props.defaultPage)
type ResponseType = { count: number, results: any[] }
const result = ref<null | ResponseType>(null)
const query = ref('')
const tags = reactive(props.defaultTags.slice())
const orderingOptions: [OrderingField, keyof typeof sharedLabels.filters][] = [
['creation_date', 'creation_date'],
['title', 'album_title'],
['release_date', 'release_date']
]
const logger = useLogger()
const sharedLabels = useSharedLabels()
const { onOrderingUpdate, orderingString, paginateBy, ordering, orderingDirection } = useOrdering(props.orderingConfigName)
const router = useRouter()
const updateQueryString = () => router.replace({
query: {
query: query.value,
page: page.value,
tag: tags,
paginateBy: paginateBy.value,
ordering: orderingString.value
}
})
const search = () => {
page.value = 1
updateQueryString()
}
watch(page, updateQueryString)
onOrderingUpdate(updateQueryString)
const isLoading = ref(false)
const fetchData = async () => {
isLoading.value = true
const params = {
scope: props.scope,
page: page.value,
page_size: paginateBy.value,
q: query.value,
ordering: orderingString.value,
playable: 'true',
tag: tags,
include_channels: 'true',
content_category: 'music'
}
logger.time('Fetching albums')
try {
const response = await axios.get('albums/', {
params,
paramsSerializer: function (params) {
return qs.stringify(params, { indices: false })
}
})
result.value = response.data
} catch (error) {
// TODO (wvffle): Handle error
result.value = null
} finally {
logger.timeEnd('Fetching albums')
isLoading.value = false
}
}
const store = useStore()
watch(store.state.moderation.lastUpdate, fetchData)
onBeforeRouteUpdate(fetchData)
fetchData()
// @ts-expect-error semantic ui
onMounted(() => $('.ui.dropdown').dropdown())
const { $pgettext } = useGettext()
const labels = computed(() => ({
searchPlaceholder: $pgettext('Content/Search/Input.Placeholder', 'Enter album title…'),
title: $pgettext('*/*/*', 'Albums')
}))
</script>
<template>
<main v-title="labels.title">
<section class="ui vertical stripe segment">
......@@ -8,7 +129,7 @@
</h2>
<form
:class="['ui', {'loading': isLoading}, 'form']"
@submit.prevent="updatePage();updateQueryString();fetchData()"
@submit.prevent="search"
>
<div class="fields">
<div class="field">
......@@ -78,13 +199,13 @@
v-model="paginateBy"
class="ui dropdown"
>
<option :value="parseInt(12)">
<option :value="12">
12
</option>
<option :value="parseInt(25)">
<option :value="25">
25
</option>
<option :value="parseInt(50)">
<option :value="50">
50
</option>
</select>
......@@ -136,137 +257,11 @@
<div class="ui center aligned basic segment">
<pagination
v-if="result && result.count > paginateBy"
:current="page"
v-model:current="page"
:paginate-by="paginateBy"
:total="result.count"
@page-changed="selectPage"
/>
</div>
</section>
</main>
</template>
<script>
import qs from 'qs'
import axios from 'axios'
import $ from 'jquery'
import OrderingMixin from '~/components/mixins/Ordering.vue'
import PaginationMixin from '~/components/mixins/Pagination.vue'
import AlbumCard from '~/components/audio/album/Card.vue'
import Pagination from '~/components/Pagination.vue'
import TagsSelector from '~/components/library/TagsSelector.vue'
import useLogger from '~/composables/useLogger'
import useSharedLabels from '~/composables/locale/useSharedLabels'
const logger = useLogger()
const FETCH_URL = 'albums/'
export default {
components: {
AlbumCard,
Pagination,
TagsSelector
},
mixins: [OrderingMixin, PaginationMixin],
props: {
defaultQuery: { type: String, required: false, default: '' },
defaultTags: { type: Array, required: false, default: () => { return [] } },
scope: { type: String, required: false, default: 'all' }
},
setup () {
const sharedLabels = useSharedLabels()
return { sharedLabels }
},
data () {
return {
isLoading: true,
result: null,
page: parseInt(this.defaultPage),
query: this.defaultQuery,
tags: (this.defaultTags || []).filter((t) => { return t.length > 0 }),
orderingOptions: [['creation_date', 'creation_date'], ['title', 'album_title'], ['release_date', 'release_date']]
}
},
computed: {
labels () {
const searchPlaceholder = this.$pgettext('Content/Search/Input.Placeholder', 'Enter album title…')
const title = this.$pgettext('*/*/*', 'Albums')
return {
searchPlaceholder,
title
}
}
},
watch: {
page () {
this.updateQueryString()
this.fetchData()
},
'$store.state.moderation.lastUpdate': function () {
this.fetchData()
}
},
created () {
this.fetchData()
},
mounted () {
$('.ui.dropdown').dropdown()
},
methods: {
updateQueryString: function () {
history.pushState(
{},
null,
this.$route.path + '?' + new URLSearchParams(
{
query: this.query,
page: this.page,
tag: this.tags,
paginateBy: this.paginateBy,
ordering: this.getOrderingAsString()
}).toString()
)
},
fetchData: function () {
const self = this
this.isLoading = true
const url = FETCH_URL
const params = {
scope: this.scope,
page: this.page,
page_size: this.paginateBy,
q: this.query,
ordering: this.getOrderingAsString(),
playable: 'true',
tag: this.tags,
include_channels: 'true',
content_category: 'music'
}
logger.debug('Fetching albums')
axios.get(
url,
{
params: params,
paramsSerializer: function (params) {
return qs.stringify(params, { indices: false })
}
}
).then(response => {
self.result = response.data
self.isLoading = false
}, () => {
self.result = null
self.isLoading = false
})
},
selectPage: function (page) {
this.page = page
},
updatePage () {
this.page = this.defaultPage
}
}
}
</script>
......@@ -170,7 +170,7 @@ import $ from 'jquery'
import OrderingMixin from '~/components/mixins/Ordering.vue'
import PaginationMixin from '~/components/mixins/Pagination.vue'
import ArtistCard from '~/components/audio/artist/Card.vue'
import Pagination from '~/components/Pagination.vue'
import Pagination from '~/components/vui/Pagination.vue'
import TagsSelector from '~/components/library/TagsSelector.vue'
import useLogger from '~/composables/useLogger'
import useSharedLabels from '~/composables/locale/useSharedLabels'
......
......@@ -202,7 +202,7 @@ import $ from 'jquery'
import OrderingMixin from '~/components/mixins/Ordering.vue'
import PaginationMixin from '~/components/mixins/Pagination.vue'
import ArtistCard from '~/components/audio/artist/Card.vue'
import Pagination from '~/components/Pagination.vue'
import Pagination from '~/components/vui/Pagination.vue'
import TagsSelector from '~/components/library/TagsSelector.vue'
import Modal from '~/components/semantic/Modal.vue'
import RemoteSearchForm from '~/components/RemoteSearchForm.vue'
......
......@@ -180,7 +180,7 @@ import $ from 'jquery'
import OrderingMixin from '~/components/mixins/Ordering.vue'
import PaginationMixin from '~/components/mixins/Pagination.vue'
import RadioCard from '~/components/radios/Card.vue'
import Pagination from '~/components/Pagination.vue'
import Pagination from '~/components/vui/Pagination.vue'
import useLogger from '~/composables/useLogger'
import useSharedLabels from '~/composables/locale/useSharedLabels'
......
......@@ -203,7 +203,7 @@ import axios from 'axios'
import { merge } from 'lodash-es'
import time from '~/utils/time'
import { normalizeQuery, parseTokens } from '~/utils/search'
import Pagination from '~/components/Pagination.vue'
import Pagination from '~/components/vui/Pagination.vue'
import ActionTable from '~/components/common/ActionTable.vue'
import OrderingMixin from '~/components/mixins/Ordering.vue'
import SmartSearchMixin from '~/components/mixins/SmartSearch.vue'
......
......@@ -188,7 +188,7 @@ import axios from 'axios'
import { merge } from 'lodash-es'
import time from '~/utils/time'
import { normalizeQuery, parseTokens } from '~/utils/search'
import Pagination from '~/components/Pagination.vue'
import Pagination from '~/components/vui/Pagination.vue'
import ActionTable from '~/components/common/ActionTable.vue'
import OrderingMixin from '~/components/mixins/Ordering.vue'
import SmartSearchMixin from '~/components/mixins/SmartSearch.vue'
......
......@@ -187,7 +187,7 @@ import axios from 'axios'
import { merge } from 'lodash-es'
import time from '~/utils/time'
import { normalizeQuery, parseTokens } from '~/utils/search'
import Pagination from '~/components/Pagination.vue'
import Pagination from '~/components/vui/Pagination.vue'
import ActionTable from '~/components/common/ActionTable.vue'
import OrderingMixin from '~/components/mixins/Ordering.vue'
import SmartSearchMixin from '~/components/mixins/SmartSearch.vue'
......
......@@ -133,7 +133,7 @@
import axios from 'axios'
import { uniq, merge } from 'lodash-es'
import time from '~/utils/time'
import Pagination from '~/components/Pagination.vue'
import Pagination from '~/components/vui/Pagination.vue'
import OrderingMixin from '~/components/mixins/Ordering.vue'
import EditCard from '~/components/library/EditCard.vue'
import { normalizeQuery, parseTokens } from '~/utils/search'
......
......@@ -218,7 +218,7 @@ import axios from 'axios'
import { merge } from 'lodash-es'
import time from '~/utils/time'
import { normalizeQuery, parseTokens } from '~/utils/search'
import Pagination from '~/components/Pagination.vue'
import Pagination from '~/components/vui/Pagination.vue'
import ActionTable from '~/components/common/ActionTable.vue'
import OrderingMixin from '~/components/mixins/Ordering.vue'
import SmartSearchMixin from '~/components/mixins/SmartSearch.vue'
......
......@@ -149,7 +149,7 @@ import axios from 'axios'
import { merge } from 'lodash-es'
import time from '~/utils/time'
import { normalizeQuery, parseTokens } from '~/utils/search'
import Pagination from '~/components/Pagination.vue'
import Pagination from '~/components/vui/Pagination.vue'
import ActionTable from '~/components/common/ActionTable.vue'
import OrderingMixin from '~/components/mixins/Ordering.vue'
import SmartSearchMixin from '~/components/mixins/SmartSearch.vue'
......
......@@ -201,7 +201,7 @@ import axios from 'axios'
import { merge } from 'lodash-es'
import time from '~/utils/time'
import { normalizeQuery, parseTokens } from '~/utils/search'
import Pagination from '~/components/Pagination.vue'
import Pagination from '~/components/vui/Pagination.vue'