Admin page handles loading and error state

webapp/graphql/admin/Statistics.js

@@ -0,0 +1,15 @@
+import gql from 'graphql-tag'
+
+export const Statistics = gql`
+  query {
+    statistics {
+      countUsers
+      countPosts
+      countComments
+      countNotifications
+      countInvites
+      countFollows
+      countShouts
+    }
+  }
+`

webapp/locales/de.json

@@ -22,6 +22,7 @@
   },
   "site": {
     "thanks": "Danke!",
+    "error-occurred": "Ein Fehler ist aufgetreten.",
     "made": "Mit ❤ gemacht",
     "imprint": "Impressum",
     "data-privacy": "Datenschutz",

webapp/locales/en.json

@@ -22,6 +22,7 @@
   },
   "site": {
     "thanks": "Thanks!",
+    "error-occurred": "An error occurred.",
     "made": "Made with ❤",
     "imprint": "Imprint",
     "termsAndConditions": "Terms and conditions",

webapp/pages/admin/index.vue

@@ -1,22 +1,49 @@
 <template>
   <ds-card>
-    <client-only>
+    <ApolloQuery :query="Statistics">
+      <template v-slot="{ result: { loading, error, data } }">
+        <template v-if="loading">
+          <ds-space centered>
+            <ds-spinner size="large"></ds-spinner>
+          </ds-space>
+        </template>
+        <template v-else-if="error">
+          <ds-space centered>
+            <ds-space>
+              <img :src="errorIconPath" width="40" />
+            </ds-space>
+            <ds-text>
+              {{ $t('site.error-occurred') }}
+            </ds-text>
+          </ds-space>
+        </template>
+        <template v-else-if="data">
           <ds-space margin="large">
             <ds-flex>
               <ds-flex-item :width="{ base: '100%', sm: '50%', md: '33%' }">
                 <ds-space margin="small">
-              <ds-number :count="0" :label="$t('admin.dashboard.users')" size="x-large" uppercase>
+                  <ds-number
+                    :count="0"
+                    :label="$t('admin.dashboard.users')"
+                    size="x-large"
+                    uppercase
+                  >
                     <client-only slot="count">
-                  <hc-count-to :end-val="statistics.countUsers" />
+                      <hc-count-to :end-val="data.statistics.countUsers" />
                     </client-only>
                   </ds-number>
                 </ds-space>
               </ds-flex-item>
               <ds-flex-item :width="{ base: '100%', sm: '50%', md: '33%' }">
                 <ds-space margin="small">
-              <ds-number :count="0" :label="$t('admin.dashboard.posts')" size="x-large" uppercase>
+                  <ds-number
+                    :count="0"
+                    :label="$t('admin.dashboard.posts')"
+                    size="x-large"
+                    uppercase
+                  >
                     <client-only slot="count">
-                  <hc-count-to :end-val="statistics.countPosts" />
+                      <hc-count-to :end-val="data.statistics.countPosts" />
                     </client-only>
                   </ds-number>
                 </ds-space>
@@ -30,7 +57,7 @@
                     uppercase
                   >
                     <client-only slot="count">
-                  <hc-count-to :end-val="statistics.countComments" />
+                      <hc-count-to :end-val="data.statistics.countComments" />
                     </client-only>
                   </ds-number>
                 </ds-space>
@@ -44,47 +71,64 @@
                     uppercase
                   >
                     <client-only slot="count">
-                  <hc-count-to :end-val="statistics.countNotifications" />
+                      <hc-count-to :end-val="data.statistics.countNotifications" />
                     </client-only>
                   </ds-number>
                 </ds-space>
               </ds-flex-item>
               <ds-flex-item :width="{ base: '100%', sm: '50%', md: '33%' }">
                 <ds-space margin="small">
-              <ds-number :count="0" :label="$t('admin.dashboard.invites')" size="x-large" uppercase>
+                  <ds-number
+                    :count="0"
+                    :label="$t('admin.dashboard.invites')"
+                    size="x-large"
+                    uppercase
+                  >
                     <client-only slot="count">
-                  <hc-count-to :end-val="statistics.countInvites" />
+                      <hc-count-to :end-val="data.statistics.countInvites" />
                     </client-only>
                   </ds-number>
                 </ds-space>
               </ds-flex-item>
               <ds-flex-item :width="{ base: '100%', sm: '50%', md: '33%' }">
                 <ds-space margin="small">
-              <ds-number :count="0" :label="$t('admin.dashboard.follows')" size="x-large" uppercase>
+                  <ds-number
+                    :count="0"
+                    :label="$t('admin.dashboard.follows')"
+                    size="x-large"
+                    uppercase
+                  >
                     <client-only slot="count">
-                  <hc-count-to :end-val="statistics.countFollows" />
+                      <hc-count-to :end-val="data.statistics.countFollows" />
                     </client-only>
                   </ds-number>
                 </ds-space>
               </ds-flex-item>
               <ds-flex-item :width="{ base: '100%', sm: '50%', md: '33%' }">
                 <ds-space margin="small">
-              <ds-number :count="0" :label="$t('admin.dashboard.shouts')" size="x-large" uppercase>
+                  <ds-number
+                    :count="0"
+                    :label="$t('admin.dashboard.shouts')"
+                    size="x-large"
+                    uppercase
+                  >
                     <client-only slot="count">
-                  <hc-count-to :end-val="statistics.countShouts" />
+                      <hc-count-to :end-val="data.statistics.countShouts" />
                     </client-only>
                   </ds-number>
                 </ds-space>
               </ds-flex-item>
             </ds-flex>
           </ds-space>
-    </client-only>
+        </template>
+      </template>
+    </ApolloQuery>
   </ds-card>
 </template>
 
 <script>
-import gql from 'graphql-tag'
 import HcCountTo from '~/components/CountTo.vue'
+import { Statistics } from '~/graphql/admin/Statistics'
 
 export default {
   components: {
@@ -92,30 +136,9 @@ export default {
   },
   data() {
     return {
-      statistics: {},
+      errorIconPath: '/img/svg/emoji/cry.svg',
+      Statistics,
     }
   },
-  computed: {
-    isClient() {
-      return process.client
-    },
-  },
-  apollo: {
-    statistics: {
-      query: gql`
-        query {
-          statistics {
-            countUsers
-            countPosts
-            countComments
-            countNotifications
-            countInvites
-            countFollows
-            countShouts
-          }
-        }
-      `,
-    },
-  },
 }
 </script>