Refactor multi-check para Tarea #284 CR: JUAN

client/core/src/components/multi-check/multi-check.html

@@ -1,19 +1 @@
-<vn-vertical class="multi-check" vn-none class="multi-check {{$ctrl.className}}" tabindex="1" ng-blur="$ctrl.onBlur()">
+<vn-check field="$ctrl.checkAll"></vn-check>
-    <vn-one>
-        <vn-horizontal>
-            <vn-none class="primaryCheckbox" ng-if="$ctrl.checkAll===0">
-                <vn-icon vn-none icon="check_box_outline_blank" ng-click="$ctrl.checkAll = 1"></vn-icon>    
-            </vn-none>
-            <vn-none class="primaryCheckbox color" ng-if="$ctrl.checkAll===1">
-                <vn-icon vn-none icon="check_box" ng-click="$ctrl.checkAll = 0"></vn-icon>
-            </vn-none>
-            <vn-none class="primaryCheckbox color" ng-if="$ctrl.checkAll===2">
-                <vn-icon vn-none icon="indeterminate_check_box" ng-click="$ctrl.checkAll = 0"></vn-icon>    
-            </vn-none>
-            <vn-icon vn-none class="arrow_down" icon="keyboard_arrow_down" ng-click="$ctrl.showDropDown = true"></vn-icon>
-        </vn-horizontal>
-    </vn-one>
-    <vn-one>
-        <vn-drop-down vn-none items="$ctrl.options" show="$ctrl.showDropDown" selected="$ctrl.type"></vn-drop-down>
-    </vn-one>
-</vn-vertical>

client/core/src/components/multi-check/multi-check.js

@@ -3,49 +3,14 @@ import './multi-check.scss';
 
 /**
  * Draw checkbox with a drop-down and multi options
- * @param {SmallInt} checkAll Primary input-check state: 0 -> uncheck, 1 -> checked, 2 -> indeterminate checked
+ * @param {SmallInt} checkAll Primary input-check state: 0 -> uncheck, 1 -> checked
- * @param {Array} options List of options shown in drop-down
+ * @param {Array} data List of options shown in drop-down
  * @param {Array} models Elements to check / unCheck
- * @param {String} className Optional css class name
  */
 export default class MultiCheck {
-    constructor($timeout) {
+    constructor() {
-        this.$timeout = $timeout;
+        this._checkAll = false;
-        this._checkAll = 0;
+        this.checkField = 'checked';
-        this._models = [];
-        this._type = {};
-        this.showDropDown = false;
-    }
-
-    get type() {
-        return this._type;
-    }
-
-    set type(value) {
-        if (value && value.id) {
-            this._type = value;
-            switch (value.id) {
-            case 'all':
-                this.checkAll = 1;
-                break;
-            case 'any':
-                this.checkAll = 0;
-                break;
-            default:
-                this.checkAll = 2;
-                break;
-            }
-        }
-        this._type = {};
-        this.showDropDown = false;
-    }
-
-    get models() {
-        return this._models;
-    }
-
-    set models(value) {
-        this._models = value;
     }
 
     get checkAll() {
@@ -58,49 +23,20 @@ export default class MultiCheck {
     }
 
     switchChecks() {
-        if (this.models)
+        if (!this.data) return;
-            this.models.forEach(
+        this.data.forEach(el => {
-                el => {
+            el[this.checkField] = this._checkAll;
-                    let checked;
+        });
-                    if (this.type.id && this.type.id !== 'all' && this.type.id !== 'any') {
-                        if (this.type.id.length > 3 && this.type.id.substr(0, 3) === 'no-') {
-                            let label = this.type.id.replace('no-', '');
-                            checked = Boolean(el[label]) === false;
-                        } else if (this.type.id.length > 6 && this.type.id.substr(0, 6) === 'equal-') {
-                            let label = this.type.id.replace('equal-', '');
-                            checked = (el[label] && el[label] === this.type.name);
-                        } else {
-                            checked = Boolean(el[this.type.id]) === true;
-                        }
-                    } else {
-                        checked = this.checkAll === 1;
-                    }
-                    el.checked = checked;
-                }
-            );
-    }
-
-    $onChanges() {
-        this.type = {};
-        this.checkAll = 0;
-    }
-
-    onBlur() {
-        this.$timeout(() => {
-            this.showDropDown = false;
-        }, 200);
     }
 }
-MultiCheck.$inject = ['$timeout'];
 
 ngModule.component('vnMultiCheck', {
     template: require('./multi-check.html'),
     controller: MultiCheck,
     bindings: {
-        checkAll: '=',
+        data: '=',
-        options: '<',
+        checkField: '<?',
-        models: '<',
+        checkAll: '=?'
-        className: '@?'
     }
 });