Is there any way to show a live_component in a different parent?

Phoenix Forum Questions / Help
,
1

Hey guys, I have 2 Liveviews generated by mix phx.gen.live, which are Tasks and Boards.

Is there any way to show the form_component(tasks) (I want to show the *new form modal) in show.html.leex (boards)? I mean, Is there any way to show a live_component in a different parent?

Right now I’m able to show the modal from boards show.html.leex, but I’m being redirected to tasks index.html.leex.

BoardLive.Show

defmodule KanbanliveWeb.BoardLive.Show do
  use KanbanliveWeb, :live_view

  alias Kanbanlive.{Boards, Repo, Column}

  @impl true
  def mount(%{"id" => id}, _session, socket) do
    with {:ok, board} <- Boards.find_by!(id) do
      #Endpoint.subscribe(topic(board_id))
      {:ok, assign(socket, :board, board)}
    else
      {:error, _reason} ->{:ok, redirect(socket, to: "error")}
    end
  end

  @impl true
  def handle_params(%{"id" => id}, _, socket) do
    IO.inspect socket.assigns.live_action
    {:noreply,
     socket
     |> assign(:page_title, page_title(socket.assigns.live_action))
     |> assign(:board, Boards.get_board!(id) |> Repo.preload(column: :task))}
  end



  def handle_event("add-column", %{"column" => %{"title" => title}}, socket) do
    board_id = socket.assigns.board.id
    Column.create_column(%{"title" => title, "board_id" => board_id})
    {:noreply,
     socket
     |> assign(:page_title, page_title(socket.assigns.live_action))
     |> assign(:board, Boards.get_board!(board_id) |> Repo.preload(column: :task))}
  end

  def handle_event("delete", %{"id" => id}, socket) do
    board_id = socket.assigns.board.id
    column = Repo.get(Column, id)
    {:ok, _} = Repo.delete(column)

    {:noreply,
      socket
      |> assign(:page_title, page_title(socket.assigns.live_action))
      |> assign(:board, Boards.get_board!(board_id) |> Repo.preload(column: :task))}
  end

  defp page_title(:show), do: "Show Board"
  defp page_title(:edit), do: "Edit Board"
end

BoardLive.Index

defmodule KanbanliveWeb.BoardLive.Index do
  use KanbanliveWeb, :live_view

  alias Kanbanlive.{Boards, Repo}
  alias Kanbanlive.Boards.Board

  @impl true
  def mount(_params, _session, socket) do
    boards = list_boards() |> Repo.preload(column: :task)
    {:ok, assign(socket, :boards, boards)}
  end

  @impl true
  def handle_params(params, _url, socket) do
    {:noreply, apply_action(socket, socket.assigns.live_action, params)}
  end

  defp apply_action(socket, :edit, %{"id" => id}) do
    socket
    |> assign(:page_title, "Edit Board")
    |> assign(:board, Boards.get_board!(id) |> Repo.preload(column: :task))
  end

  defp apply_action(socket, :new, _params) do
    socket
    |> assign(:page_title, "New Board")
    |> assign(:board, %Board{})
  end

  defp apply_action(socket, :index, _params) do
    socket
    |> assign(:page_title, "Listing Boards")
    |> assign(:board, nil)
  end

  @impl true
  def handle_event("delete", %{"id" => id}, socket) do
    board = Boards.get_board!(id)
    {:ok, _} = Boards.delete_board(board)

    {:noreply, assign(socket, :boards, list_boards())}
  end

  defp list_boards do
    Boards.list_boards()
  end
end

show.html.leex


<%= if @live_action in [:edit] do %>
  <%= live_modal @socket, KanbanliveWeb.BoardLive.FormComponent,
    id: @board.id,
    title: @page_title,
    action: @live_action,
    board: @board,
    return_to: Routes.board_show_path(@socket, :show, @board) %>
<% end %>

<%= if @live_action in [:new] do %>
  <%= live_modal @socket, KanbanliveWeb.TaskLive.FormComponent,
    id: @task.id || :new,
    title: @page_title,
    action: @live_action,
    task: @task,
    users: @users,
    current_user: @current_user,
    return_to: Routes.board_show_path(@socket, :show, @board) %>
<% end %>


<form action="#" phx-submit="add-column">
      <%= text_input :column, :title, placeholder: "Add new column" %>
      <button type="submit">Create</button>
  </form>
<h1><%= @board.title %></h1>

<div class="row">

  <%= for column <- @board.column do %>
  <div class="col-xs-4">
    <div class="panel panel-info">
      <div class="panel-heading">
        <h3 class="panel-title"><%= column.title %></h3>
         <span><%= link "X", to: "#", phx_click: "delete", phx_value_id: column.id, data: [confirm: "Are you sure?"] %></span>
      </div>
      <div class="panel-body">
        <div class="column" data-column-id="<%= column.id %>">
        &nbsp;
        <%= for card <- column.task do %>
          <div data-card-id="<%= card.id %>" class="task alert alert-success" role="alert">
            <textarea phx-blur="update_card" phx-value-card="<%= card.id %>"><%= card.description %></textarea>
          </div>
          <% end %>
          <div>
            <button phx-click="add_card" phx-value-column="<%= column.id %>">Add card</button>
          </div>
        </div>
      </div>
    </div>
  </div>
  <% end %>
</div>

<span><%= live_patch "New Task", to: Routes.task_index_path(@socket, :new, @board.id) %></span>

<span><%= live_patch "Edit board", to: Routes.board_show_path(@socket, :edit, @board), class: "button" %></span>
<span><%= live_redirect "Back", to: Routes.board_index_path(@socket, :index) %></span>

This is how I’m doing atm. Please help :sob: