Add debouce time to build-in filters of datagrid

[mrmokwa]

Idea

Have a debounce option in the build-in filters of datagrid. For more information about debouce, click here.

Stackblitz

https://stackblitz.com/edit/clarity-light-theme-v5-pkntqg?file=src/app/app.component.ts

1. Open the filter of the column
2. Type in the filter "matheus"
3. Check the console of the browser. You'll get the following result
   

Why is it useful?

If we are using server side pagination, this means multiple calls to the server, that could be avoided if we had a debouce option out of the box.

Sugestion

[Jinnie]

Hello Matheus
What's your specific use case?
From our perspective, the client-side filtering is fast enough to need debounce. And for server side calls you can add the debounce in your onRefresh handler.
I agree it "can" happen on the filter, but being a piece of UI, it would better emit any state changes and leave it to the user to decide if he wants to debounce.
For any more advanced scenario, or course, you can create a custom filter.

[mrmokwa]

The use case would be filtering a customer name by name (in server). The build-in filter is unusable with server pagination, since it triggers to many requests.

Of course there's work arounds for this problem, like:

• Custom filter
• SwitchMap the request to the server

I ended up creating a custom filter and deboucing it manually.
Here is the code, for a generic string filter with debounce if someone else needs

interface DatagridFilter {
   property: string, 
   value: string
}

@Component({
  selector: 'app-datagrid-filter',
  templateUrl: './datagrid-filter.component.html',
  styleUrls: ['./datagrid-filter.component.css'],
})
export class DatagridFilterComponent implements OnInit, OnDestroy {
  @Input() property: string;

  search = '';
  changes = new Subject();
  debouncer = new Subject();
  destroy= new Subject();

  get state(): DatagridFilter {
    return { property: this.property, value: this.search };
  }

  ngOnInit() {
    this.debouncer
      .pipe(takeUntil(this.destroy), debounceTime(500))
      .subscribe(() => this.changes.next());
  }

  ngOnDestroy() {
    this.destroy.next();
    this.destroy.complete();
  }

  isActive = () => this.search !== '';

  accepts = (novo: DatagridFilter) => novo.value !== this.search;
}

[hippee-lee]

@mrmokwa - This ins't something we will be adding to the built in datagrid filters. But I see two options for you. The first is as @Jinnie mentioned - add the debouncer to the application:

First, set up an observable on the app side:

debouncer = new Subject<any>();

Then, subscribe to the observable and debounce it in an appropriate place for the component:

this.debouncer.asObservable().pipe(
      debounceTime(2000)
    ).subscribe(state => {
      this.loading = true;
      const filters: { [prop: string]: any[] } = {};
      if (state.filters) {
        for (const filter of state.filters) {
          const { property, value } = <{ property: string; value: string }>filter;
          filters[property] = [value];
        }
      }
      this.inventory
        .filter(filters)
        .sort(<{ by: string; reverse: boolean }>state.sort)
        .fetch(state.page.from, state.page.size)
        .then((result: FetchResult) => {
          this.users = result.users;
          this.total = result.length;
          this.loading = false;
        });
    })

Finally, pass the emitted state from the datagrid to the debouncer:

refresh(state: ClrDatagridStateInterface) {
  this.debouncer.next(state);
}

Or, you could implement a custom filter as you did for your application as you described above. Sorry, those are the only two options here. Fwiw - the Core datagrid (which is under active development will be stateless and the filtering / debouncing responsibility will be on the application side so I think this is the best way to go here.