Add:Filter and sort for podcast episodes table, Update:Sync local media progress when media progress is updated on the server

components/modals/Dialog.vue

@@ -10,7 +10,7 @@
       <div ref="container" class="w-full overflow-x-hidden overflow-y-auto bg-primary rounded-lg border border-white border-opacity-20" style="max-height: 75%" @click.stop>
         <ul class="h-full w-full" role="listbox" aria-labelledby="listbox-label">
           <template v-for="item in items">
-            <li :key="item.value" class="text-gray-50 select-none relative py-4 cursor-pointer hover:bg-black-400" role="option" @click="clickedOption(item.value)">
+            <li :key="item.value" class="text-gray-50 select-none relative py-4 cursor-pointer hover:bg-black-400" :class="selected === item.value ? 'bg-success bg-opacity-10' : ''" role="option" @click="clickedOption(item.value)">
               <div class="relative flex items-center px-3">
                 <p class="font-normal block truncate text-base text-white text-opacity-80">{{ item.text }}</p>
               </div>
@@ -30,7 +30,8 @@ export default {
     items: {
       type: Array,
       default: () => []
-    }
+    },
+    selected: String // optional
   },
   data() {
     return {}

components/tables/podcast/EpisodesTable.vue

@@ -1,10 +1,24 @@
 <template>
   <div class="w-full">
-    <p class="text-lg mb-1 font-semibold">Episodes ({{ episodes.length }})</p>
+    <div class="flex items-center">
+      <p class="text-lg mb-1 font-semibold">Episodes ({{ episodesFiltered.length }})</p>
+      <div class="flex-grow" />
+      <button class="outline:none mx-3 pt-0.5 relative" @click="showFilters">
+        <span class="material-icons text-xl text-gray-200">filter_alt</span>
+        <div v-show="filterKey !== 'all'" class="absolute top-0 right-0 w-1.5 h-1.5 rounded-full bg-success border border-green-300 shadow-sm z-10 pointer-events-none" />
+      </button>
 
-    <template v-for="episode in episodes">
+      <div class="flex items-center border border-white border-opacity-25 rounded px-2" @click="clickSort">
+        <p class="text-sm text-gray-200">{{ sortText }}</p>
+        <span class="material-icons ml-1 text-gray-200">{{ sortDesc ? 'arrow_drop_down' : 'arrow_drop_up' }}</span>
+      </div>
+    </div>
+
+    <template v-for="episode in episodesFiltered">
       <tables-podcast-episode-row :episode="episode" :local-episode="localEpisodeMap[episode.id]" :library-item-id="libraryItemId" :local-library-item-id="localLibraryItemId" :is-local="isLocal" :key="episode.id" />
     </template>
+
+    <modals-dialog v-model="showFiltersModal" title="Episode Filter" :items="filterItems" :selected="filterKey" @action="setFilter" />
   </div>
 </template>
 
@@ -24,9 +38,78 @@ export default {
     isLocal: Boolean // If is local then episodes and libraryItemId are local, otherwise local is passed in localLibraryItemId and localEpisodes
   },
   data() {
-    return {}
+    return {
+      episodesCopy: [],
+      showFiltersModal: false,
+      sortKey: 'publishedAt',
+      sortDesc: false,
+      filterKey: 'all',
+      episodesFiltered: [],
+      episodeSortItems: [
+        {
+          text: 'Pub Date',
+          value: 'publishedAt'
+        },
+        {
+          text: 'Title',
+          value: 'title'
+        },
+        {
+          text: 'Season',
+          value: 'season'
+        },
+        {
+          text: 'Episode',
+          value: 'episode'
+        }
+      ],
+      filterItems: [
+        {
+          text: 'Show All',
+          value: 'all'
+        },
+        {
+          text: 'Incomplete',
+          value: 'incomplete'
+        },
+        {
+          text: 'In Progress',
+          value: 'inProgress'
+        },
+        {
+          text: 'Complete',
+          value: 'complete'
+        }
+      ]
+    }
+  },
+  watch: {
+    episodes: {
+      immediate: true,
+      handler() {
+        this.init()
+      }
+    },
+    filterKey: {
+      handler() {
+        this.setEpisodesFiltered()
+      }
+    },
+    sortKey: {
+      handler() {
+        this.setEpisodesFiltered()
+      }
+    }
   },
   computed: {
+    episodesSorted() {
+      return this.episodesFiltered.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' })
+      })
+    },
     // Map of local episodes where server episode id is key
     localEpisodeMap() {
       var epmap = {}
@@ -36,9 +119,60 @@ export default {
         }
       })
       return epmap
+    },
+    sortText() {
+      if (!this.sortKey) return ''
+      var _sel = this.episodeSortItems.find((i) => i.value === this.sortKey)
+      if (!_sel) return ''
+      return _sel.text
+    }
+  },
+  methods: {
+    setEpisodesFiltered() {
+      this.episodesFiltered = this.episodesCopy
+        .filter((ep) => {
+          var mediaProgress = this.getEpisodeProgress(ep)
+          if (this.filterKey === 'incomplete') {
+            return !mediaProgress || !mediaProgress.isFinished
+          } else if (this.filterKey === 'complete') {
+            return mediaProgress && mediaProgress.isFinished
+          } else if (this.filterKey === 'inProgress') {
+            return mediaProgress && !mediaProgress.isFinished
+          } else if (this.filterKey === 'all') {
+            console.log('Filter key is all')
+            return true
+          }
+          return true
+        })
+        .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' })
+        })
+    },
+    setFilter(filter) {
+      this.filterKey = filter
+      console.log('Set filter', this.filterKey)
+      this.showFiltersModal = false
+    },
+    showFilters() {
+      this.showFiltersModal = true
+    },
+    clickSort() {
+      this.sortDesc = !this.sortDesc
+    },
+    getEpisodeProgress(episode) {
+      if (this.isLocal) return this.$store.getters['globals/getLocalMediaProgressById'](this.libraryItemId, episode.id)
+      return this.$store.getters['user/getUserMediaProgress'](this.libraryItemId, episode.id)
+    },
+    init() {
+      this.episodesCopy = this.episodes.map((ep) => {
+        return { ...ep }
+      })
+      this.setEpisodesFiltered()
     }
   },
-  methods: {},
   mounted() {}
 }
 </script>