verdnatura/salix
verdnatura
/
salix
3
4
Fork 0
Code Issues Pull Requests 59 Releases Wiki Activity

Refactor multi-check para Tarea #284 CR: JUAN

This commit is contained in:
gerard 2018-05-08 09:55:45 +02:00
parent 6544d0161c
commit 8cdf41d9ad
2 changed files with 13 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
client/core/src/components/multi-check/multi-check.html
View File

@ -1,19 +1 @@
<vn-vertical class="multi-check" vn-none class="multi-check {{$ctrl.className}}" tabindex="1" ng-blur="$ctrl.onBlur()">
<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>
<vn-check field="$ctrl.checkAll"></vn-check>

88
client/core/src/components/multi-check/multi-check.js
View File

@ -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 {Array} options List of options shown in drop-down
* @param {SmallInt} checkAll Primary input-check state: 0 -> uncheck, 1 -> checked
* @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) {
this.$timeout = $timeout;
this._checkAll = 0;
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;
constructor() {
this._checkAll = false;
this.checkField = 'checked';
}
get checkAll() {
@ -58,49 +23,20 @@ export default class MultiCheck {
}
switchChecks() {
if (this.models)
this.models.forEach(
el => {
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);
if (!this.data) return;
this.data.forEach(el => {
el[this.checkField] = this._checkAll;
});
}
}
MultiCheck.$inject = ['$timeout'];
ngModule.component('vnMultiCheck', {
template: require('./multi-check.html'),
controller: MultiCheck,
bindings: {
checkAll: '=',
options: '<',
models: '<',
className: '@?'
data: '=',
checkField: '<?',
checkAll: '=?'
}
});