From 05b6c81a1bf9a84187d5276a12c0547f70930bf5 Mon Sep 17 00:00:00 2001
From: Dani Herrero <dherrero@alfatecsistemas.es>
Date: Wed, 21 Jun 2017 13:16:37 +0200
Subject: [PATCH] dropDown con filtro

---
 .../core/src/colum-header/colum-header.html   | 10 ++++----
 client/core/src/drop-down/drop-down.html      |  8 +++++--
 client/core/src/drop-down/drop-down.js        |  4 ++--
 client/core/src/drop-down/style.scss          | 23 ++++++++++++++++++-
 client/core/src/grid-header/grid-header.html  |  2 +-
 client/core/src/grid-header/grid-header.js    | 11 +++++----
 client/core/src/grid-header/style.scss        | 21 +++++++++++++----
 client/core/src/icon-menu/icon-menu.html      |  2 +-
 client/production/src/index/index.html        | 21 +++++++++--------
 client/production/src/index/index.js          |  2 +-
 client/salix/src/styles/misc.scss             | 21 ++++++++---------
 11 files changed, 82 insertions(+), 43 deletions(-)

diff --git a/client/core/src/colum-header/colum-header.html b/client/core/src/colum-header/colum-header.html
index ba59d4d00..286a6774a 100644
--- a/client/core/src/colum-header/colum-header.html
+++ b/client/core/src/colum-header/colum-header.html
@@ -1,10 +1,12 @@
 <div class="{{$ctrl.className}}">
     <vn-horizontal ng-if="$ctrl.text" class="orderly" ng-click="$ctrl.onClick()">
-        <span translate>
+        <vn-none class="title" translate>
             {{::$ctrl.text}}
-        </span>
-        <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-none>
+        <vn-none>
+            <vn-icon icon="keyboard_arrow_down" ng-if="$ctrl.gridHeader.currentColumn.field === $ctrl.field && $ctrl.order === 'DESC'"></vn-icon>  
+            <vn-icon icon="keyboard_arrow_up" ng-if="$ctrl.gridHeader.currentColumn.field === $ctrl.field && $ctrl.order === 'ASC'"></vn-icon>
+        </vn-none>
     </vn-horizontal>
     <ng-transclude ng-if="!$ctrl.text"></ng-transclude>
 </div>
\ No newline at end of file
diff --git a/client/core/src/drop-down/drop-down.html b/client/core/src/drop-down/drop-down.html
index c448520fa..59d312a6e 100644
--- a/client/core/src/drop-down/drop-down.html
+++ b/client/core/src/drop-down/drop-down.html
@@ -1,3 +1,7 @@
-<ul class="dropdown" ng-if="dd.show">
-    <li ng-repeat="item in ::dd.items track by $index" ng-click="dd.selected = item">{{::item.name}}</li>
+<ul class="dropdown" ng-show="$ctrl.show" ng-init="search = ''">
+    <li ng-show="$ctrl.filter" class="filter">
+        <input placeholder="{{'Search' | translate}}" type="text" ng-model="search"/>
+        <vn-icon icon="clear" ng-click="search = ''"></vn-icon>
+    </li>
+    <li ng-repeat="item in $ctrl.items | filter:search" ng-click="$ctrl.selected = item">{{::item.name}}</li>
 </ul>
\ 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 b9c7b6b15..de7f6f648 100644
--- a/client/core/src/drop-down/drop-down.js
+++ b/client/core/src/drop-down/drop-down.js
@@ -19,8 +19,8 @@ module.component('vnDropDown', {
     bindings: {
         items: '<',
         show: '<',
+        filter: '@?',
         selected: '=',
         top: '<?'
-    },
-    controllerAs: 'dd'
+    }
 });
