feat: History - versions data

client/js/components/history.vue

@@ -1,16 +1,43 @@
 <template lang="pug">
+  .container.is-fluid
+    .columns.is-gapless
+
+      .column.is-narrow.is-hidden-touch.sidebar
+        aside.stickyscroll
+          .sidebar-label
+            span {{ $t('sidebar.pastversions') }}
+          ul.sidebar-menu
+            li(v-for='item in versions')
+              a.is-multiline(:title='item.dateFull')
+                span {{ item.dateCalendar }}
+                span.is-small {{ item.commitAbbr }}
+
+      .column
         .history
           .history-title {{ currentPath }}
           .history-info
             .columns
-        .column
+              .column.history-info-meta
-          p Timestamp: #[strong 2017/07/02 5:19 PM]
+                p
-          p Author: #[strong Nicolas Giard]
+                  i.nc-icon-outline.ui-1_calendar-check-62
-          p Commit: #[strong 379ff16957b2b7f978e02bfe50cd0cee182fcb8a]
+                  span Timestamp: #[strong 2017/07/02 5:19 PM]
+                p
+                  i.nc-icon-outline.i.nc-icon-outline.users_man-23
+                  span Author: #[strong Nicolas Giard]
+                p
+                  i.nc-icon-outline.media-1_flash-21
+                  span Commit: #[strong 379ff16957b2b7f978e02bfe50cd0cee182fcb8a]
               .column.history-info-actions
                 .button-group
-            button.button.is-blue-grey() Compare With...
+                  button.button.is-blue-grey()
-            button.button.is-blue-grey() Revert to version
+                    i.nc-icon-outline.design_path-intersect
+                    span Compare With...
+                  button.button.is-blue-grey()
+                    i.nc-icon-outline.ui-1_eye-17
+                    span View
+                  button.button.is-blue-grey()
+                    i.nc-icon-outline.arrows-4_undo-29
+                    span Revert to version
                 toggle.is-dark(v-model='sidebyside', desc='Side-by-side View')
           .history-diff#diff
 
@@ -20,24 +47,31 @@
 let diffui
 export default {
   name: 'history',
-  props: ['currentPath'],
+  props: ['currentPath', 'historyData'],
   data() {
     return {
+      versions: [],
       diffui: {},
       sidebyside: true
     }
   },
+  watch: {
+    sidebyside() {
+      this.draw()
+    }
+  },
   methods: {
     draw() {
       diffui.draw('#diff', {
         inputFormat: 'json',
-        outputFormat: 'side-by-side',
+        outputFormat: this.sidebyside ? 'side-by-side' : 'line-by-line',
         matching: 'words',
         synchronisedScroll: true
       })
     }
   },
   mounted() {
+    this.versions = JSON.parse(this.historyData)
     diffui = new Diff2HtmlUI({
       diff: `diff --git a/wiki/prerequisites.md b/wiki/prerequisites.md
 index 89a10de..4bc0d66 100644

client/scss/components/history.scss

@@ -14,12 +14,20 @@
 
   &-info {
     background-color: mc('blue-grey', '50');
-    padding: 5px 15px;
+    padding: 5px 10px;
+
+    &-meta {
+      i {
+        margin-right: 8px;
+      }
 
       p {
         padding: 5px 0;
         font-size: 14px;
         color: mc('blue-grey', '800');
+        display: flex;
+        align-items: center;
+      }
     }
 
     &-actions {

server/libs/git.js

@@ -8,6 +8,7 @@ const path = require('path')
 const fs = Promise.promisifyAll(require('fs-extra'))
 const _ = require('lodash')
 const URL = require('url')
+const moment = require('moment')
 
 const securityHelper = require('../helpers/security')
 
@@ -272,10 +273,13 @@ module.exports = {
       }
       let hist = _.chain(out).split('\n').map(h => {
         let hParts = h.split(' ', 4)
+        let hDate = moment(hParts[2])
         return {
           commit: hParts[0],
           commitAbbr: hParts[1],
           date: hParts[2],
+          dateFull: hDate.format('LLLL'),
+          dateCalendar: hDate.calendar(null, { sameElse: 'llll' }),
           email: hParts[3],
           name: hParts[4]
         }

server/views/pages/history.pug

@@ -8,20 +8,4 @@ block rootNavRight
       span= t('nav.viewlatest')
 
 block content
-  .container.is-fluid
+  history(current-path=pageData.meta._id, history-data=JSON.stringify(pageData.history))
-    .columns.is-gapless
-
-      .column.is-narrow.is-hidden-touch.sidebar
-
-        aside.stickyscroll
-          .sidebar-label
-            span= t('sidebar.pastversions')
-          ul.sidebar-menu
-            each item, index in pageData.history
-              - var itemDate = moment(item.date)
-              li: a.is-multiline(class={ 'is-active': index < 1 }, href='', title=itemDate.format('LLLL'))
-                span= itemDate.calendar(null, { sameElse: 'llll'})
-                span.is-small= item.commitAbbr
-
-      .column
-        history(current-path=pageData.meta._id)