piyopiyo.exポータルチュートリアル ４章～トップページから画面遷移する機能を追加する～

本記事はpiyopiyo.exポータルチュートリアルの４章となります。

「感想を投稿する」ダイアログを修正する

「感想を投稿する」ボタンをクリックした際に表示されるダイアログのデザインを変更します。

• 本来のPoyoPiyoExポータル
  

• 現状

message_live/form_component.html.heexを以下のコードで上書きします。

#lib/phoenix_app_web/live/message_live/form_component.html.heex

<div>
  <.form
    let={f}
    for={@changeset}
    id="message-form"
    phx-target={@myself}
    phx-change="validate"
    phx-submit="save">
  
    <div class="mb-4">
      <div class="mb-2">呼ばれたい名前</div>
      <div>
        <%= text_input f, :display_name, class: ~w(input input-bordered input-accent) %>
        <%= error_tag f, :display_name %>
      </div>
    </div>
    <div class="mb-4">
      <div class="mb-2">
        イベントは楽しかったでしょうか？<br />
        piyopiyo.exにやってほしいことがあれば教えてください
      </div>
      <div>
        <%= textarea f, :message, class: ~w(textarea textarea-accent w-10/12) %>
        <%= error_tag f, :message %>
      </div>
    </div>
    
    <div>
      <%= submit "感想を投稿", phx_disable_with: "Saving..." , class: ["btn", "btn-success"]%>
    </div>
  </.form>
</div>

tailwindcssによるデザインが反映されたことが確認できます。

「全部の感想を見る」リンクの修正

メッセージ表下部の「全部の感想を見る」リンクはトップページのURLにallのパスを付けて遷移することで、デフォルトの最新5件のみ表示と全件表示を切り替える仕様です。
現状はallに対応したハンドラーを追加していない為、クリックすると遷移できずエラーとなります。

lib/phoenix_app_web/live/message_live/index.html.heex

<span><a href="/all" class="btn btn-link">全部の感想を見る</a></span>

リンクをマウスオーバーした際に表示されるURL

リンクをクリックするとエラー

メッセージ一覧のハンドラ実装であるmessage_live.index.exに以下の修正を加えます。

• 初期処理(mount)時にパスのパラメータ(all)を受け取ってlist_messageを呼ぶように引数を追加
• list_messgesがパラメータあり、なしの両方に対応できるように修正

lib/piyopiyoex_portal_web/live/message_live/index.ex

～中略～
  @impl true
  def mount(params, _session, socket) do # <-- modify here
    {:ok, assign(socket, :messages, list_messages(params))} # <-- modify here
  end
～中略～
  # delete default function
  #defp list_messages do
  #  Messages.list_messages()
  #end

  # add list_messges/1 function
  defp list_messages(%{"mode" => mode}) do
    Messages.list_messages(mode)
  end
  defp list_messages(_ \\ %{}) do
    Messages.list_messages()
  end
end

ルーターへmode引数を受け取って遷移する為のEndpointを追加します。

lib/phoenix_app_web/router.ex

 # modify root endpoint
    #get "/", PageController, :index
    live "/", MessageLive.Index, :index
    live "/:mode", MessageLive.Index, :index #<-- add here

「全部の感想を見る」をクリックし/allのパスでアクセスすると5件を超えてすべてのメッセージが表示されていることが確認できます。

次の章

関連情報

• この演習完了時点のリポジトリ断面