2018-08-11 01:47:10 -04:00
|
|
|
<template>
|
|
|
|
<div>
|
|
|
|
<tabs-music></tabs-music>
|
|
|
|
|
|
|
|
<content-with-heading>
|
2018-12-08 02:48:15 -05:00
|
|
|
<template slot="options">
|
2020-10-08 00:01:17 -04:00
|
|
|
<index-button-list :index="artists_list.indexList"></index-button-list>
|
|
|
|
|
|
|
|
<div class="columns">
|
|
|
|
<div class="column">
|
|
|
|
<p class="heading" style="margin-bottom: 24px;">Filter</p>
|
|
|
|
<div class="field">
|
|
|
|
<div class="control">
|
|
|
|
<input id="switchHideSingles" type="checkbox" name="switchHideSingles" class="switch" v-model="hide_singles">
|
|
|
|
<label for="switchHideSingles">Hide singles</label>
|
|
|
|
</div>
|
|
|
|
<p class="help">If active, hides artists that only appear on singles or playlists.</p>
|
|
|
|
</div>
|
2020-10-11 03:01:34 -04:00
|
|
|
<div class="field" v-if="spotify_enabled">
|
2020-10-08 00:01:17 -04:00
|
|
|
<div class="control">
|
|
|
|
<input id="switchHideSpotify" type="checkbox" name="switchHideSpotify" class="switch" v-model="hide_spotify">
|
|
|
|
<label for="switchHideSpotify">Hide artists from Spotify</label>
|
|
|
|
</div>
|
|
|
|
<p class="help">If active, hides artists that only appear in your Spotify library.</p>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="column">
|
|
|
|
<p class="heading" style="margin-bottom: 24px;">Sort by</p>
|
|
|
|
<dropdown-menu v-model="sort" :options="sort_options"></dropdown-menu>
|
|
|
|
</div>
|
|
|
|
</div>
|
2018-12-08 02:48:15 -05:00
|
|
|
</template>
|
2018-08-11 01:47:10 -04:00
|
|
|
<template slot="heading-left">
|
|
|
|
<p class="title is-4">Artists</p>
|
2020-10-08 00:01:17 -04:00
|
|
|
<p class="heading">{{ artists_list.sortedAndFiltered.length }} Artists</p>
|
2018-08-11 01:47:10 -04:00
|
|
|
</template>
|
|
|
|
<template slot="heading-right">
|
|
|
|
</template>
|
|
|
|
<template slot="content">
|
2020-10-08 00:01:17 -04:00
|
|
|
<list-artists :artists="artists_list"></list-artists>
|
2018-08-11 01:47:10 -04:00
|
|
|
</template>
|
|
|
|
</content-with-heading>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
import { LoadDataBeforeEnterMixin } from './mixin'
|
|
|
|
import ContentWithHeading from '@/templates/ContentWithHeading'
|
|
|
|
import TabsMusic from '@/components/TabsMusic'
|
2018-12-08 02:48:15 -05:00
|
|
|
import IndexButtonList from '@/components/IndexButtonList'
|
2020-09-20 02:13:19 -04:00
|
|
|
import ListArtists from '@/components/ListArtists'
|
2020-10-08 00:01:17 -04:00
|
|
|
import DropdownMenu from '@/components/DropdownMenu'
|
2018-08-11 01:47:10 -04:00
|
|
|
import webapi from '@/webapi'
|
|
|
|
import * as types from '@/store/mutation_types'
|
2020-10-08 00:01:17 -04:00
|
|
|
import Artists from '@/lib/Artists'
|
2018-08-11 01:47:10 -04:00
|
|
|
|
|
|
|
const artistsData = {
|
|
|
|
load: function (to) {
|
2020-07-01 01:29:03 -04:00
|
|
|
return webapi.library_artists('music')
|
2018-08-11 01:47:10 -04:00
|
|
|
},
|
|
|
|
|
|
|
|
set: function (vm, response) {
|
|
|
|
vm.artists = response.data
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
export default {
|
|
|
|
name: 'PageArtists',
|
2020-04-11 13:43:53 -04:00
|
|
|
mixins: [LoadDataBeforeEnterMixin(artistsData)],
|
2020-10-08 00:01:17 -04:00
|
|
|
components: { ContentWithHeading, TabsMusic, IndexButtonList, ListArtists, DropdownMenu },
|
2018-08-11 01:47:10 -04:00
|
|
|
|
|
|
|
data () {
|
|
|
|
return {
|
2020-10-08 00:01:17 -04:00
|
|
|
artists: { items: [] },
|
|
|
|
sort_options: ['Name', 'Recently added']
|
2018-08-11 01:47:10 -04:00
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
computed: {
|
2020-10-08 00:01:17 -04:00
|
|
|
artists_list () {
|
|
|
|
return new Artists(this.artists.items, {
|
|
|
|
hideSingles: this.hide_singles,
|
|
|
|
hideSpotify: this.hide_spotify,
|
|
|
|
sort: this.sort,
|
|
|
|
group: true
|
|
|
|
})
|
2018-12-08 02:48:15 -05:00
|
|
|
},
|
|
|
|
|
2020-10-11 03:01:34 -04:00
|
|
|
spotify_enabled () {
|
|
|
|
return this.$store.state.spotify.webapi_token_valid
|
|
|
|
},
|
|
|
|
|
2020-10-08 00:01:17 -04:00
|
|
|
hide_singles: {
|
|
|
|
get () {
|
|
|
|
return this.$store.state.hide_singles
|
|
|
|
},
|
|
|
|
set (value) {
|
|
|
|
this.$store.commit(types.HIDE_SINGLES, value)
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
hide_spotify: {
|
|
|
|
get () {
|
|
|
|
return this.$store.state.hide_spotify
|
|
|
|
},
|
|
|
|
set (value) {
|
|
|
|
this.$store.commit(types.HIDE_SPOTIFY, value)
|
|
|
|
}
|
2020-04-11 13:43:53 -04:00
|
|
|
},
|
|
|
|
|
2020-10-08 00:01:17 -04:00
|
|
|
sort: {
|
|
|
|
get () {
|
|
|
|
return this.$store.state.artists_sort
|
|
|
|
},
|
|
|
|
set (value) {
|
|
|
|
this.$store.commit(types.ARTISTS_SORT, value)
|
2020-09-20 11:59:46 -04:00
|
|
|
}
|
2018-08-11 01:47:10 -04:00
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
methods: {
|
2020-10-08 00:01:17 -04:00
|
|
|
scrollToTop: function () {
|
|
|
|
window.scrollTo({ top: 0, behavior: 'smooth' })
|
2018-08-11 01:47:10 -04:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<style>
|
|
|
|
</style>
|