Skip to content

Extract shared LanguageSwitcher and MultilangForm components #435

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ddon merged 1 commit into from
Mar 19, 2026
Merged

Extract shared LanguageSwitcher and MultilangForm components #435

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
623 changes: 274 additions & 349 deletions lib/modules/entities/web/data_form.ex
View file
Open in desktop

Large diffs are not rendered by default.

323 changes: 76 additions & 247 deletions lib/modules/entities/web/data_form.html.heex
View file
Open in desktop

Large diffs are not rendered by default.

119 changes: 13 additions & 106 deletions lib/modules/entities/web/data_view.ex
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,10 +11,11 @@ defmodule PhoenixKit.Modules.Entities.Web.DataView do
use PhoenixKitWeb, :live_view
on_mount PhoenixKit.Modules.Entities.Web.Hooks

import PhoenixKitWeb.Components.MultilangForm

alias PhoenixKit.Modules.Entities
alias PhoenixKit.Modules.Entities.EntityData
alias PhoenixKit.Modules.Entities.FormBuilder
alias PhoenixKit.Modules.Entities.Multilang
alias PhoenixKit.Settings

@impl true
Expand Down Expand Up @@ -78,11 +79,6 @@ defmodule PhoenixKit.Modules.Entities.Web.DataView do
# Create a modified entity with only other fields for display
other_entity = %{entity | fields_definition: other_fields}

# Multilang assigns (driven by Languages module globally)
multilang_enabled = Multilang.enabled?()
primary_language = Multilang.primary_language()
language_tabs = Multilang.build_language_tabs()

socket =
socket
|> assign(:current_locale, locale)
Expand All @@ -101,10 +97,7 @@ defmodule PhoenixKit.Modules.Entities.Web.DataView do
|> assign(:public_form_description, Map.get(settings, "public_form_description", ""))
|> assign(:metadata, data_record.metadata || %{})
|> assign(:is_public_submission, public_submission?(data_record.metadata))
|> assign(:multilang_enabled, multilang_enabled)
|> assign(:primary_language, primary_language)
|> assign(:current_lang, primary_language)
|> assign(:language_tabs, language_tabs)
|> mount_multilang()

{:ok, socket}
end
Expand All @@ -114,13 +107,7 @@ defmodule PhoenixKit.Modules.Entities.Web.DataView do

@impl true
def handle_event("switch_language", %{"lang" => lang_code}, socket) do
enabled = Multilang.enabled_languages()

if lang_code in enabled do
{:noreply, assign(socket, :current_lang, lang_code)}
else
{:noreply, socket}
end
{:noreply, handle_switch_language(socket, lang_code)}
end

@impl true
Expand Down Expand Up @@ -202,100 +189,20 @@ defmodule PhoenixKit.Modules.Entities.Web.DataView do
<%!-- Language Selector (only when multilang enabled) --%>
<%= if @multilang_enabled && length(@language_tabs) > 1 do %>
<div class="card bg-base-100 shadow-xl mb-6">
<div class="card-body">
<div class="flex items-center justify-between mb-3">
<div class="flex items-center gap-2">
<.icon name="hero-language" class="w-5 h-5 text-primary" />
<h2 class="card-title text-lg m-0">{gettext("Content Language")}</h2>
</div>
<% primary_tab =
Enum.find(@language_tabs, fn t -> t.is_primary end) %>
<%= if primary_tab do %>
<div class="flex items-center gap-1.5 text-xs text-base-content/60">
<.icon name="hero-star-solid" class="w-3.5 h-3.5 text-primary" />
{gettext("Primary: %{lang}", lang: primary_tab.name)}
</div>
<% end %>
</div>

