From feb09e48fac38582acc08de7fa838c3d98a33750 Mon Sep 17 00:00:00 2001
From: mahula <lenzmath@posteo.de>
Date: Mon, 14 Nov 2022 14:29:10 +0100
Subject: [PATCH] implement statistic table on separate statistic page in admin
 area

---
 admin/src/components/CommunityStatistic.vue   | 59 ---------------
 .../src/components/Tables/StatistcsTable.vue  |  5 --
 .../src/components/Tables/StatisticTable.vue  | 71 +++++++++++++++++++
 admin/src/locales/de.json                     |  2 +
 admin/src/locales/en.json                     |  2 +
 admin/src/pages/CommunityStatistic.vue        | 54 ++++++++++++++
 admin/src/router/routes.js                    |  4 ++
 7 files changed, 133 insertions(+), 64 deletions(-)
 delete mode 100644 admin/src/components/CommunityStatistic.vue
 delete mode 100644 admin/src/components/Tables/StatistcsTable.vue
 create mode 100644 admin/src/components/Tables/StatisticTable.vue
 create mode 100644 admin/src/pages/CommunityStatistic.vue

diff --git a/admin/src/components/CommunityStatistic.vue b/admin/src/components/CommunityStatistic.vue
deleted file mode 100644
index c19f8deec..000000000
--- a/admin/src/components/CommunityStatistic.vue
+++ /dev/null
@@ -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>
diff --git a/admin/src/components/Tables/StatistcsTable.vue b/admin/src/components/Tables/StatistcsTable.vue
deleted file mode 100644
index a402adf68..000000000
--- a/admin/src/components/Tables/StatistcsTable.vue
+++ /dev/null
@@ -1,5 +0,0 @@
-<template>
-  <div class="statistics-table">
-    //
-  </div>
-</template>
\ No newline at end of file
diff --git a/admin/src/components/Tables/StatisticTable.vue b/admin/src/components/Tables/StatisticTable.vue
new file mode 100644
index 000000000..668854bb6
--- /dev/null
+++ b/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>
diff --git a/admin/src/locales/de.json b/admin/src/locales/de.json
index 987a42ca0..714f554b9 100644
--- a/admin/src/locales/de.json
+++ b/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",
diff --git a/admin/src/locales/en.json b/admin/src/locales/en.json
index 824522a66..057f07b68 100644
--- a/admin/src/locales/en.json
+++ b/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",
diff --git a/admin/src/pages/CommunityStatistic.vue b/admin/src/pages/CommunityStatistic.vue
new file mode 100644
index 000000000..562c9efc5
--- /dev/null
+++ b/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>
diff --git a/admin/src/router/routes.js b/admin/src/router/routes.js
index ee82f128e..e365a6e40 100644
--- a/admin/src/router/routes.js
+++ b/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',