Rework subscriptionlistitem component
All checks were successful
repod / nextcloud (push) Successful in 1m0s
repod / nodejs (push) Successful in 1m55s

This commit is contained in:
Michel Roux 2023-07-10 00:25:32 +02:00
parent 96d300402b
commit ab84d9df15
3 changed files with 65 additions and 48 deletions

View File

@ -0,0 +1,54 @@
<template>
<NcAppNavigationItem :loading="loading"
:title="title ?? subscriptionUrl">
<template #icon>
<img v-if="imageUrl"
:src="imageUrl"
:alt="title"
width="20"
height="20">
<Alert v-if="failed" />
</template>
</NcAppNavigationItem>
</template>
<script>
import Alert from 'vue-material-design-icons/Alert.vue'
import { NcAppNavigationItem } from '@nextcloud/vue'
import axios from '@nextcloud/axios'
import { generateUrl } from '@nextcloud/router'
export default {
name: 'SubscriptionListItem',
components: {
Alert,
NcAppNavigationItem,
},
props: {
subscriptionUrl: {
type: String,
required: true,
},
},
data() {
return {
failed: false,
loading: true,
title: null,
imageUrl: null,
}
},
async mounted() {
try {
const podcastData = await axios.get(generateUrl('/apps/gpoddersync/personal_settings/podcast_data?url={url}', { url: this.subscriptionUrl }))
this.title = podcastData.data.data.title
this.imageUrl = podcastData.data.data.imageUrl
} catch (e) {
this.failed = true
console.error(e)
} finally {
this.loading = false
}
},
}
</script>

View File

@ -6,45 +6,15 @@ export const subscriptions = {
state: { state: {
subscriptions: [], subscriptions: [],
}, },
getters: {
sortedSubscriptions: (state) => state.subscriptions.concat().sort((a, b) => {
if (a.title && b.title) return a.title.localeCompare(b.title)
return a.id - b.id
}),
},
mutations: { mutations: {
reset: (state) => { set: (state, subscriptions) => {
state.subscriptions = [] state.subscriptions = subscriptions
},
add: (state, subscription) => {
const subscriptionId = state.subscriptions.findIndex(sub => sub.url === subscription.url)
if (subscriptionId === -1) {
state.subscriptions.push(subscription)
} else {
state.subscriptions[subscriptionId] = subscription
}
}, },
}, },
actions: { actions: {
fetch: async (context) => { fetch: async (context) => {
context.commit('reset')
const metrics = await axios.get(generateUrl('/apps/gpoddersync/personal_settings/metrics')) const metrics = await axios.get(generateUrl('/apps/gpoddersync/personal_settings/metrics'))
for (const subscriptionId in metrics.data.subscriptions) { context.commit('set', metrics.data.subscriptions.map(sub => sub.url))
context.commit('add', {
id: subscriptionId,
url: metrics.data.subscriptions[subscriptionId].url,
loading: true,
})
}
for (const subscription of context.state.subscriptions) {
try {
const podcasts = await axios.get(generateUrl('/apps/gpoddersync/personal_settings/podcast_data?url={url}', { url: subscription.url }))
context.commit('add', { ...podcasts.data.data, ...subscription, ...{ loading: false } })
} catch (e) {
console.error(e)
}
}
}, },
}, },
} }

View File

@ -11,17 +11,9 @@
</router-link> </router-link>
<NcLoadingIcon v-if="loading" /> <NcLoadingIcon v-if="loading" />
<ul v-if="!loading"> <ul v-if="!loading">
<NcAppNavigationItem v-for="subscription in subscriptions" <SubscriptionListItem v-for="subscriptionUrl of subscriptions"
:key="subscription.id" :key="subscriptionUrl"
:loading="subscription.loading" :subscription-url="subscriptionUrl" />
:title="subscription.title ?? subscription.url">
<template #icon>
<img :src="subscription.imageUrl"
:alt="subscription.title"
width="20"
height="20">
</template>
</NcAppNavigationItem>
</ul> </ul>
</NcAppContentList> </NcAppContentList>
</NcAppNavigation> </NcAppNavigation>
@ -36,11 +28,11 @@ import {
NcAppContent, NcAppContent,
NcAppContentList, NcAppContentList,
NcAppNavigation, NcAppNavigation,
NcAppNavigationItem,
NcAppNavigationNew, NcAppNavigationNew,
NcLoadingIcon, NcLoadingIcon,
} from '@nextcloud/vue' } from '@nextcloud/vue'
import Plus from 'vue-material-design-icons/Plus.vue' import Plus from 'vue-material-design-icons/Plus.vue'
import SubscriptionListItem from '../components/SubscriptionListItem.vue'
import { showError } from '@nextcloud/dialogs' import { showError } from '@nextcloud/dialogs'
export default { export default {
@ -49,10 +41,10 @@ export default {
NcAppContent, NcAppContent,
NcAppContentList, NcAppContentList,
NcAppNavigation, NcAppNavigation,
NcAppNavigationItem,
NcAppNavigationNew, NcAppNavigationNew,
NcLoadingIcon, NcLoadingIcon,
Plus, Plus,
SubscriptionListItem,
}, },
data() { data() {
return { return {
@ -61,7 +53,7 @@ export default {
}, },
computed: { computed: {
subscriptions() { subscriptions() {
return this.$store.getters['subscriptions/sortedSubscriptions'] return this.$store.state.subscriptions.subscriptions
}, },
}, },
async mounted() { async mounted() {
@ -70,8 +62,9 @@ export default {
} catch (e) { } catch (e) {
console.error(e) console.error(e)
showError(t('Could not fetch subscriptions')) showError(t('Could not fetch subscriptions'))
} } finally {
this.loading = false this.loading = false
}
}, },
} }
</script> </script>