diff --git a/addon/components/hyper-table-v2/filtering-renderers/common/column-actions.hbs b/addon/components/hyper-table-v2/filtering-renderers/common/column-actions.hbs
index 4a2441eb..7814a09b 100644
--- a/addon/components/hyper-table-v2/filtering-renderers/common/column-actions.hbs
+++ b/addon/components/hyper-table-v2/filtering-renderers/common/column-actions.hbs
@@ -1,17 +1,21 @@
-
+
{{#if this.shouldDisplay}}
- {{else}}
-
{{/if}}
-
+
+ {{#if this.displayClearButton}}
+
+ {{/if}}
\ No newline at end of file
diff --git a/addon/components/hyper-table-v2/filtering-renderers/common/column-actions.ts b/addon/components/hyper-table-v2/filtering-renderers/common/column-actions.ts
index e3a2d92e..5327679e 100644
--- a/addon/components/hyper-table-v2/filtering-renderers/common/column-actions.ts
+++ b/addon/components/hyper-table-v2/filtering-renderers/common/column-actions.ts
@@ -1,5 +1,5 @@
import Component from '@glimmer/component';
-import { action } from '@ember/object';
+import { action, computed } from '@ember/object';
import TableHandler from '@upfluence/hypertable/core/handler';
import { Column } from '@upfluence/hypertable/core/interfaces';
@@ -14,6 +14,11 @@ export default class HyperTableV2FilteringRenderersCommonColumnActions extends C
return !this.args.column.definition.position?.sticky;
}
+ @computed('args.column.filters.[]', 'args.column.order')
+ get displayClearButton(): boolean {
+ return (this.args.column.filters?.length ?? 0) > 0 || this.args.column.order !== undefined;
+ }
+
@action
reset(): void {
this.args.handler.resetColumns([this.args.column]);
diff --git a/addon/components/hyper-table-v2/index.hbs b/addon/components/hyper-table-v2/index.hbs
index 51e7ea1b..8af58d38 100644
--- a/addon/components/hyper-table-v2/index.hbs
+++ b/addon/components/hyper-table-v2/index.hbs
@@ -23,7 +23,7 @@
{{/if}}
- {{#if this.features.global_filters_reset}}
+ {{#if this.displayResetButton}}
{
};
}
+ @computed('args.handler.columns.@each.{filters,order}')
+ get displayResetButton(): boolean {
+ const filtersApplied: boolean = this.args.handler.columns.some((col) => col.filters?.length || col.order);
+ return filtersApplied && this.features.global_filters_reset;
+ }
+
get displayHeader(): boolean {
return Object.keys(this.features).some((key) => this.features[key as keyof FeatureSet]);
}
diff --git a/tests/integration/components/hyper-table-v2-test.ts b/tests/integration/components/hyper-table-v2-test.ts
index f3797838..fb0ccac5 100644
--- a/tests/integration/components/hyper-table-v2-test.ts
+++ b/tests/integration/components/hyper-table-v2-test.ts
@@ -527,8 +527,21 @@ module('Integration | Component | hyper-table-v2', function (hooks) {
});
});
- module('FeatureSet: global_filters_reset', () => {
- test('the global Reset all button is displayed by default', async function (assert) {
+ module('FeatureSet: global_filters_reset', function () {
+ test('the global Reset all button is not displayed when no filtering or ordering is applied', async function (assert) {
+ await render(hbs``);
+ assert.dom('[data-control-name="hypertable_reset_filters_button"]').doesNotExist();
+ });
+
+ test('the global Reset all button is displayed when filtering is applied', async function (this: TestContext, assert) {
+ sinon.stub(this.tableManager, 'fetchColumns').callsFake(() => {
+ return Promise.resolve({
+ columns: [buildColumn('foo', { filters: [{ key: 'filter1', value: 'toto' }] })]
+ });
+ });
+
+ await this.handler.fetchColumns();
+
await render(hbs``);
assert.dom('[data-control-name="hypertable_reset_filters_button"]').exists();
});
diff --git a/tests/integration/components/hyper-table-v2/filtering-renderers/common/column-actions-test.ts b/tests/integration/components/hyper-table-v2/filtering-renderers/common/column-actions-test.ts
index 4c4a956d..1e47ddb6 100644
--- a/tests/integration/components/hyper-table-v2/filtering-renderers/common/column-actions-test.ts
+++ b/tests/integration/components/hyper-table-v2/filtering-renderers/common/column-actions-test.ts
@@ -39,12 +39,12 @@ module('Integration | Component | hyper-table-v2/filtering-renderers/common/colu
this.column = this.handler.columns[1];
});
- test('it renders', async function (assert) {
+ test('When no filtering or ordering is applied, it renders with remove field button', async function (assert) {
await render(
hbs``
);
- assert.dom('.upf-btn').exists({ count: 2 });
- assert.dom('.upf-btn--destructive').exists();
+
+ assert.dom('.upf-btn').exists({ count: 1 });
assert.dom('.upf-btn--default').exists();
});
@@ -53,35 +53,63 @@ module('Integration | Component | hyper-table-v2/filtering-renderers/common/colu
await render(
hbs``
);
- assert.dom('.upf-btn').exists({ count: 1 });
- assert.dom('.upf-btn--destructive').doesNotExist();
- assert.dom('.upf-btn--default').exists();
+ assert.dom('.upf-btn').doesNotExist();
});
- test('Clicking on the clear button calls the #handler.resetColumns method', async function (this: TestContext, assert) {
- const handlerSpy = sinon.spy(this.handler, 'resetColumns');
+ test('Clear and remove buttons are rendered when filtering is applied', async function (this: TestContext, assert) {
+ this.column.filters = [{ key: 'existence', value: 'without' }];
+
await render(
hbs``
);
- await click('.upf-btn--default');
- assert.ok(handlerSpy.calledOnce);
+
+ assert.dom('.upf-btn').exists({ count: 2 });
+ assert.dom('.upf-btn--secondary').exists();
+ assert.dom('.upf-btn--default').exists();
});
- test('Clicking on the remove button calls the #handler.removeColumn method', async function (this: TestContext, assert) {
- const handlerSpy = sinon.spy(this.handler, 'removeColumn');
+ test('Clear and remove buttons are rendered when ordering is applied', async function (this: TestContext, assert) {
+ this.column.order = { key: 'email', direction: 'asc' };
+
await render(
hbs``
);
- await click('.upf-btn--destructive');
- assert.ok(handlerSpy.calledOnce);
+
+ assert.dom('.upf-btn').exists({ count: 2 });
+ assert.dom('.upf-btn--secondary').exists();
+ assert.dom('.upf-btn--default').exists();
});
- test('Clicking on the clear button calls the #handler.triggerEvent with the reset-columns event', async function (this: TestContext, assert) {
- const handlerSpy = sinon.spy(this.handler, 'triggerEvent');
- await render(
- hbs``
- );
- await click('.upf-btn--default');
- assert.ok(handlerSpy.calledOnceWith('reset-columns'));
+ module('Buttons call the right handler functions', function (this: TestContext, hooks) {
+ hooks.beforeEach(async function (this: TestContext) {
+ this.column.filters = [{ key: 'existence', value: 'without' }];
+ });
+
+ test('Clicking on the clear button calls the #handler.resetColumns method', async function (this: TestContext, assert) {
+ const handlerSpy = sinon.spy(this.handler, 'resetColumns');
+ await render(
+ hbs``
+ );
+ await click('.upf-btn--secondary');
+ assert.ok(handlerSpy.calledOnceWithExactly([this.column]));
+ });
+
+ test('Clicking on the remove button calls the #handler.removeColumn method', async function (this: TestContext, assert) {
+ const handlerSpy = sinon.spy(this.handler, 'removeColumn');
+ await render(
+ hbs``
+ );
+ await click('.upf-btn--default');
+ assert.ok(handlerSpy.calledOnceWithExactly(this.column.definition));
+ });
+
+ test('Clicking on the clear button calls the #handler.triggerEvent with the reset-columns event', async function (this: TestContext, assert) {
+ const handlerSpy = sinon.spy(this.handler, 'triggerEvent');
+ await render(
+ hbs``
+ );
+ await click('.upf-btn--secondary');
+ assert.ok(handlerSpy.calledOnceWith('reset-columns'));
+ });
});
});
diff --git a/translations/en-us.yaml b/translations/en-us.yaml
index 4f40f244..c0330ff2 100644
--- a/translations/en-us.yaml
+++ b/translations/en-us.yaml
@@ -4,7 +4,7 @@ hypertable:
search: Search...
features:
filtering:
- reset_all: Reset Filters
+ reset_all: Reset filters
table_views:
title: Table Views
manage_fields:
@@ -13,8 +13,8 @@ hypertable:
search_placeholder: Search...
no_columns: No columns found
column:
- remove: Remove Field
- clear_filters: Clear Filters
+ remove: Remove field
+ clear_filters: Clear filters
scroll_to_end: More
ordering:
label: Order By