Commit 87ee18c9 authored by George Tsiolis's avatar George Tsiolis

Move BoardList vue component to vue file

parent b9d547b1
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
import Sortable from 'vendor/Sortable'; import Sortable from 'vendor/Sortable';
import Vue from 'vue'; import Vue from 'vue';
import AccessorUtilities from '../../lib/utils/accessor'; import AccessorUtilities from '../../lib/utils/accessor';
import boardList from './board_list'; import boardList from './board_list.vue';
import boardBlankState from './board_blank_state'; import boardBlankState from './board_blank_state';
import './board_delete'; import './board_delete';
......
<script>
import Sortable from 'vendor/Sortable'; import Sortable from 'vendor/Sortable';
import boardNewIssue from './board_new_issue'; import boardNewIssue from './board_new_issue';
import boardCard from './board_card.vue'; import boardCard from './board_card.vue';
...@@ -8,6 +9,11 @@ const Store = gl.issueBoards.BoardsStore; ...@@ -8,6 +9,11 @@ const Store = gl.issueBoards.BoardsStore;
export default { export default {
name: 'BoardList', name: 'BoardList',
components: {
boardCard,
boardNewIssue,
loadingIcon,
},
props: { props: {
disabled: { disabled: {
type: Boolean, type: Boolean,
...@@ -42,46 +48,6 @@ export default { ...@@ -42,46 +48,6 @@ export default {
showIssueForm: false, 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: { watch: {
filters: { filters: {
handler() { handler() {
...@@ -157,51 +123,90 @@ export default { ...@@ -157,51 +123,90 @@ export default {
eventHub.$off(`scroll-board-list-${this.list.id}`, this.scrollToTop); eventHub.$off(`scroll-board-list-${this.list.id}`, this.scrollToTop);
this.$refs.list.removeEventListener('scroll', this.onScroll); this.$refs.list.removeEventListener('scroll', this.onScroll);
}, },
template: ` methods: {
<div class="board-list-component"> listHeight() {
<div return this.$refs.list.getBoundingClientRect().height;
class="board-list-loading text-center" },
aria-label="Loading issues" scrollHeight() {
v-if="loading"> return this.$refs.list.scrollHeight;
<loading-icon /> },
</div> scrollTop() {
<board-new-issue return this.$refs.list.scrollTop + this.listHeight();
:list="list" },
v-if="list.type !== 'closed' && showIssueForm"/> scrollToTop() {
<ul this.$refs.list.scrollTop = 0;
class="board-list" },
v-show="!loading" loadNextPage() {
ref="list" const getIssues = this.list.nextPage();
:data-board="list.id" const loadingDone = () => {
:class="{ 'is-smaller': showIssueForm }"> this.list.loadingMore = false;
<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 if (getIssues) {
v-show="list.loadingMore" this.list.loadingMore = true;
label="Loading more issues" getIssues
/> .then(loadingDone)
.catch(loadingDone);
}
},
toggleForm() {
this.showIssueForm = !this.showIssueForm;
},
onScroll() {
if (!this.loadingMore && (this.scrollTop() > this.scrollHeight() - this.scrollOffset)) {
this.loadNextPage();
}
},
},
};
</script>
<span v-if="list.issues.length === list.issuesSize"> <template>
Showing all issues <div class="board-list-component">
</span> <div
<span v-else> class="board-list-loading text-center"
Showing {{ list.issues.length }} of {{ list.issuesSize }} issues aria-label="Loading issues"
</span> v-if="loading">
</li> <loading-icon />
</ul>
</div> </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>
---
title: Move BoardList vue component to vue file
merge_request: 16888
author: George Tsiolis
type: performance
...@@ -5,7 +5,7 @@ import Vue from 'vue'; ...@@ -5,7 +5,7 @@ import Vue from 'vue';
import MockAdapter from 'axios-mock-adapter'; import MockAdapter from 'axios-mock-adapter';
import axios from '~/lib/utils/axios_utils'; import axios from '~/lib/utils/axios_utils';
import Sortable from 'vendor/Sortable'; 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 eventHub from '~/boards/eventhub';
import '~/boards/mixins/sortable_default_options'; import '~/boards/mixins/sortable_default_options';
import '~/boards/models/issue'; import '~/boards/models/issue';
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment