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 14965a08..615c23b5 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 @@ -31,12 +31,19 @@ {{else}} - + {{#if @exclusive}} + + {{else}} + + {{/if}} {{/if}} {{yield (hash appliedFacets=this.appliedFacets facet=facet) to="facet-item"}} 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 55845cbc..3cafb29a 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 @@ -17,6 +17,7 @@ interface FacetsLoaderArgs { searchEnabled: boolean; searchPlaceholder?: string; displaySearchLabel?: boolean; + exclusive?: boolean; sortCompareFn?(a: Facet, b: Facet): number; } @@ -79,7 +80,9 @@ export default class HyperTableV2FacetsLoader extends Component { + this.appliedFacets.includes(facet.identifier) ? this.removeFacet(facet) : this.addFacet(facet); + }, facet, FACET_APPLY_DEBOUNCE_TIME ); @@ -89,7 +92,7 @@ export default class HyperTableV2FacetsLoader extends Component filter.key === this.filteringKey); - if (existingFilter) { + if (existingFilter && !this.args.exclusive) { facetFilter = { key: this.filteringKey, value: [existingFilter.value, facet.identifier].join(',') }; } @@ -97,14 +100,14 @@ export default class HyperTableV2FacetsLoader extends Component { - this.appliedFacets = [...this.appliedFacets, ...[facet.identifier]]; + this.appliedFacets = [...(this.args.exclusive ? [] : this.appliedFacets), ...[facet.identifier]]; }) .finally(() => { this.ongoingFacetApply = false; }); } - private removeFacet(facet: Facet): void { + private removeFacet(facet: Facet): Promise { const existingFilter = this.args.column.filters.find((filter) => filter.key === this.filteringKey); if (existingFilter) { @@ -118,7 +121,7 @@ export default class HyperTableV2FacetsLoader extends Component { this.appliedFacets = this.appliedFacets.filter((x) => x !== facet.identifier); @@ -127,6 +130,7 @@ export default class HyperTableV2FacetsLoader extends Component` + ); + + assert.dom('.hypertable__facetting .item').exists({ count: 2 }); + assert.dom('.hypertable__facetting .item .oss-radio-btn').exists({ count: 2 }); + assert.dom('.hypertable__facetting .item .upf-checkbox').doesNotExist(); + }); + + test('when @exclusive is true, selecting a facet removes previously applied facets', async function (this: TestContext, assert: Assert) { + await render( + hbs`` + ); + + const radioRows = findAll('.hypertable__facetting .item'); + await click(radioRows[0]); + assert.dom('.hypertable__facetting .item:nth-child(1) .oss-radio-btn--selected').exists(); + + await click(radioRows[1]); + assert.dom(radioRows[1].querySelector('.oss-radio-btn--selected')).exists(); + assert.dom(radioRows[0].querySelector('.oss-radio-btn--selected')).doesNotExist(); + }); + + test('when @exclusive is true, selecting a facet calls the applyFilters method of the table handler', async function (this: TestContext, assert: Assert) { + const applyFiltersSpy = sinon.spy(this.handler, 'applyFilters'); + await render( + hbs`` + ); + + const radioRows = findAll('.hypertable__facetting .item'); + await click(radioRows[0]); + assert.ok(applyFiltersSpy.calledWithExactly(this.column, [{ key: 'value', value: 'band:1' }])); + + await click(radioRows[1]); + assert.ok(applyFiltersSpy.calledWithExactly(this.column, [{ key: 'value', value: 'band:2' }])); + }); + }); }); diff --git a/tests/integration/components/hyper-table/cell-renderers/image-test.js b/tests/integration/components/hyper-table/cell-renderers/image-test.js index ce61eb48..703029f5 100644 --- a/tests/integration/components/hyper-table/cell-renderers/image-test.js +++ b/tests/integration/components/hyper-table/cell-renderers/image-test.js @@ -7,8 +7,8 @@ module('Integration | Component | hyper-table/cell-renderers/image', function (h setupRenderingTest(hooks); test('it renders', async function (assert) { - this.item = { imageURL: 'foo.png' }; - this.column = { key: 'imageURL' }; + this.item = { imageURL: 'foo.png', name: 'FooBar' }; + this.column = { key: 'imageURL', labels: ['name'] }; await render(hbs``);