Navigate to new tree.

app/assets/javascripts/repo/repo_bundle.js

@@ -2,6 +2,7 @@ import Sidebar from './repo_sidebar'
 import Editor from './repo_editor'
 import Service from './repo_service'
 import Store from './repo_store'
+import Helper from './repo_helper'
 export default class RepoBundle {
   constructor() {
@@ -10,6 +11,6 @@ export default class RepoBundle {
     Store.service.url = url;
     Store.sidebar = new Sidebar(url);
     Store.editor = new Editor();
-    Store.sidebar.getContent();
+    Helper.getContent();
   }
 }

app/assets/javascripts/repo/repo_editor.js

@@ -5,6 +5,7 @@ import Store from './repo_store'
 export default class RepoEditor {
   constructor() {
     this.initMonaco();
+    this.el = document.getElementById('ide');
   }
   initMonaco() {
@@ -21,13 +22,12 @@ export default class RepoEditor {
   }
   initVue() {
+    const self = this;
     const monacoEditor = this.monacoEditor;
     this.vue = new Vue({
       data: () => Store,
-      
       created () {
         if(this.blobRaw !== ''){
-          console.log(monacoEditor)
           monacoEditor.setModel(
             monaco.editor.createModel(
               this.blobRaw,
@@ -35,6 +35,12 @@ export default class RepoEditor {
             )
           );
         }
+
+        if(this.isTree) {
+          self.el.styles = 'display: none';
+        } else {
+          self.el.styles = 'display: inline-block';
+        }
       },
       watch: {

app/assets/javascripts/repo/repo_file.js

+let RepoFile = {
+  template: `
+  <li>
+    <i class='fa' :class='file.icon'></i>
+    <a :href='file.url' @click.prevent='linkClicked(file)'>{{file.name}}</a>
+  </li>
+  `,
+  props: {
+    name: 'repo-file',
+    file: Object,
+  },
+
+  methods: {
+    linkClicked(file) {
+      this.$emit('linkclicked', file);
+    }
+  }
+};
+export default RepoFile;

app/assets/javascripts/repo/repo_helper.js

+import Service from './repo_service'
+import Store from './repo_store'
+
 let RepoHelper = {
   isTree(data) {
     return data.hasOwnProperty('blobs');
   },
+  Time: window.performance
+  && window.performance.now
+  ? window.performance
+  : Date,
+
   blobURLtoParent(url) {
     const split = url.split('/');
     split.pop();
@@ -11,6 +19,92 @@ let RepoHelper = {
       split[blobIndex] = 'tree';
     }
     return split.join('/');
+  },
+
+    // may be tree or file.
+  getContent() {
+    Service.getContent()
+    .then((response)=> {
+      let data = response.data;
+      Store.isTree = this.isTree(data);
+      if(!Store.isTree) {
+        // it's a blob
+        const parentURL = this.blobURLtoParent(Service.url);
+        Store.blobRaw = data.plain;
+        Service.getContent(parentURL)
+        .then((response)=> {
+          console.log(response.data)
+        })
+        .catch((response)=> {
+
+        });
+      } else {
+        // it's a tree
+        Store.files = this.dataToListOfFiles(data);
+      }
+    })
+    .catch((response)=> {
+      console.log('error response', response);
+    });
+  },
+
+  toFA(icon) {
+    return `fa-${icon}`
+  },
+
+  dataToListOfFiles(data) {
+    let a = [];
+
+    //push in blobs
+    data.blobs.forEach((blob) => {
+      a.push({
+        type: 'blob',
+        name: blob.name,
+        url: blob.url,
+        icon: this.toFA(blob.icon)
+      })
+    });
+
+    data.trees.forEach((tree) => {
+      a.push({
+        type: 'tree',
+        name: tree.name,
+        url: tree.url,
+        icon: this.toFA(tree.icon)
+      })
+    });
+
+    data.submodules.forEach((submodule) => {
+      a.push({
+        type: 'submodule',
+        name: submodule.name,
+        url: submodule.url,
+        icon: this.toFA(submodule.icon)
+      })
+    });
+
+    return a;
+  },
+
+  genKey () {
+    return this.Time.now().toFixed(3)
+  },
+
+  _key: '',
+
+  getStateKey () {
+    return this._key
+  },
+
+  setStateKey (key) {
+    this._key = key;
+  },
+
+  toURL(url) {
+    var history = window.history;
+    this._key = this.genKey();
+    history.pushState({ key: this._key }, '', url);
+    window.scrollTo(0, 0);
   }
 };

app/assets/javascripts/repo/repo_service.js

@@ -2,6 +2,11 @@ import axios from 'axios';
 let RepoService = {
   url: '',
+  params: {
+    params: {
+      format: 'json'
+    }
+  },
   setUrl(url) {
     this.url = url;
@@ -9,9 +14,9 @@ let RepoService = {
   getContent(url) {
     if(url){
-      return axios.get(url);  
+      return axios.get(url, this.params);  
     }
-    return axios.get(this.url);
+    return axios.get(this.url, this.params);
   }
 };

app/assets/javascripts/repo/repo_sidebar.js

 import Service from './repo_service'
 import Helper from './repo_helper'
-import Vue from 'vue';
+import Vue from 'vue'
 import Store from './repo_store'
+import RepoFile from './repo_file'
+
 export default class RepoSidebar {
   constructor(url) {
     this.url = url;
     this.initVue();
+    this.el = document.getElementById('ide');
   }
-  // may be tree or file.
-  getContent() {
-    Service.getContent()
-    .then((response)=> {
-      let data = response.data;
-      Store.isTree = Helper.isTree(data);
-      if(!Store.isTree) {
-        // it's a blob
-        const parentURL = Helper.blobURLtoParent(Service.url);
-        Store.blobRaw = data.plain;
-        Service.getContent(parentURL + '/?format=json')
-        .then((response)=> {
-          console.log(response.data)
-        })
-        .catch((response)=> {
-        });
-      } else {
+  initVue() {
+    this.vue = new Vue({
+      el: '#sidebar',
+      components: {
+        'repo-file':RepoFile,
+      },
+
+      data: () => Store,
+      methods: {
+        linkClicked(file) {
+          Service.url = file.url;
+          Helper.getContent();
+          Helper.toURL(file.url);
+        }
       }
-    })
-    .catch((response)=> {
-      console.log('error response', response);
     });
   }
-
-  initVue() {}
 }
\ No newline at end of file

app/assets/javascripts/repo/repo_store.js

@@ -8,6 +8,8 @@ let RepoStore = {
   blobs: [],
   submodules: [],
   blobRaw: '',
-  blobRendered: ''
+  blobRendered: '',
+
+  files: []
 };
 export default RepoStore;

app/assets/stylesheets/pages/repo.scss

+[v-cloak] {
+  display: none;
+}
+
+#sidebar {
+  ul {
+    list-style-type: none;
+    padding: 0;
+    li {
+      border-bottom: 1px solid $border-gray-normal;
+      padding: 10px 20px;
+    }
+  }
+}
\ No newline at end of file

app/controllers/concerns/renders_blob.rb

@@ -12,7 +12,7 @@ module RendersBlob
         blob.simple_viewer
       end
     return render_404 unless viewer
-
+    puts blob
     render json: {
       html: view_to_html_string("projects/blob/_viewer", viewer: viewer, load_async: false),
       plain: blob.data,

app/helpers/tree_helper.rb

@@ -13,7 +13,7 @@ module TreeHelper
   end
   def repo_url()
-    url_for(params.merge(format: :json))
+    request.original_url
   end
   # Return an image icon depending on the file type and mode

app/views/projects/_files.html.haml

@@ -5,10 +5,4 @@
   .nav-block
     = render 'projects/tree/tree_header', tree: @tree
-  - if commit
-    .info-well.hidden-xs.project-last-commit.append-bottom-default
-      .well-segment
-        %ul.blob-commit-info
-          = render 'projects/commits/commit', commit: commit, ref: ref, project: project
-
   = render 'projects/tree/tree_content', tree: @tree

app/views/projects/blob/_blob.html.haml

@@ -8,4 +8,5 @@
   = render "projects/blob/auxiliary_viewer", blob: blob
 #blob-content-holder.blob-content-holder
+  #sidebar
   #ide{ data: { url: repo_url }, style: "height:400px;" }

app/views/projects/tree/_tree_content.html.haml

 .tree-content-holder
+  #sidebar
+    %ul
+      %repo-file{ "v-for"=> "file in files", ":file" => "file","@linkclicked" => "linkClicked(file)" }
   #ide{ data: { url: repo_url }, style: "height:400px;" }
   - if tree.readme