diff --git a/src/listcontroller.js b/src/listcontroller.js index 87530acca272aa57fe1e0ed280df6d65379d4ff7..e7c36ade8164f6a1490867603dd3ff253cdcbfed 100644 --- a/src/listcontroller.js +++ b/src/listcontroller.js @@ -1,5 +1,7 @@ +import m from 'mithril'; import Stream from 'mithril/stream'; import { ResourceHandler } from './auth'; +import { debounce } from './utils'; export default class DatalistController { constructor(resource, query = {}, searchKeys = false, onlineSearch = true) { @@ -16,6 +18,11 @@ export default class DatalistController { // we can tell infinite scroll that the data-version has changed. this.stateCounter = Stream(0); this.refresh(); + this.debouncedSearch = debounce((search) => { + this.setSearch(search); + this.refresh(); + m.redraw(); + }, 100); } refresh() { @@ -83,10 +90,10 @@ export default class DatalistController { if (this.onlineSearch) { this.search = search; this.query.search = search; - this.refresh(); + //this.refresh(); } else if (this.clientSearchKeys.length > 0) { this.search = search; - this.refresh(); + //this.refresh(); } } diff --git a/src/views/selectList.js b/src/views/selectList.js index c7ed8d504616bf9677871eab6d299d61913bc6ba..6fdc6c56699fa21bf7b5ee545b287ea6bdbf4a09 100644 --- a/src/views/selectList.js +++ b/src/views/selectList.js @@ -26,6 +26,7 @@ class SearchField { const ExitButton = attrs.onCancel ? { view() { return m(Button, { + element: 'div', label: 'Cancel', className: 'blue-button', events: { onclick: attrs.onCancel }, @@ -83,7 +84,7 @@ export default class SelectList { } onupdate({ attrs: { selection = null } }) { - console.log(selection); + //console.log(selection); if (selection) this.selected = selection; } @@ -142,6 +143,7 @@ export default class SelectList { }) : '', ]) : m(SearchField, Object.assign({}, { style: { background: 'rgb(78, 242, 167)' }, + onCancel, onChange: ({ value, focus }) => { // onChange is called either if the value or focus fo the SearchField // changes. @@ -165,11 +167,10 @@ export default class SelectList { // So, we make sure this state change is due to value change and // not due to focus change. this.searchValue = value; - controller.setSearch(value); - setTimeout(() => { controller.refresh(); }, 500); + //controller.setSearch(value); + controller.debouncedSearch(value); } }, - onCancel, })), (this.showList && !this.selected) ? m(List, { style: { height: '400px', 'background-color': 'white' }, diff --git a/src/views/tableView.js b/src/views/tableView.js index 3189fa18bcd353f13921d29622bf19f1ea4edbd0..37019a6309d32178179ed07424e1bd631719e83c 100644 --- a/src/views/tableView.js +++ b/src/views/tableView.js @@ -87,10 +87,6 @@ export default class TableView { tableHeight = false, }, }) { - const updateList = debounce(() => { - controller.refresh(); - }, 500); - return m('div.tabletool', [ m(Toolbar, { className: 'toolbar', @@ -99,10 +95,7 @@ export default class TableView { m(Search, { textfield: { label: 'Search', - onChange: ({ value }) => { - controller.setSearch(value); - updateList(); - }, + onChange: ({ value }) => { controller.debouncedSearch(value); }, }, fullWidth: false, }),