Ensure content validation on numeric filters fields

addon/components/hyper-table-v2/filtering-renderers/common/ordering.hbs

@@ -1,14 +1,8 @@
-<div class="fx-col">
+<div class="fx-col" ...attributes>
   <label>{{@label}}</label>
-  <div class="btn-group upf-radio-group" ...attributes>
-    {{#each-in this.orderingOptions as |label value|}}
-      <RadioButton
-        @value={{value}}
-        @currentValue={{this.currentOrderingDirection}}
-        @label={{label}}
-        @options={{this.orderingOptions}}
-        @onCheck={{this.orderingDirectionChanged}}
-      />
-    {{/each-in}}
-  </div>
+  <OSS::ToggleButtons
+    @toggles={{this.toggles}}
+    @selectedToggle={{this.currentOrderingDirection}}
+    @onSelection={{this.orderingDirectionChanged}}
+  />
 </div>

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<HyperTableV2FilteringRenderersOrderingArgs> {
-  @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

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)}}

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<Hype
     });
   }
 
+  setupOnlyNumericListener(element: HTMLElement): void {
+    const input = element.querySelector('input');
+    input?.addEventListener('keydown', onlyNumeric);
+  }
+
+  teardownOnlyNumericListener(element: HTMLElement): void {
+    const input = element.querySelector('input');
+    input?.removeEventListener('keydown', onlyNumeric);
+  }
+
   @action
   onInputChanged(): void {
     debounce(this, this._applyFilters, SEARCH_DEBOUNCE_TIME);

addon/components/hyper-table-v2/filtering-renderers/date.hbs

@@ -15,21 +15,13 @@
   {{#if @column.definition.filterable}}
     <div class="fx-col">
       <label>{{t "hypertable.column.filtering.label"}}</label>
-
-      <div
-        class="btn-group upf-radio-group"
+      <OSS::ToggleButtons
+        @toggles={{this.filteringOptions}}
+        @selectedToggle={{this.filterOption}}
+        @onSelection={{this.filterOptionChanged}}
         data-control-name={{concat "hypertable__column_filtering_for_" @column.definition.key "_filter_by_radiogroup"}}
-      >
-        {{#each-in this.filteringOptions as |label value|}}
-          <RadioButton
-            @value={{value}}
-            @currentValue={{this.filterOption}}
-            @label={{label}}
-            @options={{this.filteringOptions}}
-            @onCheck="filterOptionChanged"
-          />
-        {{/each-in}}
-      </div>
+      />
+
       <div
         class="filters"
         data-control-name={{concat "hypertable__column_filtering_for_" @column.definition.key "_date_range_inputs"}}

addon/components/hyper-table-v2/filtering-renderers/date.ts

@@ -20,10 +20,10 @@ export default class HyperTableV2FilteringRenderersDate extends Component<HyperT
 
   private _calendarContainer: any = null;
 
-  filteringOptions = Object.freeze({
-    Moving: 'moving',
-    Fixed: 'fixed'
-  });
+  filteringOptions: { label: string; value: FilterOption }[] = [
+    { label: 'Moving', value: 'moving' },
+    { label: 'Fixed', value: 'fixed' }
+  ];
 
   movingDateOptions = Object.freeze({
     Today: 'today',

addon/components/hyper-table-v2/filtering-renderers/numeric.hbs

@@ -19,17 +19,20 @@
       @activateWithValue={{this.hasBoundFiltersDefined}}
       data-control-name={{concat "hypertable__column_filtering_for_" @column.definition.key "_existence_selector"}}
     />
-    <div class="fx-row fx-gap-px-30">
+    <div class="fx-row fx-gap-px-12">
       <div class="fx-col">
         <label>{{t "hypertable.column.filtering.from"}}</label>
         <OSS::InputContainer>
           <:input>
             <Input
-              type="number"
-              @placeholder={{t "hypertable.column.filtering.from"}}
               @value={{this.lowerBoundFilter}}
+              @type="number"
+              placeholder={{t "hypertable.column.filtering.from"}}
+              aria-label={{t "hypertable.column.filtering.from"}}
               autocomplete="off"
               {{on "keydown" this.addRangeFilter}}
+              {{did-insert this.setupOnlyNumericListener}}
+              {{will-destroy this.teardownOnlyNumericListener}}
               data-control-name={{concat "hypertable__column_filtering_for_" @column.definition.key "_range_from"}}
             />
           </:input>
@@ -40,11 +43,13 @@
         <OSS::InputContainer>
           <:input>
             <Input
-              type="number"
-              @placeholder={{t "hypertable.column.filtering.to"}}
+              @type="number"
               @value={{this.upperBoundFilter}}
+              placeholder={{t "hypertable.column.filtering.to"}}
               autocomplete="off"
               {{on "keydown" this.addRangeFilter}}
+              {{did-insert this.setupOnlyNumericListener}}
+              {{will-destroy this.teardownOnlyNumericListener}}
               data-control-name={{concat "hypertable__column_filtering_for_" @column.definition.key "_range_to"}}
             />
           </:input>

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<Hyp
     return this.lowerBoundFilter || this.upperBoundFilter ? true : false;
   }
 
-  private _addRangeFilter(): void {
-    this.args.handler.applyFilters(this.args.column, [
-      ...(this.lowerBoundFilter ? [{ key: 'lower_bound', value: this.lowerBoundFilter }] : []),
-      ...(this.upperBoundFilter ? [{ key: 'upper_bound', value: this.upperBoundFilter }] : [])
-    ]);
+  setupOnlyNumericListener(element: HTMLElement): void {
+    const input = element.querySelector('input');
+    input?.addEventListener('keydown', onlyNumeric);
+  }
+
+  teardownOnlyNumericListener(element: HTMLElement): void {
+    const input = element.querySelector('input');
+    input?.removeEventListener('keydown', onlyNumeric);
   }
 
   @action
@@ -61,4 +66,11 @@ export default class HyperTableV2FilteringRenderersNumeric extends Component<Hyp
     this.lowerBoundFilter = '';
     this.upperBoundFilter = '';
   }
+
+  private _addRangeFilter(): void {
+    this.args.handler.applyFilters(this.args.column, [
+      ...(this.lowerBoundFilter ? [{ key: 'lower_bound', value: this.lowerBoundFilter }] : []),
+      ...(this.upperBoundFilter ? [{ key: 'upper_bound', value: this.upperBoundFilter }] : [])
+    ]);
+  }
 }

addon/components/hyper-table/filters-renderers/date.hbs

@@ -1,33 +1,22 @@
 {{#if @column.orderable}}
   <label>{{t "hypertable.column.ordering.label"}}</label>
-  <div class="btn-group upf-radio-group" data-control-name={{concat this._controlNamePrefix "_order_by_radiogroup"}}>
-    {{#each-in this.orderingOptions as |label value|}}
-      <RadioButton
-        @value={{value}}
-        @currentValue={{@column.orderBy}}
-        @label={{label}}
-        @options={{this.orderingOptions}}
-        @onCheck="orderingOptionChanged"
-      />
-    {{/each-in}}
-  </div>
+  <OSS::ToggleButtons
+    @toggles={{this.orderingOptions}}
+    @selectedToggle={{@column.orderBy}}
+    @onSelection={{this.orderingOptionChanged}}
+    data-control-name={{concat this._controlNamePrefix "_order_by_radiogroup"}}
+  />
 {{/if}}
 
 {{#if @column.filterable}}
   <div class={{if @column.orderable "margin-top-xx-sm"}}>
     <label>{{t "hypertable.column.filtering.label"}}</label>
-
-    <div class="btn-group upf-radio-group" data-control-name={{concat this._controlNamePrefix "_filter_by_radiogroup"}}>
-      {{#each-in this.filteringOptions as |label value|}}
-        <RadioButton
-          @value={{value}}
-          @currentValue={{this.filterOption}}
-          @label={{label}}
-          @options={{this.filteringOptions}}
-          @onCheck="filterOptionChanged"
-        />
-      {{/each-in}}
-    </div>
+    <OSS::ToggleButtons
+      @toggles={{this.filteringOptions}}
+      @selectedToggle={{this.filterOption}}
+      @onSelection={{this.filterOptionChanged}}
+      data-control-name={{concat this._controlNamePrefix "_filter_by_radiogroup"}}
+    />
 
     <div class="filters" data-control-name={{concat this._controlNamePrefix "_date_range_inputs"}}>
       {{#if (eq this.filterOption "fixed")}}

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',