From d9237db6fe984cee179758e2254134d0741ff2fc Mon Sep 17 00:00:00 2001
From: Grzegorz Leoniec <greg@app-interactive.de>
Date: Fri, 19 Oct 2018 12:31:43 +0200
Subject: [PATCH] added current statistics to the admin dashboard

---
 components/CountTo.vue                        |  13 +
 package.json                                  |   1 +
 pages/admin/index.vue                         | 225 ++++++++++++------
 pages/profile/_slug.vue                       |   7 +
 .../components/data-display/Number/Number.vue |   6 +-
 .../components/data-display/Number/demo.md    |  17 ++
 yarn.lock                                     |   4 +
 7 files changed, 197 insertions(+), 76 deletions(-)
 create mode 100644 components/CountTo.vue

diff --git a/components/CountTo.vue b/components/CountTo.vue
new file mode 100644
index 000000000..229ea4f6d
--- /dev/null
+++ b/components/CountTo.vue
@@ -0,0 +1,13 @@
+<script>
+import CountTo from 'vue-count-to'
+export default {
+  extends: CountTo,
+  props: {
+    startVal: { type: Number, default: 0 },
+    endVal: { type: Number, required: true },
+    duration: { type: Number, default: 3000 },
+    autoplay: { type: Boolean, default: true },
+    separator: { type: String, default: '.' }
+  }
+}
+</script>
diff --git a/package.json b/package.json
index b0b0d3e49..af22de36f 100644
--- a/package.json
+++ b/package.json
@@ -28,6 +28,7 @@
     "nuxt-env": "^0.0.4",
     "v-tooltip": "^2.0.0-rc.33",
     "vue-cion-design-system": "file:./styleguide",
+    "vue-count-to": "^1.0.13",
     "vue-izitoast": "^1.1.0"
   },
   "devDependencies": {
diff --git a/pages/admin/index.vue b/pages/admin/index.vue
index f0d618073..60d67f32f 100644
--- a/pages/admin/index.vue
+++ b/pages/admin/index.vue
@@ -1,82 +1,157 @@
 <template>
   <ds-card>
-    <ds-space margin="large">
-      <ds-flex>
-        <ds-flex-item>
-          <ds-number
-            :count="3802 | number(0)"
-            label="Users"
-            size="x-large"
-            uppercase />
-        </ds-flex-item>
-        <ds-flex-item>
-          <ds-number
-            :count="10491 | number(0)"
-            label="Posts"
-            size="x-large"
-            uppercase />
-        </ds-flex-item>
-        <ds-flex-item>
-          <ds-number
-            :count="43644 | number(0)"
-            label="Comments"
-            size="x-large"
-            uppercase />
-        </ds-flex-item>
-      </ds-flex>
-    </ds-space>
-    <ds-space margin="x-large">
-      <ds-flex>
-        <ds-flex-item>
-          <ds-number
-            :count="80046 | number(0)"
-            label="Notifications"
-            size="x-large"
-            uppercase />
-        </ds-flex-item>
-        <ds-flex-item>
-          <ds-number
-            :count="273 | number(0)"
-            label="Organization"
-            size="x-large"
-            uppercase />
-        </ds-flex-item>
-        <ds-flex-item>
-          <ds-number
-            :count="0 | number(0)"
-            label="Projects"
-            size="x-large"
-            uppercase />
-        </ds-flex-item>
-      </ds-flex>
-    </ds-space>
-    <ds-space margin="x-large">
-      <ds-flex>
-        <ds-flex-item>
-          <ds-number
-            :count="2174 | number(0)"
-            label="Open Invites"
-            size="x-large"
-            uppercase />
-        </ds-flex-item>
-        <ds-flex-item>
-          <ds-number
-            :count="1383 | number(0)"
-            label="Follows"
-            size="x-large"
-            uppercase />
-        </ds-flex-item>
-        <ds-flex-item>
-          <ds-number
-            :count="27180 | number(0)"
-            label="Shouts"
-            size="x-large"
-            uppercase />
-        </ds-flex-item>
-      </ds-flex>
-    </ds-space>
+    <no-ssr>
+      <ds-space margin="large">
+        <ds-flex>
+          <ds-flex-item>
+            <ds-number
+              :count="0"
+              label="Users"
+              size="x-large"
+              uppercase>
+              <no-ssr slot="count">
+                <hc-count-to :end-val="statistics.countUsers || 0" />
+              </no-ssr>
+            </ds-number>
+          </ds-flex-item>
+          <ds-flex-item>
+            <ds-number
+              :count="0"
+              label="Posts"
+              size="x-large"
+              uppercase>
+              <no-ssr slot="count">
+                <hc-count-to :end-val="statistics.countPosts || 0" />
+              </no-ssr>
+            </ds-number>
+          </ds-flex-item>
+          <ds-flex-item>
+            <ds-number
+              :count="0"
+              label="Comments"
+              size="x-large"
+              uppercase>
+              <no-ssr slot="count">
+                <hc-count-to :end-val="statistics.countComments || 0" />
+              </no-ssr>
+            </ds-number>
+          </ds-flex-item>
+        </ds-flex>
+      </ds-space>
+      <ds-space margin="x-large">
+        <ds-flex>
+          <ds-flex-item>
+            <ds-number
+              :count="0"
+              label="Notifications"
+              size="x-large"
+              uppercase>
+              <no-ssr slot="count">
+                <hc-count-to :end-val="statistics.countNotifications || 0" />
+              </no-ssr>
+            </ds-number>
+          </ds-flex-item>
+          <ds-flex-item>
+            <ds-number
+              :count="0"
+              label="Organization"
+              size="x-large"
+              uppercase>
+              <no-ssr slot="count">
+                <hc-count-to :end-val="statistics.countOrganizations || 0" />
+              </no-ssr>
+            </ds-number>
+          </ds-flex-item>
+          <ds-flex-item>
+            <ds-number
+              :count="0"
+              label="Projects"
+              size="x-large"
+              uppercase>
+              <no-ssr slot="count">
+                <hc-count-to :end-val="statistics.countProjects || 0" />
+              </no-ssr>
+            </ds-number>
+          </ds-flex-item>
+        </ds-flex>
+      </ds-space>
+      <ds-space margin="x-large">
+        <ds-flex>
+          <ds-flex-item>
+            <ds-number
+              :count="0"
+              label="Open Invites"
+              size="x-large"
+              uppercase>
+              <no-ssr slot="count">
+                <hc-count-to :end-val="statistics.countInvites || 0" />
+              </no-ssr>
+            </ds-number>
+          </ds-flex-item>
+          <ds-flex-item>
+            <ds-number
+              :count="0"
+              label="Follows"
+              size="x-large"
+              uppercase>
+              <no-ssr slot="count">
+                <hc-count-to :end-val="statistics.countFollows || 0" />
+              </no-ssr>
+            </ds-number>
+          </ds-flex-item>
+          <ds-flex-item>
+            <ds-number
+              :count="0"
+              label="Shouts"
+              size="x-large"
+              uppercase>
+              <no-ssr slot="count">
+                <hc-count-to :end-val="statistics.countShouts || 0" />
+              </no-ssr>
+            </ds-number>
+          </ds-flex-item>
+        </ds-flex>
+      </ds-space>
+    </no-ssr>
   </ds-card>
 </template>
 
 <script>
+import gql from 'graphql-tag'
+import HcCountTo from '~/components/CountTo.vue'
 
+export default {
+  components: {
+    HcCountTo
+  },
+  data() {
+    return {
+      statistics: {}
+    }
+  },
+  computed: {
+    isClient() {
+      return process.client
+    }
+  },
+  apollo: {
+    statistics: {
+      query: gql(`
+        query {
+          statistics {
+            countUsers
+            countPosts
+            countComments
+            countNotifications
+            countOrganizations
+            countProjects
+            countInvites
+            countFollows
+            countShouts
+          }
+        }
+      `)
+    }
+  }
+}
+</script>
diff --git a/pages/profile/_slug.vue b/pages/profile/_slug.vue
index d6d73d2cb..54eccbc7a 100644
--- a/pages/profile/_slug.vue
+++ b/pages/profile/_slug.vue
@@ -182,6 +182,13 @@ export default {
       return this.User ? this.User[0] : {}
     }
   },
