Update:Remove auto download checkbox from edit podcast details tab, move max episodes to keep input to the schedule tab

This commit is contained in:
advplyr 2022-08-20 14:21:58 -05:00
parent 46668854ad
commit 0f01f21a0a
4 changed files with 67 additions and 48 deletions

View File

@ -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() {

View File

@ -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(' ')

View File

@ -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() {

View File

@ -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: {