BigW Consortium Gitlab

Commit 6a43c200 by Jacob Schatz

Navigate to new tree.

parent 7e9100fc
No related merge requests found
...@@ -2,6 +2,7 @@ import Sidebar from './repo_sidebar' ...@@ -2,6 +2,7 @@ import Sidebar from './repo_sidebar'
import Editor from './repo_editor' import Editor from './repo_editor'
import Service from './repo_service' import Service from './repo_service'
import Store from './repo_store' import Store from './repo_store'
import Helper from './repo_helper'
export default class RepoBundle { export default class RepoBundle {
constructor() { constructor() {
...@@ -10,6 +11,6 @@ export default class RepoBundle { ...@@ -10,6 +11,6 @@ export default class RepoBundle {
Store.service.url = url; Store.service.url = url;
Store.sidebar = new Sidebar(url); Store.sidebar = new Sidebar(url);
Store.editor = new Editor(); Store.editor = new Editor();
Store.sidebar.getContent(); Helper.getContent();
} }
} }
...@@ -5,6 +5,7 @@ import Store from './repo_store' ...@@ -5,6 +5,7 @@ import Store from './repo_store'
export default class RepoEditor { export default class RepoEditor {
constructor() { constructor() {
this.initMonaco(); this.initMonaco();
this.el = document.getElementById('ide');
} }
initMonaco() { initMonaco() {
...@@ -21,13 +22,12 @@ export default class RepoEditor { ...@@ -21,13 +22,12 @@ export default class RepoEditor {
} }
initVue() { initVue() {
const self = this;
const monacoEditor = this.monacoEditor; const monacoEditor = this.monacoEditor;
this.vue = new Vue({ this.vue = new Vue({
data: () => Store, data: () => Store,
created () { created () {
if(this.blobRaw !== ''){ if(this.blobRaw !== ''){
console.log(monacoEditor)
monacoEditor.setModel( monacoEditor.setModel(
monaco.editor.createModel( monaco.editor.createModel(
this.blobRaw, this.blobRaw,
...@@ -35,6 +35,12 @@ export default class RepoEditor { ...@@ -35,6 +35,12 @@ export default class RepoEditor {
) )
); );
} }
if(this.isTree) {
self.el.styles = 'display: none';
} else {
self.el.styles = 'display: inline-block';
}
}, },
watch: { watch: {
......
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;
import Service from './repo_service'
import Store from './repo_store'
let RepoHelper = { let RepoHelper = {
isTree(data) { isTree(data) {
return data.hasOwnProperty('blobs'); return data.hasOwnProperty('blobs');
}, },
Time: window.performance
&& window.performance.now
? window.performance
: Date,
blobURLtoParent(url) { blobURLtoParent(url) {
const split = url.split('/'); const split = url.split('/');
split.pop(); split.pop();
...@@ -11,6 +19,92 @@ let RepoHelper = { ...@@ -11,6 +19,92 @@ let RepoHelper = {
split[blobIndex] = 'tree'; split[blobIndex] = 'tree';
} }
return split.join('/'); 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);
} }
}; };
......
...@@ -2,6 +2,11 @@ import axios from 'axios'; ...@@ -2,6 +2,11 @@ import axios from 'axios';
let RepoService = { let RepoService = {
url: '', url: '',
params: {
params: {
format: 'json'
}
},
setUrl(url) { setUrl(url) {
this.url = url; this.url = url;
...@@ -9,9 +14,9 @@ let RepoService = { ...@@ -9,9 +14,9 @@ let RepoService = {
getContent(url) { getContent(url) {
if(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);
} }
}; };
......
import Service from './repo_service' import Service from './repo_service'
import Helper from './repo_helper' import Helper from './repo_helper'
import Vue from 'vue'; import Vue from 'vue'
import Store from './repo_store' import Store from './repo_store'
import RepoFile from './repo_file'
export default class RepoSidebar { export default class RepoSidebar {
constructor(url) { constructor(url) {
this.url = url; this.url = url;
this.initVue(); this.initVue();
this.el = document.getElementById('ide');
} }
// may be tree or file. initVue() {
getContent() { this.vue = new Vue({
Service.getContent() el: '#sidebar',
.then((response)=> { components: {
let data = response.data; 'repo-file':RepoFile,
Store.isTree = Helper.isTree(data); },
if(!Store.isTree) {
// it's a blob data: () => Store,
const parentURL = Helper.blobURLtoParent(Service.url);
Store.blobRaw = data.plain;
Service.getContent(parentURL + '/?format=json')
.then((response)=> {
console.log(response.data)
})
.catch((response)=> {
}); methods: {
} else { 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
...@@ -8,6 +8,8 @@ let RepoStore = { ...@@ -8,6 +8,8 @@ let RepoStore = {
blobs: [], blobs: [],
submodules: [], submodules: [],
blobRaw: '', blobRaw: '',
blobRendered: '' blobRendered: '',
files: []
}; };
export default RepoStore; export default RepoStore;
[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
...@@ -12,7 +12,7 @@ module RendersBlob ...@@ -12,7 +12,7 @@ module RendersBlob
blob.simple_viewer blob.simple_viewer
end end
return render_404 unless viewer return render_404 unless viewer
puts blob
render json: { render json: {
html: view_to_html_string("projects/blob/_viewer", viewer: viewer, load_async: false), html: view_to_html_string("projects/blob/_viewer", viewer: viewer, load_async: false),
plain: blob.data, plain: blob.data,
......
...@@ -13,7 +13,7 @@ module TreeHelper ...@@ -13,7 +13,7 @@ module TreeHelper
end end
def repo_url() def repo_url()
url_for(params.merge(format: :json)) request.original_url
end end
# Return an image icon depending on the file type and mode # Return an image icon depending on the file type and mode
......
...@@ -5,10 +5,4 @@ ...@@ -5,10 +5,4 @@
.nav-block .nav-block
= render 'projects/tree/tree_header', tree: @tree = 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 = render 'projects/tree/tree_content', tree: @tree
...@@ -8,4 +8,5 @@ ...@@ -8,4 +8,5 @@
= render "projects/blob/auxiliary_viewer", blob: blob = render "projects/blob/auxiliary_viewer", blob: blob
#blob-content-holder.blob-content-holder #blob-content-holder.blob-content-holder
#sidebar
#ide{ data: { url: repo_url }, style: "height:400px;" } #ide{ data: { url: repo_url }, style: "height:400px;" }
.tree-content-holder .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;" } #ide{ data: { url: repo_url }, style: "height:400px;" }
- if tree.readme - if tree.readme
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment