diff options
Diffstat (limited to 'app/assets/javascripts')
-rw-r--r-- | app/assets/javascripts/pages/projects/show/index.js | 8 | ||||
-rw-r--r-- | app/assets/javascripts/pages/projects/tree/show/index.js | 8 | ||||
-rw-r--r-- | app/assets/javascripts/repository/components/app.vue | 3 | ||||
-rw-r--r-- | app/assets/javascripts/repository/graphql.js | 11 | ||||
-rw-r--r-- | app/assets/javascripts/repository/index.js | 25 | ||||
-rw-r--r-- | app/assets/javascripts/repository/pages/index.vue | 24 | ||||
-rw-r--r-- | app/assets/javascripts/repository/pages/tree.vue | 15 | ||||
-rw-r--r-- | app/assets/javascripts/repository/queries/getRef.graphql | 3 | ||||
-rw-r--r-- | app/assets/javascripts/repository/router.js | 36 |
9 files changed, 133 insertions, 0 deletions
diff --git a/app/assets/javascripts/pages/projects/show/index.js b/app/assets/javascripts/pages/projects/show/index.js index 869f70e7d33..6aa41d0825b 100644 --- a/app/assets/javascripts/pages/projects/show/index.js +++ b/app/assets/javascripts/pages/projects/show/index.js @@ -46,4 +46,12 @@ document.addEventListener('DOMContentLoaded', () => { GpgBadges.fetch(); leaveByUrl('project'); + + if (document.getElementById('js-tree-list')) { + import('~/repository') + .then(m => m.default()) + .catch(e => { + throw e; + }); + } }); diff --git a/app/assets/javascripts/pages/projects/tree/show/index.js b/app/assets/javascripts/pages/projects/tree/show/index.js index 400aed35e32..7b90a3a4f6e 100644 --- a/app/assets/javascripts/pages/projects/tree/show/index.js +++ b/app/assets/javascripts/pages/projects/tree/show/index.js @@ -40,4 +40,12 @@ document.addEventListener('DOMContentLoaded', () => { } GpgBadges.fetch(); + + if (document.getElementById('js-tree-list')) { + import('~/repository') + .then(m => m.default()) + .catch(e => { + throw e; + }); + } }); diff --git a/app/assets/javascripts/repository/components/app.vue b/app/assets/javascripts/repository/components/app.vue new file mode 100644 index 00000000000..98240aef810 --- /dev/null +++ b/app/assets/javascripts/repository/components/app.vue @@ -0,0 +1,3 @@ +<template> + <router-view /> +</template> diff --git a/app/assets/javascripts/repository/graphql.js b/app/assets/javascripts/repository/graphql.js new file mode 100644 index 00000000000..febfcce780c --- /dev/null +++ b/app/assets/javascripts/repository/graphql.js @@ -0,0 +1,11 @@ +import Vue from 'vue'; +import VueApollo from 'vue-apollo'; +import createDefaultClient from '~/lib/graphql'; + +Vue.use(VueApollo); + +const defaultClient = createDefaultClient({}); + +export default new VueApollo({ + defaultClient, +}); diff --git a/app/assets/javascripts/repository/index.js b/app/assets/javascripts/repository/index.js new file mode 100644 index 00000000000..00b69362312 --- /dev/null +++ b/app/assets/javascripts/repository/index.js @@ -0,0 +1,25 @@ +import Vue from 'vue'; +import createRouter from './router'; +import App from './components/app.vue'; +import apolloProvider from './graphql'; + +export default function setupVueRepositoryList() { + const el = document.getElementById('js-tree-list'); + const { projectPath, ref } = el.dataset; + + apolloProvider.clients.defaultClient.cache.writeData({ + data: { + projectPath, + ref, + }, + }); + + return new Vue({ + el, + router: createRouter(projectPath, ref), + apolloProvider, + render(h) { + return h(App); + }, + }); +} diff --git a/app/assets/javascripts/repository/pages/index.vue b/app/assets/javascripts/repository/pages/index.vue new file mode 100644 index 00000000000..fdbf195f0f6 --- /dev/null +++ b/app/assets/javascripts/repository/pages/index.vue @@ -0,0 +1,24 @@ +<script> +import getRef from '../queries/getRef.graphql'; + +export default { + apollo: { + ref: { + query: getRef, + }, + }, + data() { + return { + ref: '', + }; + }, +}; +</script> + +<template> + <div> + <router-link :to="{ path: `/tree/${ref}/app` }"> + Go to tree + </router-link> + </div> +</template> diff --git a/app/assets/javascripts/repository/pages/tree.vue b/app/assets/javascripts/repository/pages/tree.vue new file mode 100644 index 00000000000..f51aafee775 --- /dev/null +++ b/app/assets/javascripts/repository/pages/tree.vue @@ -0,0 +1,15 @@ +<script> +export default { + props: { + path: { + type: String, + required: false, + default: '/', + }, + }, +}; +</script> + +<template> + <div>{{ path }}</div> +</template> diff --git a/app/assets/javascripts/repository/queries/getRef.graphql b/app/assets/javascripts/repository/queries/getRef.graphql new file mode 100644 index 00000000000..58c09844c3f --- /dev/null +++ b/app/assets/javascripts/repository/queries/getRef.graphql @@ -0,0 +1,3 @@ +query getRef { + ref @client +} diff --git a/app/assets/javascripts/repository/router.js b/app/assets/javascripts/repository/router.js new file mode 100644 index 00000000000..b42a96a4ee2 --- /dev/null +++ b/app/assets/javascripts/repository/router.js @@ -0,0 +1,36 @@ +import Vue from 'vue'; +import VueRouter from 'vue-router'; +import { joinPaths } from '../lib/utils/url_utility'; +import IndexPage from './pages/index.vue'; +import TreePage from './pages/tree.vue'; + +Vue.use(VueRouter); + +export default function createRouter(base, baseRef) { + return new VueRouter({ + mode: 'history', + base: joinPaths(gon.relative_url_root || '', base), + routes: [ + { + path: '/', + name: 'projectRoot', + component: IndexPage, + }, + { + path: `/tree/${baseRef}(/.*)?`, + name: 'treePath', + component: TreePage, + props: route => ({ + path: route.params.pathMatch, + }), + beforeEnter(to, from, next) { + document + .querySelectorAll('.js-hide-on-navigation') + .forEach(el => el.classList.add('hidden')); + + next(); + }, + }, + ], + }); +} |