Packages

phoenix_kit

1.4.2
1.7.208 1.7.207 1.7.206 1.7.205 1.7.204 1.7.203 1.7.202 1.7.201 1.7.200 1.7.199 1.7.198 1.7.197 1.7.196 1.7.194 1.7.193 1.7.192 1.7.191 1.7.190 1.7.189 1.7.187 1.7.186 1.7.185 1.7.184 1.7.183 1.7.182 1.7.181 1.7.180 1.7.179 1.7.178 1.7.177 1.7.176 1.7.175 1.7.174 1.7.173 1.7.172 1.7.171 1.7.170 1.7.169 1.7.168 1.7.167 1.7.166 1.7.165 1.7.164 1.7.162 1.7.161 1.7.160 1.7.159 1.7.157 1.7.156 1.7.155 1.7.154 1.7.153 1.7.152 1.7.151 1.7.150 1.7.149 1.7.146 1.7.145 1.7.144 1.7.143 1.7.138 1.7.133 1.7.132 1.7.131 1.7.130 1.7.128 1.7.126 1.7.125 1.7.121 1.7.120 1.7.119 1.7.118 1.7.117 1.7.116 1.7.115 1.7.114 1.7.113 1.7.112 1.7.111 1.7.110 1.7.109 1.7.108 1.7.107 1.7.106 1.7.105 1.7.104 1.7.103 1.7.102 1.7.101 1.7.100 1.7.99 1.7.98 1.7.97 1.7.96 1.7.95 1.7.94 1.7.93 1.7.92 1.7.91 1.7.90 1.7.89 1.7.88 1.7.87 1.7.86 1.7.85 1.7.84 1.7.83 1.7.82 1.7.81 1.7.80 1.7.79 1.7.78 1.7.77 1.7.76 1.7.75 1.7.74 1.7.71 1.7.70 1.7.69 1.7.66 1.7.65 1.7.64 1.7.63 1.7.62 1.7.61 1.7.59 1.7.58 1.7.57 1.7.56 1.7.55 1.7.54 1.7.53 1.7.52 1.7.51 1.7.49 1.7.44 1.7.43 1.7.42 1.7.41 1.7.39 1.7.38 1.7.37 1.7.36 1.7.34 1.7.33 1.7.31 1.7.30 1.7.29 1.7.28 1.7.27 1.7.26 1.7.25 1.7.24 1.7.23 1.7.22 1.7.21 1.7.20 1.7.19 1.7.18 1.7.17 1.7.16 1.7.15 1.7.14 1.7.13 1.7.12 1.7.11 1.7.10 1.7.9 1.7.8 1.7.7 1.7.6 1.7.5 1.7.4 1.7.3 1.7.2 1.7.1 1.7.0 1.6.20 1.6.19 1.6.18 1.6.17 1.6.16 1.6.15 1.6.14 1.6.13 1.6.12 1.6.11 1.6.10 1.6.9 1.6.8 1.6.7 1.6.6 1.6.5 1.6.4 1.6.3 1.5.2 1.5.1 1.5.0 1.4.9 1.4.8 1.4.7 1.4.6 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2 1.3.1 1.3.0 1.2.10 1.2.9 1.2.8 1.2.7 1.2.5 1.2.4 1.2.2 1.2.1 1.2.0 1.1.0 1.0.0

A foundation for building Elixir Phoenix apps — SaaS, social networks, ERP systems, marketplaces, and more

HexDocs

Current section

Files

Jump to
Readme
222 Versions
29 Dependencies
Dependants
Files
Activity
phoenix_kit lib phoenix_kit_web live modules languages.html.heex
Raw

lib/phoenix_kit_web/live/modules/languages.html.heex 

<PhoenixKitWeb.Components.LayoutWrapper.app_layout

  flash={@flash}

  phoenix_kit_current_scope={assigns[:phoenix_kit_current_scope]}

  page_title="{@project_title} Languages"

  current_path={@current_path}

  project_title={@project_title}

  current_locale={@current_locale}

