From 0aea81f54c51a124d016b856105de4cea2568387 Mon Sep 17 00:00:00 2001 From: Philippe Ndiaye Date: Thu, 1 Aug 2024 09:50:55 +0200 Subject: [PATCH 1/5] Kill radio-button usages and ensure only numbers can be typed in numeric fields --- .../filtering-renderers/common/ordering.hbs | 16 ++-- .../filtering-renderers/common/ordering.ts | 20 +++-- .../filtering-renderers/date.hbs | 20 ++--- .../filtering-renderers/date.ts | 8 +- .../filtering-renderers/numeric.hbs | 15 ++-- .../filtering-renderers/numeric.ts | 24 +++-- .../hyper-table/filters-renderers/date.hbs | 35 +++----- .../hyper-table/filters-renderers/date.js | 16 ++-- .../hyper-table/filters-renderers/money.hbs | 88 ++++++++++-------- .../hyper-table/filters-renderers/numeric.hbs | 90 +++++++++++-------- .../hyper-table/filters-renderers/numeric.js | 19 +++- .../hyper-table/filters-renderers/text.hbs | 65 ++++++-------- .../hyper-table/filters-renderers/text.js | 8 +- addon/core/handler.ts | 1 + addon/utils/index.ts | 26 ++++++ app/styles/columns.less | 2 + app/utils/index.js | 1 + package.json | 2 +- pnpm-lock.yaml | 83 +++++++++-------- 19 files changed, 304 insertions(+), 235 deletions(-) create mode 100644 addon/utils/index.ts create mode 100644 app/utils/index.js diff --git a/addon/components/hyper-table-v2/filtering-renderers/common/ordering.hbs b/addon/components/hyper-table-v2/filtering-renderers/common/ordering.hbs index 196b3bf0..36504a26 100644 --- a/addon/components/hyper-table-v2/filtering-renderers/common/ordering.hbs +++ b/addon/components/hyper-table-v2/filtering-renderers/common/ordering.hbs @@ -1,14 +1,8 @@
-
- {{#each-in this.orderingOptions as |label value|}} - - {{/each-in}} -
+
\ No newline at end of file diff --git a/addon/components/hyper-table-v2/filtering-renderers/common/ordering.ts b/addon/components/hyper-table-v2/filtering-renderers/common/ordering.ts index 0ff8351c..b6bdecf1 100644 --- a/addon/components/hyper-table-v2/filtering-renderers/common/ordering.ts +++ b/addon/components/hyper-table-v2/filtering-renderers/common/ordering.ts @@ -20,24 +20,34 @@ const defaultOrderingDirections: { [key: string]: OrderDirection } = { const THROTTLE_TIME = 300; export default class HyperTableV2FilteringRenderersOrdering extends Component { - @tracked _selectedDirection: OrderDirection | undefined; + @tracked _selectedDirection?: OrderDirection | null; constructor(owner: unknown, args: HyperTableV2FilteringRenderersOrderingArgs) { super(owner, args); args.handler.on('reset-columns', (columns) => { if (columns.includes(args.column)) { - this._selectedDirection = undefined; + this._selectedDirection = null; } }); } + get toggles(): { label: string; value: OrderDirection }[] { + return Object.keys(this.orderingOptions).reduce((acc: { label: string; value: OrderDirection }[], v: string) => { + acc.push({ + label: v, + value: this.orderingOptions[v] as OrderDirection + }); + return acc; + }, []); + } + get orderingOptions() { - return this.args?.orderingOptions || defaultOrderingDirections; + return this.args.orderingOptions ?? defaultOrderingDirections; } - get currentOrderingDirection(): OrderDirection | undefined { - return this._selectedDirection || this.args.column.order?.direction; + get currentOrderingDirection(): OrderDirection | null { + return this._selectedDirection || this.args.column.order?.direction || null; } @action diff --git a/addon/components/hyper-table-v2/filtering-renderers/date.hbs b/addon/components/hyper-table-v2/filtering-renderers/date.hbs index 1dd50f39..48a6b2a5 100644 --- a/addon/components/hyper-table-v2/filtering-renderers/date.hbs +++ b/addon/components/hyper-table-v2/filtering-renderers/date.hbs @@ -15,21 +15,13 @@ {{#if @column.definition.filterable}}
- -
- {{#each-in this.filteringOptions as |label value|}} - - {{/each-in}} -
+ /> +
-
+
<:input> @@ -40,11 +43,13 @@ <:input> diff --git a/addon/components/hyper-table-v2/filtering-renderers/numeric.ts b/addon/components/hyper-table-v2/filtering-renderers/numeric.ts index 606c2af2..a1538f92 100644 --- a/addon/components/hyper-table-v2/filtering-renderers/numeric.ts +++ b/addon/components/hyper-table-v2/filtering-renderers/numeric.ts @@ -3,9 +3,11 @@ import { tracked } from '@glimmer/tracking'; import { action } from '@ember/object'; import { isTesting } from '@embroider/macros'; +import { debounce } from '@ember/runloop'; + import TableHandler from '@upfluence/hypertable/core/handler'; import { Column, OrderDirection } from '@upfluence/hypertable/core/interfaces'; -import { debounce } from '@ember/runloop'; +import { onlyNumeric } from '@upfluence/hypertable/utils'; interface HyperTableV2FilteringRenderersNumericArgs { handler: TableHandler; @@ -39,11 +41,14 @@ export default class HyperTableV2FilteringRenderersNumeric extends Component{{t "hypertable.column.ordering.label"}} -
- {{#each-in this.orderingOptions as |label value|}} - - {{/each-in}} -
+ {{/if}} {{#if @column.filterable}}
- -
- {{#each-in this.filteringOptions as |label value|}} - - {{/each-in}} -
+
{{#if (eq this.filterOption "fixed")}} diff --git a/addon/components/hyper-table/filters-renderers/date.js b/addon/components/hyper-table/filters-renderers/date.js index 3f56906d..d9ffa553 100644 --- a/addon/components/hyper-table/filters-renderers/date.js +++ b/addon/components/hyper-table/filters-renderers/date.js @@ -29,16 +29,16 @@ export default class DateFiltersRenderer extends FiltersRenderer { } get orderingOptions() { - return { - 'Oldest — Newest': `${this.args.column.orderKey}:asc`, - 'Newest — Oldest': `${this.args.column.orderKey}:desc` - }; + return [ + { label: 'Oldest — Newest', value: `${this.args.column.orderKey}:asc` }, + { label: 'Newest — Oldest', value: `${this.args.column.orderKey}:desc` } + ]; } - filteringOptions = Object.freeze({ - Moving: 'moving', - Fixed: 'fixed' - }); + filteringOptions = [ + { label: 'Moving', value: 'moving' }, + { label: 'Fixed', value: 'fixed' } + ]; movingDateOptions = Object.freeze({ Today: 'today', diff --git a/addon/components/hyper-table/filters-renderers/money.hbs b/addon/components/hyper-table/filters-renderers/money.hbs index e0e87b6d..615bc010 100644 --- a/addon/components/hyper-table/filters-renderers/money.hbs +++ b/addon/components/hyper-table/filters-renderers/money.hbs @@ -1,49 +1,65 @@ -{{#if column.orderable}} - {{#input-wrapper}} +{{#if this.column.orderable}} +
-
- {{#each-in orderingOptions as |label value|}} - {{radio-button - value=value - currentValue=column.orderBy - label=label - options=orderingOptions - onCheck="orderingOptionChanged" - }} - {{/each-in}} -
- {{/input-wrapper}} + +
{{/if}} -{{#if column.filterable}} - {{#input-wrapper classNames=(if column.orderable "margin-top-xx-sm")}} +{{#if this.column.filterable}} +
-
- {{#each-in existenceFilters as |label value|}} - {{radio-button - value=value - currentValue=currentExistenceFilter - label=label - options=existenceFilters - onCheck="existenceFilterChanged" - }} +
+ {{#each-in this.existenceFilters as |label value|}} +
+ + {{label}} +
{{/each-in}}
- {{/input-wrapper}} +
-
- {{#input-wrapper classNames="col-xs-6"}} +
+
- {{input type="number" placeholder="From" value=lowerBoundFilter class="form-control upf-input"}} - {{/input-wrapper}} + + <:input> + + + +
- {{#input-wrapper classNames="col-xs-6"}} +
- {{input type="number" placeholder="To" value=upperBoundFilter class="form-control upf-input"}} - {{/input-wrapper}} + + <:input> + + + +
diff --git a/addon/components/hyper-table/filters-renderers/numeric.hbs b/addon/components/hyper-table/filters-renderers/numeric.hbs index 5d9bf362..39fa5c94 100644 --- a/addon/components/hyper-table/filters-renderers/numeric.hbs +++ b/addon/components/hyper-table/filters-renderers/numeric.hbs @@ -1,49 +1,65 @@ -{{#if column.orderable}} - {{#input-wrapper}} - -
- {{#each-in orderingOptions as |label value|}} - {{radio-button - value=value - currentValue=column.orderBy - label=label - options=orderingOptions - onCheck="orderingOptionChanged" - }} - {{/each-in}} -
- {{/input-wrapper}} +{{#if this.column.orderable}} +
+ Order By + +
{{/if}} -{{#if column.filterable}} - {{#input-wrapper classNames=(if column.orderable "margin-top-xx-sm")}} +{{#if this.column.filterable}} +
-
- {{#each-in existenceFilters as |label value|}} - {{radio-button - value=value - currentValue=currentExistenceFilter - label=label - options=existenceFilters - onCheck="existenceFilterChanged" - }} +
+ {{#each-in this.existenceFilters as |label value|}} +
+ + {{label}} +
{{/each-in}}
- {{/input-wrapper}} +
-
- {{#input-wrapper classNames="col-xs-6"}} +
+
- {{input type="number" placeholder="From" value=lowerBoundFilter class="form-control upf-input"}} - {{/input-wrapper}} + + <:input> + + + +
- {{#input-wrapper classNames="col-xs-6"}} +
- {{input type="number" placeholder="To" value=upperBoundFilter class="form-control upf-input"}} - {{/input-wrapper}} + + <:input> + + + +
diff --git a/addon/components/hyper-table/filters-renderers/numeric.js b/addon/components/hyper-table/filters-renderers/numeric.js index 47afe82b..dda111cf 100644 --- a/addon/components/hyper-table/filters-renderers/numeric.js +++ b/addon/components/hyper-table/filters-renderers/numeric.js @@ -3,6 +3,7 @@ import { computed, observer } from '@ember/object'; import { debounce } from '@ember/runloop'; import FiltersRendererMixin from '@upfluence/hypertable/mixins/filters-renderer'; +import { onlyNumeric } from '@upfluence/hypertable/utils'; export default Component.extend(FiltersRendererMixin, { lowerBoundFilter: null, @@ -14,10 +15,10 @@ export default Component.extend(FiltersRendererMixin, { }, orderingOptions: computed('column.orderKey', function () { - return { - '0 — 9': `${this.column.orderKey}:asc`, - '9 — 0': `${this.column.orderKey}:desc` - }; + return [ + { label: '0 — 9', value: `${this.column.orderKey}:asc` }, + { label: '9 — 0', value: `${this.column.orderKey}:desc` } + ]; }), currentExistenceFilter: computed('column.filters.[]', 'lowerBoundFilter', 'upperBoundFilter', function () { @@ -44,6 +45,16 @@ export default Component.extend(FiltersRendererMixin, { this.manager.hooks.onColumnsChange('columns:change'); }, + setupOnlyNumericListener(element) { + const input = element.querySelector('input'); + input?.addEventListener('keydown', onlyNumeric); + }, + + teardownOnlyNumericListener(element) { + const input = element.querySelector('input'); + input?.removeEventListener('keydown', onlyNumeric); + }, + didReceiveAttrs() { this._super(); if (this.column) { diff --git a/addon/components/hyper-table/filters-renderers/text.hbs b/addon/components/hyper-table/filters-renderers/text.hbs index aac6abfe..c6421a68 100644 --- a/addon/components/hyper-table/filters-renderers/text.hbs +++ b/addon/components/hyper-table/filters-renderers/text.hbs @@ -1,51 +1,36 @@ -{{#if column.orderable}} - {{#input-wrapper}} +{{#if this.column.orderable}} +
-
- {{#each-in orderingOptions as |label value|}} - {{radio-button - value=value - currentValue=column.orderBy - label=label - options=orderingOptions - onCheck="orderingOptionChanged" - }} - {{/each-in}} -
- {{/input-wrapper}} + +
{{/if}} -{{#if column.filterable}} - {{#input-wrapper classNames=(if column.orderable "margin-top-xx-sm")}} +{{#if this.column.filterable}} +
-
- {{#each-in existenceFilters as |label value|}} - {{radio-button - value=value - currentValue=currentExistenceFilter - label=label - options=existenceFilters - onCheck="existenceFilterChanged" - }} +
+ {{#each-in this.existenceFilters as |label value|}} +
+ + {{label}} +
{{/each-in}}
- {{/input-wrapper}} +
- {{#input-wrapper}} +
-
- -
- {{/input-wrapper}} + +
diff --git a/addon/components/hyper-table/filters-renderers/text.js b/addon/components/hyper-table/filters-renderers/text.js index a8f42dc7..3344bce9 100644 --- a/addon/components/hyper-table/filters-renderers/text.js +++ b/addon/components/hyper-table/filters-renderers/text.js @@ -9,10 +9,10 @@ export default Component.extend(FiltersRendererMixin, { _searchQuery: null, orderingOptions: computed('column.orderKey', function () { - return { - 'A — Z': `${this.column.orderKey}:asc`, - 'Z — A': `${this.column.orderKey}:desc` - }; + return [ + { label: 'A — Z', value: `${this.column.orderKey}:asc` }, + { label: 'Z — A', value: `${this.column.orderKey}:desc` } + ]; }), existenceFilters: { diff --git a/addon/core/handler.ts b/addon/core/handler.ts index 0ea06b7b..eb4d1d66 100644 --- a/addon/core/handler.ts +++ b/addon/core/handler.ts @@ -67,6 +67,7 @@ export default class TableHandler { .fetchColumns() .then(({ columns }) => { this.columns = columns; + this._lastOrderedColumn = columns.find((column) => column.order); }) .catch(() => { this.communicationError = true; diff --git a/addon/utils/index.ts b/addon/utils/index.ts new file mode 100644 index 00000000..528e182c --- /dev/null +++ b/addon/utils/index.ts @@ -0,0 +1,26 @@ +const NUMERIC_ONLY = /^\d$/i; +const AUTHORIZED_INPUTS = [ + 'Backspace', + 'Delete', + 'ArrowLeft', + 'ArrowRight', + 'Tab', + 'Shift', + 'Control', + 'ArrowUp', + 'ArrowDown' +]; + +export function onlyNumeric(event: KeyboardEvent): void { + _ensureValueFormat(event, NUMERIC_ONLY); +} + +function _ensureValueFormat(event: KeyboardEvent, regexp: RegExp): void { + if (['c', 'v', 'a'].includes(event.key) && (event.metaKey || event.ctrlKey)) { + return; + } + + if (![regexp.test(event.key)].every((c) => c) && !AUTHORIZED_INPUTS.find((key: string) => key === event.key)) { + event.preventDefault(); + } +} diff --git a/app/styles/columns.less b/app/styles/columns.less index a6746122..9914cde0 100644 --- a/app/styles/columns.less +++ b/app/styles/columns.less @@ -290,6 +290,8 @@ opacity: 0; .filters { + display: flex; + flex-direction: column; padding-top: var(--spacing-px-12); .filters__option { diff --git a/app/utils/index.js b/app/utils/index.js new file mode 100644 index 00000000..2760f7d9 --- /dev/null +++ b/app/utils/index.js @@ -0,0 +1 @@ +export { onlyNumeric } from '@upfluence/hypertable/utils'; diff --git a/package.json b/package.json index b61d9a8b..e7f701f5 100644 --- a/package.json +++ b/package.json @@ -41,7 +41,7 @@ "ember-cli-typescript": "^4.2.1", "ember-flatpickr": "^3.1.1", "ember-named-blocks-polyfill": "^0.2.5", - "ember-sortable": "4.0.0", + "ember-sortable": "^5.1.1", "ember-truth-helpers": "^3.1.1", "moment": "^2.29.4", "tether": "^1.4.7" diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index bfa6b9f9..d512d799 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -33,8 +33,8 @@ dependencies: specifier: ^0.2.5 version: 0.2.5 ember-sortable: - specifier: 4.0.0 - version: 4.0.0(@babel/core@7.23.9)(@glint/template@1.2.1)(ember-source@3.28.12) + specifier: ^5.1.1 + version: 5.1.1(@ember/test-helpers@2.6.0)(@ember/test-waiters@3.0.2)(ember-modifier@3.2.7)(ember-source@3.28.12) ember-truth-helpers: specifier: ^3.1.1 version: 3.1.1 @@ -1554,7 +1554,6 @@ packages: transitivePeerDependencies: - '@babel/core' - supports-color - dev: true /@ember/test-waiters@3.0.2: resolution: {integrity: sha512-H8Q3Xy9rlqhDKnQpwt2pzAYDouww4TZIGSI1pZJhM7mQIGufQKuB0ijzn/yugA6Z+bNdjYp1HioP8Y4hn2zazQ==} @@ -1567,6 +1566,18 @@ packages: transitivePeerDependencies: - supports-color + /@embroider/addon-shim@1.8.9: + resolution: {integrity: sha512-qyN64T1jMHZ99ihlk7VFHCWHYZHLE1DOdHi0J7lmn5waV1DoW7gD8JLi1i7FregzXtKhbDc7shyEmTmWPTs8MQ==} + engines: {node: 12.* || 14.* || >= 16} + dependencies: + '@embroider/shared-internals': 2.6.2 + broccoli-funnel: 3.0.8 + common-ancestor-path: 1.0.1 + semver: 7.5.4 + transitivePeerDependencies: + - supports-color + dev: false + /@embroider/core@0.33.0: resolution: {integrity: sha512-Kd3W4vBJCSwskVislwldhuoe1RtdA04lRr2r2ccnPI4msCXxLn292WBaS7/x0LdEu2EMO5ffRDeQva2/xoS4Yg==} engines: {node: 10.* || 12.* || >= 14} @@ -1696,6 +1707,24 @@ packages: transitivePeerDependencies: - supports-color + /@embroider/shared-internals@2.6.2: + resolution: {integrity: sha512-jL3Bjn8C73AUBlTex+VixP7YmqvPNN/BZFB85odTstzLFOuR8y2mmGiuWbq17qNuFyoxc6xtndMnAeqwCXBNkA==} + engines: {node: 12.* || 14.* || >= 16} + dependencies: + babel-import-util: 2.0.1 + debug: 4.3.4 + ember-rfc176-data: 0.3.18 + fs-extra: 9.1.0 + js-string-escape: 1.0.1 + lodash: 4.17.21 + minimatch: 3.1.2 + resolve-package-path: 4.0.3 + semver: 7.5.4 + typescript-memoize: 1.1.1 + transitivePeerDependencies: + - supports-color + dev: false + /@embroider/test-setup@0.48.1: resolution: {integrity: sha512-MmYTgQMDVDrZPvxeT27LTUD/BOum21ip1tEYv5H/StSeTZyZQ861Q+8HXQUFTVF/HFjGAB1c/BAgnw+8hO1ueA==} engines: {node: 12.* || 14.* || >= 16} @@ -5224,6 +5253,10 @@ packages: engines: {node: '>= 10'} dev: true + /common-ancestor-path@1.0.1: + resolution: {integrity: sha512-L3sHRo1pXXEqX8VU28kfgUY+YGsk09hPqZiZmLacNib6XNTCM8ubYeT7ryXQw8asB1sKgcU5lkB7ONug08aB8w==} + dev: false + /common-tags@1.8.2: resolution: {integrity: sha512-gk/Z852D2Wtb//0I+kRFNKKE9dIIVirjoqPoA1wJU+XePVXZfGeBpk45+A1rKO4Q43prqWBNY/MiIeRLbPWUaA==} engines: {node: '>=4.0.0'} @@ -6695,7 +6728,6 @@ packages: transitivePeerDependencies: - '@babel/core' - supports-color - dev: true /ember-disable-prototype-extensions@1.1.3: resolution: {integrity: sha512-SB9NcZ27OtoUk+gfalsc3QU17+54OoqR668qHcuvHByk4KAhGxCKlkm9EBlKJcGr7yceOOAJqohTcCEBqfRw9g==} @@ -6728,17 +6760,6 @@ packages: - supports-color dev: false - /ember-get-config@2.1.1(@glint/template@1.2.1): - resolution: {integrity: sha512-uNmv1cPG/4qsac8oIf5txJ2FZ8p88LEpG4P3dNcjsJS98Y8hd0GPMFwVqpnzI78Lz7VYRGQWY4jnE4qm5R3j4g==} - engines: {node: 12.* || 14.* || >= 16} - dependencies: - '@embroider/macros': 1.13.4(@glint/template@1.2.1) - ember-cli-babel: 7.26.11 - transitivePeerDependencies: - - '@glint/template' - - supports-color - dev: false - /ember-intl@6.4.0(@babel/core@7.23.9)(@glint/template@1.2.1)(typescript@4.9.5)(webpack@5.88.2): resolution: {integrity: sha512-BXxscjgoqzXQ6tUSV8aJsQcUAIcfqLJnNjegarFWdBBHLEOffQ8xARhvQC0hW40zGi/RHFEyTTx7vbiCPGtP1A==} engines: {node: 16.* || >= 18} @@ -6921,22 +6942,21 @@ packages: - supports-color dev: true - /ember-sortable@4.0.0(@babel/core@7.23.9)(@glint/template@1.2.1)(ember-source@3.28.12): - resolution: {integrity: sha512-fRR7946IXwIt7SPMqRN2dJ3Gxaw6ioF/fzv/yzOPRBAaLMRRy3U8BGqCM0bNnE8IRuhRd63ox98Y0aFIkK43Hw==} + /ember-sortable@5.1.1(@ember/test-helpers@2.6.0)(@ember/test-waiters@3.0.2)(ember-modifier@3.2.7)(ember-source@3.28.12): + resolution: {integrity: sha512-UZMRE1mo4OfmfZpJlfJ+qc6b0ivk8vxnAE/pb2SH3+uNU+4DUrkywaymeDJOyH3HOUgg1SgsD1xRarnKusZfQg==} engines: {node: 14.* || >= 16} + peerDependencies: + '@ember/test-helpers': ^2.6.0 || >= 3.0.0 + '@ember/test-waiters': '>= 3.0.1' + ember-modifier: ^3.2.0 || >= 4.0.0 + ember-source: ^3.28.0 || >= 4.0.0 dependencies: - '@ember/render-modifiers': 2.1.0(@babel/core@7.23.9)(@glint/template@1.2.1)(ember-source@3.28.12) + '@ember/test-helpers': 2.6.0(@babel/core@7.23.9) '@ember/test-waiters': 3.0.2 - ember-cli-babel: 7.26.11 - ember-cli-htmlbars: 6.3.0 - ember-cli-version-checker: 5.1.2 - ember-get-config: 2.1.1(@glint/template@1.2.1) + '@embroider/addon-shim': 1.8.9 ember-modifier: 3.2.7(@babel/core@7.23.9) - ember-test-selectors: 6.0.0 + ember-source: 3.28.12(@babel/core@7.23.9) transitivePeerDependencies: - - '@babel/core' - - '@glint/template' - - ember-source - supports-color dev: false @@ -7036,17 +7056,6 @@ packages: - supports-color dev: true - /ember-test-selectors@6.0.0: - resolution: {integrity: sha512-PgYcI9PeNvtKaF0QncxfbS68olMYM1idwuI8v/WxsjOGqUx5bmsu6V17vy/d9hX4mwmjgsBhEghrVasGSuaIgw==} - engines: {node: 12.* || 14.* || >= 16.*} - dependencies: - calculate-cache-key-for-tree: 2.0.0 - ember-cli-babel: 7.26.11 - ember-cli-version-checker: 5.1.2 - transitivePeerDependencies: - - supports-color - dev: false - /ember-truth-helpers@3.1.1: resolution: {integrity: sha512-FHwJAx77aA5q27EhdaaiBFuy9No+8yaWNT5A7zs0sIFCmf14GbcLn69vJEp6mW7vkITezizGAWhw7gL0Wbk7DA==} engines: {node: 10.* || >= 12} From 7be79076411b9d5e20adb15edda1d39dcc1af8e9 Mon Sep 17 00:00:00 2001 From: Philippe Ndiaye Date: Thu, 1 Aug 2024 09:57:29 +0200 Subject: [PATCH 2/5] rollback ember-sortable version change --- .../hyper-table/filters-renderers/numeric.hbs | 2 +- package.json | 2 +- pnpm-lock.yaml | 56 ++++--------------- 3 files changed, 12 insertions(+), 48 deletions(-) diff --git a/addon/components/hyper-table/filters-renderers/numeric.hbs b/addon/components/hyper-table/filters-renderers/numeric.hbs index 39fa5c94..51800a4e 100644 --- a/addon/components/hyper-table/filters-renderers/numeric.hbs +++ b/addon/components/hyper-table/filters-renderers/numeric.hbs @@ -25,7 +25,7 @@
diff --git a/package.json b/package.json index e7f701f5..3dae4807 100644 --- a/package.json +++ b/package.json @@ -41,7 +41,7 @@ "ember-cli-typescript": "^4.2.1", "ember-flatpickr": "^3.1.1", "ember-named-blocks-polyfill": "^0.2.5", - "ember-sortable": "^5.1.1", + "ember-sortable": "^4.0.3", "ember-truth-helpers": "^3.1.1", "moment": "^2.29.4", "tether": "^1.4.7" diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index d512d799..f189e2cb 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -33,8 +33,8 @@ dependencies: specifier: ^0.2.5 version: 0.2.5 ember-sortable: - specifier: ^5.1.1 - version: 5.1.1(@ember/test-helpers@2.6.0)(@ember/test-waiters@3.0.2)(ember-modifier@3.2.7)(ember-source@3.28.12) + specifier: ^4.0.3 + version: 4.0.3(@babel/core@7.23.9)(@glint/template@1.2.1) ember-truth-helpers: specifier: ^3.1.1 version: 3.1.1 @@ -1554,6 +1554,7 @@ packages: transitivePeerDependencies: - '@babel/core' - supports-color + dev: true /@ember/test-waiters@3.0.2: resolution: {integrity: sha512-H8Q3Xy9rlqhDKnQpwt2pzAYDouww4TZIGSI1pZJhM7mQIGufQKuB0ijzn/yugA6Z+bNdjYp1HioP8Y4hn2zazQ==} @@ -1566,18 +1567,6 @@ packages: transitivePeerDependencies: - supports-color - /@embroider/addon-shim@1.8.9: - resolution: {integrity: sha512-qyN64T1jMHZ99ihlk7VFHCWHYZHLE1DOdHi0J7lmn5waV1DoW7gD8JLi1i7FregzXtKhbDc7shyEmTmWPTs8MQ==} - engines: {node: 12.* || 14.* || >= 16} - dependencies: - '@embroider/shared-internals': 2.6.2 - broccoli-funnel: 3.0.8 - common-ancestor-path: 1.0.1 - semver: 7.5.4 - transitivePeerDependencies: - - supports-color - dev: false - /@embroider/core@0.33.0: resolution: {integrity: sha512-Kd3W4vBJCSwskVislwldhuoe1RtdA04lRr2r2ccnPI4msCXxLn292WBaS7/x0LdEu2EMO5ffRDeQva2/xoS4Yg==} engines: {node: 10.* || 12.* || >= 14} @@ -1707,24 +1696,6 @@ packages: transitivePeerDependencies: - supports-color - /@embroider/shared-internals@2.6.2: - resolution: {integrity: sha512-jL3Bjn8C73AUBlTex+VixP7YmqvPNN/BZFB85odTstzLFOuR8y2mmGiuWbq17qNuFyoxc6xtndMnAeqwCXBNkA==} - engines: {node: 12.* || 14.* || >= 16} - dependencies: - babel-import-util: 2.0.1 - debug: 4.3.4 - ember-rfc176-data: 0.3.18 - fs-extra: 9.1.0 - js-string-escape: 1.0.1 - lodash: 4.17.21 - minimatch: 3.1.2 - resolve-package-path: 4.0.3 - semver: 7.5.4 - typescript-memoize: 1.1.1 - transitivePeerDependencies: - - supports-color - dev: false - /@embroider/test-setup@0.48.1: resolution: {integrity: sha512-MmYTgQMDVDrZPvxeT27LTUD/BOum21ip1tEYv5H/StSeTZyZQ861Q+8HXQUFTVF/HFjGAB1c/BAgnw+8hO1ueA==} engines: {node: 12.* || 14.* || >= 16} @@ -5253,10 +5224,6 @@ packages: engines: {node: '>= 10'} dev: true - /common-ancestor-path@1.0.1: - resolution: {integrity: sha512-L3sHRo1pXXEqX8VU28kfgUY+YGsk09hPqZiZmLacNib6XNTCM8ubYeT7ryXQw8asB1sKgcU5lkB7ONug08aB8w==} - dev: false - /common-tags@1.8.2: resolution: {integrity: sha512-gk/Z852D2Wtb//0I+kRFNKKE9dIIVirjoqPoA1wJU+XePVXZfGeBpk45+A1rKO4Q43prqWBNY/MiIeRLbPWUaA==} engines: {node: '>=4.0.0'} @@ -6728,6 +6695,7 @@ packages: transitivePeerDependencies: - '@babel/core' - supports-color + dev: true /ember-disable-prototype-extensions@1.1.3: resolution: {integrity: sha512-SB9NcZ27OtoUk+gfalsc3QU17+54OoqR668qHcuvHByk4KAhGxCKlkm9EBlKJcGr7yceOOAJqohTcCEBqfRw9g==} @@ -6942,21 +6910,17 @@ packages: - supports-color dev: true - /ember-sortable@5.1.1(@ember/test-helpers@2.6.0)(@ember/test-waiters@3.0.2)(ember-modifier@3.2.7)(ember-source@3.28.12): - resolution: {integrity: sha512-UZMRE1mo4OfmfZpJlfJ+qc6b0ivk8vxnAE/pb2SH3+uNU+4DUrkywaymeDJOyH3HOUgg1SgsD1xRarnKusZfQg==} + /ember-sortable@4.0.3(@babel/core@7.23.9)(@glint/template@1.2.1): + resolution: {integrity: sha512-iZ898uEXhIe/ywmhU8ASJPOHU9HV77cCRcnls0QtFIdwHV6hOc5+yoNaySMsud563gPdo1kXbVClot30y9RCUQ==} engines: {node: 14.* || >= 16} - peerDependencies: - '@ember/test-helpers': ^2.6.0 || >= 3.0.0 - '@ember/test-waiters': '>= 3.0.1' - ember-modifier: ^3.2.0 || >= 4.0.0 - ember-source: ^3.28.0 || >= 4.0.0 dependencies: - '@ember/test-helpers': 2.6.0(@babel/core@7.23.9) '@ember/test-waiters': 3.0.2 - '@embroider/addon-shim': 1.8.9 + '@embroider/macros': 1.13.4(@glint/template@1.2.1) + ember-cli-babel: 7.26.11 ember-modifier: 3.2.7(@babel/core@7.23.9) - ember-source: 3.28.12(@babel/core@7.23.9) transitivePeerDependencies: + - '@babel/core' + - '@glint/template' - supports-color dev: false From 6cd2666b6d20a4bf195eb494c9450ce7438d0f37 Mon Sep 17 00:00:00 2001 From: Philippe Ndiaye Date: Thu, 1 Aug 2024 10:22:16 +0200 Subject: [PATCH 3/5] fix tests --- .../filtering-renderers/common/ordering.hbs | 2 +- tests/dummy/app/controllers/application.ts | 12 +++++++++ .../common/ordering-test.ts | 24 +++++++++--------- .../filtering-renderers/date-test.ts | 25 ++++++++----------- .../filtering-renderers/numeric-test.ts | 4 +-- .../filtering-renderers/text-test.ts | 8 ++++-- 6 files changed, 43 insertions(+), 32 deletions(-) diff --git a/addon/components/hyper-table-v2/filtering-renderers/common/ordering.hbs b/addon/components/hyper-table-v2/filtering-renderers/common/ordering.hbs index 36504a26..115b5c60 100644 --- a/addon/components/hyper-table-v2/filtering-renderers/common/ordering.hbs +++ b/addon/components/hyper-table-v2/filtering-renderers/common/ordering.hbs @@ -1,4 +1,4 @@ -
+
` ); - assert.dom('.btn-group').exists(); + assert.dom('.oss-toggle-buttons-container').exists(); }); test('it uses the default orderingOptions when no @orderingOptions are passed', async function (assert: Assert) { @@ -40,10 +40,10 @@ module('Integration | Component | hyper-table-v2/filtering-renderers/common/orde hbs`` ); - assert.dom('.btn-group').exists(); - assert.dom('.btn-group .btn').exists({ count: 2 }); - assert.dom('.btn-group .btn:nth-child(1)').hasText('A — Z'); - assert.dom('.btn-group .btn:nth-child(2)').hasText('Z — A'); + assert.dom('.oss-toggle-buttons-container').exists(); + assert.dom('.oss-toggle-buttons-container .oss-toggle-buttons-btn').exists({ count: 2 }); + assert.dom('.oss-toggle-buttons-container .oss-toggle-buttons-btn:nth-child(1)').hasText('A — Z'); + assert.dom('.oss-toggle-buttons-container .oss-toggle-buttons-btn:nth-child(2)').hasText('Z — A'); }); test('it properly displays @orderingOptions when they are passed', async function (assert: Assert) { @@ -56,10 +56,10 @@ module('Integration | Component | hyper-table-v2/filtering-renderers/common/orde @orderingOptions={{this.orderingOptions}} />` ); - assert.dom('.btn-group').exists(); - assert.dom('.btn-group .btn').exists({ count: 2 }); - assert.dom('.btn-group .btn:nth-child(1)').hasText('Oldest — Newest'); - assert.dom('.btn-group .btn:nth-child(2)').hasText('Newest — Oldest'); + assert.dom('.oss-toggle-buttons-container').exists(); + assert.dom('.oss-toggle-buttons-container .oss-toggle-buttons-btn').exists({ count: 2 }); + assert.dom('.oss-toggle-buttons-container .oss-toggle-buttons-btn:nth-child(1)').hasText('Oldest — Newest'); + assert.dom('.oss-toggle-buttons-container .oss-toggle-buttons-btn:nth-child(2)').hasText('Newest — Oldest'); }); test('it calls the Handler#applyOrder method correctly via the radio buttons', async function (assert: Assert) { @@ -70,7 +70,7 @@ module('Integration | Component | hyper-table-v2/filtering-renderers/common/orde assert.equal(this.column.order, undefined); - await click('.upf-radio-btn:first-child'); + await click('.oss-toggle-buttons-container .oss-toggle-buttons-btn:nth-child(1)'); //@ts-ignore assert.ok(handlerSpy.applyOrder.calledWith(this.column, 'asc')); assert.deepEqual(this.column.order, { @@ -78,7 +78,7 @@ module('Integration | Component | hyper-table-v2/filtering-renderers/common/orde key: 'date' }); - await click('.upf-radio-btn:last-child'); + await click('.oss-toggle-buttons-container .oss-toggle-buttons-btn:nth-child(2)'); //@ts-ignore assert.ok(handlerSpy.applyOrder.calledWith(this.column, 'desc')); assert.deepEqual(this.column.order, { diff --git a/tests/integration/components/hyper-table-v2/filtering-renderers/date-test.ts b/tests/integration/components/hyper-table-v2/filtering-renderers/date-test.ts index 0c7c52c3..b2c29265 100644 --- a/tests/integration/components/hyper-table-v2/filtering-renderers/date-test.ts +++ b/tests/integration/components/hyper-table-v2/filtering-renderers/date-test.ts @@ -34,25 +34,18 @@ module('Integration | Component | hyper-table-v2/filtering-renderers/date', func this.column = this.handler.columns[1]; }); - test('it has the right data-control-name', async function (assert: Assert) { - await render(hbs``); - - assert.dom('div[data-control-name="hypertable__column_filtering_for_date"]').exists(); - }); - module('ordering', function () { test('it does not render the section if the column is not orderable', async function (assert: Assert) { this.column.definition.orderable = false; await render(hbs``); - assert.dom('div[data-control-name="hypertable__column_filtering_for_date_order_by_radiogroup"]').doesNotExist(); + assert.dom('[data-control-name="hypertable__column_filtering_for_date_order_by_radiogroup"]').doesNotExist(); }); test('it renders if the column is orderable', async function (assert: Assert) { await render(hbs``); - - assert.dom('div[data-control-name="hypertable__column_filtering_for_date_order_by_radiogroup"]').exists(); + assert.dom('[data-control-name="hypertable__column_filtering_for_date_order_by_radiogroup"]').exists(); }); test('it calls the Handler#applyOrder method correctly via the radio buttons', async function (assert: Assert) { @@ -63,7 +56,7 @@ module('Integration | Component | hyper-table-v2/filtering-renderers/date', func assert.equal(this.column.order, undefined); await click( - 'div[data-control-name="hypertable__column_filtering_for_date_ordering"] .upf-radio-btn:first-child ' + '[data-control-name="hypertable__column_filtering_for_date_ordering"] .oss-toggle-buttons-btn:nth-child(1)' ); //@ts-ignore @@ -73,7 +66,9 @@ module('Integration | Component | hyper-table-v2/filtering-renderers/date', func key: 'date' }); - await click('div[data-control-name="hypertable__column_filtering_for_date_ordering"] .upf-radio-btn:last-child '); + await click( + 'div[data-control-name="hypertable__column_filtering_for_date_ordering"] .oss-toggle-buttons-btn:nth-child(2)' + ); //@ts-ignore assert.ok(handlerSpy.applyOrder.calledWith(this.column, 'desc')); @@ -105,7 +100,7 @@ module('Integration | Component | hyper-table-v2/filtering-renderers/date', func await render(hbs``); await click( - 'div[data-control-name="hypertable__column_filtering_for_date_filter_by_radiogroup"] .upf-radio-btn:first-child' + 'div[data-control-name="hypertable__column_filtering_for_date_filter_by_radiogroup"] .oss-toggle-buttons-btn:nth-child(1)' ); let filterOptions = findAll('.filters__option'); assert.equal(filterOptions.length, 6); @@ -122,7 +117,7 @@ module('Integration | Component | hyper-table-v2/filtering-renderers/date', func await render(hbs``); await click( - 'div[data-control-name="hypertable__column_filtering_for_date_filter_by_radiogroup"] .upf-radio-btn:first-child' + 'div[data-control-name="hypertable__column_filtering_for_date_filter_by_radiogroup"] .oss-toggle-buttons-btn:nth-child(1)' ); await click('.filters__option'); assert.ok( @@ -139,7 +134,7 @@ module('Integration | Component | hyper-table-v2/filtering-renderers/date', func await render(hbs``); await click( - 'div[data-control-name="hypertable__column_filtering_for_date_filter_by_radiogroup"] .upf-radio-btn:last-child' + 'div[data-control-name="hypertable__column_filtering_for_date_filter_by_radiogroup"] .oss-toggle-buttons-btn:nth-child(2)' ); assert.dom('div[data-control-name="hypertable__column_filtering_for_date_date_range_inputs"]').exists(); }); @@ -148,7 +143,7 @@ module('Integration | Component | hyper-table-v2/filtering-renderers/date', func await render(hbs``); await click( - 'div[data-control-name="hypertable__column_filtering_for_date_filter_by_radiogroup"] .upf-radio-btn:last-child' + 'div[data-control-name="hypertable__column_filtering_for_date_filter_by_radiogroup"] .oss-toggle-buttons-btn:nth-child(2)' ); await click('div[data-control-name="hypertable__column_filtering_for_date_date_range_inputs"] .upf-input'); diff --git a/tests/integration/components/hyper-table-v2/filtering-renderers/numeric-test.ts b/tests/integration/components/hyper-table-v2/filtering-renderers/numeric-test.ts index db98a507..10d77125 100644 --- a/tests/integration/components/hyper-table-v2/filtering-renderers/numeric-test.ts +++ b/tests/integration/components/hyper-table-v2/filtering-renderers/numeric-test.ts @@ -66,7 +66,7 @@ module('Integration | Component | hyper-table-v2/filtering-renderers/numeric', f assert.equal(this.column.order, undefined); await click( - 'div[data-control-name="hypertable__column_filtering_for_total_ordering"] .upf-radio-btn:first-child ' + 'div[data-control-name="hypertable__column_filtering_for_total_ordering"] .oss-toggle-buttons-btn:nth-child(1)' ); //@ts-ignore @@ -77,7 +77,7 @@ module('Integration | Component | hyper-table-v2/filtering-renderers/numeric', f }); await click( - 'div[data-control-name="hypertable__column_filtering_for_total_ordering"] .upf-radio-btn:last-child ' + 'div[data-control-name="hypertable__column_filtering_for_total_ordering"] .oss-toggle-buttons-btn:nth-child(2)' ); //@ts-ignore diff --git a/tests/integration/components/hyper-table-v2/filtering-renderers/text-test.ts b/tests/integration/components/hyper-table-v2/filtering-renderers/text-test.ts index 76702b44..9003c631 100644 --- a/tests/integration/components/hyper-table-v2/filtering-renderers/text-test.ts +++ b/tests/integration/components/hyper-table-v2/filtering-renderers/text-test.ts @@ -59,7 +59,9 @@ module('Integration | Component | hyper-table-v2/filtering-renderers/text', func await render(hbs``); assert.equal(this.column.order, undefined); - await click('div[data-control-name="hypertable__column_filtering_for_foo_ordering"] .upf-radio-btn:first-child '); + await click( + 'div[data-control-name="hypertable__column_filtering_for_foo_ordering"] .oss-toggle-buttons-btn:nth-child(1)' + ); //@ts-ignore assert.ok(handlerSpy.applyOrder.calledWith(this.column, 'asc')); @@ -68,7 +70,9 @@ module('Integration | Component | hyper-table-v2/filtering-renderers/text', func key: 'foo' }); - await click('div[data-control-name="hypertable__column_filtering_for_foo_ordering"] .upf-radio-btn:last-child '); + await click( + 'div[data-control-name="hypertable__column_filtering_for_foo_ordering"] .oss-toggle-buttons-btn:nth-child(2)' + ); //@ts-ignore assert.ok(handlerSpy.applyOrder.calledWith(this.column, 'desc')); From e51073d46d94510b5576c0ca702208de076eb65f Mon Sep 17 00:00:00 2001 From: Philippe Ndiaye Date: Thu, 1 Aug 2024 10:37:22 +0200 Subject: [PATCH 4/5] hypertable v2/common search: add support for input validation --- .../filtering-renderers/common/search.hbs | 2 ++ .../filtering-renderers/common/search.ts | 12 ++++++++++++ 2 files changed, 14 insertions(+) diff --git a/addon/components/hyper-table-v2/filtering-renderers/common/search.hbs b/addon/components/hyper-table-v2/filtering-renderers/common/search.hbs index 106844a5..eaef3e0f 100644 --- a/addon/components/hyper-table-v2/filtering-renderers/common/search.hbs +++ b/addon/components/hyper-table-v2/filtering-renderers/common/search.hbs @@ -5,6 +5,8 @@ @value={{this.searchQuery}} @onChange={{this.onInputChanged}} @placeholder={{t "hypertable.column.filtering.search_term.placeholder"}} + {{(if (eq @type "number") (modifier "did-insert" this.setupOnlyNumericListener))}} + {{(if (eq @type "number") (modifier "will-destroy" this.teardownOnlyNumericListener))}} > <:suffix> {{#if (gt this.searchQuery.length 0)}} diff --git a/addon/components/hyper-table-v2/filtering-renderers/common/search.ts b/addon/components/hyper-table-v2/filtering-renderers/common/search.ts index 7de24190..c084ee40 100644 --- a/addon/components/hyper-table-v2/filtering-renderers/common/search.ts +++ b/addon/components/hyper-table-v2/filtering-renderers/common/search.ts @@ -5,10 +5,12 @@ import { tracked } from '@glimmer/tracking'; import TableHandler from '@upfluence/hypertable/core/handler'; import { Column } from '@upfluence/hypertable/core/interfaces'; +import { onlyNumeric } from '@upfluence/hypertable/utils'; interface HyperTableV2FilteringRenderersSearchArgs { handler: TableHandler; column: Column; + type?: string; } const SEARCH_DEBOUNCE_TIME: number = 300; @@ -28,6 +30,16 @@ export default class HyperTableV2FilteringRenderersSearch extends Component Date: Thu, 1 Aug 2024 16:56:56 +0200 Subject: [PATCH 5/5] fix pr feedback --- .../hyper-table-v2/filtering-renderers/common/ordering.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/addon/components/hyper-table-v2/filtering-renderers/common/ordering.ts b/addon/components/hyper-table-v2/filtering-renderers/common/ordering.ts index b6bdecf1..0b3cbe15 100644 --- a/addon/components/hyper-table-v2/filtering-renderers/common/ordering.ts +++ b/addon/components/hyper-table-v2/filtering-renderers/common/ordering.ts @@ -47,7 +47,7 @@ export default class HyperTableV2FilteringRenderersOrdering extends Component