feat: gettext

lib/mv_web/components/layouts/app.html.heex

@@ -9,6 +9,13 @@
       </p>
     </div>
     <div class="flex items-center gap-4 font-semibold leading-6 text-zinc-900">
+      <form method="post" action="/set_locale" class="mr-4">
+        <input type="hidden" name="_csrf_token" value={Plug.CSRFProtection.get_csrf_token()} />
+        <select name="locale" onchange="this.form.submit()" class="rounded border px-2 py-1">
+          <option value="de" selected={Gettext.get_locale() == "de"}>Deutsch</option>
+          <option value="en" selected={Gettext.get_locale() == "en"}>English</option>
+        </select>
+      </form>
       <a href="https://twitter.com/elixirphoenix" class="hover:text-zinc-700">
         @elixirphoenix
       </a>

lib/mv_web/live_helpers.ex

@@ -0,0 +1,9 @@
+defmodule MvWeb.LiveHelpers do
+  import Phoenix.LiveView
+
+  def on_mount(:default, _params, session, socket) do
+    locale = session["locale"] || "en"
+    Gettext.put_locale(locale)
+    {:cont, socket}
+  end
+end

lib/mv_web/locale_controller.ex

@@ -0,0 +1,18 @@
+defmodule MvWeb.LocaleController do
+  use MvWeb, :controller
+
+  def set_locale(conn, %{"locale" => locale}) do
+    conn
+    |> put_session(:locale, locale)
+    |> redirect(to: get_referer(conn) || "/")
+  end
+
+  defp get_referer(conn) do
+    conn.req_headers
+    |> Enum.find(fn {k, _v} -> k == "referer" end)
+    |> case do
+      {_, v} -> URI.parse(v).path
+      _ -> nil
+    end
+  end
+end 

lib/mv_web/member_live/form_component.ex

@@ -26,7 +26,7 @@ defmodule MvWeb.MemberLive.FormComponent do
     <div>
       <.header>
         {@title}
-        <:subtitle>Use this form to manage member records and their properties.</:subtitle>
+        <:subtitle>{gettext("Use this form to manage member records and their properties.")}</:subtitle>
       </.header>
 
       <.simple_form
@@ -36,21 +36,21 @@ defmodule MvWeb.MemberLive.FormComponent do
         phx-change="validate"
         phx-submit="save"
       >
-        <.input field={@form[:first_name]} label="First Name" required />
-        <.input field={@form[:last_name]} label="Last Name" required />
-        <.input field={@form[:email]} label="Email" required type="email" />
-        <.input field={@form[:birth_date]} label="Birth Date" type="date" />
-        <.input field={@form[:paid]} label="Paid" type="checkbox" />
-        <.input field={@form[:phone_number]} label="Phone Number" />
-        <.input field={@form[:join_date]} label="Join Date" type="date" />
-        <.input field={@form[:exit_date]} label="Exit Date" type="date" />
-        <.input field={@form[:notes]} label="Notes" />
-        <.input field={@form[:city]} label="City" />
-        <.input field={@form[:street]} label="Street" />
-        <.input field={@form[:house_number]} label="House Number" />
-        <.input field={@form[:postal_code]} label="Postal Code" />
+        <.input field={@form[:first_name]} label={gettext("First Name")} required />
+        <.input field={@form[:last_name]} label={gettext("Last Name")} required />
+        <.input field={@form[:email]} label={gettext("Email")} required type="email" />
+        <.input field={@form[:birth_date]} label={gettext("Birth Date")} type="date" />
+        <.input field={@form[:paid]} label={gettext("Paid")} type="checkbox" />
+        <.input field={@form[:phone_number]} label={gettext("Phone Number")} />
+        <.input field={@form[:join_date]} label={gettext("Join Date")} type="date" />
+        <.input field={@form[:exit_date]} label={gettext("Exit Date")} type="date" />
+        <.input field={@form[:notes]} label={gettext("Notes")} />
+        <.input field={@form[:city]} label={gettext("City")} />
+        <.input field={@form[:street]} label={gettext("Street")} />
+        <.input field={@form[:house_number]} label={gettext("House Number")} />
+        <.input field={@form[:postal_code]} label={gettext("Postal Code")} />
 
-        <h3 class="mt-8 mb-2 text-lg font-semibold">Custom Properties</h3>
+        <h3 class="mt-8 mb-2 text-lg font-semibold">{gettext("Custom Properties")}</h3>
         <.inputs_for :let={f_property} field={@form[:properties]}>
           <% type = Enum.find(@property_types, &(&1.id == f_property[:property_type_id].value)) %>
           <.inputs_for :let={value_form} field={f_property[:value]}>
