Update:Remove manual sorting of podcast episodes and default to sort by published at

client/components/tables/podcast/EpisodesTable.vue

@@ -9,23 +9,14 @@
       </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">
-        <template v-for="episode in episodesCopy">
-          <tables-podcast-episode-table-row :key="episode.id" :is-dragging="drag" :episode="episode" :library-item-id="libraryItem.id" class="item" :class="drag ? '' : 'episode'" @edit="editEpisode" />
-        </template>
-      </transition-group>
-    </draggable>
+    <template v-for="episode in episodes">
+      <tables-podcast-episode-table-row :key="episode.id" :episode="episode" :library-item-id="libraryItem.id" class="item" @edit="editEpisode" />
+    </template>
   </div>
 </template>
 
 <script>
-import draggable from 'vuedraggable'
-
 export default {
-  components: {
-    draggable
-  },
   props: {
     libraryItem: {
       type: Object,
@@ -34,30 +25,11 @@ export default {
   },
   data() {
     return {
-      sortKey: 'index',
-      sortDesc: true,
-      drag: false,
-      episodesCopy: [],
-      orderChanged: false,
-      savingOrder: false
-    }
-  },
-  watch: {
-    libraryItem: {
-      handler(newVal) {
-        this.init()
-      }
+      sortKey: 'publishedAt',
+      sortDesc: true
     }
   },
   computed: {
-    dragOptions() {
-      return {
-        animation: 200,
-        group: 'description',
-        ghostClass: 'ghost',
-        disabled: !this.userCanUpdate
-      }
-    },
     userCanUpdate() {
       return this.$store.getters['user/getUserCanUpdate']
     },
@@ -72,66 +44,13 @@ 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.$store.commit('setSelectedLibraryItem', this.libraryItem)
       this.$store.commit('globals/setSelectedEpisode', episode)
       this.$store.commit('globals/setShowEditPodcastEpisodeModal', true)
-    },
-    draggableUpdate() {
-      this.orderChanged = this.checkHasOrderChanged()
-    },
-    async saveOrder() {
-      if (!this.userCanUpdate) return
-
-      this.savingOrder = true
-
-      var episodesUpdate = {
-        episodes: this.episodesCopy.map((b) => b.id)
-      }
-      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) => {
-        return {
-          ...ep
-        }
-      })
     }
   },
-  mounted() {
-    this.init()
-  }
+  mounted() {}
 }
 </script>