From c41d082ff80fdd761902ce122a5e10ad6834d76b Mon Sep 17 00:00:00 2001
From: mrdotb <hello@mrdotb.com>
Date: Thu, 21 Mar 2024 11:22:13 +0100
Subject: [PATCH] Summoner form fix search bug Improve ux and error message

---
 .../admin_live/summoner_form_component.ex     | 278 +++---------------
 .../summoner_form_component.html.heex         | 244 +++++++++++++++
 2 files changed, 279 insertions(+), 243 deletions(-)
 create mode 100644 lib/lor_web/live/admin_live/summoner_form_component.html.heex

diff --git a/lib/lor_web/live/admin_live/summoner_form_component.ex b/lib/lor_web/live/admin_live/summoner_form_component.ex
index 39ec106..41bfc7e 100644
--- a/lib/lor_web/live/admin_live/summoner_form_component.ex
+++ b/lib/lor_web/live/admin_live/summoner_form_component.ex
@@ -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, "")
@@ -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"])
@@ -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")
@@ -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")
@@ -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
diff --git a/lib/lor_web/live/admin_live/summoner_form_component.html.heex b/lib/lor_web/live/admin_live/summoner_form_component.html.heex
new file mode 100644
index 0000000..5b19143
--- /dev/null
+++ b/lib/lor_web/live/admin_live/summoner_form_component.html.heex
@@ -0,0 +1,244 @@
+<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>
+
+  <div class="space-y-4">
+    <div>
+      <.form for={@platform_form} phx-change="change-platform" phx-target={@myself}>
+        <PC.field
+          required
+          type="select"
+          field={@platform_form[:platform_id]}
+          options={@platform_ids}
+          prompt="Select platform"
+        />
+      </.form>
+
+      <.form for={@form} phx-change="validate" phx-submit="search" phx-target={@myself}>
+        <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>
+
+        <PC.button
+          class={[if(is_nil(@platform_id), do: "hidden", else: "flex")]}
+          type="submit"
+          label="Search"
+        />
+      </.form>
+    </div>
+
+    <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}>
+          <div class="flex flex-col items-center">
+            <.icon name="hero-exclamation-circle" class="w-12 h-12" />
+            <p>Could not find summoner name on riot api.</p>
+          </div>
+        </: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}>
+          <div class="flex flex-col items-center">
+            <.icon name="hero-exclamation-circle" class="w-12 h-12" />
+            <p>Could not find this account on riot api.</p>
+          </div>
+        </: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>
+</div>