@@ -70,7 +70,7 @@ defmodule MvWeb.MemberLive.FormComponent do
         </.inputs_for>
 
         <:actions>
-          <.button phx-disable-with="Saving...">Save Member</.button>
+          <.button phx-disable-with={gettext("Saving...")}>{gettext("Save Member")}</.button>
         </:actions>
       </.simple_form>
     </div>
@@ -95,9 +95,16 @@ defmodule MvWeb.MemberLive.FormComponent do
       {:ok, member} ->
         notify_parent({:saved, member})
 
+        action =
+          case socket.assigns.form.source.type do
+            :create -> gettext("create")
+            :update -> gettext("update")
+            other -> to_string(other)
+          end
+
         socket =
           socket
-          |> put_flash(:info, "Member #{socket.assigns.form.source.type}d successfully")
+          |> put_flash(:info, gettext("Mitglied %{action} erfolgreich", action: action))
           |> push_patch(to: socket.assigns.patch)
 
         {:noreply, socket}

lib/mv_web/member_live/index.ex

@@ -5,10 +5,10 @@ defmodule MvWeb.MemberLive.Index do
   def render(assigns) do
     ~H"""
     <.header>
-      Listing Members
+      {gettext("Listing Members")}
       <:actions>
         <.link patch={~p"/members/new"}>
-          <.button>New Member</.button>
+          <.button>{gettext("New Member")}</.button>
         </.link>
       </:actions>
     </.header>
@@ -19,26 +19,26 @@ defmodule MvWeb.MemberLive.Index do
       row_click={fn {_id, member} -> JS.navigate(~p"/members/#{member}") end}
     >
       <!-- <:col :let={{_id, member}} label="Id">{member.id}</:col> -->
-      <:col :let={{_id, member}} label="First Name">{member.first_name}</:col>
-      <:col :let={{_id, member}} label="Last Name">{member.last_name}</:col>
-      <:col :let={{_id, member}} label="Email">{member.email}</:col>
-      <:col :let={{_id, member}} label="City">{member.city}</:col>
-      <:col :let={{_id, member}} label="Join Date">{member.join_date}</:col>
+      <:col :let={{_id, member}} label={gettext("First Name")}>{member.first_name}</:col>
+      <:col :let={{_id, member}} label={gettext("Last Name")}>{member.last_name}</:col>
+      <:col :let={{_id, member}} label={gettext("Email")}>{member.email}</:col>
+      <:col :let={{_id, member}} label={gettext("City")}>{member.city}</:col>
+      <:col :let={{_id, member}} label={gettext("Join Date")}>{member.join_date}</:col>
 
       <:action :let={{_id, member}}>
         <div class="sr-only">
-          <.link navigate={~p"/members/#{member}"}>Show</.link>
+          <.link navigate={~p"/members/#{member}"}>{gettext("Show")}</.link>
         </div>
 
-        <.link patch={~p"/members/#{member}/edit"}>Edit</.link>
+        <.link patch={~p"/members/#{member}/edit"}>{gettext("Edit")}</.link>
       </:action>
 
       <:action :let={{id, member}}>
         <.link
           phx-click={JS.push("delete", value: %{id: member.id}) |> hide("##{id}")}
-          data-confirm="Are you sure?"
+          data-confirm={gettext("Are you sure?")}
         >
-          Delete
+          {gettext("Delete")}
         </.link>
       </:action>
     </.table>
@@ -73,19 +73,19 @@ defmodule MvWeb.MemberLive.Index do
 
   defp apply_action(socket, :edit, %{"id" => id}) do
     socket
-    |> assign(:page_title, "Edit Member")
+    |> assign(:page_title, gettext("Edit Member"))
     |> assign(:member, Ash.get!(Mv.Membership.Member, id))
   end
 
   defp apply_action(socket, :new, _params) do
     socket
-    |> assign(:page_title, "New Member")
+    |> assign(:page_title, gettext("New Member"))
     |> assign(:member, nil)
   end
 
   defp apply_action(socket, :index, _params) do
     socket
-    |> assign(:page_title, "Listing Members")
+    |> assign(:page_title, gettext("Listing Members"))
     |> assign(:member, nil)
   end
 

lib/mv_web/member_live/show.ex

@@ -7,33 +7,33 @@ defmodule MvWeb.MemberLive.Show do
     ~H"""
     <.header>
       {@member.first_name} {@member.last_name}
