verdnatura/salix
verdnatura
/
salix
3
4
Fork 0
Code Issues Pull Requests 64 Releases Wiki Activity

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

This commit is contained in:
Dani Herrero 2017-06-14 09:54:00 +02:00
parent 7713d0bd6f
commit afff93cce6
9 changed files with 110 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
client/core/src/drop-down/style.scss
View File

@ -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;

5
client/core/src/tooltip/style.css
View File

@ -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%;

33
client/core/src/tooltip/tooltip.js
View File

@ -1,18 +1,41 @@
import {module} from '../module';
import './style.css';
tooltip.$inject = ['$document', '$compile'];
function tooltip($document, $compile) {
tooltip.$inject = ['$document', '$compile', '$sce', '$templateCache', '$http'];
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);

21
client/production/src/index/index.html
View File

@ -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>
<vn-icon-menu icon="assignment" items="$ctrl.states" selected="$ctrl.state"></vn-icon-menu>
<mg-ajax path="/production/api/States/productionStates" options="vnIndex as states"></mg-ajax>
<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>
@ -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>

32
client/production/src/index/index.js
View File

@ -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});
}
}
}

18
client/production/src/index/more-info-tooltip.tpl.html Normal file
View File

@ -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>

23
client/production/src/index/style.scss
View File

@ -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;
}
}
}

24
client/salix/src/styles/misc.scss
View File

@ -36,3 +36,27 @@ 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;
}
}

2
services/production/common/methods/ticket-state/change-state.js
View File

@ -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);