Packages

phoenix_kit

1.7.5
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
37 Dependencies
Dependants
Files
Activity
phoenix_kit lib phoenix_kit_web live modules db_sync index.ex
Raw

lib/phoenix_kit_web/live/modules/db_sync/index.ex 

defmodule PhoenixKitWeb.Live.Modules.DBSync.Index do

  @moduledoc """

  Landing page for DB Sync module.



  Presents two options:

  - Send Data: Generate a code and host an endpoint to share your data

  - Receive Data: Connect to another site to browse and pull their data

  """



  use PhoenixKitWeb, :live_view

  use Gettext, backend: PhoenixKitWeb.Gettext



  alias PhoenixKit.DBSync

  alias PhoenixKit.Settings

  alias PhoenixKit.Utils.Routes



  @impl true

  def mount(params, _session, socket) do

    locale = params["locale"] || "en"

    project_title = Settings.get_setting("project_title", "PhoenixKit")

    config = DBSync.get_config()



    socket =

      socket

      |> assign(:page_title, "DB Sync")

      |> assign(:project_title, project_title)

      |> assign(:current_locale, locale)

      |> assign(:current_path, Routes.path("/admin/db-sync", locale: locale))

      |> assign(:config, config)



    {:ok, socket}

  end



  @impl true

  def handle_params(_params, _url, socket) do

    {:noreply, socket}

  end



  @impl true

  def render(assigns) do

    ~H"""

    <PhoenixKitWeb.Components.LayoutWrapper.app_layout

      flash={@flash}

      phoenix_kit_current_scope={assigns[:phoenix_kit_current_scope]}

      page_title="{@project_title} - DB Sync"

      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-8">

          <.link

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

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

          >

            <.icon name="hero-arrow-left" class="w-4 h-4" /> Back to Modules

          </.link>



          <div class="text-center">

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

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

              Transfer data between PhoenixKit instances

            </p>

          </div>

        </header>



        <%= if not @config.enabled do %>

          <div class="alert alert-warning mb-6">

            <.icon name="hero-exclamation-triangle" class="w-5 h-5" />

            <span>

              DB Sync module is disabled. Enable it in

              <.link navigate={Routes.path("/admin/modules")} class="link link-primary">

                Modules

              </.link>

              to use this feature.

            </span>

          </div>

        <% end %>



        <%!-- Main Options --%>

        <div class="grid gap-6 md:grid-cols-2 max-w-4xl mx-auto">

          <%!-- Send Data Card --%>

          <div class={[

            "card bg-base-100 shadow-xl",

            if(not @config.enabled, do: "opacity-50 pointer-events-none")

          ]}>

            <div class="card-body items-center text-center">

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

              <h2 class="card-title text-2xl">Send Data</h2>

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

                Generate a connection code and share your data with another site.

                They will connect to you and pull the data they need.

              </p>

              <div class="card-actions">

                <.link

                  navigate={Routes.path("/admin/db-sync/send", locale: @current_locale)}

                  class="btn btn-primary btn-lg"

                >

                  <.icon name="hero-arrow-up-tray" class="w-5 h-5" /> Share My Data

                </.link>

              </div>

            </div>

          </div>



          <%!-- Receive Data Card --%>

          <div class={[

            "card bg-base-100 shadow-xl",

            if(not @config.enabled, do: "opacity-50 pointer-events-none")

          ]}>

            <div class="card-body items-center text-center">

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

              <h2 class="card-title text-2xl">Receive Data</h2>

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

                Connect to another site using their URL and connection code

                to browse and pull their data into this site.

              </p>

              <div class="card-actions">

                <.link

                  navigate={Routes.path("/admin/db-sync/receive", locale: @current_locale)}

                  class="btn btn-secondary btn-lg"

                >

                  <.icon name="hero-arrow-down-tray" class="w-5 h-5" /> Pull Data

                </.link>

              </div>

            </div>

          </div>

        </div>



        <%!-- Info Section --%>

        <div class="mt-12 max-w-4xl mx-auto">

          <div class="card bg-base-200">

            <div class="card-body">

              <h3 class="card-title text-lg">

                <.icon name="hero-information-circle" class="w-5 h-5" /> How it works

              </h3>

              <div class="grid gap-4 md:grid-cols-3 mt-4">

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

                  <div class="badge badge-primary badge-lg">1</div>

                  <div>

                    <p class="font-semibold">Sender Opens API</p>

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

                      The site with data generates a connection code and shares it

                    </p>

                  </div>

                </div>

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

                  <div class="badge badge-primary badge-lg">2</div>

                  <div>

                    <p class="font-semibold">Receiver Connects</p>

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

                      The site wanting data enters the URL and code to connect

                    </p>

                  </div>

                </div>

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

                  <div class="badge badge-primary badge-lg">3</div>

                  <div>

                    <p class="font-semibold">Browse & Transfer</p>

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

                      Browse tables, select what to import, and configure conflict handling

                    </p>

                  </div>

                </div>

              </div>

            </div>

          </div>

        </div>



        <%!-- Active Sessions --%>

        <%= if @config.active_sessions > 0 do %>

          <div class="mt-6 max-w-4xl mx-auto">

            <div class="alert alert-info">

              <.icon name="hero-signal" class="w-5 h-5" />

              <span>

                <strong>{@config.active_sessions}</strong> active transfer session(s)

              </span>

            </div>

          </div>

        <% end %>

      </div>

    </PhoenixKitWeb.Components.LayoutWrapper.app_layout>

    """

  end

end