audiobookshelf/client/components/modals/podcast/RemoveEpisode.vue

<template>
  <modals-modal v-model="show" name="podcast-episode-remove-modal" :width="500" :height="'unset'" :processing="processing">
    <template #outer>
      <div class="absolute top-0 left-0 p-5 w-2/3 overflow-hidden">
        <p class="font-book text-3xl text-white truncate">{{ title }}</p>
      </div>
    </template>
    <div ref="wrapper" class="px-8 py-6 w-full text-sm rounded-lg bg-bg shadow-lg border border-black-300 relative overflow-hidden">
      <div class="mb-4">
        <p v-if="episode" class="text-lg text-gray-200 mb-4">
          Are you sure you want to remove episode<br /><span class="text-base">{{ episodeTitle }}</span
          >?
        </p>
        <p v-else class="text-lg text-gray-200 mb-4">Are you sure you want to remove {{ episodes.length }} episodes?</p>
        <p class="text-xs font-semibold text-warning text-opacity-90">Note: This does not delete the audio file unless toggling "Hard delete file"</p>
      </div>
      <div class="flex justify-between items-center pt-4">
        <ui-checkbox v-model="hardDeleteFile" label="Hard delete file" check-color="error" checkbox-bg="bg" small label-class="text-base text-gray-200 pl-3" />

        <ui-btn @click="submit">{{ btnText }}</ui-btn>
      </div>
    </div>
  </modals-modal>
</template>

<script>
export default {
  props: {
    value: Boolean,
    libraryItem: {
      type: Object,
      default: () => {}
    },
    episodes: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      hardDeleteFile: false,
      processing: false
    }
  },
  watch: {
    value(newVal) {
      if (newVal) this.hardDeleteFile = false
    }
  },
  computed: {
    show: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit('input', val)
      }
    },
    episode() {
      if (this.episodes.length === 1) return this.episodes[0]
      return null
    },
    title() {
      if (this.episodes.length > 1) return `Remove ${this.episodes.length} episodes`
      return 'Remove Episode'
    },
    btnText() {
      if (this.episodes.length > 1) return this.hardDeleteFile ? `Delete ${this.episodes.length} episodes` : `Remove ${this.episodes.length} episodes`
      return this.hardDeleteFile ? 'Delete episode' : 'Remove episode'
    },
    episodeTitle() {
      return this.episode ? this.episode.title : null
    }
  },
  methods: {
    async submit() {
      this.processing = true

      var queryString = this.hardDeleteFile ? '?hard=1' : ''
      for (const episode of this.episodes) {
        const success = await this.$axios
          .$delete(`/api/podcasts/${this.libraryItem.id}/episode/${episode.id}${queryString}`)
          .then(() => true)
          .catch((error) => {
            var errorMsg = error.response && error.response.data ? error.response.data : 'Failed to remove episode'
            console.error('Failed to remove episode', error)
            this.$toast.error(errorMsg)
            return false
          })
        if (!success) {
          this.processing = false
          this.show = false
          this.$emit('clearSelected')
          return
        }
      }

      this.processing = false
      this.$toast.success(`${this.episodes.length} episode${this.episodes.length > 1 ? 's' : ''} removed`)
      this.show = false
      this.$emit('clearSelected')
    }
  },
  mounted() {}
}
</script>