status-im/consul
2
0
Fork 0
mirror of https://github.com/status-im/consul.git synced 2025-01-10 22:06:20 +00:00
Code Issues Projects Releases Wiki Activity

Use existing freefilter to match existing design

Browse Source
This commit is contained in:
Michael Klein 2022-10-11 13:04:33 +02:00
parent 71e20c3122
commit 9030c32164
2 changed files with 9 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
ui/packages/consul-peerings/app/templates/dc/peers/edit/exported.hbs
View File

@ -23,18 +23,15 @@
<BlockSlot @name="loaded"> <BlockSlot @name="loaded">
{{#if items.length}} {{#if items.length}}
<div <div class="search-bar">
class="hds-surface-faint flex h-12 py-1.5 px-1 border-t border-b border-hds-border-primary" <form class="filter-bar">
> <FreetextFilter
<div> @onsearch={{pick "target.value" this.updateSearch}}
<Hds::Form::TextInput::Field
@type="search"
@value={{this.search}} @value={{this.search}}
placeholder="Search" @placeholder="Search"
class="rounded-sm border-hds-border-faint" class="!w-80"
{{on "input" (pick "target.value" this.updateSearch)}}
/> />
</div> </form>
</div> </div>
{{/if}} {{/if}}
<Providers::Search <Providers::Search
@ -56,9 +53,7 @@
@items={{search.data.items}} @items={{search.data.items}}
as |service index| as |service index|
> >
<li <li class="px-3 h-12 border-b border-hds-border-primary">
class="px-3 h-12 border-b border-hds-border-primary border-b"
>
<a <a
data-test-service-name data-test-service-name
class="hds-typography-display-300 text-hds-foreground-strong hds-font-weight-semibold h-full w-full flex items-center" class="hds-typography-display-300 text-hds-foreground-strong hds-font-weight-semibold h-full w-full flex items-center"

4
ui/packages/consul-ui/app/components/providers/search/index.js
View File

@ -11,11 +11,9 @@ export default class SearchProvider extends Component {
const { _search: search } = this; const { _search: search } = this;
if (search.length > 0) { if (search.length > 0) {
const regex = new RegExp(`${search}`, 'ig');
return items.filter((item) => { return items.filter((item) => {
const matchesInSearchProperties = searchProperties.reduce((acc, searchProperty) => { const matchesInSearchProperties = searchProperties.reduce((acc, searchProperty) => {
const match = item[searchProperty].match(regex); const match = item[searchProperty].indexOf(search) !== -1;
if (match) { if (match) {
return [...acc, match]; return [...acc, match];
} else { } else {