feat: page history UI + nav links fix
This commit is contained in:
		| @@ -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')) | ||||
|   | ||||
| @@ -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 () { | ||||
|  | ||||
|   | ||||
| @@ -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') | ||||
|   | ||||
							
								
								
									
										136
									
								
								client/components/history.vue
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										136
									
								
								client/components/history.vue
									
									
									
									
									
										Normal 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> | ||||
| @@ -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
									
								
							
							
						
						
									
										21
									
								
								client/store/page.js
									
									
									
									
									
										Normal 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) | ||||
| } | ||||
| @@ -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) | ||||
|   }, | ||||
|   | ||||
							
								
								
									
										68
									
								
								package.json
									
									
									
									
									
								
							
							
						
						
									
										68
									
								
								package.json
									
									
									
									
									
								
							| @@ -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", | ||||
|   | ||||
| @@ -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
									
								
							
							
						
						
									
										11
									
								
								server/views/history.pug
									
									
									
									
									
										Normal file
									
								
							| @@ -0,0 +1,11 @@ | ||||
| extends master.pug | ||||
|  | ||||
| block head | ||||
|  | ||||
| block body | ||||
|   #root | ||||
|     history( | ||||
|       id=page.id | ||||
|       locale=page.localeCode | ||||
|       path=page.path | ||||
|       ) | ||||
		Reference in New Issue
	
	Block a user