Add:Podcast episode table sort options #376

components/modals/OrderModal.vue

@@ -22,7 +22,8 @@ export default {
   props: {
     value: Boolean,
     orderBy: String,
-    descending: Boolean
+    descending: Boolean,
+    episodes: Boolean
   },
   data() {
     return {
@@ -89,6 +90,24 @@ export default {
           text: 'File Modified',
           value: 'mtimeMs'
         }
+      ],
+      episodeItems: [
+        {
+          text: 'Pub Date',
+          value: 'publishedAt'
+        },
+        {
+          text: 'Title',
+          value: 'title'
+        },
+        {
+          text: 'Season',
+          value: 'season'
+        },
+        {
+          text: 'Episode',
+          value: 'episode'
+        }
       ]
     }
   },
@@ -121,6 +140,7 @@ export default {
       return this.$store.getters['libraries/getCurrentLibraryMediaType'] === 'podcast'
     },
     items() {
+      if (this.episodes) return this.episodeItems
       if (this.isPodcast) return this.podcastItems
       return this.bookItems
     }

components/tables/podcast/EpisodesTable.vue

@@ -49,6 +49,8 @@
     <modals-dialog v-model="showFiltersModal" title="Episode Filter" :items="filterItems" :selected="filterKey" @action="setFilter" />
 
     <modals-podcast-episodes-feed-modal v-model="showPodcastEpisodeFeed" :library-item="libraryItem" :episodes="podcastFeedEpisodes" />
+
+    <modals-order-modal v-model="showSortModal" :order-by.sync="sortKey" :descending.sync="sortDesc" episodes />
   </div>
 </template>
 
@@ -76,6 +78,7 @@ export default {
     return {
       episodesCopy: [],
       showFiltersModal: false,
+      showSortModal: false,
       sortKey: 'publishedAt',
       sortDesc: true,
       filterKey: 'incomplete',
@@ -167,10 +170,19 @@ export default {
     },
     episodesSorted() {
       return this.episodesFiltered.sort((a, b) => {
-        if (this.sortDesc) {
+        let aValue = a[this.sortKey]
-          return String(b[this.sortKey]).localeCompare(String(a[this.sortKey]), undefined, { numeric: true, sensitivity: 'base' })
+        let bValue = b[this.sortKey]
+
+        // Sort episodes with no pub date as the oldest
+        if (this.sortKey === 'publishedAt') {
+          if (!aValue) aValue = Number.MAX_VALUE
+          if (!bValue) bValue = Number.MAX_VALUE
         }
-        return String(a[this.sortKey]).localeCompare(String(b[this.sortKey]), undefined, { numeric: true, sensitivity: 'base' })
+
+        if (this.sortDesc) {
+          return String(bValue).localeCompare(String(aValue), undefined, { numeric: true, sensitivity: 'base' })
+        }
+        return String(aValue).localeCompare(String(bValue), undefined, { numeric: true, sensitivity: 'base' })
       })
     },
     // Map of local episodes where server episode id is key
@@ -185,9 +197,8 @@ export default {
     },
     sortText() {
       if (!this.sortKey) return ''
-      var _sel = this.episodeSortItems.find((i) => i.value === this.sortKey)
+      const _sel = this.episodeSortItems.find((i) => i.value === this.sortKey)
-      if (!_sel) return ''
+      return _sel?.text || ''
-      return _sel.text
     }
   },
   methods: {
@@ -249,7 +260,7 @@ export default {
       this.showFiltersModal = true
     },
     clickSort() {
-      this.sortDesc = !this.sortDesc
+      this.showSortModal = true
     },
     getEpisodeProgress(episode) {
       if (this.isLocal) return this.$store.getters['globals/getLocalMediaProgressById'](this.libraryItemId, episode.id)