Commit 105c80b6 authored by Phil Hughes's avatar Phil Hughes

Shows count at bottom of list

Only visible when scrollable area is larger than height
parent 4f341ed8
......@@ -20,7 +20,8 @@
data () {
return {
scrollOffset: 250,
filters: Store.state.filters
filters: Store.state.filters,
showCount: false
};
},
watch: {
......@@ -30,6 +31,15 @@
this.$els.list.scrollTop = 0;
},
deep: true
},
issues () {
this.$nextTick(() => {
if (this.scrollHeight() > this.listHeight()) {
this.showCount = true;
} else {
this.showCount = false;
}
});
}
},
methods: {
......@@ -58,6 +68,7 @@
group: 'issues',
sort: false,
disabled: this.disabled,
filter: '.board-list-count',
onStart: (e) => {
const card = this.$refs.issue[e.oldIndex];
......
......@@ -142,11 +142,6 @@
}
}
.board-header-loading-spinner {
margin-right: 10px;
color: $gray-darkest;
}
.board-inner-container {
border-bottom: 1px solid $border-color;
padding: $gl-padding;
......@@ -279,3 +274,13 @@
width: 210px;
}
}
.board-list-count {
padding: 10px 0;
color: $gl-placeholder-color;
font-size: 13px;
> .fa {
margin-right: 5px;
}
}
......@@ -20,7 +20,6 @@
"v-if" => "!list.preset && list.id" }
%button.board-delete.has-tooltip.pull-right{ type: "button", title: "Delete list", "aria-label" => "Delete list", data: { placement: "bottom" }, "@click.stop" => "deleteBoard" }
= icon("trash")
= icon("spinner spin", class: "board-header-loading-spinner pull-right", "v-show" => "list.loadingMore")
%board-list{ "inline-template" => true,
"v-if" => "list.type !== 'blank'",
":list" => "list",
......@@ -34,5 +33,11 @@
"v-show" => "!loading",
":data-board" => "list.id" }
= render "projects/boards/components/card"
%li.board-list-count.text-center{ "v-if" => "showCount" }
= icon("spinner spin", "v-show" => "list.loadingMore" )
%span{ "v-if" => "list.issues.length === list.issuesSize" }
Showing all issues
%span{ "v-else" => true }
Showing {{ list.issues.length }} of {{ list.issuesSize }} issues
- if can?(current_user, :admin_list, @project)
= render "projects/boards/components/blank_state"
......@@ -184,11 +184,19 @@ describe 'Issue Boards', feature: true, js: true do
page.within(find('.board', match: :first)) do
expect(page.find('.board-header')).to have_content('56')
expect(page).to have_selector('.card', count: 20)
expect(page).to have_content('Showing 20 of 56 issues')
evaluate_script("document.querySelectorAll('.board .board-list')[0].scrollTop = document.querySelectorAll('.board .board-list')[0].scrollHeight")
wait_for_vue_resource(spinner: false)
expect(page).to have_selector('.card', count: 40)
expect(page).to have_content('Showing 40 of 56 issues')
evaluate_script("document.querySelectorAll('.board .board-list')[0].scrollTop = document.querySelectorAll('.board .board-list')[0].scrollHeight")
wait_for_vue_resource(spinner: false)
expect(page).to have_selector('.card', count: 56)
expect(page).to have_content('Showing all issues')
end
end
......@@ -480,10 +488,17 @@ describe 'Issue Boards', feature: true, js: true do
page.within(find('.board', match: :first)) do
expect(page.find('.board-header')).to have_content('51')
expect(page).to have_selector('.card', count: 20)
expect(page).to have_content('Showing 20 of 51 issues')
evaluate_script("document.querySelectorAll('.board .board-list')[0].scrollTop = document.querySelectorAll('.board .board-list')[0].scrollHeight")
expect(page).to have_selector('.card', count: 40)
expect(page).to have_content('Showing 40 of 51 issues')
evaluate_script("document.querySelectorAll('.board .board-list')[0].scrollTop = document.querySelectorAll('.board .board-list')[0].scrollHeight")
expect(page).to have_selector('.card', count: 51)
expect(page).to have_content('Showing all issues')
end
end
......
......@@ -26,12 +26,15 @@ const listObjDuplicate = {
const BoardsMockData = {
'GET': {
'/test/issue-boards/board/lists{/id}/issues': [{
'/test/issue-boards/board/lists{/id}/issues': {
issues: [{
title: 'Testing',
iid: 1,
confidential: false,
labels: []
}]
}],
size: 1
}
},
'POST': {
'/test/issue-boards/board/lists{/id}': listObj
......
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