From 48f98be8d2a2d69bb883bd25d3f6bbc14b8f753a Mon Sep 17 00:00:00 2001 From: Faris Ansari Date: Wed, 28 Feb 2018 17:49:33 +0530 Subject: [PATCH] Remove Column bug fix --- dist/frappe-datatable.cjs.js | 102 +++++++++++++---------------------- dist/frappe-datatable.js | 102 +++++++++++++---------------------- docs/frappe-datatable.js | 102 +++++++++++++---------------------- index.html | 2 +- src/columnmanager.js | 75 ++++++++++++-------------- src/rowmanager.js | 2 +- 6 files changed, 145 insertions(+), 240 deletions(-) diff --git a/dist/frappe-datatable.cjs.js b/dist/frappe-datatable.cjs.js index 5141a2d..a808358 100644 --- a/dist/frappe-datatable.cjs.js +++ b/dist/frappe-datatable.cjs.js @@ -221,12 +221,10 @@ var isObject_1 = isObject; var commonjsGlobal = typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {}; -/** Detect free variable `global` from Node.js. */ var freeGlobal = typeof commonjsGlobal == 'object' && commonjsGlobal && commonjsGlobal.Object === Object && commonjsGlobal; var _freeGlobal = freeGlobal; -/** Detect free variable `self`. */ var freeSelf = typeof self == 'object' && self && self.Object === Object && self; /** Used as a reference to the global object. */ @@ -234,34 +232,16 @@ var root = _freeGlobal || freeSelf || Function('return this')(); var _root = root; -/** - * Gets the timestamp of the number of milliseconds that have elapsed since - * the Unix epoch (1 January 1970 00:00:00 UTC). - * - * @static - * @memberOf _ - * @since 2.4.0 - * @category Date - * @returns {number} Returns the timestamp. - * @example - * - * _.defer(function(stamp) { - * console.log(_.now() - stamp); - * }, _.now()); - * // => Logs the number of milliseconds it took for the deferred invocation. - */ var now = function() { return _root.Date.now(); }; var now_1 = now; -/** Built-in value references. */ var Symbol = _root.Symbol; var _Symbol = Symbol; -/** Used for built-in method references. */ var objectProto = Object.prototype; /** Used to check objects for own properties. */ @@ -329,7 +309,6 @@ function objectToString(value) { var _objectToString = objectToString; -/** `Object#toString` result references. */ var nullTag = '[object Null]'; var undefinedTag = '[object Undefined]'; @@ -384,7 +363,6 @@ function isObjectLike(value) { var isObjectLike_1 = isObjectLike; -/** `Object#toString` result references. */ var symbolTag = '[object Symbol]'; /** @@ -411,7 +389,6 @@ function isSymbol(value) { var isSymbol_1 = isSymbol; -/** Used as references for various `Number` constants. */ var NAN = 0 / 0; /** Used to match leading and trailing whitespace. */ @@ -475,7 +452,6 @@ function toNumber(value) { var toNumber_1 = toNumber; -/** Error message constants. */ var FUNC_ERROR_TEXT = 'Expected a function'; /* Built-in method references for those with the same name as other `lodash` methods. */ @@ -662,7 +638,6 @@ function debounce(func, wait, options) { var debounce_1 = debounce; -/** Error message constants. */ var FUNC_ERROR_TEXT$1 = 'Expected a function'; /** @@ -1390,40 +1365,22 @@ class ColumnManager { refreshHeader() { const columns = this.datamanager.getColumns(); + const $cols = $.each('.data-table-col[data-is-header]', this.header); - if (!$('.data-table-col', this.header)) { - // insert html + const refreshHTML = + // first init + !$('.data-table-col', this.header) || + // deleted column + columns.length < $cols.length; - let html = this.rowmanager.getRowHTML(columns, { - isHeader: 1 - }); - if (this.options.enableInlineFilters) { - html += this.rowmanager.getRowHTML(columns, { - isFilter: 1 - }); - } - - $('thead', this.header).innerHTML = html; + if (refreshHTML) { + // refresh html + $('thead', this.header).innerHTML = this.getHeaderHTML(columns); this.$filterRow = $('.data-table-row[data-is-filter]', this.header); - - if (this.$filterRow) { - // hide filter row immediately, so it doesn't disturb layout - $.style(this.$filterRow, { - display: 'none' - }); - } + $.style(this.$filterRow, { display: 'none' }); } else { - // refresh dom state - const $cols = $.each('.data-table-col', this.header); - if (columns.length < $cols.length) { - // deleted column - $('thead', this.header).innerHTML = this.rowmanager.getRowHTML(columns, { - isHeader: 1 - }); - return; - } - + // update data-attributes $cols.map(($col, i) => { const column = columns[i]; // column sorted or order changed @@ -1443,6 +1400,18 @@ class ColumnManager { this.$columnMap = []; } + getHeaderHTML(columns) { + let html = this.rowmanager.getRowHTML(columns, { + isHeader: 1 + }); + if (this.options.enableInlineFilters) { + html += this.rowmanager.getRowHTML(columns, { + isFilter: 1 + }); + } + return html; + } + bindEvents() { this.bindDropdown(); this.bindResizeColumn(); @@ -1669,20 +1638,21 @@ class ColumnManager { }); } - toggleFilter() { - this.isFilterShown = this.isFilterShown || false; - - if (this.isFilterShown) { - $.style(this.$filterRow, { - display: 'none' - }); + toggleFilter(flag) { + let showFilter; + if (flag === undefined) { + showFilter = !this.isFilterShown; } else { - $.style(this.$filterRow, { - display: '' - }); + showFilter = flag; } - this.isFilterShown = !this.isFilterShown; + if (showFilter) { + $.style(this.$filterRow, { display: '' }); + } else { + $.style(this.$filterRow, { display: 'none' }); + } + + this.isFilterShown = showFilter; this.style.setBodyStyle(); } @@ -2672,7 +2642,7 @@ class RowManager { const dataAttr = makeDataAttributeString(props); if (props.isFilter) { - row = row.map(cell => (Object.assign(cell, { + row = row.map(cell => (Object.assign({}, cell, { content: this.getFilterInput({ colIndex: cell.colIndex }), diff --git a/dist/frappe-datatable.js b/dist/frappe-datatable.js index b44a553..a5f1709 100644 --- a/dist/frappe-datatable.js +++ b/dist/frappe-datatable.js @@ -220,12 +220,10 @@ var isObject_1 = isObject; var commonjsGlobal = typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {}; -/** Detect free variable `global` from Node.js. */ var freeGlobal = typeof commonjsGlobal == 'object' && commonjsGlobal && commonjsGlobal.Object === Object && commonjsGlobal; var _freeGlobal = freeGlobal; -/** Detect free variable `self`. */ var freeSelf = typeof self == 'object' && self && self.Object === Object && self; /** Used as a reference to the global object. */ @@ -233,34 +231,16 @@ var root = _freeGlobal || freeSelf || Function('return this')(); var _root = root; -/** - * Gets the timestamp of the number of milliseconds that have elapsed since - * the Unix epoch (1 January 1970 00:00:00 UTC). - * - * @static - * @memberOf _ - * @since 2.4.0 - * @category Date - * @returns {number} Returns the timestamp. - * @example - * - * _.defer(function(stamp) { - * console.log(_.now() - stamp); - * }, _.now()); - * // => Logs the number of milliseconds it took for the deferred invocation. - */ var now = function() { return _root.Date.now(); }; var now_1 = now; -/** Built-in value references. */ var Symbol = _root.Symbol; var _Symbol = Symbol; -/** Used for built-in method references. */ var objectProto = Object.prototype; /** Used to check objects for own properties. */ @@ -328,7 +308,6 @@ function objectToString(value) { var _objectToString = objectToString; -/** `Object#toString` result references. */ var nullTag = '[object Null]'; var undefinedTag = '[object Undefined]'; @@ -383,7 +362,6 @@ function isObjectLike(value) { var isObjectLike_1 = isObjectLike; -/** `Object#toString` result references. */ var symbolTag = '[object Symbol]'; /** @@ -410,7 +388,6 @@ function isSymbol(value) { var isSymbol_1 = isSymbol; -/** Used as references for various `Number` constants. */ var NAN = 0 / 0; /** Used to match leading and trailing whitespace. */ @@ -474,7 +451,6 @@ function toNumber(value) { var toNumber_1 = toNumber; -/** Error message constants. */ var FUNC_ERROR_TEXT = 'Expected a function'; /* Built-in method references for those with the same name as other `lodash` methods. */ @@ -661,7 +637,6 @@ function debounce(func, wait, options) { var debounce_1 = debounce; -/** Error message constants. */ var FUNC_ERROR_TEXT$1 = 'Expected a function'; /** @@ -1389,40 +1364,22 @@ class ColumnManager { refreshHeader() { const columns = this.datamanager.getColumns(); + const $cols = $.each('.data-table-col[data-is-header]', this.header); - if (!$('.data-table-col', this.header)) { - // insert html + const refreshHTML = + // first init + !$('.data-table-col', this.header) || + // deleted column + columns.length < $cols.length; - let html = this.rowmanager.getRowHTML(columns, { - isHeader: 1 - }); - if (this.options.enableInlineFilters) { - html += this.rowmanager.getRowHTML(columns, { - isFilter: 1 - }); - } - - $('thead', this.header).innerHTML = html; + if (refreshHTML) { + // refresh html + $('thead', this.header).innerHTML = this.getHeaderHTML(columns); this.$filterRow = $('.data-table-row[data-is-filter]', this.header); - - if (this.$filterRow) { - // hide filter row immediately, so it doesn't disturb layout - $.style(this.$filterRow, { - display: 'none' - }); - } + $.style(this.$filterRow, { display: 'none' }); } else { - // refresh dom state - const $cols = $.each('.data-table-col', this.header); - if (columns.length < $cols.length) { - // deleted column - $('thead', this.header).innerHTML = this.rowmanager.getRowHTML(columns, { - isHeader: 1 - }); - return; - } - + // update data-attributes $cols.map(($col, i) => { const column = columns[i]; // column sorted or order changed @@ -1442,6 +1399,18 @@ class ColumnManager { this.$columnMap = []; } + getHeaderHTML(columns) { + let html = this.rowmanager.getRowHTML(columns, { + isHeader: 1 + }); + if (this.options.enableInlineFilters) { + html += this.rowmanager.getRowHTML(columns, { + isFilter: 1 + }); + } + return html; + } + bindEvents() { this.bindDropdown(); this.bindResizeColumn(); @@ -1668,20 +1637,21 @@ class ColumnManager { }); } - toggleFilter() { - this.isFilterShown = this.isFilterShown || false; - - if (this.isFilterShown) { - $.style(this.$filterRow, { - display: 'none' - }); + toggleFilter(flag) { + let showFilter; + if (flag === undefined) { + showFilter = !this.isFilterShown; } else { - $.style(this.$filterRow, { - display: '' - }); + showFilter = flag; } - this.isFilterShown = !this.isFilterShown; + if (showFilter) { + $.style(this.$filterRow, { display: '' }); + } else { + $.style(this.$filterRow, { display: 'none' }); + } + + this.isFilterShown = showFilter; this.style.setBodyStyle(); } @@ -2671,7 +2641,7 @@ class RowManager { const dataAttr = makeDataAttributeString(props); if (props.isFilter) { - row = row.map(cell => (Object.assign(cell, { + row = row.map(cell => (Object.assign({}, cell, { content: this.getFilterInput({ colIndex: cell.colIndex }), diff --git a/docs/frappe-datatable.js b/docs/frappe-datatable.js index b44a553..a5f1709 100644 --- a/docs/frappe-datatable.js +++ b/docs/frappe-datatable.js @@ -220,12 +220,10 @@ var isObject_1 = isObject; var commonjsGlobal = typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {}; -/** Detect free variable `global` from Node.js. */ var freeGlobal = typeof commonjsGlobal == 'object' && commonjsGlobal && commonjsGlobal.Object === Object && commonjsGlobal; var _freeGlobal = freeGlobal; -/** Detect free variable `self`. */ var freeSelf = typeof self == 'object' && self && self.Object === Object && self; /** Used as a reference to the global object. */ @@ -233,34 +231,16 @@ var root = _freeGlobal || freeSelf || Function('return this')(); var _root = root; -/** - * Gets the timestamp of the number of milliseconds that have elapsed since - * the Unix epoch (1 January 1970 00:00:00 UTC). - * - * @static - * @memberOf _ - * @since 2.4.0 - * @category Date - * @returns {number} Returns the timestamp. - * @example - * - * _.defer(function(stamp) { - * console.log(_.now() - stamp); - * }, _.now()); - * // => Logs the number of milliseconds it took for the deferred invocation. - */ var now = function() { return _root.Date.now(); }; var now_1 = now; -/** Built-in value references. */ var Symbol = _root.Symbol; var _Symbol = Symbol; -/** Used for built-in method references. */ var objectProto = Object.prototype; /** Used to check objects for own properties. */ @@ -328,7 +308,6 @@ function objectToString(value) { var _objectToString = objectToString; -/** `Object#toString` result references. */ var nullTag = '[object Null]'; var undefinedTag = '[object Undefined]'; @@ -383,7 +362,6 @@ function isObjectLike(value) { var isObjectLike_1 = isObjectLike; -/** `Object#toString` result references. */ var symbolTag = '[object Symbol]'; /** @@ -410,7 +388,6 @@ function isSymbol(value) { var isSymbol_1 = isSymbol; -/** Used as references for various `Number` constants. */ var NAN = 0 / 0; /** Used to match leading and trailing whitespace. */ @@ -474,7 +451,6 @@ function toNumber(value) { var toNumber_1 = toNumber; -/** Error message constants. */ var FUNC_ERROR_TEXT = 'Expected a function'; /* Built-in method references for those with the same name as other `lodash` methods. */ @@ -661,7 +637,6 @@ function debounce(func, wait, options) { var debounce_1 = debounce; -/** Error message constants. */ var FUNC_ERROR_TEXT$1 = 'Expected a function'; /** @@ -1389,40 +1364,22 @@ class ColumnManager { refreshHeader() { const columns = this.datamanager.getColumns(); + const $cols = $.each('.data-table-col[data-is-header]', this.header); - if (!$('.data-table-col', this.header)) { - // insert html + const refreshHTML = + // first init + !$('.data-table-col', this.header) || + // deleted column + columns.length < $cols.length; - let html = this.rowmanager.getRowHTML(columns, { - isHeader: 1 - }); - if (this.options.enableInlineFilters) { - html += this.rowmanager.getRowHTML(columns, { - isFilter: 1 - }); - } - - $('thead', this.header).innerHTML = html; + if (refreshHTML) { + // refresh html + $('thead', this.header).innerHTML = this.getHeaderHTML(columns); this.$filterRow = $('.data-table-row[data-is-filter]', this.header); - - if (this.$filterRow) { - // hide filter row immediately, so it doesn't disturb layout - $.style(this.$filterRow, { - display: 'none' - }); - } + $.style(this.$filterRow, { display: 'none' }); } else { - // refresh dom state - const $cols = $.each('.data-table-col', this.header); - if (columns.length < $cols.length) { - // deleted column - $('thead', this.header).innerHTML = this.rowmanager.getRowHTML(columns, { - isHeader: 1 - }); - return; - } - + // update data-attributes $cols.map(($col, i) => { const column = columns[i]; // column sorted or order changed @@ -1442,6 +1399,18 @@ class ColumnManager { this.$columnMap = []; } + getHeaderHTML(columns) { + let html = this.rowmanager.getRowHTML(columns, { + isHeader: 1 + }); + if (this.options.enableInlineFilters) { + html += this.rowmanager.getRowHTML(columns, { + isFilter: 1 + }); + } + return html; + } + bindEvents() { this.bindDropdown(); this.bindResizeColumn(); @@ -1668,20 +1637,21 @@ class ColumnManager { }); } - toggleFilter() { - this.isFilterShown = this.isFilterShown || false; - - if (this.isFilterShown) { - $.style(this.$filterRow, { - display: 'none' - }); + toggleFilter(flag) { + let showFilter; + if (flag === undefined) { + showFilter = !this.isFilterShown; } else { - $.style(this.$filterRow, { - display: '' - }); + showFilter = flag; } - this.isFilterShown = !this.isFilterShown; + if (showFilter) { + $.style(this.$filterRow, { display: '' }); + } else { + $.style(this.$filterRow, { display: 'none' }); + } + + this.isFilterShown = showFilter; this.style.setBodyStyle(); } @@ -2671,7 +2641,7 @@ class RowManager { const dataAttr = makeDataAttributeString(props); if (props.isFilter) { - row = row.map(cell => (Object.assign(cell, { + row = row.map(cell => (Object.assign({}, cell, { content: this.getFilterInput({ colIndex: cell.colIndex }), diff --git a/index.html b/index.html index 333f7af..a4c587b 100644 --- a/index.html +++ b/index.html @@ -70,7 +70,7 @@ layout: 'fluid', columns, data, - // enableInlineFilters: true, + enableInlineFilters: true, getEditor(colIndex, rowIndex, value, parent) { // editing obj only for date field if (colIndex != 6) return; diff --git a/src/columnmanager.js b/src/columnmanager.js index 6f4191a..031e0b9 100644 --- a/src/columnmanager.js +++ b/src/columnmanager.js @@ -32,40 +32,22 @@ export default class ColumnManager { refreshHeader() { const columns = this.datamanager.getColumns(); + const $cols = $.each('.data-table-col[data-is-header]', this.header); - if (!$('.data-table-col', this.header)) { - // insert html + const refreshHTML = + // first init + !$('.data-table-col', this.header) || + // deleted column + columns.length < $cols.length; - let html = this.rowmanager.getRowHTML(columns, { - isHeader: 1 - }); - if (this.options.enableInlineFilters) { - html += this.rowmanager.getRowHTML(columns, { - isFilter: 1 - }); - } - - $('thead', this.header).innerHTML = html; + if (refreshHTML) { + // refresh html + $('thead', this.header).innerHTML = this.getHeaderHTML(columns); this.$filterRow = $('.data-table-row[data-is-filter]', this.header); - - if (this.$filterRow) { - // hide filter row immediately, so it doesn't disturb layout - $.style(this.$filterRow, { - display: 'none' - }); - } + $.style(this.$filterRow, { display: 'none' }); } else { - // refresh dom state - const $cols = $.each('.data-table-col', this.header); - if (columns.length < $cols.length) { - // deleted column - $('thead', this.header).innerHTML = this.rowmanager.getRowHTML(columns, { - isHeader: 1 - }); - return; - } - + // update data-attributes $cols.map(($col, i) => { const column = columns[i]; // column sorted or order changed @@ -85,6 +67,18 @@ export default class ColumnManager { this.$columnMap = []; } + getHeaderHTML(columns) { + let html = this.rowmanager.getRowHTML(columns, { + isHeader: 1 + }); + if (this.options.enableInlineFilters) { + html += this.rowmanager.getRowHTML(columns, { + isFilter: 1 + }); + } + return html; + } + bindEvents() { this.bindDropdown(); this.bindResizeColumn(); @@ -311,20 +305,21 @@ export default class ColumnManager { }); } - toggleFilter() { - this.isFilterShown = this.isFilterShown || false; - - if (this.isFilterShown) { - $.style(this.$filterRow, { - display: 'none' - }); + toggleFilter(flag) { + let showFilter; + if (flag === undefined) { + showFilter = !this.isFilterShown; } else { - $.style(this.$filterRow, { - display: '' - }); + showFilter = flag; } - this.isFilterShown = !this.isFilterShown; + if (showFilter) { + $.style(this.$filterRow, { display: '' }); + } else { + $.style(this.$filterRow, { display: 'none' }); + } + + this.isFilterShown = showFilter; this.style.setBodyStyle(); } diff --git a/src/rowmanager.js b/src/rowmanager.js index 28fb68d..21caaa2 100644 --- a/src/rowmanager.js +++ b/src/rowmanager.js @@ -200,7 +200,7 @@ export default class RowManager { const dataAttr = makeDataAttributeString(props); if (props.isFilter) { - row = row.map(cell => (Object.assign(cell, { + row = row.map(cell => (Object.assign({}, cell, { content: this.getFilterInput({ colIndex: cell.colIndex }),