diff options
author | Nick Kipling <nkipling@gitlab.com> | 2019-07-19 18:12:17 +0300 |
---|---|---|
committer | Nathan Friend <nathan@gitlab.com> | 2019-07-30 19:49:48 +0300 |
commit | 786133d31434d1dbb185b2c0ff5eee663f5841d5 (patch) | |
tree | 187af585a6a9d5e31085fcd83970a4b43ad2c105 | |
parent | 237f434ce83488f252b5f593c67ecaf76ceb9e86 (diff) |
Updated select all to be more explicit
-rw-r--r-- | app/assets/javascripts/registry/components/table_registry.vue | 20 | ||||
-rw-r--r-- | spec/javascripts/registry/components/table_registry_spec.js | 19 |
2 files changed, 21 insertions, 18 deletions
diff --git a/app/assets/javascripts/registry/components/table_registry.vue b/app/assets/javascripts/registry/components/table_registry.vue index 807b81c66e9..ff9f8871a8c 100644 --- a/app/assets/javascripts/registry/components/table_registry.vue +++ b/app/assets/javascripts/registry/components/table_registry.vue @@ -126,15 +126,21 @@ export default { showError(message) { createFlash(errorMessages[message]); }, - selectAll() { - if (!this.selectAllChecked) { - this.itemsToBeDeleted = this.repo.list.map((x, idx) => idx); - this.selectAllChecked = true; + onSelectAllChange() { + if (this.selectAllChecked) { + this.deselectAll(); } else { - this.itemsToBeDeleted = []; - this.selectAllChecked = false; + this.selectAll(); } }, + selectAll() { + this.itemsToBeDeleted = this.repo.list.map((x, idx) => idx); + this.selectAllChecked = true; + }, + deselectAll() { + this.itemsToBeDeleted = []; + this.selectAllChecked = false; + }, updateItemsToBeDeleted(idx) { const delIdx = this.itemsToBeDeleted.findIndex(x => x === idx); @@ -162,7 +168,7 @@ export default { v-if="repo.canDelete" class="js-select-all-checkbox" :checked="selectAllChecked" - @change="selectAll" + @change="onSelectAllChange" /> </th> <th>{{ s__('ContainerRegistry|Tag') }}</th> diff --git a/spec/javascripts/registry/components/table_registry_spec.js b/spec/javascripts/registry/components/table_registry_spec.js index 556a66c5666..a96a505a3a4 100644 --- a/spec/javascripts/registry/components/table_registry_spec.js +++ b/spec/javascripts/registry/components/table_registry_spec.js @@ -27,7 +27,8 @@ describe('table registry', () => { }); }; - const toggleSelectAll = () => vm.selectAll(); + const selectAllCheckboxes = () => vm.selectAll(); + const deselectAllCheckboxes = () => vm.deselectAll(); beforeEach(() => { createComponent(); @@ -58,7 +59,7 @@ describe('table registry', () => { describe('multi select', () => { it('should support multiselect and selecting a row should enable delete button', done => { findSelectAllCheckbox().click(); - toggleSelectAll(); + selectAllCheckboxes(); expect(findSelectAllCheckbox().checked).toBe(true); @@ -69,8 +70,7 @@ describe('table registry', () => { }); it('selecting all checkbox should select all rows and enable delete button', done => { - findSelectAllCheckbox().click(); - toggleSelectAll(); + selectAllCheckboxes(); Vue.nextTick(() => { const checkedValues = findAllRowCheckboxes().filter(x => x.checked); @@ -81,9 +81,8 @@ describe('table registry', () => { }); it('deselecting select all checkbox should deselect all rows and disable delete button', done => { - findSelectAllCheckbox().click(); - toggleSelectAll(); // Select them all on - toggleSelectAll(); // Select them all off + selectAllCheckboxes(); + deselectAllCheckboxes(); Vue.nextTick(() => { const checkedValues = findAllRowCheckboxes().filter(x => x.checked); @@ -94,8 +93,7 @@ describe('table registry', () => { }); it('should delete multiple items when multiple items are selected', done => { - findSelectAllCheckbox().click(); - toggleSelectAll(); + selectAllCheckboxes(); Vue.nextTick(() => { expect(vm.itemsToBeDeleted).toEqual([0, 1]); @@ -177,8 +175,7 @@ describe('table registry', () => { }); it('should show the plural title and image count when deleting more than one image', done => { - findSelectAllCheckbox().click(); - toggleSelectAll(); + selectAllCheckboxes(); Vue.nextTick(() => { expect(vm.modalTitle).toBe('Remove images'); |