Skip to content

Commit 6b79d41

Browse files
JockeCKJockeCK
authored
Changes when filtering is done in an default textinput column (#303)
* Changes when filtering is done in an default testinput column * Added tests and timeout time as local property
1 parent bc88154 commit 6b79d41

4 files changed

+83
-35
lines changed

‎cosmoz-omnitable-column-mixin.js

+1
Original file line numberDiff line numberDiff line change
@@ -418,4 +418,5 @@ export const columnMixin = dedupingMixin(base => class extends templatizeMixin(b
418418
}
419419
return super._deserializeValue(obj, type);
420420
}
421+
421422
});

‎cosmoz-omnitable-column.js

+45-1
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,9 @@ import './ui-helpers/cosmoz-clear-button';
77
import { columnMixin } from './cosmoz-omnitable-column-mixin';
88
import { PolymerElement } from '@polymer/polymer/polymer-element';
99
import { html } from '@polymer/polymer/lib/utils/html-tag';
10+
import { timeOut } from '@polymer/polymer/lib/utils/async.js';
11+
import { Debouncer } from '@polymer/polymer/lib/utils/debounce.js';
12+
import { enqueueDebouncer } from '@polymer/polymer/lib/utils/flush.js';
1013

1114
/**
1215
* @polymer
@@ -26,7 +29,7 @@ class OmnitableColumn extends columnMixin(PolymerElement) {
2629
</template>
2730
2831
<template class="header" strip-whitespace>
29-
<paper-input label="[[ title ]]" value="{{ filter }}" focused="{{ headerFocused }}">
32+
<paper-input label="[[ title ]]" value="{{ inputValue }}" focused="{{ headerFocused }}" on-keydown="_onKeyDown" on-blur="_onBlur">
3033
<cosmoz-clear-button suffix slot="suffix" visible="[[ hasFilter(filter.*) ]]" light on-click="resetFilter"></cosmoz-clear-button>
3134
</paper-input>
3235
</template>
@@ -47,6 +50,20 @@ class OmnitableColumn extends columnMixin(PolymerElement) {
4750
editMinWidth: {
4851
type: String,
4952
value: '55px'
53+
},
54+
55+
inputValue: {
56+
type: Object,
57+
notify: true,
58+
value() {
59+
return this._getDefaultFilter();
60+
},
61+
observer: '_inputValueValueChanged'
62+
},
63+
64+
_timeForNoInput: {
65+
type: Number,
66+
value: 1000
5067
}
5168
};
5269
}
@@ -61,6 +78,33 @@ class OmnitableColumn extends columnMixin(PolymerElement) {
6178

6279
resetFilter() {
6380
this.filter = null;
81+
this.inputValue = null;
82+
}
83+
84+
_onBlur() {
85+
this.filter = this.inputValue;
86+
}
87+
88+
_onKeyDown(event) {
89+
switch (event.keyCode) {
90+
case 13: // Enter
91+
event.preventDefault();
92+
this.filter = this.inputValue;
93+
break;
94+
}
95+
}
96+
97+
_inputValueValueChanged() {
98+
if (this.inputValue === '') {
99+
this.filter = this.inputValue;
100+
return;
101+
}
102+
this._debouncer = Debouncer.debounce(this._debouncer,
103+
timeOut.after(this._timeForNoInput),
104+
() => {
105+
this.filter = this.inputValue;
106+
});
107+
enqueueDebouncer(this._debouncer);
64108
}
65109
}
66110
customElements.define(OmnitableColumn.is, OmnitableColumn);

‎test/basic.html

+30-34
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,8 @@
3838
</cosmoz-omnitable-column>
3939
<cosmoz-omnitable-column name="columnWithoutSortOn" value-path="valuePath">
4040
</cosmoz-omnitable-column>
41+
<cosmoz-omnitable-column name="columnWithFilter" value-path="valuePath">
42+
</cosmoz-omnitable-column>
4143
</cosmoz-omnitable>
4244
</template>
4345
</test-fixture>
@@ -58,6 +60,7 @@
5860
<script type="module">
5961
import { setupOmnitableFixture } from './helpers/utils';
6062
import { generateTableDemoData } from '../demo/table-demo-helper';
63+
import { flush } from '@polymer/polymer/lib/utils/flush';
6164

6265
sinon.assert.expose(chai.assert, { prefix: '' });
6366

@@ -89,79 +92,72 @@
8992
});
9093

9194
test('sets column groupOn property to valuePath when group-on attribute is missing', () => {
92-
const column = omnitable.columns.find(col => {
93-
return col.name === 'columnWithoutGroupOn';
94-
});
95-
95+
const column = omnitable.columns.find(col => col.name === 'columnWithoutGroupOn');
9696
assert.equal(column.groupOn, 'valuePath');
9797
});
9898

9999
test('sets column groupOn property to group-on attribute', () => {
100-
const column = omnitable.columns.find(col => {
101-
return col.name === 'columnWithGroupOn';
102-
});
103-
100+
const column = omnitable.columns.find(col => col.name === 'columnWithGroupOn');
104101
assert.equal(column.groupOn, 'groupOnValuePath');
105102
});
106103

107104
test('sets column sortOn property to valuePath when sort-on attribute is missing', () => {
108-
const column = omnitable.columns.find(col => {
109-
return col.name === 'columnWithoutSortOn';
110-
});
111-
105+
const column = omnitable.columns.find(col => col.name === 'columnWithoutSortOn');
112106
assert.equal(column.sortOn, 'valuePath');
113107
});
114108
test('sets column sortOn property to sort-on attribute', () => {
115-
const column = omnitable.columns.find(col => {
116-
return col.name === 'columnWithSortOn';
117-
});
118-
109+
const column = omnitable.columns.find(col => col.name === 'columnWithSortOn');
119110
assert.equal(column.sortOn, 'sortOnValuePath');
120111
});
121112

113+
test('changing inputValue updates filter eventually', () => {
114+
const column = omnitable.columns.find(col => col.name === 'columnWithFilter');
115+
assert.isNull(column.filter);
116+
assert.isNull(column.inputValue);
117+
column.inputValue = 'test';
118+
flush();
119+
assert.equal(column.filter, 'test');
120+
});
121+
122+
test('changing inputValue to empty updates filter instantly', () => {
123+
const column = omnitable.columns.find(col => col.name === 'columnWithFilter');
124+
assert.isNull(column.filter);
125+
assert.isNull(column.inputValue);
126+
column.inputValue = '';
127+
assert.equal(column.filter, '');
128+
});
129+
122130
test('_serializeFilter returns filter', () => {
123-
const column = omnitable.columns.find(col => {
124-
return col.name === 'columnWithGroupOn';
125-
}),
131+
const column = omnitable.columns.find(col => col.name === 'columnWithGroupOn'),
126132
filter = { key: 'value' };
127133
assert.deepEqual(column._serializeFilter(filter), filter);
128134
});
129135

130136
test('_serializeFilter uses default filter', () => {
131-
const column = omnitable.columns.find(col => {
132-
return col.name === 'columnWithGroupOn';
133-
});
137+
const column = omnitable.columns.find(col => col.name === 'columnWithGroupOn');
134138
assert.isNull(column.filter);
135139
column.filter = { key: 'value' };
136140
assert.deepEqual(column._serializeFilter(), column.filter);
137141
});
138142

139143
test('_serializeFilter handles null filter', () => {
140-
const column = omnitable.columns.find(col => {
141-
return col.name === 'columnWithGroupOn';
142-
});
144+
const column = omnitable.columns.find(col => col.name === 'columnWithGroupOn');
143145
assert.isNull(column.filter);
144146
assert.isNull(column._serializeFilter());
145147
});
146148

147149
test('_deserializeFilter returns object', () => {
148-
const column = omnitable.columns.find(col => {
149-
return col.name === 'columnWithGroupOn';
150-
});
150+
const column = omnitable.columns.find(col => col.name === 'columnWithGroupOn');
151151
assert.deepEqual(column._deserializeFilter({ key: 'value' }), { key: 'value' });
152152
});
153153

154154
test('_deserializeFilter handles null', () => {
155-
const column = omnitable.columns.find(col => {
156-
return col.name === 'columnWithGroupOn';
157-
});
155+
const column = omnitable.columns.find(col => col.name === 'columnWithGroupOn');
158156
assert.isNull(column._deserializeFilter());
159157
});
160158

161159
test('resetFilter resets filter to null', () => {
162-
const column = omnitable.columns.find(col => {
163-
return col.name === 'columnWithGroupOn';
164-
});
160+
const column = omnitable.columns.find(col => col.name === 'columnWithGroupOn');
165161
column.filter = { key: 'value' };
166162
column.resetFilter();
167163
assert.isNull(column.filter);

‎test/index.html

+7
Original file line numberDiff line numberDiff line change
@@ -25,4 +25,11 @@
2525
'integration/column-number.html'
2626
]);
2727
</script>
28+
<div style="text-align: center">
29+
<h2>Please keep this window focused!</h2>
30+
<div>When running tests interactively,</div>
31+
<div>some tests may fail if the window is not focused during the tests.</div>
32+
<div>This because chrome ignores blur/focus events</div>
33+
<div>when the browser window is not focused.</div>
34+
</div>
2835
</body></html>

0 commit comments

Comments
 (0)