groove/audiobookshelf
1
0
Fork 0
mirror of https://github.com/advplyr/audiobookshelf.git synced 2026-05-19 18:01:37 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

implemented server side sort

Browse source
This commit is contained in:
Sven Roman Reinhard 2026-03-10 04:23:49 +01:00
parent 2793b54b5b
commit 5148502da7
2 changed files with 27 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

44
client/pages/library/_library/narrators.vue
View file

@ -4,11 +4,11 @@
<div id="bookshelf" class="w-full h-full px-1 py-4 md:p-8 relative overflow-y-auto"> <div id="bookshelf" class="w-full h-full px-1 py-4 md:p-8 relative overflow-y-auto">
<table class="tracksTable max-w-2xl mx-auto"> <table class="tracksTable max-w-2xl mx-auto">
<tr> <tr>
<th class="text-left cursor-pointer" @click="sortNarratorsBy('name')">{{ $strings.LabelName }} {{ sortingArrow('name') }}</th> <th class="text-left cursor-pointer hover:underline" @click="sortNarratorsBy('name')">{{ $strings.LabelName }}<span class="no-underline inline-block">&nbsp;{{ sortingArrow('name') }}</span></th>
<th class="text-center w-24 cursor-pointer" @click="sortNarratorsBy('numBooks')">{{ $strings.LabelBooks }} {{ sortingArrow('numBooks') }}</th> <th class="text-center w-24 cursor-pointer hover:underline" @click="sortNarratorsBy('numBooks')">{{ $strings.LabelBooks }}<span class="no-underline inline-block">&nbsp;{{ sortingArrow('numBooks') }}</span></th>
<th v-if="userCanUpdate" class="w-40"></th> <th v-if="userCanUpdate" class="w-40"></th>
</tr> </tr>
<tr v-for="narrator in sortedNarrators" :key="narrator.id"> <tr v-for="narrator in narrators" :key="narrator.id">
<td> <td>
<nuxt-link v-if="selectedNarrator?.id !== narrator.id" :to="`/library/${currentLibraryId}/bookshelf?filter=narrators.${narrator.id}`" class="text-sm md:text-base text-gray-100 hover:underline">{{ narrator.name }}</nuxt-link> <nuxt-link v-if="selectedNarrator?.id !== narrator.id" :to="`/library/${currentLibraryId}/bookshelf?filter=narrators.${narrator.id}`" class="text-sm md:text-base text-gray-100 hover:underline">{{ narrator.name }}</nuxt-link>
<form v-else @submit.prevent="saveClick"> <form v-else @submit.prevent="saveClick">
@ -64,8 +64,8 @@ export default {
narrators: [], narrators: [],
selectedNarrator: null, selectedNarrator: null,
newNarratorName: null, newNarratorName: null,
currentSortAttribute: '', sortBy: 'name',
currentSortOrder: 'asc' sortOrder: 'asc'
} }
}, },
computed: { computed: {
@ -77,14 +77,6 @@ export default {
}, },
userCanUpdate() { userCanUpdate() {
return this.$store.getters['user/getUserCanUpdate'] return this.$store.getters['user/getUserCanUpdate']
},
sortedNarrators() {
return this.narrators.sort((a,b) => {
let modifier = this.currentSortOrder == 'asc'? 1: -1;
if (a[this.currentSortAttribute] < b[this.currentSortAttribute]) return -1*modifier;
if (a[this.currentSortAttribute] > b[this.currentSortAttribute]) return modifier;
return 0;
})
} }
}, },
methods: { methods: {
@ -153,8 +145,12 @@ export default {
}) })
}, },
async init() { async init() {
await this.fetchNarrators()
},
async fetchNarrators() {
this.loading = true
this.narrators = await this.$axios this.narrators = await this.$axios
.$get(`/api/libraries/${this.currentLibraryId}/narrators`) .$get(`/api/libraries/${this.currentLibraryId}/narrators`, {params: {sortOrder: this.sortOrder, sortBy: this.sortBy}})
.then((response) => response.narrators) .then((response) => response.narrators)
.catch((error) => { .catch((error) => {
console.error('Failed to load narrators', error) console.error('Failed to load narrators', error)
@ -162,22 +158,22 @@ export default {
}) })
this.loading = false this.loading = false
}, },
sortNarratorsBy(attribute) { async sortNarratorsBy(attribute) {
if (this.currentSortAttribute == attribute) { if (this.sortBy == attribute) {
if (this.currentSortOrder == 'asc') { if (this.sortOrder == 'asc') {
this.currentSortOrder = 'desc'; this.sortOrder = 'desc';
} else { } else {
this.currentSortOrder = 'asc'; this.sortOrder = 'asc';
} }
} else { } else {
this.currentSortAttribute = attribute; this.sortBy = attribute;
this.currentSortOrder = 'asc' this.sortOrder = 'asc';
} }
await this.fetchNarrators();
}, },
sortingArrow(attribute) { sortingArrow(attribute) {
if (this.currentSortAttribute == attribute) { if (this.sortBy == attribute) {
return this.currentSortOrder == 'asc'? '↓' : '↑'; return this.sortOrder == 'asc'? '▲' : '▼';
} else { } else {
return ''; return '';
} }

8
server/controllers/LibraryController.js
View file

@ -1140,8 +1140,14 @@ class LibraryController {
}) })
} }
// sorting
const key = req.query.sortBy === 'numBooks' ? 'numBooks' : 'name';
const order = req.query.sortOrder === 'desc' ? 'desc' : 'asc';
const narratorArr = Object.values(narrators);
const sorted = naturalSort(narratorArr)[order]((n) => n[key])
res.json({ res.json({
narrators: naturalSort(Object.values(narrators)).asc((n) => n.name) narrators: sorted
}) })
} }