>

  <div class="container flex flex-col mx-auto px-4 py-6">

    <%!-- Header Section --%>

    <header class="w-full relative mb-6">

      <%!-- Back Button (Left aligned) --%>

      <.link

        navigate={PhoenixKit.Utils.Routes.path("/admin/modules")}

        class="btn btn-outline btn-primary btn-sm absolute left-0 top-0 -mb-12"

      >

        <PhoenixKitWeb.Components.Core.Icons.icon_arrow_left /> Back to Modules

      </.link>



      <%!-- Title Section --%>

      <div class="text-center">

        <h1 class="text-4xl font-bold text-base-content mb-3">Languages</h1>

        <p class="text-lg text-base-content">Configure and manage language module</p>

      </div>

    </header>



    <%!-- System Toggle Section --%>

    <div class="card bg-base-100 shadow-xl mb-6">

      <div class="card-body">

        <div class="flex items-center justify-between">

          <div class="flex items-center">

            <div class="text-3xl mr-4">🌐</div>

            <div>

              <h3 class="card-title text-xl">Languages</h3>

              <p class="text-base-content/70">

                Enable language module for your application

              </p>

            </div>

          </div>

          <div class="form-control">

            <label class="label cursor-pointer">

              <input

                type="checkbox"

                class="toggle toggle-primary toggle-lg"

                checked={@ml_enabled}

                phx-click="toggle_languages"

              />

            </label>

          </div>

        </div>

      </div>

    </div>



    <%= if @ml_enabled do %>

      <%!-- Languages Management Section --%>

      <div class="card bg-base-100 shadow-xl">

        <div class="card-body">

          <div class="mb-4">

            <h3 class="card-title text-xl">Language Configuration</h3>

          </div>



          <%!-- Add Language Dropdown --%>

          <%= if not Enum.empty?(@available_languages_for_selection) do %>

            <div class="mb-4">

              <form phx-submit="add_language">

                <div class="flex items-center gap-3">

                  <div class="form-control flex-1">

                    <select

                      name="language_code"

                      class="select select-bordered"

                      required

                    >

                      <option value="" disabled selected>Select a language to add...</option>

                      <%= for language <- @available_languages_for_selection do %>

                        <option value={language.code}>

                          {language.flag} {language.name} ({language.native})

                        </option>

                      <% end %>

                    </select>

                  </div>

                  <button type="submit" class="btn btn-primary btn-sm">

                    <PhoenixKitWeb.Components.Core.Icons.icon_plus class="w-4 h-4 mr-1" />

                    Add Language

                  </button>

                </div>

              </form>

            </div>

          <% end %>



          <%!-- Languages List --%>

          <%= if Enum.empty?(@languages) do %>

            <div class="text-center py-8 text-base-content/50">

              <div class="text-4xl mb-4">🌐</div>

              <p>No languages configured yet.</p>

              <p class="text-sm">Enable the system to add your first language.</p>

            </div>

          <% else %>

            <div class="space-y-3">

              <%= for {language, index} <- Enum.with_index(@languages) do %>

                <div class="flex items-center justify-between p-4 bg-base-200 rounded-lg">

                  <div class="flex items-center flex-1">

                    <div class="text-2xl mr-3">

                      <%= case language["code"] do %>

                        <% "en" -> %>

                          🇺🇸

                        <% "es" -> %>

                          🇪🇸

                        <% "fr" -> %>

                          🇫🇷

                        <% "de" -> %>

                          🇩🇪

                        <% "pt" -> %>

                          🇵🇹

                        <% "it" -> %>

                          🇮🇹

                        <% "nl" -> %>

                          🇳🇱

                        <% "ru" -> %>

                          🇷🇺

                        <% "zh-CN" -> %>

                          🇨🇳

                        <% "ja" -> %>

                          🇯🇵

                        <% _ -> %>

                          🌐

                      <% end %>

                    </div>

                    <div class="flex-1">

                      <div class="flex items-center gap-2">

                        <span class="font-medium">{language["name"]}</span>

                        <span class="badge badge-outline badge-sm">{language["code"]}</span>

                        <%= if language["is_default"] do %>

                          <span class="badge badge-primary badge-sm">Default</span>

                        <% end %>

                      </div>

                      <div class="flex items-center gap-2">

                        <div class="btn-group">

                          <button

                            class="btn btn-outline btn-xs"

                            phx-click="move_up"

                            phx-value-code={language["code"]}

                            disabled={index == 0}

                            title="Move up"

                          >

                            ↑

                          </button>

                          <button

                            class="btn btn-outline btn-xs"

                            phx-click="move_down"

                            phx-value-code={language["code"]}

                            disabled={index == @language_count - 1}

                            title="Move down"

                          >

                            ↓

                          </button>

                        </div>

                      </div>

                    </div>

                  </div>



                  <div class="flex items-center gap-2">

                    <%!-- Enable/Disable Toggle --%>

                    <div class="form-control">

                      <label class="label cursor-pointer">

                        <span class="label-text mr-2 text-sm">Enabled</span>

                        <input

                          type="checkbox"

                          class="toggle toggle-sm toggle-primary"

                          checked={language["is_enabled"]}

                          phx-click="toggle_language"

                          phx-value-code={language["code"]}

                          disabled={language["is_default"]}

                        />

                      </label>

                    </div>



                    <%!-- Set Default Button --%>

                    <%= if not language["is_default"] do %>

                      <button

                        class="btn btn-outline btn-xs"

                        phx-click="set_default"

                        phx-value-code={language["code"]}

                      >

                        Set Default

                      </button>

                    <% end %>



                    <%!-- Remove Button --%>

                    <%= if not language["is_default"] and @language_count > 1 do %>

                      <button

                        class="btn btn-error btn-xs"

                        phx-click="remove_language"

                        phx-value-code={language["code"]}

                        onclick="return confirm('Are you sure you want to remove this language?')"

                      >

                        <PhoenixKitWeb.Components.Core.Icons.icon_trash class="w-3 h-3" />

                      </button>

                    <% end %>

                  </div>

                </div>

              <% end %>

            </div>

          <% end %>

        </div>

      </div>



      <%!-- Help Section --%>

      <div class="alert alert-info mt-6">

        <PhoenixKitWeb.Components.Core.Icons.icon_info class="w-5 h-5" />

        <div>

          <h3 class="font-bold">Language Configuration</h3>

          <div class="text-sm space-y-1">

            <p>• Use standard language codes like 'en', 'es', 'fr', or 'zh-CN' for regions</p>

            <p>• The default language cannot be disabled and serves as the fallback</p>

            <p>• Use the arrow buttons to reorder languages in the list</p>

            <p>• At least one language must remain configured at all times</p>

          </div>

        </div>

      </div>

    <% else %>

      <%!-- System Disabled Message --%>

      <div class="card bg-base-100 shadow-xl">

        <div class="card-body text-center py-12">

          <div class="text-6xl mb-4 opacity-50">🌐</div>

          <h3 class="text-xl font-semibold text-base-content/60 mb-2">

            Languages Disabled

          </h3>

          <p class="text-base-content/50 mb-4">

            Enable the language module above to start configuring languages for your application.

            The module will automatically create English as the default language when enabled.

          </p>

        </div>

      </div>

    <% end %>

  </div>

</PhoenixKitWeb.Components.LayoutWrapper.app_layout>