Skip to content
This repository has been archived by the owner on Jan 4, 2025. It is now read-only.

Commit

Permalink
Summoner form fix search bug
Browse files Browse the repository at this point in the history 
Improve ux and error message
  • Loading branch information
@mrdotb
mrdotb committed Mar 21, 2024
1 parent 195a5f5 commit c41d082
Show file tree
Hide file tree
Showing 2 changed files with 279 additions and 243 deletions.
278 changes: 35 additions & 243 deletions lib/lor_web/live/admin_live/summoner_form_component.ex
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,9 @@ defmodule LorWeb.AdminLive.SummonerFormComponent do
socket
|> assign(assigns)
|> assign(:account_request, AsyncResult.ok(nil))
|> assign(:form, to_form(%{}, as: "search"))
|> assign(:form, to_form(%{}))
|> assign(:game_name, "")
|> assign(:platform_form, to_form(%{}))
|> assign(:platform_id, nil)
|> assign(:platform_ids, Lor.Lol.PlatformIds.values())
|> assign(:search, "")
Expand All @@ -22,16 +23,35 @@ defmodule LorWeb.AdminLive.SummonerFormComponent do
end

@impl true
def handle_event("change-platform", %{"platform_id" => platform_id}, socket) do
platform_id = get_platform_id(platform_id)

socket =
socket
|> assign(:platform_id, platform_id)
|> assign(:platform_form, to_form(%{"platform_id" => platform_id}))

{:noreply, socket}
end

def handle_event("validate", %{"game_name" => game_name, "tag_line" => tag_line}, socket) do
socket = assign(socket, :form, to_form(%{"game_name" => game_name, "tag_line" => tag_line}))
{:noreply, socket}
end

def handle_event("validate", %{"search" => search}, socket) do
socket = assign(socket, :form, to_form(%{"search" => search}))
{:noreply, socket}
end

def handle_event(
"search",
%{"search" => %{"platform_id" => platform_id} = params},
params,
socket
) do
platform_id = get_platform_id(platform_id)

socket =
socket
|> assign(:platform_id, platform_id)
|> assign(:form, to_form(params))
|> assign(:search, params["search"])
|> assign(:game_name, params["game_name"])
|> assign(:tag_line, params["tag_line"])
Expand Down Expand Up @@ -64,8 +84,8 @@ defmodule LorWeb.AdminLive.SummonerFormComponent do
Lor.Lol.Summoner.create_from_api(platform_id, summoner_data, account_data, player_id) do
put_flash!(socket, :success, "Summoner created and attached to the player successfully!")
else
{:error, %{errors: [%{field: :account_id}]}} ->
put_flash!(socket, :error, "The summoner already exist attach it using local")
{:error, %{errors: [%{field: field}]}} when field in ~w(account_id riot_id)a ->
put_flash!(socket, :error, "The summoner already exist attach it using local tab")

_error ->
put_flash!(socket, :error, "Unknow error")
Expand All @@ -85,8 +105,8 @@ defmodule LorWeb.AdminLive.SummonerFormComponent do
Lor.Lol.Summoner.create_from_api(platform_id, summoner_data, account_data, player_id) do
put_flash!(socket, :success, "Summoner created and attached to the player successfully!")
else
{:error, %{errors: [%{field: :account_id}]}} ->
put_flash!(socket, :error, "The summoner already exist attach it using local")
{:error, %{errors: [%{field: field}]}} when field in ~w(account_id riot_id)a ->
put_flash!(socket, :error, "The summoner already exist attach it using local tab")

_error ->
put_flash!(socket, :error, "Unknow error")
Expand Down Expand Up @@ -183,243 +203,15 @@ defmodule LorWeb.AdminLive.SummonerFormComponent do
|> Lor.Lol.load!(:player)
end

defp show_local(id) do
JS.hide(to: "#tabpanel-summoner-api-#{id}")
|> JS.hide(to: "#tabpanel-account-api-#{id}")
|> JS.show(to: "#tabpanel-local-#{id}")
|> JS.push("state", value: %{state: "local"})
defp show_local(_id) do
JS.push("state", value: %{state: "local"})
end

defp show_summoner_api(id) do
JS.hide(to: "#tabpanel-local-#{id}")
|> JS.hide(to: "#tabpanel-account-api-#{id}")
|> JS.show(to: "#tabpanel-summoner-api#{id}")
|> JS.push("state", value: %{state: "summoner-api"})
defp show_summoner_api(_id) do
JS.push("state", value: %{state: "summoner-api"})
end

defp show_account_api(id) do
JS.hide(to: "#tabpanel-local-#{id}")
|> JS.hide(to: "#tabpanel-summoner-api-#{id}")
|> JS.show(to: "#tabpanel-account-api#{id}")
|> JS.push("state", value: %{state: "account-api"})
end

