Add:Series sort #712

client/components/app/BookShelfToolbar.vue

@@ -45,7 +45,7 @@
         <ui-checkbox v-if="isLibraryPage && !isPodcastLibrary" v-model="settings.collapseSeries" label="Collapse Series" checkbox-bg="bg" check-color="white" small class="mr-2" @input="updateCollapseSeries" />
         <controls-filter-select v-if="isLibraryPage" v-model="settings.filterBy" class="w-36 sm:w-44 md:w-48 h-7.5 ml-1 sm:ml-4" @change="updateFilter" />
         <controls-order-select v-if="isLibraryPage" v-model="settings.orderBy" :descending.sync="settings.orderDesc" class="w-36 sm:w-44 md:w-48 h-7.5 ml-1 sm:ml-4" @change="updateOrder" />
-        <controls-sort-select v-if="isSeriesPage" v-model="seriesSort" :descending.sync="seriesSortDesc" :items="seriesSortItems" class="w-36 sm:w-44 md:w-48 h-7.5 ml-1 sm:ml-4" @change="updateSeriesSort" />
+        <controls-sort-select v-if="isSeriesPage" v-model="seriesSortBy" :descending.sync="seriesSortDesc" :items="seriesSortItems" class="w-36 sm:w-44 md:w-48 h-7.5 ml-1 sm:ml-4" @change="updateSeriesSort" />
 
         <ui-btn v-if="isIssuesFilter && userCanDelete" :loading="processingIssues" color="error" small class="ml-4" @click="removeAllIssues">Remove All {{ numShowing }} {{ entityName }}</ui-btn>
       </template>
@@ -85,19 +85,17 @@ export default {
       processingSeries: false,
       processingIssues: false,
       processingAuthors: false,
-      seriesSort: 'name',
-      seriesSortDesc: false,
       seriesSortItems: [
         {
           text: 'Name',
           value: 'name'
         },
         {
-          text: '# of Books',
+          text: 'Number of Books',
           value: 'numBooks'
         },
         {
-          text: 'Added At',
+          text: 'Date Added',
           value: 'addedAt'
         },
         {
@@ -169,6 +167,22 @@ export default {
     },
     isIssuesFilter() {
       return this.filterBy === 'issues' && this.$route.query.filter === 'issues'
+    },
+    seriesSortBy: {
+      get() {
+        return this.$store.state.libraries.seriesSortBy
+      },
+      set(val) {
+        this.$store.commit('libraries/setSeriesSortBy', val)
+      }
+    },
+    seriesSortDesc: {
+      get() {
+        return this.$store.state.libraries.seriesSortDesc
+      },
+      set(val) {
+        this.$store.commit('libraries/setSeriesSortDesc', val)
+      }
     }
   },
   methods: {
@@ -249,7 +263,6 @@ export default {
       this.saveSettings()
     },
     updateSeriesSort() {
-      this.$store.commit('libraries/setSeriesSort', { sort: this.seriesSort, desc: this.seriesSortDesc })
       this.$eventBus.$emit('series-sort-updated')
     },
     updateCollapseSeries() {

client/components/app/LazyBookshelf.vue

@@ -99,7 +99,7 @@ export default {
       return this.page
     },
     seriesSortBy() {
-      return this.$store.state.libraries.seriesSort
+      return this.$store.state.libraries.seriesSortBy
     },
     seriesSortDesc() {
       return this.$store.state.libraries.seriesSortDesc

client/components/cards/LazySeriesCard.vue

@@ -20,6 +20,7 @@
     </div>
     <div v-else class="absolute z-30 left-0 right-0 mx-auto -bottom-8 h-8 py-1 rounded-md text-center">
       <p class="truncate" :style="{ fontSize: labelFontSize + 'rem' }">{{ displayTitle }}</p>
+      <p v-if="displaySortLine" class="truncate text-gray-400" :style="{ fontSize: 0.8 * sizeMultiplier + 'rem' }">{{ displaySortLine }}</p>
     </div>
   </div>
 </template>
@@ -40,7 +41,8 @@ export default {
       type: Object,
       default: () => null
     },
-    sortingIgnorePrefix: Boolean
+    sortingIgnorePrefix: Boolean,
+    orderBy: String
   },
   data() {
     return {
@@ -52,6 +54,9 @@ export default {
     }
   },
   computed: {
+    dateFormat() {
+      return this.store.state.serverSettings.dateFormat
+    },
     labelFontSize() {
       if (this.width < 160) return 0.75
       return 0.875
@@ -73,12 +78,24 @@ export default {
       if (this.sortingIgnorePrefix) return this.nameIgnorePrefix || this.title
       return this.title
     },
+    displaySortLine() {
+      if (this.orderBy === 'addedAt') {
+        // return this.addedAt
+        return 'Added ' + this.$formatDate(this.addedAt, this.dateFormat)
+      } else if (this.orderBy === 'totalDuration') {
+        return 'Duration: ' + this.$elapsedPrettyExtended(this.totalDuration, false)
+      }
+      return null
+    },
     books() {
       return this.series ? this.series.books || [] : []
     },
     addedAt() {
       return this.series ? this.series.addedAt : 0
     },
+    totalDuration() {
+      return this.series ? this.series.totalDuration : 0
+    },
     seriesBookProgress() {
       return this.books
         .map((libraryItem) => {

client/mixins/bookshelfCardsHelpers.js

@@ -59,6 +59,8 @@ export default {
       if (this.entityName === 'books') {
         props.filterBy = this.filterBy
         props.orderBy = this.orderBy
+      } else if (this.entityName === 'series') {
+        props.orderBy = this.seriesSortBy
       }
 
       var _this = this

client/pages/library/_library/bookshelf/_id.vue

@@ -14,8 +14,13 @@ export default {
       return redirect('/oops?message=Library not found')
     }
 
+    // Set series sort by
+    if (query.sort && params.id === 'series') {
+      store.commit('libraries/setSeriesSortBy', query.sort)
+      store.commit('libraries/setSeriesSortDesc', !!query.desc)
+    }
     // Set filter by
-    if (query.filter) {
+    if (query.filter && params.id !== 'series') {
       store.dispatch('user/updateUserSettings', { filterBy: query.filter })
     }
 

client/store/libraries.js

@@ -9,7 +9,7 @@ export const state = () => ({
   issues: 0,
   folderLastUpdate: 0,
   filterData: null,
-  seriesSort: 'name',
+  seriesSortBy: 'name',
   seriesSortDesc: false
 })
 
@@ -292,8 +292,10 @@ export const mutations = {
       }
     }
   },
-  setSeriesSort(state, { sort, desc }) {
-    state.seriesSort = sort
-    state.seriesSortDesc = desc
+  setSeriesSortBy(state, sortBy) {
+    state.seriesSortBy = sortBy
+  },
+  setSeriesSortDesc(state, sortDesc) {
+    state.seriesSortDesc = sortDesc
   }
 }