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``);