open-consul/ui/packages/consul-ui/app/components/data-collection
John Cowen 148b18b28c
ui: Search/filtering 'Filtered by:' search status (#9442)
Adds a 'status' for the filtering/searching in the UI, without this its not super clear that you are filtering a recordset due to the menu selections being hidden once closed. You can also use the pills in this status view to delete individual filters.
2021-01-25 18:13:54 +00:00
..
README.mdx ui: Remove old style 'filterable' searching (#9356) 2020-12-09 19:12:17 +00:00
index.hbs ui: Remove old style 'filterable' searching (#9356) 2020-12-09 19:12:17 +00:00
index.js ui: Search/filtering 'Filtered by:' search status (#9442) 2021-01-25 18:13:54 +00:00

README.mdx

## DataSource

```handlebars
<DataCollection
  @search={{''}}
  @sort={{''}}
  @filter={{hash
    searchproperties=(array)
  }}
  @items={{array}}
as |collection|>
  {{collection.items.length}}
  <collection.Collection>
    Has Results
  </collection.Collection>
  <collection.Empty>
    Is Empty
  </collection.Empty>
</DataCollection>
```

### Arguments

| Argument | Type | Default | Description |
| --- | --- | --- | --- |
| `items` | `Array` | [] | The collection of data to search/sort/filter |
| `search` | `String` | '' | A search term to use for searching |
| `sort` | `String` | '' | A sort term to use for sorting on ('Name:asc') |
| `filter` | `Object` |  | An object whose properties are the properties/values to filter on |

### Yields

The DataCollection yields an object containing the following:

| Property | Type | Description |
| --- | --- | --- |
| `items` | `Array` | The resulting collection of data after searching/sorting/filtering |
| `search` | `Function` | An action used to perform a search - takes a single string argument that should be the search term |
| `Collection` | `Component` | A slot-like component that only renders when the items in the collection is greater than 0 |
| `Empty` | `Component` | A slot-like component that only renders when the items in the collection is 0 |

### See

- [Component Source Code](./index.js)
- [Template Source Code](./index.hbs)

---