433 lines
13 KiB
JavaScript
433 lines
13 KiB
JavaScript
import ngModule from '../../module';
|
|
import Component from '../../lib/component';
|
|
import {buildFilter} from 'vn-loopback/util/filter';
|
|
import angular from 'angular';
|
|
import {camelToKebab} from '../../lib/string';
|
|
import './style.scss';
|
|
import './table.scss';
|
|
|
|
export default class SmartTable extends Component {
|
|
constructor($element, $, $transclude) {
|
|
super($element, $);
|
|
this.currentUserId = window.localStorage.currentUserWorkerId;
|
|
this.$transclude = $transclude;
|
|
this.sortCriteria = [];
|
|
this.columns = [];
|
|
this.autoSave = false;
|
|
|
|
this.transclude();
|
|
}
|
|
|
|
get options() {
|
|
return this._options;
|
|
}
|
|
|
|
set options(options) {
|
|
this._options = options;
|
|
if (!options) return;
|
|
|
|
const activeButtons = options.activeButtons;
|
|
const missingId = activeButtons && activeButtons.shownColumns && !this.viewConfigId;
|
|
if (missingId)
|
|
throw new Error('vnSmartTable: View identifier not defined');
|
|
}
|
|
|
|
get model() {
|
|
return this._model;
|
|
}
|
|
|
|
set model(value) {
|
|
this._model = value;
|
|
if (value)
|
|
this.$.model = value;
|
|
}
|
|
|
|
get viewConfigId() {
|
|
return this._viewConfigId;
|
|
}
|
|
|
|
set viewConfigId(value) {
|
|
this._viewConfigId = value;
|
|
|
|
if (value) {
|
|
this.defaultViewConfig = {};
|
|
|
|
const url = 'DefaultViewConfigs';
|
|
const filter = {where: {tableCode: value}};
|
|
this.$http.get(url, {filter})
|
|
.then(res => {
|
|
if (res && res.data.length) {
|
|
const columns = res.data[0].columns;
|
|
this.defaultViewConfig = columns;
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
get viewConfig() {
|
|
return this._viewConfig;
|
|
}
|
|
|
|
set viewConfig(value) {
|
|
this._viewConfig = value;
|
|
|
|
if (!value) return;
|
|
|
|
if (!value.length) {
|
|
const userViewModel = this.$.userViewModel;
|
|
|
|
for (const column of this.columns) {
|
|
if (this.defaultViewConfig[column.field] == undefined)
|
|
this.defaultViewConfig[column.field] = true;
|
|
}
|
|
userViewModel.insert({
|
|
userFk: this.currentUserId,
|
|
tableConfig: this.viewConfigId,
|
|
configuration: this.defaultViewConfig ? this.defaultViewConfig : {}
|
|
});
|
|
}
|
|
this.applyViewConfig();
|
|
}
|
|
|
|
get checkedRows() {
|
|
const model = this.model;
|
|
if (model && model.data)
|
|
return model.data.filter(row => row.$checked);
|
|
|
|
return null;
|
|
}
|
|
|
|
get checkAll() {
|
|
return this._checkAll;
|
|
}
|
|
|
|
set checkAll(value) {
|
|
this._checkAll = value;
|
|
if (value !== undefined) {
|
|
const shownColumns = this.viewConfig[0].configuration;
|
|
for (let param in shownColumns)
|
|
shownColumns[param] = value;
|
|
}
|
|
}
|
|
|
|
transclude() {
|
|
const slotTable = this.element.querySelector('#table');
|
|
this.$transclude(($clone, $scope) => {
|
|
const table = $clone[0];
|
|
slotTable.appendChild(table);
|
|
this.registerColumns();
|
|
|
|
const header = this.element.querySelector('thead > tr');
|
|
const columns = header.querySelectorAll('th');
|
|
const tbody = this.element.querySelector('tbody');
|
|
if (tbody) {
|
|
const noSearch = this.$compile(`
|
|
<tr ng-if="!model.data">
|
|
<td class="empty-rows" colspan="${columns.length}" translate>Enter a new search</td>
|
|
</tr>
|
|
`)($scope);
|
|
tbody.appendChild(noSearch[0]);
|
|
|
|
const noRows = this.$compile(`
|
|
<tr ng-if="model.data.length == 0">
|
|
<td class="empty-rows" colspan="${columns.length}" translate>No data</td>
|
|
</tr>
|
|
`)($scope);
|
|
tbody.appendChild(noRows[0]);
|
|
}
|
|
}, null, 'table');
|
|
}
|
|
|
|
saveViewConfig() {
|
|
const userViewModel = this.$.userViewModel;
|
|
const [viewConfig] = userViewModel.data;
|
|
viewConfig.configuration = Object.assign({}, viewConfig.configuration);
|
|
userViewModel.save()
|
|
.then(() => this.vnApp.showSuccess(this.$t('Data saved!')))
|
|
.then(() => this.applyViewConfig());
|
|
}
|
|
|
|
applyViewConfig() {
|
|
const userViewModel = this.$.userViewModel;
|
|
const [viewConfig] = userViewModel.data;
|
|
|
|
const selectors = [];
|
|
for (const column of this.columns) {
|
|
if (viewConfig.configuration[column.field] == false) {
|
|
const baseSelector = `smart-table[view-config-id="${this.viewConfigId}"] table`;
|
|
selectors.push(`${baseSelector} thead > tr > th:nth-child(${column.index + 1})`);
|
|
selectors.push(`${baseSelector} tbody > tr > td:nth-child(${column.index + 1})`);
|
|
}
|
|
}
|
|
|
|
const styleElement = document.querySelector('style[id="smart-table"]');
|
|
|
|
if (styleElement)
|
|
styleElement.parentNode.removeChild(styleElement);
|
|
|
|
if (selectors.length) {
|
|
const rule = selectors.join(', ') + '{display: none}';
|
|
this.$.css = document.createElement('style');
|
|
this.$.css.setAttribute('id', 'smart-table');
|
|
document.head.appendChild(this.$.css);
|
|
this.$.css.appendChild(document.createTextNode(rule));
|
|
}
|
|
|
|
this.$.$on('$destroy', () => {
|
|
if (this.$.css && styleElement)
|
|
styleElement.parentNode.removeChild(styleElement);
|
|
});
|
|
}
|
|
|
|
registerColumns() {
|
|
const header = this.element.querySelector('thead > tr');
|
|
if (!header) return;
|
|
const columns = header.querySelectorAll('th');
|
|
|
|
// Click handler
|
|
for (const [index, column] of columns.entries()) {
|
|
const field = column.getAttribute('field');
|
|
if (field) {
|
|
const columnElement = angular.element(column);
|
|
const caption = columnElement.text().trim();
|
|
|
|
this.columns.push({field, caption, index});
|
|
|
|
column.addEventListener('click', () => this.orderHandler(column));
|
|
}
|
|
}
|
|
}
|
|
|
|
orderHandler(element) {
|
|
const field = element.getAttribute('field');
|
|
const existingCriteria = this.sortCriteria.find(criteria => {
|
|
return criteria.field == field;
|
|
});
|
|
|
|
const isASC = existingCriteria && existingCriteria.sortType == 'ASC';
|
|
const isDESC = existingCriteria && existingCriteria.sortType == 'DESC';
|
|
|
|
if (!existingCriteria) {
|
|
this.sortCriteria.push({field: field, sortType: 'ASC'});
|
|
element.classList.remove('desc');
|
|
element.classList.add('asc');
|
|
}
|
|
|
|
if (isDESC) {
|
|
this.sortCriteria.splice(this.sortCriteria.findIndex(criteria => {
|
|
return criteria.field == field;
|
|
}), 1);
|
|
element.classList.remove('desc');
|
|
element.classList.remove('asc');
|
|
}
|
|
|
|
if (isASC) {
|
|
existingCriteria.sortType = 'DESC';
|
|
element.classList.remove('asc');
|
|
element.classList.add('desc');
|
|
}
|
|
|
|
this.applySort();
|
|
}
|
|
|
|
displaySearch() {
|
|
const header = this.element.querySelector('thead > tr');
|
|
if (!header) return;
|
|
|
|
const tbody = this.element.querySelector('tbody');
|
|
const columns = header.querySelectorAll('th');
|
|
|
|
const hasSearchRow = tbody.querySelector('tr#searchRow');
|
|
if (hasSearchRow) return hasSearchRow.remove();
|
|
|
|
const searchRow = document.createElement('tr');
|
|
searchRow.setAttribute('id', 'searchRow');
|
|
for (let column of columns) {
|
|
const field = column.getAttribute('field');
|
|
const cell = document.createElement('td');
|
|
if (field) {
|
|
let input;
|
|
let options;
|
|
const columnOptions = this.options && this.options.columns;
|
|
|
|
if (columnOptions)
|
|
options = columnOptions.find(column => column.field == field);
|
|
|
|
if (options && options.searchable == false) {
|
|
searchRow.appendChild(cell);
|
|
continue;
|
|
}
|
|
|
|
if (options && options.autocomplete) {
|
|
let props = ``;
|
|
|
|
const autocomplete = options.autocomplete;
|
|
for (const prop in autocomplete)
|
|
props += `${camelToKebab(prop)}="${autocomplete[prop]}"\n`;
|
|
|
|
input = this.$compile(`
|
|
<vn-autocomplete
|
|
class="dense"
|
|
name="${field}"
|
|
ng-model="searchProps['${field}']"
|
|
${props}
|
|
on-change="$ctrl.searchByColumn('${field}')"
|
|
clear-disabled="true"
|
|
/>`)(this.$);
|
|
} else {
|
|
input = this.$compile(`
|
|
<vn-textfield
|
|
class="dense"
|
|
name="${field}"
|
|
ng-model="searchProps['${field}']"
|
|
ng-keydown="$ctrl.searchWithEvent($event, '${field}')"
|
|
clear-disabled="true"
|
|
/>`)(this.$);
|
|
}
|
|
cell.appendChild(input[0]);
|
|
}
|
|
searchRow.appendChild(cell);
|
|
}
|
|
|
|
tbody.prepend(searchRow);
|
|
}
|
|
|
|
searchWithEvent($event, field) {
|
|
if ($event.key != 'Enter') return;
|
|
|
|
this.searchByColumn(field);
|
|
}
|
|
|
|
searchByColumn(field) {
|
|
const searchCriteria = this.$.searchProps[field];
|
|
const emptySearch = searchCriteria == '' || null;
|
|
|
|
const filters = this.filterSanitizer(field);
|
|
|
|
if (filters && filters.userFilter)
|
|
this.model.userFilter = filters.userFilter;
|
|
|
|
if (!emptySearch)
|
|
this.addFilter(field, this.$.searchProps[field]);
|
|
else this.model.refresh();
|
|
}
|
|
|
|
addFilter(field, value) {
|
|
let where = {[field]: value};
|
|
|
|
if (this.exprBuilder) {
|
|
where = buildFilter(where, (param, value) =>
|
|
this.exprBuilder({param, value})
|
|
);
|
|
}
|
|
|
|
this.model.addFilter({where});
|
|
}
|
|
|
|
applySort() {
|
|
let order = this.sortCriteria.map(criteria => `${criteria.field} ${criteria.sortType}`);
|
|
order = order.join(', ');
|
|
|
|
if (order)
|
|
this.model.order = order;
|
|
|
|
this.model.refresh();
|
|
}
|
|
|
|
filterSanitizer(field) {
|
|
const userFilter = this.model.userFilter;
|
|
const userParams = this.model.userParams;
|
|
const where = userFilter && userFilter.where;
|
|
|
|
if (this.exprBuilder) {
|
|
const param = this.exprBuilder({
|
|
param: field,
|
|
value: null
|
|
});
|
|
if (param) [field] = Object.keys(param);
|
|
}
|
|
|
|
if (!where) return;
|
|
|
|
const whereKeys = Object.keys(where);
|
|
for (let key of whereKeys) {
|
|
removeProp(where, field, key);
|
|
|
|
if (!Object.keys(where))
|
|
delete userFilter.where;
|
|
}
|
|
|
|
function removeProp(instance, findProp, prop) {
|
|
if (prop == findProp)
|
|
delete instance[prop];
|
|
|
|
if (prop === 'and') {
|
|
for (let [index, param] of instance[prop].entries()) {
|
|
const [key] = Object.keys(param);
|
|
if (key == findProp)
|
|
instance[prop].splice(index, 1);
|
|
|
|
if (param[key] instanceof Array)
|
|
removeProp(param, field, key);
|
|
}
|
|
}
|
|
}
|
|
|
|
return {userFilter, userParams};
|
|
}
|
|
|
|
removeFilter() {
|
|
this.model.applyFilter(userFilter, userParams);
|
|
}
|
|
|
|
createRow() {
|
|
let data = {};
|
|
|
|
if (this.defaultNewData)
|
|
data = this.defaultNewData();
|
|
|
|
this.model.insert(data);
|
|
}
|
|
|
|
deleteAll() {
|
|
for (let row of this.checkedRows)
|
|
this.model.removeRow(row);
|
|
|
|
if (this.autoSave)
|
|
this.saveAll();
|
|
}
|
|
|
|
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: '<?',
|
|
viewConfigId: '@?',
|
|
autoSave: '<?',
|
|
exprBuilder: '&?',
|
|
defaultNewData: '&?',
|
|
options: '<?'
|
|
}
|
|
});
|