<% compact = length(@language_tabs) > 5 %>
<div
role="tablist"
class="flex flex-wrap items-center gap-1 bg-base-200 rounded-box p-1"
>
<%= if compact do %>
<%= for {tab, idx} <- Enum.with_index(@language_tabs) do %>
<%= if idx > 0 do %>
<span class="text-base-content/30">|</span>
<% end %>
<button
type="button"
role="tab"
phx-click="switch_language"
phx-value-lang={tab.code}
title={tab.name}
class={[
"tab gap-1 transition-all",
@current_lang == tab.code && "tab-active"
]}
>
<%= if tab.flag do %>
<span>{tab.flag}</span>
<% end %>
<span>{tab.short_code}</span>
<%= if tab.is_primary do %>
<.icon name="hero-star-solid" class="w-3 h-3 text-primary" />
<% end %>
</button>
<% end %>
<% else %>
<%= for tab <- @language_tabs do %>
<%= if tab.is_primary do %>
<button
type="button"
role="tab"
phx-click="switch_language"
phx-value-lang={tab.code}
class={[
"tab gap-1.5 transition-all font-medium",
@current_lang == tab.code && "tab-active"
]}
>
<%= if tab.flag do %>
<span>{tab.flag}</span>
<% end %>
<span>{tab.name}</span>
<.icon name="hero-star-solid" class="w-3 h-3 text-primary" />
</button>
<div class="divider divider-horizontal mx-0.5 h-6 self-center"></div>
<% else %>
<button
type="button"
role="tab"
phx-click="switch_language"
phx-value-lang={tab.code}
class={[
"tab gap-1.5 transition-all",
@current_lang == tab.code && "tab-active"
]}
>
<%= if tab.flag do %>
<span>{tab.flag}</span>
<% end %>
<span>{tab.name}</span>
</button>
<% end %>
<% end %>
<% end %>
</div>

<.multilang_tabs
multilang_enabled={@multilang_enabled}
language_tabs={@language_tabs}
current_lang={@current_lang}
show_info={false}
/>
<div class="card-body pt-0">
<%= if @current_lang == @primary_language do %>
<p class="text-xs text-base-content/50 mt-3">
<p class="text-xs text-base-content/50">
<.icon name="hero-information-circle" class="w-3.5 h-3.5 inline -mt-0.5" />
{gettext("This is the primary language.")}
</p>
<% else %>
<p class="text-xs text-base-content/50 mt-3">
<p class="text-xs text-base-content/50">
<.icon name="hero-information-circle" class="w-3.5 h-3.5 inline -mt-0.5" />
{gettext("Fields without a value show the primary language value.")}
</p>
Expand Down
33 changes: 4 additions & 29 deletions lib/modules/entities/web/entity_form.ex
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,13 +9,13 @@ defmodule PhoenixKit.Modules.Entities.Web.EntityForm do

require Logger

alias Phoenix.LiveView.JS
import PhoenixKitWeb.Components.MultilangForm

alias PhoenixKit.Modules.Entities
alias PhoenixKit.Modules.Entities.Events
alias PhoenixKit.Modules.Entities.FieldTypes
alias PhoenixKit.Modules.Entities.Mirror.Exporter
alias PhoenixKit.Modules.Entities.Mirror.Storage
alias PhoenixKit.Modules.Entities.Multilang
alias PhoenixKit.Modules.Entities.Presence
alias PhoenixKit.Modules.Entities.PresenceHelpers
alias PhoenixKit.Settings
Expand Down Expand Up @@ -61,11 +61,6 @@ defmodule PhoenixKit.Modules.Entities.Web.EntityForm do

live_source = ensure_live_source(socket)

# Multilang state
multilang_enabled = Multilang.enabled?()
primary_language = if multilang_enabled, do: Multilang.primary_language(), else: nil
language_tabs = Multilang.build_language_tabs()

socket =
socket
|> assign(:page_title, page_title)
Expand All @@ -90,11 +85,8 @@ defmodule PhoenixKit.Modules.Entities.Web.EntityForm do
|> assign(:delete_confirm_index, nil)
|> assign(:has_unsaved_changes, false)
|> assign(:mirror_path, Storage.root_path())
|> assign(:multilang_enabled, multilang_enabled)
|> assign(:primary_language, primary_language)
|> assign(:current_lang, primary_language)
|> assign(:language_tabs, language_tabs)
|> assign(:sort_mode, Entities.get_sort_mode(entity))
|> mount_multilang()

socket =
if connected?(socket) do
Expand Down Expand Up @@ -183,25 +175,8 @@ defmodule PhoenixKit.Modules.Entities.Web.EntityForm do
end
end

defp switch_lang_js(lang_code, current_lang) do
if lang_code == current_lang do
# Already on this tab — no-op to prevent skeleton ghosts
%JS{}
else
JS.push("switch_language", value: %{lang: lang_code})
|> JS.add_class("hidden", to: "[data-translatable=fields]")
|> JS.remove_class("hidden", to: "[data-translatable=skeletons]")
end
end

def handle_event("switch_language", %{"lang" => lang_code}, socket) do
enabled_langs = Multilang.enabled_languages()

if lang_code in enabled_langs do
{:noreply, assign(socket, :current_lang, lang_code)}
else
{:noreply, socket}
end
{:noreply, handle_switch_language(socket, lang_code)}
end

@impl true
Expand Down
Loading
Loading