onspot/onspot-frontend
onspot
/
onspot-frontend
2
0
Fork 0
Code Pull Requests Releases Activity

Added "Search"
continuous-integration/drone/push Build is passing Details

This commit is contained in:
Pünkösd Marcell 2020-11-28 18:47:08 +01:00
parent 89607acaea
commit 10cee6d1c0
1 changed files with 55 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

78
src/views/Collection.vue
View File

@ -11,33 +11,44 @@
</b-col>
</b-row>
<big-chungus-loader text="Fetching track list..." v-if="processing"/>
<b-row v-else>
<b-col class="my-4">
<div class="my-4" v-else>
<b-row>
<b-col cols="12" sm="6" lg="3" class="ml-auto">
<div>
<b-input v-model="searchTerm" placeholder="Filter"></b-input>
</div>
</b-col>
</b-row>
<b-row>
<b-col>
<b-table :items="tracklist" :fields="fields" hover borderless @row-clicked="rowClicked"
tbody-tr-class="clickable-table-row-thing" responsive="md">
<template #cell(cover_url)="data">
<b-img-lazy :src="data.item.cover_url_small" height="45px" blank-src="@/assets/music_placeholder.png"
v-if="!!data.item.cover_url_small"/>
<b-img src="@/assets/music_placeholder.png" height="45px" v-else/>
</template>
<b-table :items="filteredList" :fields="fields" hover borderless @row-clicked="rowClicked"
tbody-tr-class="clickable-table-row-thing" responsive="md">
<template #cell(cover_url)="data">
<b-img-lazy :src="data.item.cover_url_small" height="45px" blank-src="@/assets/music_placeholder.png"
v-if="!!data.item.cover_url_small"/>
<b-img src="@/assets/music_placeholder.png" height="45px" v-else/>
</template>
<template #cell(id)="data">
<div class="text-right">
<b-button variant="success" :disabled="!data.item.spotify_id" @click="startPlayer(data.item.spotify_id)">
<b-icon icon="play-fill"/>
Play
</b-button>
</div>
</template>
</b-table>
<template #cell(id)="data">
<div class="text-right">
<b-button variant="success" :disabled="!data.item.spotify_id"
@click="startPlayer(data.item.spotify_id)">
<b-icon icon="play-fill"/>
Play
</b-button>
</div>
</template>
</b-table>
<div v-if="totalPages > 1">
<b-pagination-nav :number-of-pages="totalPages" use-router align="center" :link-gen="paginateLinkGenerator"/>
</div>
<div v-if="totalPages > 1">
<b-pagination-nav :number-of-pages="totalPages" use-router align="center"
:link-gen="paginateLinkGenerator"/>
</div>
</b-col>
</b-row>
</b-col>
</b-row>
</div>
</b-container>
</template>
@ -55,6 +66,7 @@ export default {
collectionName: "",
totalItems: 0,
itemsPerPage: 10,
searchTerm: "",
fields: [
{
key: "cover_url",
@ -117,9 +129,29 @@ export default {
computed: {
totalPages() {
return Math.ceil(this.totalItems / this.itemsPerPage);
},
filteredList() {
if (!this.searchTerm) {
return this.tracklist;
}
return this.tracklist.filter(item => {
if (item.title.toLowerCase().includes(this.searchTerm.toLowerCase())) {
return true;
}
if (item.album.toLowerCase().includes(this.searchTerm.toLowerCase())) {
return true;
}
if (item.artist.toLowerCase().includes(this.searchTerm.toLowerCase())) {
return true;
}
return false;
})
}
}
}
</script>
<style>