From a4e04e39807fba710591aff5b23620fd6d5dd77f Mon Sep 17 00:00:00 2001 From: Harshad Sharma Date: Thu, 16 May 2024 05:07:36 +0530 Subject: [PATCH] Add liliform page --- lib/freedive_web/live/liliform_live.ex | 16 ++++++- lib/freedive_web/live/service_live.ex | 62 +++++++++++++++++++++++--- lib/liliform.ex | 1 + lib/liliform/page.ex | 53 ++++++++++++++++++++++ 4 files changed, 125 insertions(+), 7 deletions(-) create mode 100644 lib/liliform/page.ex diff --git a/lib/freedive_web/live/liliform_live.ex b/lib/freedive_web/live/liliform_live.ex index 8e51d32..1d80381 100644 --- a/lib/freedive_web/live/liliform_live.ex +++ b/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 - socket = assign(socket, :opts, unquote(opts)) + def(mount(_params, _session, socket)) do + 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 diff --git a/lib/freedive_web/live/service_live.ex b/lib/freedive_web/live/service_live.ex index 06718c7..9dc7e95 100644 --- a/lib/freedive_web/live/service_live.ex +++ b/lib/freedive_web/live/service_live.ex @@ -1,12 +1,13 @@ defmodule FreediveWeb.ServiceLive do - use FreediveWeb.LiliformLive, - opts: [ - name: "Services" - ] + use FreediveWeb.LiliformLive def render(assigns) do ~H""" - <%= inspect(@items) %> + <.block class="px-2 py-4"> + <.page name="Services"> + + + """ 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"> + + <.icon for={item.icon} color="auto" aria-hidden="true" /> + +
<%= item.name %>
+ + <% end %> + """ + end end diff --git a/lib/liliform.ex b/lib/liliform.ex index 082027b..74fa653 100644 --- a/lib/liliform.ex +++ b/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 diff --git a/lib/liliform/page.ex b/lib/liliform/page.ex new file mode 100644 index 0000000..8c77378 --- /dev/null +++ b/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_tabs is-hidden-mobile> + <%= for filter <- @filters do %> + <%= filter.title %> + <% end %> + + + <.panel_tabs is-hidden-tablet> + <%= for filter <- @filters do %> + + <.icon for={filter.icon} color="auto" /> + + <% end %> + + + <.panel_block> + <.control has-icons-left> + + <.icon for="search" size="1.5rem" aria-hidden="true" is-left /> + + + <%= render_slot(@inner_block) %> + + """ + end +end