iconMenu arreglo de posicion del DropDown interno
This commit is contained in:
parent
f346e5e83c
commit
5f2aa345ba
|
@ -10,7 +10,7 @@ export default class Autocomplete extends Component {
|
||||||
super($element);
|
super($element);
|
||||||
this.input = $element[0].querySelector('input');
|
this.input = $element[0].querySelector('input');
|
||||||
this.item = null;
|
this.item = null;
|
||||||
this.data = null;
|
// this.data = null;
|
||||||
this.popover = null;
|
this.popover = null;
|
||||||
this.displayData = null;
|
this.displayData = null;
|
||||||
this.timeoutId = null;
|
this.timeoutId = null;
|
||||||
|
@ -83,8 +83,10 @@ export default class Autocomplete extends Component {
|
||||||
|
|
||||||
if (requestWillSame)
|
if (requestWillSame)
|
||||||
this.localFilter(textFilter);
|
this.localFilter(textFilter);
|
||||||
else
|
else if (this.url)
|
||||||
this.requestData(textFilter, false);
|
this.requestData(textFilter, false);
|
||||||
|
else
|
||||||
|
this.setDisplayData(this.data);
|
||||||
}
|
}
|
||||||
getRequestFields() {
|
getRequestFields() {
|
||||||
let fields = {};
|
let fields = {};
|
||||||
|
@ -402,11 +404,12 @@ Autocomplete.$inject = ['$element', '$scope', '$http', 'vnPopover', '$transclude
|
||||||
module.component('vnAutocomplete', {
|
module.component('vnAutocomplete', {
|
||||||
template: require('./autocomplete.html'),
|
template: require('./autocomplete.html'),
|
||||||
bindings: {
|
bindings: {
|
||||||
url: '@',
|
url: '@?',
|
||||||
showField: '@?',
|
showField: '@?',
|
||||||
valueField: '@?',
|
valueField: '@?',
|
||||||
selectFields: '@?',
|
selectFields: '@?',
|
||||||
initialData: '<?',
|
initialData: '<?',
|
||||||
|
data: '<?',
|
||||||
itemAs: '@?',
|
itemAs: '@?',
|
||||||
field: '=',
|
field: '=',
|
||||||
label: '@'
|
label: '@'
|
||||||
|
|
|
@ -29,7 +29,7 @@ export {NAME as TEXTAREA_MDL, factory as textareaMdl} from './textarea/textarea.
|
||||||
export {NAME as LABEL, directive as LabelDirective} from './label/label';
|
export {NAME as LABEL, directive as LabelDirective} from './label/label';
|
||||||
export {NAME as LABEL_MDL, factory as labelMdl} from './label/label.mdl';
|
export {NAME as LABEL_MDL, factory as labelMdl} from './label/label.mdl';
|
||||||
export {NAME as ICON_BUTTON, directive as IconButtonDirective} from './icon-button/icon-button';
|
export {NAME as ICON_BUTTON, directive as IconButtonDirective} from './icon-button/icon-button';
|
||||||
export {NAME as ICON_BUTTON_MDL, factory as iconButtonMdl} from './icon-button/icon-button.mdl';
|
|
||||||
export {NAME as SUBMIT, directive as SubmitDirective} from './submit/submit';
|
export {NAME as SUBMIT, directive as SubmitDirective} from './submit/submit';
|
||||||
export {NAME as SUBMIT_MDL, factory as submitMdl} from './submit/submit.mdl';
|
export {NAME as SUBMIT_MDL, factory as submitMdl} from './submit/submit.mdl';
|
||||||
export {NAME as COMBO, directive as ComboDirective} from './combo/combo';
|
export {NAME as COMBO, directive as ComboDirective} from './combo/combo';
|
||||||
|
|
|
@ -1,3 +1,3 @@
|
||||||
<button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored icon-square {{ib.className}}" {{ib.enabled}}>
|
<button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored icon-square {{$ctrl.className}}" {{$ctrl.enabled}}>
|
||||||
<vn-icon icon="{{ib.icon}}"></vn-icon>{{ib.label}}
|
<vn-icon icon="{{$ctrl.icon}}"></vn-icon>{{$ctrl.label}}
|
||||||
</button>
|
</button>
|
|
@ -1,29 +1,12 @@
|
||||||
import {module as _module} from '../module';
|
import {module as _module} from '../module';
|
||||||
// import * as resolveFactory from '../lib/resolveDefaultComponents';
|
|
||||||
import * as util from '../lib/util';
|
|
||||||
|
|
||||||
const _NAME = 'iconButton';
|
_module.component('vnIconButton', {
|
||||||
export const NAME = util.getName(_NAME);
|
|
||||||
/*
|
|
||||||
directive.$inject = [resolveFactory.NAME];
|
|
||||||
export function directive(resolve) {
|
|
||||||
return {
|
|
||||||
restrict: 'E',
|
|
||||||
template: function(_, attr) {
|
|
||||||
return resolve.getTemplate(_NAME, attr);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}
|
|
||||||
_module.directive(NAME, directive); */
|
|
||||||
|
|
||||||
_module.component(NAME, {
|
|
||||||
template: require('./icon-button.html'),
|
template: require('./icon-button.html'),
|
||||||
bindings: {
|
bindings: {
|
||||||
icon: '@',
|
icon: '@',
|
||||||
className: '<?',
|
className: '<?',
|
||||||
enabled: '<?',
|
enabled: '<?',
|
||||||
label: '@?'
|
label: '@?'
|
||||||
},
|
}
|
||||||
controllerAs: 'ib'
|
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
|
@ -1,3 +0,0 @@
|
||||||
<button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored icon-square *[className]*" *[enabled]*>
|
|
||||||
<vn-icon icon="*[icon]*"></vn-icon>*[label]*
|
|
||||||
</button>
|
|
|
@ -1,15 +0,0 @@
|
||||||
import {module} from '../module';
|
|
||||||
import template from './icon-button.mdl.html';
|
|
||||||
|
|
||||||
export const NAME = 'vnIconButtonMdlFactory';
|
|
||||||
export function factory() {
|
|
||||||
return {
|
|
||||||
template: template,
|
|
||||||
default: {
|
|
||||||
enabled: 'enabled',
|
|
||||||
icon: '',
|
|
||||||
label: ''
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}
|
|
||||||
module.factory(NAME, factory);
|
|
|
@ -1,4 +1,5 @@
|
||||||
import {module} from '../module';
|
import {module} from '../module';
|
||||||
|
import './style.scss';
|
||||||
|
|
||||||
export default class IconMenu {
|
export default class IconMenu {
|
||||||
constructor($element, $http, $timeout) {
|
constructor($element, $http, $timeout) {
|
||||||
|
@ -6,7 +7,6 @@ export default class IconMenu {
|
||||||
this.$http = $http;
|
this.$http = $http;
|
||||||
this.$timeout = $timeout;
|
this.$timeout = $timeout;
|
||||||
this._showDropDown = false;
|
this._showDropDown = false;
|
||||||
this._pos = undefined;
|
|
||||||
}
|
}
|
||||||
get showDropDown() {
|
get showDropDown() {
|
||||||
return this._showDropDown;
|
return this._showDropDown;
|
||||||
|
@ -15,13 +15,6 @@ export default class IconMenu {
|
||||||
this._showDropDown = value;
|
this._showDropDown = value;
|
||||||
}
|
}
|
||||||
|
|
||||||
get pos() {
|
|
||||||
return this._pos;
|
|
||||||
}
|
|
||||||
set pos(value) {
|
|
||||||
this._pos = value;
|
|
||||||
}
|
|
||||||
|
|
||||||
getItems() {
|
getItems() {
|
||||||
this.$http.get(this.url).then(
|
this.$http.get(this.url).then(
|
||||||
json => {
|
json => {
|
||||||
|
@ -37,8 +30,6 @@ export default class IconMenu {
|
||||||
this.$element.bind('mouseover', e => {
|
this.$element.bind('mouseover', e => {
|
||||||
this.$timeout(() => {
|
this.$timeout(() => {
|
||||||
this.showDropDown = true;
|
this.showDropDown = true;
|
||||||
if (e.target.nodeName === 'BUTTON')
|
|
||||||
this.pos = e.target.getBoundingClientRect();
|
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
|
@ -0,0 +1,3 @@
|
||||||
|
vn-icon-menu{
|
||||||
|
position: relative;
|
||||||
|
}
|
|
@ -1,24 +1,7 @@
|
||||||
import {module} from '../module';
|
import {module} from '../module';
|
||||||
import './icon.mdl';
|
|
||||||
import './style.css';
|
import './style.css';
|
||||||
// import * as resolveFactory from '../lib/resolveDefaultComponents';
|
|
||||||
|
|
||||||
// const _NAME = 'icon';
|
module.component('vnIcon', {
|
||||||
export const NAME = 'vnIcon';
|
|
||||||
|
|
||||||
/* export function directive(resolver) {
|
|
||||||
return {
|
|
||||||
restrict: 'E',
|
|
||||||
template: function(_, attrs) {
|
|
||||||
return resolver.getTemplate(_NAME, attrs);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}
|
|
||||||
directive.$inject = [resolveFactory.NAME];
|
|
||||||
|
|
||||||
module.directive(NAME, directive);*/
|
|
||||||
|
|
||||||
module.component(NAME, {
|
|
||||||
template: '<i class="material-icons">{{i.icon}}</i>',
|
template: '<i class="material-icons">{{i.icon}}</i>',
|
||||||
bindings: {
|
bindings: {
|
||||||
icon: '@'
|
icon: '@'
|
||||||
|
|
|
@ -1 +0,0 @@
|
||||||
<i class="material-icons">*[icon]*</i>
|
|
|
@ -1,12 +0,0 @@
|
||||||
import {module} from '../module';
|
|
||||||
import template from './icon.mdl.html';
|
|
||||||
|
|
||||||
export const NAME = 'vnIconMdlFactory';
|
|
||||||
export function factory() {
|
|
||||||
return {
|
|
||||||
template: template,
|
|
||||||
default: {}
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
module.factory(NAME, factory);
|
|
|
@ -1,31 +1,23 @@
|
||||||
<div pad-large>
|
|
||||||
<form ng-submit="$ctrl.onSearch()">
|
<form ng-submit="$ctrl.onSearch()">
|
||||||
<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>
|
||||||
</vn-horizontal>
|
</vn-horizontal>
|
||||||
<vn-horizontal>
|
<vn-horizontal>
|
||||||
<vn-autocomplete vn-one
|
<vn-autocomplete vn-one
|
||||||
initial-value="$ctrl.filter.province"
|
initial-value="$ctrl.filter.province"
|
||||||
field="$ctrl.filter.provinceFk"
|
field="$ctrl.filter.provinceFk"
|
||||||
url="/client/api/Provinces"
|
url="/client/api/Provinces"
|
||||||
show-field="name"
|
show-field="name"
|
||||||
value-field="id"
|
value-field="id"
|
||||||
label="Provincia">
|
label="Provincia">
|
||||||
</vn-autocomplete>
|
</vn-autocomplete>
|
||||||
<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-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-horizontal>
|
<vn-horizontal>
|
||||||
<vn-check vn-one pad-medium-top label="Ticket con incidencia" field="$ctrl.filter.withIncidence"></vn-check>
|
<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-textfield vn-one label="Agencia" model="$ctrl.filter.agency"></vn-textfield>
|
||||||
</vn-horizontal>
|
</vn-horizontal>
|
||||||
<vn-horizontal margin-medium-top>
|
|
||||||
<vn-one>
|
</form>
|
||||||
<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,29 +1,54 @@
|
||||||
<mg-ajax path="/production/api/Tickets/list" options="vnIndex" actions="$ctrl.tickets = index.model.tickets;$ctrl.sumTickets()"></mg-ajax>
|
<mg-ajax path="/production/api/Tickets/list" options="vnIndex" actions="$ctrl.tickets = index.model.tickets;$ctrl.sumTickets()"></mg-ajax>
|
||||||
|
<mg-ajax path="/production/api/States/productionStates" options="vnIndex as states" actions="$ctrl.states = states.model.states;"></mg-ajax>
|
||||||
|
|
||||||
<vn-card margin-large>
|
<vn-card margin-large>
|
||||||
<vn-vertical pad-medium>
|
<vn-vertical pad-medium>
|
||||||
<vn-horizontal vn-one>
|
<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-one vn-horizontal>
|
<vn-two vn-horizontal ng-init="moreFilters = false">
|
||||||
|
<vn-vertical vn-one>
|
||||||
</vn-one>
|
<vn-horizontal vn-one>
|
||||||
<vn-one vn-horizontal>
|
<vn-autocomplete vn-one margin-medium-right
|
||||||
<vn-one></vn-one>
|
field="$ctrl.filter.stateFk"
|
||||||
<vn-autocomplete vn-one
|
data = "$ctrl.states"
|
||||||
initial-value="$ctrl.warehouse"
|
label="Estado">
|
||||||
field="$ctrl.warehouseFk"
|
</vn-autocomplete>
|
||||||
url="/client/api/ContactChannels"
|
<vn-autocomplete vn-one margin-medium-right
|
||||||
label="Almacen">
|
field="$ctrl.filter.alarmFk"
|
||||||
</vn-autocomplete>
|
data = "$ctrl.states"
|
||||||
<vn-icon-button vn-none pad-ten-top icon="refresh"></vn-icon-button>
|
label="Alarma">
|
||||||
</vn-one>
|
</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-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-horizontal>
|
</vn-horizontal>
|
||||||
<vn-horizontal vn-one margin-large-bottom>
|
<vn-horizontal vn-one margin-large-bottom>
|
||||||
<vn-one>
|
<vn-one>
|
||||||
<vn-horizontal>
|
<vn-horizontal>
|
||||||
<vn-button vn-none margin-medium-right label="Impreso"></vn-button>
|
<vn-button vn-none margin-medium-right label="Impreso"></vn-button>
|
||||||
<vn-none margin-medium-right>
|
<vn-none margin-medium-right>
|
||||||
<mg-ajax path="/production/api/States/productionStates" options="vnIndex as states"></mg-ajax>
|
<vn-icon-menu icon="assignment" items="$ctrl.states" selected="$ctrl.actions.state"></vn-icon-menu>
|
||||||
<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-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-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>
|
||||||
|
|
|
@ -8,6 +8,7 @@ export default class ProductionIndex {
|
||||||
this.filter = {};
|
this.filter = {};
|
||||||
this._checkAll = false;
|
this._checkAll = false;
|
||||||
this.tickets = [];
|
this.tickets = [];
|
||||||
|
this.states = [];
|
||||||
this.lines = 0;
|
this.lines = 0;
|
||||||
this.meters = 0;
|
this.meters = 0;
|
||||||
this.actions = {
|
this.actions = {
|
||||||
|
|
|
@ -17,4 +17,18 @@ vn-production-index {
|
||||||
.icon-square{
|
.icon-square{
|
||||||
height: 36px;
|
height: 36px;
|
||||||
}
|
}
|
||||||
|
.locator-header{
|
||||||
|
i{
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.moreFilters{
|
||||||
|
position: absolute;
|
||||||
|
z-index: 99;
|
||||||
|
background-color: white;
|
||||||
|
padding: 15px;
|
||||||
|
border: 1px solid #9D9D9D;
|
||||||
|
margin-top: 60px;
|
||||||
|
width: 600px;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
Loading…
Reference in New Issue