2018-06-28 12:43:59 +00:00
|
|
|
import ngModule from '../../module';
|
|
|
|
import './style.scss';
|
|
|
|
|
|
|
|
export default class Table {
|
|
|
|
constructor($scope, $element, $transclude) {
|
|
|
|
this.$scope = $scope;
|
|
|
|
this.table = $element[0];
|
|
|
|
this.field = null;
|
|
|
|
this.order = null;
|
2018-11-27 14:02:54 +00:00
|
|
|
this.autoLoad = true;
|
2018-06-28 12:43:59 +00:00
|
|
|
|
|
|
|
$transclude($scope.$parent, clone => {
|
|
|
|
angular.element($element[0].querySelector('div')).append(clone);
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
setOrder(field, order) {
|
|
|
|
this.field = field;
|
|
|
|
this.order = order;
|
|
|
|
}
|
|
|
|
|
2018-07-16 06:00:04 +00:00
|
|
|
applyOrder(field = this.field, order = this.order) {
|
2018-11-27 14:02:54 +00:00
|
|
|
if (field && order) {
|
|
|
|
this.model.order = `${field} ${order}`;
|
|
|
|
this.setActiveArrow();
|
|
|
|
}
|
2018-07-16 06:00:04 +00:00
|
|
|
|
2018-06-28 12:43:59 +00:00
|
|
|
this.model.refresh();
|
|
|
|
}
|
|
|
|
|
|
|
|
$onChanges() {
|
2018-11-27 14:02:54 +00:00
|
|
|
if (this.model && this.autoLoad)
|
2018-07-16 06:00:04 +00:00
|
|
|
this.applyOrder();
|
2018-06-28 12:43:59 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
setActiveArrow() {
|
|
|
|
let columns = this.table.querySelectorAll('vn-thead vn-th');
|
|
|
|
columns.forEach(column => {
|
|
|
|
column.classList.remove('active');
|
|
|
|
});
|
|
|
|
|
|
|
|
let selector = `vn-thead vn-th[field="${this.field}"]`;
|
|
|
|
let activeColumn = this.table.querySelector(selector);
|
|
|
|
activeColumn.classList.add('active');
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
Table.$inject = ['$scope', '$element', '$transclude'];
|
|
|
|
|
|
|
|
ngModule.component('vnTable', {
|
|
|
|
template: require('./index.html'),
|
|
|
|
transclude: true,
|
|
|
|
controller: Table,
|
|
|
|
bindings: {
|
2018-11-27 14:02:54 +00:00
|
|
|
model: '<?',
|
|
|
|
autoLoad: '<?'
|
2018-06-28 12:43:59 +00:00
|
|
|
}
|
|
|
|
});
|