`);
this.el.appendChild(this.body);
this.footer = ui.create(``);
this.el.appendChild(this.footer);
let headerRow = this.header.querySelector('.row');
if(this.options.height != -1) {
this.body.style.maxHeight = this.options.height;
}
this.dataset = this.body.querySelector('.rows');
if(this.options.allowRowDrag) {
this.el.classList.add('indexed');
}
this.globalSelector = this.header.querySelector('.cell');
this.globalSelector.addEventListener('click', this.onGlobalClick.bind(this));
this.filters = [];
for(let i = 0; i < this.options.headers.length; i ++) {
let column = this.options.headers[i];
let safeLabel = ui.create(`
${column.label}
`).innerText
let cell = ui.create(`
${column.label}
`)
if(column.sortable) {
let label = cell.querySelector('span');
label.setAttribute('data-order', 'asc');
label.classList.add('sortable');
if(column.type && (column.type == 'number' || column.type == 'currency')) label.classList.add('numeric');
label.addEventListener('click', this.onColumnSort.bind(this));
}
this.filters.push(null);
if(column.filter && column.filter == 'text') {
let input = ui.create('');
this.filters[i] = input;
cell.appendChild(input);
input.addEventListener('keyup', this.filter.bind(this));
}
if(column.filter && column.filter == 'list') {
let select = ui.create('');
this.filters[i] = select;
cell.appendChild(select);
select.addEventListener('change', this.filter.bind(this));
}
this.header.querySelector('.row').appendChild(cell);
}
this.editing = false;
let actions = ui.create('');
this.header.querySelector('.row').appendChild(actions);
if(this.options.editable) {
this.btNew = ui.create(``);
this.btNew.addEventListener('click', this.onRowAdd.bind(this));
actions.appendChild(this.btNew);
this.options.rowActions.push({ icon: '', title: 'Edit item', callback: this.onRowEdit.bind(this) });
this.options.rowActions.push({ class: 'remove', icon: '', title: 'Delete item', callback: this.onRowDelete.bind(this) });
this.enableEditing(this.rows().length < this.options.maxRows);
}
}
set loading(value) {
if(value)
this.el.setAttribute('loading', true);
else
this.el.removeAttribute('loading');
}
set enableFooter(state) { state ? this.el.removeAttribute('footer'): this.el.setAttribute('footer', 'hidden')}
set enableHeader(state) { state ? this.el.removeAttribute('header'): this.el.setAttribute('header', 'hidden')}
/**
* Clears the grid content
*/
clear() {
this.dataset.innerHTML = '';
for(let filter of this.filters) {
if(filter) filter.value='';
}
for(let header of this.header.querySelectorAll('.cell span')) {
header.classList.remove('active')
}
this.activeRows = 0;
this.totalRows = 0;
this.updateFooter();
}
/**
* Applies column filters to the content
*/
filter() {
let rows = this.dataset.querySelectorAll('.row');
this.activeRows = 0;
for(let r = 0; r < rows.length; r++) {
let valid = true;
let row = rows[r];
for(let i = 0; i < this.filters.length; i++) {
if(this.filters[i]) {
let value = this.filters[i].value;
if(value != '') {
if(this.filters[i].nodeName == 'SELECT' && row.querySelectorAll('.cell')[i+1].innerText != value) valid = false;
if(this.filters[i].nodeName == 'INPUT') {
var str = value.replace('(', '\\(').replace(')', '\\)');
var re = RegExp(str, 'i');
if(!re.test(row.querySelectorAll('.cell')[i+1].innerText)) valid = false;
}
}
}
}
if(!valid) {
this.hideRow(row);
} else {
this.showRow(row);
this.activeRows++;
}
}
this.updateFooter();
this.onRowFiltered();
}
/**
* checks grid validity: - minRows criteria
*/
isValid() {
let valid = true;
if(this.options.minRows != -1) {
valid = valid && this.rows().length >= this.options.minRows;
}
return valid;
}
/**
* Event handler when grid is filtered. overridable.
*/
onRowFiltered() { }
/**
* Sort the content
* @param {number} col The column index to sort on
* @param {string} order Sets the sort order. Either 'asc' or 'desc'.
* @param {boolean} isNumber If true, cell values will be sorted as numbers. If false or null values will be sorted as strings.
*/
sort(col, order, isNumber) {
let index = [];
let i = 0;
let rows = this.rows();
for(i = 0; i < rows.length; i++) {
let current = rows[i];
let value = current.querySelector('.cell:nth-child(' + (col + 1) + ')').innerText.toLowerCase();
if(isNumber) {
let n = parseFloat(value);
value = !isNaN(n) ? n: -1;
}
index.push({value: value, row: current});
}
if(order == 'asc') {
index.sort((a,b) => (a.value > b.value) ? 1 : ((b.value > a.value) ? -1 : 0));
} else {
index.sort((a,b) => (a.value < b.value) ? 1 : ((b.value < a.value) ? -1 : 0));
}
for(i = 0; i < index.length; i++) {
let item = index[i];
let row = item.row.parentElement.removeChild(item.row);
this.dataset.appendChild(row);
}
}
/**
* Rebuilds the columns filter lists.
*/
updateFilters() {
for(let i = 0; i < this.filters.length; i++) {
let filter = this.filters[i];
if(filter && filter.nodeName == 'SELECT') {
filter.innerHTML = '';
filter.appendChild(ui.create(''));
var values = this.getColValues(i);
for(let o = 0; o < values.length; o++) {
var val = values[o];
filter.appendChild(ui.create(``));
}
}
}
}
updateFooter() {
this.footer.querySelector('.displayed').innerText = this.filteredRows.length;
this.footer.querySelector('.total').innerText = this.rows().length;
}
/**
* @private
*/
enableEditing(allowEditing) {
if(allowEditing) {
this.btNew.classList.remove('disabled');
} else {
this.btNew.classList.add('disabled');
}
}
/**
* Renders the inline edit form
* @private
* @param {element} row the targetted grid-row element to be edited
*/
buildEditor(row) {
let editor = ui.create(`
`);
let values = row ? row.querySelectorAll('.cell'): null;
for(let i = 0; i < this.options.headers.length; i++) {
let header = this.options.headers[i];
// TODO use header type to generate either inputs or selects
let cell = ui.create(``);
editor.appendChild(cell)
}
let btSave = ui.create(``);
let btCancel = ui.create(``);
if(values) {
btSave.addEventListener('click', this.onRowUpdate.bind(this));
btCancel.addEventListener('click', this.onRowCancelEdit.bind(this));
} else {
btSave.addEventListener('click', this.onRowCreate.bind(this));
btCancel.addEventListener('click', this.onRowCancelCreate.bind(this));
}
let actions = $(``);
actions.appendChild(btCancel);
actions.appendChild(btSave);
editor.appendChild(actions);
return editor;
}
/**
* Gets a grid-row element based on its id
* @param {string} id the target id
* @return {element|null} the matched grid-row element
*/
getRowById(id) {
let rows = this.dataset.querySelectorAll('.row:not(.hidden)');
for(let row of rows) {
if(row.getAttribute('data-id') == id) return row;
}
}
/**
* Gets an array of all distinct values of a column
* @param {number} num The index of the column to be scanned (starting from 0)
* @return {array} An array of available values
*/
getColValues(col) {
let values = [];
this.dataset.querySelectorAll('.cell:nth-child(' + (col + 2) + ')').forEach( function(el) {
if(values.indexOf(el.innerText) == -1) values.push(el.innerText);
});
return values.sort();
}
/**
* Hides a row element
* @param {element} row the target grid-row element
*/
hideRow(row) { row.classList.add('hidden'); }
/**
* Shows a grid-row element
* @param {element} row the target grid-row element
*/
showRow(row) { row.classList.remove('hidden'); }
/**
* Shows the inline editor for adding a new row
*/
newRow() {
this.editing = true;
this.dataset.appendChild(this.buildEditor());
}
/**
* Shows the inline editor for editing an existing row
* @param {element} row the target grid-row element
*/
editRow(row) {
this.editing = true;
this.editedRow = row;
this.hideRow(row);
row.parentNode.insertBefore(this.buildEditor(row), row.nextSibling);
}
/**
* Validates and applies the inline editing
* @private
*/
updateRow() {
let values = this.dataset.querySelectorAll('.row.editor .cell input');
let cells = this.editedRow.querySelectorAll('.cell');
for(let i = 0; i < values.length; i++) {
$(values[i]).classList.remove('validation-failed')
if(values[i].value == '') {
$(values[i]).classList.add('validation-failed');
return;
}
}
for(let i = 0; i < values.length; i++) {
cells[i+1].innerHTML = values[i].value;
}
this.editing = false;
this.showRow(this.editedRow);
this.dataset.querySelector('.row.editor').remove();
}
/**
* Validates and adds the inline editing
*/
createRow() {
let fields = this.dataset.querySelectorAll('.row.editor .cell input');
let data = [];
for(let field of fields) {
field.classList.remove('validation-failed')
if(field.value != '') {
data.push(field.value);
} else {
field.classList.add('validation-failed');
return;
}
}
this.addRow('', data);
this.dataset.querySelector('.row.editor').remove();
this.enableEditing(this.rows().length < this.options.maxRows);
this.editing = false;
}
/**
* Adds a row to the content
* @param {string} id A unique identifier for the row (id value)
* @param {array} data An array of the column values. Item count must match column amount.
* @param {boolean} skipUpdate If set to true, avoids updating column filters.
* Consider using skipUpdate when adding a batch of rows, drastically increasing performances.
* Column filters can be updated afterwards suing the DataGrid.updateFilters() method.
* @return {element} The created grid-row element
*/
addRow(id, data, skipUpdate) {
let row = ui.create('');
row.setAttribute('data-id', typeof id === 'object' ? JSON.stringify(id): id );
if(this.options.allowRowDrag) {
row.addEventListener('mousedown', this.onStartDragRow.bind(this));
}
// add selection cell
let cell = ui.create('');
cell.addEventListener('click', this.onCellClick.bind(this));
row.appendChild(cell);
for(let i = 0; i < data.length; i++) {
let cellAttr = '';
let cellFix = '';
let cellValue = data[i];
let cellTitle = ui.create(`