File size: 2,988 Bytes
8da2481 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 | defmodule PlausibleWeb.Components.Site.Feature.ToggleLive do
@moduledoc """
LiveComponent for rendering a user-facing feature toggle in LiveView contexts.
Instead of using form submission, this component messages itself to handle toggles.
"""
use PlausibleWeb, :live_component
def update(assigns, socket) do
site = Plausible.Repo.preload(assigns.site, :team)
team = Plausible.Teams.with_subscription(site.team)
site = %{site | team: team}
current_setting = assigns.feature_mod.enabled?(site)
disabled? = assigns.feature_mod.check_availability(team) !== :ok
{:ok,
socket
|> assign(assigns)
|> assign(:site, site)
|> assign(:current_setting, current_setting)
|> assign(:disabled?, disabled?)}
end
attr :site, Plausible.Site, required: true
attr :feature_mod, :atom, required: true
attr :current_user, Plausible.Auth.User, required: true
def render(assigns) do
~H"""
<div class="mt-4" id={"feature-#{@feature_mod.name()}-toggle"}>
<div class="my-2 flex items-center">
<button
type="button"
phx-click="toggle"
phx-target={@myself}
class={[
"relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full transition-colors ease-in-out duration-200",
if(@current_setting, do: "bg-indigo-600", else: "bg-gray-200 dark:bg-gray-600"),
if(@disabled?, do: "cursor-not-allowed")
]}
disabled={@disabled?}
>
<span
aria-hidden="true"
class={[
"inline-block size-5 rounded-full bg-white shadow transform transition ease-in-out duration-200",
if(@current_setting, do: "translate-x-5", else: "translate-x-0")
]}
/>
</button>
<span class={[
"ml-2 font-medium leading-5 text-sm",
if(@disabled?,
do: "text-gray-500 dark:text-gray-400",
else: "text-gray-900 dark:text-gray-100"
)
]}>
Show in dashboard
</span>
</div>
</div>
"""
end
def handle_event("toggle", _params, socket) do
site = socket.assigns.site
feature_mod = socket.assigns.feature_mod
current_user = socket.assigns.current_user
case feature_mod.toggle(site, current_user) do
{:ok, updated_site} ->
new_setting = Map.fetch!(updated_site, feature_mod.toggle_field())
message =
if new_setting do
"#{feature_mod.toggle_display_name()} are now visible again on your dashboard"
else
"#{feature_mod.toggle_display_name()} are now hidden from your dashboard"
end
send(self(), {:feature_toggled, message, updated_site})
socket =
assign(socket, site: updated_site, current_setting: feature_mod.enabled?(updated_site))
{:noreply, socket}
{:error, _} ->
{:noreply, socket}
end
end
end
|