Added debounce option to search component

[Tom Aalbers]

Requested by @MrBliz

my only request would be to add debounce as an option for search. I see you removed it in this > >commit, but adding a debounce as an option would be very useful.
If you want this, i'm happy to submit a pull request this weekend (will be my first OSS contribution! >:))

[Tom Aalbers]

I have tried this indeed, but couldn't get the the option to be configurable through the component. This is what I had

<input keyup.delegate="search() & debounce:500" 

But not every want wants the option or wants it on 500. So I needed it to be configurable. Of course I can add @bindable public debounce: number to the search component but couldn't find a way to bind the the debounce property to the debounce option of the input.

If you want to submit a PR be my guest, I appreciate it! Let me know if you need any help. If somehow you are not able to do it, I am also willing to give it another go when I have the time 😄

[Liam Blizard]

I'll have a crack tonight

[Liam Blizard]

Did you try using an InlineViewStrategy? this might work. having never done any modifications of NPM plugins before i'm a bit confused as to what to do to build the package one i've made my changes. Do i simply run all the tasks?

import { customElement, bindable, bindingMode, InlineViewStrategy } from 'aurelia-framework';
import { AuDatatableParameters } from './AuDatatableParameters';
import { AuDatatableResponse } from './AuDatatableResponse';

@customElement('au-datatable-search')
export class AuDatatableSearchComponent {

    @bindable public placeholder: string;
    @bindable public inputClasses: string;
    @bindable public onSearchChange: Function;
    @bindable public delay : number;

    @bindable({
        defaultBindingMode: bindingMode.twoWay,
    }) public parameters: AuDatatableParameters

    public async search(): Promise<void> {
        if (typeof this.onSearchChange != 'function')
            throw new Error('[au-table-search:search] No onSearchChange() callback has been set');
        this.reset();
        let response = await this.onSearchChange(this.parameters) as AuDatatableResponse;
        this.parameters.tableData = response.data;
        this.parameters.totalRecords = response.totalRecords;
        this.reset();
    }

    private reset(): void {
        this.parameters.currentPage = this.parameters.totalRecords > 0 ? 1 : 0;
        this.parameters.skip = 0;
    }

    getViewStrategy() {

        this.delay = this.delay == undefined ? this.delay = 0 : this.delay; 

        return new InlineViewStrategy(`
        <template>
            <div class="au-table-search">
                <input keyup.delegate="search() & debounce:${this.delay}"
                    value.bind="parameters.searchQuery" 
                    type="text" 
                    placeholder.bind="placeholder" 
                    class.bind="inputClasses" />
            </div>
        </template>
    `)
    }
}

[Tom Aalbers]

No I haven't tried that yet! That might work, did you get it to work? On the top of my head, you can run the build process by using the command npm run build.

[Liam Blizard]

Cheers, currently getting plugin.load is not a function when using au-run --watch, so not managed to verify whether changes have worked.

Unhandled rejection Error: Load timeout for modules: template-registry-entry!au-datatable/au-datatable-search.html_unnormalized2,template-registry-entry!au-datatable/au-datatable-search.html,text!au-datatable/au-datatable-search.html_unnormalized3,text!au-datatable/au-datatable-search.html

http://requirejs.org/docs/errors.html#timeout
    at makeError (http://localhost:9001/scripts/vendor-bundle.js:14678:17)
    at checkLoaded (http://localhost:9001/scripts/vendor-bundle.js:15208:23)
    at http://localhost:9001/scripts/vendor-bundle.js:15229:25
From previous event:
    at DefaultLoader._import (http://localhost:9001/scripts/vendor-bundle.js:24781:14)
    at DefaultLoader.loadTemplate (http://localhost:9001/scripts/vendor-bundle.js:24748:19)
    at ensureRegistryEntry (http://localhost:9001/scripts/vendor-bundle.js:32753:19)
    at ViewEngine.loadViewFactory (http://localhost:9001/scripts/vendor-bundle.js:32827:14)
    at ConventionalViewStrategy.loadViewFactory (http://localhost:9001/scripts/vendor-bundle.js:30208:25)
    at HtmlBehaviorResource.load (http://localhost:9001/scripts/vendor-bundle.js:33606:29)
    at ResourceDescription.load (http://localhost:9001/scripts/vendor-bundle.js:32640:28)
    at ResourceModule.load (http://localhost:9001/scripts/vendor-bundle.js:32582:25)
    at http://localhost:9001/scripts/vendor-bundle.js:32958:43
From previous event:
    at ViewEngine.importViewResources (http://localhost:9001/scripts/vendor-bundle.js:32927:52)
    at http://localhost:9001/scripts/vendor-bundle.js:23848:25
From previous event:
    at loadResources (http://localhost:9001/scripts/vendor-bundle.js:23839:9)
    at http://localhost:9001/scripts/vendor-bundle.js:23916:16
    at next (http://localhost:9001/scripts/vendor-bundle.js:23796:32)
    at runTasks (http://localhost:9001/scripts/vendor-bundle.js:23802:12)
    at http://localhost:9001/scripts/vendor-bundle.js:24082:18
From previous event:
    at http://localhost:9001/scripts/vendor-bundle.js:24081:23
From previous event:
    at FrameworkConfiguration.apply (http://localhost:9001/scripts/vendor-bundle.js:24066:44)
    at Aurelia.start (http://localhost:9001/scripts/vendor-bundle.js:23682:39)
    at Object.configure (http://localhost:9001/scripts/app-bundle.js:111:17)
    at http://localhost:9001/scripts/vendor-bundle.js:22319:29
From previous event:
    at config (http://localhost:9001/scripts/vendor-bundle.js:22314:56)
    at http://localhost:9001/scripts/vendor-bundle.js:22350:14
From previous event:
    at bootstrap (http://localhost:9001/scripts/vendor-bundle.js:22349:26)
    at http://localhost:9001/scripts/vendor-bundle.js:22336:9
    at <anonymous>
From previous event:
    at run (http://localhost:9001/scripts/vendor-bundle.js:22331:61)
    at Object.<anonymous> (http://localhost:9001/scripts/vendor-bundle.js:22356:37)
    at Object.execCb (http://localhost:9001/scripts/vendor-bundle.js:16206:33)
    at Module.check (http://localhost:9001/scripts/vendor-bundle.js:15393:51)
    at Module.enable (http://localhost:9001/scripts/vendor-bundle.js:15686:22)
    at Object.enable (http://localhost:9001/scripts/vendor-bundle.js:16067:39)
    at Module.<anonymous> (http://localhost:9001/scripts/vendor-bundle.js:15671:33)
    at http://localhost:9001/scripts/vendor-bundle.js:14644:23
    at each (http://localhost:9001/scripts/vendor-bundle.js:14569:31)
    at Module.enable (http://localhost:9001/scripts/vendor-bundle.js:15623:17)
    at Module.init (http://localhost:9001/scripts/vendor-bundle.js:15298:26)```