nuevo componente vnMultiCheck

This commit is contained in:
Dani Herrero 2017-06-26 13:53:52 +02:00
parent fabe0cde7c
commit 8b6e7fdc40
6 changed files with 77 additions and 36 deletions

View File

@ -19,6 +19,7 @@ import './icon-menu/icon-menu';
import './drop-down/drop-down';
import './colum-header/colum-header';
import './grid-header/grid-header';
import './multi-check/multi-check';
export {NAME as BUTTON, directive as ButtonDirective} from './button/button';
export {NAME as BUTTON_MDL, factory as buttonMdl} from './button/button.mdl';

View File

@ -1,4 +1,7 @@
<div class="multi-check {{$ctrl.className}}">
<vn-check model="$ctrl.checkAll"></vn-check>
</div>
<vn-none class="multi-check {{$ctrl.className}}" tabindex="-1" ng-blur="$ctrl.showDropDown = false">
<vn-horizontal>
<vn-check vn-none model="$ctrl.checkAll"></vn-check>
<vn-icon vn-none icon="keyboard_arrow_down" ng-click="$ctrl.showDropDown = true"></vn-icon>
<vn-drop-down vn-none items="$ctrl.options" show="$ctrl.showDropDown" selected="$ctrl.type"></vn-drop-down>
</vn-horizontal>
</vn-none>

View File

@ -2,25 +2,62 @@ import {module} from '../module';
import './multi-check.scss';
export default class MultiCheck {
constructor($element) {
constructor($element, $document, $timeout) {
this.$element = $element;
this.$document = $document;
this.$timeout = $timeout;
this._checkAll = false;
this._checkType = '';
this.type = {};
this.labelType = null;
this.showDropDown = false;
}
get checkAll() {
return this._checkAll;
}
set checkAll(value) {
this._checkAll = value;
this.switchChecks();
}
get checkType() {
return this._checkType;
switchChecks() {
this.models.forEach(
el => {
let checked;
if (this.labelType) {
if (this.labelType.length > 3 && this.labelType.substr(0, 3) === 'no-') {
checked = el[this.labelType.replace('no-', '')] ? false : true;
} else {
checked = el[this.labelType] ? true : false;
}
} else {
checked = this.checkAll;
}
el.checked = checked;
}
);
}
set checkType(value) {
this._checkType = value;
$doCheck() {
if (this.type && this.type.id) {
switch (this.type.id) {
case 'all':
this.labelType = null;
this.checkAll = true;
break;
case 'any':
this.labelType = null;
this.checkAll = false;
break;
default:
this.labelType = this.type.id;
this.checkAll = false;
break;
}
this.type = {};
}
}
}
MultiCheck.$inject = ['$element'];
MultiCheck.$inject = ['$element', '$document', '$timeout'];
module.component('vnMultiCheck', {
template: require('./multi-check.html'),
@ -28,6 +65,7 @@ module.component('vnMultiCheck', {
bindings: {
options: '<',
container: '@',
models: '=',
className: '@?'
}
});

View File

@ -0,0 +1,12 @@
vn-multi-check {
vn-drop-down{
margin-top: 23px;
}
vn-icon{
cursor: pointer;
}
&:focus, &:active, &:hover{
outline: none;
border: none;
}
}

View File

@ -49,11 +49,11 @@
</vn-one>
<vn-two></vn-two>
</vn-horizontal>
<vn-grid-header on-order="$ctrl.onOrder(field, order)">
<vn-none min-none></vn-none>
<vn-colum-header vn-none min-none>
<vn-check model="$ctrl.checkAll"></vn-check>
<vn-multi-check container=".list-content" models="$ctrl.tickets" options="[{id:'all',name:'Todos'},{id:'any',name:'Ninguno'},{id:'problem',name:'Con incidencia'},{id:'no-problem',name:'Sin incidencia'}]"></vn-multi-check>
</vn-colum-header>
<vn-colum-header vn-one pad-medium-h field="ticketFk" text="ID Ticket"></vn-colum-header>
<vn-colum-header vn-two pad-medium-h field="agency" text="Agency"></vn-colum-header>
@ -71,7 +71,7 @@
<vn-icon margin-small-left icon="report_problem" ng-if="ticket.problem" vn-tooltip="{{ticket.problem}}" tooltip-position="right"></vn-icon>
</vn-none>
<vn-none>
<vn-check model="ticket.cheched"></vn-check>
<vn-check model="ticket.checked"></vn-check>
</vn-none>
<vn-one pad-medium-h>{{::ticket.ticketFk}}</vn-one>
<vn-two pad-medium-h>{{::ticket.agency}}</vn-two>

View File

@ -18,7 +18,7 @@ export default class ProductionIndex {
this.order = {};
this.filter = {};
this.order = {};
this._checkAll = false;
this.tickets = [];
this.states = [];
this.lines = 0;
@ -36,22 +36,7 @@ export default class ProductionIndex {
name: "Silla FV"
};
}
get checkAll() {
return this._checkAll;
}
set checkAll(value) {
this._checkAll = value;
this.switchChecks();
}
switchChecks() {
let checks = this.$element[0].querySelectorAll('.list-body input[type="checkbox"]');
checks.forEach(
(el, i) => {
el.checked = this._checkAll;
this.tickets[i].cheched = this._checkAll;
}
);
}
// Actions Callbacks
_changeState(ids, sateteId, stateName, index) {
this.$http.put(`/production/api/TicketStates/${sateteId}/changeState`, {tickets: ids}).then(
@ -80,11 +65,13 @@ export default class ProductionIndex {
let ids = [];
let index = [];
let tickets = [];
checks.forEach(
(_, i) => {
ids.push(this.tickets[i].ticketFk);
index.push(i);
tickets.push({ticketFk: this.tickets[i].ticketFk, salesPersonFk: this.tickets[i].salesPersonFk});
this.tickets.forEach(
(val, i) => {
if (val.checked) {
ids.push(val.ticketFk);
index.push(i);
tickets.push({ticketFk: val.ticketFk, salesPersonFk: val.salesPersonFk});
}
}
);
switch (action) {