diff options
Diffstat (limited to 'app/assets/javascripts/boards/components/board_list.vue')
| -rw-r--r-- | app/assets/javascripts/boards/components/board_list.vue | 91 |
1 files changed, 53 insertions, 38 deletions
diff --git a/app/assets/javascripts/boards/components/board_list.vue b/app/assets/javascripts/boards/components/board_list.vue index 7495b1163be..ae8434be312 100644 --- a/app/assets/javascripts/boards/components/board_list.vue +++ b/app/assets/javascripts/boards/components/board_list.vue @@ -1,7 +1,7 @@ <script> import { GlLoadingIcon } from '@gitlab/ui'; import Draggable from 'vuedraggable'; -import { mapActions, mapState } from 'vuex'; +import { mapActions, mapGetters, mapState } from 'vuex'; import { sortableStart, sortableEnd } from '~/boards/mixins/sortable_default_options'; import { sprintf, __ } from '~/locale'; import defaultSortableConfig from '~/sortable/sortable_config'; @@ -12,9 +12,10 @@ import BoardNewIssue from './board_new_issue.vue'; export default { name: 'BoardList', i18n: { - loadingIssues: __('Loading issues'), - loadingMoreissues: __('Loading more issues'), + loading: __('Loading'), + loadingMoreboardItems: __('Loading more'), showingAllIssues: __('Showing all issues'), + showingAllEpics: __('Showing all epics'), }, components: { BoardCard, @@ -30,7 +31,7 @@ export default { type: Object, required: true, }, - issues: { + boardItems: { type: Array, required: true, }, @@ -49,14 +50,19 @@ export default { }, computed: { ...mapState(['pageInfoByListId', 'listsFlags']), + ...mapGetters(['isEpicBoard']), + listItemsCount() { + return this.isEpicBoard ? this.list.epicsCount : this.list.issuesCount; + }, paginatedIssueText() { - return sprintf(__('Showing %{pageSize} of %{total} issues'), { - pageSize: this.issues.length, - total: this.list.issuesCount, + return sprintf(__('Showing %{pageSize} of %{total} %{issuableType}'), { + pageSize: this.boardItems.length, + total: this.listItemsCount, + issuableType: this.isEpicBoard ? 'epics' : 'issues', }); }, - issuesSizeExceedsMax() { - return this.list.maxIssueCount > 0 && this.list.issuesCount > this.list.maxIssueCount; + boardItemsSizeExceedsMax() { + return this.list.maxIssueCount > 0 && this.listItemsCount > this.list.maxIssueCount; }, hasNextPage() { return this.pageInfoByListId[this.list.id].hasNextPage; @@ -71,8 +77,13 @@ export default { // When list is draggable, the reference to the list needs to be accessed differently return this.canAdminList ? this.$refs.list.$el : this.$refs.list; }, - showingAllIssues() { - return this.issues.length === this.list.issuesCount; + showingAllItems() { + return this.boardItems.length === this.listItemsCount; + }, + showingAllItemsText() { + return this.isEpicBoard + ? this.$options.i18n.showingAllEpics + : this.$options.i18n.showingAllIssues; }, treeRootWrapper() { return this.canAdminList ? Draggable : 'ul'; @@ -85,14 +96,14 @@ export default { tag: 'ul', 'ghost-class': 'board-card-drag-active', 'data-list-id': this.list.id, - value: this.issues, + value: this.boardItems, }; return this.canAdminList ? options : {}; }, }, watch: { - issues() { + boardItems() { this.$nextTick(() => { this.showCount = this.scrollHeight() > Math.ceil(this.listHeight()); }); @@ -112,7 +123,7 @@ export default { this.listRef.removeEventListener('scroll', this.onScroll); }, methods: { - ...mapActions(['fetchIssuesForList', 'moveIssue']), + ...mapActions(['fetchItemsForList', 'moveItem']), listHeight() { return this.listRef.getBoundingClientRect().height; }, @@ -126,7 +137,7 @@ export default { this.listRef.scrollTop = 0; }, loadNextPage() { - this.fetchIssuesForList({ listId: this.list.id, fetchNext: true }); + this.fetchItemsForList({ listId: this.list.id, fetchNext: true }); }, toggleForm() { this.showIssueForm = !this.showIssueForm; @@ -148,40 +159,40 @@ export default { handleDragOnEnd(params) { sortableEnd(); const { newIndex, oldIndex, from, to, item } = params; - const { issueId, issueIid, issuePath } = item.dataset; + const { itemId, itemIid, itemPath } = item.dataset; const { children } = to; let moveBeforeId; let moveAfterId; - const getIssueId = (el) => Number(el.dataset.issueId); + const getItemId = (el) => Number(el.dataset.itemId); - // If issue is being moved within the same list + // If item is being moved within the same list if (from === to) { if (newIndex > oldIndex && children.length > 1) { - // If issue is being moved down we look for the issue that ends up before - moveBeforeId = getIssueId(children[newIndex]); + // If item is being moved down we look for the item that ends up before + moveBeforeId = getItemId(children[newIndex]); } else if (newIndex < oldIndex && children.length > 1) { - // If issue is being moved up we look for the issue that ends up after - moveAfterId = getIssueId(children[newIndex]); + // If item is being moved up we look for the item that ends up after + moveAfterId = getItemId(children[newIndex]); } else { - // If issue remains in the same list at the same position we do nothing + // If item remains in the same list at the same position we do nothing return; } } else { - // We look for the issue that ends up before the moved issue if it exists + // We look for the item that ends up before the moved item if it exists if (children[newIndex - 1]) { - moveBeforeId = getIssueId(children[newIndex - 1]); + moveBeforeId = getItemId(children[newIndex - 1]); } - // We look for the issue that ends up after the moved issue if it exists + // We look for the item that ends up after the moved item if it exists if (children[newIndex]) { - moveAfterId = getIssueId(children[newIndex]); + moveAfterId = getItemId(children[newIndex]); } } - this.moveIssue({ - issueId, - issueIid, - issuePath, + this.moveItem({ + itemId, + itemIid, + itemPath, fromListId: from.dataset.listId, toListId: to.dataset.listId, moveBeforeId, @@ -201,7 +212,7 @@ export default { <div v-if="loading" class="gl-mt-4 gl-text-center" - :aria-label="$options.i18n.loadingIssues" + :aria-label="$options.i18n.loading" data-testid="board_list_loading" > <gl-loading-icon /> @@ -214,24 +225,28 @@ export default { v-bind="treeRootOptions" :data-board="list.id" :data-board-type="list.listType" - :class="{ 'bg-danger-100': issuesSizeExceedsMax }" + :class="{ 'bg-danger-100': boardItemsSizeExceedsMax }" class="board-list gl-w-full gl-h-full gl-list-style-none gl-mb-0 gl-p-2 js-board-list" data-testid="tree-root-wrapper" @start="handleDragOnStart" @end="handleDragOnEnd" > <board-card - v-for="(issue, index) in issues" + v-for="(item, index) in boardItems" ref="issue" - :key="issue.id" + :key="item.id" :index="index" :list="list" - :issue="issue" + :item="item" :disabled="disabled" /> <li v-if="showCount" class="board-list-count gl-text-center" data-issue-id="-1"> - <gl-loading-icon v-if="loadingMore" :label="$options.i18n.loadingMoreissues" /> - <span v-if="showingAllIssues">{{ $options.i18n.showingAllIssues }}</span> + <gl-loading-icon + v-if="loadingMore" + :label="$options.i18n.loadingMoreboardItems" + data-testid="count-loading-icon" + /> + <span v-if="showingAllItems">{{ showingAllItemsText }}</span> <span v-else>{{ paginatedIssueText }}</span> </li> </component> |