feat: page history UI + nav links fix

client/client-app.js

@@ -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'))

client/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 () {
 

client/components/editor.vue

@@ -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')

client/components/history.vue

@@ -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>

client/store/index.js

@@ -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
   }
 })

client/store/page.js

@@ -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)
+}

client/themes/default/components/app.vue

@@ -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)
   },