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

client/components/tables/podcast/EpisodeTableRow.vue

@@ -1,11 +1,6 @@
 <template>
   <div class="w-full px-2 py-3 overflow-hidden relative border-b border-white border-opacity-10" @mouseover="mouseover" @mouseleave="mouseleave">
     <div v-if="episode" class="flex items-center h-24">
-      <div v-show="userCanUpdate" class="w-12 min-w-12 max-w-16 h-full">
-        <div class="flex h-full items-center justify-center">
-          <span class="material-icons drag-handle text-lg text-white text-opacity-50 hover:text-opacity-100">menu</span>
-        </div>
-      </div>
       <div class="flex-grow px-2">
         <p class="text-sm font-semibold">
           {{ title }}
@@ -49,8 +44,8 @@ export default {
     episode: {
       type: Object,
       default: () => {}
-    },
-    isDragging: Boolean
+    }
+    // isDragging: Boolean
   },
   data() {
     return {
@@ -59,15 +54,15 @@ export default {
       isHovering: false
     }
   },
-  watch: {
-    isDragging: {
-      handler(newVal) {
-        if (newVal) {
-          this.isHovering = false
-        }
-      }
-    }
-  },
+  // watch: {
+  //   isDragging: {
+  //     handler(newVal) {
+  //       if (newVal) {
+  //         this.isHovering = false
+  //       }
+  //     }
+  //   }
+  // },
   computed: {
     userCanUpdate() {
       return this.$store.getters['user/getUserCanUpdate']
@@ -117,7 +112,7 @@ export default {
   },
   methods: {
     mouseover() {
-      if (this.isDragging) return
+      // if (this.isDragging) return
       this.isHovering = true
     },
     mouseleave() {

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>