diff --git a/client/core/src/drop-down/style.scss b/client/core/src/drop-down/style.scss
index 4f592be75..70e5a43fb 100644
--- a/client/core/src/drop-down/style.scss
+++ b/client/core/src/drop-down/style.scss
@@ -11,13 +11,34 @@ vn-drop-down {
         border: 1px solid #A7A7A7;
         li {
             list-style-type: none;
-            padding: 5px 20px 5px 5px;
+            padding: 5px 10px;
             cursor: pointer;
             white-space: nowrap;
+            &.filter{
+                padding: 5px;
+                input{
+                    height: 25px;
+                    padding-left: 5px;
+                }
+                vn-icon{
+                    font-size: 16px;
+                    position: absolute;
+                    margin-left: -20px;
+                    margin-top: 7px;
+                }
+            }
         }
         li:hover{
             background-color: #3D3A3B;
             color: white;
+            &.filter{
+                vn-icon{
+                    color: #3D3A3B;
+                    &:hover{
+                        color: red;
+                    }
+                }
+            }
         }
     }
 }
\ No newline at end of file
diff --git a/client/core/src/grid-header/grid-header.html b/client/core/src/grid-header/grid-header.html
index 6956dafb3..02c0e4101 100644
--- a/client/core/src/grid-header/grid-header.html
+++ b/client/core/src/grid-header/grid-header.html
@@ -1 +1 @@
-<vn-horizontal ng-transclude></vn-horizontal>
\ No newline at end of file
+<vn-horizontal class="list" ng-transclude></vn-horizontal>
\ No newline at end of file
diff --git a/client/core/src/grid-header/grid-header.js b/client/core/src/grid-header/grid-header.js
index a2feca2f3..3f8bd7292 100644
--- a/client/core/src/grid-header/grid-header.js
+++ b/client/core/src/grid-header/grid-header.js
@@ -3,15 +3,16 @@ import './style.scss';
 
 export default class GridHeader {
     constructor() {
-        this.field = undefined;
-        this.order = undefined;
+        this.currentColumn = undefined;
     }
 
     selectColum(col) {
-        this.field = col.field;
-        this.order = col.order;
+        if (this.currentColumn && this.currentColumn.field != col.field)
+            this.currentColumn.order = undefined;
+
+        this.currentColumn = col;
         if (this.onOrder)
-            this.onOrder(this);
+            this.onOrder(this.currentColumn);
     }
 
 }
diff --git a/client/core/src/grid-header/style.scss b/client/core/src/grid-header/style.scss
index 3a933e295..2380df4d1 100644
--- a/client/core/src/grid-header/style.scss
+++ b/client/core/src/grid-header/style.scss
@@ -3,11 +3,24 @@ vn-grid-header {
     font-weight: bold;
     .orderly{
         cursor: pointer;
-    }
-    vn-none{
-        min-width: 60px;
+        text-align: center;
+        white-space: nowrap;
+        justify-content: center;
+        vn-none{
+            min-width: 16px;
+        }
     }
     vn-icon{
-        line-height: 17px;
+        line-height: 16px;
+        font-size: 16px;
+        margin: 0;
+        padding: 0;
+        display: inline;
+        i {
+            padding-top: 3px;
+        }
     }
+}
+vn-grid-header > vn-horizontal > vn-none {
+    min-width: 60px;
 }
\ No newline at end of file
diff --git a/client/core/src/icon-menu/icon-menu.html b/client/core/src/icon-menu/icon-menu.html
index 03d88046c..4c49c44f6 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">
     <vn-icon-button icon="{{::$ctrl.icon}}"></vn-icon-button>
-    <vn-drop-down items="$ctrl.items" show="$ctrl.showDropDown" selected="$ctrl.selected"></vn-drop-down>
+    <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/production/src/index/index.html b/client/production/src/index/index.html
index 51037562f..949875d96 100644
--- a/client/production/src/index/index.html
+++ b/client/production/src/index/index.html
@@ -1,5 +1,6 @@
+<!--<mg-ajax path="/production/api/FakeProductions/list" options="vnIndex" actions="$ctrl.tickets = index.model;$ctrl.sumTickets()"></mg-ajax>-->
 <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/list" options="vnIndex as states" actions="$ctrl.states = states.model;"></mg-ajax>
 
 <vn-card margin-large>
     <vn-vertical pad-medium>
