From 1899450dc196e63ced9377288e731d5512d888d9 Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Tue, 14 Jul 2020 02:44:16 +0300
Subject: [PATCH 1/5] Rename action that sets reports filter

---
 src/store/modules/reports.js                   |  2 +-
 src/views/reports/components/ReportsFilter.vue |  4 ++--
 test/views/reports/reportsFilter.test.js       | 10 +++++-----
 3 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/store/modules/reports.js b/src/store/modules/reports.js
index 6bc98993..6a56dedb 100644
--- a/src/store/modules/reports.js
+++ b/src/store/modules/reports.js
@@ -52,7 +52,7 @@ const reports = {
       commit('SET_PAGE', page)
       commit('SET_LOADING', false)
     },
-    SetFilter({ commit }, filter) {
+    SetReportsFilter({ commit }, filter) {
       commit('SET_REPORTS_FILTER', filter)
     },
     CreateReportNote({ commit, getters, state, rootState }, { content, reportID }) {
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()

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 2/5] 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>

From 49df2deb31e7e030d7cb93d15c85ec57a2eab9fe Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Tue, 14 Jul 2020 18:56:59 +0300
Subject: [PATCH 3/5] Add badge for displating open reports count

---
 src/views/layout/components/Sidebar/Item.vue | 35 +++++++++-----------
 1 file changed, 16 insertions(+), 19 deletions(-)

diff --git a/src/views/layout/components/Sidebar/Item.vue b/src/views/layout/components/Sidebar/Item.vue
index 03e3b89f..a19a4288 100644
--- a/src/views/layout/components/Sidebar/Item.vue
+++ b/src/views/layout/components/Sidebar/Item.vue
@@ -1,7 +1,14 @@
+<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,
@@ -15,23 +22,13 @@ export default {
       type: String,
       default: ''
     }
-  },
-  render(h, context) {
-    const { count, icon, title } = context.props
-    const vnodes = []
-
-    if (icon) {
-      vnodes.push(<svg-icon icon-class={icon}/>)
-    }
-
-    if (title) {
-      vnodes.push(<span slot='title'>{(title)} </span>)
-    }
-
-    if (count) {
-      vnodes.push(<span slot='title'>({(count)})</span>)
-    }
-    return vnodes
   }
 }
 </script>
+
+<style rel='stylesheet/scss' lang='scss' scoped>
+.count-badge {
+  margin-left: 5px;
+  height: 48px;
+}
+</style>

From 3df6738bc703290a78ebe758a8114a778a857eca Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Tue, 14 Jul 2020 19:19:42 +0300
Subject: [PATCH 4/5] Create separate constant in state and action for open
 reports count

---
 src/store/modules/reports.js                  | 20 +++++++++++++++----
 .../layout/components/Sidebar/SidebarItem.vue |  2 +-
 src/views/layout/components/Sidebar/index.vue |  3 +--
 3 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/src/store/modules/reports.js b/src/store/modules/reports.js
index 6a56dedb..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,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)
     },
diff --git a/src/views/layout/components/Sidebar/SidebarItem.vue b/src/views/layout/components/Sidebar/SidebarItem.vue
index c81a33ce..7451ada2 100644
--- a/src/views/layout/components/Sidebar/SidebarItem.vue
+++ b/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: {
diff --git a/src/views/layout/components/Sidebar/index.vue b/src/views/layout/components/Sidebar/index.vue
index 369f321d..e52ae6b6 100644
--- a/src/views/layout/components/Sidebar/index.vue
+++ b/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>

From 82255a4bcd22c40c459572c68aed206920fc5866 Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Tue, 14 Jul 2020 19:23:59 +0300
Subject: [PATCH 5/5] Update Changelog

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

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