feat: history version diff

client/components/history.vue

@@ -3,7 +3,7 @@
     nav-header
     v-content
       v-toolbar(color='primary', dark)
-        .subheading Viewing history of page #[strong /{{path}}]
+        .subheading Viewing history of #[strong /{{path}}]
         v-spacer
         .caption.blue--text.text--lighten-3.mr-4 Trail Length: {{total}}
         .caption.blue--text.text--lighten-3 ID: {{pageId}}
@@ -42,12 +42,12 @@
                       template(v-slot:activator='{ on }')
                         v-btn.mr-2.radius-4(icon, v-on='on', small, tile): v-icon mdi-dots-horizontal
                       v-list(dense, nav).history-promptmenu
-                        v-list-item(@click='setDiffTarget(ph.versionId)')
-                          v-list-item-avatar(size='24'): v-icon mdi-call-received
-                          v-list-item-title Set as Differencing Target (B)
                         v-list-item(@click='setDiffSource(ph.versionId)')
                           v-list-item-avatar(size='24'): v-icon mdi-call-made
                           v-list-item-title Set as Differencing Source (A)
+                        v-list-item(@click='setDiffTarget(ph.versionId)')
+                          v-list-item-avatar(size='24'): v-icon mdi-call-received
+                          v-list-item-title Set as Differencing Target (B)
                         v-list-item
                           v-list-item-avatar(size='24'): v-icon mdi-code-tags
                           v-list-item-title View Source
@@ -94,7 +94,7 @@
               ) End of history trail
 
           v-flex(xs12, md8)
-            v-card.radius-7
+            v-card.radius-7.mt-8
               v-card-text
                 v-card.grey.radius-7(flat, :class='darkMode ? `darken-2` : `lighten-4`')
                   v-row(no-gutters, align='center')
@@ -118,8 +118,7 @@ import * as Diff2Html from 'diff2html'
 import { createPatch } from 'diff'
 import { get } from 'vuex-pathify'
 import _ from 'lodash'
