interfaz gráfica y correcciones varias
This commit is contained in:
parent
491241398a
commit
f274335997
|
@ -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();
|
||||
});
|
||||
|
|
|
@ -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)
|
||||
|
|
|
@ -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);
|
||||
});
|
||||
|
||||
|
|
|
@ -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>
|
|
@ -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'];
|
||||
|
|
|
@ -0,0 +1,6 @@
|
|||
vn-production-filter-panel {
|
||||
button {
|
||||
color: #ffa410 !important;
|
||||
background-color: white !important;
|
||||
}
|
||||
}
|
|
@ -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>
|
||||
|
|
|
@ -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'),
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
}
|
Loading…
Reference in New Issue