+  watch: {
+    User(val) {
+      if (!val || !val.length) {
+        throw new Error('User not found!')
+      }
+    }
+  },
   methods: {
     fetchUser() {
       // TODO: we should use subscriptions instead of fetching the whole user again
diff --git a/styleguide/src/system/components/data-display/Number/Number.vue b/styleguide/src/system/components/data-display/Number/Number.vue
index 0e869856e..68bdee9d5 100644
--- a/styleguide/src/system/components/data-display/Number/Number.vue
+++ b/styleguide/src/system/components/data-display/Number/Number.vue
@@ -8,9 +8,12 @@
     <ds-text
       :size="size"
       class="ds-number-count"
-      style="margin-bottom: 0">{{ count }}</ds-text>
+      style="margin-bottom: 0">
+      <slot name="count">{{ count }}</slot>
+    </ds-text>
     <ds-text
       :uppercase="uppercase"
+      :size="labelSize"
       class="ds-number-label"
       color="soft"
       v-html="label" />
@@ -22,6 +25,7 @@ export default {
   name: 'DsNumber',
   props: {
     size: { type: String, default: 'x-large' },
+    labelSize: { type: String, default: 'small' },
     count: { type: [Number, String], default: 0 },
     label: { type: String, default: null },
     uppercase: { type: Boolean, default: false }
diff --git a/styleguide/src/system/components/data-display/Number/demo.md b/styleguide/src/system/components/data-display/Number/demo.md
index ae45b2505..61ffbca36 100644
--- a/styleguide/src/system/components/data-display/Number/demo.md
+++ b/styleguide/src/system/components/data-display/Number/demo.md
@@ -14,3 +14,20 @@
   count="1734"
   label="Contributions" />
 ```
+```html
+<ds-number 
+  size="xx-large"
+  label-size="large"
+  count="1734"
+  label="Contributions" />
+```
+
+## Slot
+
+```html
+<ds-number 
+    size="large"
+    label="collected donations from users">
+    <span slot="count">1.123.124,03 EUR</span>
+  <ds-number>
+```
diff --git a/yarn.lock b/yarn.lock
index 9696094bb..29454854b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7557,6 +7557,10 @@ vue-cli-plugin-apollo@^0.17.0:
     subscriptions-transport-ws "^0.9.15"
     ts-node "^7.0.1"
 
+vue-count-to@^1.0.13:
+  version "1.0.13"
+  resolved "https://registry.yarnpkg.com/vue-count-to/-/vue-count-to-1.0.13.tgz#3e7573ea6e64c2b2972f64e0a2ab2e23c7590ff3"
+
 vue-eslint-parser@^2.0.3:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/vue-eslint-parser/-/vue-eslint-parser-2.0.3.tgz#c268c96c6d94cfe3d938a5f7593959b0ca3360d1"