LiveFilter

https://hexdocs.pm/livefilter/0.1.7/
Admin
LiveFilter is a flexible and composable filtering library for Phoenix LiveView applications that...
Tokens:1,594
Snippets:14
Trust Score:9
Update:5 months ago
Show doc for...
Tokens:
Raw
### Minimal LiveView Setup with LiveFilter

Source: https://hexdocs.pm/livefilter

Basic setup for a LiveView to use LiveFilter for loading products. This example does not persist filters to the URL.

```elixir
defmodule MyAppWeb.ProductLive do
  use MyAppWeb, :live_view
  alias LiveFilter.{Filter, FilterGroup, QueryBuilder}

  def mount(_params, _session, socket) do
    {:ok, assign(socket, :products, load_products())}
  end

  defp load_products(filter_group \ %FilterGroup{}) do
    from(p in Product)
    |> QueryBuilder.build_query(filter_group)
    |> Repo.all()
  end
end
```

--------------------------------

### Install LiveFilter JavaScript Assets

Source: https://hexdocs.pm/livefilter

Install the necessary JavaScript assets for LiveFilter.

```bash
mix live_filter.install.assets
```

--------------------------------

### LiveView Setup with URL-Persisted Filters

Source: https://hexdocs.pm/livefilter

Setup a LiveView to use LiveFilter with URL-persisted filters. This requires `use LiveFilter.Mountable` and handling parameters.

```elixir
defmodule MyAppWeb.ProductLive do
  use MyAppWeb, :live_view
  use LiveFilter.Mountable  # Adds filter helpers

  def mount(_params, _session, socket) do
    socket = mount_filters(socket)
    {:ok, assign(socket, :products, [])}
  end

  def handle_params(params, _url, socket) do
    socket = handle_filter_params(socket, params)
    {:noreply, assign(socket, :products, load_products(socket.assigns.filter_group))}
  end

  defp load_products(filter_group) do
    from(p in Product)
    |> QueryBuilder.build_query(filter_group)
    |> Repo.all()
  end
end
```

--------------------------------

### LiveView with LiveFilter Implementation

Source: https://hexdocs.pm/livefilter

This LiveView module integrates LiveFilter for advanced data manipulation. It handles mounting filters, processing URL parameters for filtering, and rendering a UI with search, select filters, and a filter builder. Use this as a base for complex filtering scenarios.

```elixir
defmodule MyAppWeb.TodoLive do
  use MyAppWeb, :live_view
  use LiveFilter.Mountable

  def mount(_params, _session, socket) do
    socket = 
      socket
      |> mount_filters(registry: field_registry())
      |> assign(:todos, [])
    
    {:ok, socket}
  end

  def handle_params(params, _url, socket) do
    socket = handle_filter_params(socket, params)
    {:noreply, assign(socket, :todos, load_todos(socket.assigns.filter_group))}
  end

  def render(assigns) do
    ~H"""
    <div class="space-y-4">
      <!-- Search and quick filters -->
      <div class="flex gap-4">
        <form phx-change="search" class="flex-1">
          <input name="q" value={@search} placeholder="Search todos..." />
        </form>
        
        <.live_component 
          module={LiveFilter.Components.SearchSelect}
          id="status-filter"
          field={:status}
          value={get_filter_value(@filter_group, :status)}
          options={[{"pending", "Pending"}, {"in_progress", "In Progress"}, {"completed", "Completed"}]}
        />
      </div>

      <!-- Advanced filter builder -->
      <.live_component
        module={LiveFilter.Components.FilterBuilder}
        id="filter-builder"
        filter_group={@filter_group}
        field_options={field_options()}
      />

      <!-- Results table -->
      <table>
        <thead>
          <tr>
            <.live_component 
              module={LiveFilter.Components.SortableHeader}
              id="sort-title"
              field={:title}
              label="Title"
              current_sort={@current_sort}
            />
            <th>Status</th>
            <th>Due Date</th>
          </tr>
        </thead>
        <tbody>
          <tr :for={todo <- @todos}>
            <td><%= todo.title %></td>
            <td><%= todo.status %></td>
            <td><%= todo.due_date %></td>
          </tr>
        </tbody>
      </table>
    </div>
    """
  end

  def handle_event("search", %{"q" => query}, socket) do
    filter = %Filter{field: :title, operator: :contains, value: query, type: :string}
    filter_group = %FilterGroup{filters: [filter]}
    socket = apply_filters_and_reload(socket, filter_group)
    {:noreply, assign(socket, :search, query)}
  end

  defp field_registry do
    LiveFilter.FieldRegistry.new()
    |> LiveFilter.FieldRegistry.put(:title, :string, "Title")
    |> LiveFilter.FieldRegistry.put(:status, :enum, "Status", 
         options: [{"pending", "Pending"}, {"in_progress", "In Progress"}, {"completed", "Completed"}])
    |> LiveFilter.FieldRegistry.put(:due_date, :date, "Due Date")
    |> LiveFilter.FieldRegistry.put(:tags, :array, "Tags")
  end

  defp load_todos(filter_group) do
    from(t in Todo)
    |> QueryBuilder.build_query(filter_group)
    |> QueryBuilder.apply_sort(socket.assigns.current_sort)
    |> Repo.all()
  end
end
```

--------------------------------

### Add LiveFilter Dependency

Source: https://hexdocs.pm/livefilter

Add the LiveFilter dependency to your project's mix.exs file.

```elixir
def deps do
  [
    {:livefilter, "~> 0.1.7"}
  ]
end
```

--------------------------------

### Integrate LiveFilter Hook in app.js

Source: https://hexdocs.pm/livefilter

Import and add the LiveFilter hook to your LiveSocket configuration in app.js.

```javascript
import LiveFilter from "./hooks/live_filter/live_filter"

let liveSocket = new LiveSocket("/live", Socket, {
  hooks: { LiveFilter }
})
```
Tokens:
Raw