Add filters

lib/freedive_web/live/liliform_live.ex

@@ -7,18 +7,29 @@ defmodule FreediveWeb.LiliformLive do
         %{
           title: "All",
           icon: "all",
-          active: false
+          active: false,
+          key: :all
         }
       ]
 
       def(mount(_params, _session, socket)) do
         items = items()
+        filters = filters()
         socket = assign(socket, :opts, Keyword.get(unquote(opts), :opts, []))
         socket = assign(socket, :items_all, items)
-        socket = assign(socket, :items, items)
+
-        socket = assign(socket, :filters, @filters_all ++ filters())
+        socket =
+          assign(
+            socket,
+            :items,
+            FreediveWeb.LiliformLive.filter(
+              items,
+              FreediveWeb.LiliformLive.get_active_filter(filters)
+            )
+          )
+
+        socket = assign(socket, :filters, @filters_all ++ filters)
         socket = assign(socket, :query, "")
-        IO.inspect(socket, label: "socket")
         {:ok, socket}
       end
 
@@ -27,10 +38,43 @@ defmodule FreediveWeb.LiliformLive do
         socket = assign(socket, :items, items)
         {:noreply, socket}
       end
+
+      def(handle_event("filter", %{"key" => key}, socket)) do
+        key = String.to_existing_atom(key)
+        items = FreediveWeb.LiliformLive.filter(socket.assigns.items_all, key)
+        socket = assign(socket, :items, items)
+
+        socket =
+          assign(
+            socket,
+            :filters,
+            Enum.map(socket.assigns.filters, fn filter ->
+              Map.put(filter, :active, filter.key == key)
+            end)
+          )
+
+        {:noreply, socket}
+      end
     end
   end
 
   @callback items() :: [map]
   @callback filters() :: [map]
   @callback search(query :: String.t()) :: [map]
+
+  def filter(items, key) do
+    case key do
+      :all ->
+        items
+
+      _ ->
+        Enum.filter(items, fn item ->
+          Map.get(item, key) == true
+        end)
+    end
+  end
+
+  def get_active_filter(filters) do
+    filters |> Enum.find(& &1.active) |> Map.get(:key)
+  end
 end

lib/freedive_web/live/service_live.ex

@@ -52,13 +52,13 @@ defmodule FreediveWeb.ServiceLive do
     [
       %{
         title: "Running",
-        key: "running",
+        key: :running,
         icon: "circle-play",
         active: true
       },
       %{
         title: "Enabled",
-        key: "enabled",
+        key: :enabled,
         icon: "circle-check",
         active: false
       }

lib/liliform/page.ex

@@ -28,13 +28,24 @@ defmodule Liliform.Page do
 
       <.panel_tabs is-hidden-mobile>
         <%= for filter <- @filters do %>
-          <a class={if filter.active, do: "is-active"}><%= filter.title %></a>
+          <a
+            class={if filter.active, do: "is-active"}
+            phx-click="filter"
+            phx-value-key={filter.key}
+          >
+            <%= filter.title %>
+          </a>
         <% end %>
       </.panel_tabs>
 
       <.panel_tabs is-hidden-tablet>
         <%= for filter <- @filters do %>
-          <a title={filter.title} class={if filter.active, do: "is-active"}>
+          <a
+            title={filter.title}
+            class={if filter.active, do: "is-active"}
+            phx-click="filter"
+            phx-value-key={filter.key}
+          >
             <.icon for={filter.icon} color="auto" />
           </a>
         <% end %>
@@ -42,7 +53,14 @@ defmodule Liliform.Page do
 
       <.panel_block>
         <.control has-icons-left>
-          <input class="input is-info" type="text" placeholder="Search" name="search" value={@query} phx-keyup="search" />
+          <input
+            class="input is-info"
+            type="text"
+            placeholder="Search"
+            name="search"
+            value={@query}
+            phx-keyup="search"
+          />
           <.icon for="search" size="1.5rem" aria-hidden="true" is-left />
         </.control>
       </.panel_block>