From 6815ab2b3cdcf6674ae7ab3dfa8c27a9450a8566 Mon Sep 17 00:00:00 2001
From: Dani Herrero <dherrero@alfatecsistemas.es>
Date: Wed, 28 Jun 2017 13:12:01 +0200
Subject: [PATCH 1/5] =?UTF-8?q?Localizador:=20paginaci=C3=B3n=20y=20ordena?=
 =?UTF-8?q?ci=C3=B3n=20desde=20front,=20selector=20actua=20sobre=20todos?=
 =?UTF-8?q?=20los=20elementos=20(no=20solo=20sobre=20los=20que=20se=20mues?=
 =?UTF-8?q?tran)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/core/src/multi-check/multi-check.js    | 50 ++++++----
 client/production/src/index/index.html        | 56 +----------
 client/production/src/index/index.js          | 97 ++++++++-----------
 client/production/src/index/style.scss        |  4 -
 .../production-table/production-table.html    | 55 +++++++++++
 .../src/production-table/production-table.js  | 48 +++++++++
 client/production/src/production.js           |  3 +-
 client/salix/src/styles/misc.scss             |  6 +-
 8 files changed, 179 insertions(+), 140 deletions(-)
 create mode 100644 client/production/src/production-table/production-table.html
 create mode 100644 client/production/src/production-table/production-table.js

diff --git a/client/core/src/multi-check/multi-check.js b/client/core/src/multi-check/multi-check.js
index 52761d8980..14e14760e9 100644
--- a/client/core/src/multi-check/multi-check.js
+++ b/client/core/src/multi-check/multi-check.js
@@ -1,17 +1,24 @@
 import {module} from '../module';
 import './multi-check.scss';
