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