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",
pageHistory: [],
songstest: true
songstest: false
},
methods: {
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
// 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) => {
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 bb = b.attributes[self.library.songs.sorting]
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
// 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) => {
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 bb = b.attributes[self.library.songs.sorting]
if (aa == null) {

View file

@ -1,14 +1,31 @@
<template v-if="page == 'library-songs'">
<div class="content-inner">
<h1 class="header-text">Songs</h1>
<div class="search-input-container" style="width:100%;margin: 16px 0px;">
<div class="search-input--icon"></div>
<input type="search"
style="width:100%;"
spellcheck="false"
placeholder="Search..."
@input="searchLibrarySongs"
v-model="library.songs.search" class="search-input">
<div class="row">
<div class="col" style="padding:0px;">
<div class="search-input-container" style="width:100%;margin: 16px 0px;">
<div class="search-input--icon"></div>
<input type="search"
style="width:100%;"
spellcheck="false"
placeholder="Search..."
@input="searchLibrarySongs"
v-model="library.songs.search" class="search-input">
</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>
<mediaitem-list-item :item="item"