propagate check value to multicheck component for intermediate value #1305

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

@@ -1 +1,5 @@
-<vn-check field="$ctrl.checkAll"></vn-check>
+<vn-check field="$ctrl.checked"
+    intermediate="$ctrl.isIntermediate"
+    vn-tooltip="Check all"
+    tooltip-position="up">
+</vn-check>

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

@@ -12,21 +12,74 @@ export default class MultiCheck extends Input {
         super($element, $scope);
         this._checkAll = false;
         this.checkField = 'checked';
+        this.isIntermediate = false;
     }
 
-    get checkAll() {
-        return this._checkAll;
+    /**
+     * Gets array model instance
+     *
+     * @return {ArrayModel} - Array model instance
+     */
+    get model() {
+        return this._model;
     }
 
-    set checkAll(value) {
-        this._checkAll = value;
-        this.switchChecks();
+    /**
+     * Sets the array model instance
+     * Changes intermediate property for
+     * the check component
+     *
+     * @param {ArrayModel} value - Array model instance
+     */
+    set model(value) {
+        this._model = value;
+
+        if (value) {
+            value.on('rowChange', () => {
+                this.isIntermediate = this.allChecked && !this.areAllChecked();
+                if (this.isIntermediate)
+                    this._checked = undefined;
+                else if (this.areAllChecked())
+                    this._checked = true;
+            });
+        }
     }
 
-    switchChecks() {
-        if (!this.data) return;
-        this.data.forEach(el => {
-            el[this.checkField] = this._checkAll;
+    /**
+     * Returns a bolean result for
+     * checked instances
+     *
+     * @return {Boolean} - True if all instances are checked
+     */
+    areAllChecked() {
+        if (!this.model || !this.model.data) return;
+
+        const data = this.model.data;
+        return data.every(item => {
+            return item[this.checkField] === true;
+        });
+    }
+
+    /**
+     * Gets current check state
+     */
+    get checked() {
+        return this._checked;
+    }
+
+    /**
+     * Sets current check state
+     *
+     * @param {Boolean} value - Checkbox state [undefined, true, false]
+     */
+    set checked(value) {
+        this._checked = value;
+        this.allChecked = value;
+
+        const data = this.model.data;
+        if (!data) return;
+        data.forEach(el => {
+            el[this.checkField] = value;
         });
     }
 }
@@ -35,7 +88,7 @@ ngModule.component('vnMultiCheck', {
     template: require('./multi-check.html'),
     controller: MultiCheck,
     bindings: {
-        data: '=',
+        model: '<',
         checkField: '<?',
         checkAll: '=?',
         disabled: '<?'

front/core/locale/es.yml

@@ -41,4 +41,5 @@ Has delivery: Hay reparto
 Loading: Cargando
 Fields to show: Campos a mostrar
 Create new one: Crear nuevo
-Toggle: Desplegar/Plegar
+Toggle: Desplegar/Plegar
+Check all: Seleccionar todo

modules/route/front/tickets/index.html

@@ -30,7 +30,7 @@
                 <vn-tr>
                     <vn-th shrink>
                         <vn-multi-check 
-                            data="$ctrl.tickets">
+                            model="model">
                         </vn-multi-check>
                     </vn-th>
                     <vn-th>Order</vn-th>

modules/ticket/front/index/index.html

@@ -36,7 +36,7 @@
                 <vn-tr>
                     <vn-th shrink>
                         <vn-multi-check 
-                            data="tickets">
+                            model="model">
                         </vn-multi-check>
                     </vn-th>
                     <vn-th></vn-th>

modules/ticket/front/sale/index.html

@@ -56,7 +56,7 @@
                     <vn-tr>
                         <vn-th shrink>
                             <vn-multi-check 
-                                data="$ctrl.sales">
+                                model="model">
                             </vn-multi-check>
                         </vn-th>
                         <vn-th shrink></vn-th>