Add podcast episode sorting and saving sort order

client/components/tables/podcast/EpisodesTable.vue

@@ -1,6 +1,13 @@
 <template>
   <div class="w-full py-6">
-    <p class="text-lg mb-0 font-semibold">Episodes</p>
+    <div class="flex items-center mb-4">
+      <p class="text-lg mb-0 font-semibold">Episodes</p>
+      <div class="flex-grow" />
+      <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" @change="changeSort" />
+      <div v-if="userCanUpdate" class="w-12">
+        <ui-icon-btn v-if="orderChanged" :loading="savingOrder" icon="save" bg-color="primary" class="ml-auto" @click="saveOrder" />
+      </div>
+    </div>
     <p v-if="!episodes.length" class="py-4 text-center text-lg">No Episodes</p>
     <draggable v-model="episodesCopy" v-bind="dragOptions" class="list-group" handle=".drag-handle" draggable=".item" tag="div" @start="drag = true" @end="drag = false" @update="draggableUpdate">
       <transition-group type="transition" :name="!drag ? 'episode' : null">
@@ -29,15 +36,14 @@ export default {
   },
   data() {
     return {
+      sortKey: 'index',
+      sortDesc: true,
       drag: false,
-      dragOptions: {
-        animation: 200,
-        group: 'description',
-        ghostClass: 'ghost'
-      },
       episodesCopy: [],
       selectedEpisode: null,
-      showEditEpisodeModal: false
+      showEditEpisodeModal: false,
+      orderChanged: false,
+      savingOrder: false
     }
   },
   watch: {
@@ -48,6 +54,17 @@ export default {
     }
   },
   computed: {
+    dragOptions() {
+      return {
+        animation: 200,
+        group: 'description',
+        ghostClass: 'ghost',
+        disabled: !this.userCanUpdate
+      }
+    },
+    userCanUpdate() {
+      return this.$store.getters['user/getUserCanUpdate']
+    },
     media() {
       return this.libraryItem.media || {}
     },
@@ -59,23 +76,53 @@ export default {
     }
   },
   methods: {
+    changeSort() {
+      this.episodesCopy.sort((a, b) => {
+        if (this.sortDesc) {
+          return String(b[this.sortKey]).localeCompare(String(a[this.sortKey]), undefined, { numeric: true, sensitivity: 'base' })
+        }
+        return String(a[this.sortKey]).localeCompare(String(b[this.sortKey]), undefined, { numeric: true, sensitivity: 'base' })
+      })
+
+      this.orderChanged = this.checkHasOrderChanged()
+    },
+    checkHasOrderChanged() {
+      for (let i = 0; i < this.episodesCopy.length; i++) {
+        var epc = this.episodesCopy[i]
+        var ep = this.episodes[i]
+        if (epc.index != ep.index) {
+          return true
+        }
+      }
+      return false
+    },
     editEpisode(episode) {
       this.selectedEpisode = episode
       this.showEditEpisodeModal = true
     },
     draggableUpdate() {
+      this.orderChanged = this.checkHasOrderChanged()
+    },
+    async saveOrder() {
+      if (!this.userCanUpdate) return
+
+      this.savingOrder = true
+
       var episodesUpdate = {
         episodes: this.episodesCopy.map((b) => b.id)
       }
-      this.$axios
+      await this.$axios
         .$patch(`/api/items/${this.libraryItem.id}/episodes`, episodesUpdate)
         .then((podcast) => {
           console.log('Podcast updated', podcast)
+          this.$toast.success('Saved episode order')
+          this.orderChanged = false
         })
         .catch((error) => {
           console.error('Failed to update podcast', error)
           this.$toast.error('Failed to save podcast episode order')
         })
+      this.savingOrder = false
     },
     init() {
       this.episodesCopy = this.episodes.map((ep) => {