feat: admin dashboard (wip)

client/components/admin/admin-dashboard.vue

@@ -1,19 +1,79 @@
 <template lang='pug'>
-  v-container(fluid, fill-height)
-    v-layout(row wrap)
-      v-flex(xs12)
-        .headline.primary--text {{ $t('admin:dashboard.title') }}
-        .subheading.grey--text {{ $t('admin:dashboard.subtitle') }}
+  v-card(tile, flat :color='$vuetify.dark ? "grey darken-4" : "grey lighten-5"')
+    .pa-3.pt-4
+      .headline.primary--text {{ $t('admin:dashboard.title') }}
+      .subheading.grey--text {{ $t('admin:dashboard.subtitle') }}
+    v-container(fluid, grid-list-lg)
+      v-layout(row, wrap)
+        v-flex(xs12 md6 lg4 xl3 d-flex)
+          v-card.primary(dark)
+            v-card-text
+              v-icon.dashboard-icon insert_drive_file
+              .subheading Pages
+              animated-number.display-1(
+                :value='357'
+                :duration='2000'
+                :formatValue='round'
+                easing='easeOutQuint'
+                )
+        v-flex(xs12 md6 lg4 xl3 d-flex)
+          v-card.indigo.lighten-1(dark)
+            v-card-text
+              v-icon.dashboard-icon person
+              .subheading Users
+              animated-number.display-1(
+                :value='34'
+                :duration='2000'
+                :formatValue='round'
+                easing='easeOutQuint'
+                )
+        v-flex(xs12 md6 lg4 xl3 d-flex)
+          v-card.indigo.lighten-2(dark)
+            v-card-text
+              v-icon.dashboard-icon people
+              .subheading Groups
+              animated-number.display-1(
+                :value='5'
+                :duration='2000'
+                :formatValue='round'
+                easing='easeOutQuint'
+                )
+        v-flex(xs12 md6 lg12 xl3 d-flex)
+          v-card.teal.lighten-2(dark)
+            v-card-text
+              v-icon.dashboard-icon blur_on
+              .subheading Wiki.js 2.0.0
+              .body-2 You are running the latest version.
+        v-flex(xs12)
+          v-card
+            v-card-text ---
+
 </template>
 
 <script>
+import AnimatedNumber from 'animated-number-vue'
+
 export default {
+  components: {
+    AnimatedNumber
+  },
   data() {
     return {}
+  },
+  methods: {
+    round(val) { return Math.round(val) }
   }
 }
 </script>
 
 <style lang='scss'>
 
+.dashboard-icon {
+  position: absolute;
+  right: 0;
+  top: 12px;
+  font-size: 120px;
+  opacity: .25;
+}
+
 </style>

package.json

@@ -153,6 +153,7 @@
   "devDependencies": {
     "@panter/vue-i18next": "0.12.0",
     "@vue/cli": "3.0.0",
+    "animated-number-vue": "0.1.3",
     "apollo-cache-inmemory": "1.2.7",
     "apollo-client": "2.3.8",
     "apollo-fetch": "0.7.0",
@@ -200,10 +201,7 @@
     "html-webpack-pug-plugin": "0.3.0",
     "i18next-xhr-backend": "1.5.1",
     "ignore-loader": "0.1.2",
-    "jest": "23.5.0",
-    "jest-junit": "5.1.0",
     "js-cookie": "2.2.0",
-    "lodash-webpack-plugin": "0.11.5",
     "mini-css-extract-plugin": "0.4.1",
     "node-sass": "4.9.3",
     "offline-plugin": "5.0.5",
@@ -268,21 +266,6 @@
     "Firefox ESR",
     "not ie < 11"
   ],
-  "jest": {
-    "testResultsProcessor": "./node_modules/jest-junit",
-    "collectCoverage": false,
-    "testMatch": [
-      "**/test/**/*.js?(x)",
-      "**/?(*.)(spec|test).js?(x)"
-    ],
-    "verbose": true
-  },
-  "jest-junit": {
-    "suiteName": "jest test",
-    "output": "./test-results/junit.xml",
-    "classNameTemplate": "{classname}-{title}",
-    "titleTemplate": "{classname}-{title}"
-  },
   "postcss": {
     "plugins": {
       "autoprefixer": {},

yarn.lock

@@ -786,6 +786,17 @@ amp@0.3.1, amp@~0.3.1:
   version "0.3.1"
   resolved "https://registry.yarnpkg.com/amp/-/amp-0.3.1.tgz#6adf8d58a74f361e82c1fa8d389c079e139fc47d"
 
+animated-number-vue@0.1.3:
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/animated-number-vue/-/animated-number-vue-0.1.3.tgz#dcb69b512dd1864358debc6ae2322223848429c5"
+  dependencies:
+    animejs "^2.2.0"
+    vue "^2.5.13"
+
+animejs@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/animejs/-/animejs-2.2.0.tgz#35eefdfc535b81949c9cb06f0b3e60c02e6fdc80"
+
 ansi-align@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/ansi-align/-/ansi-align-2.0.0.tgz#c36aeccba563b89ceb556f3690f0b1d9e3547f7f"