primera versión del componente vnGridHeader para ordenación de tablas

client/core/src/colum-header/colum-header.html

@@ -1,10 +1,10 @@
 <div class="{{$ctrl.className}}">
-    <vn-horizontal ng-if="$ctrl.text" class="orderly">
+    <vn-horizontal ng-if="$ctrl.text" class="orderly" ng-click="$ctrl.onClick()">
         <span translate>
             {{::$ctrl.text}}
         </span>
-        <vn-icon icon="keyboard_arrow_down" ng-if="$ctrl.showOrder && $ctrl.order === 'DESC'"></vn-icon>  
-        <vn-icon icon="keyboard_arrow_up" ng-if="$ctrl.showOrder && $ctrl.order === 'ASC'"></vn-icon>
+        <vn-icon icon="keyboard_arrow_down" ng-if="$ctrl.gridHeader.field === $ctrl.field && $ctrl.order === 'DESC'"></vn-icon>  
+        <vn-icon icon="keyboard_arrow_up" ng-if="$ctrl.gridHeader.field === $ctrl.field && $ctrl.order === 'ASC'"></vn-icon>
     </vn-horizontal>
     <ng-transclude ng-if="!$ctrl.text"></ng-transclude>
 </div>

client/core/src/colum-header/colum-header.js

@@ -1,40 +1,19 @@
 import {module} from '../module';
 
-export default class vnColumHeader {
-    constructor($element, $timeout, $transclude) {
-        this.$element = $element;
-        this.$timeout = $timeout;
-        this.order = null;
-        this.showOrder = false;
+export default class ColumHeader {
+    constructor() {
+        this.order = undefined;
     }
     onClick() {
-        switch (this.order) {
-        case 'ASC':
-            this.$timeout(() => {
-                this.showOrder = true;
-                this.order = 'DESC';
-               // this.gH.onOrder(this.field, this.order);
-            });
-            break;
-        default:
-            this.$timeout(() => {
-                this.showOrder = true;
-                this.order = 'ASC';
-            });
-            break;
-        }
-        this.$timeout(
-            () => {
-                this.showOrder = false;
-            }, 1000);
-    }
-    $onInit() {
-        if (this.field) {
-            this.$element.bind("click", () => this.onClick());
+        if (this.order === 'ASC') {
+            this.order = 'DESC';
+        } else {
+            this.order = 'ASC';
         }
+        this.gridHeader.selectColum(this);
     }
 }
-vnColumHeader.$inject = ['$element', '$timeout'];
+ColumHeader.$inject = [];
 
 module.component('vnColumHeader', {
     template: require('./colum-header.html'),
@@ -44,8 +23,8 @@ module.component('vnColumHeader', {
         className: '@?'
     },
     require: {
-        gH: '^vnGridHeader'
+        gridHeader: '^^vnGridHeader'
     },
-    controller: vnColumHeader,
+    controller: ColumHeader,
     transclude: true
 });

client/core/src/grid-header/grid-header.js

@@ -3,15 +3,24 @@ import './style.scss';
 
 export default class GridHeader {
     constructor() {
-        
+        this.field = undefined;
+        this.order = undefined;
     }
+
+    selectColum(col) {
+        this.field = col.field;
+        this.order = col.order;
+        if (this.onOrder)
+            this.onOrder(this);
+    }
+
 }
 
 module.component('vnGridHeader', {
     template: require('./grid-header.html'),
     transclude: true,
-    binding: {
+    bindings: {
         onOrder: '&?'
     },
-    component: GridHeader
+    controller: GridHeader
 });

client/core/src/grid-header/style.scss

@@ -3,7 +3,6 @@ vn-grid-header {
     font-weight: bold;
     .orderly{
         cursor: pointer;
-        text-align: center;
     }
     vn-none{
         min-width: 60px;

client/production/src/index/index.html

@@ -1,5 +1,5 @@
 <mg-ajax path="/production/api/Tickets/list" options="vnIndex" actions="$ctrl.tickets = index.model.tickets;$ctrl.sumTickets()"></mg-ajax>
-<mg-ajax path="/production/api/States/productionStates" options="vnIndex as states" actions="$ctrl.states = states.model.states;"></mg-ajax>
+
 
 <vn-card margin-large>
     <vn-vertical pad-medium>
@@ -53,7 +53,7 @@
             <vn-two></vn-two>
         </vn-horizontal>
 
-        <vn-grid-header on-order="$ctrl.onOrder">
+        <vn-grid-header on-order="$ctrl.onOrder(field, order)">
             <vn-none></vn-none>
             <vn-colum-header vn-none>
                 <vn-check model="$ctrl.checkAll"></vn-check>