{
  "id": "TB04",
  "title": "Filter without view switch",
  "topic": "toolbar",
  "use": "The toolbar carries actions and a filter, but no switch between views. The actions stay on the left, the most important one first. The filter button stands on the right, where everything that decides what is shown belongs — even when it stands there alone. The filters set appear as badges in the row below.",
  "decisions": [
    "The toolbar carries actions and a filter but no view switch. The actions stay on the left, the most important one first.",
    "The filter button stands on the right, in the view zone, even when it stands there alone: everything that decides what is shown belongs there, and a control does not change place depending on its neighbors.",
    "The filters set stand below the bar as badges with a remove button, with Reset all filters beside them; inside the button they would be visible only while the panel is open.",
    "Search and filter apply together, and the empty state names which of the two emptied the table."
  ],
  "try": [
    {
      "do": "Press Filter",
      "then": "an example filter is set and appears as a badge in the row below"
    },
    {
      "do": "Press the cross on the badge",
      "then": "the filter goes, and the count stands alone again"
    },
    {
      "do": "Type in the search field as well, for instance “Aral”",
      "then": "search and filter apply together"
    },
    {
      "do": "Press Reset all filters",
      "then": "both are gone"
    },
    {
      "do": "Look at the Filter button",
      "then": "it stands at the right edge, where everything that decides what is shown belongs"
    }
  ],
  "revision": 1,
  "changes": [],
  "reviewed": true,
  "source": "<!-- Demo only, not part of the pattern. The table takes the height the screen leaves it; here it is set to fit the frame. -->\n\n<div class=\"ed-stack ed-gap-4\">\n  <!-- Demo only, not part of the pattern. The screen's title comes from the screen around the pattern; SC01 places it. -->\n\n  <ed-data-grid id=\"tb04-grid\" label=\"Vouchers\" with-search data-ed-preload=\"ed-format-date\">\n    <ed-button slot=\"toolbar-actions\"><ed-icon slot=\"start\" name=\"plus\"></ed-icon>Create voucher</ed-button>\n    <ed-button slot=\"toolbar-actions\" appearance=\"plain\"><ed-icon slot=\"start\" name=\"export\"></ed-icon>Export vouchers</ed-button>\n    <ed-button id=\"tb04-filter\" slot=\"toolbar-view\" appearance=\"plain\"><ed-icon slot=\"start\" name=\"filter\"></ed-icon>Filter</ed-button>\n    <ed-empty-state slot=\"no-results\" size=\"small\" icon=\"search\">\n      <span id=\"tb04-none-label\" slot=\"label\"></span>\n      <span id=\"tb04-none-text\"></span>\n      <ed-button id=\"tb04-clear\" slot=\"button\" appearance=\"outlined\"></ed-button>\n    </ed-empty-state>\n  </ed-data-grid>\n</div>\n\n<!-- Demo only, not part of the pattern. The product supplies vouchers: the vouchers of the list, as { id, date, text, type, status }, with date as YYYY-MM-DD. -->\n\n<!-- Demo only, not part of the pattern. The Filter button opens the product's filter surface, the drawer of FI01 or the panel of FI02, whose fields set grid.filters; here it toggles exampleFilter, one filter on the type column, so the row below has a badge to show. -->\n\n<script type=\"module\">\n  const grid = document.getElementById('tb04-grid');\n  const noneLabel = document.getElementById('tb04-none-label');\n  const noneText = document.getElementById('tb04-none-text');\n  const clearButton = document.getElementById('tb04-clear');\n\n  const date = value => Object.assign(document.createElement('ed-format-date'), { date: value, month: 'short', day: 'numeric', year: 'numeric' });\n  const statusVariant = { Open: 'neutral', Error: 'danger', Reviewed: 'info', Finalized: 'success' };\n\n  // The search covers what the empty state names: number, posting text and type.\n  grid.columns = [\n    { field: 'id', label: 'Voucher', width: 140, rowheader: true },\n    { field: 'date', label: 'Date', width: 130, searchable: false, formatter: date },\n    { field: 'text', label: 'Posting text', flex: 2, minWidth: 220 },\n    { field: 'type', label: 'Type', width: 170, filterable: true, filterType: 'set' },\n    {\n      field: 'status',\n      label: 'Status',\n      width: 130,\n      searchable: false,\n      formatter: value => {\n        const badge = document.createElement('ed-badge');\n        badge.setAttribute('variant', statusVariant[value]);\n        badge.textContent = value;\n        return badge;\n      }\n    }\n  ];\n\n  grid.data = vouchers;\n\n  // The empty state names what emptied the table: the search, the filter, or both.\n  const update = () => {\n    const term = grid.searchTerm.trim();\n    const types = grid.filters.flatMap(filter => filter.value).join(', ');\n    const [label, text, action] = term && grid.filters.length\n      ? [`No match for “${term}”`, `Only vouchers of type ${types} are searched.`, 'Reset search and filter']\n      : term\n        ? [`No match for “${term}”`, 'No voucher contains this text in its number, posting text or type.', 'Clear search']\n        : ['No voucher matches the active filters', `Set: Type ${types}.`, 'Reset filter'];\n    noneLabel.textContent = label;\n    noneText.textContent = text;\n    clearButton.textContent = action;\n  };\n\n  const filterButton = document.getElementById('tb04-filter');\n  filterButton.addEventListener('click', () => {\n    grid.filters = grid.filters.length ? [] : [exampleFilter];\n    update();\n  });\n  // The empty state leaves with the rows its button brings back. The grid's count lives in its\n  // shadow tree with no public way to focus it, so the Filter button, which set the filter, takes it.\n  clearButton.addEventListener('click', async () => {\n    grid.filters = [];\n    grid.searchTerm = '';\n    update();\n    await grid.updateComplete;\n    filterButton.focus();\n  });\n  grid.addEventListener('ed-data-grid-filter-change', update);\n\n  await customElements.whenDefined('ed-data-grid');\n  update();\n</script>",
  "page": "https://test-apps.eurodata.de/a/eurodata-ui/docs/patterns/toolbar/tb04-filter-without-view-switch/",
  "topicPage": "https://test-apps.eurodata.de/a/eurodata-ui/docs/patterns/toolbar/"
}