Number of items in Dashboard view [#42]

src/components/Navbar/FilterSelect.vue

@@ -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: {

src/components/Navbar/Navbar.vue

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

src/store/getters.js

@@ -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`
+    }
 }

src/store/index.js

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

src/store/mutations.js

@@ -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)
 }

src/views/Dashboard.vue

@@ -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>