Changed order in Vue file

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

@@ -6,60 +6,7 @@ import eventHub from '../eventhub';
 const Store = gl.issueBoards.BoardsStore;
 
 export default {
-  template: `
-    <div class="board-list-component">
-      <div
-        class="board-list-loading text-center"
-        aria-label="Loading issues"
-        v-if="loading">
-        <i
-          class="fa fa-spinner fa-spin"
-          aria-hidden="true">
-        </i>
-      </div>
-      <board-new-issue
-        :list="list"
-        v-if="list.type !== 'closed' && showIssueForm"/>
-      <ul
-        class="board-list"
-        v-show="!loading"
-        ref="list"
-        :data-board="list.id"
-        :class="{ 'is-smaller': showIssueForm }">
-        <board-card
-          v-for="(issue, index) in issues"
-          ref="issue"
-          :index="index"
-          :list="list"
-          :issue="issue"
-          :issue-link-base="issueLinkBase"
-          :root-path="rootPath"
-          :disabled="disabled"
-          :key="issue.id" />
-        <li
-          class="board-list-count text-center"
-          v-if="showCount"
-          data-id="-1">
-          <i
-            class="fa fa-spinner fa-spin"
-            aria-label="Loading more issues"
-            aria-hidden="true"
-            v-show="list.loadingMore">
-          </i>
-          <span v-if="list.issues.length === list.issuesSize">
-            Showing all issues
-          </span>
-          <span v-else>
-            Showing {{ list.issues.length }} of {{ list.issuesSize }} issues
-          </span>
-        </li>
-      </ul>
-    </div>
-  `,
-  components: {
-    boardCard,
-    boardNewIssue,
-  },
+  name: 'BoardList',
   props: {
     disabled: {
       type: Boolean,
@@ -94,29 +41,9 @@ export default {
       showIssueForm: false,
     };
   },
-  watch: {
-    filters: {
-      handler() {
-        this.list.loadingMore = false;
-        this.$refs.list.scrollTop = 0;
-      },
-      deep: true,
-    },
-    issues() {
-      this.$nextTick(() => {
-        if (this.scrollHeight() <= this.listHeight() &&
-          this.list.issuesSize > this.list.issues.length) {
-          this.list.page += 1;
-          this.list.getIssues(false);
-        }
-
-        if (this.scrollHeight() > Math.ceil(this.listHeight())) {
-          this.showCount = true;
-        } else {
-          this.showCount = false;
-        }
-      });
-    },
+  components: {
+    boardCard,
+    boardNewIssue,
   },
   methods: {
     listHeight() {
@@ -147,6 +74,30 @@ export default {
       }
     },
   },
+  watch: {
+    filters: {
+      handler() {
+        this.list.loadingMore = false;
+        this.$refs.list.scrollTop = 0;
+      },
+      deep: true,
+    },
+    issues() {
+      this.$nextTick(() => {
+        if (this.scrollHeight() <= this.listHeight() &&
+          this.list.issuesSize > this.list.issues.length) {
+          this.list.page += 1;
+          this.list.getIssues(false);
+        }
+
+        if (this.scrollHeight() > Math.ceil(this.listHeight())) {
+          this.showCount = true;
+        } else {
+          this.showCount = false;
+        }
+      });
+    },
+  },
   created() {
     eventHub.$on(`hide-issue-form-${this.list.id}`, this.toggleForm);
   },
@@ -193,4 +144,54 @@ export default {
     eventHub.$off(`hide-issue-form-${this.list.id}`, this.toggleForm);
     this.$refs.list.removeEventListener('scroll', this.onScroll);
   },
+  template: `
+    <div class="board-list-component">
+      <div
+        class="board-list-loading text-center"
+        aria-label="Loading issues"
+        v-if="loading">
+        <i
+          class="fa fa-spinner fa-spin"
+          aria-hidden="true">
+        </i>
+      </div>
+      <board-new-issue
+        :list="list"
+        v-if="list.type !== 'closed' && showIssueForm"/>
+      <ul
+        class="board-list"
+        v-show="!loading"
+        ref="list"
+        :data-board="list.id"
+        :class="{ 'is-smaller': showIssueForm }">
+        <board-card
+          v-for="(issue, index) in issues"
+          ref="issue"
+          :index="index"
+          :list="list"
+          :issue="issue"
+          :issue-link-base="issueLinkBase"
+          :root-path="rootPath"
+          :disabled="disabled"
+          :key="issue.id" />
+        <li
+          class="board-list-count text-center"
+          v-if="showCount"
+          data-id="-1">
+          <i
+            class="fa fa-spinner fa-spin"
+            aria-label="Loading more issues"
+            aria-hidden="true"
+            v-show="list.loadingMore">
+          </i>
+          <span v-if="list.issues.length === list.issuesSize">
+            Showing all issues
+          </span>
+          <span v-else>
+            Showing {{ list.issues.length }} of {{ list.issuesSize }} issues
+          </span>
+        </li>
+      </ul>
+    </div>
+  `,
 };