Add liliform page

lib/freedive_web/live/liliform_live.ex

@@ -3,14 +3,26 @@ defmodule FreediveWeb.LiliformLive do
     quote location: :keep, bind_quoted: [opts: opts] do
       use FreediveWeb, :live_view
       @behaviour FreediveWeb.LiliformLive
+      @all [
+        %{
+          title: "All",
+          icon: "all",
+          active: false
+        }
+      ]
 
-      def mount(_params, _session, socket) do
+      def(mount(_params, _session, socket)) do
-        socket = assign(socket, :opts, unquote(opts))
+        socket = assign(socket, :opts, Keyword.get(unquote(opts), :opts, []))
         socket = assign(socket, :items, items())
+        socket = assign(socket, :filters, @all ++ filters())
+        socket = assign(socket, :query, "")
         {:ok, socket}
       end
+
     end
   end
 
   @callback items() :: [map]
+  @callback filters() :: [map]
+  @callback search(query :: String.t()) :: [map]
 end

lib/freedive_web/live/service_live.ex

@@ -1,12 +1,13 @@
 defmodule FreediveWeb.ServiceLive do
-  use FreediveWeb.LiliformLive,
+  use FreediveWeb.LiliformLive
-    opts: [
-      name: "Services"
-    ]
 
   def render(assigns) do
     ~H"""
-    <%= inspect(@items) %>
+    <.block class="px-2 py-4">
+      <.page name="Services">
+        <FreediveWeb.ServiceLive.Item.item_block items={@items} />
+      </.page>
+    </.block>
     """
   end
 
@@ -14,6 +15,7 @@ defmodule FreediveWeb.ServiceLive do
     [
       %{
         name: "sshd",
+        path: "/services/ssh",
         icon: "blocks",
         description: "Secure Shell Daemon",
         enabled: true,
@@ -21,6 +23,7 @@ defmodule FreediveWeb.ServiceLive do
       },
       %{
         name: "pf",
+        path: "/services/pf",
         icon: "shield",
         description: "Packet Filter",
         enabled: true,
@@ -28,6 +31,7 @@ defmodule FreediveWeb.ServiceLive do
       },
       %{
         name: "ntpdate",
+        path: "/services/ntp",
         icon: "clock",
         description: "Network Time Protocol Daemon",
         enabled: true,
@@ -35,6 +39,7 @@ defmodule FreediveWeb.ServiceLive do
       },
       %{
         name: "httpd",
+        path: "/services/httpd",
         icon: "globe",
         description: "Hypertext Transfer Protocol Daemon",
         enabled: false,
@@ -42,4 +47,51 @@ defmodule FreediveWeb.ServiceLive do
       }
     ]
   end
+
+  def filters() do
+    [
+      %{
+        title: "Running",
+        key: "running",
+        icon: "circle-play",
+        active: true
+      },
+      %{
+        title: "Enabled",
+        key: "enabled",
+        icon: "circle-check",
+        active: false
+      }
+    ]
+  end
+
+  def search(query) do
+    items()
+    |> Enum.filter(fn item ->
+      String.contains?(String.downcase(item.name), String.downcase(query))
+    end)
+  end
+end
+
+defmodule FreediveWeb.ServiceLive.Item do
+  use Liliform.Component
+  import Liliform.Icon
+
+  @doc """
+  Returns a list of items.
+  """
+  attr :items, :list, default: [], doc: "items"
+
+  def item_block(assigns) do
+    ~H"""
+    <%= for item <- @items do %>
+      <.link patch={item.path} class="panel-block pt-1">
+        <span class="panel-icon">
+          <.icon for={item.icon} color="auto" aria-hidden="true" />
+        </span>
+        <div class="mt-2 ml-2"><%= item.name %></div>
+      </.link>
+    <% end %>
+    """
+  end
 end

lib/liliform.ex

@@ -15,6 +15,7 @@ defmodule Liliform do
       import Liliform.Label
       import Liliform.Media
       import Liliform.Navbar
+      import Liliform.Page
       import Liliform.Panel
       import Liliform.Section
       import Liliform.SimpleForm

lib/liliform/page.ex

@@ -0,0 +1,53 @@
+defmodule Liliform.Page do
+  use Liliform.Component
+  import Liliform.Icon
+  import Liliform.Panel
+  import Liliform.Control
+
+  @doc """
+  Renders a panel as page.
+  """
+  attr :name, :string, required: true, doc: "page name"
+  attr :class, :string, default: "", doc: "additional classes"
+  attr :filters, :list, default: [], doc: "filters"
+  attr :query, :string, default: "", doc: "search query"
+  attr :rest, :global
+
+  slot :inner_block, required: true
+
+  def page(assigns) do
+    assigns =
+      assigns
+      |> set_bulma_classes()
+
+    ~H"""
+    <.panel class={@class} {@rest} is-info>
+      <.panel_heading>
+        <%= @name %>
+      </.panel_heading>
+
+      <.panel_tabs is-hidden-mobile>
+        <%= for filter <- @filters do %>
+          <a class={if filter.active, do: "is-active"}><%= 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"}>
+            <.icon for={filter.icon} color="auto" />
+          </a>
+        <% end %>
+      </.panel_tabs>
+
+      <.panel_block>
+        <.control has-icons-left>
+          <input class="input is-info" type="text" placeholder="Search" name="search" value={@query} />
+          <.icon for="search" size="1.5rem" aria-hidden="true" is-left />
+        </.control>
+      </.panel_block>
+      <%= render_slot(@inner_block) %>
+    </.panel>
+    """
+  end
+end