-/*
-*   @description Draw checkbox with a drop-down and multi options
-*   @param  {Array} options - List of options shown in drop-down
-*   @param  {Array} models - Elements to check / unCheck
-*   @param  {String=} className - Optional css class name
-*/
+/**
+ * Draw checkbox with a drop-down and multi options
+ * @param {Array} options 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() {
         this._checkAll = 0;
+        this._models = [];
         this.type = {};
         this.showDropDown = false;
     }
+    get models() {
+        return this._models;
+    }
+    set models(value) {
+        this._models = value;
+    }
     get checkAll() {
         return this._checkAll;
     }
@@ -20,24 +27,25 @@ export default class MultiCheck {
         this.switchChecks();
     }
     switchChecks() {
-        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-') {
-                        checked = el[this.type.id.replace('no-', '')] ? false : true;
-                    } 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);
+        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-') {
+                            checked = el[this.type.id.replace('no-', '')] == null;
+                        } 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 = el[this.type.id] != null;
+                        }
                     } else {
-                        checked = el[this.type.id] ? true : false;
+                        checked = this.checkAll === 1;
                     }
-                } else {
-                    checked = this.checkAll === 1;
+                    el.checked = checked;
                 }
-                el.checked = checked;
-            }
-        );
+            );
     }
     $onChanges() {
         this.type = {};
diff --git a/client/production/src/index/index.html b/client/production/src/index/index.html
index fd39539305..6ca4e261bd 100644
--- a/client/production/src/index/index.html
+++ b/client/production/src/index/index.html
@@ -13,7 +13,7 @@
                     icon="keyboard_arrow_down" 
                     ng-click="$ctrl.moreFilters($event)">
                 </vn-icon>
-                <vn-button vn-none pad-small-top label="Filtrar" ng-click="$ctrl.filterTickets()"></vn-button>
+                <vn-button vn-none pad-small-top label="Filtrar" ng-click="$ctrl.searchTickets()"></vn-button>
             </vn-two>
             <vn-one vn-horizontal>
                 <vn-one></vn-one>
@@ -49,58 +49,6 @@
             </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-multi-check 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>
-            <vn-colum-header vn-two pad-medium-h field="salesPerson" text="Commercial"></vn-colum-header>
-            <vn-colum-header vn-one pad-medium-h field="hour" text="Hour"></vn-colum-header>
-            <vn-colum-header vn-one pad-medium-h field="state" text="State"></vn-colum-header>
-            <vn-colum-header vn-one pad-medium-h field="lines" text="Lines"></vn-colum-header>
-            <vn-colum-header vn-one pad-medium-h field="m3" text="m3"></vn-colum-header>
-            <vn-colum-header vn-one pad-medium-h field="boxes" text="Boxes"></vn-colum-header>
-            <vn-none min-none></vn-none>
-        </vn-grid-header>
-        <vn-one class="list list-content">
-            <vn-horizontal vn-one class="list list-body text-center" ng-repeat="ticket in $ctrl.tickets track by ticket.id" ng-class="{warning: ticket.problem==='RIESGO'}">
-                <vn-none>
-                    <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.checked"></vn-check>
-                </vn-none>
-                <vn-one pad-medium-h>{{::ticket.ticketFk}}</vn-one>
-                <vn-two pad-medium-h>{{::ticket.agency}}</vn-two>
-                <vn-two pad-medium-h>{{::ticket.salesPerson | ucwords}}</vn-two>
-                <vn-one pad-medium-h>{{ticket.hour}}</vn-one>
-                <vn-one pad-medium-h>{{ticket.state}}</vn-one>
-                <vn-one pad-medium-h>{{::ticket.lines}}</vn-one>
-                <vn-one pad-medium-h>{{::ticket.m3}}</vn-one>
-                <vn-one pad-medium-h>{{::ticket.boxes}}</vn-one>
-                <vn-none>
-                    <vn-icon icon="more" vn-tooltip tooltip-template="/static/templates/tooltip.locator.tpl.html" tooltip-position="left"></vn-icon>
-                </vn-none>
-            </vn-horizontal>
-        </vn-one>
-        <vn-horizontal vn-one class="list list-footer">
-            <vn-none></vn-none>
-            <vn-none></vn-none>
-            <vn-one pad-medium-h>
-                <span translate="Resultados"></span>:
-                <span>{{$ctrl.totalFilter}}</span>
-            </vn-one>
-            <vn-six></vn-six>
-            <vn-one pad-medium-h text-right>{{$ctrl.lines}}</vn-one>
-            <vn-one pad-medium-h text-right>{{$ctrl.meters}}</vn-one>
-            <vn-one></vn-one>
-            <vn-none></vn-none>
-        </vn-horizontal>
-        <vn-one>
-            <vn-paging page-change="$ctrl.searchTickets()" index="$ctrl.fakeIndex"  total="$ctrl.totalFilter"></vn-paging>
-        </vn-one>
+        <vn-production-table tickets="$ctrl.tickets" footer="$ctrl.footer"></vn-production-table>
     </vn-vertical>
 </vn-card>
\ No newline at end of file
diff --git a/client/production/src/index/index.js b/client/production/src/index/index.js
index 264f8ae3ad..b1755e0213 100644
--- a/client/production/src/index/index.js
+++ b/client/production/src/index/index.js
@@ -9,26 +9,21 @@ export default class ProductionIndex {
         this.vnPopover = vnPopover;
         this.vnApp = vnApp;
         this.$translate = $translate;
-        this.fakeIndex = {
-            filter: {
-                page: 1,
-                size: 25
-            }
-        };
-        this.order = {};
         this.filter = {};
-        this.order = {};
-
         this.tickets = [];
         this.states = [];
-        this.lines = 0;
-        this.meters = 0;
-        this.totalFilter = 0;
+        this.ticketsSelected = [];
         this.actions = {
             state: null,
             worker: null,
-            hour: null
+            hours: null
         };
+        this.footer = {
+            total: null,
+            lines: null,
+            meters: null
+        };
+
         this.hourItems = [];
         this.child = undefined;
         this.warehouse = {
@@ -71,20 +66,19 @@ export default class ProductionIndex {
 
     // End Actions Callbacks
     doAction(action) {
-        let checks = this.$element[0].querySelectorAll('.list-body input[type="checkbox"]:checked');
-        if (checks.length) {
-            let ids = [];
-            let index = [];
-            let tickets = [];
-            this.tickets.forEach(
-                (val, i) => {
-                    if (val.checked) {
-                        ids.push(val.ticketFk);
-                        index.push(i);
-                        tickets.push({ticketFk: val.ticketFk, salesPersonFk: val.salesPersonFk});
-                    }
+        let ids = [];
+        let index = [];
+        let tickets = [];
+        this.tickets.forEach(
+            (val, i) => {
+                if (val.checked) {
+                    ids.push(val.ticketFk);
+                    index.push(i);
+                    tickets.push({ticketFk: val.ticketFk, salesPersonFk: val.salesPersonFk});
                 }
-            );
+            }
+        );
+        if (tickets.length) {
             switch (action) {
             case 'changeState' :
                 this._changeState(ids, this.actions.state.id, this.actions.state.name, index);
@@ -115,7 +109,7 @@ export default class ProductionIndex {
         event.preventDefault();
     }
     onChildSubmit(filter) {
-        this.filterTickets(filter);
+        this.searchTickets(filter);
         this.onChildCancel();
     }
     onChildCancel() {
@@ -124,39 +118,28 @@ export default class ProductionIndex {
         delete this.child;
     }
     // END modals and actions modals
-    searchTickets() {
-        let filters = Object.assign({}, {
-            where: this.filter
-        }, {
-            page: this.fakeIndex.filter.page,
-            limit: this.fakeIndex.filter.size
-        });
-        if (this.order.field) {
-            filters.order = this.order.field + ' ' + this.order.dir;
-        }
-        this.$http.get('/production/api/FakeProductions/list?filter=' + JSON.stringify(filters)).then(
-            json => {
-                this.tickets = json.data.tickets;
-                this.lines = json.data.lines;
-                this.meters = json.data.m3;
-                this.totalFilter = json.data.total;
-                this.fakeIndex.model = json.data.tickets;
-            }
-        );
-    }
-    filterTickets(filter) {
+    searchTickets(filter) {
         if (filter) {
             this.filter = Object.assign({}, this.filter, filter);
         }
-        this.order = {field: null, dir: null};
-        this.fakeIndex.filter.page = 1;
-        this.fakeIndex.model = [];
-        this.searchTickets();
-    }
-    onOrder(field, dir) {
-        this.order = {field: field, dir: dir};
-        this.searchTickets();
+
+        let filters = Object.assign({}, {
+            where: this.filter
+        }, {
+            page: 1,
+            limit: 700
+        });
+
+        this.$http.get('/production/api/FakeProductions/list?filter=' + JSON.stringify(filters)).then(
+            json => {
+                this.tickets = json.data.tickets;
+                this.footer.lines = json.data.lines;
+                this.footer.meters = json.data.m3;
+                this.footer.total = json.data.total;
+            }
+        );
     }
+
     $doCheck() {
         if (this.actions.state) {
             this.doAction('changeState');
@@ -175,7 +158,7 @@ export default class ProductionIndex {
             hour += ':00';
             this.hourItems.push({id: i, name: hour});
         }
-        this.filterTickets();
+        this.searchTickets();
     }
 }
 ProductionIndex.$inject = ['$element', '$scope', '$http', 'vnPopover', 'vnApp', '$translate'];
diff --git a/client/production/src/index/style.scss b/client/production/src/index/style.scss
index a47cdc4b22..eea97e50e1 100644
--- a/client/production/src/index/style.scss
+++ b/client/production/src/index/style.scss
@@ -33,8 +33,4 @@ vn-production-index {
             width: 600px;
         }
     }
-    .list-content{    
-        height: 531px;
-        overflow-y: auto;
-    }
 }
\ No newline at end of file
diff --git a/client/production/src/production-table/production-table.html b/client/production/src/production-table/production-table.html
new file mode 100644
index 0000000000..29af2918ab
--- /dev/null
+++ b/client/production/src/production-table/production-table.html
@@ -0,0 +1,55 @@
+<vn-vertical>
+    <vn-grid-header on-order="$ctrl.onOrder(field, order)">
+        <vn-none min-none></vn-none>
+        <vn-colum-header vn-none min-none>
+            <vn-multi-check 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>
+        <vn-colum-header vn-two pad-medium-h field="salesPerson" text="Commercial"></vn-colum-header>
+        <vn-colum-header vn-one pad-medium-h field="hour" text="Hour"></vn-colum-header>
+        <vn-colum-header vn-one pad-medium-h field="state" text="State"></vn-colum-header>
+        <vn-colum-header vn-one pad-medium-h field="lines" text="Lines"></vn-colum-header>
+        <vn-colum-header vn-one pad-medium-h field="m3" text="m3"></vn-colum-header>
+        <vn-colum-header vn-one pad-medium-h field="boxes" text="Boxes"></vn-colum-header>
+        <vn-none min-none></vn-none>
+    </vn-grid-header>
+    <vn-one class="list list-content">
+        <vn-horizontal vn-one class="list list-element text-center" ng-repeat="ticket in $ctrl.pageTable.model track by ticket.id" ng-class="{warning: ticket.problem==='RIESGO'}">
+            <vn-none>
+                <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.checked"></vn-check>
+            </vn-none>
+            <vn-one pad-medium-h>{{::ticket.ticketFk}}</vn-one>
+            <vn-two pad-medium-h>{{::ticket.agency}}</vn-two>
+            <vn-two pad-medium-h>{{::ticket.salesPerson | ucwords}}</vn-two>
+            <vn-one pad-medium-h>{{ticket.hour}}</vn-one>
+            <vn-one pad-medium-h>{{ticket.state}}</vn-one>
+            <vn-one pad-medium-h>{{::ticket.lines}}</vn-one>
+            <vn-one pad-medium-h>{{::ticket.m3}}</vn-one>
+            <vn-one pad-medium-h>{{::ticket.boxes}}</vn-one>
+            <vn-none>
+                <vn-icon icon="more" vn-tooltip tooltip-template="/static/templates/tooltip.locator.tpl.html" tooltip-position="left"></vn-icon>
+            </vn-none>
+        </vn-horizontal>
+    </vn-one>
+    <vn-horizontal vn-one class="list list-footer">
+        <vn-none></vn-none>
+        <vn-none></vn-none>
+        <vn-one pad-medium-h>
+            <span translate="Resultados"></span>:
+            <span>{{$ctrl.footer.total}}</span>
+        </vn-one>
+        <vn-six></vn-six>
+        <vn-one pad-medium-h text-right>{{$ctrl.footer.lines}}</vn-one>
+        <vn-one pad-medium-h text-right>{{$ctrl.footer.meters}}</vn-one>
+        <vn-one></vn-one>
+        <vn-none></vn-none>
+    </vn-horizontal>
+
+        <vn-one>
+            <vn-paging page-change="$ctrl.pageTickets()" index="$ctrl.pageTable"  total="$ctrl.totalFilter"></vn-paging>
+        </vn-one>
+</vn-vertical>
\ No newline at end of file
diff --git a/client/production/src/production-table/production-table.js b/client/production/src/production-table/production-table.js
new file mode 100644
index 0000000000..e0ef06d666
--- /dev/null
+++ b/client/production/src/production-table/production-table.js
@@ -0,0 +1,48 @@
+import ngModule from '../module';
+
+export class ProductionTable {
+    constructor($filter) {
+        this.$filter = $filter;
+        this._tickets = [];
+        this.itemsDisplayedInList = 10;
+        this.pageTable = {
+            filter: {
+                page: 1,
+                size: this.itemsDisplayedInList
+            },
+            model: []
+        };
+    }
+    set tickets(value) {
+        this._tickets = value;
+        this.totalFilter = this._tickets.length;
+        this.pageTable.model = this._tickets.slice(0, this.itemsDisplayedInList);
+    }
+    get tickets() {
+        return this._tickets;
+    }
+    onOrder(field, order) {
+        let reverse = order === 'DESC';
+        this.tickets = this.$filter('orderBy')(this.tickets, field, reverse);
+        let init = (this.pageTable.filter.page - 1) * this.itemsDisplayedInList;
+        let fin = this.pageTable.filter.page * this.itemsDisplayedInList;
+        this.pageTable.model = this.tickets.slice(init, fin);
+    }
+    pageTickets() {
+        let init = (this.pageTable.filter.page - 1) * this.itemsDisplayedInList;
+        let fin = this.pageTable.filter.page * this.itemsDisplayedInList;
+        this.pageTable.model = this.tickets.slice(init, fin);
+    }
+}
+
+ProductionTable.$inject = ['$filter'];
+
+ngModule.component('vnProductionTable', {
+    template: require('./production-table.html'),
+    bindings: {
+        tickets: '=',
+        footer: '<',
+        selected: '='
+    },
+    controller: ProductionTable
+});
diff --git a/client/production/src/production.js b/client/production/src/production.js
index f9f4eeb081..a784a76ae2 100644
--- a/client/production/src/production.js
+++ b/client/production/src/production.js
@@ -4,4 +4,5 @@ export * from './module';
 // import components
 import './index/index';
 import './production-filters/production-filters';
-import './production-comment/production-comment';
+// import './production-comment/production-comment';
+import './production-table/production-table';
diff --git a/client/salix/src/styles/misc.scss b/client/salix/src/styles/misc.scss
index 6c2ca8eb71..67ffda0856 100644
--- a/client/salix/src/styles/misc.scss
+++ b/client/salix/src/styles/misc.scss
@@ -51,7 +51,7 @@ html [vn-center], .vn-center{
     min-width: 60px;
 }
 
-.list-body{
+.list-element{
     padding: 4px 0px;
     border-bottom: 1px solid $color-medium-grey;
     i {
@@ -67,7 +67,7 @@ html [vn-center], .vn-center{
         font-weight: bold;
         text-align: center
     }
-    .list-body{
+    .list-element{
         white-space: nowrap;
     }
 }
@@ -75,7 +75,7 @@ html [vn-center], .vn-center{
     font-weight: bold;
     border-top: 3px solid $color-medium-grey;
 }
-.list-body.warning{
+.list-element.warning{
     background-color: $color-orange;
     color:$color-white;
     font-weight: bold;

From bfdd8ecd8e89b4ead76817f74c248e816475b0b3 Mon Sep 17 00:00:00 2001
From: Dani Herrero <dherrero@alfatecsistemas.es>
Date: Wed, 28 Jun 2017 14:48:07 +0200
Subject: [PATCH 2/5] Localizador: acciones separadas a nuevo componente
 vnProductionActions

---
 client/core/src/grid-header/style.scss        |   1 -
 client/core/src/multi-check/multi-check.html  |   4 +-
 client/core/src/multi-check/multi-check.scss  |   2 +-
 client/production/src/index/index.html        |  18 +--
 client/production/src/index/index.js          | 102 +---------------
 .../production-actions.html                   |  16 +++
 .../production-actions/production-actions.js  | 113 ++++++++++++++++++
 .../src/production-table/production-table.js  |   2 +-
 client/production/src/production.js           |   2 +-
 client/salix/src/styles/misc.scss             |   2 +-
 10 files changed, 139 insertions(+), 123 deletions(-)
 create mode 100644 client/production/src/production-actions/production-actions.html
 create mode 100644 client/production/src/production-actions/production-actions.js

diff --git a/client/core/src/grid-header/style.scss b/client/core/src/grid-header/style.scss
index d7ee7cf46b..742c8e7d51 100644
--- a/client/core/src/grid-header/style.scss
+++ b/client/core/src/grid-header/style.scss
@@ -1,7 +1,6 @@
 vn-grid-header {
     border-bottom: 3px solid #9D9D9D;
     font-weight: bold;
-    padding-right: 13px;
     .orderly{
         cursor: pointer;
         text-align: center;
diff --git a/client/core/src/multi-check/multi-check.html b/client/core/src/multi-check/multi-check.html
index 0dce98a8a6..3ddd0e0a3b 100644
--- a/client/core/src/multi-check/multi-check.html
+++ b/client/core/src/multi-check/multi-check.html
@@ -1,11 +1,11 @@
-<vn-vertical vn-none class="multi-check {{$ctrl.className}}" tabindex="-1" ng-blur="$ctrl.showDropDown = false">
+<vn-vertical class="multi-check" vn-none class="multi-check {{$ctrl.className}}" tabindex="-1" ng-blur="$ctrl.showDropDown = false">
     <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-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>    
diff --git a/client/core/src/multi-check/multi-check.scss b/client/core/src/multi-check/multi-check.scss
index 4208164878..596a2e6f57 100644
--- a/client/core/src/multi-check/multi-check.scss
+++ b/client/core/src/multi-check/multi-check.scss
@@ -1,4 +1,4 @@
-vn-multi-check {
+.multi-check {
     vn-icon{
         cursor: pointer;
     }
diff --git a/client/production/src/index/index.html b/client/production/src/index/index.html
index 6ca4e261bd..e2bedbccc0 100644
--- a/client/production/src/index/index.html
+++ b/client/production/src/index/index.html
@@ -18,7 +18,6 @@
             <vn-one vn-horizontal>
                 <vn-one></vn-one>
                     <vn-autocomplete vn-two 
-                    initial-value="$ctrl.warehouse"
                     show-field="name"
                     value-field="id"
                     field="$ctrl.warehouseFk" 
@@ -30,22 +29,7 @@
         </vn-horizontal>
         <vn-horizontal vn-one margin-large-bottom>
             <vn-one>
-                <vn-horizontal class="actionPanel">
-                    <vn-button vn-none margin-medium-right label="Printed" ng-click="$ctrl.doAction('markPrinted')"></vn-button>
-                    <vn-none margin-medium-right>
-                        <vn-icon-menu icon="assignment" items="$ctrl.states" selected="$ctrl.actions.state"></vn-icon-menu>
-                    </vn-none>
-                    <vn-none margin-medium-right>
-                        <vn-icon-button icon="textsms" ng-click="$ctrl.doAction('addComment')"></vn-icon-button>
-                    </vn-none>
-                    <vn-none margin-medium-right>
-                        <vn-icon-menu icon="person" items="[{id:1,name:'trabajador 01'},{id:2,name:'trabajador 02'},{id:3,name:'trabajador 03'}]"
-                            selected="$ctrl.actions.worker"></vn-icon-menu>
-                    </vn-none>
-                    <vn-none margin-medium-right>
-                        <vn-icon-menu icon="query_builder" items="$ctrl.hourItems" selected="$ctrl.actions.hours"></vn-icon-menu>
-                    </vn-none>
-                </vn-horizontal>
+                <vn-production-actions tickets="$ctrl.tickets" states="$ctrl.states"></vn-production-actions>
             </vn-one>
             <vn-two></vn-two>
         </vn-horizontal>
diff --git a/client/production/src/index/index.js b/client/production/src/index/index.js
index b1755e0213..2a0dd6be2b 100644
--- a/client/production/src/index/index.js
+++ b/client/production/src/index/index.js
@@ -2,103 +2,23 @@ import ngModule from '../module';
 import './style.scss';
 
 export default class ProductionIndex {
-    constructor($element, $scope, $http, vnPopover, vnApp, $translate) {
+    constructor($element, $scope, $http, vnPopover) {
         this.$element = $element;
         this.$ = $scope;
         this.$http = $http;
         this.vnPopover = vnPopover;
-        this.vnApp = vnApp;
-        this.$translate = $translate;
         this.filter = {};
         this.tickets = [];
         this.states = [];
-        this.ticketsSelected = [];
-        this.actions = {
-            state: null,
-            worker: null,
-            hours: null
-        };
         this.footer = {
             total: null,
             lines: null,
             meters: null
         };
-
         this.hourItems = [];
         this.child = undefined;
-        this.warehouse = {
-            id: 1,
-            name: "Silla FV"
-        };
     }
 
-    // Actions Callbacks
-    _changeState(ids, sateteId, stateName, index) {
-        this.$http.put(`/production/api/TicketStates/${sateteId}/changeState`, {tickets: ids}).then(
-                () => {
-                    index.forEach(
-                        val => {
-                            this.tickets[val].state = stateName;
-                            this.tickets[val].stateFk = sateteId;
-                        }
-                    );
-                }
-            );
-    }
-    _sendMessage(tickets) {
-        this.$http.post(`/production/api/TicketStates/messageSend`, {tickets: tickets}).then(
-            () => {
-                this.vnApp.showMessage(this.$translate.instant('Success: message send!'));
-            }
-        );
-    }
-    _changeTime(ids, time, index) {
-        this.$http.put(`/production/api/changeTime?time=${time}`, {tickets: ids}).then(
-                () => {
-                    index.forEach(
-                        val => {
-                            this.tickets[val].hour = time;
-                        }
-                    );
-                }
-            );
-    }
-
-    // End Actions Callbacks
-    doAction(action) {
-        let ids = [];
-        let index = [];
-        let tickets = [];
-        this.tickets.forEach(
-            (val, i) => {
-                if (val.checked) {
-                    ids.push(val.ticketFk);
-                    index.push(i);
-                    tickets.push({ticketFk: val.ticketFk, salesPersonFk: val.salesPersonFk});
-                }
-            }
-        );
-        if (tickets.length) {
-            switch (action) {
-            case 'changeState' :
-                this._changeState(ids, this.actions.state.id, this.actions.state.name, index);
-                break;
-            case 'addComment':
-                this._sendMessage(tickets);
-                break;
-            case 'markPrinted':
-                this._changeState(ids, 4, 'Impreso', index);
-                break;
-            case 'changeTime':
-                this._changeTime(ids, this.actions.hours.name, index);
-                break;
-            }
-        } else {
-            this.vnApp.showMessage(this.$translate.instant('Error: No tickets selected!'));
-        }
-    }
-
-    // Start modals and actions modals
     moreFilters(event) {
         this.child = this.vnPopover.showComponent('vn-production-filter-panel', this.$, this.$element[0].querySelector('.filterPanel'));
         var childCtrl = angular.element(this.child).isolateScope().$ctrl;
@@ -117,19 +37,13 @@ export default class ProductionIndex {
         angular.element(this.child).remove();
         delete this.child;
     }
-    // END modals and actions modals
     searchTickets(filter) {
-        if (filter) {
-            this.filter = Object.assign({}, this.filter, filter);
-        }
-
         let filters = Object.assign({}, {
-            where: this.filter
+            where: Object.assign({}, filter, this.filter)
         }, {
             page: 1,
             limit: 700
         });
-
         this.$http.get('/production/api/FakeProductions/list?filter=' + JSON.stringify(filters)).then(
             json => {
                 this.tickets = json.data.tickets;
@@ -139,16 +53,6 @@ export default class ProductionIndex {
             }
         );
     }
-
-    $doCheck() {
-        if (this.actions.state) {
-            this.doAction('changeState');
-            this.actions.state = null;
-        } else if (this.actions.hours) {
-            this.doAction('changeTime');
-            this.actions.hours = null;
-        }
-    }
     $onInit() {
         for (let i = 6; i < 21; i++) {
             let hour = [i].join('');
@@ -161,7 +65,7 @@ export default class ProductionIndex {
         this.searchTickets();
     }
 }
-ProductionIndex.$inject = ['$element', '$scope', '$http', 'vnPopover', 'vnApp', '$translate'];
+ProductionIndex.$inject = ['$element', '$scope', '$http', 'vnPopover'];
 
 ngModule.component('vnProductionIndex', {
     template: require('./index.html'),
diff --git a/client/production/src/production-actions/production-actions.html b/client/production/src/production-actions/production-actions.html
new file mode 100644
index 0000000000..594d283189
--- /dev/null
+++ b/client/production/src/production-actions/production-actions.html
@@ -0,0 +1,16 @@
+<vn-horizontal class="actionPanel">
+    <vn-button vn-none margin-medium-right label="Printed" ng-click="$ctrl.doAction('markPrinted')"></vn-button>
+    <vn-none margin-medium-right>
+        <vn-icon-menu icon="assignment" items="$ctrl.states" selected="$ctrl.actionState"></vn-icon-menu>
+    </vn-none>
+    <vn-none margin-medium-right>
+        <vn-icon-button icon="textsms" ng-click="$ctrl.doAction('addComment')"></vn-icon-button>
+    </vn-none>
+    <vn-none margin-medium-right>
+        <vn-icon-menu icon="person" items="[{id:1,name:'trabajador 01'},{id:2,name:'trabajador 02'},{id:3,name:'trabajador 03'}]"
+            selected="$ctrl.actionWorker"></vn-icon-menu>
+    </vn-none>
+    <vn-none margin-medium-right>
+        <vn-icon-menu icon="query_builder" items="$ctrl.hourItems" selected="$ctrl.actionHours"></vn-icon-menu>
+    </vn-none>
+</vn-horizontal>
\ No newline at end of file
diff --git a/client/production/src/production-actions/production-actions.js b/client/production/src/production-actions/production-actions.js
new file mode 100644
index 0000000000..8e6df569eb
--- /dev/null
+++ b/client/production/src/production-actions/production-actions.js
@@ -0,0 +1,113 @@
+import ngModule from '../module';
+
+export default class ProductionActions {
+    constructor($http, $translate) {
+        this.$http = $http;
+        this.$translate = $translate;
+        
+        this._actionState = null;
+        this._actionWorker = null;
+        this._actionHours = null;
+    }
+
+    set actionState(value) {
+        this._actionState = value;
+        this.doAction('changeState');
+    }
+    get actionState() {
+        return this._actionState;
+    }
+
+    set actionHours(value) {
+        this._actionHours = value;
+        this.doAction('changeTime');
+    }
+    get actionHours() {
+        return this._actionHours;
+    }
+
+    set actionWorker(value) {
+        this._actionWorker = value;
+        this.doAction('changeWorker');
+    }
+    get actionWorker() {
+        return this._actionWorker;
+    }
+
+    _changeState(ids, sateteId, stateName, index) {
+        this.$http.put(`/production/api/TicketStates/${sateteId}/changeState`, {tickets: ids}).then(
+                () => {
+                    index.forEach(
+                        val => {
+                            this.tickets[val].state = stateName;
+                            this.tickets[val].stateFk = sateteId;
+                        }
+                    );
+                }
+            );
+    }
+    _sendMessage(tickets) {
+        this.$http.post(`/production/api/TicketStates/messageSend`, {tickets: tickets}).then(
+            () => {
+                this.vnApp.showMessage(this.$translate.instant('Success: message send!'));
+            }
+        );
+    }
+    _changeTime(ids, time, index) {
+        this.$http.put(`/production/api/changeTime?time=${time}`, {tickets: ids}).then(
+                () => {
+                    index.forEach(
+                        val => {
+                            this.tickets[val].hour = time;
+                        }
+                    );
+                }
+            );
+    }
+
+    doAction(actionName) {
+        let ids = [];
+        let index = [];
+        let tickets = [];
+        this.tickets.forEach(
+            (val, i) => {
+                if (val.checked) {
+                    ids.push(val.ticketFk);
+                    index.push(i);
+                    tickets.push({ticketFk: val.ticketFk, salesPersonFk: val.salesPersonFk});
+                }
+            }
+        );
+        if (tickets.length) {
+            switch (actionName) {
+            case 'changeState' :
+                this._changeState(ids, this.actionState.id, this.actionState.name, index);
+                break;
+            case 'addComment':
+                this._sendMessage(tickets);
+                break;
+            case 'markPrinted':
+                this._changeState(ids, 4, 'Impreso', index);
+                break;
+            case 'changeTime':
+                this._changeTime(ids, this.actionHours.name, index);
+                break;
+            default:
+                this.vnApp.showMessage(this.$translate.instant('Error: No jet implemented!'));
+            }
+        } else {
+            this.vnApp.showMessage(this.$translate.instant('Error: No tickets selected!'));
+        }
+    }
+}
+
+ProductionActions.$inject = ['$http', '$translate'];
+
+ngModule.component('vnProductionActions', {
+    template: require('./production-actions.html'),
+    bindings: {
+        tickets: '<',
+        states: '<'
+    },
+    controller: ProductionActions
+});
diff --git a/client/production/src/production-table/production-table.js b/client/production/src/production-table/production-table.js
index e0ef06d666..28d2e4be61 100644
--- a/client/production/src/production-table/production-table.js
+++ b/client/production/src/production-table/production-table.js
@@ -4,7 +4,7 @@ export class ProductionTable {
     constructor($filter) {
         this.$filter = $filter;
         this._tickets = [];
-        this.itemsDisplayedInList = 10;
+        this.itemsDisplayedInList = 14;
         this.pageTable = {
             filter: {
                 page: 1,
diff --git a/client/production/src/production.js b/client/production/src/production.js
index a784a76ae2..0a6b7c51d2 100644
--- a/client/production/src/production.js
+++ b/client/production/src/production.js
@@ -4,5 +4,5 @@ export * from './module';
 // import components
 import './index/index';
 import './production-filters/production-filters';
-// import './production-comment/production-comment';
+import './production-actions/production-actions';
 import './production-table/production-table';
diff --git a/client/salix/src/styles/misc.scss b/client/salix/src/styles/misc.scss
index 67ffda0856..bfeb6491bf 100644
--- a/client/salix/src/styles/misc.scss
+++ b/client/salix/src/styles/misc.scss
@@ -94,4 +94,4 @@ html [vn-center], .vn-center{
 }
 .flatpickr-month, .flatpickr-weekdays, span.flatpickr-weekday {
     background-color: $color-orange;
-}
\ No newline at end of file
+}

From 5b5523e6b6a3aca9ea068e86dd40bc6131b60d9c Mon Sep 17 00:00:00 2001
From: Dani Herrero <dherrero@alfatecsistemas.es>
Date: Wed, 28 Jun 2017 14:53:26 +0200
Subject: [PATCH 3/5] =?UTF-8?q?refactorizaci=C3=B3n=20vnProductionTable?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/production/src/production-table/production-table.js | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/client/production/src/production-table/production-table.js b/client/production/src/production-table/production-table.js
index 28d2e4be61..be1d9cb00e 100644
--- a/client/production/src/production-table/production-table.js
+++ b/client/production/src/production-table/production-table.js
@@ -24,9 +24,7 @@ export class ProductionTable {
     onOrder(field, order) {
         let reverse = order === 'DESC';
         this.tickets = this.$filter('orderBy')(this.tickets, field, reverse);
-        let init = (this.pageTable.filter.page - 1) * this.itemsDisplayedInList;
-        let fin = this.pageTable.filter.page * this.itemsDisplayedInList;
-        this.pageTable.model = this.tickets.slice(init, fin);
+        this.pageTickets();
     }
     pageTickets() {
         let init = (this.pageTable.filter.page - 1) * this.itemsDisplayedInList;

From 5e2be42247df4358a0d23991e0df7f3381ecce98 Mon Sep 17 00:00:00 2001
From: Dani Herrero <dherrero@alfatecsistemas.es>
Date: Wed, 28 Jun 2017 14:59:54 +0200
Subject: [PATCH 4/5] bugs fixed

---
 client/production/src/index/index.html                         | 2 +-
 client/production/src/production-actions/production-actions.js | 3 ++-
 client/production/src/production-table/production-table.js     | 3 +--
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/client/production/src/index/index.html b/client/production/src/index/index.html
index e2bedbccc0..d397720bfb 100644
--- a/client/production/src/index/index.html
+++ b/client/production/src/index/index.html
@@ -29,7 +29,7 @@
         </vn-horizontal>
         <vn-horizontal vn-one margin-large-bottom>
             <vn-one>
-                <vn-production-actions tickets="$ctrl.tickets" states="$ctrl.states"></vn-production-actions>
+                <vn-production-actions tickets="$ctrl.tickets" states="$ctrl.states" hour-items="$ctrl.hourItems"></vn-production-actions>
             </vn-one>
             <vn-two></vn-two>
         </vn-horizontal>
diff --git a/client/production/src/production-actions/production-actions.js b/client/production/src/production-actions/production-actions.js
index 8e6df569eb..56ca73ef5d 100644
--- a/client/production/src/production-actions/production-actions.js
+++ b/client/production/src/production-actions/production-actions.js
@@ -107,7 +107,8 @@ ngModule.component('vnProductionActions', {
     template: require('./production-actions.html'),
     bindings: {
         tickets: '<',
-        states: '<'
+        states: '<',
+        hourItems: '<'
     },
     controller: ProductionActions
 });
diff --git a/client/production/src/production-table/production-table.js b/client/production/src/production-table/production-table.js
index be1d9cb00e..5e2b5f9d5b 100644
--- a/client/production/src/production-table/production-table.js
+++ b/client/production/src/production-table/production-table.js
@@ -39,8 +39,7 @@ ngModule.component('vnProductionTable', {
     template: require('./production-table.html'),
     bindings: {
         tickets: '=',
-        footer: '<',
-        selected: '='
+        footer: '<'
     },
     controller: ProductionTable
 });

From df614b49435f7c5fc3854ebe6054b5f542179ecf Mon Sep 17 00:00:00 2001
From: Dani Herrero <dherrero@alfatecsistemas.es>
Date: Thu, 29 Jun 2017 08:13:30 +0200
Subject: [PATCH 5/5] bugs fixed

---
 client/core/src/drop-down/drop-down.html        |  1 +
 client/core/src/drop-down/drop-down.js          | 12 ++++++++++++
 client/core/src/icon-menu/icon-menu.html        |  2 +-
 client/core/src/icon-menu/icon-menu.js          |  4 ----
 client/core/src/locale/es.json                  |  3 ++-
 client/production/src/index/index.js            |  2 +-
 .../production-actions/production-actions.js    | 17 +++++++++--------
 .../src/production-table/production-table.js    |  3 ++-
 8 files changed, 28 insertions(+), 16 deletions(-)

diff --git a/client/core/src/drop-down/drop-down.html b/client/core/src/drop-down/drop-down.html
index 5c68ca3d2b..ef9b218c86 100644
--- a/client/core/src/drop-down/drop-down.html
+++ b/client/core/src/drop-down/drop-down.html
@@ -8,6 +8,7 @@
     <vn-one>
         <ul class="dropdown">
             <li ng-repeat="item in $ctrl.items | filter:search" ng-click="$ctrl.selected = item">{{::item.name}}</li>
+            <li ng-if="$ctrl.showLoadMore" class="dropdown__loadMore" ng-click="$ctrl.loadMore()" translate="Load More"></li>
         </ul>
     </vn-one>
 </vn-vertical>
\ No newline at end of file
diff --git a/client/core/src/drop-down/drop-down.js b/client/core/src/drop-down/drop-down.js
index f2a138d73a..2ab79c06cb 100644
--- a/client/core/src/drop-down/drop-down.js
+++ b/client/core/src/drop-down/drop-down.js
@@ -5,11 +5,22 @@ export default class DropDown {
     constructor($element, $scope) {
         this.$element = $element;
         this.$ = $scope;
+        this._showLoadMore = false;
     }
+    get showLoadMore() {
+        return this._showLoadMore;
+    }
+    set showLoadMore(value) {
+        this._showLoadMore = value;
+    }
+
     $onChanges(changesObj) {
         if (changesObj.show && changesObj.top && changesObj.top.currentValue) {
             this.$element.css('top', changesObj.top.currentValue + 'px');
         }
+        if (this.loadMore) {
+            this.showLoadMore = true;
+        }
     }
     clearSearch() {
         this.$.search = '';
@@ -28,6 +39,7 @@ module.component('vnDropDown', {
         show: '<',
         filter: '@?',
         selected: '=',
+        loadMore: '&?',
         top: '<?'
     }
 });
diff --git a/client/core/src/icon-menu/icon-menu.html b/client/core/src/icon-menu/icon-menu.html
index a48aac3d2e..4c49c44f6a 100644
--- a/client/core/src/icon-menu/icon-menu.html
+++ b/client/core/src/icon-menu/icon-menu.html
@@ -1,4 +1,4 @@
-<div class="icon-menu" ng-click="$ctrl.show()">
+<div class="icon-menu">
     <vn-icon-button icon="{{::$ctrl.icon}}"></vn-icon-button>
     <vn-drop-down items="$ctrl.items" show="$ctrl.showDropDown" selected="$ctrl.selected" filter="true"></vn-drop-down>
 </div>
\ No newline at end of file
diff --git a/client/core/src/icon-menu/icon-menu.js b/client/core/src/icon-menu/icon-menu.js
index b2a86827d5..bfb4f26608 100644
--- a/client/core/src/icon-menu/icon-menu.js
+++ b/client/core/src/icon-menu/icon-menu.js
@@ -14,10 +14,6 @@ export default class IconMenu {
     set showDropDown(value) {
         this._showDropDown = value;
     }
-    show() {
-     //   this._showDropDown = true;
-    }
-
     getItems() {
         this.$http.get(this.url).then(
             json => {
diff --git a/client/core/src/locale/es.json b/client/core/src/locale/es.json
index 96c2c716a0..1206d9157a 100644
--- a/client/core/src/locale/es.json
+++ b/client/core/src/locale/es.json
@@ -2,5 +2,6 @@
     "Accept": "Aceptar",
     "Cancel": "Cancelar",
     "Close": "Cerrar",
-    "Clear": "Borrar"
+    "Clear": "Borrar",
+    "Load More": "Cargar más"
 }
\ No newline at end of file
diff --git a/client/production/src/index/index.js b/client/production/src/index/index.js
index 2a0dd6be2b..01b6eca60a 100644
--- a/client/production/src/index/index.js
+++ b/client/production/src/index/index.js
@@ -54,7 +54,7 @@ export default class ProductionIndex {
         );
     }
     $onInit() {
-        for (let i = 6; i < 21; i++) {
+        for (let i = 1; i <= 24; i++) {
             let hour = [i].join('');
             if (hour.length === 1) {
                 hour = [0, i].join('');
diff --git a/client/production/src/production-actions/production-actions.js b/client/production/src/production-actions/production-actions.js
index 56ca73ef5d..d7c7d912b5 100644
--- a/client/production/src/production-actions/production-actions.js
+++ b/client/production/src/production-actions/production-actions.js
@@ -1,10 +1,11 @@
 import ngModule from '../module';
 
 export default class ProductionActions {
-    constructor($http, $translate) {
+    constructor($http, $translate, vnApp) {
         this.$http = $http;
         this.$translate = $translate;
-        
+        this.vnApp = vnApp;
+
         this._actionState = null;
         this._actionWorker = null;
         this._actionHours = null;
@@ -38,9 +39,9 @@ export default class ProductionActions {
         this.$http.put(`/production/api/TicketStates/${sateteId}/changeState`, {tickets: ids}).then(
                 () => {
                     index.forEach(
-                        val => {
-                            this.tickets[val].state = stateName;
-                            this.tickets[val].stateFk = sateteId;
+                        i => {
+                            this.tickets[i].state = stateName;
+                            this.tickets[i].stateFk = sateteId;
                         }
                     );
                 }
@@ -57,8 +58,8 @@ export default class ProductionActions {
         this.$http.put(`/production/api/changeTime?time=${time}`, {tickets: ids}).then(
                 () => {
                     index.forEach(
-                        val => {
-                            this.tickets[val].hour = time;
+                        i => {
+                            this.tickets[i].hour = time;
                         }
                     );
                 }
@@ -101,7 +102,7 @@ export default class ProductionActions {
     }
 }
 
-ProductionActions.$inject = ['$http', '$translate'];
+ProductionActions.$inject = ['$http', '$translate', 'vnApp'];
 
 ngModule.component('vnProductionActions', {
     template: require('./production-actions.html'),
diff --git a/client/production/src/production-table/production-table.js b/client/production/src/production-table/production-table.js
index 5e2b5f9d5b..a8dc794fc0 100644
--- a/client/production/src/production-table/production-table.js
+++ b/client/production/src/production-table/production-table.js
@@ -16,7 +16,8 @@ export class ProductionTable {
     set tickets(value) {
         this._tickets = value;
         this.totalFilter = this._tickets.length;
-        this.pageTable.model = this._tickets.slice(0, this.itemsDisplayedInList);
+        this.pageTable.filter.page = 1;
+        this.pageTickets();
     }
     get tickets() {
         return this._tickets;