Move BoardList vue component to vue file

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

@@ -2,7 +2,7 @@
 import Sortable from 'vendor/Sortable';
 import Vue from 'vue';
 import AccessorUtilities from '../../lib/utils/accessor';
-import boardList from './board_list';
+import boardList from './board_list.vue';
 import boardBlankState from './board_blank_state';
 import './board_delete';

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

+<script>
 import Sortable from 'vendor/Sortable';
 import boardNewIssue from './board_new_issue';
 import boardCard from './board_card.vue';
@@ -8,6 +9,11 @@ const Store = gl.issueBoards.BoardsStore;
 export default {
   name: 'BoardList',
+  components: {
+    boardCard,
+    boardNewIssue,
+    loadingIcon,
+  },
   props: {
     disabled: {
       type: Boolean,
@@ -42,46 +48,6 @@ export default {
       showIssueForm: false,
     };
   },
-  components: {
-    boardCard,
-    boardNewIssue,
-    loadingIcon,
-  },
-  methods: {
-    listHeight() {
-      return this.$refs.list.getBoundingClientRect().height;
-    },
-    scrollHeight() {
-      return this.$refs.list.scrollHeight;
-    },
-    scrollTop() {
-      return this.$refs.list.scrollTop + this.listHeight();
-    },
-    scrollToTop() {
-      this.$refs.list.scrollTop = 0;
-    },
-    loadNextPage() {
-      const getIssues = this.list.nextPage();
-      const loadingDone = () => {
-        this.list.loadingMore = false;
-      };
-
-      if (getIssues) {
-        this.list.loadingMore = true;
-        getIssues
-          .then(loadingDone)
-          .catch(loadingDone);
-      }
-    },
-    toggleForm() {
-      this.showIssueForm = !this.showIssueForm;
-    },
-    onScroll() {
-      if (!this.loadingMore && (this.scrollTop() > this.scrollHeight() - this.scrollOffset)) {
-        this.loadNextPage();
-      }
-    },
-  },
   watch: {
     filters: {
       handler() {
@@ -157,51 +123,90 @@ export default {
     eventHub.$off(`scroll-board-list-${this.list.id}`, this.scrollToTop);
     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">
-        <loading-icon />
-      </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-issue-id="-1">
-          <loading-icon
-            v-show="list.loadingMore"
-            label="Loading more issues"
-            />
-          <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>
+  methods: {
+    listHeight() {
+      return this.$refs.list.getBoundingClientRect().height;
+    },
+    scrollHeight() {
+      return this.$refs.list.scrollHeight;
+    },
+    scrollTop() {
+      return this.$refs.list.scrollTop + this.listHeight();
+    },
+    scrollToTop() {
+      this.$refs.list.scrollTop = 0;
+    },
+    loadNextPage() {
+      const getIssues = this.list.nextPage();
+      const loadingDone = () => {
+        this.list.loadingMore = false;
+      };
+      if (getIssues) {
+        this.list.loadingMore = true;
+        getIssues
+          .then(loadingDone)
+          .catch(loadingDone);
+      }
+    },
+    toggleForm() {
+      this.showIssueForm = !this.showIssueForm;
+    },
+    onScroll() {
+      if (!this.loadingMore && (this.scrollTop() > this.scrollHeight() - this.scrollOffset)) {
+        this.loadNextPage();
+      }
+    },
+  },
+};
+</script>
+<template>
+  <div class="board-list-component">
+    <div
+      class="board-list-loading text-center"
+      aria-label="Loading issues"
+      v-if="loading">
+      <loading-icon />
     </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-issue-id="-1">
+        <loading-icon
+          v-show="list.loadingMore"
+          label="Loading more issues"
+        />
+        <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>
+</template>

changelogs/unreleased/move-board-list-vue-component.yml

+---
+title: Move BoardList vue component to vue file
+merge_request: 16888
+author: George Tsiolis
+type: performance

spec/javascripts/boards/board_list_spec.js

@@ -5,7 +5,7 @@ import Vue from 'vue';
 import MockAdapter from 'axios-mock-adapter';
 import axios from '~/lib/utils/axios_utils';
 import Sortable from 'vendor/Sortable';
-import BoardList from '~/boards/components/board_list';
+import BoardList from '~/boards/components/board_list.vue';
 import eventHub from '~/boards/eventhub';
 import '~/boards/mixins/sortable_default_options';
 import '~/boards/models/issue';