-
-import historyTrailQuery from 'gql/history/history-trail-query.gql'
+import gql from 'graphql-tag'
 
 export default {
   props: {
@@ -143,11 +142,13 @@ export default {
   data () {
     return {
       source: {
+        versionId: 0,
         content: '',
         title: '',
         description: ''
       },
       target: {
+        versionId: 0,
         content: '',
         title: '',
         description: ''
@@ -157,7 +158,8 @@ export default {
       diffTarget: 0,
       offsetPage: 0,
       total: 0,
-      viewMode: 'line-by-line'
+      viewMode: 'line-by-line',
+      cache: []
     }
   },
   computed: {
@@ -180,6 +182,26 @@ export default {
         this.diffTarget = _.get(_.head(newValue), 'versionId', 0)
         this.diffSource = _.get(_.nth(newValue, 1), 'versionId', 0)
       }
+    },
+    async diffSource (newValue, oldValue) {
+      if (this.diffSource !== this.source.versionId) {
+        const page = _.find(this.cache, { versionId: newValue })
+        if (page) {
+          this.source = page
+        } else {
+          this.source = await this.loadVersion(newValue)
+        }
+      }
+    },
+    async diffTarget (newValue, oldValue) {
+      if (this.diffTarget !== this.target.versionId) {
+        const page = _.find(this.cache, { versionId: newValue })
+        if (page) {
+          this.target = page
+        } else {
+          this.target = await this.loadVersion(newValue)
+        }
+      }
     }
   },
   created () {
@@ -192,6 +214,49 @@ export default {
     this.target.content = this.liveContent
   },
   methods: {
+    async loadVersion (versionId) {
+      this.$store.commit(`loadingStart`, 'history-version-' + versionId)
+      const resp = await this.$apollo.query({
+        query: gql`
+          query ($pageId: Int!, $versionId: Int!) {
+            pages {
+              version (pageId: $pageId, versionId: $versionId) {
+                action
+                authorId
+                authorName
+                content
+                contentType
+                createdAt
+                description
+                editor
+                isPrivate
+                isPublished
+                locale
+                pageId
+                path
+                publishEndDate
+                publishStartDate
+                tags
+                title
+                versionId
+              }
+            }
+          }
+        `,
+        variables: {
+          versionId,
+          pageId: this.pageId
+        }
+      })
+      this.$store.commit(`loadingStop`, 'history-version-' + versionId)
+      const page = _.get(resp, 'data.pages.version', null)
+      if (page) {
+        this.cache.push(page)
+        return page
+      } else {
+        return { content: '' }
+      }
+    },
     toggleViewMode () {
       this.viewMode = (this.viewMode === 'line-by-line') ? 'side-by-side' : 'line-by-line'
     },
@@ -263,7 +328,24 @@ export default {
   },
   apollo: {
     trail: {
-      query: historyTrailQuery,
+      query: gql`
+        query($id: Int!, $offsetPage: Int, $offsetSize: Int) {
+          pages {
+            history(id:$id, offsetPage:$offsetPage, offsetSize:$offsetSize) {
+              trail {
+                versionId
+                authorId
+                authorName
+                actionType
+                valueBefore
+                valueAfter
+                createdAt
+              }
+              total
+            }
+          }
+        }
+      `,
       variables () {
         return {
           id: this.pageId,

client/graph/history/history-trail-query.gql

@@ -1,16 +0,0 @@
-query($id: Int!, $offsetPage: Int, $offsetSize: Int) {
-  pages {
-    history(id:$id, offsetPage:$offsetPage, offsetSize:$offsetSize) {
-      trail {
-        versionId
-        authorId
-        authorName
-        actionType
-        valueBefore
-        valueAfter
-        createdAt
-      }
-      total
-    }
-  }
-}

server/graph/resolvers/page.js

@@ -21,6 +21,15 @@ module.exports = {
         offsetSize: args.offsetSize || 100
       })
     },
+    /**
+     * PAGE VERSION
+     */
+    async version(obj, args, context, info) {
+      return WIKI.models.pageHistory.getVersion({
+        pageId: args.pageId,
+        versionId: args.versionId
+      })
+    },
     /**
      * SEARCH PAGES
      */

server/graph/schemas/page.graphql

@@ -19,7 +19,12 @@ type PageQuery {
     id: Int!
     offsetPage: Int
     offsetSize: Int
-  ): PageHistoryResult @auth(requires: ["manage:system", "read:pages"])
+  ): PageHistoryResult @auth(requires: ["manage:system", "read:history"])
+
+  version(
+    pageId: Int!
+    versionId: Int!
+  ): PageVersion @auth(requires: ["manage:system", "read:history"])
 
   search(
     query: String!
@@ -150,7 +155,7 @@ type Page {
   isPublished: Boolean!
   privateNS: String
   publishStartDate: Date!
-  publishEndDate: String!
+  publishEndDate: Date!
   tags: [PageTag]!
   content: String!
   render: String
@@ -186,6 +191,27 @@ type PageHistory {
   createdAt: Date!
 }
 
+type PageVersion {
+  action: String!
+  authorId: String!
+  authorName: String!
+  content: String!
+  contentType: String!
+  createdAt: Date!
+  description: String!
+  editor: String!
+  isPrivate: Boolean!
+  isPublished: Boolean!
+  locale: String!
+  pageId: Int!
+  path: String!
+  publishEndDate: Date!
+  publishStartDate: Date!
+  tags: [String]!
+  title: String!
+  versionId: Int!
+}
+
 type PageHistoryResult {
   trail: [PageHistory]
   total: Int!

server/models/pageHistory.js

@@ -104,6 +104,40 @@ module.exports = class PageHistory extends Model {
     })
   }
 
+  static async getVersion({ pageId, versionId }) {
+    const version = await WIKI.models.pageHistory.query()
+      .column([
+        'pageHistory.path',
+        'pageHistory.title',
+        'pageHistory.description',
+        'pageHistory.isPrivate',
+        'pageHistory.isPublished',
+        'pageHistory.publishStartDate',
+        'pageHistory.publishEndDate',
+        'pageHistory.content',
+        'pageHistory.contentType',
+        'pageHistory.createdAt',
+        'pageHistory.action',
+        'pageHistory.authorId',
+        'pageHistory.pageId',
+        {
+          versionId: 'pageHistory.id',
+          editor: 'pageHistory.editorKey',
+          locale: 'pageHistory.localeCode',
+          authorName: 'author.name'
+        }
+      ])
+      .joinRelated('author')
+      .where({
+        'pageHistory.id': versionId,
+        'pageHistory.pageId': pageId
+      }).first()
+    return {
+      ...version,
+      tags: []
+    }
+  }
+
   static async getHistory({ pageId, offsetPage = 0, offsetSize = 100 }) {
     const history = await WIKI.models.pageHistory.query()
       .column([