Ocelot-Social/webapp/pages/admin/index.vue

<template>
  <ds-card>
    <no-ssr>
      <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>
                <no-ssr slot="count">
                  <hc-count-to :start-val="0" :end-val="statistics.countUsers || 0" />
                </no-ssr>
              </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>
                <no-ssr slot="count">
                  <hc-count-to :start-val="0" :end-val="statistics.countPosts || 0" />
                </no-ssr>
              </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.comments')"
                size="x-large"
                uppercase
              >
                <no-ssr slot="count">
                  <hc-count-to :start-val="0" :end-val="statistics.countComments || 0" />
                </no-ssr>
              </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.notifications')"
                size="x-large"
                uppercase
              >
                <no-ssr slot="count">
                  <hc-count-to :start-val="0" :end-val="statistics.countNotifications || 0" />
                </no-ssr>
              </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.organizations')"
                size="x-large"
                uppercase
              >
                <no-ssr slot="count">
                  <hc-count-to :start-val="0" :end-val="statistics.countOrganizations || 0" />
                </no-ssr>
              </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.projects')"
                size="x-large"
                uppercase
              >
                <no-ssr slot="count">
                  <hc-count-to :start-val="0" :end-val="statistics.countProjects || 0" />
                </no-ssr>
              </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>
                <no-ssr slot="count">
                  <hc-count-to :start-val="0" :end-val="statistics.countInvites || 0" />
                </no-ssr>
              </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>
                <no-ssr slot="count">
                  <hc-count-to :start-val="0" :end-val="statistics.countFollows || 0" />
                </no-ssr>
              </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>
                <no-ssr slot="count">
                  <hc-count-to :start-val="0" :end-val="statistics.countShouts || 0" />
                </no-ssr>
              </ds-number>
            </ds-space>
          </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
    },
  },
  mounted() {
    this.$apollo.queries.statistics.startPolling(5000)
  },
  apollo: {
    statistics: {
      query: gql(`
        query {
          statistics {
            countUsers
            countPosts
            countComments
            countNotifications
            countOrganizations
            countProjects
            countInvites
            countFollows
            countShouts
          }
        }
      `),
    },
  },
}
</script>