repod/src/components/Sidebar/Subscription.vue
Michel Roux 75aad7baab
All checks were successful
repod / xml (push) Successful in 10s
repod / php (push) Successful in 36s
repod / nodejs (push) Successful in 1m6s
repod / release (push) Successful in 1m18s
revert: revert new subscriptions loading model (fix #182)
2024-10-24 23:42:22 +02:00

151 lines
3.6 KiB
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>