feat: page history UI + nav links fix

This commit is contained in:
Nicolas Giard 2018-10-28 22:09:58 -04:00
parent b26f30ae20
commit 9a2a9c220a
11 changed files with 2739 additions and 361 deletions

View File

@ -159,6 +159,7 @@ Vue.prototype.Velocity = Velocity
Vue.component('admin', () => import(/* webpackChunkName: "admin" */ './components/admin.vue'))
Vue.component('editor', () => import(/* webpackPrefetch: -100, webpackChunkName: "editor" */ './components/editor.vue'))
Vue.component('history', () => import(/* webpackChunkName: "history" */ './components/history.vue'))
Vue.component('login', () => import(/* webpackPrefetch: true, webpackChunkName: "login" */ './components/login.vue'))
Vue.component('nav-footer', () => import(/* webpackMode: "eager" */ './components/common/nav-footer.vue'))
Vue.component('nav-header', () => import(/* webpackMode: "eager" */ './components/common/nav-header.vue'))

View File

@ -134,7 +134,8 @@ export default {
},
computed: {
isLoading: get('isLoading'),
title: get('site/title')
title: get('site/title'),
path: get('page/path')
},
created() {
if (this.hideSearch || this.dense || this.$vuetify.breakpoint.smAndDown) {
@ -157,10 +158,10 @@ export default {
},
pageEdit () {
window.location.assign(`/e/${this.path}`)
},
pageHistory () {
window.location.assign(`/h/${this.path}`)
},
pageSource () {

View File

@ -157,6 +157,14 @@ export default {
notification: get('notification'),
notificationState: sync('notification@isActive')
},
created() {
this.$store.commit('page/SET_DESCRIPTION', this.description)
this.$store.commit('page/SET_IS_PUBLISHED', this.isPublished)
this.$store.commit('page/SET_LOCALE', this.locale)
this.$store.commit('page/SET_PATH', this.path)
this.$store.commit('page/SET_TAGS', this.tags)
this.$store.commit('page/SET_TITLE', this.title)
},
mounted() {
this.$store.set('editor/mode', this.initMode || 'create')
this.$store.set('editor/content', this.initContent ? window.atob(this.initContent) : '# Header\n\nYour content here')

View File

@ -0,0 +1,136 @@
<template lang='pug'>
v-app(:dark='darkMode').history
nav-header
v-content
v-toolbar(color='primary', dark)
.subheading Viewing history of page #[strong /{{path}}]
v-spacer
.caption.blue--text.text--lighten-3 ID {{id}}
v-btn.ml-4(depressed, color='blue darken-1', @click='goLive') Return to Live Version
v-container(fluid, grid-list-xl)
v-layout(row, wrap)
v-flex(xs5)
v-chip.ma-0.grey--text.text--darken-2(
label
small
color='grey lighten-2'
)
span Live
v-timeline(
dense
)
v-timeline-item(
fill-dot
color='primary'
icon='edit'
)
v-card.grey.lighten-3.radius-7(flat)
v-card-text
v-layout(justify-space-between)
v-flex(xs7)
v-chip.ml-0.mr-3(
label
small
color='primary'
)
span.white--text Viewing
span Edited by John Doe
v-flex(xs5, text-xs-right, align-center, d-flex)
.caption Today at 12:34 PM
v-timeline-item(
fill-dot
small
color='primary'
icon='edit'
)
v-card.grey.lighten-3.radius-7(flat)
v-card-text
v-layout(justify-space-between)
v-flex(xs7)
span Edited by Jane Doe
v-flex(xs5, text-xs-right, align-center, d-flex)
.caption Today at 12:27 PM
v-timeline-item(
fill-dot
small
color='purple'
icon='forward'
)
v-card.purple.lighten-5.radius-7(flat)
v-card-text
v-layout(justify-space-between)
v-flex(xs7)
span Moved page from #[strong /test] to #[strong /home] by John Doe
v-flex(xs5, text-xs-right, align-center, d-flex)
.caption Yesterday at 10:45 AM
v-timeline-item(
fill-dot
color='teal'
icon='add'
)
v-card.teal.lighten-5.radius-7(flat)
v-card-text
v-layout(justify-space-between)
v-flex(xs7): span Initial page creation by John Doe
v-flex(xs5, text-xs-right, align-center, d-flex)
.caption Last Tuesday at 7:56 PM
v-chip.ma-0.grey--text.text--darken-2(
label
small
color='grey lighten-2'
) End of history
v-flex(xs7)
v-card.radius-7
v-card-text
v-card.grey.lighten-4.radius-7(flat)
v-card-text
.subheading Page Title
.caption Some page description
nav-footer
</template>
<script>
/* global siteConfig */
export default {
props: {
id: {
type: Number,
default: 0
},
locale: {
type: String,
default: 'en'
},
path: {
type: String,
default: 'home'
}
},
data() {
return {}
},
computed: {
darkMode() { return siteConfig.darkMode }
},
created () {
this.$store.commit('page/SET_ID', this.id)
this.$store.commit('page/SET_LOCALE', this.locale)
this.$store.commit('page/SET_PATH', this.path)
},
methods: {
goLive() {
window.location.assign(`/${this.path}`)
}
}
}
</script>
<style lang='scss'>
</style>

View File

@ -4,6 +4,7 @@ import Vuex from 'vuex'
import pathify from 'vuex-pathify' // eslint-disable-line import/no-duplicates
import { make } from 'vuex-pathify' // eslint-disable-line import/no-duplicates
import page from './page'
import site from './site'
Vue.use(Vuex)
@ -49,6 +50,7 @@ export default new Vuex.Store({
},
actions: { },
modules: {
page,
site
}
})

21
client/store/page.js Normal file
View File

@ -0,0 +1,21 @@
import { make } from 'vuex-pathify'
const state = {
id: 0,
authorId: 0,
authorName: 'Unknown',
createdAt: '',
description: '',
isPublished: true,
locale: 'en',
path: '',
tags: [],
title: '',
updatedAt: ''
}
export default {
namespaced: true,
state,
mutations: make.mutations(state)
}

View File

@ -194,6 +194,18 @@ export default {
}
}
},
created() {
this.$store.commit('page/SET_AUTHOR_ID', this.authorId)
this.$store.commit('page/SET_AUTHOR_NAME', this.authorName)
this.$store.commit('page/SET_CREATED_AT', this.createdAt)
this.$store.commit('page/SET_DESCRIPTION', this.description)
this.$store.commit('page/SET_IS_PUBLISHED', this.isPublished)
this.$store.commit('page/SET_LOCALE', this.locale)
this.$store.commit('page/SET_PATH', this.path)
this.$store.commit('page/SET_TAGS', this.tags)
this.$store.commit('page/SET_TITLE', this.title)
this.$store.commit('page/SET_UPDATED_AT', this.updatedAt)
},
mounted () {
Prism.highlightAllUnder(this.$refs.container)
},

View File

@ -67,7 +67,7 @@
"express-brute": "1.0.1",
"express-brute-redis": "0.0.1",
"express-session": "1.15.6",
"file-type": "10.0.0",
"file-type": "10.2.0",
"filesize.js": "1.0.2",
"follow-redirects": "1.5.9",
"fs-extra": "7.0.0",
@ -75,14 +75,14 @@
"graphql": "14.0.2",
"graphql-list-fields": "2.0.2",
"graphql-subscriptions": "1.0.0",
"graphql-tools": "4.0.1",
"highlight.js": "9.13.0",
"i18next": "11.9.1",
"graphql-tools": "4.0.2",
"highlight.js": "9.13.1",
"i18next": "12.0.0",
"i18next-express-middleware": "1.4.1",
"i18next-localstorage-cache": "1.1.1",
"i18next-node-fs-backend": "2.1.0",
"image-size": "0.6.3",
"ioredis": "4.0.2",
"ioredis": "4.2.0",
"js-binary": "1.2.0",
"js-yaml": "3.12.0",
"jsonwebtoken": "8.3.0",
@ -104,20 +104,20 @@
"markdown-it-sup": "1.0.0",
"markdown-it-task-lists": "2.1.1",
"mathjax-node": "2.1.1",
"mime-types": "2.1.20",
"mime-types": "2.1.21",
"moment": "2.22.2",
"moment-timezone": "0.5.21",
"mongodb": "3.1.8",
"mssql": "4.2.1",
"mssql": "4.2.2",
"multer": "1.4.1",
"mysql2": "1.6.1",
"node-2fa": "1.1.2",
"node-cache": "4.2.0",
"oauth2orize": "1.11.0",
"objection": "1.3.0",
"objection": "1.4.0",
"ora": "3.0.0",
"passport": "0.4.0",
"passport-auth0": "1.0.0",
"passport-auth0": "1.1.0",
"passport-azure-ad-oauth2": "0.0.4",
"passport-cas": "0.1.1",
"passport-discord": "0.1.3",
@ -135,7 +135,7 @@
"passport-slack": "0.0.7",
"passport-twitch": "1.0.3",
"passport-windowslive": "1.0.2",
"pg": "7.5.0",
"pg": "7.6.0",
"pg-hstore": "2.3.2",
"pm2": "3.2.2",
"pug": "2.0.3",
@ -148,7 +148,7 @@
"scim-query-filter-parser": "1.1.0",
"semver": "5.6.0",
"serve-favicon": "2.5.0",
"sqlite3": "4.0.2",
"sqlite3": "4.0.3",
"subscriptions-transport-ws": "0.9.15",
"uslug": "1.0.4",
"uuid": "3.3.2",
@ -174,8 +174,8 @@
"@panter/vue-i18next": "0.13.0",
"@vue/cli": "3.0.5",
"animated-number-vue": "0.1.3",
"apollo-cache-inmemory": "1.3.5",
"apollo-client": "2.4.2",
"apollo-cache-inmemory": "1.3.7",
"apollo-client": "2.4.4",
"apollo-fetch": "0.7.0",
"apollo-link": "1.2.3",
"apollo-link-batch-http": "1.2.3",
@ -183,8 +183,8 @@
"apollo-link-http": "1.5.5",
"apollo-link-persisted-queries": "0.2.1",
"apollo-link-ws": "1.0.9",
"apollo-utilities": "1.0.21",
"autoprefixer": "9.1.5",
"apollo-utilities": "1.0.24",
"autoprefixer": "9.3.1",
"babel-eslint": "10.0.1",
"babel-jest": "23.6.0",
"babel-loader": "^8.0.4",
@ -193,18 +193,18 @@
"babel-plugin-transform-imports": "1.5.1",
"brace": "0.11.1",
"cache-loader": "1.2.2",
"chart.js": "2.7.2",
"chart.js": "2.7.3",
"clean-webpack-plugin": "0.1.19",
"copy-webpack-plugin": "4.5.3",
"copy-webpack-plugin": "4.5.4",
"css-loader": "1.0.0",
"cssnano": "4.1.4",
"cssnano": "4.1.7",
"duplicate-package-checker-webpack-plugin": "3.0.0",
"epic-spinners": "1.0.3",
"eslint": "5.7.0",
"epic-spinners": "1.0.4",
"eslint": "5.8.0",
"eslint-config-requarks": "1.0.7",
"eslint-config-standard": "12.0.0",
"eslint-plugin-import": "2.14.0",
"eslint-plugin-node": "7.0.1",
"eslint-plugin-node": "8.0.0",
"eslint-plugin-promise": "4.0.1",
"eslint-plugin-standard": "4.0.0",
"eslint-plugin-vue": "4.7.1",
@ -221,25 +221,25 @@
"ignore-loader": "0.1.2",
"js-cookie": "2.2.0",
"mini-css-extract-plugin": "0.4.4",
"node-sass": "4.9.3",
"node-sass": "4.9.4",
"offline-plugin": "5.0.5",
"optimize-css-assets-webpack-plugin": "5.0.1",
"postcss-cssnext": "3.1.0",
"postcss-flexbugs-fixes": "4.1.0",
"postcss-flexibility": "2.0.0",
"postcss-import": "12.0.0",
"postcss-import": "12.0.1",
"postcss-loader": "3.0.0",
"postcss-preset-env": "6.1.1",
"postcss-selector-parser": "5.0.0-rc.3",
"postcss-preset-env": "6.3.0",
"postcss-selector-parser": "5.0.0-rc.4",
"pug-lint": "2.5.0",
"pug-loader": "2.4.0",
"pug-plain-loader": "1.0.0",
"raw-loader": "0.5.1",
"react": "16.5.2",
"react-dom": "16.5.2",
"react": "16.6.0",
"react-dom": "16.6.0",
"resolve-url-loader": "3.0.0",
"sass-loader": "7.1.0",
"sass-resources-loader": "1.3.3",
"sass-resources-loader": "1.3.4",
"script-ext-html-webpack-plugin": "2.0.1",
"simple-progress-webpack-plugin": "1.1.2",
"style-loader": "0.23.1",
@ -247,7 +247,7 @@
"stylus-loader": "3.0.2",
"twemoji-awesome": "1.0.6",
"url-loader": "1.1.2",
"vee-validate": "2.1.0-beta.11",
"vee-validate": "2.1.1",
"velocity-animate": "1.5.2",
"viz.js": "2.0.0",
"vue": "2.5.17",
@ -261,18 +261,18 @@
"vue-moment": "4.0.0",
"vue-router": "3.0.1",
"vue-simple-breakpoints": "1.0.3",
"vue-status-indicator": "1.1.0",
"vue-status-indicator": "1.1.1",
"vue-template-compiler": "2.5.17",
"vue-tour": "1.0.1",
"vue-tour": "1.1.0",
"vue-tree-navigation": "3.0.1",
"vue2-animate": "2.1.0",
"vuedraggable": "2.16.0",
"vuetify": "1.2.9",
"vuetify": "1.3.3",
"vuex": "3.0.1",
"vuex-pathify": "1.1.3",
"vuex-persistedstate": "2.5.4",
"webpack": "4.20.2",
"webpack-bundle-analyzer": "3.0.2",
"webpack": "4.23.1",
"webpack-bundle-analyzer": "3.0.3",
"webpack-cli": "3.1.2",
"webpack-dev-middleware": "3.4.0",
"webpack-hot-middleware": "2.24.3",

View File

@ -45,6 +45,24 @@ router.get(['/p', '/p/*'], (req, res, next) => {
res.render('profile')
})
/**
* View document
*/
router.get(['/h', '/h/*'], async (req, res, next) => {
const pageArgs = pageHelper.parsePath(req.path)
const page = await WIKI.models.pages.getPage({
path: pageArgs.path,
locale: pageArgs.locale,
userId: req.user.id,
isPrivate: false
})
if (page) {
res.render('history', { page })
} else {
res.redirect(`/${pageArgs.path}`)
}
})
/**
* View document
*/

11
server/views/history.pug Normal file
View File

@ -0,0 +1,11 @@
extends master.pug
block head
block body
#root
history(
id=page.id
locale=page.localeCode
path=page.path
)

2816
yarn.lock

File diff suppressed because it is too large Load Diff