@impl true
def render(assigns) do
~H"""
<div>
<PC.tabs role="tablist" class="justify-center mb-4">
<PC.tab
id="summoner-local-search"
role="tab"
aria-selected={if(@state == "local", do: "true", else: "false")}
aria-controls={"tabpanel-local-#{@id}"}
tabindex={if(@state == "local", do: "1", else: "2")}
is_active={@state == "local"}
phx-click={show_local(@id)}
phx-target={@myself}
>
<.icon name="hero-circle-stack" class="w-6 h-6 mr-2" />
<span>Local</span>
</PC.tab>
<PC.tab
id="summoner-api-search"
role="tab"
aria-selected={if(@state == "summoner-api", do: "true", else: "false")}
aria-controls={"tabpanel-summoner-api-#{@id}"}
tabindex={if(@state == "summoner-api", do: "1", else: "2")}
is_active={@state == "summoner-api"}
phx-click={show_summoner_api(@id)}
phx-target={@myself}
>
<.icon name="hero-globe-alt" class="w-6 h-6 mr-2" />
<span>Riot Summoner Name</span>
</PC.tab>
<PC.tab
id="account-api-search"
role="tab"
aria-selected={if(@state == "account-api", do: "true", else: "false")}
aria-controls={"tabpanel-account-api-#{@id}"}
tabindex={if(@state == "account-api", do: "1", else: "2")}
is_active={@state == "account-api"}
phx-click={show_account_api(@id)}
phx-target={@myself}
>
<.icon name="hero-globe-alt" class="w-6 h-6 mr-2" />
<span>Riot Account</span>
</PC.tab>
</PC.tabs>
<.form for={@form} phx-change="search" phx-submit="search" phx-target={@myself}>
<PC.field
required
type="select"
field={@form[:platform_id]}
options={@platform_ids}
prompt="Select platform"
/>
<PC.field
:if={@state in ["local", "summoner-api"]}
wrapper_class={[if(is_nil(@platform_id), do: "hidden")]}
required
field={@form[:search]}
placeholder="hide on bush"
phx-debounce="500"
label="Search summoner"
/>
<div
:if={@state == "account-api"}
class={[if(is_nil(@platform_id), do: "hidden", else: "flex"), "space-x-2"]}
>
<PC.field
wrapper_class="grow"
required
field={@form[:game_name]}
placeholder="Hide on bush"
label="Game name"
/>
<PC.field
wrapper_class="grow"
required
field={@form[:tag_line]}
placeholder="#KR1"
label="Tag line"
/>
</div>
</.form>
<div id={"tabpanel-local-#{@id}"} class={[if(@state == "local", do: "block", else: "hidden")]}>
<div
:if={length(@summoners) == 0 and @platform_id != nil and @search != ""}
class="mt-4 flex items-center justify-center"
>
<div class="flex flex-col items-center">
<.icon name="hero-exclamation-circle" class="w-12 h-12" />
<p>Could not find any Summoners locally.</p>
</div>
</div>
<PC.table :if={length(@summoners) > 0}>
<PC.tr>
<PC.th>Name</PC.th>
<PC.th>Riot ID</PC.th>
<PC.th>Current Player</PC.th>
<PC.th>Actions</PC.th>
</PC.tr>
<PC.tr :for={summoner <- @summoners} id={summoner.id}>
<PC.td class="flex items-center space-x-2">
<LOLC.profile_icon
assets_version={@game_version}
icon_key={summoner.profile_icon_id}
class="w-12 h-12 rounded-md overflow-hidden"
/>
<span><%= summoner.name %></span>
</PC.td>
<PC.td>
<%= summoner.riot_id %>
</PC.td>
<PC.td>
<%= if(summoner.player) do %>
<%= summoner.player.official_name %>
<% end %>
</PC.td>
<PC.td>
<PC.button size="xs" phx-click="attach" phx-target={@myself} phx-value-id={summoner.id}>
Attach
</PC.button>
</PC.td>
</PC.tr>
</PC.table>
</div>
<div
id={"tabpanel-summoner-api-#{@id}"}
class={[if(@state == "summoner-api", do: "block", else: "hidden")]}
>
<.async_result :let={request} assign={@summoner_request}>
<:loading>
<div class="flex items-center justify-center py-2">
<PC.spinner size="md" />
</div>
</:loading>
<:failed :let={_reason}>Could not find summoner name on riot api.</:failed>
<PC.table :if={is_map(request)}>
<PC.tr>
<PC.th>Name</PC.th>
<PC.th>Level</PC.th>
<PC.th>Last update</PC.th>
<PC.th>Actions</PC.th>
</PC.tr>
<PC.tr>
<PC.td class="flex items-center space-x-2">
<LOLC.profile_icon
assets_version={@game_version}
icon_key={request["profileIconId"]}
class="w-12 h-12 rounded-md overflow-hidden"
/>
<span><%= request["name"] %></span>
</PC.td>
<PC.td>
<%= request["summonerLevel"] %>
</PC.td>
<PC.td>
<%= Lor.TimeHelpers.unix_timestamp_to_datetime(request["revisionDate"]) %>
</PC.td>
<PC.td>
<PC.button size="xs" phx-click="create-and-attach-from-summoner" phx-target={@myself}>
Create and Attach
</PC.button>
</PC.td>
</PC.tr>
</PC.table>
</.async_result>
</div>
<div
id={"tabpanel-account-api-#{@id}"}
class={[if(@state == "account-api", do: "block", else: "hidden")]}
>
<.async_result :let={request} assign={@account_request}>
<:loading>
<div class="flex items-center justify-center py-2">
<PC.spinner size="md" />
</div>
</:loading>
<:failed :let={_reason}>Could not find this account on riot api.</:failed>
<PC.table :if={is_map(request)}>
<PC.tr>
<PC.th>Name</PC.th>
<PC.th>Tag line</PC.th>
<PC.th>Puuid</PC.th>
<PC.th>Actions</PC.th>
</PC.tr>
<PC.tr>
<PC.td>
<%= request["gameName"] %>
</PC.td>
<PC.td>
<%= request["tagLine"] %>
</PC.td>
<PC.td>
<%= request["puuid"] %>
</PC.td>
<PC.td>
<PC.button size="xs" phx-click="create-and-attach-from-account" phx-target={@myself}>
Create and Attach
</PC.button>
</PC.td>
</PC.tr>
</PC.table>
</.async_result>
</div>
</div>
"""
defp show_account_api(_id) do
JS.push("state", value: %{state: "account-api"})
end
end
Loading

0 comments on commit c41d082

Please sign in to comment.