Create separate constant in state and action for open reports count

src/store/modules/reports.js

@@ -2,12 +2,13 @@ import { changeState, fetchReports, createNote, deleteNote } from '@/api/reports
 
 const reports = {
   state: {
-    fetchedReports: [],
-    totalReportsCount: 0,
     currentPage: 1,
+    fetchedReports: [],
+    loading: true,
+    openReportsCount: 0,
     pageSize: 50,
     stateFilter: '',
-    loading: true
+    totalReportsCount: 0
   },
   mutations: {
     SET_LAST_REPORT_ID: (state, id) => {
@@ -16,6 +17,9 @@ const reports = {
     SET_LOADING: (state, status) => {
       state.loading = status
     },
+    SET_OPEN_REPORTS_COUNT: (state, total) => {
+      state.openReportsCount = total
+    },
     SET_PAGE: (state, page) => {
       state.currentPage = page
     },
@@ -30,7 +34,7 @@ const reports = {
     }
   },
   actions: {
-    async ChangeReportState({ commit, getters, state }, reportsData) {
+    async ChangeReportState({ commit, dispatch, getters, state }, reportsData) {
       changeState(reportsData, getters.authHost, getters.token)
 
       const updatedReports = state.fetchedReports.map(report => {
@@ -39,6 +43,7 @@ const reports = {
       })
 
       commit('SET_REPORTS', updatedReports)
+      dispatch('FetchOpenReportsCount')
     },
     ClearFetchedReports({ commit }) {
       commit('SET_REPORTS', [])
@@ -52,6 +57,13 @@ const reports = {
       commit('SET_PAGE', page)
       commit('SET_LOADING', false)
     },
+    async FetchOpenReportsCount({ commit, getters, state }) {
+      commit('SET_LOADING', true)
+      const { data } = await fetchReports('open', state.currentPage, state.pageSize, getters.authHost, getters.token)
+
+      commit('SET_OPEN_REPORTS_COUNT', data.total)
+      commit('SET_LOADING', false)
+    },
     SetReportsFilter({ commit }, filter) {
       commit('SET_REPORTS_FILTER', filter)
     },

src/views/layout/components/Sidebar/SidebarItem.vue

@@ -85,7 +85,7 @@ export default {
       return this.basePath === '/invites' ? this.$store.state.app.invitesEnabled : true
     },
     normalizedReportsCount() {
-      return numeral(this.$store.state.reports.totalReportsCount).format('0a')
+      return numeral(this.$store.state.reports.openReportsCount).format('0a')
     }
   },
   methods: {

src/views/layout/components/Sidebar/index.vue

@@ -33,8 +33,7 @@ export default {
     }
   },
   mounted() {
-    this.$store.dispatch('SetReportsFilter', 'open')
-    this.$store.dispatch('FetchReports', 1)
+    this.$store.dispatch('FetchOpenReportsCount')
   }
 }
 </script>