From 6a065091de9322e5d82cbfc10fced4836b79667f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joan=20S=C3=A1nchez?= <joan@verdnatura.es>
Date: Tue, 1 Sep 2020 15:13:33 +0200
Subject: [PATCH] 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 @@
 <vn-check
     ng-model="$ctrl.checked"
-    intermediate="$ctrl.isIntermediate"
+    indeterminate="$ctrl.isIndeterminate"
     translate-attr="{title: 'Check all'}">
 </vn-check>
\ 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
      */