From 6a065091de9322e5d82cbfc10fced4836b79667f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Joan=20S=C3=A1nchez?= Date: Tue, 1 Sep 2020 15:13:33 +0200 Subject: [PATCH 1/2] First version of multicheck selection --- .../components/multi-check/multi-check.html | 2 +- .../components/multi-check/multi-check.js | 42 +++++++++++++++++-- 2 files changed, 40 insertions(+), 4 deletions(-) diff --git a/front/core/components/multi-check/multi-check.html b/front/core/components/multi-check/multi-check.html index 86c35d6d0d..fb950aaff1 100644 --- a/front/core/components/multi-check/multi-check.html +++ b/front/core/components/multi-check/multi-check.html @@ -1,5 +1,5 @@ \ No newline at end of file diff --git a/front/core/components/multi-check/multi-check.js b/front/core/components/multi-check/multi-check.js index 3de9b4c718..d8fda64047 100644 --- a/front/core/components/multi-check/multi-check.js +++ b/front/core/components/multi-check/multi-check.js @@ -15,6 +15,19 @@ export default class MultiCheck extends FormInput { this._checked = false; this.checkField = 'checked'; this.isIntermediate = false; + this.mayusEnabled = false; + this.window.addEventListener('keydown', event => { + if (event.key === 'Shift') + this.mayusEnabled = true; + }); + this.window.addEventListener('keyup', event => { + if (event.key === 'Shift') + this.mayusEnabled = false; + }); + this.window.addEventListener('selectstart', event => { + if (this.mayusEnabled) + event.preventDefault(); + }); } /** @@ -28,7 +41,7 @@ export default class MultiCheck extends FormInput { /** * Sets the array model instance - * Changes intermediate property for + * Changes indeterminate property for * the check component * * @param {ArrayModel} value - Array model instance @@ -37,8 +50,17 @@ export default class MultiCheck extends FormInput { this._model = value; if (value) { - value.on('rowChange', () => { - this.isIntermediate = !this.areAllUnchecked() && !this.areAllChecked(); + value.on('rowChange', row => { + this.isIndeterminate = !this.areAllUnchecked() && !this.areAllChecked(); + + if (this.mayusEnabled) { + this.currentSelection = row.obj.$orgIndex; + + if (this.lastSelection != undefined && this.currentSelection != undefined) + this.setSelection(row.value, this.lastSelection, this.currentSelection); + } + + this.lastSelection = row.obj.$orgIndex; if (this.areAllChecked()) this._checked = true; @@ -52,6 +74,20 @@ export default class MultiCheck extends FormInput { } } + setSelection(value, from, to) { + let start = from; + let end = to; + + if (from > to) { + start = to; + end = from; + } + + const data = this.model.data; + for (let i = start; i <= end; i++) + data[i].checked = value; + } + /** * Gets current check state */ From 33aec33cba81bacde625810527629ed989bf0fd2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Joan=20S=C3=A1nchez?= Date: Wed, 2 Sep 2020 08:12:32 +0200 Subject: [PATCH 2/2] Updated unit test --- .../multi-check/multi-check.spec.js | 40 +++++++++++++++++-- modules/ticket/front/descriptor/index.spec.js | 2 +- 2 files changed, 37 insertions(+), 5 deletions(-) diff --git a/front/core/components/multi-check/multi-check.spec.js b/front/core/components/multi-check/multi-check.spec.js index e49c68d2b0..c8069da3cc 100644 --- a/front/core/components/multi-check/multi-check.spec.js +++ b/front/core/components/multi-check/multi-check.spec.js @@ -62,7 +62,7 @@ describe('Component vnMultiCheck', () => { }); describe('areAllChecked()', () => { - it(`should set return true if all elements are checked`, () => { + it(`should return true if all elements are checked`, () => { const data = controller.model.data; data[0].checked = true; data[1].checked = true; @@ -71,7 +71,7 @@ describe('Component vnMultiCheck', () => { expect(controller.areAllChecked()).toBeTruthy(); }); - it(`should set return false if not all elements are checked`, () => { + it(`should return false if not all elements are checked`, () => { const data = controller.model.data; data[0].checked = true; data[1].checked = false; @@ -82,7 +82,7 @@ describe('Component vnMultiCheck', () => { }); describe('areAllUnchecked()', () => { - it(`should set return true if all elements are unchecked`, () => { + it(`should return true if all elements are unchecked`, () => { const data = controller.model.data; data[0].checked = false; data[1].checked = false; @@ -91,7 +91,7 @@ describe('Component vnMultiCheck', () => { expect(controller.areAllUnchecked()).toBeTruthy(); }); - it(`should set return false if not all elements are unchecked`, () => { + it(`should return false if not all elements are unchecked`, () => { const data = controller.model.data; data[0].checked = false; data[1].checked = true; @@ -100,4 +100,36 @@ describe('Component vnMultiCheck', () => { expect(controller.areAllUnchecked()).toBeFalsy(); }); }); + + describe('setSelection()', () => { + it(`should check all elements between the index range`, () => { + controller.setSelection(true, 0, 2); + + const data = controller.model.data; + const firstRow = data[0]; + const secondRow = data[1]; + const thirdRow = data[2]; + + expect(firstRow.checked).toBeTruthy(); + expect(secondRow.checked).toBeTruthy(); + expect(thirdRow.checked).toBeTruthy(); + }); + + it(`should uncheck all elements between the index range`, () => { + const data = controller.model.data; + const firstRow = data[0]; + const secondRow = data[1]; + const thirdRow = data[2]; + + firstRow.checked = true; + secondRow.checked = true; + thirdRow.checked = true; + + controller.setSelection(false, 0, 1); + + expect(firstRow.checked).toBeFalsy(); + expect(secondRow.checked).toBeFalsy(); + expect(thirdRow.checked).toBeTruthy(); + }); + }); }); diff --git a/modules/ticket/front/descriptor/index.spec.js b/modules/ticket/front/descriptor/index.spec.js index 4904f2ff15..fe7f60c148 100644 --- a/modules/ticket/front/descriptor/index.spec.js +++ b/modules/ticket/front/descriptor/index.spec.js @@ -28,7 +28,7 @@ describe('Ticket Component vnTicketDescriptor', () => { beforeEach(inject(($componentController, _$httpBackend_, _$state_) => { $httpBackend = _$httpBackend_; $httpBackend.whenGET(`Tickets/${ticket.id}/canHaveStowaway`).respond(true); - $httpBackend.whenGET(`Tickets/1/isEditable`).respond(true); + $httpBackend.expect('GET', `Tickets/${ticket.id}/isEditable`).respond(true); $state = _$state_; $state.params.id = 1;