Podcast episode feed modal refactor

client/components/modals/podcast/EpisodeFeed.vue

@@ -11,32 +11,25 @@
           v-for="(episode, index) in episodes"
           :key="index"
           class="relative"
-          :class="episode.enclosure && itemEpisodeMap[episode.enclosure.url] ? 'bg-primary bg-opacity-40' : selectedEpisodes[String(index)] ? 'cursor-pointer bg-success bg-opacity-10' : index % 2 == 0 ? 'cursor-pointer bg-primary bg-opacity-25 hover:bg-opacity-40' : 'cursor-pointer bg-primary bg-opacity-5 hover:bg-opacity-25'"
-
+          :class="itemEpisodeMap[episode.enclosure.url] ? 'bg-primary bg-opacity-40' : selectedEpisodes[String(index)] ? 'cursor-pointer bg-success bg-opacity-10' : index % 2 == 0 ? 'cursor-pointer bg-primary bg-opacity-25 hover:bg-opacity-40' : 'cursor-pointer bg-primary bg-opacity-5 hover:bg-opacity-25'"
+          @click="toggleSelectEpisode(index, episode)"
         >
           <div class="absolute top-0 left-0 h-full flex items-center p-2">
-            <span v-if="episode.enclosure && itemEpisodeMap[episode.enclosure.url]" class="material-icons text-success text-xl">download_done</span>
-            <ui-checkbox v-else v-model="selectedEpisodes[String(index)]" small checkbox-bg="primary" border-color="gray-600" @click="toggleSelectEpisode(index)"/>
+            <span v-if="itemEpisodeMap[episode.enclosure.url]" class="material-icons text-success text-xl">download_done</span>
+            <ui-checkbox v-else v-model="selectedEpisodes[String(index)]" small checkbox-bg="primary" border-color="gray-600" />
           </div>
           <div class="px-8 py-2">
             <p v-if="episode.episode" class="font-semibold text-gray-200">#{{ episode.episode }}</p>
             <p class="break-words mb-1">{{ episode.title }}</p>
             <p v-if="episode.subtitle" class="break-words mb-1 text-sm text-gray-300 episode-subtitle">{{ episode.subtitle }}</p>
             <p class="text-xs text-gray-300">Published {{ episode.publishedAt ? $dateDistanceFromNow(episode.publishedAt) : 'Unknown' }}</p>
-            <!-- <span class="material-icons cursor-pointer text-lg hover:text-success" @click="saveEpisode(episode)">save</span> -->
           </div>
         </div>
       </div>
       <div class="flex justify-end pt-4">
-        <div class="relative">
-          <div class="absolute top-0 left-0 h-full flex items-center p-2">
-            <ui-checkbox v-model="selectAll" small checkbox-bg="primary" border-color="gray-600" :disabled="allDownloaded" />
-          </div>
-          <div class="px-8 py-2">
-            <p :class="!allDownloaded ? 'font-semibold text-gray-200' : 'text-gray-400'">Select all episodes</p>
-          </div>
-        </div>
-        <ui-btn :disabled="!episodesSelected.length" @click="submit">{{ buttonText }}</ui-btn>
+        <ui-checkbox v-if="!allDownloaded" v-model="selectAll" @input="toggleSelectAll" label="Select all episodes" small checkbox-bg="primary" border-color="gray-600" class="mx-8" />
+        <ui-btn v-if="!allDownloaded" :disabled="!episodesSelected.length" @click="submit">{{ buttonText }}</ui-btn>
+        <p v-else class="text-success text-base px-2 py-4">All episodes are downloaded</p>
       </div>
     </div>
   </modals-modal>
@@ -58,7 +51,8 @@ export default {
   data() {
     return {
       processing: false,
-      selectedEpisodes: {}
+      selectedEpisodes: {},
+      selectAll: false
     }
   },
   watch: {
@@ -78,22 +72,12 @@ export default {
         this.$emit('input', val)
       }
     },
-    selectAll: {
-      get() {
-        return this.episodesSelected.length == this.episodes.filter((_, index) => !(this.episodes[index].enclosure && this.itemEpisodeMap[this.episodes[index].enclosure.url])).length
-      },
-      set(val) {
-        for (const key in this.selectedEpisodes) {
-          this.selectedEpisodes[key] = val
-        }
-      }
-    },
     title() {
       if (!this.libraryItem) return ''
       return this.libraryItem.media.metadata.title || 'Unknown'
     },
     allDownloaded() {
-      return Object.values(this.episodes).filter((episode) => !(episode.enclosure && this.itemEpisodeMap[episode.enclosure.url])).length === 0
+      return !this.episodes.some((episode) => !this.itemEpisodeMap[episode.enclosure.url])
     },
     episodesSelected() {
       return Object.keys(this.selectedEpisodes).filter((key) => !!this.selectedEpisodes[key])
@@ -115,18 +99,33 @@ export default {
     }
   },
   methods: {
-    toggleSelectEpisode(index) {
-      this.$set(this.selectedEpisodes, String(index), !this.selectedEpisodes[String(index)])
+    toggleSelectAll(val) {
+      for (let i = 0; i < this.episodes.length; i++) {
+        const episode = this.episodes[i]
+        if (this.itemEpisodeMap[episode.enclosure.url]) this.selectedEpisodes[String(i)] = false
+        else this.$set(this.selectedEpisodes, String(i), val)
+      }
     },
-    clearSelectedEpisodes() {
-      Object.keys(this.selectedEpisodes).forEach((key, idx) => this.$set(this.selectedEpisodes, String(idx), false))
+    checkSetIsSelectedAll() {
+      for (let i = 0; i < this.episodes.length; i++) {
+        const episode = this.episodes[i]
+        if (!this.itemEpisodeMap[episode.enclosure.url] && !this.selectedEpisodes[String(i)]) {
+          this.selectAll = false
+          return
+        }
+      }
+      this.selectAll = true
+    },
+    toggleSelectEpisode(index, episode) {
+      if (this.itemEpisodeMap[episode.enclosure.url]) return
+      this.$set(this.selectedEpisodes, String(index), !this.selectedEpisodes[String(index)])
+      this.checkSetIsSelectedAll()
     },
     submit() {
       var episodesToDownload = []
       if (this.episodesSelected.length) {
         episodesToDownload = this.episodesSelected.map((episodeIndex) => this.episodes[Number(episodeIndex)])
       }
-      this.clearSelectedEpisodes()
 
       var payloadSize = JSON.stringify(episodesToDownload).length
       var sizeInMb = payloadSize / 1024 / 1024
@@ -149,17 +148,15 @@ export default {
           console.error('Failed to download episodes', error)
           this.processing = false
           this.$toast.error(errorMsg)
+
+          this.selectedEpisodes = {}
+          this.selectAll = false
         })
     },
     init() {
-      this.episodes.sort((a, b) => (a.publishedAt < b.publishedAt) ? 1 : -1)
-      for (let i = 0; i < this.episodes.length; i++) {
-        var episode = this.episodes[i]
-        if (episode.enclosure && !this.itemEpisodeMap[episode.enclosure.url]) {
-          // Do not include episodes already downloaded
-          this.$set(this.selectedEpisodes, String(i), false)
-        }
-      }
+      this.episodes.sort((a, b) => (a.publishedAt < b.publishedAt ? 1 : -1))
+      this.selectAll = false
+      this.selectedEpisodes = {}
     }
   },
   mounted() {}