diff --git a/src/widgets/table/Table.js b/src/widgets/table/Table.js index 742e39b..d158e21 100644 --- a/src/widgets/table/Table.js +++ b/src/widgets/table/Table.js @@ -87,7 +87,7 @@ export class Table { this.mode = mode; - if (mode == Table.CLEAN) { + if (mode === Table.CLEAN) { this.id = 0; } } @@ -131,33 +131,31 @@ export class Table { makeFilterForm() { - let that = this; - this.filterForm = El('form', { novalidate: true, className: 'sp-form filter-main' }); Render.makeUiElements(Ut.objVal(this.opts.filter).children, this.filterForm); this.ui.append(this.filterForm); - this.filterForm.dxOn('changed clear', 'input[type="text"]', () => that.filterForm.dxTrigger('submit.form')); - this.filterForm.dxOn('change', 'select, input[type="radio"], input[type="checkbox"]', () => that.filterForm.dxTrigger('submit.form')); + this.filterForm.dxOn('changed clear', 'input[type="text"]', _ => this.filterForm.dxTrigger('submit.form')); + this.filterForm.dxOn('change', 'select, input[type="radio"], input[type="checkbox"]', () => this.filterForm.dxTrigger('submit.form')); new FormValidator(this.filterForm, { - onInit: el => that.filterFormEl = el, - onSubmit: function(vars) { + onInit: el => this.filterFormEl = el, + onSubmit: vars => { - that.vars = vars; + this.vars = vars; - that.vars.set('pg', 1); + this.vars.set('pg', 1); - that.setMode(Table.CLEAN); + this.setMode(Table.CLEAN); - that.makeRequest(); + this.makeRequest(); } }); - fillData(that.filterFormEl, this.vars); + fillData(this.filterFormEl, this.vars); } // Make header toolbar @@ -198,7 +196,7 @@ export class Table { this.makeRequest(); }); - this.paginationEl.dxOn('click', 'a.btn-after', function() { + this.paginationEl.dxOn('click', 'a.btn-after', _ => { this.vars.set('before', ''); this.vars.set('after', this.data.after); @@ -278,11 +276,9 @@ export class Table { makeTableRows() { - let that = this; + if (this.mode === Table.UPDATE) { - if (this.mode == Table.UPDATE) { - - let row = this.getRow(this.id); + const row = this.getRow(this.id); if (row) { @@ -294,7 +290,7 @@ export class Table { for (; n < data.length; n++) { - let cell = that.opts.header.cell ? (that.opts.header.cell[ n - 1 ] || {}) : {}; + let cell = this.opts.header.cell ? (this.opts.header.cell[ n - 1 ] || {}) : {}; let column = El('div', { className: 't-col' }); @@ -306,53 +302,54 @@ export class Table { column.dxHtml(data[n]); } - if (n == 1 && that.opts.sortable) { + if (n === 1 && this.opts.sortable) { column.classList.add('flex', 'v-center'); column.prepend( El('i', { className: 'handle' }) ); } } } + + return; } - else { - this.data.items.forEach((data, i) => { + this.data.items.forEach((data, i) => { - let tbody = El('div', { - className: 'tbody' + (that.opts.body && that.opts.body.cls ? ' ' + that.opts.body.cls : ''), - 'data-id': data[0], - 'data-pos': i - }); - - let n = 1; - - for (; n < data.length; n++) { - - let cell = that.opts.header.cell ? (that.opts.header.cell[ n - 1 ] || {}) : {}; - - let column = El('div', { className: 't-col' }); - - tbody.append( El('div', { className: 'td' + (cell.cls ? ' ' + cell.cls : ''), 'data-label': cell.text }, - column - )); - - if (data[n]) { - column.dxHtml(data[n]); - } - - if (n == 1 && that.opts.sortable) { - column.classList.add('flex', 'v-center'); - column.prepend( El('i', { className: 'handle' }) ); - } - - if (that.mode == Table.PREPEND) { - that.table.prepend(tbody); - } - else { - that.table.append(tbody); - } - } + let tbody = El('div', { + className: 'tbody' + (this.opts.body && that.opts.body.cls ? ' ' + this.opts.body.cls : ''), + 'data-id': data[0], + 'data-pos': i }); - } + + let n = 1; + + for (; n < data.length; n++) { + + let cell = this.opts.header.cell ? (this.opts.header.cell[ n - 1 ] || {}) : {}; + + let column = El('div', { className: 't-col' }); + + tbody.append( El('div', { className: 'td' + (cell.cls ? ' ' + cell.cls : ''), 'data-label': cell.text }, + column + )); + + if (data[n]) { + column.dxHtml(data[n]); + } + + if (n === 1 && this.opts.sortable) { + column.classList.add('flex', 'v-center'); + column.prepend( El('i', { className: 'handle' }) ); + } + + if (this.mode === Table.PREPEND) { + this.table.prepend(tbody); + continue; + } + + this.table.append(tbody); + } + + }); } // Set info rows @@ -365,11 +362,9 @@ export class Table { makeRequest() { - let that = this; - let vars = {}; - if (this.mode == Table.UPDATE) { + if (this.mode === Table.UPDATE) { vars.id = this.id; } else { @@ -381,12 +376,12 @@ export class Table { this.caller(this.reqOpts).then(jr => { - if (jr.code != Rc.DONE) { - that.setInfo('No Data'); - return; - } + if (jr.code != Rc.DONE) { + this.setInfo('No Data'); + return; + } - that.setTableData(jr.data); + this.setTableData(jr.data); }).catch(error => console.error(error)); } @@ -395,12 +390,11 @@ export class Table { setSortable() { - let that = this, isHandle = false, toDrag; - let isBefore = function(a, b) { - if (a.parentNode == b.parentNode) { + const isBefore = (a, b) => { + if (a.parentNode === b.parentNode) { for (let cur = a; cur; cur = cur.previousSibling) { if (cur === b) { return true; @@ -411,51 +405,48 @@ export class Table { return false; } - this.table.dxOn('mousedown mouseup', 'i.handle', function(e) { + this.table.dxOn('mousedown mouseup', 'i.handle', e => { - let parent = this.dxParents('.tbody'); + const parent = this.dxParents('.tbody'); - if (e.type == 'mousedown') { + if (e.type === 'mousedown') { isHandle = true; parent.setAttribute('draggable', true); - } - else { - isHandle = false; - parent.removeAttribute('draggable'); + return; } + isHandle = false; + parent.removeAttribute('draggable'); }); - this.table.dxOn('dragenter', '.tbody', function(e) { + this.table.dxOn('dragenter', '.tbody', (e, t) => { if (!isHandle) { return; } - let target = this.matches('.tbody') ? this : this.dxParents('.tbody'); + const target = t.matches('.tbody') ? t : t.dxParents('.tbody'); if (isBefore( toDrag, target )) { target.before(toDrag); - } - else { - - if (target.nextElementSibling === null) { - $('.sp-table').append( toDrag ); - } - else { - target.nextElementSibling.before(toDrag); - } + return; } + if (target.nextElementSibling === null) { + $('.sp-table').append( toDrag ); + return; + } + + target.nextElementSibling.before(toDrag); }); - this.table.dxOn('dragstart', '.tbody', function(e) { + this.table.dxOn('dragstart', '.tbody', (e, t) => { if (!isHandle) { return; } - toDrag = this; + toDrag = t; e.dataTransfer.setData('text/plain', null); e.dataTransfer.effectAllowed = 'move'; @@ -463,7 +454,7 @@ export class Table { toDrag.style.opacity = 0.4; }); - this.table.dxOn('dragend', '.tbody', function(e) { + this.table.dxOn('dragend', '.tbody', _ => { if (!isHandle) { return; @@ -478,7 +469,7 @@ export class Table { let data = {}; - that.table.dxFind('.tbody', (el, i) => { + this.table.dxFind('.tbody', (el, i) => { if (el.dataset.pos != i && !onSort) { onSort = true; @@ -487,16 +478,14 @@ export class Table { if (el.dataset.pos != i) { data[ el.dataset.id ] = i; - el.dataset.pos = i; } }); if (onSort) { - Ut.trigger(that.opts.onSort, that, data); + Ut.trigger(this.opts.onSort, this, data); onSort = false; } - }); } @@ -546,10 +535,12 @@ export class Table { j = 1; } + const currentPage = parseInt(this.vars.get('pg')); + for (let i = this.data.pagination.start; i <= this.data.pagination.end; i++) { pg_btns[j] = [ - i, i, (this.vars.get('pg') == i) + i, i, (currentPage === i) ] j++; @@ -604,10 +595,10 @@ export class Table { if (data) { this.setTableData(data); + return; } - else { - this.makeRequest(); - } + + this.makeRequest(); } // Update All Rows @@ -618,38 +609,39 @@ export class Table { if (data) { this.setTableData(data); + return; } - else { - this.makeRequest(); - } + + this.makeRequest(); } // Delete Row deleteRow(id) { - let row = this.getRow(id); + const row = this.getRow(id); - if (row) { + if (!row) { + return; + } - this.rows--; - this.updateInfoRows(); + this.rows--; + this.updateInfoRows(); - row.remove(); + row.remove(); - if (!this.rows) { + if (!this.rows) { - let pg = this.vars.get('pg'); + let pg = parseInt(this.vars.get('pg')); - if (pg > 1) { - this.vars.set('pg', --pg); - } - - this.update(); + if (pg > 1) { + this.vars.set('pg', --pg); } - Ut.trigger(this.opts.onUpdate, this); + this.update(); } + + Ut.trigger(this.opts.onUpdate, this); } // Add Row At The End of the table @@ -660,10 +652,10 @@ export class Table { if (data) { this.setTableData(data); + return; } - else { - this.makeRequest(); - } + + this.makeRequest(); } // Add Row At Begining of the table @@ -674,10 +666,10 @@ export class Table { if (data) { this.setTableData(data); + return; } - else { - this.makeRequest(); - } + + this.makeRequest(); } // Set Info Table