103 lines
2.5 KiB
JavaScript
103 lines
2.5 KiB
JavaScript
|
import ngModule from '../../module';
|
||
|
|
import Component from '../../lib/component';
|
||
|
|
import './style.scss';
|
||
|
|
|
||
|
|
export default class SmartTable extends Component {
|
||
|
|
constructor($element, $, $transclude) {
|
||
|
|
super($element, $);
|
||
|
|
this.$transclude = $transclude;
|
||
|
|
// stuff
|
||
|
|
}
|
||
|
|
|
||
|
|
/* $onDestroy() {
|
||
|
|
if (this.$contentScope)
|
||
|
|
this.$contentScope.$destroy();
|
||
|
|
}
|
||
|
|
*/
|
||
|
|
get model() {
|
||
|
|
return this._model;
|
||
|
|
}
|
||
|
|
|
||
|
|
set model(value) {
|
||
|
|
this._model = value;
|
||
|
|
if (value) {
|
||
|
|
this.$.model = value;
|
||
|
|
this.transclude();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
registerColumns() {
|
||
|
|
const header = this.element.querySelector('thead > tr');
|
||
|
|
if (!header) return;
|
||
|
|
const columns = header.querySelectorAll('th');
|
||
|
|
|
||
|
|
// TODO: Add arrow icon and so on..
|
||
|
|
// Click handler
|
||
|
|
for (let column of columns) {
|
||
|
|
const field = column.getAttribute('field');
|
||
|
|
if (field)
|
||
|
|
column.addEventListener('click', () => this.orderHandler(column));
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Creo que se puede hacer directamente desde ng-transclude
|
||
|
|
transclude() {
|
||
|
|
const slotTable = this.element.querySelector('#table');
|
||
|
|
this.$transclude(($clone, $scope) => {
|
||
|
|
const table = $clone[0];
|
||
|
|
$scope.hasChanges = this.hasChanges;
|
||
|
|
slotTable.appendChild(table);
|
||
|
|
this.registerColumns();
|
||
|
|
}, null, 'table');
|
||
|
|
}
|
||
|
|
|
||
|
|
orderHandler(element) {
|
||
|
|
const field = element.getAttribute('field');
|
||
|
|
console.log(`You clicked to ` + field);
|
||
|
|
}
|
||
|
|
|
||
|
|
createRow() {
|
||
|
|
this.model.insert({
|
||
|
|
nickname: 'New row'
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
deleteAll() {
|
||
|
|
const data = this.model.data;
|
||
|
|
const checkedRows = data.filter(row => row.checked);
|
||
|
|
for (let row of checkedRows)
|
||
|
|
this.model.remove(row);
|
||
|
|
|
||
|
|
if (this.autoSave)
|
||
|
|
this.save();
|
||
|
|
}
|
||
|
|
|
||
|
|
saveAll() {
|
||
|
|
const model = this.model;
|
||
|
|
if (!model.isChanged)
|
||
|
|
return this.vnApp.showError(this.$t('No changes to save'));
|
||
|
|
|
||
|
|
this.model.save()
|
||
|
|
.then(() => this.vnApp.showSuccess(this.$t('Data saved!')));
|
||
|
|
}
|
||
|
|
|
||
|
|
hasChanges() {
|
||
|
|
return true;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
SmartTable.$inject = ['$element', '$scope', '$transclude'];
|
||
|
|
|
||
|
|
ngModule.vnComponent('smartTable', {
|
||
|
|
template: require('./index.html'),
|
||
|
|
controller: SmartTable,
|
||
|
|
transclude: {
|
||
|
|
table: '?slotTable',
|
||
|
|
actions: '?slotActions'
|
||
|
|
},
|
||
|
|
bindings: {
|
||
|
|
model: '<?',
|
||
|
|
autoSave: '<?'
|
||
|
|
}
|
||
|
|
});
|