Merge pull request #2124 from gradido/2044-Admin-Interface-Displays-Statistics

feat: 🍰 Admin Interface Displays Statistics

admin/jest.config.js

@@ -26,5 +26,5 @@ module.exports = {
   testMatch: ['**/?(*.)+(spec|test).js?(x)'],
   // snapshotSerializers: ['jest-serializer-vue'],
   transformIgnorePatterns: ['<rootDir>/node_modules/(?!vee-validate/dist/rules)'],
-  // testEnvironment: 'jest-environment-jsdom-sixteen', // not needed anymore since jest@26, see: https://www.npmjs.com/package/jest-environment-jsdom-sixteen
+  testEnvironment: 'jest-environment-jsdom-sixteen', // why this is still needed? should not be needed anymore since jest@26, see: https://www.npmjs.com/package/jest-environment-jsdom-sixteen
 }

admin/package.json

@@ -39,6 +39,7 @@
     "identity-obj-proxy": "^3.0.0",
     "jest": "26.6.3",
     "jest-canvas-mock": "^2.3.1",
+    "jest-environment-jsdom-sixteen": "^2.0.0",
     "portal-vue": "^2.1.7",
     "qrcanvas-vue": "2.1.1",
     "regenerator-runtime": "^0.13.9",

admin/src/components/CommunityStatistic.spec.js

@@ -0,0 +1,39 @@
+import { mount } from '@vue/test-utils'
+import CommunityStatistic from './CommunityStatistic'
+
+const localVue = global.localVue
+
+const mocks = {
+  $t: jest.fn((t) => t),
+  $n: jest.fn((n) => n),
+}
+
+const propsData = {
+  value: {
+    totalUsers: '123',
+    activeUsers: '100',
+    deletedUsers: '5',
+    totalGradidoCreated: '2500',
+    totalGradidoDecayed: '200',
+    totalGradidoAvailable: '500',
+    totalGradidoUnbookedDecayed: '111',
+  },
+}
+
+describe('CommunityStatistic', () => {
+  let wrapper
+
+  const Wrapper = () => {
+    return mount(CommunityStatistic, { localVue, mocks, propsData })
+  }
+
+  describe('mount', () => {
+    beforeEach(() => {
+      wrapper = Wrapper()
+    })
+
+    it('renders the Div Element ".community-statistic"', () => {
+      expect(wrapper.find('div.community-statistic').exists()).toBe(true)
+    })
+  })
+})

admin/src/components/CommunityStatistic.vue

@@ -0,0 +1,59 @@
+<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/ContentFooter.spec.js

@@ -0,0 +1,29 @@
+import { mount } from '@vue/test-utils'
+import ContentFooter from './ContentFooter'
+
+const localVue = global.localVue
+
+const mocks = {
+  $t: jest.fn((t) => t),
+  $i18n: {
+    locale: jest.fn(() => 'en'),
+  },
+}
+
+describe('ContentFooter', () => {
+  let wrapper
+
+  const Wrapper = () => {
+    return mount(ContentFooter, { localVue, mocks })
+  }
+
+  describe('mount', () => {
+    beforeEach(() => {
+      wrapper = Wrapper()
+    })
+
+    it('renders the div element ".content-footer"', () => {
+      expect(wrapper.find('div.content-footer').exists()).toBe(true)
+    })
+  })
+})

admin/src/components/ContentFooter.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="content-footer">
     <hr />
     <b-row align-v="center" class="mt-4 justify-content-lg-between">
       <b-col>

admin/src/components/ContributionLinkForm.spec.js

@@ -1,5 +1,6 @@
 import { mount } from '@vue/test-utils'
 import ContributionLinkForm from './ContributionLinkForm.vue'
+import { toastErrorSpy } from '../../test/testSetup'
 
 const localVue = global.localVue
 
@@ -8,9 +9,13 @@ global.alert = jest.fn()
 const propsData = {
   contributionLinkData: {},
 }
+const apolloMutateMock = jest.fn().mockResolvedValue()
 
 const mocks = {
   $t: jest.fn((t) => t),
+  $apollo: {
+    mutate: apolloMutateMock,
+  },
 }
 
 // const mockAPIcall = jest.fn()
@@ -99,4 +104,16 @@ describe('ContributionLinkForm', () => {
     //   })
     // })
   })
