Update:Cleanup bookshelf toolbars & fix siderail icon

2024-12-28 01:29:27 +01:00 · 2022-10-28 18:10:19 -05:00 · 2022-10-28 18:10:19 -05:00 · e752b4071d
commit e752b4071d
parent 685b4e77eb
12 changed files with 121 additions and 88 deletions
--- a/client/components/app/Appbar.vue
+++ b/client/components/app/Appbar.vue
@ -153,7 +153,7 @@ export default {
    cancelSelectionMode() {
      if (this.processingBatchDelete) return
      this.$store.commit('setSelectedLibraryItems', [])
-      this.$eventBus.$emit('bookshelf-clear-selection')
+      this.$eventBus.$emit('bookshelf_clear_selection')
      this.isAllSelected = false
    },
    toggleBatchRead() {
@ -172,7 +172,7 @@ export default {
          this.$toast.success('Batch update success!')
          this.$store.commit('setProcessingBatch', false)
          this.$store.commit('setSelectedLibraryItems', [])
-          this.$eventBus.$emit('bookshelf-clear-selection')
+          this.$eventBus.$emit('bookshelf_clear_selection')
        })
        .catch((error) => {
          this.$toast.error('Batch update failed')
@ -195,7 +195,7 @@ export default {
            this.processingBatchDelete = false
            this.$store.commit('setProcessingBatch', false)
            this.$store.commit('setSelectedLibraryItems', [])
-            this.$eventBus.$emit('bookshelf-clear-selection')
+            this.$eventBus.$emit('bookshelf_clear_selection')
          })
          .catch((error) => {
            this.$toast.error('Batch delete failed')
--- a/client/components/app/BookShelfRow.vue
+++ b/client/components/app/BookShelfRow.vue
@ -188,11 +188,11 @@ export default {
    }
  },
  mounted() {
-    this.$eventBus.$on('bookshelf-clear-selection', this.clearSelectedEntities)
+    this.$eventBus.$on('bookshelf_clear_selection', this.clearSelectedEntities)
    this.$eventBus.$on('item-selected', this.itemSelectedEvt)
  },
  beforeDestroy() {
-    this.$eventBus.$off('bookshelf-clear-selection', this.clearSelectedEntities)
+    this.$eventBus.$off('bookshelf_clear_selection', this.clearSelectedEntities)
    this.$eventBus.$off('item-selected', this.itemSelectedEvt)
  }
 }
--- a/client/components/app/BookShelfToolbar.vue
+++ b/client/components/app/BookShelfToolbar.vue
@ -1,16 +1,16 @@
 <template>
  <div class="w-full h-20 md:h-10 relative">
    <div class="flex md:hidden h-10 items-center">
-      <nuxt-link :to="`/library/${currentLibraryId}`" class="flex-grow h-full flex justify-center items-center" :class="homePage ? 'bg-primary bg-opacity-80' : 'bg-primary bg-opacity-40'">
+      <nuxt-link :to="`/library/${currentLibraryId}`" class="flex-grow h-full flex justify-center items-center" :class="isHomePage ? 'bg-primary bg-opacity-80' : 'bg-primary bg-opacity-40'">
        <p class="text-sm">Home</p>
      </nuxt-link>
-      <nuxt-link :to="`/library/${currentLibraryId}/bookshelf`" class="flex-grow h-full flex justify-center items-center" :class="showLibrary ? 'bg-primary bg-opacity-80' : 'bg-primary bg-opacity-40'">
+      <nuxt-link :to="`/library/${currentLibraryId}/bookshelf`" class="flex-grow h-full flex justify-center items-center" :class="isLibraryPage ? 'bg-primary bg-opacity-80' : 'bg-primary bg-opacity-40'">
        <p class="text-sm">Library</p>
      </nuxt-link>
-      <nuxt-link v-if="!isPodcastLibrary" :to="`/library/${currentLibraryId}/bookshelf/series`" class="flex-grow h-full flex justify-center items-center" :class="paramId === 'series' ? 'bg-primary bg-opacity-80' : 'bg-primary bg-opacity-40'">
+      <nuxt-link v-if="!isPodcastLibrary" :to="`/library/${currentLibraryId}/bookshelf/series`" class="flex-grow h-full flex justify-center items-center" :class="isSeriesPage ? 'bg-primary bg-opacity-80' : 'bg-primary bg-opacity-40'">
        <p class="text-sm">Series</p>
      </nuxt-link>
-      <nuxt-link v-if="!isPodcastLibrary" :to="`/library/${currentLibraryId}/bookshelf/collections`" class="flex-grow h-full flex justify-center items-center" :class="paramId === 'collections' ? 'bg-primary bg-opacity-80' : 'bg-primary bg-opacity-40'">
+      <nuxt-link v-if="!isPodcastLibrary" :to="`/library/${currentLibraryId}/bookshelf/collections`" class="flex-grow h-full flex justify-center items-center" :class="isCollectionsPage ? 'bg-primary bg-opacity-80' : 'bg-primary bg-opacity-40'">
        <p class="text-sm">Collections</p>
      </nuxt-link>
      <nuxt-link v-if="isPodcastLibrary && userIsAdminOrUp" :to="`/library/${currentLibraryId}/podcast/search`" class="flex-grow h-full flex justify-center items-center" :class="isPodcastSearchPage ? 'bg-primary bg-opacity-80' : 'bg-primary bg-opacity-40'">
@ -42,9 +42,10 @@
        </div>
        <div class="flex-grow hidden sm:inline-block" />

-        <ui-checkbox v-show="showSortFilters && !isPodcast" v-model="settings.collapseSeries" label="Collapse Series" checkbox-bg="bg" check-color="white" small class="mr-2" @input="updateCollapseSeries" />
-        <controls-filter-select v-show="showSortFilters" 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-show="showSortFilters" 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" />
+        <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" />

        <ui-btn v-if="isIssuesFilter && userCanDelete" :loading="processingIssues" color="error" small class="ml-4" @click="removeAllIssues">Remove All {{ numShowing }} {{ entityName }}</ui-btn>
      </template>
@ -81,11 +82,29 @@ export default {
      settings: {},
      hasInit: false,
      totalEntities: 0,
-      keywordFilter: null,
-      keywordTimeout: null,
      processingSeries: false,
      processingIssues: false,
-      processingAuthors: false
+      processingAuthors: false,
+      seriesSort: 'name',
+      seriesSortDesc: false,
+      seriesSortItems: [
+        {
+          text: 'Name',
+          value: 'name'
+        },
+        {
+          text: '# of Books',
+          value: 'numBooks'
+        },
+        {
+          text: 'Added At',
+          value: 'addedAt'
+        },
+        {
+          text: 'Total Duration',
+          value: 'totalDuration'
+        }
+      ]
    }
  },
  computed: {
@ -98,25 +117,6 @@ export default {
    userCanUpdate() {
      return this.$store.getters['user/getUserCanUpdate']
    },
-    isPodcast() {
-      return this.$store.getters['libraries/getCurrentLibraryMediaType'] == 'podcast'
-    },
-    showSortFilters() {
-      return this.page === ''
-    },
-    numShowing() {
-      return this.totalEntities
-    },
-    entityName() {
-      if (this.isPodcast) return 'Podcasts'
-      if (!this.page) return 'Books'
-      if (this.page === 'series') return 'Series'
-      if (this.page === 'collections') return 'Collections'
-      return ''
-    },
-    paramId() {
-      return this.$route.params ? this.$route.params.id || '' : ''
-    },
    currentLibraryId() {
      return this.$store.state.libraries.currentLibraryId
    },
@ -126,14 +126,30 @@ export default {
    isPodcastLibrary() {
      return this.currentLibraryMediaType === 'podcast'
    },
-    homePage() {
+    isLibraryPage() {
+      return this.page === ''
+    },
+    isSeriesPage() {
+      return this.page === 'series'
+    },
+    isCollectionsPage() {
+      return this.page === 'collections'
+    },
+    isHomePage() {
      return this.$route.name === 'library-library'
    },
-    libraryBookshelfPage() {
-      return this.$route.name === 'library-library-bookshelf-id'
+    isPodcastSearchPage() {
+      return this.$route.name === 'library-library-podcast-search'
    },
-    showLibrary() {
-      return this.libraryBookshelfPage && this.paramId === '' && !this.showingIssues
+    numShowing() {
+      return this.totalEntities
+    },
+    entityName() {
+      if (this.isPodcastLibrary) return 'Podcasts'
+      if (!this.page) return 'Books'
+      if (this.isSeriesPage) return 'Series'
+      if (this.isCollectionsPage) return 'Collections'
+      return ''
    },
    seriesName() {
      return this.selectedSeries ? this.selectedSeries.name : null
@ -153,9 +169,6 @@ export default {
    },
    isIssuesFilter() {
      return this.filterBy === 'issues' && this.$route.query.filter === 'issues'
-    },
-    isPodcastSearchPage() {
-      return this.$route.name === 'library-library-podcast-search'
    }
  },
  methods: {
@ -235,6 +248,10 @@ export default {
    updateFilter() {
      this.saveSettings()
    },
+    updateSeriesSort() {
+      this.$store.commit('libraries/setSeriesSort', { sort: this.seriesSort, desc: this.seriesSortDesc })
+      this.$eventBus.$emit('series-sort-updated')
+    },
    updateCollapseSeries() {
      this.saveSettings()
    },
@ -251,15 +268,6 @@ export default {
    },
    setBookshelfTotalEntities(totalEntities) {
      this.totalEntities = totalEntities
-    },
-    keywordFilterInput() {
-      clearTimeout(this.keywordTimeout)
-      this.keywordTimeout = setTimeout(() => {
-        this.keywordUpdated(this.keywordFilter)
-      }, 1000)
-    },
-    keywordUpdated() {
-      this.$eventBus.$emit('bookshelf-keyword-filter', this.keywordFilter)
    }
  },
  mounted() {
--- a/client/components/app/LazyBookshelf.vue
+++ b/client/components/app/LazyBookshelf.vue
@ -98,6 +98,12 @@ export default {
      if (!this.page) return 'books'
      return this.page
    },
+    seriesSortBy() {
+      return this.$store.state.libraries.seriesSort
+    },
+    seriesSortDesc() {
+      return this.$store.state.libraries.seriesSortDesc
+    },
    orderBy() {
      return this.$store.getters['user/getUserSetting']('orderBy')
    },
@ -417,12 +423,15 @@ export default {
      this.$nextTick(this.remountEntities)
    },
    buildSearchParams() {
-      if (this.page === 'search' || this.page === 'series' || this.page === 'collections') {
+      if (this.page === 'search' || this.page === 'collections') {
        return ''
      }

      let searchParams = new URLSearchParams()
-      if (this.page === 'series-books') {
+      if (this.page === 'series') {
+        searchParams.set('sort', this.seriesSortBy)
+        searchParams.set('desc', this.seriesSortDesc ? 1 : 0)
+      } else if (this.page === 'series-books') {
        searchParams.set('filter', `series.${this.$encode(this.seriesId)}`)
      } else {
        if (this.filterBy && this.filterBy !== 'all') {
@ -458,6 +467,12 @@ export default {

      return false
    },
+    seriesSortUpdated() {
+      var wasUpdated = this.checkUpdateSearchParams()
+      if (wasUpdated) {
+        this.resetEntities()
+      }
+    },
    settingsUpdated(settings) {
      var wasUpdated = this.checkUpdateSearchParams()
      if (wasUpdated) {
@ -469,10 +484,7 @@ export default {
    scroll(e) {
      if (!e || !e.target) return
      var { scrollTop } = e.target
-      // clearTimeout(this.scrollTimeout)
-      // this.scrollTimeout = setTimeout(() => {
      this.handleScroll(scrollTop)
-      // }, 250)
    },
    libraryItemAdded(libraryItem) {
      console.log('libraryItem added', libraryItem)
@ -604,7 +616,8 @@ export default {
        }
      })

-      this.$eventBus.$on('bookshelf-clear-selection', this.clearSelectedEntities)
+      this.$eventBus.$on('series-sort-updated', this.seriesSortUpdated)
+      this.$eventBus.$on('bookshelf_clear_selection', this.clearSelectedEntities)
      this.$eventBus.$on('socket_init', this.socketInit)

      this.$store.commit('user/addSettingsListener', { id: 'lazy-bookshelf', meth: this.settingsUpdated })
@ -628,7 +641,9 @@ export default {
      if (bookshelf) {
        bookshelf.removeEventListener('scroll', this.scroll)
      }
-      this.$eventBus.$off('bookshelf-clear-selection', this.clearSelectedEntities)
+
+      this.$eventBus.$off('series-sort-updated', this.seriesSortUpdated)
+      this.$eventBus.$off('bookshelf_clear_selection', this.clearSelectedEntities)
      this.$eventBus.$off('socket_init', this.socketInit)

      this.$store.commit('user/removeSettingsListener', 'lazy-bookshelf')
--- a/client/components/app/SideRail.vue
+++ b/client/components/app/SideRail.vue
@ -64,7 +64,7 @@
    </nuxt-link>

    <nuxt-link v-if="isPodcastLibrary && userIsAdminOrUp" :to="`/library/${currentLibraryId}/podcast/search`" class="w-full h-20 flex flex-col items-center justify-center text-white text-opacity-80 border-b border-primary border-opacity-70 hover:bg-primary cursor-pointer relative" :class="isPodcastSearchPage ? 'bg-primary bg-opacity-80' : 'bg-bg bg-opacity-60'">
-      <icons-podcast-svg class="w-6 h-6" />
+      <span class="abs-icons icon-podcast text-xl"></span>

      <p class="font-book pt-1.5" style="font-size: 0.9rem">Search</p>

--- a/client/components/cards/LazySeriesCard.vue
+++ b/client/components/cards/LazySeriesCard.vue
@ -1,5 +1,5 @@
 <template>
-  <div ref="card" :id="`series-card-${index}`" :style="{ width: width + 'px', height: height + 'px' }" class="rounded-sm z-30 cursor-pointer" @mousedown.prevent @mouseup.prevent @mousemove.prevent @mouseover="mouseover" @mouseleave="mouseleave" @click="clickCard">
+  <div ref="card" :id="`series-card-${index}`" :style="{ width: width + 'px', height: height + 'px' }" class="rounded-sm z-10 cursor-pointer" @mousedown.prevent @mouseup.prevent @mousemove.prevent @mouseover="mouseover" @mouseleave="mouseleave" @click="clickCard">
    <div class="absolute top-0 left-0 w-full box-shadow-book shadow-height" />
    <div class="w-full h-full bg-primary relative rounded overflow-hidden z-0">
      <covers-group-cover v-if="series" ref="cover" :id="seriesId" :name="displayTitle" :book-items="books" :width="width" :height="height" :book-cover-aspect-ratio="bookCoverAspectRatio" />
--- a/client/components/controls/EpisodeSortSelect.vue
+++ b/client/components/controls/EpisodeSortSelect.vue
@ -26,29 +26,15 @@
 export default {
  props: {
    value: String,
-    descending: Boolean
+    descending: Boolean,
+    items: {
+      type: Array,
+      default: () => []
+    }
  },
  data() {
    return {
-      showMenu: false,
-      items: [
-        {
-          text: 'Pub Date',
-          value: 'publishedAt'
-        },
-        {
-          text: 'Title',
-          value: 'title'
-        },
-        {
-          text: 'Season',
-          value: 'season'
-        },
-        {
-          text: 'Episode',
-          value: 'episode'
-        }
-      ]
+      showMenu: false
    }
  },
  computed: {
--- a/client/components/tables/podcast/EpisodesTable.vue
+++ b/client/components/tables/podcast/EpisodesTable.vue
@ -12,7 +12,7 @@
      </template>
      <template v-else>
        <controls-episode-filter-select v-model="filterKey" class="w-36 md:w-36 h-9 ml-1 sm:ml-4" />
-        <controls-episode-sort-select v-model="sortKey" :descending.sync="sortDesc" class="w-36 sm:w-44 md:w-48 h-9 ml-1 sm:ml-4" />
+        <controls-sort-select v-model="sortKey" :descending.sync="sortDesc" :items="sortItems" class="w-36 sm:w-44 md:w-48 h-9 ml-1 sm:ml-4" />
      </template>
    </div>
    <p v-if="!episodes.length" class="py-4 text-center text-lg">No Episodes</p>
@ -42,7 +42,25 @@ export default {
      showPodcastRemoveModal: false,
      selectedEpisodes: [],
      episodesToRemove: [],
-      processing: false
+      processing: false,
+      sortItems: [
+        {
+          text: 'Pub Date',
+          value: 'publishedAt'
+        },
+        {
+          text: 'Title',
+          value: 'title'
+        },
+        {
+          text: 'Season',
+          value: 'season'
+        },
+        {
+          text: 'Episode',
+          value: 'episode'
+        }
+      ]
    }
  },
  watch: {
--- a/client/components/widgets/EpisodeSlider.vue
+++ b/client/components/widgets/EpisodeSlider.vue
@ -150,11 +150,11 @@ export default {
    this.setScrollVars()
  },
  mounted() {
-    this.$eventBus.$on('bookshelf-clear-selection', this.clearSelectedEntities)
+    this.$eventBus.$on('bookshelf_clear_selection', this.clearSelectedEntities)
    this.$eventBus.$on('item-selected', this.itemSelectedEvt)
  },
  beforeDestroy() {
-    this.$eventBus.$off('bookshelf-clear-selection', this.clearSelectedEntities)
+    this.$eventBus.$off('bookshelf_clear_selection', this.clearSelectedEntities)
    this.$eventBus.$off('item-selected', this.itemSelectedEvt)
  }
 }
--- a/client/components/widgets/ItemSlider.vue
+++ b/client/components/widgets/ItemSlider.vue
@ -130,11 +130,11 @@ export default {
    this.setScrollVars()
  },
  mounted() {
-    this.$eventBus.$on('bookshelf-clear-selection', this.clearSelectedEntities)
+    this.$eventBus.$on('bookshelf_clear_selection', this.clearSelectedEntities)
    this.$eventBus.$on('item-selected', this.itemSelectedEvt)
  },
  beforeDestroy() {
-    this.$eventBus.$off('bookshelf-clear-selection', this.clearSelectedEntities)
+    this.$eventBus.$off('bookshelf_clear_selection', this.clearSelectedEntities)
    this.$eventBus.$off('item-selected', this.itemSelectedEvt)
  }
 }
--- a/client/layouts/default.vue
+++ b/client/layouts/default.vue
@ -474,7 +474,7 @@ export default {
      if (this.$store.getters['getNumLibraryItemsSelected'] && name === 'Escape') {
        // ESCAPE key cancels batch selection
        this.$store.commit('setSelectedLibraryItems', [])
-        this.$eventBus.$emit('bookshelf-clear-selection')
+        this.$eventBus.$emit('bookshelf_clear_selection')
        e.preventDefault()
        return
      }
--- a/client/store/libraries.js
+++ b/client/store/libraries.js
@ -8,7 +8,9 @@ export const state = () => ({
  folders: [],
  issues: 0,
  folderLastUpdate: 0,
-  filterData: null
+  filterData: null,
+  seriesSort: 'name',
+  seriesSortDesc: false
 })

 export const getters = {
@ -289,5 +291,9 @@ export const mutations = {
        state.filterData.languages.sort((a, b) => a.localeCompare(b))
      }
    }
+  },
+  setSeriesSort(state, { sort, desc }) {
+    state.seriesSort = sort
+    state.seriesSortDesc = desc
  }
 }