msb-public
/
wiki
mirror of https://github.com/requarks/wiki
1
0
Code Issues Projects Releases Wiki Activity

feat: admin dashboard stats + actions

Browse Source
pull/5698/head
Nicolas Giard 3 years ago
parent d5a85774ee
commit b9ca6862de
No known key found for this signature in database
GPG Key ID: 85061B8F9D55B7C8
3 changed files with 93 additions and 31 deletions
Show Stats Download Patch File Download Diff File

11
ux/src/layouts/AdminLayout.vue
Unescape View File

@ -50,6 +50,8 @@ q-layout.admin(view='hHh Lpr lff')
q-item-section(avatar) q-item-section(avatar)
q-icon(name='img:/_assets/icons/fluent-change-theme.svg') q-icon(name='img:/_assets/icons/fluent-change-theme.svg')
q-item-section {{ t('admin.sites.title') }} q-item-section {{ t('admin.sites.title') }}
q-item-section(side)
q-badge(color='dark-3', :label='adminStore.sites.length')
q-item-label.q-mt-sm(header).text-caption.text-blue-grey-4 {{ t('admin.nav.site') }} q-item-label.q-mt-sm(header).text-caption.text-blue-grey-4 {{ t('admin.nav.site') }}
q-item.q-mb-md q-item.q-mb-md
q-item-section q-item-section
@ -118,13 +120,13 @@ q-layout.admin(view='hHh Lpr lff')
q-icon(name='img:/_assets/icons/fluent-people.svg') q-icon(name='img:/_assets/icons/fluent-people.svg')
q-item-section {{ t('admin.groups.title') }} q-item-section {{ t('admin.groups.title') }}
q-item-section(side) q-item-section(side)
q-badge(color='dark-3', :label='info.groupsTotal') q-badge(color='dark-3', :label='adminStore.info.groupsTotal')
q-item(to='/_admin/users', v-ripple, active-class='bg-primary text-white') q-item(to='/_admin/users', v-ripple, active-class='bg-primary text-white')
q-item-section(avatar) q-item-section(avatar)
q-icon(name='img:/_assets/icons/fluent-account.svg') q-icon(name='img:/_assets/icons/fluent-account.svg')
q-item-section {{ t('admin.users.title') }} q-item-section {{ t('admin.users.title') }}
q-item-section(side) q-item-section(side)
q-badge(color='dark-3', :label='info.usersTotal') q-badge(color='dark-3', :label='adminStore.info.usersTotal')
q-item-label.q-mt-sm(header).text-caption.text-blue-grey-4 {{ t('admin.nav.system') }} q-item-label.q-mt-sm(header).text-caption.text-blue-grey-4 {{ t('admin.nav.system') }}
q-item(to='/_admin/api', v-ripple, active-class='bg-primary text-white') q-item(to='/_admin/api', v-ripple, active-class='bg-primary text-white')
q-item-section(avatar) q-item-section(avatar)
@ -235,10 +237,6 @@ const user = reactive({
email: 'test@example.com', email: 'test@example.com',
picture: null picture: null
}) })
const info = reactive({
groupsTotal: 3,
usersTotal: 2
})
const thumbStyle = { const thumbStyle = {
right: '1px', right: '1px',
borderRadius: '5px', borderRadius: '5px',
@ -277,6 +275,7 @@ onMounted(async () => {
currentSiteId: route.params.siteid currentSiteId: route.params.siteid
}) })
} }
adminStore.fetchInfo()
}) })
</script> </script>

95
ux/src/pages/AdminDashboard.vue
Unescape View File

