mirror of https://github.com/Requarks/wiki.git
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
121 lines
3.8 KiB
121 lines
3.8 KiB
<template lang='pug'>
|
|
v-container(fluid, grid-list-lg)
|
|
v-layout(row wrap)
|
|
v-flex(xs12)
|
|
.profile-header
|
|
img.animated.fadeInUp(src='/svg/icon-file.svg', alt='Users', style='width: 80px;')
|
|
.profile-header-title
|
|
.headline.primary--text.animated.fadeInLeft {{$t('profile:pages.title')}}
|
|
.subheading.grey--text.animated.fadeInLeft {{$t('profile:pages.subtitle')}}
|
|
v-spacer
|
|
v-btn.animated.fadeInDown.wait-p1s(color='grey', outlined, @click='refresh', large)
|
|
v-icon.grey--text mdi-refresh
|
|
v-flex(xs12)
|
|
v-card.animated.fadeInUp
|
|
v-data-table(
|
|
:items='pages'
|
|
:headers='headers'
|
|
:page.sync='pagination'
|
|
:items-per-page='15'
|
|
:loading='loading'
|
|
must-sort,
|
|
sort-by='updatedAt',
|
|
sort-desc,
|
|
hide-default-footer
|
|
)
|
|
template(slot='item', slot-scope='props')
|
|
tr.is-clickable(:active='props.selected', @click='goToPage(props.item.id)')
|
|
td
|
|
.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 }}
|
|
td {{ props.item.createdAt | moment('calendar') }}
|
|
td {{ props.item.updatedAt | moment('calendar') }}
|
|
template(slot='no-data')
|
|
v-alert.ma-3(icon='mdi-alert', :value='true', outlined, color='grey')
|
|
em.caption {{$t('profile:pages.emptyList')}}
|
|
.text-center.py-2.animated.fadeInDown(v-if='this.pageTotal > 1')
|
|
v-pagination(v-model='pagination', :length='pageTotal')
|
|
</template>
|
|
|
|
<script>
|
|
import gql from 'graphql-tag'
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
selectedPage: {},
|
|
pagination: 1,
|
|
pages: [],
|
|
loading: false
|
|
}
|
|
},
|
|
computed: {
|
|
headers () {
|
|
return [
|
|
{ text: this.$t('profile:pages.headerTitle'), value: 'title' },
|
|
{ text: this.$t('profile:pages.headerPath'), value: 'path' },
|
|
{ text: this.$t('profile:pages.headerCreatedAt'), value: 'createdAt', width: 250 },
|
|
{ text: this.$t('profile:pages.headerUpdatedAt'), value: 'updatedAt', width: 250 }
|
|
]
|
|
},
|
|
pageTotal () {
|
|
return Math.ceil(this.pages.length / 15)
|
|
}
|
|
},
|
|
methods: {
|
|
async refresh() {
|
|
await this.$apollo.queries.pages.refetch()
|
|
this.$store.commit('showNotification', {
|
|
message: this.$t('profile:pages.refreshSuccess'),
|
|
style: 'success',
|
|
icon: 'cached'
|
|
})
|
|
},
|
|
goToPage(id) {
|
|
window.location.assign(`/i/` + id)
|
|
}
|
|
},
|
|
apollo: {
|
|
pages: {
|
|
query: gql`
|
|
query($creatorId: Int, $authorId: Int) {
|
|
pages {
|
|
list(creatorId: $creatorId, authorId: $authorId) {
|
|
id
|
|
locale
|
|
path
|
|
title
|
|
description
|
|
contentType
|
|
isPublished
|
|
isPrivate
|
|
privateNS
|
|
createdAt
|
|
updatedAt
|
|
}
|
|
}
|
|
}
|
|
`,
|
|
variables () {
|
|
return {
|
|
creatorId: this.$store.get('user/id'),
|
|
authorId: this.$store.get('user/id')
|
|
}
|
|
},
|
|
fetchPolicy: 'network-only',
|
|
update: (data) => data.pages.list,
|
|
watchLoading (isLoading) {
|
|
this.loading = isLoading
|
|
this.$store.commit(`loading${isLoading ? 'Start' : 'Stop'}`, 'profile-pages-refresh')
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang='scss'>
|
|
|
|
</style>
|