kopia lustrzana https://dev.funkwhale.audio/funkwhale/funkwhale
Add useSmartSearch composable
wvffle
Georg Krause
rodzic
8cf3500842
commit
344f1af058
|
|
@ -7,16 +7,15 @@ import { checkRedirectToLogin } from '~/utils'
|
|||
import TrackTable from '~/components/audio/track/Table.vue'
|
||||
import useLogger from '~/composables/useLogger'
|
||||
import useSharedLabels from '~/composables/locale/useSharedLabels'
|
||||
import useOrdering from '~/composables/useOrdering'
|
||||
import useOrdering, { OrderingProps } from '~/composables/useOrdering'
|
||||
import { onBeforeRouteUpdate, useRouter } from 'vue-router'
|
||||
import { computed, onMounted, reactive, ref, watch } from 'vue'
|
||||
import { useStore } from '~/store'
|
||||
import { Track } from '~/types'
|
||||
import { useGettext } from 'vue3-gettext'
|
||||
import { OrderingField, RouteWithPreferences } from '~/store/ui'
|
||||
import { OrderingField } from '~/store/ui'
|
||||
|
||||
interface Props {
|
||||
orderingConfigName: RouteWithPreferences | null
|
||||
interface Props extends OrderingProps {
|
||||
defaultPage?: number
|
||||
defaultPaginateBy?: number
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,18 +5,17 @@ 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 { OrderingField } 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 useOrdering, { OrderingProps } from '~/composables/useOrdering'
|
||||
import { useStore } from '~/store'
|
||||
|
||||
interface Props {
|
||||
orderingConfigName: RouteWithPreferences | null
|
||||
interface Props extends OrderingProps {
|
||||
defaultPage?: number
|
||||
defaultPaginateBy?: number
|
||||
defaultQuery?: string
|
||||
|
|
@ -61,11 +60,6 @@ const updateQueryString = () => router.replace({
|
|||
}
|
||||
})
|
||||
|
||||
const search = () => {
|
||||
page.value = props.defaultPage
|
||||
updateQueryString()
|
||||
}
|
||||
|
||||
watch(page, updateQueryString)
|
||||
onOrderingUpdate(updateQueryString)
|
||||
|
||||
|
|
@ -128,7 +122,7 @@ const labels = computed(() => ({
|
|||
</h2>
|
||||
<form
|
||||
:class="['ui', {'loading': isLoading}, 'form']"
|
||||
@submit.prevent="search"
|
||||
@submit.prevent="page = props.defaultPage"
|
||||
>
|
||||
<div class="fields">
|
||||
<div class="field">
|
||||
|
|
|
|||
|
|
@ -8,15 +8,14 @@ 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 { RouteWithPreferences } from '~/store/ui'
|
||||
import { OrderingField } from '~/store/ui'
|
||||
import { computed, reactive, ref, watch } from 'vue'
|
||||
import { useGettext } from 'vue3-gettext'
|
||||
import { useStore } from '~/store'
|
||||
import useOrdering from '~/composables/useOrdering'
|
||||
import useOrdering, { OrderingProps } from '~/composables/useOrdering'
|
||||
import { onBeforeRouteUpdate, useRouter } from 'vue-router'
|
||||
|
||||
interface Props {
|
||||
orderingConfigName: RouteWithPreferences | null
|
||||
interface Props extends OrderingProps {
|
||||
defaultPage?: number
|
||||
defaultPaginateBy?: number
|
||||
defaultQuery?: string
|
||||
|
|
@ -40,6 +39,11 @@ const query = ref(props.defaultQuery)
|
|||
const tags = reactive(props.defaultTags.slice())
|
||||
const excludeCompilation = ref(true)
|
||||
|
||||
const orderingOptions: [OrderingField, keyof typeof sharedLabels.filters][] = [
|
||||
['creation_date', 'creation_date'],
|
||||
['name', 'name']
|
||||
]
|
||||
|
||||
const logger = useLogger()
|
||||
const sharedLabels = useSharedLabels()
|
||||
|
||||
|
|
@ -58,11 +62,6 @@ const updateQueryString = () => router.replace({
|
|||
}
|
||||
})
|
||||
|
||||
const search = () => {
|
||||
page.value = props.defaultPage
|
||||
updateQueryString()
|
||||
}
|
||||
|
||||
watch(page, updateQueryString)
|
||||
onOrderingUpdate(updateQueryString)
|
||||
|
||||
|
|
@ -126,7 +125,7 @@ const labels = computed(() => ({
|
|||
</h2>
|
||||
<form
|
||||
:class="['ui', {'loading': isLoading}, 'form']"
|
||||
@submit.prevent="search"
|
||||
@submit.prevent="page = props.defaultPage"
|
||||
>
|
||||
<div class="fields">
|
||||
<div class="field">
|
||||
|
|
@ -196,13 +195,13 @@ const labels = computed(() => ({
|
|||
v-model="paginateBy"
|
||||
class="ui dropdown"
|
||||
>
|
||||
<option :value="parseInt(12)">
|
||||
<option :value="12">
|
||||
12
|
||||
</option>
|
||||
<option :value="parseInt(30)">
|
||||
<option :value="30">
|
||||
30
|
||||
</option>
|
||||
<option :value="parseInt(50)">
|
||||
<option :value="50">
|
||||
50
|
||||
</option>
|
||||
</select>
|
||||
|
|
|
|||
|
|
@ -3,21 +3,3 @@
|
|||
<router-view :key="$router.currentRoute.value.fullPath" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
computed: {
|
||||
showImports () {
|
||||
return (
|
||||
this.$store.state.auth.availablePermissions.upload ||
|
||||
this.$store.state.auth.availablePermissions.library
|
||||
)
|
||||
},
|
||||
labels () {
|
||||
return {
|
||||
secondaryMenu: this.$pgettext('Menu/*/Hidden text', 'Secondary menu')
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,3 +1,122 @@
|
|||
<script setup lang="ts">
|
||||
import qs from 'qs'
|
||||
import axios from 'axios'
|
||||
import $ from 'jquery'
|
||||
|
||||
import ArtistCard from '~/components/audio/artist/Card.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'
|
||||
import useLogger from '~/composables/useLogger'
|
||||
import useSharedLabels from '~/composables/locale/useSharedLabels'
|
||||
import { OrderingField } from '~/store/ui'
|
||||
import { computed, reactive, ref, watch } from 'vue'
|
||||
import useOrdering, { OrderingProps } from '~/composables/useOrdering'
|
||||
import { useGettext } from 'vue3-gettext'
|
||||
import { useStore } from '~/store'
|
||||
import { onBeforeRouteUpdate, useRouter } from 'vue-router'
|
||||
|
||||
interface Props extends OrderingProps {
|
||||
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(props.defaultQuery)
|
||||
const tags = reactive(props.defaultTags.slice())
|
||||
const showSubscribeModal = ref(false)
|
||||
|
||||
const orderingOptions: [OrderingField, keyof typeof sharedLabels.filters][] = [
|
||||
['creation_date', 'creation_date'],
|
||||
['name', 'name']
|
||||
]
|
||||
|
||||
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,
|
||||
content_category: 'podcast',
|
||||
include_channels: 'true'
|
||||
}
|
||||
})
|
||||
|
||||
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: 'podcast'
|
||||
}
|
||||
|
||||
logger.time('Fetching podcasts')
|
||||
try {
|
||||
const response = await axios.get('artists/', {
|
||||
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 podcasts')
|
||||
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', 'Search…'),
|
||||
title: $pgettext('*/*/*/Noun', 'Podcasts')
|
||||
}))
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<main v-title="labels.title">
|
||||
<section class="ui vertical stripe segment">
|
||||
|
|
@ -8,7 +127,7 @@
|
|||
</h2>
|
||||
<form
|
||||
:class="['ui', {'loading': isLoading}, 'form']"
|
||||
@submit.prevent="updatePage();updateQueryString();fetchData()"
|
||||
@submit.prevent="page = props.defaultPage"
|
||||
>
|
||||
<div class="fields">
|
||||
<div class="field">
|
||||
|
|
@ -78,13 +197,13 @@
|
|||
v-model="paginateBy"
|
||||
class="ui dropdown"
|
||||
>
|
||||
<option :value="parseInt(12)">
|
||||
<option :value="12">
|
||||
12
|
||||
</option>
|
||||
<option :value="parseInt(30)">
|
||||
<option :value="30">
|
||||
30
|
||||
</option>
|
||||
<option :value="parseInt(50)">
|
||||
<option :value="50">
|
||||
50
|
||||
</option>
|
||||
</select>
|
||||
|
|
@ -144,10 +263,9 @@
|
|||
<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>
|
||||
|
|
@ -193,139 +311,3 @@
|
|||
</modal>
|
||||
</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 ArtistCard from '~/components/audio/artist/Card.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'
|
||||
import useLogger from '~/composables/useLogger'
|
||||
import useSharedLabels from '~/composables/locale/useSharedLabels'
|
||||
|
||||
const logger = useLogger()
|
||||
|
||||
const FETCH_URL = 'artists/'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
ArtistCard,
|
||||
Pagination,
|
||||
TagsSelector,
|
||||
RemoteSearchForm,
|
||||
Modal
|
||||
},
|
||||
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'], ['name', 'name']],
|
||||
showSubscribeModal: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
labels () {
|
||||
const searchPlaceholder = this.$pgettext('Content/Search/Input.Placeholder', 'Search…')
|
||||
const title = this.$pgettext('*/*/*/Noun', 'Podcasts')
|
||||
return {
|
||||
searchPlaceholder,
|
||||
title
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
page () {
|
||||
this.updateQueryString()
|
||||
this.fetchData()
|
||||
},
|
||||
'$store.state.moderation.lastUpdate': function () {
|
||||
this.fetchData()
|
||||
},
|
||||
excludeCompilation () {
|
||||
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(),
|
||||
include_channels: true,
|
||||
content_category: 'podcast'
|
||||
}).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,
|
||||
has_albums: this.excludeCompilation,
|
||||
q: this.query,
|
||||
ordering: this.getOrderingAsString(),
|
||||
playable: 'true',
|
||||
tag: this.tags,
|
||||
include_channels: 'true',
|
||||
content_category: 'podcast'
|
||||
}
|
||||
logger.debug('Fetching artists')
|
||||
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>
|
||||
|
|
|
|||
|
|
@ -1,3 +1,110 @@
|
|||
<script setup lang="ts">
|
||||
import axios from 'axios'
|
||||
import $ from 'jquery'
|
||||
|
||||
import RadioCard from '~/components/radios/Card.vue'
|
||||
import Pagination from '~/components/vui/Pagination.vue'
|
||||
import useLogger from '~/composables/useLogger'
|
||||
import useSharedLabels from '~/composables/locale/useSharedLabels'
|
||||
import { OrderingField } from '~/store/ui'
|
||||
import { computed, ref, watch } from 'vue'
|
||||
import { useGettext } from 'vue3-gettext'
|
||||
import { useStore } from '~/store'
|
||||
import { onBeforeRouteUpdate, useRouter } from 'vue-router'
|
||||
import useOrdering, { OrderingProps } from '~/composables/useOrdering'
|
||||
|
||||
interface Props extends OrderingProps {
|
||||
defaultPage?: number
|
||||
defaultPaginateBy?: number
|
||||
|
||||
defaultQuery?: string
|
||||
scope?: string
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
defaultPage: 1,
|
||||
defaultPaginateBy: 1,
|
||||
defaultQuery: '',
|
||||
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(props.defaultQuery)
|
||||
|
||||
const orderingOptions: [OrderingField, keyof typeof sharedLabels.filters][] = [
|
||||
['creation_date', 'creation_date'],
|
||||
['name', 'name']
|
||||
]
|
||||
|
||||
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,
|
||||
paginateBy: paginateBy.value,
|
||||
ordering: orderingString.value
|
||||
}
|
||||
})
|
||||
|
||||
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,
|
||||
name__icontains: query.value,
|
||||
ordering: orderingString.value
|
||||
}
|
||||
|
||||
logger.time('Fetching radios')
|
||||
try {
|
||||
const response = await axios.get('radios/radios/', {
|
||||
params
|
||||
// TODO (wvffle): Check if params should be serialized. In other similar components (Podcasts, Artists) they are
|
||||
// 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 radios')
|
||||
isLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const store = useStore()
|
||||
const isAuthenticated = computed(() => store.state.auth.authenticated)
|
||||
const hasFavorites = computed(() => store.state.favorites.count > 0)
|
||||
|
||||
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 a radio name…'),
|
||||
title: $pgettext('*/*/*', 'Radios')
|
||||
}))
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<main v-title="labels.title">
|
||||
<section class="ui vertical stripe segment">
|
||||
|
|
@ -50,7 +157,7 @@
|
|||
<div class="ui hidden divider" />
|
||||
<form
|
||||
:class="['ui', {'loading': isLoading}, 'form']"
|
||||
@submit.prevent="updateQueryString();fetchData()"
|
||||
@submit.prevent="page = props.defaultPage"
|
||||
>
|
||||
<div class="fields">
|
||||
<div class="field">
|
||||
|
|
@ -114,13 +221,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>
|
||||
|
|
@ -163,116 +270,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 axios from 'axios'
|
||||
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/vui/Pagination.vue'
|
||||
import useLogger from '~/composables/useLogger'
|
||||
import useSharedLabels from '~/composables/locale/useSharedLabels'
|
||||
|
||||
const logger = useLogger()
|
||||
|
||||
const FETCH_URL = 'radios/radios/'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
RadioCard,
|
||||
Pagination
|
||||
},
|
||||
mixins: [OrderingMixin, PaginationMixin],
|
||||
props: {
|
||||
defaultQuery: { type: String, required: false, default: '' },
|
||||
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,
|
||||
orderingOptions: [['creation_date', 'creation_date'], ['name', 'name']]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
labels () {
|
||||
const searchPlaceholder = this.$pgettext('Content/Search/Input.Placeholder', 'Enter a radio name…')
|
||||
const title = this.$pgettext('*/*/*', 'Radios')
|
||||
return {
|
||||
searchPlaceholder,
|
||||
title
|
||||
}
|
||||
},
|
||||
isAuthenticated () {
|
||||
return this.$store.state.auth.authenticated
|
||||
},
|
||||
hasFavorites () {
|
||||
return this.$store.state.favorites.count > 0
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
page () {
|
||||
this.updateQueryString()
|
||||
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,
|
||||
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,
|
||||
name__icontains: this.query,
|
||||
ordering: this.getOrderingAsString()
|
||||
}
|
||||
logger.debug('Fetching radios')
|
||||
axios.get(url, { params: params }).then(response => {
|
||||
self.result = response.data
|
||||
self.isLoading = false
|
||||
})
|
||||
},
|
||||
selectPage: function (page) {
|
||||
this.page = page
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,16 +1,100 @@
|
|||
<script setup lang="ts">
|
||||
import axios from 'axios'
|
||||
import Pagination from '~/components/vui/Pagination.vue'
|
||||
import ActionTable from '~/components/common/ActionTable.vue'
|
||||
import useSharedLabels from '~/composables/locale/useSharedLabels'
|
||||
import { OrderingField } from '~/store/ui'
|
||||
import { computed, ref, watch } from 'vue'
|
||||
import { useGettext } from 'vue3-gettext'
|
||||
import useSmartSearch, { SmartSearchProps } from '~/composables/useSmartSearch'
|
||||
import useOrdering, { OrderingProps } from '~/composables/useOrdering'
|
||||
|
||||
interface Props extends SmartSearchProps, OrderingProps {
|
||||
// TODO (wvffle): find object type
|
||||
filters?: object
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
defaultQuery: '',
|
||||
updateUrl: false,
|
||||
filters: () => ({})
|
||||
})
|
||||
|
||||
// TODO (wvffle): Make sure everything is it's own type
|
||||
const page = ref(1)
|
||||
type ResponseType = { count: number, results: any[] }
|
||||
const result = ref<null | ResponseType>(null)
|
||||
|
||||
const { onSearch, query, addSearchToken, getTokenValue } = useSmartSearch(props.defaultQuery, props.updateUrl)
|
||||
const { onOrderingUpdate, orderingString, paginateBy, ordering, orderingDirection } = useOrdering(props.orderingConfigName)
|
||||
|
||||
const orderingOptions: [OrderingField, keyof typeof sharedLabels.filters][] = [
|
||||
['creation_date', 'creation_date'],
|
||||
['name', 'name']
|
||||
]
|
||||
|
||||
const actionFilters = computed(() => ({ q: query.value, ...props.filters }))
|
||||
const actions = () => []
|
||||
|
||||
const isLoading = ref(false)
|
||||
const fetchData = async () => {
|
||||
isLoading.value = true
|
||||
const params = {
|
||||
page: page.value,
|
||||
page_size: paginateBy.value,
|
||||
q: query.value,
|
||||
ordering: orderingString.value,
|
||||
...props.filters
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await axios.get('/manage/channels/', {
|
||||
params
|
||||
// TODO (wvffle): Check if params should be serialized. In other similar components (Podcasts, Artists) they are
|
||||
// paramsSerializer: function (params) {
|
||||
// return qs.stringify(params, { indices: false })
|
||||
// }
|
||||
})
|
||||
|
||||
result.value = response.data
|
||||
} catch (error) {
|
||||
// TODO (wvffle): Handle error
|
||||
result.value = null
|
||||
} finally {
|
||||
isLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
onSearch(() => {
|
||||
page.value = 1
|
||||
fetchData()
|
||||
})
|
||||
|
||||
watch(page, fetchData)
|
||||
onOrderingUpdate(fetchData)
|
||||
fetchData()
|
||||
|
||||
const sharedLabels = useSharedLabels()
|
||||
const { $pgettext } = useGettext()
|
||||
const labels = computed(() => ({
|
||||
searchPlaceholder: $pgettext('Content/Search/Input.Placeholder', 'Search by domain, name, account…'),
|
||||
openModeration: $pgettext('Content/Moderation/Verb', 'Open in moderation interface')
|
||||
}))
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div class="ui inline form">
|
||||
<div class="fields">
|
||||
<div class="ui six wide field">
|
||||
<label for="channel-search"><translate translate-context="Content/Search/Input.Label/Noun">Search</translate></label>
|
||||
<form @submit.prevent="search.query = $refs.search.value">
|
||||
<form @submit.prevent="query = $refs.search.value">
|
||||
<input
|
||||
id="channel-search"
|
||||
ref="search"
|
||||
name="search"
|
||||
type="text"
|
||||
:value="search.query"
|
||||
:value="query"
|
||||
:placeholder="labels.searchPlaceholder"
|
||||
>
|
||||
</form>
|
||||
|
|
@ -21,7 +105,7 @@
|
|||
id="channel-category"
|
||||
class="ui dropdown"
|
||||
:value="getTokenValue('category', '')"
|
||||
@change="addSearchToken('category', $event.target.value)"
|
||||
@change="addSearchToken('category', ($event.target as HTMLSelectElement).value)"
|
||||
>
|
||||
<option value="">
|
||||
<translate translate-context="Content/*/Dropdown">
|
||||
|
|
@ -179,11 +263,10 @@
|
|||
<div>
|
||||
<pagination
|
||||
v-if="result && result.count > paginateBy"
|
||||
v-model:current="page"
|
||||
:compact="true"
|
||||
:current="page"
|
||||
:paginate-by="paginateBy"
|
||||
:total="result.count"
|
||||
@page-changed="selectPage"
|
||||
/>
|
||||
|
||||
<span v-if="result && result.results.length > 0">
|
||||
|
|
@ -197,119 +280,3 @@
|
|||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from 'axios'
|
||||
import { merge } from 'lodash-es'
|
||||
import time from '~/utils/time'
|
||||
import { normalizeQuery, parseTokens } from '~/utils/search'
|
||||
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'
|
||||
import useSharedLabels from '~/composables/locale/useSharedLabels'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Pagination,
|
||||
ActionTable
|
||||
},
|
||||
mixins: [OrderingMixin, SmartSearchMixin],
|
||||
props: {
|
||||
filters: { type: Object, required: false, default: () => { return {} } }
|
||||
},
|
||||
setup () {
|
||||
const sharedLabels = useSharedLabels()
|
||||
return { sharedLabels }
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
time,
|
||||
isLoading: false,
|
||||
result: null,
|
||||
page: 1,
|
||||
search: {
|
||||
query: this.defaultQuery,
|
||||
tokens: parseTokens(normalizeQuery(this.defaultQuery))
|
||||
},
|
||||
orderingOptions: [
|
||||
['creation_date', 'creation_date'],
|
||||
['name', 'name']
|
||||
]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
labels () {
|
||||
return {
|
||||
searchPlaceholder: this.$pgettext('Content/Search/Input.Placeholder', 'Search by domain, name, account…'),
|
||||
openModeration: this.$pgettext('Content/Moderation/Verb', 'Open in moderation interface')
|
||||
}
|
||||
},
|
||||
actionFilters () {
|
||||
const currentFilters = {
|
||||
q: this.search.query
|
||||
}
|
||||
if (this.filters) {
|
||||
return merge(currentFilters, this.filters)
|
||||
} else {
|
||||
return currentFilters
|
||||
}
|
||||
},
|
||||
actions () {
|
||||
// let deleteLabel = this.$pgettext('*/*/*/Verb', 'Delete')
|
||||
// let confirmationMessage = this.$pgettext('Popup/*/Paragraph', 'The selected artist will be removed, as well as associated uploads, tracks, albums, favorites and listening history. This action is irreversible.')
|
||||
return [
|
||||
// {
|
||||
// name: 'delete',
|
||||
// label: deleteLabel,
|
||||
// confirmationMessage: confirmationMessage,
|
||||
// isDangerous: true,
|
||||
// allowAll: false,
|
||||
// confirmColor: 'danger',
|
||||
// },
|
||||
]
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
search (newValue) {
|
||||
this.page = 1
|
||||
this.fetchData()
|
||||
},
|
||||
page () {
|
||||
this.fetchData()
|
||||
},
|
||||
ordering () {
|
||||
this.fetchData()
|
||||
},
|
||||
orderingDirection () {
|
||||
this.fetchData()
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.fetchData()
|
||||
},
|
||||
methods: {
|
||||
fetchData () {
|
||||
const params = merge({
|
||||
page: this.page,
|
||||
page_size: this.paginateBy,
|
||||
q: this.search.query,
|
||||
ordering: this.getOrderingAsString()
|
||||
}, this.filters)
|
||||
const self = this
|
||||
self.isLoading = true
|
||||
self.checked = []
|
||||
axios.get('/manage/channels/', { params: params }).then((response) => {
|
||||
self.result = response.data
|
||||
self.isLoading = false
|
||||
}, error => {
|
||||
self.isLoading = false
|
||||
self.errors = error.backendErrors
|
||||
})
|
||||
},
|
||||
selectPage: function (page) {
|
||||
this.page = page
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,16 +1,114 @@
|
|||
<script setup lang="ts">
|
||||
import axios from 'axios'
|
||||
import Pagination from '~/components/vui/Pagination.vue'
|
||||
import ActionTable from '~/components/common/ActionTable.vue'
|
||||
import useSharedLabels from '~/composables/locale/useSharedLabels'
|
||||
import useSmartSearch, { SmartSearchProps } from '~/composables/useSmartSearch'
|
||||
import useOrdering, { OrderingProps } from '~/composables/useOrdering'
|
||||
import { OrderingField } from '~/store/ui'
|
||||
import { computed, ref, watch } from 'vue'
|
||||
import { useGettext } from 'vue3-gettext'
|
||||
|
||||
interface Props extends SmartSearchProps, OrderingProps {
|
||||
// TODO (wvffle): find object type
|
||||
filters?: object
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
defaultQuery: '',
|
||||
updateUrl: false,
|
||||
filters: () => ({})
|
||||
})
|
||||
|
||||
// TODO (wvffle): Make sure everything is it's own type
|
||||
const page = ref(1)
|
||||
type ResponseType = { count: number, results: any[] }
|
||||
const result = ref<null | ResponseType>(null)
|
||||
|
||||
const { onSearch, query, addSearchToken } = useSmartSearch(props.defaultQuery, props.updateUrl)
|
||||
const { onOrderingUpdate, orderingString, paginateBy, ordering, orderingDirection } = useOrdering(props.orderingConfigName)
|
||||
|
||||
const orderingOptions: [OrderingField, keyof typeof sharedLabels.filters][] = [
|
||||
['creation_date', 'creation_date'],
|
||||
['release_date', 'release_date'],
|
||||
['name', 'name']
|
||||
]
|
||||
|
||||
const actionFilters = computed(() => ({ q: query.value, ...props.filters }))
|
||||
const actions = () => {
|
||||
const deleteLabel = $pgettext('*/*/*/Verb', 'Delete')
|
||||
const confirmationMessage = $pgettext('Popup/*/Paragraph', 'The selected albums will be removed, as well as associated tracks, uploads, favorites and listening history. This action is irreversible.')
|
||||
return [
|
||||
{
|
||||
name: 'delete',
|
||||
label: deleteLabel,
|
||||
confirmationMessage: confirmationMessage,
|
||||
isDangerous: true,
|
||||
allowAll: false,
|
||||
confirmColor: 'danger'
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
const isLoading = ref(false)
|
||||
const fetchData = async () => {
|
||||
isLoading.value = true
|
||||
const params = {
|
||||
page: page.value,
|
||||
page_size: paginateBy.value,
|
||||
q: query.value,
|
||||
ordering: orderingString.value,
|
||||
...props.filters
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await axios.get('/manage/library/albums/', {
|
||||
params
|
||||
// TODO (wvffle): Check if params should be serialized. In other similar components (Podcasts, Artists) they are
|
||||
// paramsSerializer: function (params) {
|
||||
// return qs.stringify(params, { indices: false })
|
||||
// }
|
||||
})
|
||||
|
||||
result.value = response.data
|
||||
} catch (error) {
|
||||
// TODO (wvffle): Handle error
|
||||
result.value = null
|
||||
} finally {
|
||||
isLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
onSearch(() => {
|
||||
page.value = 1
|
||||
fetchData()
|
||||
})
|
||||
|
||||
watch(page, fetchData)
|
||||
onOrderingUpdate(fetchData)
|
||||
fetchData()
|
||||
|
||||
const sharedLabels = useSharedLabels()
|
||||
const { $pgettext } = useGettext()
|
||||
const labels = computed(() => ({
|
||||
searchPlaceholder: $pgettext('Content/Search/Input.Placeholder', 'Search by domain, title, artist, MusicBrainz ID…'),
|
||||
openModeration: $pgettext('Content/Moderation/Verb', 'Open in moderation interface')
|
||||
}))
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div class="ui inline form">
|
||||
<div class="fields">
|
||||
<div class="ui six wide field">
|
||||
<label for="albums-search"><translate translate-context="Content/Search/Input.Label/Noun">Search</translate></label>
|
||||
<form @submit.prevent="search.query = $refs.search.value">
|
||||
<form @submit.prevent="query = $refs.search.value">
|
||||
<input
|
||||
id="albums-search"
|
||||
ref="search"
|
||||
name="search"
|
||||
type="text"
|
||||
:value="search.query"
|
||||
:value="query"
|
||||
:placeholder="labels.searchPlaceholder"
|
||||
>
|
||||
</form>
|
||||
|
|
@ -164,11 +262,10 @@
|
|||
<div>
|
||||
<pagination
|
||||
v-if="result && result.count > paginateBy"
|
||||
v-model:current="page"
|
||||
:compact="true"
|
||||
:current="page"
|
||||
:paginate-by="paginateBy"
|
||||
:total="result.count"
|
||||
@page-changed="selectPage"
|
||||
/>
|
||||
|
||||
<span v-if="result && result.results.length > 0">
|
||||
|
|
@ -182,120 +279,3 @@
|
|||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from 'axios'
|
||||
import { merge } from 'lodash-es'
|
||||
import time from '~/utils/time'
|
||||
import { normalizeQuery, parseTokens } from '~/utils/search'
|
||||
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'
|
||||
import useSharedLabels from '~/composables/locale/useSharedLabels'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Pagination,
|
||||
ActionTable
|
||||
},
|
||||
mixins: [OrderingMixin, SmartSearchMixin],
|
||||
props: {
|
||||
filters: { type: Object, required: false, default: () => { return {} } }
|
||||
},
|
||||
setup () {
|
||||
const sharedLabels = useSharedLabels()
|
||||
return { sharedLabels }
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
time,
|
||||
isLoading: false,
|
||||
result: null,
|
||||
page: 1,
|
||||
search: {
|
||||
query: this.defaultQuery,
|
||||
tokens: parseTokens(normalizeQuery(this.defaultQuery))
|
||||
},
|
||||
orderingOptions: [
|
||||
['creation_date', 'creation_date'],
|
||||
['release_date', 'release_date'],
|
||||
['name', 'name']
|
||||
]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
labels () {
|
||||
return {
|
||||
searchPlaceholder: this.$pgettext('Content/Search/Input.Placeholder', 'Search by domain, title, artist, MusicBrainz ID…'),
|
||||
openModeration: this.$pgettext('Content/Moderation/Verb', 'Open in moderation interface')
|
||||
}
|
||||
},
|
||||
actionFilters () {
|
||||
const currentFilters = {
|
||||
q: this.search.query
|
||||
}
|
||||
if (this.filters) {
|
||||
return merge(currentFilters, this.filters)
|
||||
} else {
|
||||
return currentFilters
|
||||
}
|
||||
},
|
||||
actions () {
|
||||
const deleteLabel = this.$pgettext('*/*/*/Verb', 'Delete')
|
||||
const confirmationMessage = this.$pgettext('Popup/*/Paragraph', 'The selected albums will be removed, as well as associated tracks, uploads, favorites and listening history. This action is irreversible.')
|
||||
return [
|
||||
{
|
||||
name: 'delete',
|
||||
label: deleteLabel,
|
||||
confirmationMessage: confirmationMessage,
|
||||
isDangerous: true,
|
||||
allowAll: false,
|
||||
confirmColor: 'danger'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
search (newValue) {
|
||||
this.page = 1
|
||||
this.fetchData()
|
||||
},
|
||||
page () {
|
||||
this.fetchData()
|
||||
},
|
||||
ordering () {
|
||||
this.fetchData()
|
||||
},
|
||||
orderingDirection () {
|
||||
this.fetchData()
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.fetchData()
|
||||
},
|
||||
methods: {
|
||||
fetchData () {
|
||||
const params = merge({
|
||||
page: this.page,
|
||||
page_size: this.paginateBy,
|
||||
q: this.search.query,
|
||||
ordering: this.getOrderingAsString()
|
||||
}, this.filters)
|
||||
const self = this
|
||||
self.isLoading = true
|
||||
self.checked = []
|
||||
axios.get('/manage/library/albums/', { params: params }).then((response) => {
|
||||
self.result = response.data
|
||||
self.isLoading = false
|
||||
}, error => {
|
||||
self.isLoading = false
|
||||
self.errors = error.backendErrors
|
||||
})
|
||||
},
|
||||
selectPage: function (page) {
|
||||
this.page = page
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,16 +1,118 @@
|
|||
<script setup lang="ts">
|
||||
import axios from 'axios'
|
||||
import Pagination from '~/components/vui/Pagination.vue'
|
||||
import ActionTable from '~/components/common/ActionTable.vue'
|
||||
import useSharedLabels from '~/composables/locale/useSharedLabels'
|
||||
import { ref, computed, watch } from 'vue'
|
||||
import { useGettext } from 'vue3-gettext'
|
||||
import useOrdering, { OrderingProps } from '~/composables/useOrdering'
|
||||
import useSmartSearch, { SmartSearchProps } from '~/composables/useSmartSearch'
|
||||
import { OrderingField } from '~/store/ui'
|
||||
|
||||
interface Props extends SmartSearchProps, OrderingProps {
|
||||
// TODO (wvffle): find object type
|
||||
filters?: object
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
defaultQuery: '',
|
||||
updateUrl: false,
|
||||
filters: () => ({})
|
||||
})
|
||||
|
||||
// TODO (wvffle): Make sure everything is it's own type
|
||||
const page = ref(1)
|
||||
type ResponseType = { count: number, results: any[] }
|
||||
const result = ref<null | ResponseType>(null)
|
||||
|
||||
const { onSearch, query, addSearchToken, getTokenValue } = useSmartSearch(props.defaultQuery, props.updateUrl)
|
||||
const { onOrderingUpdate, orderingString, paginateBy, ordering, orderingDirection } = useOrdering(props.orderingConfigName)
|
||||
|
||||
const orderingOptions: [OrderingField, keyof typeof sharedLabels.filters][] = [
|
||||
['creation_date', 'creation_date'],
|
||||
['name', 'name']
|
||||
]
|
||||
|
||||
const actionFilters = computed(() => ({ q: query.value, ...props.filters }))
|
||||
const actions = () => {
|
||||
const deleteLabel = $pgettext('*/*/*/Verb', 'Delete')
|
||||
const confirmationMessage = $pgettext('Popup/*/Paragraph', 'The selected artist will be removed, as well as associated uploads, tracks, albums, favorites and listening history. This action is irreversible.')
|
||||
return [
|
||||
{
|
||||
name: 'delete',
|
||||
label: deleteLabel,
|
||||
confirmationMessage: confirmationMessage,
|
||||
isDangerous: true,
|
||||
allowAll: false,
|
||||
confirmColor: 'danger'
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
const isLoading = ref(false)
|
||||
const fetchData = async () => {
|
||||
isLoading.value = true
|
||||
const params = {
|
||||
page: page.value,
|
||||
page_size: paginateBy.value,
|
||||
q: query.value,
|
||||
ordering: orderingString.value,
|
||||
...props.filters
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await axios.get('/manage/library/artists/', {
|
||||
params
|
||||
// TODO (wvffle): Check if params should be serialized. In other similar components (Podcasts, Artists) they are
|
||||
// paramsSerializer: function (params) {
|
||||
// return qs.stringify(params, { indices: false })
|
||||
// }
|
||||
})
|
||||
|
||||
result.value = response.data
|
||||
} catch (error) {
|
||||
// TODO (wvffle): Handle error
|
||||
result.value = null
|
||||
} finally {
|
||||
isLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
onSearch(() => {
|
||||
page.value = 1
|
||||
fetchData()
|
||||
})
|
||||
|
||||
watch(page, fetchData)
|
||||
onOrderingUpdate(fetchData)
|
||||
fetchData()
|
||||
|
||||
const sharedLabels = useSharedLabels()
|
||||
const { $pgettext } = useGettext()
|
||||
const labels = computed(() => ({
|
||||
searchPlaceholder: $pgettext('Content/Search/Input.Placeholder', 'Search by domain, name, MusicBrainz ID…')
|
||||
}))
|
||||
|
||||
const getUrl = (artist: { channel?: number; id: number }) => {
|
||||
return artist.channel
|
||||
? { name: 'manage.channels.detail', params: { id: artist.channel } }
|
||||
: { name: 'manage.library.artists.detail', params: { id: artist.id } }
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div class="ui inline form">
|
||||
<div class="fields">
|
||||
<div class="ui six wide field">
|
||||
<label for="artists-serarch"><translate translate-context="Content/Search/Input.Label/Noun">Search</translate></label>
|
||||
<form @submit.prevent="search.query = $refs.search.value">
|
||||
<form @submit.prevent="query = $refs.search.value">
|
||||
<input
|
||||
id="artists-search"
|
||||
ref="search"
|
||||
name="search"
|
||||
type="text"
|
||||
:value="search.query"
|
||||
:value="query"
|
||||
:placeholder="labels.searchPlaceholder"
|
||||
>
|
||||
</form>
|
||||
|
|
@ -21,7 +123,7 @@
|
|||
id="artists-category"
|
||||
class="ui dropdown"
|
||||
:value="getTokenValue('category', '')"
|
||||
@change="addSearchToken('category', $event.target.value)"
|
||||
@change="addSearchToken('category', ($event.target as HTMLSelectElement).value)"
|
||||
>
|
||||
<option value="">
|
||||
<translate translate-context="Content/*/Dropdown">
|
||||
|
|
@ -163,11 +265,10 @@
|
|||
<div>
|
||||
<pagination
|
||||
v-if="result && result.count > paginateBy"
|
||||
v-model:current="page"
|
||||
:compact="true"
|
||||
:current="page"
|
||||
:paginate-by="paginateBy"
|
||||
:total="result.count"
|
||||
@page-changed="selectPage"
|
||||
/>
|
||||
|
||||
<span v-if="result && result.results.length > 0">
|
||||
|
|
@ -181,124 +282,3 @@
|
|||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from 'axios'
|
||||
import { merge } from 'lodash-es'
|
||||
import time from '~/utils/time'
|
||||
import { normalizeQuery, parseTokens } from '~/utils/search'
|
||||
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'
|
||||
import useSharedLabels from '~/composables/locale/useSharedLabels'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Pagination,
|
||||
ActionTable
|
||||
},
|
||||
mixins: [OrderingMixin, SmartSearchMixin],
|
||||
props: {
|
||||
filters: { type: Object, required: false, default: () => { return {} } }
|
||||
},
|
||||
setup () {
|
||||
const sharedLabels = useSharedLabels()
|
||||
return { sharedLabels }
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
time,
|
||||
isLoading: false,
|
||||
result: null,
|
||||
page: 1,
|
||||
search: {
|
||||
query: this.defaultQuery,
|
||||
tokens: parseTokens(normalizeQuery(this.defaultQuery))
|
||||
},
|
||||
orderingOptions: [
|
||||
['creation_date', 'creation_date'],
|
||||
['name', 'name']
|
||||
]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
labels () {
|
||||
return {
|
||||
searchPlaceholder: this.$pgettext('Content/Search/Input.Placeholder', 'Search by domain, name, MusicBrainz ID…')
|
||||
}
|
||||
},
|
||||
actionFilters () {
|
||||
const currentFilters = {
|
||||
q: this.search.query
|
||||
}
|
||||
if (this.filters) {
|
||||
return merge(currentFilters, this.filters)
|
||||
} else {
|
||||
return currentFilters
|
||||
}
|
||||
},
|
||||
actions () {
|
||||
const deleteLabel = this.$pgettext('*/*/*/Verb', 'Delete')
|
||||
const confirmationMessage = this.$pgettext('Popup/*/Paragraph', 'The selected artist will be removed, as well as associated uploads, tracks, albums, favorites and listening history. This action is irreversible.')
|
||||
return [
|
||||
{
|
||||
name: 'delete',
|
||||
label: deleteLabel,
|
||||
confirmationMessage: confirmationMessage,
|
||||
isDangerous: true,
|
||||
allowAll: false,
|
||||
confirmColor: 'danger'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
search (newValue) {
|
||||
this.page = 1
|
||||
this.fetchData()
|
||||
},
|
||||
page () {
|
||||
this.fetchData()
|
||||
},
|
||||
ordering () {
|
||||
this.fetchData()
|
||||
},
|
||||
orderingDirection () {
|
||||
this.fetchData()
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.fetchData()
|
||||
},
|
||||
methods: {
|
||||
getUrl (artist) {
|
||||
if (artist.channel) {
|
||||
return { name: 'manage.channels.detail', params: { id: artist.channel } }
|
||||
}
|
||||
return { name: 'manage.library.artists.detail', params: { id: artist.id } }
|
||||
},
|
||||
fetchData () {
|
||||
const params = merge({
|
||||
page: this.page,
|
||||
page_size: this.paginateBy,
|
||||
q: this.search.query,
|
||||
ordering: this.getOrderingAsString()
|
||||
}, this.filters)
|
||||
const self = this
|
||||
self.isLoading = true
|
||||
self.checked = []
|
||||
axios.get('/manage/library/artists/', { params: params }).then((response) => {
|
||||
self.result = response.data
|
||||
self.isLoading = false
|
||||
}, error => {
|
||||
self.isLoading = false
|
||||
self.errors = error.backendErrors
|
||||
})
|
||||
},
|
||||
selectPage: function (page) {
|
||||
this.page = page
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,3 +1,158 @@
|
|||
<script setup lang="ts">
|
||||
import axios from 'axios'
|
||||
import { uniq, merge } from 'lodash-es'
|
||||
import Pagination from '~/components/vui/Pagination.vue'
|
||||
import EditCard from '~/components/library/EditCard.vue'
|
||||
import { normalizeQuery, parseTokens } from '~/utils/search'
|
||||
|
||||
import useSharedLabels from '~/composables/locale/useSharedLabels'
|
||||
import { ref, reactive, watch } from 'vue'
|
||||
import useOrdering, { OrderingProps } from '~/composables/useOrdering'
|
||||
import useSmartSearch, { SmartSearchProps } from '~/composables/useSmartSearch'
|
||||
import { OrderingField } from '~/store/ui'
|
||||
import useEditConfigs from '~/composables/moderation/useEditConfigs'
|
||||
|
||||
interface Props extends SmartSearchProps, OrderingProps {
|
||||
// TODO (wvffle): find object type
|
||||
filters?: object
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
defaultQuery: '',
|
||||
updateUrl: false,
|
||||
filters: () => ({})
|
||||
})
|
||||
|
||||
const configs = useEditConfigs()
|
||||
|
||||
// TODO (wvffle): Make sure everything is it's own type
|
||||
const page = ref(1)
|
||||
type ResponseType = { count: number, results: { target?: { type: string, id: number } }[] }
|
||||
const result = ref<null | ResponseType>(null)
|
||||
|
||||
const { onSearch, query, addSearchToken, getTokenValue } = useSmartSearch(props.defaultQuery, props.updateUrl)
|
||||
const { onOrderingUpdate, orderingString, paginateBy, ordering, orderingDirection } = useOrdering(props.orderingConfigName)
|
||||
|
||||
const orderingOptions: [OrderingField, keyof typeof sharedLabels.filters][] = [
|
||||
['creation_date', 'creation_date'],
|
||||
['applied_date', 'applied_date']
|
||||
]
|
||||
|
||||
const targets = reactive({
|
||||
track: {}
|
||||
})
|
||||
|
||||
const fetchTargets = async () => {
|
||||
// we request target data via the API so we can display previous state
|
||||
// additionnal data next to the edit card
|
||||
const typesAndIds = {
|
||||
track: { url: 'tracks/', ids: [] as number[] }
|
||||
}
|
||||
|
||||
for (const res of result.value?.results ?? []) {
|
||||
const typeAndId = typesAndIds[result.target?.type as keyof typeof typesAndIds]
|
||||
typeAndId?.ids.push(result.target.id)
|
||||
}
|
||||
|
||||
for (const [key, config] of Object.entries(typesAndIds)) {
|
||||
if (config.ids.length === 0) {
|
||||
continue
|
||||
}
|
||||
|
||||
const response = await axios.get(config.url, {
|
||||
params: {
|
||||
id: uniq(config.ids),
|
||||
hidden: 'null'
|
||||
}
|
||||
}).catch(() => {
|
||||
// TODO (wvffle): Handle error
|
||||
})
|
||||
|
||||
for (const payload of response.data.results) {
|
||||
targets[key][payload.id] = {
|
||||
payload,
|
||||
currentState: configs[key].fields.reduce((state, field) => {
|
||||
state[field.id] = { value: field.getValue(payload) }
|
||||
return state
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const isLoading = ref(false)
|
||||
const fetchData = async () => {
|
||||
isLoading.value = true
|
||||
const params = {
|
||||
page: page.value,
|
||||
page_size: paginateBy.value,
|
||||
q: query.value,
|
||||
ordering: orderingString.value,
|
||||
...props.filters
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await axios.get('mutations/', {
|
||||
params
|
||||
// TODO (wvffle): Check if params should be serialized. In other similar components (Podcasts, Artists) they are
|
||||
// paramsSerializer: function (params) {
|
||||
// return qs.stringify(params, { indices: false })
|
||||
// }
|
||||
})
|
||||
|
||||
result.value = response.data
|
||||
fetchTargets()
|
||||
} catch (error) {
|
||||
// TODO (wvffle): Handle error
|
||||
result.value = null
|
||||
} finally {
|
||||
isLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
onSearch(() => {
|
||||
page.value = 1
|
||||
fetchData()
|
||||
})
|
||||
|
||||
watch(page, fetchData)
|
||||
onOrderingUpdate(fetchData)
|
||||
fetchData()
|
||||
|
||||
const sharedLabels = useSharedLabels()
|
||||
const { $pgettext } = useGettext()
|
||||
const labels = computed(() => ({
|
||||
searchPlaceholder: $pgettext('Content/Search/Input.Placeholder', 'Search by account, summary, domain…')
|
||||
}))
|
||||
export default {
|
||||
methods: {
|
||||
selectPage: function (page) {
|
||||
this.page = page
|
||||
},
|
||||
handle (type, id, value) {
|
||||
if (type === 'delete') {
|
||||
this.exclude.push(id)
|
||||
}
|
||||
|
||||
this.result.results.forEach((e) => {
|
||||
if (e.uuid === id) {
|
||||
e.is_approved = value
|
||||
}
|
||||
})
|
||||
},
|
||||
getCurrentState (target) {
|
||||
if (!target) {
|
||||
return {}
|
||||
}
|
||||
if (this.targets[target.type] && this.targets[target.type][String(target.id)]) {
|
||||
return this.targets[target.type][String(target.id)].currentState
|
||||
}
|
||||
return {}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="ui text container">
|
||||
<slot />
|
||||
|
|
@ -128,157 +283,3 @@
|
|||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from 'axios'
|
||||
import { uniq, merge } from 'lodash-es'
|
||||
import time from '~/utils/time'
|
||||
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'
|
||||
import SmartSearchMixin from '~/components/mixins/SmartSearch.vue'
|
||||
|
||||
import useEditConfigs from '~/composables/useEditConfigs'
|
||||
import useSharedLabels from '~/composables/locale/useSharedLabels'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Pagination,
|
||||
EditCard
|
||||
},
|
||||
mixins: [OrderingMixin, SmartSearchMixin],
|
||||
props: {
|
||||
filters: { type: Object, required: false, default: () => { return {} } }
|
||||
},
|
||||
setup () {
|
||||
const sharedLabels = useSharedLabels()
|
||||
const configs = useEditConfigs()
|
||||
return { sharedLabels, configs }
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
time,
|
||||
isLoading: false,
|
||||
result: null,
|
||||
page: 1,
|
||||
search: {
|
||||
query: this.defaultQuery,
|
||||
tokens: parseTokens(normalizeQuery(this.defaultQuery))
|
||||
},
|
||||
orderingOptions: [
|
||||
['creation_date', 'creation_date'],
|
||||
['applied_date', 'applied_date']
|
||||
],
|
||||
targets: {
|
||||
track: {}
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
labels () {
|
||||
return {
|
||||
searchPlaceholder: this.$pgettext('Content/Search/Input.Placeholder', 'Search by account, summary, domain…')
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
search (newValue) {
|
||||
this.page = 1
|
||||
this.fetchData()
|
||||
},
|
||||
page () {
|
||||
this.fetchData()
|
||||
},
|
||||
ordering () {
|
||||
this.fetchData()
|
||||
},
|
||||
orderingDirection () {
|
||||
this.fetchData()
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.fetchData()
|
||||
},
|
||||
methods: {
|
||||
fetchData () {
|
||||
const params = merge({
|
||||
page: this.page,
|
||||
page_size: this.paginateBy,
|
||||
q: this.search.query,
|
||||
ordering: this.getOrderingAsString()
|
||||
}, this.filters)
|
||||
const self = this
|
||||
self.isLoading = true
|
||||
this.result = null
|
||||
axios.get('mutations/', { params: params }).then((response) => {
|
||||
self.result = response.data
|
||||
self.isLoading = false
|
||||
self.fetchTargets()
|
||||
}, error => {
|
||||
self.isLoading = false
|
||||
self.errors = error.backendErrors
|
||||
})
|
||||
},
|
||||
fetchTargets () {
|
||||
// we request target data via the API so we can display previous state
|
||||
// additionnal data next to the edit card
|
||||
const self = this
|
||||
const typesAndIds = {
|
||||
track: {
|
||||
url: 'tracks/',
|
||||
ids: []
|
||||
}
|
||||
}
|
||||
this.result.results.forEach((m) => {
|
||||
if (!m.target || !typesAndIds[m.target.type]) {
|
||||
return
|
||||
}
|
||||
typesAndIds[m.target.type].ids.push(m.target.id)
|
||||
})
|
||||
Object.keys(typesAndIds).forEach((k) => {
|
||||
const config = typesAndIds[k]
|
||||
if (config.ids.length === 0) {
|
||||
return
|
||||
}
|
||||
axios.get(config.url, { params: { id: uniq(config.ids), hidden: 'null' } }).then((response) => {
|
||||
response.data.results.forEach((e) => {
|
||||
self.targets[k][e.id] = {
|
||||
payload: e,
|
||||
currentState: configs[k].fields.reduce((state/*: Record<string, unknown> */, field) => {
|
||||
state[field.id] = { value: field.getValue(e) }
|
||||
return state
|
||||
}, {})
|
||||
}
|
||||
})
|
||||
}, error => {
|
||||
self.errors = error.backendErrors
|
||||
})
|
||||
})
|
||||
},
|
||||
selectPage: function (page) {
|
||||
this.page = page
|
||||
},
|
||||
handle (type, id, value) {
|
||||
if (type === 'delete') {
|
||||
this.exclude.push(id)
|
||||
}
|
||||
|
||||
this.result.results.forEach((e) => {
|
||||
if (e.uuid === id) {
|
||||
e.is_approved = value
|
||||
}
|
||||
})
|
||||
},
|
||||
getCurrentState (target) {
|
||||
if (!target) {
|
||||
return {}
|
||||
}
|
||||
if (this.targets[target.type] && this.targets[target.type][String(target.id)]) {
|
||||
return this.targets[target.type][String(target.id)].currentState
|
||||
}
|
||||
return {}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -69,6 +69,7 @@ export default () => ({
|
|||
creation_date: $pgettext('Content/*/*/Noun', 'Creation date'),
|
||||
release_date: $pgettext('Content/*/*/Noun', 'Release date'),
|
||||
accessed_date: $pgettext('Content/*/*/Noun', 'Accessed date'),
|
||||
applied_date: $pgettext('Content/*/*/Noun', 'Applied date'),
|
||||
first_seen: $pgettext('Content/Moderation/Dropdown/Noun', 'First seen date'),
|
||||
last_seen: $pgettext('Content/Moderation/Dropdown/Noun', 'Last seen date'),
|
||||
modification_date: $pgettext('Content/Playlist/Dropdown/Noun', 'Modification date'),
|
||||
|
|
|
|||
|
|
@ -4,6 +4,10 @@ import { useRoute } from 'vue-router'
|
|||
import { useStore } from '~/store'
|
||||
import { OrderingDirection, OrderingField, RouteWithPreferences } from '~/store/ui'
|
||||
|
||||
export interface OrderingProps {
|
||||
orderingConfigName: RouteWithPreferences | null
|
||||
}
|
||||
|
||||
export default (orderingConfigName: MaybeRef<RouteWithPreferences | null>) => {
|
||||
const store = useStore()
|
||||
const route = useRoute()
|
||||
|
|
|
|||
|
|
@ -0,0 +1,83 @@
|
|||
import { MaybeRef, refWithControl } from '@vueuse/core'
|
||||
import { computed, ref, unref, watch } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { compileTokens, normalizeQuery, parseTokens, Token } from '~/utils/search'
|
||||
|
||||
export interface SmartSearchProps {
|
||||
defaultQuery?: string
|
||||
updateUrl?: boolean
|
||||
}
|
||||
|
||||
export default (defaultQuery: MaybeRef<string>, updateUrl: MaybeRef<boolean>) => {
|
||||
const query = refWithControl(unref(defaultQuery))
|
||||
const tokens = ref([] as Token[])
|
||||
|
||||
watch(query, (value) => {
|
||||
// TODO (wvffle): Move normalizeQuery and parseTokens into the composable file
|
||||
tokens.value = parseTokens(normalizeQuery(value))
|
||||
}, { immediate: true })
|
||||
|
||||
const updateHandlers = new Set<() => void>()
|
||||
const onSearch = (fn: () => void) => {
|
||||
updateHandlers.add(fn)
|
||||
return () => updateHandlers.delete(fn)
|
||||
}
|
||||
|
||||
const router = useRouter()
|
||||
watch(tokens, (value) => {
|
||||
const newQuery = compileTokens(value)
|
||||
if (unref(updateUrl)) {
|
||||
return router.replace({ query: { q: newQuery } })
|
||||
}
|
||||
|
||||
// TODO (wvffle): updateUrl = false only in FilesTable.vue
|
||||
query.set(newQuery, false)
|
||||
for (const handler of updateHandlers) {
|
||||
handler()
|
||||
}
|
||||
// this.page = 1
|
||||
// this.fetchData()
|
||||
}, { deep: true })
|
||||
|
||||
const getTokenValue = (key: string, fallback: string) => {
|
||||
const matching = tokens.value.find(token => {
|
||||
return token.field === key
|
||||
})
|
||||
|
||||
return matching?.value ?? fallback
|
||||
}
|
||||
|
||||
const addSearchToken = (key: string, value: string) => {
|
||||
if (value === '') {
|
||||
tokens.value = tokens.value.filter(token => {
|
||||
return token.field !== key
|
||||
})
|
||||
|
||||
return
|
||||
}
|
||||
|
||||
const existing = tokens.value.filter(token => {
|
||||
return token.field === key
|
||||
})
|
||||
|
||||
if (!existing.length) {
|
||||
tokens.value.push({ field: key, value })
|
||||
return
|
||||
}
|
||||
|
||||
// TODO (wvffle): Check if triggers reactivity
|
||||
for (const token of existing) {
|
||||
token.value = value
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
getTokenValue,
|
||||
addSearchToken,
|
||||
onSearch,
|
||||
query: computed({
|
||||
get: () => compileTokens(tokens.value),
|
||||
set: (value: string) => query.set(value, true)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
|
@ -18,7 +18,9 @@ export type RouteWithPreferences = 'library.artists.browse' | 'library.podcasts.
|
|||
export type WebSocketEventName = 'inbox.item_added' | 'import.status_updated' | 'mutation.created' | 'mutation.updated'
|
||||
| 'report.created' | 'user_request.created' | 'Listen'
|
||||
|
||||
export type OrderingField = 'creation_date' | 'title' | 'album__title' | 'artist__name' | 'release_date'
|
||||
export type OrderingField = 'creation_date' | 'title' | 'album__title' | 'artist__name' | 'release_date' | 'name'
|
||||
| 'applied_date'
|
||||
|
||||
export type OrderingDirection = '-' | '+'
|
||||
interface RoutePreferences {
|
||||
paginateBy: number
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
interface Token {
|
||||
export interface Token {
|
||||
field: string | null
|
||||
value: string
|
||||
}
|
||||
|
|
|
|||
|
|
@ -83,13 +83,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>
|
||||
|
|
|
|||
Ładowanie…
Reference in New Issue