add copy to clipboard for invites

lib/cannery_web/components/invite_card.ex

@@ -25,8 +25,14 @@ defmodule CanneryWeb.Components.InviteCard do
         </h2>
       <% end %>
 
-      <code class="text-xs px-4 py-2 rounded-lg text-gray-100 bg-primary-800"><%= Routes.user_registration_url(Endpoint, :new, invite: @invite.token) %>
-      </code>
+      <div class="flex flex-row justify-center items-center space-x-4">
+        <code id={"code-#{@invite.id}"} class="text-xs px-4 py-2 rounded-lg text-gray-100 bg-primary-800"><%= Routes.user_registration_url(Endpoint, :new, invite: @invite.token) %>
+        </code>
+
+        <%= if @code_actions do %>
+          <%= render_slot(@code_actions) %>
+        <% end %>
+      </div>
 
       <%= if @inner_block do %>
         <div class="flex space-x-4 justify-center items-center">

lib/cannery_web/live/invite_live/index.ex

@@ -7,6 +7,7 @@ defmodule CanneryWeb.InviteLive.Index do
   import CanneryWeb.Components.{InviteCard, UserCard}
   alias Cannery.{Accounts, Invites, Invites.Invite}
   alias CanneryWeb.{Endpoint, HomeLive}
+  alias Phoenix.LiveView.JS
 
   @impl true
   def mount(_params, session, socket) do
@@ -75,7 +76,11 @@ defmodule CanneryWeb.InviteLive.Index do
     {:noreply, socket}
   end
 
-  def handle_event("enable", %{"id" => id}, %{assigns: %{current_user: current_user}} = socket) do
+  def handle_event(
+        "enable_invite",
+        %{"id" => id},
+        %{assigns: %{current_user: current_user}} = socket
+      ) do
     socket =
       Invites.get_invite!(id, current_user)
       |> Invites.update_invite(%{"uses_left" => nil, "disabled_at" => nil}, current_user)
@@ -91,7 +96,11 @@ defmodule CanneryWeb.InviteLive.Index do
     {:noreply, socket}
   end
 
-  def handle_event("disable", %{"id" => id}, %{assigns: %{current_user: current_user}} = socket) do
+  def handle_event(
+        "disable_invite",
+        %{"id" => id},
+        %{assigns: %{current_user: current_user}} = socket
+      ) do
     now = NaiveDateTime.utc_now() |> NaiveDateTime.truncate(:second)
 
     socket =
@@ -109,6 +118,12 @@ defmodule CanneryWeb.InviteLive.Index do
     {:noreply, socket}
   end
 
+  @impl true
+  def handle_event("copy_to_clipboard", _, socket) do
+    prompt = dgettext("prompts", "Copied to clipboard")
+    {:noreply, socket |> put_flash(:info, prompt)}
+  end
+
   @impl true
   def handle_event(
         "delete_user",
@@ -123,16 +138,16 @@ defmodule CanneryWeb.InviteLive.Index do
   end
 
   defp display_invites(%{assigns: %{current_user: current_user}} = socket) do
-    invites = Invites.list_invites(current_user)
-
+    invites = Invites.list_invites(current_user) |> Enum.sort_by(fn %{name: name} -> name end)
     all_users = Accounts.list_all_users_by_role(current_user)
 
     admins =
       all_users
       |> Map.get(:admin, [])
       |> Enum.reject(fn %{id: user_id} -> user_id == current_user.id end)
+      |> Enum.sort_by(fn %{email: email} -> email end)
 
-    users = all_users |> Map.get(:user, [])
+    users = all_users |> Map.get(:user, []) |> Enum.sort_by(fn %{email: email} -> email end)
     socket |> assign(invites: invites, admins: admins, users: users)
   end
 end

lib/cannery_web/live/invite_live/index.html.heex

@@ -22,6 +22,18 @@
   <div class="w-full flex flex-row flex-wrap justify-center items-center">
     <%= for invite <- @invites do %>
       <.invite_card invite={invite}>
+        <:code_actions>
+          <form phx-submit={JS.dispatch("cannery:clipcopy", to: "#code-#{invite.id}")}>
+            <button
+              type="submit"
+              class="btn btn-primary"
+              phx-click="copy_to_clipboard"
+              phx-value-invite_id={"#code-#{invite.id}"}
+            >
+              <%= dgettext("actions", "Copy to clipboard") %>
+            </button>
+          </form>
+        </:code_actions>
         <%= live_patch to: Routes.invite_index_path(Endpoint, :edit, invite),
                    class: "text-primary-500 link" do %>
           <i class="fa-fw fa-lg fas fa-edit"></i>