Merge pull request 'First version of multicheck selection' (#363) from 2427-multicheck_selection into dev

Reviewed-on: #363
Reviewed-by: Carlos Jimenez <carlosjr@verdnatura.es>

front/core/components/multi-check/multi-check.html

@@ -1,5 +1,5 @@
 <vn-check
     ng-model="$ctrl.checked"
-    intermediate="$ctrl.isIntermediate"
+    indeterminate="$ctrl.isIndeterminate"
     translate-attr="{title: 'Check all'}">
 </vn-check>

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', () => {
+            value.on('rowChange', row => {
-                this.isIntermediate = !this.areAllUnchecked() && !this.areAllChecked();
+                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
      */

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();
+        });
+    });
 });

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;