Skip to content

Commit 72ce94b

Browse files
dchyundchyun
committed
Feat: Refactor filter options and tab into filter group
1 parent eabf73a commit 72ce94b

File tree

14 files changed

+143
-137
lines changed

14 files changed

+143
-137
lines changed

‎packages/components/package.json‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -237,8 +237,7 @@
237237
"./components/hds/dropdown/toggle/chevron.js": "./dist/_app_/components/hds/dropdown/toggle/chevron.js",
238238
"./components/hds/dropdown/toggle/icon.js": "./dist/_app_/components/hds/dropdown/toggle/icon.js",
239239
"./components/hds/filter-bar/checkbox.js": "./dist/_app_/components/hds/filter-bar/checkbox.js",
240-
"./components/hds/filter-bar/filter-options.js": "./dist/_app_/components/hds/filter-bar/filter-options.js",
241-
"./components/hds/filter-bar/filter-tab.js": "./dist/_app_/components/hds/filter-bar/filter-tab.js",
240+
"./components/hds/filter-bar/filter-group.js": "./dist/_app_/components/hds/filter-bar/filter-group.js",
242241
"./components/hds/filter-bar/filters-dropdown.js": "./dist/_app_/components/hds/filter-bar/filters-dropdown.js",
243242
"./components/hds/filter-bar.js": "./dist/_app_/components/hds/filter-bar.js",
244243
"./components/hds/filter-bar/radio.js": "./dist/_app_/components/hds/filter-bar/radio.js",

‎packages/components/src/components.ts‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -134,8 +134,7 @@ export * from './components/hds/dropdown/types.ts';
134134
export { default as HdsFilterBar } from './components/hds/filter-bar/index.ts';
135135
export { default as HdsFilterBarCheckbox } from './components/hds/filter-bar/checkbox.ts';
136136
export { default as HdsFilterBarFiltersDropdown } from './components/hds/filter-bar/filters-dropdown.ts';
137-
export { default as HdsFilterBarFilterTab } from './components/hds/filter-bar/filter-tab.ts';
138-
export { default as HdsFilterBarFilterOptions } from './components/hds/filter-bar/filter-options.ts';
137+
export { default as HdsFilterBarFilterGroup } from './components/hds/filter-bar/filter-group.ts';
139138
export { default as HdsFilterBarRadio } from './components/hds/filter-bar/radio.ts';
140139
export { default as HdsFilterBarRange } from './components/hds/filter-bar/range.ts';
141140
export * from './components/hds/filter-bar/types.ts';

