diff --git a/CHANGELOG.md b/CHANGELOG.md index 64ec5c92..a3b692bf 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -17,6 +17,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/). - Add MRF Activity Expiration setting - Add ability to disable multi-factor authentication for a user - Ability to configure S3 settings on Upload tab +- Show number of open reports in Sidebar Menu ### Changed diff --git a/src/store/modules/reports.js b/src/store/modules/reports.js index 6bc98993..1f6ae44f 100644 --- a/src/store/modules/reports.js +++ b/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,7 +57,14 @@ const reports = { commit('SET_PAGE', page) commit('SET_LOADING', false) }, - SetFilter({ commit }, filter) { + 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) }, CreateReportNote({ commit, getters, state, rootState }, { content, reportID }) { diff --git a/src/views/layout/components/Sidebar/Item.vue b/src/views/layout/components/Sidebar/Item.vue index b515f615..a19a4288 100644 --- a/src/views/layout/components/Sidebar/Item.vue +++ b/src/views/layout/components/Sidebar/Item.vue @@ -1,8 +1,19 @@ + + + + diff --git a/src/views/layout/components/Sidebar/SidebarItem.vue b/src/views/layout/components/Sidebar/SidebarItem.vue index 9fb88139..7451ada2 100644 --- a/src/views/layout/components/Sidebar/SidebarItem.vue +++ b/src/views/layout/components/Sidebar/SidebarItem.vue @@ -4,14 +4,21 @@ - @@ -43,6 +54,7 @@ import { isExternal } from '@/utils' import Item from './Item' import AppLink from './Link' import FixiOSBug from './FixiOSBug' +import numeral from 'numeral' export default { name: 'SidebarItem', @@ -71,6 +83,9 @@ export default { computed: { invitesEnabled() { return this.basePath === '/invites' ? this.$store.state.app.invitesEnabled : true + }, + normalizedReportsCount() { + return numeral(this.$store.state.reports.openReportsCount).format('0a') } }, methods: { @@ -104,6 +119,9 @@ export default { } return path.resolve(this.basePath, routePath) }, + showCount(item) { + return item.path === '/reports' + }, isExternalLink(routePath) { return isExternal(routePath) }, diff --git a/src/views/layout/components/Sidebar/index.vue b/src/views/layout/components/Sidebar/index.vue index 11ef4c02..e52ae6b6 100644 --- a/src/views/layout/components/Sidebar/index.vue +++ b/src/views/layout/components/Sidebar/index.vue @@ -31,6 +31,9 @@ export default { isCollapse() { return !this.sidebar.opened } + }, + mounted() { + this.$store.dispatch('FetchOpenReportsCount') } } diff --git a/src/views/reports/components/ReportsFilter.vue b/src/views/reports/components/ReportsFilter.vue index 29e15075..0d34a389 100644 --- a/src/views/reports/components/ReportsFilter.vue +++ b/src/views/reports/components/ReportsFilter.vue @@ -38,11 +38,11 @@ export default { } }, created() { - this.$store.dispatch('SetFilter', this.$data.filter) + this.$store.dispatch('SetReportsFilter', this.$data.filter) }, methods: { toggleFilters() { - this.$store.dispatch('SetFilter', this.$data.filter) + this.$store.dispatch('SetReportsFilter', this.$data.filter) this.$store.dispatch('ClearFetchedReports') this.$store.dispatch('FetchReports', 1) } diff --git a/test/views/reports/reportsFilter.test.js b/test/views/reports/reportsFilter.test.js index 0701262c..853cb1c3 100644 --- a/test/views/reports/reportsFilter.test.js +++ b/test/views/reports/reportsFilter.test.js @@ -26,7 +26,7 @@ describe('Reports filter', () => { it('shows open reports when "Open" filter is applied', async (done) => { expect(store.state.reports.fetchedReports.length).toEqual(7) - store.dispatch('SetFilter', 'open') + store.dispatch('SetReportsFilter', 'open') store.dispatch('ClearFetchedReports') store.dispatch('FetchReports', 1) await flushPromises() @@ -38,7 +38,7 @@ describe('Reports filter', () => { it('shows resolved reports when "Resolved" filter is applied', async (done) => { expect(store.state.reports.fetchedReports.length).toEqual(7) - store.dispatch('SetFilter', 'resolved') + store.dispatch('SetReportsFilter', 'resolved') store.dispatch('ClearFetchedReports') store.dispatch('FetchReports') await flushPromises() @@ -50,7 +50,7 @@ describe('Reports filter', () => { it('shows closed reports when "Closed" filter is applied', async (done) => { expect(store.state.reports.fetchedReports.length).toEqual(7) - store.dispatch('SetFilter', 'closed') + store.dispatch('SetReportsFilter', 'closed') store.dispatch('ClearFetchedReports') store.dispatch('FetchReports') await flushPromises() @@ -62,13 +62,13 @@ describe('Reports filter', () => { it('shows all users after removing filters', async (done) => { expect(store.state.reports.fetchedReports.length).toEqual(7) - store.dispatch('SetFilter', 'open') + store.dispatch('SetReportsFilter', 'open') store.dispatch('ClearFetchedReports') store.dispatch('FetchReports') await flushPromises() expect(store.state.reports.fetchedReports.length).toEqual(2) - store.dispatch('SetFilter', '') + store.dispatch('SetReportsFilter', '') store.dispatch('ClearFetchedReports') store.dispatch('FetchReports') await flushPromises()