From 08bd5dae4087d1972fabdefd7bfff5dec39b4d1b Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Tue, 14 Jul 2020 02:51:51 +0300
Subject: [PATCH] Show reports count in Sidebar
---
src/views/layout/components/Sidebar/Item.vue | 12 +++++++--
.../layout/components/Sidebar/SidebarItem.vue | 26 ++++++++++++++++---
src/views/layout/components/Sidebar/index.vue | 4 +++
3 files changed, 36 insertions(+), 6 deletions(-)
diff --git a/src/views/layout/components/Sidebar/Item.vue b/src/views/layout/components/Sidebar/Item.vue
index b515f615..03e3b89f 100644
--- a/src/views/layout/components/Sidebar/Item.vue
+++ b/src/views/layout/components/Sidebar/Item.vue
@@ -3,6 +3,10 @@ export default {
name: 'MenuItem',
functional: true,
props: {
+ count: {
+ type: String,
+ default: null
+ },
icon: {
type: String,
default: ''
@@ -13,7 +17,7 @@ export default {
}
},
render(h, context) {
- const { icon, title } = context.props
+ const { count, icon, title } = context.props
const vnodes = []
if (icon) {
@@ -21,7 +25,11 @@ export default {
}
if (title) {
- vnodes.push(<span slot='title'>{(title)}</span>)
+ vnodes.push(<span slot='title'>{(title)} </span>)
+ }
+
+ if (count) {
+ vnodes.push(<span slot='title'>({(count)})</span>)
}
return vnodes
}
diff --git a/src/views/layout/components/Sidebar/SidebarItem.vue b/src/views/layout/components/Sidebar/SidebarItem.vue
index 9fb88139..c81a33ce 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.totalReportsCount).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..369f321d 100644
--- a/src/views/layout/components/Sidebar/index.vue
+++ b/src/views/layout/components/Sidebar/index.vue
@@ -31,6 +31,10 @@ export default {
isCollapse() {
return !this.sidebar.opened
}
+ },
+ mounted() {
+ this.$store.dispatch('SetReportsFilter', 'open')
+ this.$store.dispatch('FetchReports', 1)
}
}
</script>
--
GitLab