Number of items in Dashboard view [#42]

This commit is contained in:
Daan Wijns 2020-09-28 21:19:28 +02:00
parent e78d5da7f2
commit 03b33d79f5
6 changed files with 40 additions and 7 deletions

View file

@ -36,6 +36,12 @@
@input="setCategoryFilter"
height="55"
></v-select>
<div
style="font-size: 0.9em"
class="download--text text-uppercase text-center"
>
{{ torrentCountString }}
</div>
</div>
</template>
@ -62,7 +68,7 @@ export default {
selectedCategory: null
}),
computed: {
...mapGetters(['getCategories']),
...mapGetters(['getCategories', 'getTorrentCountString']),
availableCategories() {
const categories = ['All', 'Uncategorized']
categories.push(...Object.keys(this.getCategories()))
@ -77,6 +83,9 @@ export default {
default:
return this.selectedCategory
}
},
torrentCountString() {
return this.getTorrentCountString()
}
},
methods: {

View file

@ -50,7 +50,7 @@
/>
<FilterSelect />
</v-flex>
<v-container>
<v-container class="mt-12">
<BottomActions />
</v-container>
</v-navigation-drawer>

View file

@ -13,5 +13,12 @@ export default {
getCategories: state => () => state.categories,
getModals: state => () => state.modals,
getTorrents: state => () => state.torrents,
getAuthenticated: state => () => state.authenticated
getAuthenticated: state => () => state.authenticated,
getTorrentCountString: state => () => {
if (state.selected_torrents && state.selected_torrents.length) {
return `${state.selected_torrents.length} of ${state.filteredTorrentsCount} torrents`
}
return `${state.filteredTorrentsCount} torrents`
}
}

View file

@ -48,7 +48,8 @@ export default new Vuex.Store({
showCurrentSpeed: true,
showGlobalRemoveResumePause: true
},
categories: []
categories: [],
filteredTorrentsCount: 0
},
getters: {
...getters

View file

@ -71,5 +71,6 @@ export default {
FETCH_CATEGORIES: async state => {
const { data } = await qbit.getCategories()
state.categories = data
}
},
SET_CURRENT_ITEM_COUNT: (state, count) => (state.filteredTorrentsCount = count)
}

View file

@ -2,7 +2,14 @@
<div class="pl-5 pr-5" color="background" @click.self="resetSelected">
<h1 style="font-size: 1.1em !important" class="subtitle-1 grey--text">
Dashboard
<p
style="float: right; font-size: 0.7em"
class="grey--text text-uppercase"
>
{{ torrentCountString }}
</p>
</h1>
<v-container
color="background"
class="my-4 pt-5 pa-0"
@ -20,7 +27,7 @@
></v-text-field>
</v-flex>
<div v-if="torrents.length === 0" class="mt-5 text-xs-center">
<p class="grey--text">No active Torrents!</p>
<p class="grey--text">Nothing to see here!</p>
</div>
<div v-else>
<div
@ -56,7 +63,7 @@ export default {
},
computed: {
...mapState(['mainData']),
...mapGetters(['getTorrents']),
...mapGetters(['getTorrents', 'getTorrentCountString']),
torrents() {
if (this.input.length === 0) return this.getTorrents()
@ -74,6 +81,9 @@ export default {
}
const fuse = new Fuse(this.getTorrents(), options)
return fuse.search(this.input).map(el => el.item)
},
torrentCountString() {
return this.getTorrentCountString()
}
},
methods: {
@ -87,6 +97,11 @@ export default {
},
beforeDestroy() {
this.$store.commit('REMOVE_INTERVALS')
},
watch: {
torrents: function (torrents) {
this.$store.commit('SET_CURRENT_ITEM_COUNT', torrents.length)
}
}
}
</script>