-      <:subtitle>This is a member record from your database.</:subtitle>
+      <:subtitle>{gettext("This is a member record from your database.")}</:subtitle>
 
       <:actions>
         <.link patch={~p"/members/#{@member}/show/edit"} phx-click={JS.push_focus()}>
-          <.button>Edit member</.button>
+          <.button>{gettext("Edit member")}</.button>
         </.link>
       </:actions>
     </.header>
 
     <.list>
-      <:item title="Id">{@member.id}</:item>
-      <:item title="First Name">{@member.first_name}</:item>
-      <:item title="Last Name">{@member.last_name}</:item>
-      <:item title="Email">{@member.email}</:item>
-      <:item title="Birth Date">{@member.birth_date}</:item>
-      <:item title="Paid">{if @member.paid, do: "Yes", else: "No"}</:item>
-      <:item title="Phone Number">{@member.phone_number}</:item>
-      <:item title="Join Date">{@member.join_date}</:item>
-      <:item title="Exit Date">{@member.exit_date}</:item>
-      <:item title="Notes">{@member.notes}</:item>
-      <:item title="City">{@member.city}</:item>
-      <:item title="Street">{@member.street}</:item>
-      <:item title="House Number">{@member.house_number}</:item>
-      <:item title="Postal Code">{@member.postal_code}</:item>
+      <:item title={gettext("Id")}>{@member.id}</:item>
+      <:item title={gettext("First Name")}>{@member.first_name}</:item>
+      <:item title={gettext("Last Name")}>{@member.last_name}</:item>
+      <:item title={gettext("Email")}>{@member.email}</:item>
+      <:item title={gettext("Birth Date")}>{@member.birth_date}</:item>
+      <:item title={gettext("Paid")}>{if @member.paid, do: gettext("Yes"), else: gettext("No")}</:item>
+      <:item title={gettext("Phone Number")}>{@member.phone_number}</:item>
+      <:item title={gettext("Join Date")}>{@member.join_date}</:item>
+      <:item title={gettext("Exit Date")}>{@member.exit_date}</:item>
+      <:item title={gettext("Notes")}>{@member.notes}</:item>
+      <:item title={gettext("City")}>{@member.city}</:item>
+      <:item title={gettext("Street")}>{@member.street}</:item>
+      <:item title={gettext("House Number")}>{@member.house_number}</:item>
+      <:item title={gettext("Postal Code")}>{@member.postal_code}</:item>
     </.list>
 
-    <h3 class="mt-8 mb-2 text-lg font-semibold">Custom Properties</h3>
+    <h3 class="mt-8 mb-2 text-lg font-semibold">{gettext("Custom Properties")}</h3>
     <.generic_list items={
       Enum.map(@member.properties, fn p ->
         {
@@ -47,7 +47,7 @@ defmodule MvWeb.MemberLive.Show do
         }
       end)
     } />
-    <.back navigate={~p"/members"}>Back to members</.back>
+    <.back navigate={~p"/members"}>{gettext("Back to members")}</.back>
 
     <.modal
       :if={@live_action == :edit}
@@ -87,6 +87,6 @@ defmodule MvWeb.MemberLive.Show do
      |> assign(:member, member)}
   end
 
-  defp page_title(:show), do: "Show Member"
-  defp page_title(:edit), do: "Edit Member"
+  defp page_title(:show), do: gettext("Show Member")
+  defp page_title(:edit), do: gettext("Edit Member")
 end

lib/mv_web/router.ex

@@ -8,6 +8,7 @@ defmodule MvWeb.Router do
     plug :put_root_layout, html: {MvWeb.Layouts, :root}
     plug :protect_from_forgery
     plug :put_secure_browser_headers
+    plug :set_locale
   end
 
   pipeline :api do
@@ -35,6 +36,8 @@ defmodule MvWeb.Router do
     live "/properties/:id/edit", PropertyLive.Index, :edit
     live "/properties/:id", PropertyLive.Show, :show
     live "/properties/:id/show/edit", PropertyLive.Show, :edit
+
+    post "/set_locale", LocaleController, :set_locale
   end
 
   # Other scopes may use custom stacks.
@@ -68,4 +71,10 @@ defmodule MvWeb.Router do
       ash_admin "/"
     end
   end
+
+  defp set_locale(conn, _opts) do
+    locale = get_session(conn, :locale) || "en"
+    Gettext.put_locale(MvWeb.Gettext, locale)
+    conn
+  end
 end