+
+  describe('send createContributionLink with error', () => {
+    beforeEach(() => {
+      apolloMutateMock.mockRejectedValue({ message: 'OUCH!' })
+      wrapper = Wrapper()
+      wrapper.vm.onSubmit()
+    })
+
+    it('toasts an error message', () => {
+      expect(toastErrorSpy).toBeCalledWith('contributionLink.noStartDate')
+    })
+  })
 })

admin/src/locales/de.json

@@ -73,6 +73,7 @@
   "hide_details": "Details verbergen",
   "lastname": "Nachname",
   "math": {
+    "colon": ":",
     "exclaim": "!",
     "pipe": "|",
     "plus": "+"
@@ -105,6 +106,16 @@
   "removeNotSelf": "Als Admin/Moderator kannst du dich nicht selber löschen.",
   "remove_all": "alle Nutzer entfernen",
   "save": "Speichern",
+  "statistic": {
+    "activeUsers": "Aktive Mitglieder",
+    "deletedUsers": "Gelöschte Mitglieder",
+    "name": "Statistik",
+    "totalGradidoAvailable": "GDD insgesamt im Umlauf",
+    "totalGradidoCreated": "GDD insgesamt geschöpft",
+    "totalGradidoDecayed": "GDD insgesamt verfallen",
+    "totalGradidoUnbookedDecayed": "Ungebuchter GDD Verfall",
+    "totalUsers": "Mitglieder"
+  },
   "status": "Status",
   "success": "Erfolg",
   "text": "Text",

admin/src/locales/en.json

@@ -73,6 +73,7 @@
   "hide_details": "Hide details",
   "lastname": "Lastname",
   "math": {
+    "colon": ":",
     "exclaim": "!",
     "pipe": "|",
     "plus": "+"
@@ -105,6 +106,16 @@
   "removeNotSelf": "As an admin/moderator, you cannot delete yourself.",
   "remove_all": "Remove all users",
   "save": "Speichern",
+  "statistic": {
+    "activeUsers": "Active members",
+    "deletedUsers": "Deleted members",
+    "name": "Statistic",
+    "totalGradidoAvailable": "Total GDD in circulation",
+    "totalGradidoCreated": "Total created GDD",
+    "totalGradidoDecayed": "Total GDD decay",
+    "totalGradidoUnbookedDecayed": "Unbooked GDD decay",
+    "totalUsers": "Members"
+  },
   "status": "Status",
   "success": "Success",
   "text": "Text",

admin/src/pages/Overview.spec.js

@@ -1,28 +1,83 @@
 import { mount } from '@vue/test-utils'
 import Overview from './Overview.vue'
+import { listContributionLinks } from '@/graphql/listContributionLinks.js'
+import { communityStatistics } from '@/graphql/communityStatistics.js'
+import { listUnconfirmedContributions } from '@/graphql/listUnconfirmedContributions.js'
 
 const localVue = global.localVue
 
-const apolloQueryMock = jest.fn().mockResolvedValue({
-  data: {
-    listUnconfirmedContributions: [
-      {
-        pending: true,
+const apolloQueryMock = jest
+  .fn()
+  .mockResolvedValueOnce({
+    data: {
+      listUnconfirmedContributions: [
+        {
+          pending: true,
+        },
+        {
+          pending: true,
+        },
+        {
+          pending: true,
+        },
+      ],
+    },
+  })
+  .mockResolvedValueOnce({
+    data: {
+      communityStatistics: {
+        totalUsers: 3113,
+        activeUsers: 1057,
+        deletedUsers: 35,
+        totalGradidoCreated: '4083774.05000000000000000000',
+        totalGradidoDecayed: '-1062639.13634129622923372197',
+        totalGradidoAvailable: '2513565.869444365732411569',
+        totalGradidoUnbookedDecayed: '-500474.6738366222166261272',
       },
-      {
-        pending: true,
+    },
+  })
+  .mockResolvedValueOnce({
+    data: {
+      listContributionLinks: {
+        links: [
+          {
+            id: 1,
+            name: 'Meditation',
+            memo: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut l',
+            amount: '200',
+            validFrom: '2022-04-01',
+            validTo: '2022-08-01',
+            cycle: 'täglich',
+            maxPerCycle: '3',
+            maxAmountPerMonth: 0,
+            link: 'https://localhost/redeem/CL-1a2345678',
+          },
+        ],
+        count: 1,
       },
-      {
-        pending: true,
-      },
-    ],
-  },
-})
+    },
+  })
+  .mockResolvedValue({
+    data: {
+      listUnconfirmedContributions: [
+        {
+          pending: true,
+        },
+        {
+          pending: true,
+        },
+        {
+          pending: true,
+        },
+      ],
+    },
+  })
 
 const storeCommitMock = jest.fn()
 
 const mocks = {
   $t: jest.fn((t) => t),
+  $n: jest.fn((n) => n),
   $apollo: {
     query: apolloQueryMock,
   },
@@ -47,10 +102,30 @@ describe('Overview', () => {
     })
 
     it('calls listUnconfirmedContributions', () => {
-      expect(apolloQueryMock).toBeCalled()
+      expect(apolloQueryMock).toBeCalledWith(
+        expect.objectContaining({
+          query: listUnconfirmedContributions,
+        }),
+      )
     })
 
-    it('commts three pending creations to store', () => {
+    it('calls communityStatistics', () => {
+      expect(apolloQueryMock).toBeCalledWith(
+        expect.objectContaining({
+          query: communityStatistics,
+        }),
+      )
+    })
+
+    it('calls listContributionLinks', () => {
+      expect(apolloQueryMock).toBeCalledWith(
+        expect.objectContaining({
+          query: listContributionLinks,
+        }),
+      )
+    })
+
+    it('commits three pending creations to store', () => {
       expect(storeCommitMock).toBeCalledWith('setOpenCreations', 3)
     })
 

admin/src/pages/Overview.vue

@@ -29,26 +29,39 @@
       </b-card-text>
     </b-card>
     <contribution-link :items="items" :count="count" />
+    <community-statistic class="mt-5" v-model="statistics" />
   </div>
 </template>
 <script>
 import { listContributionLinks } from '@/graphql/listContributionLinks.js'
+import { communityStatistics } from '@/graphql/communityStatistics.js'
 import ContributionLink from '../components/ContributionLink.vue'
-import { listUnconfirmedContributions } from '../graphql/listUnconfirmedContributions'
+import CommunityStatistic from '../components/CommunityStatistic.vue'
+import { listUnconfirmedContributions } from '@/graphql/listUnconfirmedContributions.js'
 
 export default {
   name: 'overview',
   components: {
     ContributionLink,
+    CommunityStatistic,
   },
   data() {
     return {
       items: [],
       count: 0,
+      statistics: {
+        totalUsers: null,
+        activeUsers: null,
+        deletedUsers: null,
+        totalGradidoCreated: null,
+        totalGradidoDecayed: null,
+        totalGradidoAvailable: null,
+        totalGradidoUnbookedDecayed: null,
+      },
     }
   },
   methods: {
-    async getPendingCreations() {
+    getPendingCreations() {
       this.$apollo
         .query({
           query: listUnconfirmedContributions,
@@ -58,7 +71,7 @@ export default {
           this.$store.commit('setOpenCreations', result.data.listUnconfirmedContributions.length)
         })
     },
-    async getContributionLinks() {
+    getContributionLinks() {
       this.$apollo
         .query({
           query: listContributionLinks,
@@ -72,9 +85,31 @@ export default {
           this.toastError('listContributionLinks has no result, use default data')
         })
     },
+    getCommunityStatistics() {
+      this.$apollo
+        .query({
+          query: communityStatistics,
+          fetchPolicy: 'network-only',
+        })
+        .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.getPendingCreations()
+    this.getCommunityStatistics()
     this.getContributionLinks()
   },
 }

admin/yarn.lock

@@ -1282,6 +1282,17 @@
     jest-message-util "^24.9.0"
     jest-mock "^24.9.0"
 
+"@jest/fake-timers@^25.1.0":
+  version "25.5.0"
+  resolved "https://registry.yarnpkg.com/@jest/fake-timers/-/fake-timers-25.5.0.tgz#46352e00533c024c90c2bc2ad9f2959f7f114185"
+  integrity sha512-9y2+uGnESw/oyOI3eww9yaxdZyHq7XvprfP/eeoCsjqKYts2yRlsHS/SgjPDV8FyMfn2nbMy8YzUk6nyvdLOpQ==
+  dependencies:
+    "@jest/types" "^25.5.0"
+    jest-message-util "^25.5.0"
+    jest-mock "^25.5.0"
+    jest-util "^25.5.0"
+    lolex "^5.0.0"
+
 "@jest/fake-timers@^26.6.2":
   version "26.6.2"
   resolved "https://registry.yarnpkg.com/@jest/fake-timers/-/fake-timers-26.6.2.tgz#459c329bcf70cee4af4d7e3f3e67848123535aad"
@@ -1493,6 +1504,16 @@
     "@types/istanbul-reports" "^1.1.1"
     "@types/yargs" "^13.0.0"
 
+"@jest/types@^25.5.0":
+  version "25.5.0"
+  resolved "https://registry.yarnpkg.com/@jest/types/-/types-25.5.0.tgz#4d6a4793f7b9599fc3680877b856a97dbccf2a9d"
+  integrity sha512-OXD0RgQ86Tu3MazKo8bnrkDRaDXXMGUqd+kTtLtK1Zb7CRzQcaSRPPPV37SvYTdevXEBVxe0HXylEjs8ibkmCw==
+  dependencies:
+    "@types/istanbul-lib-coverage" "^2.0.0"
+    "@types/istanbul-reports" "^1.1.1"
+    "@types/yargs" "^15.0.0"
+    chalk "^3.0.0"
+
 "@jest/types@^26.6.2":
   version "26.6.2"
   resolved "https://registry.yarnpkg.com/@jest/types/-/types-26.6.2.tgz#bef5a532030e1d88a2f5a6d933f84e97226ed48e"
@@ -4109,6 +4130,14 @@ chalk@^2.0.0, chalk@^2.0.1, chalk@^2.1.0, chalk@^2.3.0, chalk@^2.4.1, chalk@^2.4
     escape-string-regexp "^1.0.5"
     supports-color "^5.3.0"
 
+chalk@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-3.0.0.tgz#3f73c2bf526591f574cc492c51e2456349f844e4"
+  integrity sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==
+  dependencies:
+    ansi-styles "^4.1.0"
+    supports-color "^7.1.0"
+
 chalk@^4.0.0, chalk@^4.1.0:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.2.tgz#aac4e2b7734a740867aeb16bf02aad556a1e7a01"
@@ -7983,6 +8012,16 @@ jest-environment-jsdom-fifteen@^1.0.2:
     jest-util "^24.0.0"
     jsdom "^15.2.1"
 
+jest-environment-jsdom-sixteen@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/jest-environment-jsdom-sixteen/-/jest-environment-jsdom-sixteen-2.0.0.tgz#0f8c12663ccd9836d248574decffc575bfb091e1"
+  integrity sha512-BF+8P67aEJcd78TQzwSb9P4a73cArOWb5KgqI8eU6cHRWDIJdDRE8XTeZAmOuDSDhKpuEXjKkXwWB3GOJvqHJQ==
+  dependencies:
+    "@jest/fake-timers" "^25.1.0"
+    jest-mock "^25.1.0"
+    jest-util "^25.1.0"
+    jsdom "^16.2.1"
+
 jest-environment-jsdom@^24.9.0:
   version "24.9.0"
   resolved "https://registry.yarnpkg.com/jest-environment-jsdom/-/jest-environment-jsdom-24.9.0.tgz#4b0806c7fc94f95edb369a69cc2778eec2b7375b"
@@ -8197,6 +8236,20 @@ jest-message-util@^24.9.0:
     slash "^2.0.0"
     stack-utils "^1.0.1"
 
+jest-message-util@^25.5.0:
+  version "25.5.0"
+  resolved "https://registry.yarnpkg.com/jest-message-util/-/jest-message-util-25.5.0.tgz#ea11d93204cc7ae97456e1d8716251185b8880ea"
+  integrity sha512-ezddz3YCT/LT0SKAmylVyWWIGYoKHOFOFXx3/nA4m794lfVUskMcwhip6vTgdVrOtYdjeQeis2ypzes9mZb4EA==
+  dependencies:
+    "@babel/code-frame" "^7.0.0"
+    "@jest/types" "^25.5.0"
+    "@types/stack-utils" "^1.0.1"
+    chalk "^3.0.0"
+    graceful-fs "^4.2.4"
+    micromatch "^4.0.2"
+    slash "^3.0.0"
+    stack-utils "^1.0.1"
+
 jest-message-util@^26.6.2:
   version "26.6.2"
   resolved "https://registry.yarnpkg.com/jest-message-util/-/jest-message-util-26.6.2.tgz#58173744ad6fc0506b5d21150b9be56ef001ca07"
@@ -8219,6 +8272,13 @@ jest-mock@^24.0.0, jest-mock@^24.9.0:
   dependencies:
     "@jest/types" "^24.9.0"
 
+jest-mock@^25.1.0, jest-mock@^25.5.0:
+  version "25.5.0"
+  resolved "https://registry.yarnpkg.com/jest-mock/-/jest-mock-25.5.0.tgz#a91a54dabd14e37ecd61665d6b6e06360a55387a"
+  integrity sha512-eXWuTV8mKzp/ovHc5+3USJMYsTBhyQ+5A1Mak35dey/RG8GlM4YWVylZuGgVXinaW6tpvk/RSecmF37FKUlpXA==
+  dependencies:
+    "@jest/types" "^25.5.0"
+
 jest-mock@^26.6.2:
   version "26.6.2"
   resolved "https://registry.yarnpkg.com/jest-mock/-/jest-mock-26.6.2.tgz#d6cb712b041ed47fe0d9b6fc3474bc6543feb302"
@@ -8495,6 +8555,17 @@ jest-util@^24.0.0, jest-util@^24.9.0:
     slash "^2.0.0"
     source-map "^0.6.0"
 
+jest-util@^25.1.0, jest-util@^25.5.0:
+  version "25.5.0"
+  resolved "https://registry.yarnpkg.com/jest-util/-/jest-util-25.5.0.tgz#31c63b5d6e901274d264a4fec849230aa3fa35b0"
+  integrity sha512-KVlX+WWg1zUTB9ktvhsg2PXZVdkI1NBevOJSkTKYAyXyH4QSvh+Lay/e/v+bmaFfrkfx43xD8QTfgobzlEXdIA==
+  dependencies:
+    "@jest/types" "^25.5.0"
+    chalk "^3.0.0"
+    graceful-fs "^4.2.4"
+    is-ci "^2.0.0"
+    make-dir "^3.0.0"
+
 jest-util@^26.6.2:
   version "26.6.2"
   resolved "https://registry.yarnpkg.com/jest-util/-/jest-util-26.6.2.tgz#907535dbe4d5a6cb4c47ac9b926f6af29576cbc1"
@@ -8741,7 +8812,7 @@ jsdom@^15.2.1:
     ws "^7.0.0"
     xml-name-validator "^3.0.0"
 
-jsdom@^16.4.0:
+jsdom@^16.2.1, jsdom@^16.4.0:
   version "16.7.0"
   resolved "https://registry.yarnpkg.com/jsdom/-/jsdom-16.7.0.tgz#918ae71965424b197c819f8183a754e18977b710"
   integrity sha512-u9Smc2G1USStM+s/x1ru5Sxrl6mPYCbByG1U/hUmqaVsm4tbNyS7CicOSRyuGQYZhTu0h84qkZZQ/I+dzizSVw==
@@ -9096,6 +9167,13 @@ loglevel@^1.6.8:
   resolved "https://registry.yarnpkg.com/loglevel/-/loglevel-1.7.1.tgz#005fde2f5e6e47068f935ff28573e125ef72f197"
   integrity sha512-Hesni4s5UkWkwCGJMQGAh71PaLUmKFM60dHvq0zi/vDhhrzuk+4GgNbTXJ12YYQJn6ZKBDNIjYcuQGKudvqrIw==
 
+lolex@^5.0.0:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/lolex/-/lolex-5.1.2.tgz#953694d098ce7c07bc5ed6d0e42bc6c0c6d5a367"
+  integrity sha512-h4hmjAvHTmd+25JSwrtTIuwbKdwg5NzZVRMLn9saij4SZaepCrTCxPr35H/3bjwfMJtN+t3CX8672UIkglz28A==
+  dependencies:
+    "@sinonjs/commons" "^1.7.0"
+
 loose-envify@^1.0.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"