songs sorting

This commit is contained in:
booploops 2021-12-07 17:18:12 -08:00
parent 507fa0af89
commit 4780e5882f
2 changed files with 34 additions and 9 deletions

View file

@ -128,7 +128,7 @@ const app = new Vue({
}, },
page: "artist-page", page: "artist-page",
pageHistory: [], pageHistory: [],
songstest: true songstest: false
}, },
methods: { methods: {
async init() { async init() {
@ -359,6 +359,10 @@ const app = new Vue({
// sort this.library.songs.displayListing by song.attributes[self.library.songs.sorting] in ascending order based on alphabetical order and numeric order // sort this.library.songs.displayListing by song.attributes[self.library.songs.sorting] in ascending order based on alphabetical order and numeric order
// check if song.attributes[self.library.songs.sorting] is a number and if so, sort by number if not, sort by alphabetical order ignoring case // check if song.attributes[self.library.songs.sorting] is a number and if so, sort by number if not, sort by alphabetical order ignoring case
self.library.songs.displayListing.sort((a, b) => { self.library.songs.displayListing.sort((a, b) => {
if(self.library.songs.sorting == "genre") {
aa = a.attributes.genreNames[0]
bb = b.attributes.genreNames[0]
}
let aa = a.attributes[self.library.songs.sorting] let aa = a.attributes[self.library.songs.sorting]
let bb = b.attributes[self.library.songs.sorting] let bb = b.attributes[self.library.songs.sorting]
if (aa == null) { if (aa == null) {
@ -378,6 +382,10 @@ const app = new Vue({
// sort this.library.songs.displayListing by song.attributes[self.library.songs.sorting] in descending order based on alphabetical order and numeric order // sort this.library.songs.displayListing by song.attributes[self.library.songs.sorting] in descending order based on alphabetical order and numeric order
// check if song.attributes[self.library.songs.sorting] is a number and if so, sort by number if not, sort by alphabetical order ignoring case // check if song.attributes[self.library.songs.sorting] is a number and if so, sort by number if not, sort by alphabetical order ignoring case
self.library.songs.displayListing.sort((a, b) => { self.library.songs.displayListing.sort((a, b) => {
if(self.library.songs.sorting == "genre") {
aa = a.attributes.genreNames[0]
bb = b.attributes.genreNames[0]
}
let aa = a.attributes[self.library.songs.sorting] let aa = a.attributes[self.library.songs.sorting]
let bb = b.attributes[self.library.songs.sorting] let bb = b.attributes[self.library.songs.sorting]
if (aa == null) { if (aa == null) {

View file

@ -1,6 +1,8 @@
<template v-if="page == 'library-songs'"> <template v-if="page == 'library-songs'">
<div class="content-inner"> <div class="content-inner">
<h1 class="header-text">Songs</h1> <h1 class="header-text">Songs</h1>
<div class="row">
<div class="col" style="padding:0px;">
<div class="search-input-container" style="width:100%;margin: 16px 0px;"> <div class="search-input-container" style="width:100%;margin: 16px 0px;">
<div class="search-input--icon"></div> <div class="search-input--icon"></div>
<input type="search" <input type="search"
@ -10,6 +12,21 @@
@input="searchLibrarySongs" @input="searchLibrarySongs"
v-model="library.songs.search" class="search-input"> v-model="library.songs.search" class="search-input">
</div> </div>
</div>
<div class="col-auto flex-center">
<select class="md-select" v-model="library.songs.sorting" @change="searchLibrarySongs()">
<optgroup label="Sort By">
<option v-for="(sort, index) in library.sortingOptions" :value="index">{{ sort }}</option>
</optgroup>
</select>
<select class="md-select" v-model="library.songs.sortOrder" @change="searchLibrarySongs()">
<optgroup label="Sort Order">
<option value="asc">Ascending</option>
<option value="desc">Descending</option>
</optgroup>
</select>
</div>
</div>
<div v-if="library.songs.downloadState == 3">Library contains no songs.</div> <div v-if="library.songs.downloadState == 3">Library contains no songs.</div>
<mediaitem-list-item :item="item" <mediaitem-list-item :item="item"
v-for="item in library.songs.displayListing"></mediaitem-list-item> v-for="item in library.songs.displayListing"></mediaitem-list-item>