implement statistic table on separate statistic page in admin area

admin/src/components/CommunityStatistic.vue

@@ -1,59 +0,0 @@
-<template>
-  <div class="community-statistic">
-    <div>
-      <b-jumbotron bg-variant="info" text-variant="white" border-variant="dark">
-        <template #header>{{ $t('statistic.name') }}</template>
-
-        <hr class="my-4" />
-
-        <div>
-          {{ $t('statistic.totalUsers') }}{{ $t('math.colon') }}
-          <b>{{ value.totalUsers }}</b>
-        </div>
-        <div>
-          {{ $t('statistic.activeUsers') }}{{ $t('math.colon') }}
-          <b>{{ value.activeUsers }}</b>
-        </div>
-        <div>
-          {{ $t('statistic.deletedUsers') }}{{ $t('math.colon') }}
-          <b>{{ value.deletedUsers }}</b>
-        </div>
-        <div>
-          {{ $t('statistic.totalGradidoCreated') }}{{ $t('math.colon') }}
-          <b>{{ $n(value.totalGradidoCreated, 'decimal') }} {{ $t('GDD') }}</b>
-          <small class="ml-5">{{ value.totalGradidoCreated }}</small>
-        </div>
-        <div>
-          {{ $t('statistic.totalGradidoDecayed') }}{{ $t('math.colon') }}
-          <b>{{ $n(value.totalGradidoDecayed, 'decimal') }} {{ $t('GDD') }}</b>
-          <small class="ml-5">{{ value.totalGradidoDecayed }}</small>
-        </div>
-        <div>
-          {{ $t('statistic.totalGradidoAvailable') }}{{ $t('math.colon') }}
-          <b>{{ $n(value.totalGradidoAvailable, 'decimal') }} {{ $t('GDD') }}</b>
-          <small class="ml-5">{{ value.totalGradidoAvailable }}</small>
-        </div>
-        <div>
-          {{ $t('statistic.totalGradidoUnbookedDecayed') }}{{ $t('math.colon') }}
-          <b>{{ $n(value.totalGradidoUnbookedDecayed, 'decimal') }} {{ $t('GDD') }}</b>
-          <small class="ml-5">{{ value.totalGradidoUnbookedDecayed }}</small>
-        </div>
-      </b-jumbotron>
-    </div>
-  </div>
-</template>
-<script>
-import CONFIG from '@/config'
-
-export default {
-  name: 'CommunityStatistic',
-  props: {
-    value: { type: Object },
-  },
-  data() {
-    return {
-      CONFIG,
-    }
-  },
-}
-</script>

admin/src/components/Tables/StatistcsTable.vue

@@ -1,5 +0,0 @@
-<template>
-  <div class="statistics-table">
-    //
-  </div>
-</template>

admin/src/components/Tables/StatisticTable.vue

@@ -0,0 +1,71 @@
+<template>
+  <div class="statistic-table">
+
+    <b-table-simple class="mt-5" :items="items" :fields="fields" striped stacked="md" responsive>
+      <b-thead>
+        <b-tr>
+          <b-th></b-th>
+          <b-th>{{ $t('statistic.count') }}</b-th>
+          <b-th>{{ $t('statistic.detail') }}</b-th>
+        </b-tr>
+      </b-thead>
+      <b-tbody>
+        <b-tr>
+          <b-td><b>{{ $t('statistic.totalUsers') }}</b></b-td>
+          <b-td>{{ value.totalUsers }}</b-td>
+          <b-td></b-td>
+        </b-tr>
+        <b-tr>
+          <b-td><b>{{ $t('statistic.activeUsers') }}</b></b-td>
+          <b-td>{{ value.activeUsers }}</b-td>
+          <b-td></b-td>
+        </b-tr>
+        <b-tr>
+          <b-td><b>{{ $t('statistic.deletedUsers') }}</b></b-td>
+          <b-td>{{ value.deletedUsers }}</b-td>
+          <b-td></b-td>
+        </b-tr>
+        <b-tr>
+          <b-td><b>{{ $t('statistic.totalGradidoCreated') }}</b></b-td>
+          <b-td>{{ $n(value.totalGradidoCreated, 'decimal') }} {{ $t('GDD') }}</b-td>
+          <b-td>{{ value.totalGradidoCreated }}</b-td>
+        </b-tr>
+        <b-tr>
+          <b-td><b>{{ $t('statistic.totalGradidoDecayed') }}</b></b-td>
+          <b-td>{{ $n(value.totalGradidoDecayed, 'decimal') }} {{ $t('GDD') }}</b-td>
+          <b-td>{{ value.totalGradidoDecayed }}</b-td>
+        </b-tr>
+        <b-tr>
+          <b-td><b>{{ $t('statistic.totalGradidoAvailable') }}}</b></b-td>
+          <b-td>{{ $n(value.totalGradidoAvailable, 'decimal') }} {{ $t('GDD') }}</b-td>
+          <b-td>{{ value.totalGradidoAvailable }}</b-td>
+        </b-tr>
+        <b-tr>
+          <b-td><b>{{ $t('statistic.totalGradidoUnbookedDecayed') }}</b></b-td>
+          <b-td>{{ $n(value.totalGradidoUnbookedDecayed, 'decimal') }} {{ $t('GDD') }}</b-td>
+          <b-td>{{ value.totalGradidoUnbookedDecayed }}</b-td>
+        </b-tr>
+      </b-tbody>
+    </b-table-simple>
+  </div>
+</template>
+<script>
+export default {
+  name: 'StatisticTable',
+  props: {
+    value: {
+      type: Array,
+      required: true,
+    },
+    fields: {
+      type: Array,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      // CONFIG,
+    }
+  },
+}
+</script>

