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

Added "Search"
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source
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-col>
</b-row> </b-row>
<big-chungus-loader text="Fetching track list..." v-if="processing"/> <big-chungus-loader text="Fetching track list..." v-if="processing"/>
<b-row v-else> <div class="my-4" v-else>
<b-col class="my-4"> <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" <b-table :items="filteredList" :fields="fields" hover borderless @row-clicked="rowClicked"
tbody-tr-class="clickable-table-row-thing" responsive="md"> tbody-tr-class="clickable-table-row-thing" responsive="md">
<template #cell(cover_url)="data"> <template #cell(cover_url)="data">
<b-img-lazy :src="data.item.cover_url_small" height="45px" blank-src="@/assets/music_placeholder.png" <b-img-lazy :src="data.item.cover_url_small" height="45px" blank-src="@/assets/music_placeholder.png"
v-if="!!data.item.cover_url_small"/> v-if="!!data.item.cover_url_small"/>
<b-img src="@/assets/music_placeholder.png" height="45px" v-else/> <b-img src="@/assets/music_placeholder.png" height="45px" v-else/>
</template> </template>
<template #cell(id)="data"> <template #cell(id)="data">
<div class="text-right"> <div class="text-right">
<b-button variant="success" :disabled="!data.item.spotify_id" @click="startPlayer(data.item.spotify_id)"> <b-button variant="success" :disabled="!data.item.spotify_id"
<b-icon icon="play-fill"/> @click="startPlayer(data.item.spotify_id)">
Play <b-icon icon="play-fill"/>
</b-button> Play
</div> </b-button>
</template> </div>
</b-table> </template>
</b-table>
<div v-if="totalPages > 1"> <div v-if="totalPages > 1">
<b-pagination-nav :number-of-pages="totalPages" use-router align="center" :link-gen="paginateLinkGenerator"/> <b-pagination-nav :number-of-pages="totalPages" use-router align="center"
</div> :link-gen="paginateLinkGenerator"/>
</div>
</b-col> </b-col>
</b-row> </b-row>
</div>
</b-container> </b-container>
</template> </template>
@ -55,6 +66,7 @@ export default {
collectionName: "", collectionName: "",
totalItems: 0, totalItems: 0,
itemsPerPage: 10, itemsPerPage: 10,
searchTerm: "",
fields: [ fields: [
{ {
key: "cover_url", key: "cover_url",
@ -117,9 +129,29 @@ export default {
computed: { computed: {
totalPages() { totalPages() {
return Math.ceil(this.totalItems / this.itemsPerPage); 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> </script>
<style> <style>