Added basic sorting

This commit is contained in:
Kalle Fagerberg 2022-09-17 21:44:44 +02:00 committed by thrillfall
parent a5a69fa3f7
commit 1206b97cb3

View File

@ -3,6 +3,16 @@
<SettingsSection :title="t('gpoddersync', 'Synced subscriptions')" <SettingsSection :title="t('gpoddersync', 'Synced subscriptions')"
: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">
<div class="sorting-container">
<label for="gpoddersync_sorting">Sort by:</label>
<Multiselect id="gpoddersync_sorting"
v-model="sortBy"
:options="sortingOptions"
track-by="label"
label="label"
:allow-empty="false"
@change="updateSorting" />
</div>
<ul> <ul>
<SubscriptionListItem v-for="sub in subscriptions" <SubscriptionListItem v-for="sub in subscriptions"
:key="sub.url" :key="sub.url"
@ -28,6 +38,7 @@
<script> <script>
import EmptyContent from '@nextcloud/vue/dist/Components/EmptyContent' import EmptyContent from '@nextcloud/vue/dist/Components/EmptyContent'
import Multiselect from '@nextcloud/vue/dist/Components/Multiselect'
import SettingsSection from '@nextcloud/vue/dist/Components/SettingsSection' import SettingsSection from '@nextcloud/vue/dist/Components/SettingsSection'
import SubscriptionListItem from '../components/SubscriptionListItem.vue' import SubscriptionListItem from '../components/SubscriptionListItem.vue'
@ -37,10 +48,16 @@ import { generateUrl } from '@nextcloud/router'
import axios from '@nextcloud/axios' import axios from '@nextcloud/axios'
import { showError } from '@nextcloud/dialogs' import { showError } from '@nextcloud/dialogs'
const sortingOptions = [
{ label: 'Listened time (desc)', compare: (a, b) => a?.listenedSeconds < b?.listenedSeconds },
{ label: 'Listened time (asc)', compare: (a, b) => a?.listenedSeconds > b?.listenedSeconds },
]
export default { export default {
name: 'PersonalSettingsPage', name: 'PersonalSettingsPage',
components: { components: {
EmptyContent, EmptyContent,
Multiselect,
Podcast, Podcast,
SettingsSection, SettingsSection,
SubscriptionListItem, SubscriptionListItem,
@ -49,6 +66,8 @@ export default {
return { return {
subscriptions: [], subscriptions: [],
isLoading: true, isLoading: true,
sortBy: sortingOptions[0],
sortingOptions,
} }
}, },
async mounted() { async mounted() {
@ -58,6 +77,7 @@ export default {
throw new Error('expected subscriptions array in metrics response') throw new Error('expected subscriptions array in metrics response')
} }
this.subscriptions = resp.data.subscriptions this.subscriptions = resp.data.subscriptions
this.subscriptions.sort(this.sortBy.compare);
} catch (e) { } catch (e) {
console.error(e) console.error(e)
showError(t('gpoddersync', 'Could not fetch podcast synchronization stats')) showError(t('gpoddersync', 'Could not fetch podcast synchronization stats'))
@ -78,6 +98,9 @@ export default {
} }
return `(${hours}h ${modMinutes}min listened)` return `(${hours}h ${modMinutes}min listened)`
}, },
updateSorting(sorting) {
this.subscriptions.sort(sorting.compare)
},
}, },
} }
</script> </script>