From f6fd409fe32401346d6a9991b2152b45dcf665e7 Mon Sep 17 00:00:00 2001 From: Philippe Ndiaye Date: Thu, 9 Jan 2025 10:56:21 +0100 Subject: [PATCH 1/2] add support for facets sorting (default by count) --- addon-test-support/table-manager.ts | 7 +++++ .../common/facets-loader.ts | 11 ++++++- .../common/facets-loader-test.ts | 30 +++++++++++++++++-- tests/unit/core/handler-test.ts | 7 +++++ 4 files changed, 51 insertions(+), 4 deletions(-) diff --git a/addon-test-support/table-manager.ts b/addon-test-support/table-manager.ts index 886f1436..72f89e6f 100644 --- a/addon-test-support/table-manager.ts +++ b/addon-test-support/table-manager.ts @@ -68,6 +68,13 @@ export default class TableManager implements ITableManager { payload: { name: 'The Foo Fighters' }, + count: 29 + }, + { + identifier: 'band:2', + payload: { + name: 'Arctic Monkeys' + }, count: 4 } ], diff --git a/addon/components/hyper-table-v2/filtering-renderers/common/facets-loader.ts b/addon/components/hyper-table-v2/filtering-renderers/common/facets-loader.ts index 9ae0a9ea..5ca53f84 100644 --- a/addon/components/hyper-table-v2/filtering-renderers/common/facets-loader.ts +++ b/addon/components/hyper-table-v2/filtering-renderers/common/facets-loader.ts @@ -12,6 +12,7 @@ interface FacetsLoaderArgs { column: Column; facettingKey: string; searchEnabled: boolean; + sortCompareFn?(a: Facet, b: Facet): number; } const SEARCH_DEBOUNCE_TIME: number = 300; @@ -47,6 +48,10 @@ export default class HyperTableV2FacetsLoader extends Component number { + return this.args.sortCompareFn ?? this.defaultSortCompareFn; + } + @action onInputChanged(): void { debounce(this, this.fetchFacets, SEARCH_DEBOUNCE_TIME); @@ -123,7 +128,7 @@ export default class HyperTableV2FacetsLoader extends Component { - this.facets = facets; + this.facets = facets.sort(this.facetsSorter); this.filteringKey = filtering_key; const filterForKey = this.args.column.filters.find((v) => v.key === this.filteringKey); @@ -138,4 +143,8 @@ export default class HyperTableV2FacetsLoader extends Component @@ -33,8 +33,32 @@ module('Integration | Component | hyper-table-v2/facets-loader', function (hooks ` ); - assert.dom('.hypertable__facetting .item').exists({ count: 1 }); - assert.dom('.hypertable__facetting .item').hasText('The Foo Fighters'); + assert.dom('.hypertable__facetting .item').exists({ count: 2 }); + assert.dom('.hypertable__facetting > div:nth-child(1) .item').hasText('The Foo Fighters'); + assert.dom('.hypertable__facetting > div:nth-child(2) .item').hasText('Arctic Monkeys'); + }); + + test('the facets are ordered using the @sortCompareFn arg function when provided', async function (assert: Assert) { + this.sortCompareFn = sinon.stub().callsFake((a, b) => { + if (a.payload.name < b.payload.name) return -1; + if (a.payload.name > b.payload.name) return 1; + return 0; + }); + + await render( + hbs` + + <:facet-item as |facetting|> + {{facetting.facet.payload.name}} + + ` + ); + + assert.dom('.hypertable__facetting .item').exists({ count: 2 }); + assert.dom('.hypertable__facetting > div:nth-child(1) .item').hasText('Arctic Monkeys'); + assert.dom('.hypertable__facetting > div:nth-child(2) .item').hasText('The Foo Fighters'); + + assert.ok(this.sortCompareFn.calledOnce); }); }); diff --git a/tests/unit/core/handler-test.ts b/tests/unit/core/handler-test.ts index 237bc9c3..f7a452d6 100644 --- a/tests/unit/core/handler-test.ts +++ b/tests/unit/core/handler-test.ts @@ -402,6 +402,13 @@ module('Unit | core/handler', function (hooks) { payload: { name: 'The Foo Fighters' }, + count: 29 + }, + { + identifier: 'band:2', + payload: { + name: 'Arctic Monkeys' + }, count: 4 } ], From 462bdaa90745da3c9549434a7f306847a3e04cdd Mon Sep 17 00:00:00 2001 From: Philippe Ndiaye Date: Thu, 9 Jan 2025 11:17:25 +0100 Subject: [PATCH 2/2] facets-loader: allow overriding the search placeholder --- .../common/facets-loader.hbs | 2 +- .../common/facets-loader.ts | 10 ++++++++++ .../common/facets-loader-test.ts | 20 +++++++++++++++++++ 3 files changed, 31 insertions(+), 1 deletion(-) diff --git a/addon/components/hyper-table-v2/filtering-renderers/common/facets-loader.hbs b/addon/components/hyper-table-v2/filtering-renderers/common/facets-loader.hbs index 098a3d0b..f83f6a82 100644 --- a/addon/components/hyper-table-v2/filtering-renderers/common/facets-loader.hbs +++ b/addon/components/hyper-table-v2/filtering-renderers/common/facets-loader.hbs @@ -5,7 +5,7 @@ <:suffix> {{#if (gt this.searchQuery.length 0)}} diff --git a/addon/components/hyper-table-v2/filtering-renderers/common/facets-loader.ts b/addon/components/hyper-table-v2/filtering-renderers/common/facets-loader.ts index 5ca53f84..776fff01 100644 --- a/addon/components/hyper-table-v2/filtering-renderers/common/facets-loader.ts +++ b/addon/components/hyper-table-v2/filtering-renderers/common/facets-loader.ts @@ -2,8 +2,11 @@ import Component from '@glimmer/component'; import { tracked } from '@glimmer/tracking'; import { action } from '@ember/object'; import { debounce } from '@ember/runloop'; +import { inject as service } from '@ember/service'; import { isEmpty } from '@ember/utils'; +import { IntlService } from 'ember-intl'; + import TableHandler from '@upfluence/hypertable/core/handler'; import { Column, Facet, FacetsResponse, Filter } from '@upfluence/hypertable/core/interfaces'; @@ -12,6 +15,7 @@ interface FacetsLoaderArgs { column: Column; facettingKey: string; searchEnabled: boolean; + searchPlaceholder?: string; sortCompareFn?(a: Facet, b: Facet): number; } @@ -19,6 +23,8 @@ const SEARCH_DEBOUNCE_TIME: number = 300; const FACET_APPLY_DEBOUNCE_TIME: number = 300; export default class HyperTableV2FacetsLoader extends Component { + @service declare intl: IntlService; + @tracked loading = false; @tracked facets: Facet[] = []; @tracked appliedFacets: string[] = []; @@ -44,6 +50,10 @@ export default class HyperTableV2FacetsLoader extends Component` + ); + + assert.dom('.oss-input-container').exists(); + assert + .dom('.oss-input-container input') + .hasAttribute('placeholder', this.intl.t('hypertable.column.filtering.search_term.placeholder')); + }); + + test('the search input has the provided searchPlaceholder arg properly used', async function (assert: Assert) { + await render( + hbs`` + ); + + assert.dom('.oss-input-container').exists(); + assert.dom('.oss-input-container input').hasAttribute('placeholder', 'foobar...'); + }); + test('facets are fetched with the typed keyword when searching', async function (assert: Assert) { const handlerSpy = sinon.spy(this.handler);