mirror of
https://github.com/koalyptus/TableFilter.git
synced 2024-05-04 07:33:18 +02:00
linked filters refactor
This commit is contained in:
parent
5d4def11fc
commit
62a55c8d95
4
dist/starter.html
vendored
4
dist/starter.html
vendored
|
@ -1,10 +1,10 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<title>tablefilter v0.6.60 - Starter</title>
|
<title>tablefilter v0.6.62 - Starter</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<h1>tablefilter v0.6.60</h1>
|
<h1>tablefilter v0.6.62</h1>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
2
dist/tablefilter/tablefilter.js
vendored
2
dist/tablefilter/tablefilter.js
vendored
File diff suppressed because one or more lines are too long
2
dist/tablefilter/tablefilter.js.map
vendored
2
dist/tablefilter/tablefilter.js.map
vendored
File diff suppressed because one or more lines are too long
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "tablefilter",
|
"name": "tablefilter",
|
||||||
"version": "0.6.61",
|
"version": "0.6.62",
|
||||||
"description": "A Javascript library making HTML tables filterable and a bit more",
|
"description": "A Javascript library making HTML tables filterable and a bit more",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"author": {
|
"author": {
|
||||||
|
|
|
@ -4,6 +4,7 @@ import {
|
||||||
dateSortAsc, sortNumberStr, sortDateStr
|
dateSortAsc, sortNumberStr, sortDateStr
|
||||||
} from '../sort';
|
} from '../sort';
|
||||||
import {isArray, isObj, isEmpty} from '../types';
|
import {isArray, isObj, isEmpty} from '../types';
|
||||||
|
// import {createOpt} from '../dom';
|
||||||
import {NUMBER, FORMATTED_NUMBER, DATE} from '../const';
|
import {NUMBER, FORMATTED_NUMBER, DATE} from '../const';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -144,4 +145,16 @@ export class BaseDropdown extends Feature {
|
||||||
|
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Refresh linked filters to offer only selected options
|
||||||
|
*/
|
||||||
|
linkFilters() {
|
||||||
|
let tf = this.tf;
|
||||||
|
if (!tf.linkedFilters || !tf.activeFilterId) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.refreshAll();
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -178,6 +178,8 @@ export class CheckList extends BaseDropdown {
|
||||||
|
|
||||||
this.emitter.on(['rows-changed'], () => this.refreshAll());
|
this.emitter.on(['rows-changed'], () => this.refreshAll());
|
||||||
|
|
||||||
|
this.emitter.on(['after-filtering'], () => this.linkFilters());
|
||||||
|
|
||||||
/** @inherited */
|
/** @inherited */
|
||||||
this.initialized = true;
|
this.initialized = true;
|
||||||
}
|
}
|
||||||
|
@ -483,6 +485,10 @@ export class CheckList extends BaseDropdown {
|
||||||
getValues(colIndex) {
|
getValues(colIndex) {
|
||||||
let tf = this.tf;
|
let tf = this.tf;
|
||||||
let flt = tf.getFilterElement(colIndex);
|
let flt = tf.getFilterElement(colIndex);
|
||||||
|
if (!flt) {
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
|
||||||
let fltAttr = flt.getAttribute('value');
|
let fltAttr = flt.getAttribute('value');
|
||||||
let values = isEmpty(fltAttr) ? '' : fltAttr;
|
let values = isEmpty(fltAttr) ? '' : fltAttr;
|
||||||
//removes last operator ||
|
//removes last operator ||
|
||||||
|
@ -506,6 +512,7 @@ export class CheckList extends BaseDropdown {
|
||||||
(tf, colIndex, values) => this.selectOptions(colIndex, values)
|
(tf, colIndex, values) => this.selectOptions(colIndex, values)
|
||||||
);
|
);
|
||||||
this.emitter.off(['rows-changed'], () => this.refreshAll());
|
this.emitter.off(['rows-changed'], () => this.refreshAll());
|
||||||
|
this.emitter.off(['after-filtering'], () => this.linkFilters());
|
||||||
|
|
||||||
this.initialized = false;
|
this.initialized = false;
|
||||||
}
|
}
|
||||||
|
|
|
@ -137,6 +137,8 @@ export class Dropdown extends BaseDropdown {
|
||||||
);
|
);
|
||||||
this.emitter.on(['rows-changed'], () => this.refreshAll());
|
this.emitter.on(['rows-changed'], () => this.refreshAll());
|
||||||
|
|
||||||
|
this.emitter.on(['after-filtering'], () => this.linkFilters());
|
||||||
|
|
||||||
/** @inherited */
|
/** @inherited */
|
||||||
this.initialized = true;
|
this.initialized = true;
|
||||||
}
|
}
|
||||||
|
@ -368,6 +370,7 @@ export class Dropdown extends BaseDropdown {
|
||||||
(tf, colIndex, values) => this.selectOptions(colIndex, values)
|
(tf, colIndex, values) => this.selectOptions(colIndex, values)
|
||||||
);
|
);
|
||||||
this.emitter.off(['rows-changed'], () => this.refreshAll());
|
this.emitter.off(['rows-changed'], () => this.refreshAll());
|
||||||
|
this.emitter.off(['after-filtering'], () => this.linkFilters());
|
||||||
this.initialized = false;
|
this.initialized = false;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
import {addEvt, cancelEvt, stopEvt, targetEvt, isKeyPressed} from './event';
|
import {addEvt, cancelEvt, stopEvt, targetEvt, isKeyPressed} from './event';
|
||||||
import {
|
import {
|
||||||
addClass, createElm, createOpt, elm, getText, getFirstTextNode,
|
addClass, createElm/*, createOpt*/, elm, getText, getFirstTextNode,
|
||||||
removeClass, tag
|
removeClass, tag
|
||||||
} from './dom';
|
} from './dom';
|
||||||
import {contains, matchCase, rgxEsc, trim} from './string';
|
import {contains, matchCase, rgxEsc, trim} from './string';
|
||||||
|
@ -1064,11 +1064,6 @@ export class TableFilter {
|
||||||
/* Load extensions */
|
/* Load extensions */
|
||||||
this.initExtensions();
|
this.initExtensions();
|
||||||
|
|
||||||
// Subscribe to events
|
|
||||||
if (this.linkedFilters) {
|
|
||||||
this.emitter.on(['after-filtering'], () => this.linkFilters());
|
|
||||||
}
|
|
||||||
|
|
||||||
this.initialized = true;
|
this.initialized = true;
|
||||||
|
|
||||||
this.onFiltersLoaded(this);
|
this.onFiltersLoaded(this);
|
||||||
|
@ -1474,9 +1469,7 @@ export class TableFilter {
|
||||||
if (this.hasExcludedRows) {
|
if (this.hasExcludedRows) {
|
||||||
emitter.off(['after-filtering'], () => this.setExcludeRows());
|
emitter.off(['after-filtering'], () => this.setExcludeRows());
|
||||||
}
|
}
|
||||||
if (this.linkedFilters) {
|
|
||||||
emitter.off(['after-filtering'], () => this.linkFilters());
|
|
||||||
}
|
|
||||||
this.emitter.off(['filter-focus'],
|
this.emitter.off(['filter-focus'],
|
||||||
(tf, filter) => this.setActiveFilterId(filter.id));
|
(tf, filter) => this.setActiveFilterId(filter.id));
|
||||||
|
|
||||||
|
@ -2495,15 +2488,8 @@ export class TableFilter {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (fltColType !== MULTIPLE && fltColType !== CHECKLIST) {
|
|
||||||
if (this.loadFltOnDemand && !this.initialized) {
|
|
||||||
this.emitter.emit('build-select-filter', this, index,
|
|
||||||
this.linkedFilters, this.isExternalFlt());
|
|
||||||
}
|
|
||||||
slc.value = query;
|
|
||||||
}
|
|
||||||
//multiple selects
|
//multiple selects
|
||||||
else if (fltColType === MULTIPLE) {
|
if (fltColType === MULTIPLE) {
|
||||||
let values = isArray(query) ? query :
|
let values = isArray(query) ? query :
|
||||||
query.split(' ' + this.orOperator + ' ');
|
query.split(' ' + this.orOperator + ' ');
|
||||||
|
|
||||||
|
@ -2530,6 +2516,13 @@ export class TableFilter {
|
||||||
|
|
||||||
this.emitter.emit('select-checklist-options', this, index, values);
|
this.emitter.emit('select-checklist-options', this, index, values);
|
||||||
}
|
}
|
||||||
|
else {
|
||||||
|
if (this.loadFltOnDemand && !this.initialized) {
|
||||||
|
this.emitter.emit('build-select-filter', this, index,
|
||||||
|
this.linkedFilters, this.isExternalFlt());
|
||||||
|
}
|
||||||
|
slc.value = query;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -2701,43 +2694,6 @@ export class TableFilter {
|
||||||
this.setActiveFilterId(this.getFilterId(colIndex));
|
this.setActiveFilterId(this.getFilterId(colIndex));
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
|
||||||
* Refresh the filters subject to linking ('select', 'multiple',
|
|
||||||
* 'checklist' type)
|
|
||||||
*/
|
|
||||||
linkFilters() {
|
|
||||||
if (!this.linkedFilters || !this.activeFilterId) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
let slcA1 = this.getFiltersByType(SELECT, true),
|
|
||||||
slcA2 = this.getFiltersByType(MULTIPLE, true),
|
|
||||||
slcA3 = this.getFiltersByType(CHECKLIST, true),
|
|
||||||
slcIndex = slcA1.concat(slcA2);
|
|
||||||
slcIndex = slcIndex.concat(slcA3);
|
|
||||||
|
|
||||||
slcIndex.forEach((colIdx) => {
|
|
||||||
let curSlc = this.getFilterElement(colIdx);
|
|
||||||
let slcSelectedValue = this.getFilterValue(colIdx);
|
|
||||||
|
|
||||||
//1st option needs to be inserted
|
|
||||||
if (this.loadFltOnDemand) {
|
|
||||||
let opt0 = createOpt(this.getClearFilterText(colIdx), '');
|
|
||||||
curSlc.innerHTML = '';
|
|
||||||
curSlc.appendChild(opt0);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (slcA3.indexOf(colIdx) !== -1) {
|
|
||||||
this.emitter.emit('build-checklist-filter', this, colIdx,
|
|
||||||
true);
|
|
||||||
} else {
|
|
||||||
this.emitter.emit('build-select-filter', this, colIdx,
|
|
||||||
true);
|
|
||||||
}
|
|
||||||
|
|
||||||
this.setFilterValue(colIdx, slcSelectedValue);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Determine if passed filter column implements exact query match
|
* Determine if passed filter column implements exact query match
|
||||||
* @param {Number} colIndex Column index
|
* @param {Number} colIndex Column index
|
||||||
|
|
|
@ -11,7 +11,7 @@
|
||||||
});
|
});
|
||||||
|
|
||||||
var ct = 0;
|
var ct = 0;
|
||||||
tf.emitter.on(['build-checklist-filter'], function() {
|
tf.emitter.on(['after-filtering'], function() {
|
||||||
ct++;
|
ct++;
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -31,7 +31,7 @@
|
||||||
tf.clearFilters();
|
tf.clearFilters();
|
||||||
|
|
||||||
deepEqual(ct, 2,
|
deepEqual(ct, 2,
|
||||||
'build-checklist-filter event emitted after filtering');
|
'after-filtering event emitted after filtering');
|
||||||
tf.onAfterFilter = null;
|
tf.onAfterFilter = null;
|
||||||
tf.destroy();
|
tf.destroy();
|
||||||
tf = null;
|
tf = null;
|
||||||
|
|
Loading…
Reference in a new issue