@ -7,81 +7,85 @@ q-page.admin-dashboard
.text-h5.text-primary.animated.fadeInLeft {{ t('admin.dashboard.title') }} .text-h5.text-primary.animated.fadeInLeft {{ t('admin.dashboard.title') }}
.text-subtitle1.text-grey.animated.fadeInLeft.wait-p2s {{ t('admin.dashboard.subtitle') }} .text-subtitle1.text-grey.animated.fadeInLeft.wait-p2s {{ t('admin.dashboard.subtitle') }}
.row.q-px-md.q-col-gutter-md .row.q-px-md.q-col-gutter-md
.col-3 .col-12.col-sm-6.col-lg-3
q-card.shadow-1 q-card.shadow-1
q-card-section.admin-dashboard-card q-card-section.admin-dashboard-card
img(src='/_assets/icons/fluent-change-theme.svg') img(src='/_assets/icons/fluent-change-theme.svg')
div div
strong Sites strong {{ t('admin.sites.title') }}
span 4 span {{adminStore.sites.length}}
q-separator q-separator
q-card-actions(align='right') q-card-actions(align='right')
q-btn( q-btn(
flat flat
color='primary' color='primary'
icon='las la-plus' icon='las la-plus-circle'
label='New' :label='t(`common.actions.new`)'
@click='newSite'
) )
q-separator.q-mx-sm(vertical) q-separator.q-mx-sm(vertical)
q-btn( q-btn(
flat flat
color='primary' color='primary'
icon='las la-sitemap' icon='las la-sitemap'
label='Manage' :label='t(`common.actions.manage`)'
to='/_admin/sites' to='/_admin/sites'
) )
.col-3 .col-12.col-sm-6.col-lg-3
q-card.shadow-1 q-card.shadow-1
q-card-section.admin-dashboard-card q-card-section.admin-dashboard-card
img(src='/_assets/icons/fluent-account.svg') img(src='/_assets/icons/fluent-account.svg')
div div
strong Users strong {{ t('admin.users.title') }}
span 123 span {{adminStore.info.usersTotal}}
q-separator q-separator
q-card-actions(align='right') q-card-actions(align='right')
q-btn( q-btn(
flat flat
color='primary' color='primary'
icon='las la-plus' icon='las la-user-plus'
label='New' :label='t(`common.actions.new`)'
@click='newUser'
) )
q-separator.q-mx-sm(vertical) q-separator.q-mx-sm(vertical)
q-btn( q-btn(
flat flat
color='primary' color='primary'
icon='las la-users' icon='las la-users'
label='Manage' :label='t(`common.actions.manage`)'
to='/_admin/users' to='/_admin/users'
) )
.col-3 .col-12.col-sm-6.col-lg-3
q-card.shadow-1 q-card.shadow-1
q-card-section.admin-dashboard-card q-card-section.admin-dashboard-card
img(src='/_assets/icons/fluent-female-working-with-a-laptop.svg') img(src='/_assets/icons/fluent-female-working-with-a-laptop.svg')
div div
strong Logins strong Logins
small 45 / last 24h small {{adminStore.info.loginsPastDay}} #[i / last 24h]
q-separator q-separator
q-card-actions(align='right') q-card-actions(align='right')
q-btn( q-btn(
flat flat
color='primary' color='primary'
icon='las la-chart-area' icon='las la-chart-area'
label='Analytics' :label='t(`admin.analytics.title`)'
:to='`/_admin/` + adminStore.currentSiteId + `/analytics`'
) )
.col-3 .col-12.col-sm-6.col-lg-3
q-card.shadow-1 q-card.shadow-1
q-card-section.admin-dashboard-card q-card-section.admin-dashboard-card
img(src='/_assets/icons/fluent-ssd-animated.svg') img(src='/_assets/icons/fluent-ssd-animated.svg')
div div
strong Storage strong {{ t('admin.storage.title') }}
small Operational small.text-positive Operational
q-separator q-separator
q-card-actions(align='right') q-card-actions(align='right')
q-btn( q-btn(
flat flat
color='primary' color='primary'
icon='las la-server' icon='las la-server'
label='Manage' :label='t(`common.actions.manage`)'
:to='`/_admin/` + adminStore.currentSiteId + `/storage`'
) )
.col-12 .col-12
q-banner.bg-positive.text-white( q-banner.bg-positive.text-white(
@ -89,12 +93,13 @@ q-page.admin-dashboard
rounded rounded
) )
i.las.la-check.q-mr-sm i.las.la-check.q-mr-sm
span.text-weight-medium Your Wiki.js server is running the latest version! (3.0.0) span.text-weight-medium Your Wiki.js server is running the latest version!
template(#action) template(#action)
q-btn( q-btn(
flat flat
label='Check' label='Check'
) )
q-separator.q-mx-sm(vertical, dark)
q-btn( q-btn(
flat flat
label='System Info' label='System Info'
@ -211,10 +216,30 @@ q-page.admin-dashboard
</template> </template>
<script setup> <script setup>
import { useMeta } from 'quasar' import { useMeta, useQuasar } from 'quasar'
import { useI18n } from 'vue-i18n' import { useI18n } from 'vue-i18n'
import { useRouter } from 'vue-router'
// STORES / ROUTERS / i18n import { useAdminStore } from '../stores/admin'
// COMPONENTS
import SiteCreateDialog from '../components/SiteCreateDialog.vue'
import UserCreateDialog from '../components/UserCreateDialog.vue'
// QUASAR
const $q = useQuasar()
// STORES
const adminStore = useAdminStore()
// ROUTER
const router = useRouter()
// I18N
const { t } = useI18n() const { t } = useI18n()
@ -224,6 +249,23 @@ useMeta({
title: t('admin.dashboard.title') title: t('admin.dashboard.title')
}) })
// METHODS
function newSite () {
$q.dialog({
component: SiteCreateDialog
}).onOk(() => {
router.push('/_admin/sites')
})
}
function newUser () {
$q.dialog({
component: UserCreateDialog
}).onOk(() => {
router.push('/_admin/users')
})
}
</script> </script>
<style lang='scss'> <style lang='scss'>
@ -250,7 +292,7 @@ useMeta({
font-size: 2rem; font-size: 2rem;
line-height: 2rem; line-height: 2rem;
font-weight: 500; font-weight: 500;
color: $secondary; color: var(--q-secondary);
display: block; display: block;
} }
@ -258,8 +300,13 @@ useMeta({
font-size: 1.4rem; font-size: 1.4rem;
line-height: 2rem; line-height: 2rem;
font-weight: 400; font-weight: 400;
color: $positive; color: var(--q-secondary);
display: block; display: block;
i {
font-size: 1rem;
font-style: normal;
}
} }
} }
} }

18
ux/src/stores/admin.js
Unescape View File

@ -12,7 +12,8 @@ export const useAdminStore = defineStore('admin', {
latestVersion: 'n/a', latestVersion: 'n/a',
groupsTotal: 0, groupsTotal: 0,
pagesTotal: 0, pagesTotal: 0,
usersTotal: 0 usersTotal: 0,
loginsPastDay: 0
}, },
overlay: null, overlay: null,
overlayOpts: {}, overlayOpts: {},
@ -41,6 +42,21 @@ export const useAdminStore = defineStore('admin', {
if (!this.currentSiteId) { if (!this.currentSiteId) {
this.currentSiteId = this.sites[0].id this.currentSiteId = this.sites[0].id
} }
},
async fetchInfo () {
const resp = await APOLLO_CLIENT.query({
query: gql`
query getAdminInfo {
systemInfo {
groupsTotal
usersTotal
}
}
`,
fetchPolicy: 'network-only'
})
this.info.groupsTotal = cloneDeep(resp?.data?.systemInfo.groupsTotal ?? 0)
this.info.usersTotal = cloneDeep(resp?.data?.systemInfo.usersTotal ?? 0)
} }
} }
}) })

Write Preview
Loading…
Cancel
Save