cleanup duplicated artist/album lists
This commit is contained in:
Thomas Amland
parent
e0288bb04e
commit
4559846172
@ -4,26 +4,19 @@
|
||||
<template v-else>
|
||||
<div v-for="section in sections" :key="section.key" class="mb-4">
|
||||
<h1>{{ section.name }}</h1>
|
||||
<Tiles square>
|
||||
<Tile v-for="item in $data[section.key]" :key="item.id"
|
||||
:image="item.image"
|
||||
:to="{name: 'album', params: { id: item.id } }"
|
||||
:title="item.name">
|
||||
<template v-slot:text>
|
||||
<router-link :to="{name: 'artist', params: { id: item.artistId } }">
|
||||
{{ item.artist }}
|
||||
</router-link>
|
||||
</template>
|
||||
</Tile>
|
||||
</Tiles>
|
||||
<AlbumList :items="$data[section.key]"/>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import Vue from 'vue';
|
||||
import AlbumList from "@/library/album/AlbumList.vue";
|
||||
|
||||
export default Vue.extend({
|
||||
components: {
|
||||
AlbumList,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
sections: [
|
||||
|
||||
@ -1,35 +0,0 @@
|
||||
<template>
|
||||
<div class="card">
|
||||
<img class="card-img-top" :src="item.image">
|
||||
<div class="card-body">
|
||||
<div class=" ">
|
||||
<div class="text-truncate">
|
||||
<router-link :to="{name: 'album', params: { id: item.id } }">
|
||||
<strong>{{ item.name }}</strong>
|
||||
</router-link>
|
||||
</div>
|
||||
<div class="text-truncate text-muted">
|
||||
{{ item.artist }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<style scoped lang="scss">
|
||||
.on-hover {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.show-btns {
|
||||
color: rgba(255, 255, 255, 1) !important;
|
||||
}
|
||||
</style>
|
||||
<script lang="ts">
|
||||
import Vue from "vue";
|
||||
|
||||
export default Vue.extend({
|
||||
props: {
|
||||
item: Object
|
||||
}
|
||||
});
|
||||
</script>
|
||||
50
src/library/album/AlbumLibrary.vue
Normal file
50
src/library/album/AlbumLibrary.vue
Normal file
@ -0,0 +1,50 @@
|
||||
<template>
|
||||
<div>
|
||||
<Spinner :data="albums" v-slot="{albums: data}">
|
||||
<AlbumList :items="albums"/>
|
||||
</Spinner>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import Vue from "vue";
|
||||
import AlbumList from './AlbumList.vue';
|
||||
import { AlbumSort } from '@/shared/api';
|
||||
|
||||
export default Vue.extend({
|
||||
components: {
|
||||
AlbumList,
|
||||
},
|
||||
props: {
|
||||
msg: String
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
sort: "newest",
|
||||
albums: null,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
sortOptions() {
|
||||
return [
|
||||
{ text: "A-Z", value: "alphabeticalByName" },
|
||||
{ text: "Date", value: "newest" },
|
||||
{ text: "frequent", value: "frequent" },
|
||||
// { text: "random", value: "random" },
|
||||
// { text: "recent", value: "recent" },
|
||||
// { text: "starred", value: "starred" },
|
||||
]
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
sort: {
|
||||
immediate: true,
|
||||
handler(value: AlbumSort) {
|
||||
this.albums = null;
|
||||
this.$api.getAlbums(value).then(albums => {
|
||||
this.albums = albums;
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
});
|
||||
</script>
|
||||
@ -1,59 +1,14 @@
|
||||
<template>
|
||||
<div>
|
||||
<Spinner :data="albums" v-slot="{albums: data}">
|
||||
<Tiles square>
|
||||
<Tile v-for="item in albums" :key="item.id"
|
||||
:image="item.image"
|
||||
:to="{name: 'album', params: { id: item.id } }"
|
||||
:title="item.name">
|
||||
<template v-slot:text>
|
||||
<router-link :to="{name: 'artist', params: { id: item.artistId } }">
|
||||
{{ item.artist }}
|
||||
</router-link>
|
||||
</template>
|
||||
</Tile>
|
||||
</Tiles>
|
||||
</Spinner>
|
||||
</div>
|
||||
<template functional>
|
||||
<Tiles square>
|
||||
<Tile v-for="item in props.items" :key="item.id"
|
||||
:image="item.image"
|
||||
:to="{name: 'album', params: { id: item.id } }"
|
||||
:title="item.name">
|
||||
<template v-slot:text>
|
||||
<router-link :to="{name: 'artist', params: { id: item.artistId } }" class="text-muted">
|
||||
{{ item.artist }}
|
||||
</router-link>
|
||||
</template>
|
||||
</Tile>
|
||||
</Tiles>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import Vue from "vue";
|
||||
import { AlbumSort } from '@/shared/api';
|
||||
|
||||
export default Vue.extend({
|
||||
props: {
|
||||
msg: String
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
sort: "newest",
|
||||
albums: null,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
sortOptions() {
|
||||
return [
|
||||
{ text: "A-Z", value: "alphabeticalByName" },
|
||||
{ text: "Date", value: "newest" },
|
||||
{ text: "frequent", value: "frequent" },
|
||||
// { text: "random", value: "random" },
|
||||
// { text: "recent", value: "recent" },
|
||||
// { text: "starred", value: "starred" },
|
||||
]
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
sort: {
|
||||
immediate: true,
|
||||
handler(value: AlbumSort) {
|
||||
this.albums = null;
|
||||
this.$api.getAlbums(value).then(albums => {
|
||||
this.albums = albums;
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -1,21 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="text-truncate">
|
||||
<router-link :to="{name: 'artist', params: { id: item.id } }">
|
||||
<strong>{{ item.name }}</strong>
|
||||
</router-link>
|
||||
</div>
|
||||
<div class="text-truncate text-muted">
|
||||
<strong>{{ item.albumCount }}</strong> albums
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import Vue from "vue";
|
||||
|
||||
export default Vue.extend({
|
||||
props: {
|
||||
item: { type: Object, required: true }
|
||||
}
|
||||
});
|
||||
</script>
|
||||
@ -10,31 +10,22 @@
|
||||
</div>
|
||||
</div>
|
||||
<h3 class="pt-5">Albums</h3>
|
||||
<Tiles square>
|
||||
<Tile v-for="item in item.albums" :key="item.id"
|
||||
:image="item.image"
|
||||
:to="{name: 'album', params: { id: item.id } }"
|
||||
:title="item.name"
|
||||
:text="item.artist">
|
||||
</Tile>
|
||||
</Tiles>
|
||||
<AlbumList :items="item.albums"/>
|
||||
|
||||
<h3 class="pt-5">Similar artist</h3>
|
||||
<Tiles>
|
||||
<Tile v-for="item in item.similarArtist" :key="item.id"
|
||||
:to="{name: 'artist', params: { id: item.id } }"
|
||||
:title="item.name">
|
||||
<template v-slot:text>
|
||||
<strong>{{ item.albumCount }}</strong> albums
|
||||
</template>
|
||||
</Tile>
|
||||
</Tiles>
|
||||
<ArtistList :items="item.similarArtist"/>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import Vue from "vue";
|
||||
import AlbumList from "@/library/album/AlbumList.vue";
|
||||
import ArtistList from "@/library/artist/ArtistList.vue";
|
||||
|
||||
export default Vue.extend({
|
||||
components: {},
|
||||
components: {
|
||||
AlbumList,
|
||||
ArtistList,
|
||||
},
|
||||
props: {
|
||||
id: String
|
||||
},
|
||||
|
||||
23
src/library/artist/ArtistLibrary.vue
Normal file
23
src/library/artist/ArtistLibrary.vue
Normal file
@ -0,0 +1,23 @@
|
||||
<template>
|
||||
<ArtistList :items="items"/>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import Vue from "vue";
|
||||
import ArtistList from './ArtistList.vue';
|
||||
|
||||
export default Vue.extend({
|
||||
components: {
|
||||
ArtistList,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
items: []
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.$api.getArtists().then(items => {
|
||||
this.items = items;
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
@ -1,7 +1,6 @@
|
||||
<template>
|
||||
<template functional>
|
||||
<Tiles>
|
||||
<Tile v-for="item in items" :key="item.id"
|
||||
:image="item.image"
|
||||
<Tile v-for="item in props.items" :key="item.id"
|
||||
:to="{name: 'artist', params: { id: item.id } }"
|
||||
:title="item.name">
|
||||
<template v-slot:text>
|
||||
@ -10,19 +9,3 @@
|
||||
</Tile>
|
||||
</Tiles>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import Vue from "vue";
|
||||
|
||||
export default Vue.extend({
|
||||
data() {
|
||||
return {
|
||||
items: []
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.$api.getArtists().then(items => {
|
||||
this.items = items;
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -1,15 +1,8 @@
|
||||
<template>
|
||||
<div v-if="result">
|
||||
|
||||
<div>
|
||||
<h5 class="text-uppercase">Artists</h5>
|
||||
<div class="d-flex">
|
||||
<div class="tiles">
|
||||
<div v-for="item in result.artists" :key="item.id">
|
||||
<ArtistCard :item="item"></ArtistCard>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ArtistList :items="result.artists"/>
|
||||
|
||||
<b-table-simple hover borderless>
|
||||
<tbody>
|
||||
@ -22,13 +15,7 @@
|
||||
|
||||
<div>
|
||||
<h5 class="text-uppercase">Albums</h5>
|
||||
<div class="d-flex">
|
||||
<div class="tiles">
|
||||
<div v-for="item in result.albums" :key="item.id">
|
||||
<AlbumCard :item="item"></AlbumCard>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<AlbumList :items="result.albums"/>
|
||||
<b-table-simple hover borderless>
|
||||
<tbody>
|
||||
<tr v-for="item in result.albums">
|
||||
@ -72,13 +59,13 @@
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import Vue from "vue";
|
||||
import AlbumCard from "@/library/album/AlbumCard.vue";
|
||||
import ArtistCard from "@/library/artist/ArtistCard.vue";
|
||||
import AlbumList from "@/library/album/AlbumList.vue";
|
||||
import ArtistList from "@/library/artist/ArtistList.vue";
|
||||
|
||||
export default Vue.extend({
|
||||
components: {
|
||||
AlbumCard,
|
||||
ArtistCard,
|
||||
AlbumList,
|
||||
ArtistList,
|
||||
},
|
||||
props: {
|
||||
query: String,
|
||||
|
||||
@ -3,13 +3,13 @@ import Router from 'vue-router'
|
||||
import Login from '@/auth/Login.vue'
|
||||
import Queue from '@/player/Queue.vue'
|
||||
import Home from '@/home/Home.vue'
|
||||
import AlbumList from '@/library/album/AlbumList.vue'
|
||||
import ArtistDetails from '@/library/artist/ArtistDetails.vue'
|
||||
import ArtistList from '@/library/artist/ArtistList.vue'
|
||||
import Album from '@/library/album/Album.vue'
|
||||
import ArtistLibrary from '@/library/artist/ArtistLibrary.vue'
|
||||
import AlbumDetails from '@/library/album/AlbumDetails.vue'
|
||||
import AlbumLibrary from '@/library/album/AlbumLibrary.vue'
|
||||
import RandomSongs from '@/playlist/RandomSongs.vue'
|
||||
import GenreList from '@/library/genre/GenreList.vue'
|
||||
import GenreDetails from '@/library/genre/GenreDetails.vue'
|
||||
import GenreLibrary from '@/library/genre/GenreLibrary.vue'
|
||||
import Starred from '@/library/starred/Starred.vue'
|
||||
import Playlist from '@/playlist/Playlist.vue'
|
||||
import PlaylistList from '@/playlist/PlaylistList.vue'
|
||||
@ -44,18 +44,18 @@ export function setupRouter(auth: AuthService) {
|
||||
{
|
||||
name: 'albums',
|
||||
path: '/albums',
|
||||
component: AlbumList
|
||||
component: AlbumLibrary
|
||||
},
|
||||
{
|
||||
name: 'album',
|
||||
path: '/album/:id',
|
||||
component: Album,
|
||||
component: AlbumDetails,
|
||||
props: true,
|
||||
},
|
||||
{
|
||||
name: 'artists',
|
||||
path: '/artists',
|
||||
component: ArtistList
|
||||
component: ArtistLibrary
|
||||
},
|
||||
{
|
||||
name: 'artist',
|
||||
@ -66,7 +66,7 @@ export function setupRouter(auth: AuthService) {
|
||||
{
|
||||
name: 'genres',
|
||||
path: '/genres',
|
||||
component: GenreList,
|
||||
component: GenreLibrary,
|
||||
},
|
||||
{
|
||||
name: 'genre',
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user