repod/src/components/Sidebar/Subscription.vue

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

<script lang="ts">
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 type { PersonalSettingsPodcastDataInterface } from '../../utils/types.ts'
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.ts'
import { t } from '@nextcloud/l10n'
import { toFeedUrl } from '../../utils/url.ts'
import { useSubscriptions } from '../../store/subscriptions.ts'

export default {
	name: 'Subscription',
	components: {
		AlertIcon,
		DeleteIcon,
		NcActionButton,
		NcAppNavigationItem,
		NcAvatar,
		StarIcon,
		StarPlusIcon,
		StarRemoveIcon,
	},
	props: {
		url: {
			type: String,
			required: true,
		},
	},
	data() {
		return {
			failed: false,
			loading: true,
		}
	},
	computed: {
		...mapState(useSubscriptions, ['getSubByUrl', 'subs']),
		feed() {
			return this.getSubByUrl(this.url)
		},
	},
	async mounted() {
		try {
			const podcastData =
				await axios.get<PersonalSettingsPodcastDataInterface>(
					generateUrl(
						'/apps/gpoddersync/personal_settings/podcast_data?url={url}',
						{
							url: this.url,
						},
					),
				)
			this.addMetadatas(this.url, podcastData.data.data)
		} catch (e) {
			this.failed = true
			console.error(e)
		} finally {
			this.loading = false
		}
	},
	methods: {
		...mapActions(useSubscriptions, ['fetch', 'addMetadatas', 'setFavorite']),
		t,
		toFeedUrl,
		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.setFavorite(this.url, false)
					this.loading = false
					this.fetch()
				}
			}
		},
		switchFavorite(value: boolean) {
			if (value) {
				if (this.subs.filter((sub) => sub.isFavorite).length >= 10) {
					showError(t('repod', 'You can only have 10 favorites'))
					return
				}
			}
			this.setFavorite(this.url, value)
		},
	},
}
</script>

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