‎packages/components/src/components/hds/filter-bar/filter-options.hbs‎ renamed to ‎packages/components/src/components/hds/filter-bar/filter-group.hbs‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,16 @@
22
Copyright (c) HashiCorp, Inc.
33
SPDX-License-Identifier: MPL-2.0
44
}}
5+
{{#let @tab as |Tab|}}
6+
<Tab class="hds-filter-bar__filters-dropdown__filter-tab">
7+
<Hds::Text::Body>{{@text}}</Hds::Text::Body>
8+
{{#unless (eq this.numFilters 0)}}
9+
<Hds::Text::Body>{{this.numFilters}}</Hds::Text::Body>
10+
{{/unless}}
11+
</Tab>
12+
{{/let}}
513
{{#let @panel as |Panel|}}
6-
<Panel class="hds-filter-bar__filters-dropdown__filter-options" {{this._setUpFilterOptions}}>
14+
<Panel class="hds-filter-bar__filters-dropdown__filter-options" {{this._setUpFilterPanel}}>
715
{{#if @searchEnabled}}
816
<div class="hds-filter-bar__filters-dropdown__filter-options__search">
917
<Hds::Form::TextInput::Base

‎packages/components/src/components/hds/filter-bar/filter-options.ts‎ renamed to ‎packages/components/src/components/hds/filter-bar/filter-group.ts‎

Lines changed: 23 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import { tracked } from '@glimmer/tracking';
99
import { modifier } from 'ember-modifier';
1010
import type { WithBoundArgs } from '@glint/template';
1111

12+
import HdsTabsTab from '../tabs/tab.ts';
1213
import HdsTabsPanel from '../tabs/panel.ts';
1314
import type { HdsTabsPanelSignature } from '../tabs/panel.ts';
1415

@@ -25,10 +26,12 @@ import type {
2526
HdsFilterBarRangeFilterSelector,
2627
} from './types.ts';
2728

28-
export interface HdsFilterBarFilterOptionsSignature {
29+
export interface HdsFilterBarFilterGroupSignature {
2930
Args: {
31+
tab?: WithBoundArgs<typeof HdsTabsTab, never>;
3032
panel?: WithBoundArgs<typeof HdsTabsPanel, never>;
3133
key: string;
34+
text: string;
3235
type?: HdsFilterBarFilterType;
3336
filters: HdsFilterBarFilters;
3437
searchEnabled?: boolean;
@@ -51,14 +54,14 @@ export interface HdsFilterBarFilterOptionsSignature {
5154
Element: HdsTabsPanelSignature['Element'];
5255
}
5356

54-
export default class HdsFilterBarFilterOptions extends Component<HdsFilterBarFilterOptionsSignature> {
57+
export default class HdsFilterBarFilterGroup extends Component<HdsFilterBarFilterGroupSignature> {
5558
@tracked internalFilters: HdsFilterBarData | undefined = [];
5659

57-
private _element!: HdsTabsPanelSignature['Element'];
60+
private _panelElement!: HdsTabsPanelSignature['Element'];
5861

59-
private _setUpFilterOptions = modifier(
62+
private _setUpFilterPanel = modifier(
6063
(element: HdsTabsPanelSignature['Element']) => {
61-
this._element = element;
64+
this._panelElement = element;
6265

6366
if (this.keyFilter) {
6467
this.internalFilters = JSON.parse(
@@ -86,6 +89,19 @@ export default class HdsFilterBarFilterOptions extends Component<HdsFilterBarFil
8689
return filters[key]?.data;
8790
}
8891

92+
get numFilters(): number {
93+
const { filters, key } = this.args;
94+
if (filters && key in filters) {
95+
const keyFilters = filters[key]?.data;
96+
if (Array.isArray(keyFilters)) {
97+
return keyFilters.length;
98+
} else if (keyFilters) {
99+
return 1;
100+
}
101+
}
102+
return 0;
103+
}
104+
89105
@action
90106
onSelectionChange(event: Event): void {
91107
const addFilter = (value: unknown): void => {
@@ -170,6 +186,7 @@ export default class HdsFilterBarFilterOptions extends Component<HdsFilterBarFil
170186
}
171187
return {
172188
type: this.type,
189+
text: this.args.text,
173190
data: this.internalFilters,
174191
} as HdsFilterBarFilter;
175192
}
@@ -183,7 +200,7 @@ export default class HdsFilterBarFilterOptions extends Component<HdsFilterBarFil
183200
}
184201

185202
private onSearch = (event: Event) => {
186-
const listItems = this._element.querySelectorAll(
203+
const listItems = this._panelElement.querySelectorAll(
187204
'.hds-filter-bar__filters-dropdown__filter-option'
188205
);
189206
const input = event.target as HTMLInputElement;

‎packages/components/src/components/hds/filter-bar/filter-tab.hbs‎

Lines changed: 0 additions & 12 deletions
This file was deleted.

‎packages/components/src/components/hds/filter-bar/filter-tab.ts‎

Lines changed: 0 additions & 37 deletions
This file was deleted.

‎packages/components/src/components/hds/filter-bar/filters-dropdown.hbs‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,9 +16,8 @@
1616
<Hds::Tabs as |T|>
1717
{{yield
1818
(hash
19-
FilterTab=(component "hds/filter-bar/filter-tab" tab=T.Tab filters=this.internalFilters)
20-
FilterOptions=(component
21-
"hds/filter-bar/filter-options" panel=T.Panel onChange=this.onFilter filters=this.internalFilters
19+
FilterGroup=(component
20+
"hds/filter-bar/filter-group" tab=T.Tab panel=T.Panel onChange=this.onFilter filters=this.internalFilters
2221
)
2322
close=D.close
2423
)

‎packages/components/src/components/hds/filter-bar/filters-dropdown.ts‎

Lines changed: 4 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,7 @@ import { modifier } from 'ember-modifier';
1010
import type Owner from '@ember/owner';
1111
import type { WithBoundArgs } from '@glint/template';
1212

13-
import HdsFilterBarFilterTab from './filter-tab.ts';
14-
import HdsFilterBarFilterOptions from './filter-options.ts';
13+
import HdsFilterBarFilterGroup from './filter-group.ts';
1514
import type { HdsFilterBarFilters, HdsFilterBarFilter } from './types.ts';
1615

1716
import type { HdsDropdownSignature } from '../dropdown/index.ts';
@@ -24,13 +23,9 @@ export interface HdsFilterBarFiltersDropdownSignature {
2423
Blocks: {
2524
default: [
2625
{
27-
FilterTab?: WithBoundArgs<
28-
typeof HdsFilterBarFilterTab,
29-
'tab' | 'filters'
30-
>;
31-
FilterOptions?: WithBoundArgs<
32-
typeof HdsFilterBarFilterOptions,
33-
'panel' | 'onChange' | 'filters'
26+
FilterGroup?: WithBoundArgs<
27+
typeof HdsFilterBarFilterGroup,
28+
'tab' | 'panel' | 'filters' | 'onChange'
3429
>;
3530
},
3631
];

‎packages/components/src/components/hds/filter-bar/index.hbs‎

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -28,14 +28,20 @@
2828
{{#if filter.data}}
2929
{{#if (and (eq filter.type "single-select"))}}
3030
<Hds::Tag
31-
@text="{{key}}: {{this._filterText filter.data}}"
32-
@onDismiss={{fn this.onFilterDismiss key (this._filterValue filter.data)}}
31+
@text="{{this._filterKeyText key filter}}: {{this._filterText filter.data}}"
32+
@onDismiss={{fn this.onFilterDismiss key}}
3333
/>
3434
{{else if (eq filter.type "range")}}
35-
<Hds::Tag @text="{{key}}: to do" />
35+
<Hds::Tag
36+
@text="{{this._filterKeyText key filter}} {{this._rangeFilterText filter.data}}"
37+
@onDismiss={{fn this.onFilterDismiss key}}
38+
/>
3639
{{else if (eq filter.type "multi-select")}}
3740
{{#each (this._filterArrayData filter.data) as |item|}}
38-
<Hds::Tag @text="{{key}}: {{item.text}}" @onDismiss={{fn this.onFilterDismiss key item.value}} />
41+
<Hds::Tag
42+
@text="{{this._filterKeyText key filter}}: {{item.text}}"
43+
@onDismiss={{fn this.onFilterDismiss key item.value}}
44+
/>
3945
{{/each}}
4046
{{/if}}
4147
{{/if}}

‎packages/components/src/components/hds/filter-bar/index.ts‎

Lines changed: 20 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,8 @@ import HdsDropdown from '../dropdown/index.ts';
1818
import HdsFilterBarFiltersDropdown from './filters-dropdown.ts';
1919
import { isArray } from '@ember/array';
2020

21+
import { SELECTORS_DISPLAY_SYMBOL } from './range.ts';
22+
2123
export interface HdsFilterBarSignature {
2224
Args: {
2325
filters: HdsFilterBarFilters;
@@ -68,7 +70,7 @@ export default class HdsFilterBar extends Component<HdsFilterBarSignature> {
6870
return Object.keys(this.args.filters).length > 0;
6971
}
7072

71-
private onFilterDismiss = (key: string, filterValue: unknown): void => {
73+
private onFilterDismiss = (key: string, filterValue?: unknown): void => {
7274
const { filters } = this.args;
7375
if (filters && filters[key]) {
7476
const keyFilter: HdsFilterBarFilter = filters[key];
@@ -91,6 +93,7 @@ export default class HdsFilterBar extends Component<HdsFilterBarSignature> {
9193
} else {
9294
newFilters[key] = {
9395
type: 'multi-select',
96+
text: keyFilter.text,
9497
data: newKeyfilter,
9598
};
9699
}
@@ -114,11 +117,6 @@ export default class HdsFilterBar extends Component<HdsFilterBarSignature> {
114117
return result?.text ?? '';
115118
};
116119

117-
private _filterValue = (data: HdsFilterBarData): unknown => {
118-
const result = this._filterData(data);
119-
return result?.value;
120-
};
121-
122120
private _filterArrayData = (
123121
data: HdsFilterBarData
124122
): { text: string; value: unknown }[] => {
@@ -127,4 +125,20 @@ export default class HdsFilterBar extends Component<HdsFilterBarSignature> {
127125
}
128126
return [];
129127
};
128+
129+
private _filterKeyText = (key: string, data: HdsFilterBarFilter): string => {
130+
if (data.text) {
131+
return data.text;
132+
} else {
133+
return key;
134+
}
135+
};
136+
137+
private _rangeFilterText = (data: HdsFilterBarData): string => {
138+
if ('selector' in data && 'value' in data) {
139+
return `${SELECTORS_DISPLAY_SYMBOL[data.selector]} ${data.value}`;
140+
} else {
141+
return '';
142+
}
143+
};
130144
}

0 commit comments

Comments
 (0)