summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorRegis Boudinot <boudinot.regis@yahoo.com>2017-04-15 15:11:04 +0000
committerPhil Hughes <me@iamphill.com>2017-04-15 15:11:04 +0000
commit8918433af66b77ab101bd5ba3b4a3c716be0f864 (patch)
tree7d96b9242ea86ce252b3ca1987a6471092de808e
parent309bab431075eabfb7a01300f946ce9eb5b6fb98 (diff)
downloadgitlab-ce-8918433af66b77ab101bd5ba3b4a3c716be0f864.tar.gz
Issue Title Vue: convert to .vue - use 'render' with 'createElement' in index
-rw-r--r--app/assets/javascripts/issue_show/index.js36
-rw-r--r--app/assets/javascripts/issue_show/issue_title.vue (renamed from app/assets/javascripts/issue_show/issue_title.js)9
-rw-r--r--app/views/projects/issues/show.html.haml1
-rw-r--r--config/webpack.config.js1
-rw-r--r--spec/javascripts/issue_show/issue_title_spec.js2
5 files changed, 24 insertions, 25 deletions
diff --git a/app/assets/javascripts/issue_show/index.js b/app/assets/javascripts/issue_show/index.js
index b6ce8e83729..4d491e70d83 100644
--- a/app/assets/javascripts/issue_show/index.js
+++ b/app/assets/javascripts/issue_show/index.js
@@ -1,26 +1,20 @@
import Vue from 'vue';
-import IssueTitle from './issue_title';
+import IssueTitle from './issue_title.vue';
import '../vue_shared/vue_resource_interceptor';
-const vueOptions = () => ({
- el: '.issue-title-entrypoint',
- components: {
- IssueTitle,
- },
- data() {
- const issueTitleData = document.querySelector('.issue-title-data').dataset;
+(() => {
+ const issueTitleData = document.querySelector('.issue-title-data').dataset;
+ const { initialTitle, endpoint } = issueTitleData;
- return {
- initialTitle: issueTitleData.initialTitle,
- endpoint: issueTitleData.endpoint,
- };
- },
- template: `
- <IssueTitle
- :initialTitle="initialTitle"
- :endpoint="endpoint"
- />
- `,
-});
+ const vm = new Vue({
+ el: '.issue-title-entrypoint',
+ render: createElement => createElement(IssueTitle, {
+ props: {
+ initialTitle,
+ endpoint,
+ },
+ }),
+ });
-(() => new Vue(vueOptions()))();
+ return vm;
+})();
diff --git a/app/assets/javascripts/issue_show/issue_title.js b/app/assets/javascripts/issue_show/issue_title.vue
index 1184c8956dc..ba54178a310 100644
--- a/app/assets/javascripts/issue_show/issue_title.js
+++ b/app/assets/javascripts/issue_show/issue_title.vue
@@ -1,3 +1,4 @@
+<script>
import Visibility from 'visibilityjs';
import Poll from './../lib/utils/poll';
import Service from './services/index';
@@ -72,7 +73,9 @@ export default {
created() {
this.fetch();
},
- template: `
- <h2 class='title' v-html='title'></h2>
- `,
};
+</script>
+
+<template>
+ <h2 class="title" v-html="title"></h2>
+</template>
diff --git a/app/views/projects/issues/show.html.haml b/app/views/projects/issues/show.html.haml
index 885795ccb5c..fcbd8829595 100644
--- a/app/views/projects/issues/show.html.haml
+++ b/app/views/projects/issues/show.html.haml
@@ -79,4 +79,5 @@
= render 'shared/issuable/sidebar', issuable: @issue
+= page_specific_javascript_bundle_tag('common_vue')
= page_specific_javascript_bundle_tag('issue_show')
diff --git a/config/webpack.config.js b/config/webpack.config.js
index ffb16190093..64a04dc342e 100644
--- a/config/webpack.config.js
+++ b/config/webpack.config.js
@@ -125,6 +125,7 @@ var config = {
'notebook_viewer',
'pdf_viewer',
'vue_pipelines',
+ 'issue_show',
],
minChunks: function(module, count) {
return module.resource && (/vue_shared/).test(module.resource);
diff --git a/spec/javascripts/issue_show/issue_title_spec.js b/spec/javascripts/issue_show/issue_title_spec.js
index 806d728a874..03edbf9f947 100644
--- a/spec/javascripts/issue_show/issue_title_spec.js
+++ b/spec/javascripts/issue_show/issue_title_spec.js
@@ -1,5 +1,5 @@
import Vue from 'vue';
-import issueTitle from '~/issue_show/issue_title';
+import issueTitle from '~/issue_show/issue_title.vue';
describe('Issue Title', () => {
let IssueTitleComponent;