Tooltip: admite html, Localizador: añadido icono con información adicional

client/core/src/drop-down/style.scss

@@ -3,7 +3,7 @@ vn-drop-down {
     z-index: 9999;
     padding: 0 15px;
     margin-left: -15px;
-
+    background: transparent;
     ul{
         padding: 0;
         margin: 10px 0 0 0;

client/core/src/tooltip/style.css

@@ -6,7 +6,6 @@
     position: fixed;
     background-color: #fff;
     padding: 15px;
-    max-width: 250px;
     color: #424242;
     z-index: 999;
     border: 1px solid #A7A7A7;
@@ -23,6 +22,10 @@
     height: 0; 
 }
 
+.tooltip-text{
+    max-width: 250px;
+}
+
 .tooltip-down .tooltip-arrow {
     top: -15px;
     left: 50%;

client/core/src/tooltip/tooltip.js

@@ -1,18 +1,41 @@
 import {module} from '../module';
 import './style.css';
 
-tooltip.$inject = ['$document', '$compile'];
+tooltip.$inject = ['$document', '$compile', '$sce', '$templateCache', '$http'];
-function tooltip($document, $compile) {
+function tooltip($document, $compile, $sce, $templateCache, $http) {
+    function getTemplate(tooltipTemplateUrl) {
+        var template = $templateCache.get(tooltipTemplateUrl);
+        if (typeof template === 'undefined') {
+            template = $http.get(tooltipTemplateUrl).then(function onGetTemplateSuccess(response) {
+                return response.data;
+            });
+            $templateCache.put(tooltipTemplateUrl, template);
+        }
+        return template;
+    }
+
     return {
         restrict: 'A',
-        scope: true,
+        priority: -1,
         link: function(scope, element, attrs) {
-            var tip = $compile('<div class="mdl-shadow--2dp" ng-class="tipClass">{{ text }}<div class="tooltip-arrow"></div></div>')(scope);
+            var tip = $compile('<div class="mdl-shadow--2dp" ng-class="tipClass"><div class="tooltip-text">{{ text }}</div><div ng-if="isHtmlContent" ng-bind-html="htmlContent"></div><div class="tooltip-arrow"></div></div>')(scope);
             var tipClassName = 'tooltip';
             var tipActiveClassName = 'tooltip-show';
 
             scope.tipClass = [tipClassName];
-            scope.text = attrs.vnTooltip;
+            scope.text = attrs.vnTooltip || '';
+
+            if (attrs.tooltipHtml) {
+                scope.isHtmlContent = true;
+                scope.htmlContent = $sce.trustAsHtml(attrs.tooltipHtml);
+            } else if (attrs.tooltipTemplate) {
+                var template = getTemplate(attrs.tooltipTemplate);
+                scope.isHtmlContent = true;
+                scope.htmlContent = $sce.trustAsHtml(template);
+            } else {
+                scope.isHtmlContent = false;
+                scope.htmlContent = null;
+            }
 
             if (attrs.tooltipPosition) {
                 scope.tipClass.push('tooltip-' + attrs.tooltipPosition);

client/production/src/index/index.html

@@ -26,15 +26,18 @@
                <vn-horizontal>
                     <vn-button vn-none margin-medium-right label="Impreso"></vn-button>
                     <vn-none margin-medium-right>
-                        <mg-ajax path="/production/api/States/productionStates" options="vnIndex as states" actions="$ctrl.states = states.model.states"></mg-ajax>
+                        <mg-ajax path="/production/api/States/productionStates" options="vnIndex as states"></mg-ajax>
-                        <vn-icon-menu icon="assignment" items="$ctrl.states" selected="$ctrl.state"></vn-icon-menu> 
+                        <vn-icon-menu icon="assignment" items="states.model.states" selected="$ctrl.actions.state"></vn-icon-menu> 
                     </vn-none>
-                    <vn-none>
+                    <vn-none margin-medium-right>
-
+                        <vn-icon-menu icon="textsms" items="[{id:1,name:'prueba 01'},{id:2,name:'prueba 02'},{id:3,name:'prueba 03'}]" selected="$ctrl.actions.textsm"></vn-icon-menu> 
+                    </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-icon-button vn-none margin-medium-right icon="textsms"></vn-icon-button>
-                    <vn-icon-button vn-none margin-medium-right icon="person"></vn-icon-button>
-                    <vn-icon-button vn-none margin-medium-right icon="query_builder"></vn-icon-button>
                </vn-horizontal>
            </vn-one>
            <vn-two></vn-two>
@@ -56,7 +59,7 @@
        </vn-horizontal>
        <vn-horizontal vn-one class="list list-body" ng-repeat="ticket in $ctrl.tickets track by $index">
            <vn-none>
-               <vn-icon icon="report_problem" ng-if="ticket.problem" vn-tooltip="{{ticket.problem}}" tooltip-position="right"></vn-icon>
+                <vn-icon 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>
@@ -69,7 +72,9 @@
            <vn-one>{{::ticket.lines}}</vn-one>
            <vn-one>{{::ticket.m3}}</vn-one>
            <vn-one>{{::ticket.boxes}}</vn-one>
-           <vn-none></vn-none>
+           <vn-none>
+               <vn-icon icon="more" vn-tooltip tooltip-html="<vn-vertical><vn-one><vn-horizontal class='list list-header'><vn-one>Población</vn-one><vn-one>Provincia</vn-one><vn-one>ID_Cliente</vn-one><vn-one>Comercial</vn-one></vn-horizontal></vn-one><vn-one><vn-horizontal class='list list-body'><vn-one>{{ticket.city | ucwords}}</vn-one><vn-one>{{ticket.province | ucwords}}</vn-one><vn-one>{{ticket.client}}</vn-one><vn-one>{{ticket.salePerson | ucwords}}</vn-one></vn-horizontal></vn-one></vn-vertical>" tooltip-position="left"></vn-icon>
+           </vn-none>
        </vn-horizontal>
        <vn-horizontal vn-one margin-large-bottom class="list list-footer">
            <vn-none></vn-none>

client/production/src/index/index.js

@@ -10,7 +10,12 @@ export default class ProductionIndex {
         this.tickets = [];
         this.lines = 0;
         this.meters = 0;
-        this.state = null;
+        this.actions = {
+            state: null,
+            worker: null,
+            hour: null
+        };
+        this.hourItems = [];
     }
     get checkAll() {
         return this._checkAll;
@@ -19,12 +24,6 @@ export default class ProductionIndex {
         this._checkAll = value;
         this.switchChecks();
     }
-    /*get state() {
-        return this._state;
-    }
-    set state(value) {
-        this._state = value;
-    }*/
     switchChecks() {
         let checks = this.$element[0].querySelectorAll('.list-body input[type="checkbox"]');
         checks.forEach(
@@ -42,11 +41,10 @@ export default class ProductionIndex {
                 (_, i) => {
                     ids.push(this.tickets[i].ticket);
                     // Fake change state
-                    this.tickets[i].state = this.state.name;
+                    this.tickets[i].state = this.actions.state.name;
                 }
             );
-            console.log("TODO: call action -> endPoint with tickets's Ids", action, ids, this.state);
+            console.log("TODO: call action -> endPoint with tickets's Ids", action, ids, this.actions);
-            
             // TODO: call action -> endPoint with tickets's Ids
         } else {
             console.log("TODO: dialog with no items selected", action);
@@ -70,9 +68,19 @@ export default class ProductionIndex {
         this.$.index.accept();
     }
     $doCheck() {
-        if (this.state) {
+        if (this.actions.state) {
             this.doAction('changeState');
-            this.state = null;
+            this.actions.state = null;
+        }
+    }
+    $onInit() {
+        for (let i = 6; i < 21; i++) {
+            let hour = [i].join('');
+            if (hour.length === 1) {
+                hour = [0, i].join('');
+            }
+            hour += ':00';
+            this.hourItems.push({id: i, name: hour});
         }
     }
 }

client/production/src/index/more-info-tooltip.tpl.html

@@ -0,0 +1,18 @@
+<vn-vertical>
+    <vn-one>
+        <vn-horizontal  class="list list-header">
+            <vn-one>Población</vn-one>
+            <vn-one>Provincia</vn-one>
+            <vn-one>ID_Cliente</vn-one>
+            <vn-one>Comercial</vn-one>
+        </vn-horizontal>
+    </vn-one>
+    <vn-one>
+        <vn-horizontal  class="list list-body">
+            <vn-one>{{ticket.city}}</vn-one>
+            <vn-one>{{ticket.province}}</vn-one>
+            <vn-one>{{ticket.client}}</vn-one>
+            <vn-one>{{ticket.salePerson}}</vn-one>
+        </vn-horizontal>
+    </vn-one>
+</vn-vertical>

client/production/src/index/style.scss

@@ -17,27 +17,4 @@ vn-production-index {
     .icon-square{
         height: 36px;
     }
-    .list-header{
-        border-bottom: 3px solid #9D9D9D;
-        font-weight: bold;
-    }
-
-    .list-footer{
-        border-top: 3px solid #9D9D9D;
-        font-weight: bold;
-    }
-    .list > vn-one, .list > [vn-one], .list > [vn-two], .list > vn-two{
-        text-align: center;
-    }
-    .list > vn-none{
-        min-width: 60px;
-    }
-    .list-body{
-        padding: 4px 0px;
-        border-bottom: 1px solid #9D9D9D;
-
-        i {
-            color: #ffa410;
-        }
-    }
 }

client/salix/src/styles/misc.scss

@@ -35,4 +35,28 @@ html [vn-right], .vn-right{
 }
 html [vn-left], .vn-left{
      float: left;
+}
+
+.list-header{
+        border-bottom: 3px solid #9D9D9D;
+        font-weight: bold;
+    }
+
+.list-footer{
+    border-top: 3px solid #9D9D9D;
+    font-weight: bold;
+}
+.list > vn-one, .list > [vn-one], .list > [vn-two], .list > vn-two{
+    text-align: center;
+}
+.list > vn-none{
+    min-width: 60px;
+}
+.list-body{
+    padding: 4px 0px;
+    border-bottom: 1px solid #9D9D9D;
+
+    i {
+        color: #ffa410;
+    }
 }

services/production/common/methods/ticket-state/change-state.js

@@ -32,7 +32,7 @@ module.exports = function(TicketState) {
     };
 
     var changeState = function(tickets, state, cb){
-        TicketState.update(where(tickets), {"state": state}, function(error, response){
+        TicketState.updateAll(where(tickets), {"state": state}, function(error, response){
             if(!error)
                 cb(null, true);
             cb(error);