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