From 0f01f21a0a47848926db465d8ad51d987ba9069b Mon Sep 17 00:00:00 2001
From: advplyr <advplyr@protonmail.com>
Date: Sat, 20 Aug 2022 14:21:58 -0500
Subject: [PATCH] Update:Remove auto download checkbox from edit podcast
 details tab, move max episodes to keep input to the schedule tab

---
 .../components/modals/item/tabs/Schedule.vue  | 79 ++++++++++++++-----
 client/components/ui/Checkbox.vue             |  4 +
 .../components/widgets/PodcastDetailsEdit.vue | 27 -------
 client/tailwind.config.js                     |  5 +-
 4 files changed, 67 insertions(+), 48 deletions(-)

diff --git a/client/components/modals/item/tabs/Schedule.vue b/client/components/modals/item/tabs/Schedule.vue
index e77425e4..16de35b5 100644
--- a/client/components/modals/item/tabs/Schedule.vue
+++ b/client/components/modals/item/tabs/Schedule.vue
@@ -1,14 +1,30 @@
 <template>
   <div class="w-full h-full relative">
-    <div id="scheduleWrapper" class="w-full overflow-y-auto px-2 py-4 md:px-4 md:py-6">
-      <div class="flex items-center justify-between mb-4">
-        <p class="text-base md:text-lg font-semibold">Schedule Automatic Episode Downloads</p>
-        <ui-checkbox v-model="enableAutoDownloadEpisodes" label="Enable" small checkbox-bg="bg" label-class="pl-2 text-base" />
-      </div>
-      <widgets-cron-expression-builder ref="cronExpressionBuilder" v-if="enableAutoDownloadEpisodes" v-model="cronExpression" @input="updatedCron" />
+    <div id="scheduleWrapper" class="w-full overflow-y-auto px-2 py-4 md:px-6 md:py-6">
+      <template v-if="!feedUrl">
+        <widgets-alert type="warning" class="text-base mb-4">No RSS feed URL is set for this podcast</widgets-alert>
+      </template>
+      <template v-if="feedUrl || autoDownloadEpisodes">
+        <div class="flex items-center justify-between mb-4">
+          <p class="text-base md:text-lg font-semibold">Schedule Automatic Episode Downloads</p>
+          <ui-checkbox v-model="enableAutoDownloadEpisodes" label="Enable" medium checkbox-bg="bg" label-class="pl-2 text-lg" />
+        </div>
+
+        <div v-if="enableAutoDownloadEpisodes" class="flex items-center py-2">
+          <ui-text-input ref="maxEpisodesInput" type="number" v-model="newMaxEpisodesToKeep" no-spinner :padding-x="1" text-center class="w-10 text-base" @change="updatedMaxEpisodesToKeep" />
+          <ui-tooltip text="Value of 0 sets no max limit. After a new episode is auto-downloaded this will delete the oldest episode if you have more than X episodes. <br>This will only delete 1 episode per new download.">
+            <p class="pl-4 text-base">
+              Max episodes to keep
+              <span class="material-icons icon-text text-sm">info_outlined</span>
+            </p>
+          </ui-tooltip>
+        </div>
+
+        <widgets-cron-expression-builder ref="cronExpressionBuilder" v-if="enableAutoDownloadEpisodes" v-model="cronExpression" />
+      </template>
     </div>
 
-    <div class="absolute bottom-0 left-0 w-full py-2 md:py-4 bg-bg border-t border-white border-opacity-5">
+    <div v-if="feedUrl || autoDownloadEpisodes" class="absolute bottom-0 left-0 w-full py-2 md:py-4 bg-bg border-t border-white border-opacity-5">
       <div class="flex items-center px-2 md:px-4">
         <div class="flex-grow" />
         <ui-btn @click="save" :disabled="!isUpdated" :color="isUpdated ? 'success' : 'primary'" class="mx-2">{{ isUpdated ? 'Save' : 'No update necessary' }}</ui-btn>