@@ -58,7 +59,7 @@
             <vn-colum-header vn-none>
                 <vn-check model="$ctrl.checkAll"></vn-check>
             </vn-colum-header>
-            <vn-colum-header vn-one field="ticket" text="ID Ticket"></vn-colum-header>
+            <vn-colum-header text-right vn-one field="ticket" text="ID Ticket"></vn-colum-header>
             <vn-colum-header vn-two field="agency" text="Agency"></vn-colum-header>
             <vn-colum-header vn-two field="salePerson" text="Commercial"></vn-colum-header>
             <vn-colum-header vn-one field="hour" text="Hour"></vn-colum-header>
@@ -76,14 +77,14 @@
             <vn-none>
                 <vn-check model="ticket.cheched"></vn-check>
             </vn-none>
-            <vn-one>{{::ticket.ticket}}</vn-one>
-            <vn-two>{{::ticket.agency}}</vn-two>
-            <vn-two>{{::ticket.salePerson | ucwords}}</vn-two>
-            <vn-one>{{::ticket.hour}}</vn-one>
-            <vn-one>{{ticket.state}}</vn-one>
-            <vn-one>{{::ticket.lines}}</vn-one>
-            <vn-one>{{::ticket.m3}}</vn-one>
-            <vn-one>{{::ticket.boxes}}</vn-one>
+            <vn-one pad-medium-h text-right>{{::ticket.ticket}}</vn-one>
+            <vn-two pad-medium-h text-left>{{::ticket.agency}}</vn-two>
+            <vn-two pad-medium-h text-left>{{::ticket.salePerson | ucwords}}</vn-two>
+            <vn-one pad-medium-h text-right>{{::ticket.hour}}</vn-one>
+            <vn-one text-center>{{ticket.state}}</vn-one>
+            <vn-one pad-medium-h text-right>{{::ticket.lines}}</vn-one>
+            <vn-one pad-medium-h text-right>{{::ticket.m3}}</vn-one>
+            <vn-one pad-medium-h text-right>{{::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>
diff --git a/client/production/src/index/index.js b/client/production/src/index/index.js
index e5904aab6..f4c1e939f 100644
--- a/client/production/src/index/index.js
+++ b/client/production/src/index/index.js
@@ -133,7 +133,7 @@ export default class ProductionIndex {
     }
     // END modals and actions modals
     onOrder(field, dir) {
-        console.log('order by', field, dir);
+        console.log('TODO: call rest api order by', field, dir);
     }
     $doCheck() {
         if (this.actions.state) {
diff --git a/client/salix/src/styles/misc.scss b/client/salix/src/styles/misc.scss
index 2823fe4ea..d870a496c 100644
--- a/client/salix/src/styles/misc.scss
+++ b/client/salix/src/styles/misc.scss
@@ -31,25 +31,22 @@ vn-button-bar {
 html [text-center], .text-center {
     text-align: center;
 }
+html [text-right], .text-right{
+    text-align: right;
+}
+html [text-left], .text-left{
+    text-align: left;
+}
 html [vn-right], .vn-right{
      float: right;
 }
 html [vn-left], .vn-left{
      float: left;
 }
-
-.list-header{
-        border-bottom: 3px solid $color-medium-grey;
-        font-weight: bold;
-    }
-
-.list-footer{
-    border-top: 3px solid $color-medium-grey;
-    font-weight: bold;
-}
-.list > vn-one, .list > [vn-one], .list > [vn-two], .list > vn-two{
-    text-align: center;
+html [vn-center], .vn-center{
+     justify-content: center;
 }
+
 .list > vn-none{
     min-width: 60px;
 }