admin/src/locales/de.json

@@ -126,7 +126,9 @@
   "save": "Speichern",
   "statistic": {
     "activeUsers": "Aktive Mitglieder",
+    "count": "Menge",
     "deletedUsers": "Gelöschte Mitglieder",
+    "detail": "Detail",
     "name": "Statistik",
     "totalGradidoAvailable": "GDD insgesamt im Umlauf",
     "totalGradidoCreated": "GDD insgesamt geschöpft",

admin/src/locales/en.json

@@ -127,6 +127,8 @@
   "statistic": {
     "activeUsers": "Active members",
     "deletedUsers": "Deleted members",
+    "count": "Count",
+    "detail": "Detail",
     "name": "Statistic",
     "totalGradidoAvailable": "Total GDD in circulation",
     "totalGradidoCreated": "Total created GDD",

admin/src/pages/CommunityStatistic.vue

@@ -0,0 +1,54 @@
+<template>
+  <div class="community-statistic">
+    <statistic-table v-model="statistics" />
+  </div>
+</template>
+<script>
+import { communityStatistics } from '@/graphql/communityStatistics.js'
+import StatisticTable from '../components/Tables/StatisticTable.vue'
+
+export default {
+  name: 'CommunityStatistic',
+  components: {
+    StatisticTable,
+  },
+  data() {
+    return {
+      statistics: {
+        totalUsers: null,
+        activeUsers: null,
+        deletedUsers: null,
+        totalGradidoCreated: null,
+        totalGradidoDecayed: null,
+        totalGradidoAvailable: null,
+        totalGradidoUnbookedDecayed: null,
+      },
+    }
+  },
+  methods: {
+    getCommunityStatistics() {
+      this.$apollo
+        .query({
+          query: communityStatistics,
+        })
+        .then((result) => {
+          this.statistics.totalUsers = result.data.communityStatistics.totalUsers
+          this.statistics.activeUsers = result.data.communityStatistics.activeUsers
+          this.statistics.deletedUsers = result.data.communityStatistics.deletedUsers
+          this.statistics.totalGradidoCreated = result.data.communityStatistics.totalGradidoCreated
+          this.statistics.totalGradidoDecayed = result.data.communityStatistics.totalGradidoDecayed
+          this.statistics.totalGradidoAvailable =
+            result.data.communityStatistics.totalGradidoAvailable
+          this.statistics.totalGradidoUnbookedDecayed =
+            result.data.communityStatistics.totalGradidoUnbookedDecayed
+        })
+        .catch(() => {
+          this.toastError('communityStatistics has no result, use default data')
+        })
+    },
+  },
+  created() {
+    this.getCommunityStatistics()
+  },
+}
+</script>

admin/src/router/routes.js

@@ -6,6 +6,10 @@ const routes = [
     path: '/',
     component: () => import('@/pages/Overview.vue'),
   },
+  {
+    path: '/statistic',
+    component: () => import('@/pages/CommunityStatistic.vue'),
+  },
   {
     // TODO: Implement a "You are logged out"-Page
     path: '/logout',