Add total user count

package.json

@@ -53,6 +53,7 @@
     "mockjs": "1.0.1-beta3",
     "normalize.css": "7.0.0",
     "nprogress": "0.2.0",
+    "numeral": "^2.0.6",
     "screenfull": "4.0.0",
     "showdown": "1.8.6",
     "sortablejs": "1.7.0",

src/views/users/index.vue

@@ -1,6 +1,9 @@
 <template>
   <div class="users-container">
-    <h1>{{ $t('users.users') }}</h1>
+    <h1>
+      {{ $t('users.users') }}
+      <span class="user-count">({{ normalizedUsersCount }})</span>
+    </h1>
     <div class="search-container">
       <users-filter/>
       <el-input :placeholder="$t('users.search')" class="search" @input="handleDebounceSearchInput"/>
@@ -141,6 +144,7 @@
 
 <script>
 import debounce from 'lodash.debounce'
+import numeral from 'numeral'
 import UsersFilter from './components/UsersFilter'
 import DropdownMenu from './components/DropdownMenu'
 
@@ -159,6 +163,9 @@ export default {
     loading() {
       return this.$store.state.users.loading
     },
+    normalizedUsersCount() {
+      return numeral(this.$store.state.users.totalUsersCount).format('0a')
+    },
     users() {
       return this.$store.state.users.fetchedUsers
     },
@@ -269,6 +276,10 @@ export default {
     align-items: center;
     margin: 22px 15px 22px 15px
   }
+  .user-count {
+    color: gray;
+    font-size: 28px;
+  }
 }
 @media
 only screen and (max-width: 760px),

yarn.lock

@@ -7031,6 +7031,11 @@ number-is-nan@^1.0.0:
   resolved "https://registry.yarnpkg.com/number-is-nan/-/number-is-nan-1.0.1.tgz#097b602b53422a522c1afb8790318336941a011d"
   integrity sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=
 
+numeral@^2.0.6:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/numeral/-/numeral-2.0.6.tgz#4ad080936d443c2561aed9f2197efffe25f4e506"
+  integrity sha1-StCAk21EPCVhrtnyGX7//iX05QY=
+
 nwsapi@^2.0.7:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/nwsapi/-/nwsapi-2.1.1.tgz#08d6d75e69fd791bdea31507ffafe8c843b67e9c"