Move BoardNewIssue vue component

app/assets/javascripts/boards/components/board_list.vue

 <script>
 import Sortable from 'vendor/Sortable';
-import boardNewIssue from './board_new_issue';
+import boardNewIssue from './board_new_issue.vue';
 import boardCard from './board_card.vue';
 import eventHub from '../eventhub';
 import loadingIcon from '../../vue_shared/components/loading_icon.vue';

app/assets/javascripts/boards/components/board_new_issue.js → app/assets/javascripts/boards/components/board_new_issue.vue

-/* global ListIssue */
+<script>
 import eventHub from '../eventhub';
+import ListIssue from '../models/issue';
 
 const Store = gl.issueBoards.BoardsStore;
 
@@ -17,6 +18,9 @@ export default {
       error: false,
     };
   },
+  mounted() {
+    this.$refs.input.focus();
+  },
   methods: {
     submit(e) {
       e.preventDefault();
@@ -59,42 +63,51 @@ export default {
       eventHub.$emit(`hide-issue-form-${this.list.id}`);
     },
   },
-  mounted() {
-    this.$refs.input.focus();
-  },
-  template: `
+};
+</script>
+
+<template>
   <div class="card board-new-issue-form">
     <form @submit="submit($event)">
-        <div class="flash-container"
-          v-if="error">
+      <div
+        class="flash-container"
+        v-if="error"
+      >
         <div class="flash-alert">
           An error occurred. Please try again.
         </div>
       </div>
-        <label class="label-light"
-          :for="list.id + '-title'">
+      <label
+        class="label-light"
+        :for="list.id + '-title'"
+      >
         Title
       </label>
-        <input class="form-control"
+      <input
+        class="form-control"
         type="text"
         v-model="title"
         ref="input"
         autocomplete="off"
-          :id="list.id + '-title'" />
+        :id="list.id + '-title'"
+      />
       <div class="clearfix prepend-top-10">
-          <button class="btn btn-success pull-left"
+        <button
+          class="btn btn-success pull-left"
           type="submit"
           :disabled="title === ''"
-            ref="submit-button">
+          ref="submit-button"
+        >
           Submit issue
         </button>
-          <button class="btn btn-default pull-right"
+        <button
+          class="btn btn-default pull-right"
           type="button"
-            @click="cancel">
+          @click="cancel"
+        >
           Cancel
         </button>
       </div>
     </form>
   </div>
-  `,
-};
+</template>

app/assets/javascripts/boards/models/issue.js

@@ -110,3 +110,5 @@ class ListIssue {
 }
 
 window.ListIssue = ListIssue;
+
+export default ListIssue;

changelogs/unreleased/refactor-move-board-new-issue-vue-component.yml

+---
+title: Move BoardNewIssue vue component
+merge_request: 16947
+author: George Tsiolis
+type: performance

spec/javascripts/boards/board_new_issue_spec.js

@@ -4,7 +4,7 @@
 import Vue from 'vue';
 import MockAdapter from 'axios-mock-adapter';
 import axios from '~/lib/utils/axios_utils';
-import boardNewIssue from '~/boards/components/board_new_issue';
+import boardNewIssue from '~/boards/components/board_new_issue.vue';
 
 import '~/boards/models/list';
 import { listObj, boardsMockInterceptor, mockBoardService } from './mock_data';