Extracted to separate Vue component

This commit is contained in:
Kalle Fagerberg 2022-09-17 18:53:25 +02:00 committed by thrillfall
parent 4771a52b63
commit cbd91452a9
2 changed files with 98 additions and 34 deletions

View File

@ -0,0 +1,94 @@
<template>
<ListItem :title="podcastData?.title ?? sub.url"
:details="formatSubscriptionDetails(sub)">
<template #icon>
<Avatar :size="44"
:url="podcastData?.image"
:display-name="podcastData?.author" />
</template>
<template #subtitle>
<span v-if="isLoading"><em>(Loading RSS data...)</em></span>
<span v-else>{{ podcastData?.description }}</span>
</template>
<template #actions>
<ActionLink :href="podcastData?.link"
target="_blank"
icon="icon-external">
Podcast's homepage
</ActionLink>
<ActionLink :href="sub.url"
target="_blank">
<template #icon>
<Rss />
</template>
RSS feed
</ActionLink>
</template>
</ListItem>
</template>
<script>
import ActionLink from '@nextcloud/vue/dist/Components/ActionLink'
import Avatar from '@nextcloud/vue/dist/Components/Avatar'
import ListItem from '@nextcloud/vue/dist/Components/ListItem'
import Rss from 'vue-material-design-icons/Rss.vue'
import { generateUrl } from '@nextcloud/router'
import axios from '@nextcloud/axios'
export default {
name: 'SubscriptionListItem',
components: {
ActionLink,
Avatar,
ListItem,
Rss,
},
props: {
sub: {
type: Object,
required: true,
},
},
data() {
return {
podcastData: null,
isLoading: true,
}
},
async mounted() {
try {
const resp = await axios.get(generateUrl('/apps/gpoddersync/personal_settings/podcast_data?url={url}', {
url: this.sub.url,
}))
this.podcastData = resp.data?.data
} catch (e) {
console.error(e)
} finally {
this.isLoading = false
}
},
methods: {
formatSubscriptionDetails(sub) {
if (sub.listenedSeconds <= 0) {
return '(no time listened)'
}
const hours = Math.floor(sub.listenedSeconds / 3600)
const modMinutes = Math.floor(sub.listenedSeconds / 60) % 60
if (hours === 0) {
const modSeconds = sub.listenedSeconds % 60
return `(${modMinutes}min ${modSeconds}s listened)`
}
return `(${hours}h ${modMinutes}min listened)`
},
},
}
</script>
<style lang="scss" scoped>
a.link {
text-decoration: underline;
color: var(--color-primary-element-light);
}
</style>

View File

@ -4,33 +4,9 @@
:description="t('gpoddersync', 'Podcast subscriptions that has so far been synchronized with this Nextcloud account.')"> :description="t('gpoddersync', 'Podcast subscriptions that has so far been synchronized with this Nextcloud account.')">
<div v-if="subscriptions.length > 0"> <div v-if="subscriptions.length > 0">
<ul> <ul>
<ListItem v-for="sub in subscriptions" <SubscriptionListItem v-for="sub in subscriptions"
:key="sub.url" :key="sub.url"
:title="sub.podcastData?.title ?? sub.url" :sub="sub" />
:details="formatSubscriptionDetails(sub)">
<template #icon>
<Avatar :size="44"
:url="sub.podcastData?.image"
:display-name="sub.podcastData?.author" />
</template>
<template #subtitle>
{{ sub.podcastData?.description }}
</template>
<template #actions>
<ActionLink :href="sub.podcastData?.link"
target="_blank"
icon="icon-external">
Podcast's homepage
</ActionLink>
<ActionLink :href="sub.url"
target="_blank">
<template #icon>
<Rss />
</template>
RSS feed
</ActionLink>
</template>
</ListItem>
</ul> </ul>
</div> </div>
<div v-if="subscriptions.length === 0 && !isLoading"> <div v-if="subscriptions.length === 0 && !isLoading">
@ -51,14 +27,11 @@
</template> </template>
<script> <script>
import ActionLink from '@nextcloud/vue/dist/Components/ActionLink'
import Avatar from '@nextcloud/vue/dist/Components/Avatar'
import EmptyContent from '@nextcloud/vue/dist/Components/EmptyContent' import EmptyContent from '@nextcloud/vue/dist/Components/EmptyContent'
import ListItem from '@nextcloud/vue/dist/Components/ListItem'
import SettingsSection from '@nextcloud/vue/dist/Components/SettingsSection' import SettingsSection from '@nextcloud/vue/dist/Components/SettingsSection'
import SubscriptionListItem from '../components/SubscriptionListItem.vue'
import Podcast from 'vue-material-design-icons/Podcast' import Podcast from 'vue-material-design-icons/Podcast'
import Rss from 'vue-material-design-icons/Rss.vue'
import { generateUrl } from '@nextcloud/router' import { generateUrl } from '@nextcloud/router'
import axios from '@nextcloud/axios' import axios from '@nextcloud/axios'
@ -67,13 +40,10 @@ import { showError } from '@nextcloud/dialogs'
export default { export default {
name: 'PersonalSettingsPage', name: 'PersonalSettingsPage',
components: { components: {
ActionLink,
Avatar,
EmptyContent, EmptyContent,
ListItem,
Podcast, Podcast,
Rss,
SettingsSection, SettingsSection,
SubscriptionListItem,
}, },
data() { data() {
return { return {