Added sorting by sequence for series and collapsing series in series view

2025-10-31 10:27:01 -04:00 · 2022-11-03 09:11:33 -04:00 · 2022-11-03 09:11:33 -04:00 · b1111912f7
commit b1111912f7
parent c1035d97e8
5 changed files with 137 additions and 79 deletions
--- a/client/components/app/BookShelfToolbar.vue
+++ b/client/components/app/BookShelfToolbar.vue
@ -28,13 +28,19 @@
            <span class="font-mono">{{ numShowing }}</span>
          </div>
          <div class="flex-grow" />
-          <ui-btn color="primary" small :loading="processingSeries" class="flex items-center" @click="markSeriesFinished">
+          <ui-checkbox v-model="settings.collapseBookSeries" label="Collapse Series" checkbox-bg="bg"
+            check-color="white" small class="mr-2" @input="updateCollapseBookSeries" />
+          <ui-btn color="primary" small :loading="processingSeries" class="flex items-center ml-1 sm:ml-4"
+            @click="markSeriesFinished">
            <div class="h-5 w-5">
-              <svg v-if="isSeriesFinished" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="rgb(63, 181, 68)">
-                <path d="M19 1H5c-1.1 0-1.99.9-1.99 2L3 15.93c0 .69.35 1.3.88 1.66L12 23l8.11-5.41c.53-.36.88-.97.88-1.66L21 3c0-1.1-.9-2-2-2zm-9 15l-5-5 1.41-1.41L10 13.17l7.59-7.59L19 7l-9 9z" />
+              <svg v-if="isSeriesFinished" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
+                fill="rgb(63, 181, 68)">
+                <path
+                  d="M19 1H5c-1.1 0-1.99.9-1.99 2L3 15.93c0 .69.35 1.3.88 1.66L12 23l8.11-5.41c.53-.36.88-.97.88-1.66L21 3c0-1.1-.9-2-2-2zm-9 15l-5-5 1.41-1.41L10 13.17l7.59-7.59L19 7l-9 9z" />
              </svg>
              <svg v-else xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
-                <path d="M19 1H5c-1.1 0-1.99.9-1.99 2L3 15.93c0 .69.35 1.3.88 1.66L12 23l8.11-5.41c.53-.36.88-.97.88-1.66L21 3c0-1.1-.9-2-2-2zm-7 19.6l-7-4.66V3h14v12.93l-7 4.67zm-2.01-7.42l-2.58-2.59L6 12l4 4 8-8-1.42-1.42z" />
+                <path
+                  d="M19 1H5c-1.1 0-1.99.9-1.99 2L3 15.93c0 .69.35 1.3.88 1.66L12 23l8.11-5.41c.53-.36.88-.97.88-1.66L21 3c0-1.1-.9-2-2-2zm-7 19.6l-7-4.66V3h14v12.93l-7 4.67zm-2.01-7.42l-2.58-2.59L6 12l4 4 8-8-1.42-1.42z" />
              </svg>
            </div>
            <span class="pl-2"> Mark Series {{ isSeriesFinished ? 'Not Finished' : 'Finished' }}</span>
