repod/src/components/Sidebar/Item.vue

<template>
	<NcAppNavigationItem
		:loading="loading"
		:name="feed ? feed.title : url"
		:to="hash">
		<template #actions>
			<NcActionButton
				:aria-label="t(`core`, 'Delete')"
				:name="t(`core`, 'Delete')"
				:title="t(`core`, 'Delete')"
				@click="deleteSubscription">
				<template #icon>
					<DeleteIcon :size="20" />
				</template>
			</NcActionButton>
		</template>
		<template #icon>
			<NcAvatar
				v-if="feed"
				:display-name="feed.author || feed.title"
				:is-no-user="true"
				:url="feed.imageUrl" />
			<AlertIcon v-if="failed" />
		</template>
	</NcAppNavigationItem>
</template>

<script>
import { NcActionButton, NcAppNavigationItem, NcAvatar } from '@nextcloud/vue'
import AlertIcon from 'vue-material-design-icons/Alert.vue'
import DeleteIcon from 'vue-material-design-icons/Delete.vue'
import axios from '@nextcloud/axios'
import { generateUrl } from '@nextcloud/router'
import { showError } from '@nextcloud/dialogs'
import { toUrl } from '../../utils/url.js'

export default {
	name: 'Item',
	components: {
		AlertIcon,
		DeleteIcon,
		NcActionButton,
		NcAppNavigationItem,
		NcAvatar,
	},
	props: {
		url: {
			type: String,
			required: true,
		},
	},
	data() {
		return {
			failed: false,
			loading: true,
			feed: null,
		}
	},
	computed: {
		hash() {
			return toUrl(this.url)
		},
	},
	async mounted() {
		try {
			const podcastData = await axios.get(
				generateUrl(
					'/apps/gpoddersync/personal_settings/podcast_data?url={url}',
					{
						url: this.url,
					},
				),
			)
			this.feed = podcastData.data.data
		} catch (e) {
			this.failed = true
			console.error(e)
		} finally {
			this.loading = false
		}
	},
	methods: {
		async deleteSubscription() {
			if (
				confirm(
					t('repod', 'Are you sure you want to delete this subscription?'),
				)
			) {
				try {
					this.loading = true
					await axios.post(
						generateUrl('/apps/gpoddersync/subscription_change/create'),
						{ add: [], remove: [this.url] },
					)
				} catch (e) {
					console.error(e)
					showError(t('repod', 'Error while removing the feed'))
				} finally {
					this.loading = false
					this.$store.dispatch('subscriptions/fetch')
				}
			}
		},
	},
}
</script>