interfaz gráfica y correcciones varias

This commit is contained in:
Dani Herrero 2017-06-08 14:57:23 +02:00
parent 491241398a
commit f274335997
11 changed files with 114 additions and 26 deletions

View File

@ -7,8 +7,8 @@ import Flatpickr from 'vendor/src/flatpickr';
const _NAME = 'datePicker';
export const NAME = util.getName(_NAME);
directive.$inject = [resolveFactory.NAME, normalizerFactory.NAME, '$translate'];
export function directive(resolve, normalizer, $translate) {
directive.$inject = [resolveFactory.NAME, normalizerFactory.NAME, '$translate', '$document', '$transitions'];
export function directive(resolve, normalizer, $translate, $document, $transitions) {
return {
restrict: 'E',
template: function(_, attrs) {
@ -32,6 +32,13 @@ export function directive(resolve, normalizer, $translate) {
if (input)
vp = new Flatpickr(input, initOptions);
scope.$watch(attrs.model, () => {
let mdlField = element[0].firstChild.MaterialCheckbox;
if (mdlField)
mdlField.updateClasses_();
});
componentHandler.upgradeElement(element[0].firstChild);
element.on('$destroy', function() {
vp.destroy();
});

View File

@ -21,6 +21,7 @@ export class Popover {
this.$compile = $compile;
}
show(childElement, parent) {
this.childElement = childElement;
let popover = this.document.createElement('div');
popover.className = 'vn-popover';
popover.addEventListener('mousedown',
@ -81,6 +82,7 @@ export class Popover {
let childElement = this.document.createElement(childComponent);
this.$compile(childElement)($scope);
this.show(childElement, parent);
return childElement;
}
hide() {
if (!this.popover) return;
@ -91,6 +93,7 @@ export class Popover {
this.lastEvent = null;
this.docMouseDownHandler = null;
this.docKeyDownHandler = null;
angular.element(this.childElement).remove();
}
onDocMouseDown(event) {
if (event != this.lastEvent)

View File

@ -52,15 +52,15 @@ function tooltip($document, $compile) {
tip.css('left', offset.left + 'px');
});
element.bind('mouseout', function() {
element.on('mouseout', function() {
tip.removeClass(tipActiveClassName);
});
tip.bind('mouseover', function() {
tip.on('mouseover', function() {
tip.addClass(tipActiveClassName);
});
tip.bind('mouseout', function() {
tip.on('mouseout', function() {
tip.removeClass(tipActiveClassName);
});

View File

@ -13,11 +13,19 @@
value-field="id"
label="Provincia">
</vn-autocomplete>
<vn-date-picker vn-one label="Hora" ini-opts="{enableTime:true,noCalendar:true,dateFormat:'H:i',time_24hr:true}" model="$ctrl.filter.hour"></n-date-picker>
<vn-date-picker vn-one label="Hora" ini-opts="{enableTime:true,noCalendar:true,dateFormat:'H:i',time_24hr:true,static:true,minuteIncrement:30}" model="$ctrl.filter.hour"></n-date-picker>
</vn-horizontal>
<vn-horizontal>
<vn-check vn-one pad-medium-top label="Ticket con incidencia" field="$ctrl.filter.withIncidence"></vn-check>
<vn-textfield vn-one label="Agencia" model="$ctrl.filter.agency"></vn-textfield>
</vn-horizontal>
<vn-horizontal margin-medium-top>
<vn-one>
<vn-submit label="Filtrar"></vn-submit>
</vn-one>
<vn-one>
<vn-button vn-right label="Cancelar"></vn-button>
</vn-one>
</vn-horizontal>
</form>
</div>

View File

@ -1,20 +1,24 @@
import ngModule from '../module';
import './style.scss';
export default class Controller {
constructor($window) {
this.$window = $window;
}
/* $onDestroy() {
console.log('panel destruido');
}*/
onSearch() {
this.setStorageValue();
this.onSubmit(this.filter);
}
$onChanges() {
var value = JSON.parse(this.$window.sessionStorage.getItem('production'));
var value = JSON.parse(this.$window.sessionStorage.getItem('filter'));
if (value !== undefined)
this.filter = value;
}
setStorageValue() {
this.$window.sessionStorage.setItem('production', JSON.stringify(this.filter));
this.$window.sessionStorage.setItem('filter', JSON.stringify(this.filter));
}
}
Controller.$inject = ['$window'];

View File

@ -0,0 +1,6 @@
vn-production-filter-panel {
button {
color: #ffa410 !important;
background-color: white !important;
}
}

View File

@ -1,13 +1,13 @@
<mg-ajax path="/static/mockIndexProduction.json" options="vnIndex" actions="$ctrl.tickets = index.model;$ctrl.sumTickets()"></mg-ajax>
<vn-card margin-large>
<mg-ajax path="/static/mockIndexProduction.json" options="vnIndex" actions="$ctrl.tickets = index.model"></mg-ajax>
<vn-vertical pad-medium>
<vn-horizontal vn-one>
<vn-title vn-one><span translate>Localizador</span></vn-title>
<vn-searchbar vn-auto
index="index"
on-search="$ctrl.filter(index)"
on-search="$ctrl.onSearch(index)"
advanced="true"
search="$ctrl.model.filter"
search="$ctrl.filter.q"
popover="vn-production-filter-panel">
</vn-searchbar>
<vn-one vn-horizontal>
@ -18,9 +18,7 @@
url="/client/api/ContactChannels"
label="Almacen">
</vn-autocomplete>
<vn-none>
<vn-icon-button icon="refresh"></vn-icon-button>
</vn-none>
<vn-icon-button vn-none pad-ten-top icon="refresh"></vn-icon-button>
</vn-one>
</vn-horizontal>
<vn-horizontal vn-one margin-large-bottom>
@ -58,7 +56,7 @@
<vn-check model="ticket.cheched"></vn-check>
</vn-one>
<vn-one>{{ticket.id}}</vn-one>
<vn-one>{{ticket.agency.id}}</vn-one>
<vn-one>{{ticket.agency.name}}</vn-one>
<vn-one>{{ticket.employee.name}}</vn-one>
<vn-one>{{ticket.hour}}</vn-one>
<vn-one>{{ticket.state.name}}</vn-one>
@ -77,8 +75,8 @@
<vn-one></vn-one>
<vn-one></vn-one>
<vn-one></vn-one>
<vn-one></vn-one>
<vn-one></vn-one>
<vn-one>{{$ctrl.lines}}</vn-one>
<vn-one>{{$ctrl.meters}}</vn-one>
<vn-one></vn-one>
<vn-one></vn-one>
</vn-horizontal>

View File

@ -2,16 +2,63 @@ import ngModule from '../module';
import './style.scss';
export default class ProductionIndex {
constructor() {
this.model = {};
this.checkAll = false;
constructor($element, $scope) {
this.$element = $element;
this.$ = $scope;
this.filter = {};
this._checkAll = false;
this.tickets = [];
this.lines = 0;
this.meters = 0;
}
search(index) {
index.filter.search = this.model.search;
index.accept();
get checkAll() {
return this._checkAll;
}
set checkAll(value) {
this._checkAll = value;
this.switchChecks();
}
switchChecks() {
let checks = this.$element[0].querySelectorAll('.list-body input[type="checkbox"]');
checks.forEach(
(el, i) => {
el.checked = this._checkAll;
this.tickets[i].cheched = this._checkAll;
}
);
}
doAction(action) {
let checks = this.$element[0].querySelectorAll('.list-body input[type="checkbox"]:checked');
if (checks.length) {
let ids = [];
checks.forEach(
(_, i) => {
ids.push(this.tickets[i].id);
}
);
// TODO: call action -> endPoint with tickets's Ids
} else {
// TODO: dialog with no items selected
}
}
sumTickets() {
let lines = 0;
let meters = 0;
this.tickets.forEach(
val => {
lines += parseFloat(val.lines);
meters += parseFloat(val.meters);
}
);
this.lines = lines;
this.meters = meters.toFixed(2);
}
onSearch() {
this.$.index.filter = this.filter;
this.$.index.accept();
}
}
ProductionIndex.$inject = ['$element', '$scope'];
ngModule.component('vnProductionIndex', {
template: require('./index.html'),

View File

@ -3,6 +3,17 @@ vn-production-index {
height: 20px;
padding: 0 6px;
}
vn-searchbar {
vn-icon{
padding-top: 20px;
}
vn-icon-button{
padding-top: 10px;
}
}
[pad-ten-top] {
padding-top: 10px;
}
.icon-square{
height: 36px;
}

View File

@ -10,9 +10,7 @@ export default class Controller {
this.$window = $window;
}
onClick(event) {
var child = this.$document[0].createElement(this.popover);
this.$compile(child)(this.$scope);
this.vnPopover.show(child, this.element);
var child = this.vnPopover.showComponent(this.popover, this.$scope, this.element);
// XXX: ¿Existe una forma más adecuada de acceder al controlador de un componente?
var childCtrl = angular.element(child).isolateScope().$ctrl;

View File

@ -29,4 +29,10 @@ vn-button-bar {
}
html [text-center], .text-center {
text-align: center;
}
html [vn-right], .vn-right{
float: right;
}
html [vn-left], .vn-left{
float: left;
}