wikijs-fork/client/components/admin/admin-dashboard.vue

188 lines
6.4 KiB
Vue
Raw Normal View History

2018-02-28 05:54:09 +00:00
<template lang='pug'>
v-container(fluid, grid-list-lg)
v-layout(row, wrap)
v-flex(xs12)
.admin-header
2019-03-17 17:39:58 +00:00
img.animated.fadeInUp(src='/svg/icon-browse-page.svg', alt='Dashboard', style='width: 80px;')
.admin-header-title
2019-03-17 17:39:58 +00:00
.headline.primary--text.animated.fadeInLeft {{ $t('admin:dashboard.title') }}
2019-08-03 04:48:55 +00:00
.subtitle-1.grey--text.animated.fadeInLeft.wait-p2s {{ $t('admin:dashboard.subtitle') }}
v-flex(xs12 md6 lg4 xl3 d-flex)
2019-03-17 17:39:58 +00:00
v-card.primary.dashboard-card.animated.fadeInUp(dark)
v-card-text
2019-07-29 04:50:03 +00:00
v-icon.dashboard-icon mdi-file-document-outline
.overline {{$t('admin:dashboard.pages')}}
animated-number.display-1(
:value='info.pagesTotal'
:duration='2000'
:formatValue='round'
easing='easeOutQuint'
)
v-flex(xs12 md6 lg4 xl3 d-flex)
2019-03-17 17:39:58 +00:00
v-card.indigo.lighten-1.dashboard-card.animated.fadeInUp.wait-p2s(dark)
v-card-text
2019-07-29 04:50:03 +00:00
v-icon.dashboard-icon mdi-account
.overline {{$t('admin:dashboard.users')}}
animated-number.display-1(
:value='info.usersTotal'
:duration='2000'
:formatValue='round'
easing='easeOutQuint'
)
v-flex(xs12 md6 lg4 xl3 d-flex)
2019-03-17 17:39:58 +00:00
v-card.indigo.lighten-2.dashboard-card.animated.fadeInUp.wait-p4s(dark)
v-card-text
2019-07-29 04:50:03 +00:00
v-icon.dashboard-icon mdi-account-group
.overline {{$t('admin:dashboard.groups')}}
animated-number.display-1(
:value='info.groupsTotal'
:duration='2000'
:formatValue='round'
easing='easeOutQuint'
)
v-flex(xs12 md6 lg12 xl3 d-flex)
2019-03-17 17:39:58 +00:00
v-card.dashboard-card.animated.fadeInUp.wait-p6s(
:class='isLatestVersion ? "teal lighten-2" : "red lighten-2"'
dark
)
v-btn.btn-animate-wrench(fab, absolute, :right='!$vuetify.rtl', :left='$vuetify.rtl', top, small, light, to='system', v-if='hasPermission(`manage:system`)')
2019-07-29 04:50:03 +00:00
v-icon(:color='isLatestVersion ? `teal` : `red darken-4`', small) mdi-wrench
v-card-text
2019-07-29 04:50:03 +00:00
v-icon.dashboard-icon mdi-blur
2019-08-03 04:48:55 +00:00
.subtitle-1 Wiki.js {{info.currentVersion}}
2019-06-10 03:39:37 +00:00
.body-2(v-if='isLatestVersion') {{$t('admin:dashboard.versionLatest')}}
.body-2(v-else) {{$t('admin:dashboard.versionNew', { version: info.latestVersion })}}
2019-07-20 04:16:29 +00:00
v-flex(xs12, xl6)
2019-07-21 02:44:41 +00:00
v-card.radius-7.animated.fadeInUp.wait-p2s
2019-08-05 03:53:21 +00:00
v-card-title.subtitle-1(:class='$vuetify.theme.dark ? `grey darken-2` : `grey lighten-5`') Recent Pages
v-data-table.pb-2(
:items='recentPages'
2019-07-29 04:50:03 +00:00
hide-default-footer
hide-default-header
)
template(slot='items' slot-scope='props')
td(width='20', style='padding-right: 0;'): v-icon insert_drive_file
td
.body-2.primary--text {{ props.item.title }}
.caption.grey--text.text--darken-2 {{ props.item.description }}
td.caption /{{ props.item.path }}
td.grey--text.text--darken-2(width='250')
.caption: strong Updated {{ props.item.updatedAt | moment('from') }}
.caption Created {{ props.item.createdAt | moment('calendar') }}
2019-07-20 04:16:29 +00:00
v-flex(xs12, xl6)
2019-07-21 02:44:41 +00:00
v-card.radius-7.animated.fadeInUp.wait-p4s
2019-08-05 03:53:21 +00:00
v-card-title.subtitle-1(:class='$vuetify.theme.dark ? `grey darken-2` : `grey lighten-5`') Most Popular Pages
v-data-table.pb-2(
:items='popularPages'
2019-07-29 04:50:03 +00:00
hide-default-footer
hide-default-header
)
template(slot='items' slot-scope='props')
td(width='20', style='padding-right: 0;'): v-icon insert_drive_file
td
.body-2.primary--text {{ props.item.title }}
.caption.grey--text.text--darken-2 {{ props.item.description }}
td.caption /{{ props.item.path }}
td.grey--text.text--darken-2(width='250')
.caption: strong Updated {{ props.item.updatedAt | moment('from') }}
.caption Created {{ props.item.createdAt | moment('calendar') }}
2018-09-03 04:27:48 +00:00
2018-12-30 03:12:52 +00:00
v-flex(xs12)
2019-07-21 02:44:41 +00:00
v-card.dashboard-contribute.animated.fadeInUp.wait-p4s
2018-12-30 03:12:52 +00:00
v-card-text
img(src='/svg/icon-heart-health.svg', alt='Contribute', style='height: 80px;')
2019-07-29 04:50:03 +00:00
.pl-5
.subtitle-1 {{$t('admin:contribute.title')}}
.body-2.mt-3: strong {{$t('admin:dashboard.contributeSubtitle')}}
.body-2 {{$t('admin:dashboard.contributeHelp')}}
v-btn.mx-0.mt-4(:color='$vuetify.theme.dark ? `indigo lighten-3` : `indigo`', outlined, small, to='/contribute')
2019-07-29 04:50:03 +00:00
.caption: strong {{$t('admin:dashboard.contributeLearnMore')}}
2018-12-30 03:12:52 +00:00
2018-02-28 05:54:09 +00:00
</template>
<script>
2019-01-12 23:33:30 +00:00
import _ from 'lodash'
2018-09-03 04:27:48 +00:00
import AnimatedNumber from 'animated-number-vue'
import { get } from 'vuex-pathify'
2018-02-28 05:54:09 +00:00
export default {
2018-09-03 04:27:48 +00:00
components: {
AnimatedNumber
},
2018-02-28 05:54:09 +00:00
data() {
return {
recentPages: [],
popularPages: []
}
},
computed: {
isLatestVersion() {
return this.info.currentVersion === this.info.latestVersion
},
2019-01-12 23:33:30 +00:00
info: get('admin/info'),
permissions: get('user/permissions')
2018-09-03 04:27:48 +00:00
},
methods: {
2019-01-12 23:33:30 +00:00
round(val) { return Math.round(val) },
hasPermission(prm) {
if (_.isArray(prm)) {
return _.some(prm, p => {
return _.includes(this.permissions, p)
})
} else {
return _.includes(this.permissions, prm)
}
}
2018-02-28 05:54:09 +00:00
}
}
</script>
<style lang='scss'>
.dashboard-card {
display: flex;
2019-07-29 04:50:03 +00:00
width: 100%;
2018-12-30 03:12:52 +00:00
border-radius: 7px;
.v-card__text {
overflow: hidden;
position: relative;
}
}
2018-12-30 03:12:52 +00:00
.dashboard-contribute {
background-color: #FFF;
background-image: linear-gradient(to bottom, #FFF 0%, lighten(mc('indigo', '50'), 3%) 100%);
border-radius: 7px;
@at-root .theme--dark & {
background-color: mc('grey', '800');
background-image: linear-gradient(to bottom, mc('grey', '800') 0%, darken(mc('grey', '800'), 6%) 100%);
}
.v-card__text {
display: flex;
align-items: center;
2019-07-29 04:50:03 +00:00
color: mc('indigo', '500') !important;
2018-12-30 03:12:52 +00:00
@at-root .theme--dark & {
2019-07-29 04:50:03 +00:00
color: mc('grey', '300') !important;
2018-12-30 03:12:52 +00:00
}
}
}
2018-09-03 04:27:48 +00:00
.dashboard-icon {
position: absolute;
right: 0;
top: 12px;
2019-08-04 17:54:23 +00:00
font-size: 100px !important;
2018-09-03 04:27:48 +00:00
opacity: .25;
2019-08-11 04:12:07 +00:00
@at-root .v-application--is-rtl & {
left: 0;
right: initial;
}
2018-09-03 04:27:48 +00:00
}
2018-02-28 05:54:09 +00:00
</style>