gerard
parent
bf87c3d2ac
commit
c7f07d0548
|
|
@ -1,27 +1,11 @@
|
|||
<div class="icon-menu" ng-click="$ctrl.showDropDown = true">
|
||||
<button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored icon-square icon-menu__button">
|
||||
<div class="icon-menu">
|
||||
<button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored icon-menu__button" ng-click="$ctrl.onClick($event)">
|
||||
<vn-label vn-none translate>{{::$ctrl.label}}</vn-label>
|
||||
<vn-icon vn-none icon="{{::$ctrl.icon}}"></vn-icon>
|
||||
<vn-icon vn-none class="icon-menu__arrow_down" icon="keyboard_arrow_down"></vn-icon>
|
||||
</button>
|
||||
<div ng-if="!$ctrl.findMore">
|
||||
<vn-drop-down
|
||||
items="$ctrl.items"
|
||||
show="$ctrl.showDropDown"
|
||||
selected="$ctrl.selected"
|
||||
filter="true"
|
||||
parent="$ctrl.element">
|
||||
vn-id="drop-down"
|
||||
on-select="$ctrl.onDropDownSelect(value)">
|
||||
</vn-drop-down>
|
||||
</div>
|
||||
<div ng-if="$ctrl.findMore">
|
||||
<vn-drop-down
|
||||
items="$ctrl.items"
|
||||
show="$ctrl.showDropDown"
|
||||
selected="$ctrl.selected"
|
||||
filter="true"
|
||||
load-more="$ctrl.getItems()"
|
||||
show-load-more="$ctrl.maxRow"
|
||||
filter-action="$ctrl.findItems(search)"
|
||||
parent="$ctrl.element">
|
||||
</vn-drop-down>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,131 +1,88 @@
|
|||
import ngModule from '../../module';
|
||||
import Input from '../../lib/input';
|
||||
import asignProps from '../../lib/asign-props';
|
||||
import './style.scss';
|
||||
|
||||
export default class IconMenu {
|
||||
constructor($element, $http, $timeout) {
|
||||
this.$element = $element;
|
||||
this.$http = $http;
|
||||
this.$timeout = $timeout;
|
||||
this._showDropDown = false;
|
||||
this.finding = false;
|
||||
this.findMore = false;
|
||||
this.element = $element[0];
|
||||
export default class IconMenu extends Input {
|
||||
constructor($element, $scope, $transclude) {
|
||||
super($element, $scope);
|
||||
this.$transclude = $transclude;
|
||||
this.input = this.element.querySelector('.mdl-button');
|
||||
this.valueField = 'id';
|
||||
this.showField = 'name';
|
||||
}
|
||||
|
||||
get showDropDown() {
|
||||
return this._showDropDown;
|
||||
getFields() {
|
||||
let fields = [];
|
||||
fields.push(this.valueField);
|
||||
fields.push(this.showField);
|
||||
|
||||
if (this.selectFields)
|
||||
for (let field of this.selectFields)
|
||||
fields.push(field);
|
||||
|
||||
return fields;
|
||||
}
|
||||
|
||||
set showDropDown(value) {
|
||||
this._showDropDown = value;
|
||||
onClick(event) {
|
||||
event.preventDefault();
|
||||
this.showDropDown();
|
||||
}
|
||||
|
||||
findItems(search) {
|
||||
if (!this.url)
|
||||
return this.items ? this.items : [];
|
||||
onDropDownSelect(value) {
|
||||
this.field = value;
|
||||
|
||||
if (search && !this.finding) {
|
||||
let filter = {where: {name: {regexp: search}}};
|
||||
let json = JSON.stringify(filter);
|
||||
this.finding = true;
|
||||
this.$http.get(`${this.url}?filter=${json}`).then(
|
||||
json => {
|
||||
this.items = json.data;
|
||||
this.finding = false;
|
||||
},
|
||||
() => {
|
||||
this.finding = false;
|
||||
}
|
||||
);
|
||||
} else if (!search && !this.finding) {
|
||||
this.maxRow = 10;
|
||||
this.items = [];
|
||||
this.getItems();
|
||||
}
|
||||
if (this.onChange)
|
||||
this.onChange({value});
|
||||
}
|
||||
|
||||
getItems() {
|
||||
let filter = {};
|
||||
|
||||
if (this.maxRow) {
|
||||
if (this.items) {
|
||||
filter.skip = this.items.length;
|
||||
}
|
||||
filter.limit = this.maxRow;
|
||||
filter.order = 'name ASC';
|
||||
}
|
||||
|
||||
let json = JSON.stringify(filter);
|
||||
|
||||
this.$http.get(`${this.url}?filter=${json}`).then(
|
||||
json => {
|
||||
if (json.data.length)
|
||||
json.data.forEach(
|
||||
el => {
|
||||
this.items.push(el);
|
||||
}
|
||||
);
|
||||
else
|
||||
this.maxRow = false;
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
$onInit() {
|
||||
if (!this.items && this.url) {
|
||||
this.items = [];
|
||||
this.getItems();
|
||||
}
|
||||
|
||||
this.findMore = this.url && this.maxRow;
|
||||
|
||||
this.mouseFocus = false;
|
||||
this.focused = false;
|
||||
|
||||
this.$element.bind('mouseover', e => {
|
||||
this.$timeout(() => {
|
||||
this.mouseFocus = true;
|
||||
this.showDropDown = this.focused;
|
||||
});
|
||||
showDropDown() {
|
||||
Object.assign(this.$.dropDown.$.model, {
|
||||
url: this.url,
|
||||
staticData: this.data
|
||||
});
|
||||
|
||||
this.$element.bind('mouseout', () => {
|
||||
this.$timeout(() => {
|
||||
this.mouseFocus = false;
|
||||
this.showDropDown = this.focused;
|
||||
});
|
||||
});
|
||||
this.$element.bind('focusin', e => {
|
||||
this.$timeout(() => {
|
||||
this.focused = true;
|
||||
this.showDropDown = true;
|
||||
});
|
||||
});
|
||||
this.$element.bind('focusout', e => {
|
||||
this.$timeout(() => {
|
||||
this.focused = false;
|
||||
this.showDropDown = this.mouseFocus;
|
||||
});
|
||||
});
|
||||
}
|
||||
asignProps(this, this.$.dropDown, [
|
||||
'valueField',
|
||||
'showField',
|
||||
'where',
|
||||
'order',
|
||||
'showFilter',
|
||||
'multiple',
|
||||
'limit',
|
||||
'$transclude'
|
||||
]);
|
||||
|
||||
$onDestroy() {
|
||||
this.$element.unbind('mouseover');
|
||||
this.$element.unbind('mouseout');
|
||||
this.$element.unbind('focusin');
|
||||
this.$element.unbind('focusout');
|
||||
this.$.dropDown.selectFields = this.getFields();
|
||||
this.$.dropDown.parent = this.input;
|
||||
this.$.dropDown.show();
|
||||
}
|
||||
}
|
||||
IconMenu.$inject = ['$element', '$http', '$timeout'];
|
||||
IconMenu.$inject = ['$element', '$scope', '$transclude'];
|
||||
|
||||
ngModule.component('vnIconMenu', {
|
||||
template: require('./icon-menu.html'),
|
||||
bindings: {
|
||||
url: '@?',
|
||||
items: '<?',
|
||||
icon: '@',
|
||||
maxRow: '@?',
|
||||
selected: '='
|
||||
data: '<?',
|
||||
showField: '@?',
|
||||
valueField: '@?',
|
||||
selectFields: '<?',
|
||||
disabled: '<?',
|
||||
where: '@?',
|
||||
order: '@?',
|
||||
label: '@',
|
||||
initialData: '<?',
|
||||
field: '=?',
|
||||
limit: '<?',
|
||||
showFilter: '<?',
|
||||
selection: '<?',
|
||||
multiple: '<?',
|
||||
onChange: '&?',
|
||||
icon: '@?'
|
||||
},
|
||||
transclude: {
|
||||
tplItem: '?tplItem'
|
||||
},
|
||||
controller: IconMenu
|
||||
});
|
||||
|
|
|
|||
|
|
@ -3,10 +3,15 @@ vn-icon-menu{
|
|||
.icon-menu__button {
|
||||
padding: 0 10px;
|
||||
}
|
||||
vn-label{
|
||||
float: left;
|
||||
margin-top: 1px;
|
||||
}
|
||||
vn-icon{
|
||||
float: left;
|
||||
margin-top: 3px;
|
||||
}
|
||||
vn-icon.icon-menu__arrow_down{
|
||||
margin:2px 0 0 5px;
|
||||
margin: 6px 0 0 5px;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue