Skip to content

Commit 8964f40

Browse files
dchyundchyun
committed
Feat: Filter bar mega dropdown
1 parent 7104ede commit 8964f40

File tree

21 files changed

+371
-622
lines changed

21 files changed

+371
-622
lines changed

‎packages/components/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -237,8 +237,8 @@
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/dropdown.js": "./dist/_app_/components/hds/filter-bar/dropdown.js",
241-
"./components/hds/filter-bar/filters-checkbox.js": "./dist/_app_/components/hds/filter-bar/filters-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",
242242
"./components/hds/filter-bar/filters-dropdown.js": "./dist/_app_/components/hds/filter-bar/filters-dropdown.js",
243243
"./components/hds/filter-bar.js": "./dist/_app_/components/hds/filter-bar.js",
244244
"./components/hds/filter-bar/radio.js": "./dist/_app_/components/hds/filter-bar/radio.js",

‎packages/components/src/components.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -133,9 +133,9 @@ export * from './components/hds/dropdown/types.ts';
133133
// FilterBar
134134
export { default as HdsFilterBar } from './components/hds/filter-bar/index.ts';
135135
export { default as HdsFilterBarCheckbox } from './components/hds/filter-bar/checkbox.ts';
136-
export { default as HdsFilterBarDropdown } from './components/hds/filter-bar/dropdown.ts';
137-
export { default as HdsFilterBarFiltersCheckbox } from './components/hds/filter-bar/filters-checkbox.ts';
138136
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';
139139
export { default as HdsFilterBarRadio } from './components/hds/filter-bar/radio.ts';
140140
export { default as HdsFilterBarRange } from './components/hds/filter-bar/range.ts';
141141
export * from './components/hds/filter-bar/types.ts';

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

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,13 @@
1-
{{#let @checkbox as |Checkbox|}}
2-
<Checkbox checked={{this.isChecked}} @value={{@value}} {{on "change" this.onChange}}>
3-
{{yield}}
4-
</Checkbox>
5-
{{/let}}
1+
{{!
2+
Copyright (c) HashiCorp, Inc.
3+
SPDX-License-Identifier: MPL-2.0
4+
}}
5+
<Hds::Form::Checkbox::Field
6+
class="hds-filter-bar__filters-dropdown__filter-option"
7+
checked={{this.isChecked}}
8+
@value={{@value}}
9+
{{on "change" this.onChange}}
10+
as |F|
11+
>
12+
<F.Label>{{yield}}</F.Label>
13+
</Hds::Form::Checkbox::Field>

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

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,17 +5,12 @@
55

66
import Component from '@glimmer/component';
77
import { action } from '@ember/object';
8-
import type { WithBoundArgs } from '@glint/template';
98

109
import type { HdsFilterBarSelectionFilter } from './types.ts';
11-
12-
import HdsDropdownListItemCheckbox from '../dropdown/list-item/checkbox.ts';
13-
1410
import type { HdsDropdownSignature } from '../dropdown/index.ts';
1511

1612
export interface HdsFilterBarCheckboxSignature {
1713
Args: HdsDropdownSignature['Args'] & {
18-
checkbox?: WithBoundArgs<typeof HdsDropdownListItemCheckbox, never>;
1914
value?: string;
2015
keyFilter: HdsFilterBarSelectionFilter[] | undefined;
2116
onChange?: (event: Event) => void;

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

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

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

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
{{! @glint-nocheck }}
2+
{{#let @panel as |Panel|}}
3+
<Panel class="hds-filter-bar__filters-dropdown__filter-options" {{this._setUpFilterOptions}}>
4+
{{#if @searchEnabled}}
5+
<span>Search goes here</span>
6+
{{/if}}
7+
{{#if (eq @type "range")}}
8+
<Hds::FilterBar::Range @keyFilter={{this.keyFilter}} @onChange={{this.onRangeChange}} />
9+
{{else}}
10+
{{yield
11+
(hash
12+
Checkbox=(component "hds/filter-bar/checkbox" keyFilter=this.keyFilter onChange=this.onSelectionChange)
13+
Radio=(component "hds/filter-bar/radio" keyFilter=this.keyFilter onChange=this.onSelectionChange)
14+
)
15+
}}
16+
{{/if}}
17+
</Panel>
18+
{{/let}}

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

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

12-
import HdsDropdown from '../dropdown/index.ts';
12+
import HdsTabsPanel from '../tabs/panel.ts';
1313

1414
import HdsFilterBarCheckbox from './checkbox.ts';
1515
import HdsFilterBarRadio from './radio.ts';
@@ -23,17 +23,14 @@ import type {
2323
HdsFilterBarRangeFilter,
2424
HdsFilterBarRangeFilterSelector,
2525
} from './types.ts';
26-
import { SELECTORS_DISPLAY_SYMBOL } from './range.ts';
2726

28-
export interface HdsFilterBarDropdownSignature {
27+
export interface HdsFilterBarFilterOptionsSignature {
2928
Args: {
30-
dropdown?: WithBoundArgs<typeof HdsDropdown, never>;
29+
panel?: WithBoundArgs<typeof HdsTabsPanel, never>;
3130
key: string;
32-
text?: string;
3331
type?: HdsFilterBarFilterType;
3432
filters: HdsFilterBarFilters;
3533
isMultiSelect?: boolean;
36-
isLiveFilter?: boolean;
3734
activeFilterableColumns?: string[];
3835
searchEnabled?: boolean;
3936
onChange: (key: string, keyFilter?: HdsFilterBarFilter) => void;
@@ -43,22 +40,22 @@ export interface HdsFilterBarDropdownSignature {
4340
{
4441
Checkbox?: WithBoundArgs<
4542
typeof HdsFilterBarCheckbox,
46-
'checkbox' | 'keyFilter' | 'onChange'
43+
'keyFilter' | 'onChange'
4744
>;
4845
Radio?: WithBoundArgs<
4946
typeof HdsFilterBarRadio,
50-
'radio' | 'keyFilter' | 'onChange'
47+
'keyFilter' | 'onChange'
5148
>;
5249
},
5350
];
5451
};
5552
Element: HTMLDivElement;
5653
}
5754

58-
export default class HdsFilterBarDropdown extends Component<HdsFilterBarDropdownSignature> {
55+
export default class HdsFilterBarFilterOptions extends Component<HdsFilterBarFilterOptionsSignature> {
5956
@tracked internalFilters: HdsFilterBarData | undefined = [];
6057

61-
private _setUpDropdown = modifier(() => {
58+
private _setUpFilterOptions = modifier(() => {
6259
if (this.keyFilter) {
6360
this.internalFilters = JSON.parse(
6461
JSON.stringify(this.keyFilter)
@@ -128,11 +125,9 @@ export default class HdsFilterBarDropdown extends Component<HdsFilterBarDropdown
128125
removeFilter(input.value);
129126
}
130127

131-
if (this.args.isLiveFilter) {
132-
const { onChange } = this.args;
133-
if (onChange && typeof onChange === 'function') {
134-
onChange(this.args.key, this.formattedFilters);
135-
}
128+
const { onChange } = this.args;
129+
if (onChange && typeof onChange === 'function') {
130+
onChange(this.args.key, this.formattedFilters);
136131
}
137132
}
138133

@@ -155,38 +150,10 @@ export default class HdsFilterBarDropdown extends Component<HdsFilterBarDropdown
155150
this.internalFilters = undefined;
156151
}
157152

158-
if (this.args.isLiveFilter) {
159-
const { onChange } = this.args;
160-
if (onChange && typeof onChange === 'function') {
161-
onChange(this.args.key, this.formattedFilters);
162-
}
163-
}
164-
}
165-
166-
@action
167-
onApply(closeDropdown?: () => void): void {
168153
const { onChange } = this.args;
169154
if (onChange && typeof onChange === 'function') {
170155
onChange(this.args.key, this.formattedFilters);
171156
}
172-
173-
if (closeDropdown && typeof closeDropdown === 'function') {
174-
closeDropdown();
175-
}
176-
}
177-
178-
@action
179-
onClear(closeDropdown?: () => void): void {
180-
this._clearFilters();
181-
182-
if (closeDropdown && typeof closeDropdown === 'function') {
183-
closeDropdown();
184-
}
185-
}
186-
187-
@action
188-
onDismiss(): void {
189-
this._clearFilters();
190157
}
191158

192159
get formattedFilters(): HdsFilterBarFilter | undefined {
@@ -202,92 +169,71 @@ export default class HdsFilterBarDropdown extends Component<HdsFilterBarDropdown
202169
} as HdsFilterBarFilter;
203170
}
204171

205-
get toggleButtonText(): string {
206-
const { key, filters, text } = this.args;
207-
208-
let displayText = key;
209-
if (text && text.length > 0) {
210-
displayText = text;
211-
}
212-
213-
const keyFilter = filters[key];
214-
215-
if (!filters || !keyFilter || !keyFilter.data) {
216-
return displayText;
217-
} else if (this.args.type === 'range') {
218-
return `${displayText} ${this._rangeFilterText(keyFilter.data)}`;
219-
} else if (this.args.type === 'single-select') {
220-
return `${displayText}: ${this._singleSelectFilterText(keyFilter.data)}`;
221-
} else {
222-
return `${displayText}: ${this._multiSelectFilterText(keyFilter.data)}`;
223-
}
224-
}
225-
226-
private _rangeFilterText(filterData: HdsFilterBarData): string {
227-
if ('selector' in filterData && 'value' in filterData) {
228-
return `${SELECTORS_DISPLAY_SYMBOL[filterData.selector]} ${filterData.value}`;
229-
} else {
230-
return '';
231-
}
232-
}
233-
234-
private _singleSelectFilterText(filterData: HdsFilterBarData): string {
235-
if ('value' in filterData) {
236-
return filterData.value as string;
237-
} else {
238-
return '';
239-
}
240-
}
241-
242-
private _multiSelectFilterText(filterData: HdsFilterBarData): string {
243-
if (Array.isArray(filterData) && filterData.length > 0) {
244-
const charMax = 10;
245-
let filtersString = '';
246-
247-
filtersString = filterData
248-
.map((filter) => {
249-
if ('text' in filter && typeof filter.text === 'string') {
250-
if (filter.text.length > charMax) {
251-
return filter.text.slice(0, charMax) + '...';
252-
}
253-
return filter.text;
254-
}
255-
return '';
256-
})
257-
.join(', ');
258-
259-
return filtersString;
260-
} else {
261-
return '';
262-
}
263-
}
172+
// get toggleButtonText(): string {
173+
// const { key, filters, text } = this.args;
174+
175+
// let displayText = key;
176+
// if (text && text.length > 0) {
177+
// displayText = text;
178+
// }
179+
180+
// const keyFilter = filters[key];
181+
182+
// if (!filters || !keyFilter || !keyFilter.data) {
183+
// return displayText;
184+
// } else if (this.args.type === 'range') {
185+
// return `${displayText} ${this._rangeFilterText(keyFilter.data)}`;
186+
// } else if (this.args.type === 'single-select') {
187+
// return `${displayText}: ${this._singleSelectFilterText(keyFilter.data)}`;
188+
// } else {
189+
// return `${displayText}: ${this._multiSelectFilterText(keyFilter.data)}`;
190+
// }
191+
// }
192+
193+
// private _rangeFilterText(filterData: HdsFilterBarData): string {
194+
// if ('selector' in filterData && 'value' in filterData) {
195+
// return `${SELECTORS_DISPLAY_SYMBOL[filterData.selector]} ${filterData.value}`;
196+
// } else {
197+
// return '';
198+
// }
199+
// }
200+
201+
// private _singleSelectFilterText(filterData: HdsFilterBarData): string {
202+
// if ('value' in filterData) {
203+
// return filterData.value as string;
204+
// } else {
205+
// return '';
206+
// }
207+
// }
208+
209+
// private _multiSelectFilterText(filterData: HdsFilterBarData): string {
210+
// if (Array.isArray(filterData) && filterData.length > 0) {
211+
// const charMax = 10;
212+
// let filtersString = '';
213+
214+
// filtersString = filterData
215+
// .map((filter) => {
216+
// if ('text' in filter && typeof filter.text === 'string') {
217+
// if (filter.text.length > charMax) {
218+
// return filter.text.slice(0, charMax) + '...';
219+
// }
220+
// return filter.text;
221+
// }
222+
// return '';
223+
// })
224+
// .join(', ');
225+
226+
// return filtersString;
227+
// } else {
228+
// return '';
229+
// }
230+
// }
264231

265232
get classNames(): string {
266-
const classes = ['hds-filter-bar__dropdown'];
267-
268-
// add a class based on the @align argument
269-
if (!this._isActiveFilterableColumn()) {
270-
classes.push('hds-filter-bar__dropdown--hidden');
271-
}
233+
const classes = ['hds-filter-bar__filter-options'];
272234

273235
classes.push(`hds-filter-bar__dropdown--type-${this.type}`);
274236

275237
return classes.join(' ');
276238
}
277-
278-
private _isActiveFilterableColumn(): boolean {
279-
if (this.args.activeFilterableColumns) {
280-
return this.args.activeFilterableColumns.includes(this.args.key);
281-
}
282-
return false;
283-
}
284-
285-
private _clearFilters(): void {
286-
this.internalFilters = undefined;
287-
288-
const { onChange } = this.args;
289-
if (onChange && typeof onChange === 'function') {
290-
onChange(this.args.key, undefined);
291-
}
292-
}
293239
}

0 commit comments

Comments
 (0)