2018-11-12 10:31:58 +00:00
|
|
|
import ngModule from '../../module';
|
|
|
|
import Component from '../../lib/component';
|
|
|
|
import './style.scss';
|
|
|
|
|
|
|
|
/**
|
2019-04-29 09:49:43 +00:00
|
|
|
* Treeview
|
2018-11-12 10:31:58 +00:00
|
|
|
*
|
|
|
|
* @property {String} position The relative position to the parent
|
|
|
|
*/
|
|
|
|
export default class Treeview extends Component {
|
2019-01-21 10:45:53 +00:00
|
|
|
constructor($element, $scope) {
|
2018-11-12 10:31:58 +00:00
|
|
|
super($element, $scope);
|
2019-04-29 09:49:43 +00:00
|
|
|
this.$scope = $scope;
|
2019-01-21 10:45:53 +00:00
|
|
|
this.data = [];
|
2018-11-12 10:31:58 +00:00
|
|
|
}
|
|
|
|
|
2019-01-21 10:45:53 +00:00
|
|
|
$onInit() {
|
|
|
|
this.refresh();
|
2018-11-12 10:31:58 +00:00
|
|
|
}
|
|
|
|
|
2019-01-21 10:45:53 +00:00
|
|
|
refresh() {
|
|
|
|
this.model.refresh().then(() => {
|
|
|
|
this.data = this.model.data;
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2019-03-12 14:04:09 +00:00
|
|
|
/**
|
|
|
|
* Emits selection event
|
|
|
|
* @param {Object} item - Selected item
|
|
|
|
* @param {Boolean} value - Changed value
|
|
|
|
*/
|
2019-02-18 07:37:26 +00:00
|
|
|
onSelection(item, value) {
|
|
|
|
this.emit('selection', {item, value});
|
2019-01-21 10:45:53 +00:00
|
|
|
}
|
|
|
|
|
2019-03-12 14:04:09 +00:00
|
|
|
onCreate(parent) {
|
|
|
|
this.emit('create', {parent});
|
|
|
|
}
|
|
|
|
|
2019-01-21 10:45:53 +00:00
|
|
|
onToggle(item) {
|
2019-02-18 07:37:26 +00:00
|
|
|
if (item.active)
|
2019-01-21 10:45:53 +00:00
|
|
|
item.childs = undefined;
|
|
|
|
else {
|
|
|
|
this.model.applyFilter({}, {parentFk: item.id}).then(() => {
|
2019-02-18 07:37:26 +00:00
|
|
|
const newData = this.model.data;
|
|
|
|
|
|
|
|
if (item.childs) {
|
|
|
|
let childs = item.childs;
|
|
|
|
childs.forEach(child => {
|
|
|
|
let index = newData.findIndex(newChild => {
|
|
|
|
return newChild.id == child.id;
|
|
|
|
});
|
|
|
|
newData[index] = child;
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2019-02-18 12:23:24 +00:00
|
|
|
item.childs = newData.sort((a, b) => {
|
2019-03-12 14:04:09 +00:00
|
|
|
if (b.selected !== a.selected) {
|
|
|
|
if (a.selected == null)
|
2019-02-20 11:31:08 +00:00
|
|
|
return 1;
|
2019-03-12 14:04:09 +00:00
|
|
|
if (b.selected == null)
|
2019-02-20 11:31:08 +00:00
|
|
|
return -1;
|
2019-03-12 14:04:09 +00:00
|
|
|
return b.selected - a.selected;
|
2019-02-20 11:31:08 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
return a.name.localeCompare(b.name);
|
2019-02-18 12:23:24 +00:00
|
|
|
});
|
2019-01-21 10:45:53 +00:00
|
|
|
});
|
|
|
|
}
|
2019-02-18 07:37:26 +00:00
|
|
|
|
|
|
|
item.active = !item.active;
|
2018-11-12 10:31:58 +00:00
|
|
|
}
|
2019-04-23 06:29:23 +00:00
|
|
|
|
|
|
|
onDrop(item, dragged, dropped) {
|
|
|
|
this.emit('drop', {item, dragged, dropped});
|
|
|
|
}
|
2018-11-12 10:31:58 +00:00
|
|
|
}
|
|
|
|
|
2019-01-21 10:45:53 +00:00
|
|
|
Treeview.$inject = ['$element', '$scope'];
|
2018-11-12 10:31:58 +00:00
|
|
|
|
|
|
|
ngModule.component('vnTreeview', {
|
|
|
|
template: require('./index.html'),
|
|
|
|
controller: Treeview,
|
|
|
|
bindings: {
|
2019-03-12 14:04:09 +00:00
|
|
|
model: '<',
|
|
|
|
icons: '<?',
|
|
|
|
disabled: '<?',
|
|
|
|
selectable: '<?',
|
|
|
|
editable: '<?',
|
2019-04-29 09:49:43 +00:00
|
|
|
draggable: '<?',
|
|
|
|
droppable: '<?',
|
2019-03-12 14:04:09 +00:00
|
|
|
aclRole: '@?'
|
2018-11-12 10:31:58 +00:00
|
|
|
}
|
|
|
|
});
|