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 && !this.moreData
&& textFilter.substr(0, lastRequest.length) === lastRequest; && textFilter.substr(0, lastRequest.length) === lastRequest;
if (requestWillSame) if (requestWillSame || !this.url)
this.localFilter(textFilter); this.localFilter(textFilter);
else if (this.url) else if (this.url)
this.requestData(textFilter, false); this.requestData(textFilter, false);

View File

@ -6,7 +6,7 @@ directive.$inject = ['$interpolate', '$compile', '$window'];
export function directive(interpolate, compile, $window) { export function directive(interpolate, compile, $window) {
return { return {
restrict: 'A', restrict: 'A',
require: ['ngModel', '^^form'], require: ['ngModel', '?^^form'],
link: link 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}}> <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}} <vn-icon icon="{{::$ctrl.icon}}"></vn-icon>{{::$ctrl.label}}
</button> </button>

View File

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

View File

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

View File

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

View File

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

View File

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

@ -5,40 +5,28 @@
<vn-vertical pad-medium> <vn-vertical pad-medium>
<vn-horizontal vn-one margin-large-bottom class="locator-header"> <vn-horizontal vn-one margin-large-bottom class="locator-header">
<vn-title vn-one><span translate>Localizador</span></vn-title> <vn-title vn-one><span translate>Localizador</span></vn-title>
<vn-two vn-horizontal ng-init="moreFilters = false">
<vn-vertical vn-one> <vn-two vn-horizontal class="filterPanel">
<vn-horizontal vn-one> <vn-autocomplete vn-one margin-medium-right field="$ctrl.filter.stateFk" data="$ctrl.states" label="Estado">
<vn-autocomplete vn-one margin-medium-right
field="$ctrl.filter.stateFk"
data = "$ctrl.states"
label="Estado">
</vn-autocomplete> </vn-autocomplete>
<vn-autocomplete vn-one margin-medium-right <vn-autocomplete vn-one margin-medium-right field="$ctrl.filter.alarmFk" data="$ctrl.states" label="Alarma">
field="$ctrl.filter.alarmFk"
data = "$ctrl.states"
label="Alarma">
</vn-autocomplete> </vn-autocomplete>
<vn-autocomplete vn-one margin-medium-right <vn-autocomplete vn-one margin-medium-right field="$ctrl.filter.agencyFk" data="$ctrl.states" label="Agencias">
field="$ctrl.filter.agencyFk"
data = "$ctrl.states"
label="Agencias">
</vn-autocomplete> </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-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-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-two>
<vn-one vn-horizontal> <vn-one vn-horizontal>
<vn-one></vn-one> <vn-one></vn-one>
<vn-autocomplete vn-two <vn-autocomplete vn-two
initial-value="$ctrl.warehouse" initial-value="$ctrl.warehouse"
field="$ctrl.warehouseFk" field="$ctrl.warehouseFk" url="/production/api/Warehouses/list" label="Almacen">
url="/production/api/Warehouses/list"
label="Almacen">
</vn-autocomplete> </vn-autocomplete>
<vn-icon-button vn-none pad-ten-top icon="refresh"></vn-icon-button> <vn-icon-button vn-none pad-ten-top icon="refresh"></vn-icon-button>
</vn-one> </vn-one>
@ -54,7 +42,8 @@
<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-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>
<vn-none margin-medium-right> <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>
<vn-none margin-medium-right> <vn-none margin-medium-right>
<vn-icon-menu icon="query_builder" items="$ctrl.hourItems" selected="$ctrl.actions.hours"></vn-icon-menu> <vn-icon-menu icon="query_builder" items="$ctrl.hourItems" selected="$ctrl.actions.hours"></vn-icon-menu>

View File

@ -2,10 +2,11 @@ import ngModule from '../module';
import './style.scss'; import './style.scss';
export default class ProductionIndex { export default class ProductionIndex {
constructor($element, $scope, $http) { constructor($element, $scope, $http, vnPopover) {
this.$element = $element; this.$element = $element;
this.$ = $scope; this.$ = $scope;
this.$http = $http; this.$http = $http;
this.vnPopover = vnPopover;
this.filter = {}; this.filter = {};
this._checkAll = false; this._checkAll = false;
this.tickets = []; this.tickets = [];
@ -99,8 +100,16 @@ export default class ProductionIndex {
this.hourItems.push({id: i, name: hour}); 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', { ngModule.component('vnProductionIndex', {
template: require('./index.html'), 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-horizontal>
<vn-textfield vn-one label="ID Ruta" model="$ctrl.filter.ruteId"></vn-textfield> <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> <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 components
import './index/index'; import './index/index';
import './filter-panel/filter-panel'; import './production-filters/production-filters';

View File

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