Move BoardList vue component to vue file
This commit is contained in:
parent
b9d547b12c
commit
87ee18c9d1
|
@ -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';
|
||||
|
||||
|
|
|
@ -1,3 +1,4 @@
|
|||
<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">
|
||||
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;
|
||||
};
|
||||
|
||||
<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>
|
||||
`,
|
||||
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>
|
|
@ -0,0 +1,5 @@
|
|||
---
|
||||
title: Move BoardList vue component to vue file
|
||||
merge_request: 16888
|
||||
author: George Tsiolis
|
||||
type: performance
|
|
@ -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';
|
||||
|
|
Loading…
Reference in New Issue