@ -280,6 +286,9 @@ export default {
    updateCollapseSeries() {
      this.saveSettings()
    },
+    updateCollapseBookSeries() {
+      this.saveSettings()
+    },
    saveSettings() {
      this.$store.dispatch('user/updateUserSettings', this.settings)
    },
--- a/client/components/app/LazyBookshelf.vue
+++ b/client/components/app/LazyBookshelf.vue
@ -122,6 +122,9 @@ export default {
    collapseSeries() {
      return this.$store.getters['user/getUserSetting']('collapseSeries')
    },
+    collapseBookSeries() {
+      return this.$store.getters['user/getUserSetting']('collapseBookSeries')
+    },
    coverAspectRatio() {
      return this.$store.getters['libraries/getBookCoverAspectRatio']
    },
@ -452,6 +455,9 @@ export default {
        searchParams.set('filter', this.seriesFilterBy)
      } else if (this.page === 'series-books') {
        searchParams.set('filter', `series.${this.$encode(this.seriesId)}`)
+        if (this.collapseBookSeries) {
+          searchParams.set('collapseseries', 1)
+        }
      } else {
        if (this.filterBy && this.filterBy !== 'all') {
          searchParams.set('filter', this.filterBy)
@ -467,8 +473,6 @@ export default {
      return searchParams.toString()
    },
    checkUpdateSearchParams() {
-      if (this.page === 'series-books') return false
-
      var newSearchParams = this.buildSearchParams()
      var currentQueryString = window.location.search
      if (currentQueryString && currentQueryString.startsWith('?')) currentQueryString = currentQueryString.slice(1)
--- a/client/components/cards/LazyBookCard.vue
+++ b/client/components/cards/LazyBookCard.vue
@ -22,12 +22,16 @@
      }}</p>
    </div>

-    <div v-if="seriesSequenceList"
-      class="absolute z-20 top-1.5 right-1.5 rounded-md leading-3 text-sm p-1 font-semibold text-white flex items-center justify-center bg-black bg-opacity-90 box-shadow-md"
-      style="background-color: #78350f">#{{ seriesSequenceList }}</div>
-    <div v-else-if="booksInSeries"
-      class="absolute z-20 top-1.5 right-1.5 rounded-md leading-3 text-sm p-1 font-semibold text-white flex items-center justify-center"
-      style="background-color: #cd9d49dd">{{ booksInSeries }}</div>
+    <div v-if="seriesSequenceList" class="absolute rounded-lg bg-black bg-opacity-90 box-shadow-md z-20 text-right"
+      :style="{ top: 0.375 * sizeMultiplier + 'rem', right: 0.375 * sizeMultiplier + 'rem', padding: `${0.1 * sizeMultiplier}rem ${0.25 * sizeMultiplier}rem` }"
+      style="background-color: #78350f">
+      <p :style="{ fontSize: sizeMultiplier * 0.8 + 'rem' }">#{{ seriesSequenceList }}</p>
+    </div>
+    <div v-else-if="booksInSeries" class="absolute rounded-lg bg-black bg-opacity-90 box-shadow-md z-20"
+      :style="{ top: 0.375 * sizeMultiplier + 'rem', right: 0.375 * sizeMultiplier + 'rem', padding: `${0.1 * sizeMultiplier}rem ${0.25 * sizeMultiplier}rem` }"
+      style="background-color: #cd9d49dd">
+      <p :style="{ fontSize: sizeMultiplier * 0.8 + 'rem' }">{{ booksInSeries }}</p>
+    </div>

    <div class="w-full h-full absolute top-0 left-0 rounded overflow-hidden z-10">
      <div v-show="libraryItem && !imageReady"
--- a/client/components/controls/LibrarySortSelect.vue
+++ b/client/components/controls/LibrarySortSelect.vue
@ -1,19 +1,27 @@
 <template>
  <div ref="wrapper" class="relative" v-click-outside="clickOutside">
-    <button type="button" class="relative w-full h-full bg-fg border border-gray-500 hover:border-gray-400 rounded shadow-sm pl-3 pr-3 py-0 text-left focus:outline-none sm:text-sm cursor-pointer" aria-haspopup="listbox" aria-expanded="true" aria-labelledby="listbox-label" @click.prevent="showMenu = !showMenu">
+    <button type="button"
+      class="relative w-full h-full bg-fg border border-gray-500 hover:border-gray-400 rounded shadow-sm pl-3 pr-3 py-0 text-left focus:outline-none sm:text-sm cursor-pointer"
+      aria-haspopup="listbox" aria-expanded="true" aria-labelledby="listbox-label"
+      @click.prevent="showMenu = !showMenu">
      <span class="flex items-center justify-between">
        <span class="block truncate text-xs" :class="!selectedText ? 'text-gray-300' : ''">{{ selectedText }}</span>
        <span class="material-icons text-lg text-yellow-400">{{ descending ? 'expand_more' : 'expand_less' }}</span>
      </span>
    </button>

-    <ul v-show="showMenu" class="absolute z-10 mt-1 w-full bg-bg border border-black-200 shadow-lg max-h-80 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm" role="listbox" aria-labelledby="listbox-label">
+    <ul v-show="showMenu"
+      class="absolute z-10 mt-1 w-full bg-bg border border-black-200 shadow-lg max-h-96 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm"
+      role="listbox" aria-labelledby="listbox-label">
      <template v-for="item in selectItems">
-        <li :key="item.value" class="text-gray-50 select-none relative py-2 pr-9 cursor-pointer hover:bg-black-400" :class="item.value === selected ? 'bg-primary bg-opacity-50' : ''" role="option" @click="clickedOption(item.value)">
+        <li :key="item.value" class="text-gray-50 select-none relative py-2 pr-9 cursor-pointer hover:bg-black-400"
+          :class="item.value === selected ? 'bg-primary bg-opacity-50' : ''" role="option"
+          @click="clickedOption(item.value)">
          <div class="flex items-center">
            <span class="font-normal ml-3 block truncate text-xs">{{ item.text }}</span>
          </div>
-          <span v-if="item.value === selected" class="text-yellow-400 absolute inset-y-0 right-0 flex items-center pr-4">
+          <span v-if="item.value === selected"
+            class="text-yellow-400 absolute inset-y-0 right-0 flex items-center pr-4">
            <span class="material-icons text-xl">{{ descending ? 'expand_more' : 'expand_less' }}</span>
          </span>
        </li>
@ -29,46 +37,54 @@ export default {
    descending: Boolean
  },
  data() {
+    const bookItems = [
+      {
+        text: 'Title',
+        value: 'media.metadata.title'
+      },
+      {
+        text: 'Author (First Last)',
+        value: 'media.metadata.authorName'
+      },
+      {
+        text: 'Author (Last, First)',
+        value: 'media.metadata.authorNameLF'
+      },
+      {
+        text: 'Published Year',
+        value: 'media.metadata.publishedYear'
+      },
+      {
+        text: 'Added At',
+        value: 'addedAt'
+      },
+      {
+        text: 'Size',
+        value: 'size'
+      },
+      {
+        text: 'Duration',
+        value: 'media.duration'
+      },
+      {
+        text: 'File Birthtime',
+        value: 'birthtimeMs'
+      },
+      {
+        text: 'File Modified',
+        value: 'mtimeMs'
+      }
+    ]
+
+    const seriesItems = [...bookItems, {
+      text: 'Sequence',
+      value: 'sequence'
+    }]
+
    return {
      showMenu: false,
-      bookItems: [
-        {
-          text: 'Title',
-          value: 'media.metadata.title'
-        },
-        {
-          text: 'Author (First Last)',
-          value: 'media.metadata.authorName'
-        },
-        {
-          text: 'Author (Last, First)',
-          value: 'media.metadata.authorNameLF'
-        },
-        {
-          text: 'Published Year',
-          value: 'media.metadata.publishedYear'
-        },
-        {
-          text: 'Added At',
-          value: 'addedAt'
-        },
-        {
-          text: 'Size',
-          value: 'size'
-        },
-        {
-          text: 'Duration',
-          value: 'media.duration'
-        },
-        {
-          text: 'File Birthtime',
-          value: 'birthtimeMs'
-        },
-        {
-          text: 'File Modified',
-          value: 'mtimeMs'
-        }
-      ],
+      bookItems: bookItems,
+      seriesItems: seriesItems,
      podcastItems: [
        {
          text: 'Title',
@ -122,8 +138,21 @@ export default {
      return this.$store.getters['libraries/getCurrentLibraryMediaType'] == 'podcast'
    },
    selectItems() {
-      if (this.isPodcast) return this.podcastItems
-      return this.bookItems
+      let items = null
+      if (this.isPodcast) {
+        items = this.podcastItems
+      } else if (this.$store.getters['user/getUserSetting']('filterBy').startsWith('series.')) {
+        items = this.seriesItems
+      } else {
+        items = this.bookItems
+      }
+
+      if (!items.some(i => i.value === this.selected)) {
+        this.selected = items[0].value
+        this.selectedDesc = !this.defaultsToAsc(items[0].value)
+      }
+
+      return items
    },
    selectedText() {
      var _selected = this.selected
@ -143,12 +172,19 @@ export default {
        this.selectedDesc = !this.selectedDesc
      } else {
        this.selected = val
-        if (val == 'media.metadata.title' || val == 'media.metadata.author' || val == 'media.metadata.authorName' || val == 'media.metadata.authorNameLF') {
-          this.selectedDesc = false
-        }
+        if (this.defaultsToAsc(val)) this.selectedDesc = false
      }
      this.showMenu = false
      this.$nextTick(() => this.$emit('change', val))
+    },
+    defaultsToAsc(val) {
+      return (
+        val == 'media.metadata.title' ||
+        val == 'media.metadata.author' ||
+        val == 'media.metadata.authorName' ||
+        val == 'media.metadata.authorNameLF' ||
+        val == 'sequence'
+      );
    }
  }
 }
--- a/server/controllers/LibraryController.js
+++ b/server/controllers/LibraryController.js
@ -181,7 +181,7 @@ class LibraryController {

      if (!(collapsedItems.length == 1 && collapsedItems[0].collapsedSeries)) {
        libraryItems = collapsedItems
-        payload.total = collapsedItems.length
+        payload.total = libraryItems.length
      }
    }

@ -207,8 +207,10 @@ class LibraryController {
        sortKey += 'IgnorePrefix'
      }

-      // If series are collapsed and not sorting by title, sort all collapsed series to the end in alphabetical order
-      if (payload.collapseseries && !sortByTitle) {
+      // If series are collapsed and not sorting by title or sequence, 
+      // sort all collapsed series to the end in alphabetical order
+      const sortBySequence = filterSeries && (sortKey === 'sequence')
+      if (payload.collapseseries && !(sortByTitle || sortBySequence)) {
        sortArray.push({
          asc: (li) => {
            if (li.collapsedSeries) {
@ -222,10 +224,13 @@ class LibraryController {
        })
      }

+      // Sort series based on the sortBy attribute
      var direction = payload.sortDesc ? 'desc' : 'asc'
      sortArray.push({
        [direction]: (li) => {
-          if (mediaIsBook && sortByTitle && li.collapsedSeries) {
+          if (mediaIsBook && sortBySequence) {
+            return li.media.metadata.getSeries(filterSeries).sequence
+          } else if (mediaIsBook && sortByTitle && li.collapsedSeries) {
            return this.db.serverSettings.sortingIgnorePrefix ?
              li.collapsedSeries.nameIgnorePrefix :
              li.collapsedSeries.name
@ -269,24 +274,24 @@ class LibraryController {
        // If collapsing by series and filtering by a series, generate the list of sequences the collapsed
        // series represents in the filtered series
        if (filterSeries) {
-          json.collapsedSeries.seriesSequenceList = li.collapsedSeries.books
-            .map(b => parseFloat(b.filterSeriesSequence))
-            .filter(s => s)
-            .sort((a, b) => a - b)
-            .reduce((ranges, currentSequence) => {
-              let lastRange = ranges.at(-1)
+          json.collapsedSeries.seriesSequenceList =
+            naturalSort(li.collapsedSeries.books.map(b => b.filterSeriesSequence)).asc()
+              .reduce((ranges, currentSequence) => {
+                let lastRange = ranges.at(-1)
+                let isNumber = /^(\d+|\d+\.\d*|\d*\.\d+)$/.test(currentSequence)
+                if (isNumber) currentSequence = parseFloat(currentSequence)

-              if (lastRange && ((lastRange.end + 1) == currentSequence)) {
-                lastRange.end = currentSequence
-              }
-              else {
-                ranges.push({ start: currentSequence, end: currentSequence })
-              }
+                if (lastRange && isNumber && lastRange.isNumber && ((lastRange.end + 1) == currentSequence)) {
+                  lastRange.end = currentSequence
+                }
+                else {
+                  ranges.push({ start: currentSequence, end: currentSequence, isNumber: isNaN(currentSequence) })
+                }

-              return ranges
-            }, [])
-            .map(r => r.start == r.end ? r.start : `${r.start}-${r.end}`)
-            .join(', ')
+                return ranges
+              }, [])
+              .map(r => r.start == r.end ? r.start : `${r.start}-${r.end}`)
+              .join(', ')
        }
      } else if (filterSeries) {
        // If filtering by series, make sure to include the series metadata