feat: admin dashboard recent pages + update deps

This commit is contained in:
Nick
2019-08-31 15:00:31 -04:00
parent 3b02d701c4
commit 28c443c356
11 changed files with 337 additions and 247 deletions

View File

@@ -54,24 +54,31 @@
.body-2(v-else) {{$t('admin:dashboard.versionNew', { version: info.latestVersion })}}
v-flex(xs12, xl6)
v-card.radius-7.animated.fadeInUp.wait-p2s
v-card-title.subtitle-1(:class='$vuetify.theme.dark ? `grey darken-2` : `grey lighten-5`') Recent Pages
v-toolbar(:color='$vuetify.theme.dark ? `grey darken-2` : `grey lighten-5`', dense, flat)
v-spacer
.overline Recent Pages
v-spacer
v-data-table.pb-2(
:items='recentPages'
:headers='headers'
:loading='recentPagesLoading'
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') }}
template(slot='item', slot-scope='props')
tr.is-clickable(:active='props.selected', @click='$router.push(`/pages/` + props.item.id)')
td
.body-2: strong {{ props.item.title }}
td.admin-pages-path
v-chip(label, small, :color='$vuetify.theme.dark ? `grey darken-4` : `grey lighten-4`') {{ props.item.locale }}
span.ml-2.grey--text(:class='$vuetify.theme.dark ? `text--lighten-1` : `text--darken-2`') / {{ props.item.path }}
td.text-right(width='250') {{ props.item.updatedAt | moment('calendar') }}
v-flex(xs12, xl6)
v-card.radius-7.animated.fadeInUp.wait-p4s
v-card-title.subtitle-1(:class='$vuetify.theme.dark ? `grey darken-2` : `grey lighten-5`') Most Popular Pages
v-toolbar(:color='$vuetify.theme.dark ? `grey darken-2` : `grey lighten-5`', dense, flat)
v-spacer
.overline Most Popular Pages
v-spacer
v-data-table.pb-2(
:items='popularPages'
hide-default-footer
@@ -105,6 +112,8 @@ import _ from 'lodash'
import AnimatedNumber from 'animated-number-vue'
import { get } from 'vuex-pathify'
import recentPagesQuery from 'gql/admin/dashboard/dashboard-query-recentpages.gql'
export default {
components: {
AnimatedNumber
@@ -112,7 +121,14 @@ export default {
data() {
return {
recentPages: [],
popularPages: []
recentPagesLoading: false,
popularPages: [],
headers: [
{ text: 'ID', value: 'id', width: 80 },
{ text: 'Title', value: 'title' },
{ text: 'Path', value: 'path' },
{ text: 'Last Updated', value: 'updatedAt', width: 250 }
]
}
},
computed: {
@@ -133,6 +149,16 @@ export default {
return _.includes(this.permissions, prm)
}
}
},
apollo: {
recentPages: {
query: recentPagesQuery,
update: (data) => data.pages.list,
watchLoading (isLoading) {
this.recentPagesLoading = isLoading
this.$store.commit(`loading${isLoading ? 'Start' : 'Stop'}`, 'admin-dashboard-recentpages')
}
}
}
}
</script>

View File

@@ -78,7 +78,7 @@ export default {
pageCount: 0,
groups: [],
headers: [
{ text: 'ID', value: 'id', width: 50, align: 'right' },
{ text: 'ID', value: 'id', width: 80, sortable: true },
{ text: 'Name', value: 'name' },
{ text: 'Users', value: 'userCount', width: 200 },
{ text: 'Created', value: 'createdAt', width: 250 },

View File

@@ -187,7 +187,7 @@ export default {
align: 'center',
value: 'availability',
sortable: false,
width: 100
width: 120
},
{
text: this.$t('admin:locale.download'),

View File

@@ -56,11 +56,11 @@
tr.is-clickable(:active='props.selected', @click='$router.push(`/pages/` + props.item.id)')
td.text-xs-right {{ props.item.id }}
td
.body-2 {{ props.item.title }}
.body-2: strong {{ props.item.title }}
.caption {{ props.item.description }}
td.admin-pages-path
v-chip(label, small, :color='$vuetify.theme.dark ? `grey darken-4` : `grey lighten-4`') {{ props.item.locale }}
span.ml-2.grey--text(:class='$vuetify.theme.dark ? `text--lighten-1` : `text--darken-2`') {{ props.item.path }}
span.ml-2.grey--text(:class='$vuetify.theme.dark ? `text--lighten-1` : `text--darken-2`') / {{ props.item.path }}
td {{ props.item.createdAt | moment('calendar') }}
td {{ props.item.updatedAt | moment('calendar') }}
template(slot='no-data')
@@ -80,7 +80,7 @@ export default {
pagination: 1,
pages: [],
headers: [
{ text: 'ID', value: 'id', width: 50, align: 'right' },
{ text: 'ID', value: 'id', width: 80, sortable: true },
{ text: 'Title', value: 'title' },
{ text: 'Path', value: 'path' },
{ text: 'Created', value: 'createdAt', width: 250 },