arreglo en autocomplete para admitir valores por defecto

This commit is contained in:
Dani Herrero 2017-06-15 15:00:43 +02:00
parent 408b511e6d
commit bcdc31d8d9
16 changed files with 130 additions and 149 deletions

View File

@ -81,7 +81,7 @@ export default class Autocomplete extends Component {
&& !this.moreData
&& textFilter.substr(0, lastRequest.length) === lastRequest;
if (requestWillSame)
if (requestWillSame || !this.url)
this.localFilter(textFilter);
else if (this.url)
this.requestData(textFilter, false);

View File

@ -6,7 +6,7 @@ directive.$inject = ['$interpolate', '$compile', '$window'];
export function directive(interpolate, compile, $window) {
return {
restrict: 'A',
require: ['ngModel', '^^form'],
require: ['ngModel', '?^^form'],
link: link
};

View File

@ -1,3 +1,3 @@
<button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored icon-square {{$ctrl.className}}" {{$ctrl.enabled}}>
<vn-icon icon="{{$ctrl.icon}}"></vn-icon>{{$ctrl.label}}
<button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored icon-square {{::$ctrl.className}}" {{$ctrl.enabled}}>
<vn-icon icon="{{::$ctrl.icon}}"></vn-icon>{{::$ctrl.label}}
</button>

View File

@ -4,7 +4,7 @@ _module.component('vnIconButton', {
template: require('./icon-button.html'),
bindings: {
icon: '@',
className: '<?',
className: '@?',
enabled: '<?',
label: '@?'
}

View File

@ -1,4 +1,4 @@
<div class="icon-menu">
<vn-icon-button icon="{{im.icon}}"></vn-icon-button>
<vn-drop-down items="im.items" show="im.showDropDown" selected="im.selected" top="im.pos.bottom"></vn-drop-down>
<vn-icon-button icon="{{::$ctrl.icon}}"></vn-icon-button>
<vn-drop-down items="$ctrl.items" show="$ctrl.showDropDown" selected="$ctrl.selected"></vn-drop-down>
</div>

View File

@ -50,10 +50,9 @@ module.component('vnIconMenu', {
template: require('./icon-menu.html'),
bindings: {
url: '@?',
items: '=?',
items: '<?',
icon: '@',
selected: '='
},
controller: IconMenu,
controllerAs: 'im'
controller: IconMenu
});

View File

@ -2,9 +2,8 @@ import {module} from '../module';
import './style.css';
module.component('vnIcon', {
template: '<i class="material-icons">{{i.icon}}</i>',
template: '<i class="material-icons">{{::$ctrl.icon}}</i>',
bindings: {
icon: '@'
},
controllerAs: 'i'
}
});

View File

@ -16,9 +16,11 @@ export function directive(vnPopover) {
module.directive('vnPopover', directive);
export class Popover {
constructor($document, $compile) {
constructor($document, $compile, $timeout) {
this.document = $document[0];
this.$compile = $compile;
this.$timeout = $timeout;
this.removeScope = false;
}
show(childElement, parent) {
this.childElement = childElement;
@ -80,7 +82,8 @@ export class Popover {
}
showComponent(childComponent, $scope, parent) {
let childElement = this.document.createElement(childComponent);
this.$compile(childElement)($scope);
this.removeScope = true;
this.$compile(childElement)($scope.$new());
this.show(childElement, parent);
return childElement;
}
@ -93,7 +96,10 @@ export class Popover {
this.lastEvent = null;
this.docMouseDownHandler = null;
this.docKeyDownHandler = null;
angular.element(this.childElement).remove();
if (this.removeScope) {
angular.element(this.childElement).scope().$destroy();
angular.element(this.childElement).remove();
}
}
onDocMouseDown(event) {
if (event != this.lastEvent)
@ -107,5 +113,5 @@ export class Popover {
this.lastEvent = event;
}
}
Popover.$inject = ['$document', '$compile'];
Popover.$inject = ['$document', '$compile', '$timeout'];
module.service('vnPopover', Popover);

View File

@ -1,29 +0,0 @@
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('filter'));
if (value !== undefined)
this.filter = value;
}
setStorageValue() {
this.$window.sessionStorage.setItem('filter', JSON.stringify(this.filter));
}
}
Controller.$inject = ['$window'];
ngModule.component('vnProductionFilterPanel', {
template: require('./filter-panel.html'),
controller: Controller
});

View File

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

View File

@ -2,50 +2,38 @@
<mg-ajax path="/production/api/States/productionStates" options="vnIndex as states" actions="$ctrl.states = states.model.states;"></mg-ajax>
<vn-card margin-large>
<vn-vertical pad-medium>
<vn-horizontal vn-one margin-large-bottom class="locator-header">
<vn-vertical pad-medium>
<vn-horizontal vn-one margin-large-bottom class="locator-header">
<vn-title vn-one><span translate>Localizador</span></vn-title>
<vn-two vn-horizontal ng-init="moreFilters = false">
<vn-vertical vn-one>
<vn-horizontal vn-one>
<vn-autocomplete vn-one margin-medium-right
field="$ctrl.filter.stateFk"
data = "$ctrl.states"
label="Estado">
</vn-autocomplete>
<vn-autocomplete vn-one margin-medium-right
field="$ctrl.filter.alarmFk"
data = "$ctrl.states"
label="Alarma">
</vn-autocomplete>
<vn-autocomplete vn-one margin-medium-right
field="$ctrl.filter.agencyFk"
data = "$ctrl.states"
label="Agencias">
</vn-autocomplete>
<vn-icon vn-none margin-medium-right pad-medium-top icon="{{!moreFilters ? 'keyboard_arrow_down' : 'keyboard_arrow_up'}}" ng-click="moreFilters = !moreFilters"></vn-icon>
<vn-button vn-none pad-small-top label="Filtrar"></vn-button>
</vn-none>
</vn-horizontal>
<vn-horizontal vn-one ng-show="moreFilters" class="moreFilters">
<vn-production-filter-panel vn-one></vn-production-filter-panel>
</vn-horizontal>
</vn-vertical>
<vn-two vn-horizontal class="filterPanel">
<vn-autocomplete vn-one margin-medium-right field="$ctrl.filter.stateFk" data="$ctrl.states" label="Estado">
</vn-autocomplete>
<vn-autocomplete vn-one margin-medium-right field="$ctrl.filter.alarmFk" data="$ctrl.states" label="Alarma">
</vn-autocomplete>
<vn-autocomplete vn-one margin-medium-right field="$ctrl.filter.agencyFk" data="$ctrl.states" label="Agencias">
</vn-autocomplete>
<vn-icon
vn-none
margin-medium-right
pad-medium-top
icon="keyboard_arrow_down"
ng-click="$ctrl.moreFilters()">
</vn-icon>
<vn-button vn-none pad-small-top label="Filtrar"></vn-button>
</vn-two>
<vn-one vn-horizontal>
<vn-one></vn-one>
<vn-autocomplete vn-two
initial-value="$ctrl.warehouse"
field="$ctrl.warehouseFk"
url="/production/api/Warehouses/list"
label="Almacen">
</vn-autocomplete>
<vn-icon-button vn-none pad-ten-top icon="refresh"></vn-icon-button>
<vn-one></vn-one>
<vn-autocomplete vn-two
initial-value="$ctrl.warehouse"
field="$ctrl.warehouseFk" url="/production/api/Warehouses/list" label="Almacen">
</vn-autocomplete>
<vn-icon-button vn-none pad-ten-top icon="refresh"></vn-icon-button>
</vn-one>
</vn-horizontal>
<vn-horizontal vn-one margin-large-bottom>
<vn-one>
<vn-horizontal>
</vn-horizontal>
<vn-horizontal vn-one margin-large-bottom>
<vn-one>
<vn-horizontal>
<vn-button vn-none margin-medium-right label="Impreso"></vn-button>
<vn-none margin-medium-right>
<vn-icon-menu icon="assignment" items="$ctrl.states" selected="$ctrl.actions.state"></vn-icon-menu>
@ -54,61 +42,62 @@
<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-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-horizontal>
</vn-one>
<vn-two></vn-two>
</vn-horizontal>
<vn-horizontal vn-one class="list list-header">
<vn-none></vn-none>
<vn-none>
</vn-horizontal>
</vn-one>
<vn-two></vn-two>
</vn-horizontal>
<vn-horizontal vn-one class="list list-header">
<vn-none></vn-none>
<vn-none>
<vn-check model="$ctrl.checkAll"></vn-check>
</vn-none>
<vn-label vn-one text="ID Ticket"></vn-label>
<vn-label vn-two text="Agencia"></vn-label>
<vn-label vn-two text="Comercial"></vn-label>
<vn-label vn-one text="Hora"></vn-label>
<vn-label vn-one text="Estado"></vn-label>
<vn-label vn-one text="Lineas"></vn-label>
<vn-label vn-one text="m3"></vn-label>
<vn-label vn-one text="Cajas"></vn-label>
<vn-none></vn-none>
</vn-horizontal>
<vn-horizontal vn-one class="list list-body" ng-repeat="ticket in $ctrl.tickets track by $index" ng-class="{warning: ticket.problems==='RIESGO'}">
<vn-none>
</vn-none>
<vn-label vn-one text="ID Ticket"></vn-label>
<vn-label vn-two text="Agencia"></vn-label>
<vn-label vn-two text="Comercial"></vn-label>
<vn-label vn-one text="Hora"></vn-label>
<vn-label vn-one text="Estado"></vn-label>
<vn-label vn-one text="Lineas"></vn-label>
<vn-label vn-one text="m3"></vn-label>
<vn-label vn-one text="Cajas"></vn-label>
<vn-none></vn-none>
</vn-horizontal>
<vn-horizontal vn-one class="list list-body" ng-repeat="ticket in $ctrl.tickets track by $index" ng-class="{warning: ticket.problems==='RIESGO'}">
<vn-none>
<vn-icon margin-small-left icon="report_problem" ng-if="ticket.problems" vn-tooltip="{{::ticket.problems}}" tooltip-position="right"></vn-icon>
</vn-none>
<vn-none>
</vn-none>
<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-none>
<vn-icon icon="more" vn-tooltip tooltip-template="/static/templates/tooltip.locator.tpl.html" tooltip-position="left"></vn-icon>
</vn-none>
</vn-horizontal>
<vn-horizontal vn-one margin-large-bottom class="list list-footer">
<vn-none></vn-none>
<vn-none></vn-none>
<vn-one>
</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-none>
<vn-icon icon="more" vn-tooltip tooltip-template="/static/templates/tooltip.locator.tpl.html" tooltip-position="left"></vn-icon>
</vn-none>
</vn-horizontal>
<vn-horizontal vn-one margin-large-bottom class="list list-footer">
<vn-none></vn-none>
<vn-none></vn-none>
<vn-one>
<span translate="Resultados"></span>:
<span>{{$ctrl.tickets.length}}</span>
</vn-one>
<vn-six></vn-six>
<vn-one>{{$ctrl.lines}}</vn-one>
<vn-one>{{$ctrl.meters}}</vn-one>
<vn-one></vn-one>
<vn-none></vn-none>
</vn-horizontal>
</vn-vertical>
</vn-one>
<vn-six></vn-six>
<vn-one>{{$ctrl.lines}}</vn-one>
<vn-one>{{$ctrl.meters}}</vn-one>
<vn-one></vn-one>
<vn-none></vn-none>
</vn-horizontal>
</vn-vertical>
</vn-card>

View File

@ -2,10 +2,11 @@ import ngModule from '../module';
import './style.scss';
export default class ProductionIndex {
constructor($element, $scope, $http) {
constructor($element, $scope, $http, vnPopover) {
this.$element = $element;
this.$ = $scope;
this.$http = $http;
this.vnPopover = vnPopover;
this.filter = {};
this._checkAll = false;
this.tickets = [];
@ -99,8 +100,16 @@ export default class ProductionIndex {
this.hourItems.push({id: i, name: hour});
}
}
moreFilters(event) {
var child = this.vnPopover.showComponent('vn-production-filter-panel', this.$, this.$element[0].querySelector('.filterPanel'));
var childCtrl = angular.element(child).isolateScope().$ctrl;
childCtrl.filter = Object.assign({}, this.index.filter);
childCtrl.onSubmit = filter => this.onChildSubmit(filter);
event.preventDefault();
}
}
ProductionIndex.$inject = ['$element', '$scope', '$http'];
ProductionIndex.$inject = ['$element', '$scope', '$http', 'vnPopover'];
ngModule.component('vnProductionIndex', {
template: require('./index.html'),

View File

@ -1,5 +1,5 @@
<form ng-submit="$ctrl.onSearch()">
<form ng-submit="$ctrl.onSearch()" pad-large>
<vn-horizontal>
<vn-textfield vn-one label="ID Ruta" model="$ctrl.filter.ruteId"></vn-textfield>
<vn-date-picker vn-one label="Fecha" model="$ctrl.filter.date"></vn-date-picker>

View File

@ -0,0 +1,13 @@
import ngModule from '../module';
export default class Controller {
constructor($window) {
this.$window = $window;
}
}
Controller.$inject = ['$window'];
ngModule.component('vnProductionFilterPanel', {
template: require('./production-filters.html'),
controller: Controller
});

View File

@ -3,4 +3,4 @@ export * from './module';
// import components
import './index/index';
import './filter-panel/filter-panel';
import './production-filters/production-filters';

View File

@ -2,6 +2,7 @@
<vn-horizontal>
<vn-textfield vn-one label="Search" model="$ctrl.search"></vn-textfield>
<vn-icon
pad-medium-top
ng-if="$ctrl.advanced"
ng-click="$ctrl.onClick($event)"
icon="keyboard_arrow_down"