repod/src/components/Sidebar/Item.vue

<template>
	<NcAppNavigationItem
		:loading="loading"
		:name="feed ? feed.title : url"
		:to="hash">
		<template #actions>
			<NcActionButton
				:aria-label="t('repod', 'Favorite')"
				:model-value="isFavorite"
				:name="t('repod', 'Favorite')"
				:title="t('repod', 'Favorite')"
				@update:modelValue="switchFavorite($event)">
				<template #icon>
					<StarPlusIcon v-if="!isFavorite" :size="20" />
					<StarRemoveIcon v-if="isFavorite" :size="20" />
				</template>
			</NcActionButton>
			<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" />
			<StarIcon v-if="feed && isFavorite" class="star" :size="20" />
			<AlertIcon v-if="failed" />
		</template>
	</NcAppNavigationItem>
</template>

<script>
import { NcActionButton, NcAppNavigationItem, NcAvatar } from '@nextcloud/vue'
import { mapActions, mapState } from 'pinia'
import AlertIcon from 'vue-material-design-icons/Alert.vue'
import DeleteIcon from 'vue-material-design-icons/Delete.vue'
import StarIcon from 'vue-material-design-icons/Star.vue'
import StarPlusIcon from 'vue-material-design-icons/StarPlus.vue'
import StarRemoveIcon from 'vue-material-design-icons/StarRemove.vue'
import axios from '@nextcloud/axios'
import { generateUrl } from '@nextcloud/router'
import { showError } from '../../utils/toast.js'
import { toUrl } from '../../utils/url.js'
import { useSubscriptions } from '../../store/subscriptions.js'

export default {
	name: 'Item',
	components: {
		AlertIcon,
		DeleteIcon,
		NcActionButton,
		NcAppNavigationItem,
		NcAvatar,
		StarIcon,
		StarPlusIcon,
		StarRemoveIcon,
	},
	props: {
		url: {
			type: String,
			required: true,
		},
	},
	data() {
		return {
			failed: false,
			loading: true,
			feed: null,
		}
	},
	computed: {
		...mapState(useSubscriptions, ['favorites']),
		hash() {
			return toUrl(this.url)
		},
		isFavorite() {
			return this.favorites.includes(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: {
		...mapActions(useSubscriptions, ['fetch', 'addFavorite', 'removeFavorite']),
		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.removeFavorite(this.url)
					this.loading = false
					this.fetch()
				}
			}
		},
		switchFavorite(value) {
			if (value) {
				if (this.favorites.length >= 10) {
					showError(t('repod', 'You can only have 10 favorites'))
					return
				}

				this.addFavorite(this.url)
			} else {
				this.removeFavorite(this.url)
			}
		},
	},
}
</script>

<style scoped>
.star {
	bottom: 2px;
	color: yellow;
	left: 22px;
	position: absolute;
}
</style>