mirror of
https://github.com/Ocelot-Social-Community/Ocelot-Social.git
synced 2025-12-12 23:35:58 +00:00
Admin page handles loading and error state
This commit is contained in:
roschaefer
parent
37f281b441
commit
c129c3fbae
15
webapp/graphql/admin/Statistics.js
Normal file
15
webapp/graphql/admin/Statistics.js
Normal file
@ -0,0 +1,15 @@
|
||||
import gql from 'graphql-tag'
|
||||
|
||||
export const Statistics = gql`
|
||||
query {
|
||||
statistics {
|
||||
countUsers
|
||||
countPosts
|
||||
countComments
|
||||
countNotifications
|
||||
countInvites
|
||||
countFollows
|
||||
countShouts
|
||||
}
|
||||
}
|
||||
`
|
||||
@ -22,6 +22,7 @@
|
||||
},
|
||||
"site": {
|
||||
"thanks": "Danke!",
|
||||
"error-occurred": "Ein Fehler ist aufgetreten.",
|
||||
"made": "Mit ❤ gemacht",
|
||||
"imprint": "Impressum",
|
||||
"data-privacy": "Datenschutz",
|
||||
|
||||
@ -22,6 +22,7 @@
|
||||
},
|
||||
"site": {
|
||||
"thanks": "Thanks!",
|
||||
"error-occurred": "An error occurred.",
|
||||
"made": "Made with ❤",
|
||||
"imprint": "Imprint",
|
||||
"termsAndConditions": "Terms and conditions",
|
||||
|
||||
@ -1,90 +1,134 @@
|
||||
<template>
|
||||
<ds-card>
|
||||
<client-only>
|
||||
<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>
|
||||
<client-only slot="count">
|
||||
<hc-count-to :end-val="statistics.countUsers" />
|
||||
</client-only>
|
||||
</ds-number>
|
||||
<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-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>
|
||||
<client-only slot="count">
|
||||
<hc-count-to :end-val="statistics.countPosts" />
|
||||
</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.comments')"
|
||||
size="x-large"
|
||||
uppercase
|
||||
>
|
||||
<client-only slot="count">
|
||||
<hc-count-to :end-val="statistics.countComments" />
|
||||
</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.notifications')"
|
||||
size="x-large"
|
||||
uppercase
|
||||
>
|
||||
<client-only slot="count">
|
||||
<hc-count-to :end-val="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>
|
||||
<client-only slot="count">
|
||||
<hc-count-to :end-val="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>
|
||||
<client-only slot="count">
|
||||
<hc-count-to :end-val="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>
|
||||
<client-only slot="count">
|
||||
<hc-count-to :end-val="statistics.countShouts" />
|
||||
</client-only>
|
||||
</ds-number>
|
||||
</ds-space>
|
||||
</ds-flex-item>
|
||||
</ds-flex>
|
||||
</ds-space>
|
||||
</client-only>
|
||||
<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
|
||||
>
|
||||
<client-only slot="count">
|
||||
<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
|
||||
>
|
||||
<client-only slot="count">
|
||||
<hc-count-to :end-val="data.statistics.countPosts" />
|
||||
</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.comments')"
|
||||
size="x-large"
|
||||
uppercase
|
||||
>
|
||||
<client-only slot="count">
|
||||
<hc-count-to :end-val="data.statistics.countComments" />
|
||||
</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.notifications')"
|
||||
size="x-large"
|
||||
uppercase
|
||||
>
|
||||
<client-only slot="count">
|
||||
<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
|
||||
>
|
||||
<client-only slot="count">
|
||||
<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
|
||||
>
|
||||
<client-only slot="count">
|
||||
<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
|
||||
>
|
||||
<client-only slot="count">
|
||||
<hc-count-to :end-val="data.statistics.countShouts" />
|
||||
</client-only>
|
||||
</ds-number>
|
||||
</ds-space>
|
||||
</ds-flex-item>
|
||||
</ds-flex>
|
||||
</ds-space>
|
||||
</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>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user