diff --git a/CHANGELOG.md b/CHANGELOG.md index 64ec5c9221a8df6ecfb6eb08fadfa58f2ff19969..a3b692bf74ae0a16386766a426585ee104343223 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 6bc989931363daca9b08d2a6a9b0c15a19d5f3db..1f6ae44f32945cadd1d2e4e6cede0636aa8cd786 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 b515f6159a27862b595f645208ba71ea04ed110f..a19a4288d5766a26b11a4965a1bfc54193daf7e8 100644 --- a/src/views/layout/components/Sidebar/Item.vue +++ b/src/views/layout/components/Sidebar/Item.vue @@ -1,8 +1,19 @@ +<template> + <span> + <svg-icon :icon-class="icon"/> + <span slot="title">{{ title }}</span> + <el-badge :value="count" type="primary" class="count-badge" /> + </span> +</template> + <script> export default { - name: 'MenuItem', - functional: true, + name: 'Item', props: { + count: { + type: String, + default: null + }, icon: { type: String, default: '' @@ -11,19 +22,13 @@ export default { type: String, default: '' } - }, - render(h, context) { - const { icon, title } = context.props - const vnodes = [] - - if (icon) { - vnodes.push(<svg-icon icon-class={icon}/>) - } - - if (title) { - vnodes.push(<span slot='title'>{(title)}</span>) - } - return vnodes } } </script> + +<style rel='stylesheet/scss' lang='scss' scoped> +.count-badge { + margin-left: 5px; + height: 48px; +} +</style> diff --git a/src/views/layout/components/Sidebar/SidebarItem.vue b/src/views/layout/components/Sidebar/SidebarItem.vue index 9fb8813958d7565e1ea6a8bb57cb6a2c88c3ef60..7451ada2a6a3b0110c9467d15c00660f9fe44392 100644 --- a/src/views/layout/components/Sidebar/SidebarItem.vue +++ b/src/views/layout/components/Sidebar/SidebarItem.vue @@ -4,14 +4,21 @@ <template v-if="hasOneShowingChild(item.children,item) && (!onlyOneChild.children||onlyOneChild.noShowingChildren)&&!item.alwaysShow"> <app-link :to="resolvePath(onlyOneChild.path)"> <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}"> - <item v-if="onlyOneChild.meta" :icon="onlyOneChild.meta.icon||item.meta.icon" :title="generateTitle(onlyOneChild.meta.title)" /> + <item + v-if="onlyOneChild.meta" + :count="showCount(item) ? normalizedReportsCount : null" + :icon="onlyOneChild.meta.icon||item.meta.icon" + :title="generateTitle(onlyOneChild.meta.title)" /> </el-menu-item> </app-link> </template> - <el-submenu v-else ref="subMenu" :index="resolvePath(item.path)"> <template slot="title"> - <item v-if="item.meta" :icon="item.meta.icon" :title="generateTitle(item.meta.title)" /> + <item + v-if="item.meta" + :count="showCount(item) ? normalizedReportsCount : null" + :icon="item.meta.icon" + :title="generateTitle(item.meta.title)" /> </template> <template v-for="child in item.children"> @@ -26,7 +33,11 @@ <app-link v-else :to="resolvePath(child.path)" :key="child.name"> <el-menu-item :index="resolvePath(child.path)"> - <item v-if="child.meta" :icon="child.meta.icon" :title="generateTitle(child.meta.title)" /> + <item + v-if="child.meta" + :count="showCount(item) ? normalizedReportsCount : null" + :icon="child.meta.icon" + :title="generateTitle(child.meta.title)" /> </el-menu-item> </app-link> </template> @@ -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 11ef4c0257a7d7c7e873f473ae18487e80fa8934..e52ae6b60b0c62989902069d8fe9920c019bbcc8 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') } } </script> diff --git a/src/views/reports/components/ReportsFilter.vue b/src/views/reports/components/ReportsFilter.vue index 29e15075fa0f511ca21b94c882187b59a336c8b8..0d34a38931efa5f071969cc0c06194735b0fa48a 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 0701262cbb11319043313f2b5635eea532e27fd5..853cb1c33239f8ef7ddb9437e5ba002e7ee56368 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()