@@ -29,7 +45,8 @@ export default {
   data() {
     return {
       enableAutoDownloadEpisodes: false,
-      cronExpression: null
+      cronExpression: null,
+      newMaxEpisodesToKeep: 0
     }
   },
   computed: {
@@ -44,29 +61,38 @@ export default {
     userIsAdminOrUp() {
       return this.$store.getters['user/getIsAdminOrUp']
     },
+    media() {
+      return this.libraryItem ? this.libraryItem.media || {} : {}
+    },
+    mediaMetadata() {
+      return this.media.metadata || {}
+    },
+    libraryItemId() {
+      return this.libraryItem ? this.libraryItem.id : null
+    },
+    feedUrl() {
+      return this.mediaMetadata.feedUrl
+    },
     autoDownloadEpisodes() {
       return !!this.media.autoDownloadEpisodes
     },
     autoDownloadSchedule() {
       return this.media.autoDownloadSchedule
     },
-    media() {
-      return this.libraryItem ? this.libraryItem.media || {} : {}
-    },
-    libraryItemId() {
-      return this.libraryItem ? this.libraryItem.id : null
+    maxEpisodesToKeep() {
+      return this.media.maxEpisodesToKeep
     },
     isUpdated() {
-      return this.autoDownloadSchedule !== this.cronExpression || this.autoDownloadEpisodes !== this.enableAutoDownloadEpisodes
+      return this.autoDownloadSchedule !== this.cronExpression || this.autoDownloadEpisodes !== this.enableAutoDownloadEpisodes || this.maxEpisodesToKeep !== Number(this.newMaxEpisodesToKeep)
     }
   },
   methods: {
-    init() {
-      this.enableAutoDownloadEpisodes = this.autoDownloadEpisodes
-      this.cronExpression = this.autoDownloadSchedule
-    },
-    updatedCron() {
-      console.log('Updated cron', this.cronExpression)
+    updatedMaxEpisodesToKeep() {
+      if (isNaN(this.newMaxEpisodesToKeep) || this.newMaxEpisodesToKeep < 0) {
+        this.newMaxEpisodesToKeep = 0
+      } else {
+        this.newMaxEpisodesToKeep = Number(this.newMaxEpisodesToKeep)
+      }
     },
     save() {
       // If custom expression input is focused then unfocus it instead of submitting
@@ -75,6 +101,10 @@ export default {
           return
         }
       }
+      if (this.$refs.maxEpisodesInput && this.$refs.maxEpisodesInput.isFocused) {
+        this.$refs.maxEpisodesInput.blur()
+        return
+      }
 
       const updatePayload = {
         autoDownloadEpisodes: this.enableAutoDownloadEpisodes
@@ -82,6 +112,10 @@ export default {
       if (this.enableAutoDownloadEpisodes) {
         updatePayload.autoDownloadSchedule = this.cronExpression
       }
+      if (this.newMaxEpisodesToKeep !== this.maxEpisodesToKeep) {
+        updatePayload.maxEpisodesToKeep = this.newMaxEpisodesToKeep
+      }
+
       this.updateDetails(updatePayload)
     },
     async updateDetails(updatePayload) {
@@ -100,6 +134,11 @@ export default {
         }
       }
       return false
+    },
+    init() {
+      this.enableAutoDownloadEpisodes = this.autoDownloadEpisodes
+      this.cronExpression = this.autoDownloadSchedule
+      this.newMaxEpisodesToKeep = this.maxEpisodesToKeep
     }
   },
   mounted() {
diff --git a/client/components/ui/Checkbox.vue b/client/components/ui/Checkbox.vue
index f2717041..10c9a6cb 100644
--- a/client/components/ui/Checkbox.vue
+++ b/client/components/ui/Checkbox.vue
@@ -14,6 +14,7 @@ export default {
     value: Boolean,
     label: String,
     small: Boolean,
+    medium: Boolean,
     checkboxBg: {
       type: String,
       default: 'white'
@@ -47,6 +48,7 @@ export default {
     wrapperClass() {
       var classes = [`bg-${this.checkboxBg} border-${this.borderColor}`]
       if (this.small) classes.push('w-4 h-4')
+      else if (this.medium) classes.push('w-5 h-5')
       else classes.push('w-6 h-6')
 
       return classes.join(' ')
@@ -55,11 +57,13 @@ export default {
       if (this.labelClass) return this.labelClass
       var classes = ['pl-1']
       if (this.small) classes.push('text-xs md:text-sm')
+      else if (this.medium) classes.push('text-base md:text-lg')
       return classes.join(' ')
     },
     svgClass() {
       var classes = [`text-${this.checkColor}`]
       if (this.small) classes.push('w-3 h-3')
+      else if (this.medium) classes.push('w-3.5 h-3.5')
       else classes.push('w-4 h-4')
 
       return classes.join(' ')
diff --git a/client/components/widgets/PodcastDetailsEdit.vue b/client/components/widgets/PodcastDetailsEdit.vue
index 6470b603..e6a81983 100644
--- a/client/components/widgets/PodcastDetailsEdit.vue
+++ b/client/components/widgets/PodcastDetailsEdit.vue
@@ -39,22 +39,6 @@
           </div>
         </div>
       </div>
-
-      <div class="flex items-center px-1 pt-6">
-        <div class="w-1/2 px-1 py-5">
-          <ui-checkbox v-model="autoDownloadEpisodes" label="Auto Download New Episodes" checkbox-bg="primary" border-color="gray-600" label-class="pl-2 text-base font-semibold" />
-        </div>
-        <div v-if="autoDownloadEpisodes" class="w-1/2 px-1">
-          <ui-text-input-with-label ref="maxEpisodesToKeep" v-model="maxEpisodesToKeep" type="number" class="max-w-48">
-            <ui-tooltip direction="bottom" text="Value of 0 sets no max limit. After a new episode is auto-downloaded this will delete the oldest episode if you have more than X episodes.">
-              <p class="text-sm">
-                Max episodes to keep
-                <span class="material-icons icon-text text-sm">info_outlined</span>
-              </p>
-            </ui-tooltip>
-          </ui-text-input-with-label>
-        </div>
-      </div>
     </form>
   </div>
 </template>
@@ -83,8 +67,6 @@ export default {
         explicit: false,
         language: null
       },
-      autoDownloadEpisodes: false,
-      maxEpisodesToKeep: 0,
       newTags: []
     }
   },
@@ -209,13 +191,6 @@ export default {
         updatePayload.tags = [...this.newTags]
       }
 
-      if (this.media.autoDownloadEpisodes !== this.autoDownloadEpisodes) {
-        updatePayload.autoDownloadEpisodes = !!this.autoDownloadEpisodes
-      }
-      if (this.autoDownloadEpisodes && !isNaN(this.maxEpisodesToKeep) && Number(this.maxEpisodesToKeep) != this.media.maxEpisodesToKeep) {
-        updatePayload.maxEpisodesToKeep = Number(this.maxEpisodesToKeep)
-      }
-
       return {
         updatePayload,
         hasChanges: !!Object.keys(updatePayload).length
@@ -235,8 +210,6 @@ export default {
       this.details.language = this.mediaMetadata.language || ''
       this.details.explicit = !!this.mediaMetadata.explicit
 
-      this.autoDownloadEpisodes = !!this.media.autoDownloadEpisodes
-      this.maxEpisodesToKeep = this.media.maxEpisodesToKeep || 0
       this.newTags = [...(this.media.tags || [])]
     },
     submitForm() {
diff --git a/client/tailwind.config.js b/client/tailwind.config.js
index cde080f3..b5426856 100644
--- a/client/tailwind.config.js
+++ b/client/tailwind.config.js
@@ -15,7 +15,10 @@ module.exports = {
       'py-1.5',
       'bg-info',
       'px-1.5',
-      'min-w-5'
+      'min-w-5',
+      'w-3.5',
+      'h-3.5',
+      'border-warning'
     ],
   },
   theme: {