From 7430e3106534a2e2a784d1ebe26fb8fdf3846511 Mon Sep 17 00:00:00 2001
From: shibao <shibao@bubbletea.dev>
Date: Fri, 25 Feb 2022 21:55:27 -0500
Subject: [PATCH] update components

---
 lib/lokal_web/component/topbar.ex     | 104 -------------------------
 lib/lokal_web/components/topbar.ex    | 106 ++++++++++++++++++++++++++
 lib/lokal_web/live/live_helpers.ex    |  97 ++++++++++++++++++-----
 lib/lokal_web/live/modal_component.ex |  30 --------
 4 files changed, 182 insertions(+), 155 deletions(-)
 delete mode 100644 lib/lokal_web/component/topbar.ex
 create mode 100644 lib/lokal_web/components/topbar.ex
 delete mode 100644 lib/lokal_web/live/modal_component.ex

diff --git a/lib/lokal_web/component/topbar.ex b/lib/lokal_web/component/topbar.ex
deleted file mode 100644
index ab00340..0000000
--- a/lib/lokal_web/component/topbar.ex
+++ /dev/null
@@ -1,104 +0,0 @@
-defmodule LokalWeb.Components.Topbar do
-  @moduledoc """
-  Phoenix.Component for rendering an interactive topbar
-  Assign
-  """
-
-  use LokalWeb, :component
-  alias LokalWeb.PageLive
-
-  def topbar(assigns) do
-    assigns =
-      %{results: [], title_content: nil, current_user: nil, flash: nil}
-      |> Map.merge(assigns)
-
-    ~H"""
-    <header class="mb-8 px-8 py-4 w-full bg-primary-400">
-      <nav role="navigation">
-        <div class="flex flex-row justify-between items-center space-x-4">
-          <div class="flex flex-row justify-start items-center space-x-2">
-            <%= link to: Routes.live_path(LokalWeb.Endpoint, PageLive) do %>
-              <h1 class="leading-5 text-xl text-white hover:underline">
-                Lokal
-              </h1>
-            <% end %>
-            <%= if @title_content do %>
-              <span>|</span>
-              <%= render_slot(@title_content) %>
-            <% end %>
-          </div>
-          <ul class="flex flex-row flex-wrap justify-center items-center
-            text-lg space-x-4 text-lg text-white">
-            <form phx-change="suggest" phx-submit="search">
-              <input
-                type="text"
-                name="q"
-                class="input input-primary"
-                placeholder="Search"
-                list="results"
-                autocomplete="off"
-              />
-              <datalist id="results">
-                <%= for {app, _vsn} <- @results do %>
-                  <option value={app}>
-                    "> <%= app %>
-                  </option>
-                <% end %>
-              </datalist>
-            </form>
-            <%= if @current_user do %>
-              <li>
-                <%= @current_user.email %>
-              </li>
-              <li>
-                <%= link("Settings",
-                  class: "hover:underline",
-                  to: Routes.user_settings_path(LokalWeb.Endpoint, :edit)
-                ) %>
-              </li>
-              <li>
-                <%= link("Log out",
-                  class: "hover:underline",
-                  to: Routes.user_session_path(LokalWeb.Endpoint, :delete),
-                  method: :delete
-                ) %>
-              </li>
-              <%= if function_exported?(Routes, :live_dashboard_path, 2) do %>
-                <li>
-                  <%= link("LiveDashboard",
-                    class: "hover:underline",
-                    to: Routes.live_dashboard_path(LokalWeb.Endpoint, :home)
-                  ) %>
-                </li>
-              <% end %>
-            <% else %>
-              <li>
-                <%= link("Register",
-                  class: "hover:underline",
-                  to: Routes.user_registration_path(LokalWeb.Endpoint, :new)
-                ) %>
-              </li>
-              <li>
-                <%= link("Log in",
-                  class: "hover:underline",
-                  to: Routes.user_session_path(LokalWeb.Endpoint, :new)
-                ) %>
-              </li>
-            <% end %>
-          </ul>
-        </div>
-      </nav>
-      <%= if @flash && @flash |> Map.has_key?(:info) do %>
-        <p class="alert alert-info" role="alert" phx-click="lv:clear-flash" phx-value-key="info">
-          <%= live_flash(@flash, :info) %>
-        </p>
-      <% end %>
-      <%= if @flash && @flash |> Map.has_key?(:error) do %>
-        <p class="alert alert-danger" role="alert" phx-click="lv:clear-flash" phx-value-key="error">
-          <%= live_flash(@flash, :error) %>
-        </p>
-      <% end %>
-    </header>
-    """
-  end
-end
diff --git a/lib/lokal_web/components/topbar.ex b/lib/lokal_web/components/topbar.ex
new file mode 100644
index 0000000..4a0da9a
--- /dev/null
+++ b/lib/lokal_web/components/topbar.ex
@@ -0,0 +1,106 @@
+defmodule LokalWeb.Components.Topbar do
+  @moduledoc """
+  Component that renders a topbar with user functions/links
+  """
+
+  use LokalWeb, :component
+
+  alias Lokal.Accounts
+  alias LokalWeb.{Endpoint, PageLive}
+
+  def topbar(assigns) do
+    assigns =
+      %{results: [], title_content: nil, flash: nil, current_user: nil} |> Map.merge(assigns)
+
+    ~H"""
+    <nav role="navigation" class="mb-8 px-8 py-4 w-full bg-primary-400">
+      <div class="flex flex-col sm:flex-row justify-between items-center">
+        <div class="mb-4 sm:mb-0 sm:mr-8 flex flex-row justify-start items-center space-x-2">
+          <%= live_redirect("Lokal",
+            to: Routes.live_path(Endpoint, PageLive),
+            class: "mx-2 my-1 leading-5 text-xl text-white hover:underline"
+          ) %>
+
+          <%= if @title_content do %>
+            <span class="mx-2 my-1">
+              |
+            </span>
+            <%= @title_content %>
+          <% end %>
+        </div>
+
+        <hr class="mb-2 sm:hidden hr-light" />
+
+        <ul
+          class="flex flex-row flex-wrap justify-center items-center
+          text-lg text-white text-ellipsis"
+        >
+          <%= if @current_user do %>
+            <form phx-change="suggest" phx-submit="search">
+              <input
+                type="text"
+                name="q"
+                class="input input-primary"
+                placeholder="Search"
+                list="results"
+                autocomplete="off"
+              />
+              <datalist id="results">
+                <%= for {app, _vsn} <- @results do %>
+                  <option value={app}>
+                    "> <%= app %>
+                  </option>
+                <% end %>
+              </datalist>
+            </form>
+            <%= if @current_user.role == :admin do %>
+              <li class="mx-2 my-1">
+                <%= live_redirect(gettext("Invites"),
+                  to: Routes.invite_index_path(Endpoint, :index),
+                  class: "text-primary-600 text-white hover:underline"
+                ) %>
+              </li>
+            <% end %>
+            <li class="mx-2 my-1">
+              <%= live_redirect(@current_user.email,
+                to: Routes.user_settings_path(Endpoint, :edit),
+                class: "text-primary-600 text-white hover:underline truncate"
+              ) %>
+            </li>
+            <li class="mx-2 my-1">
+              <%= link to: Routes.user_session_path(Endpoint, :delete),
+                   method: :delete,
+                   data: [confirm: dgettext("prompts", "Are you sure you want to log out?")] do %>
+                <i class="fas fa-sign-out-alt"></i>
+              <% end %>
+            </li>
+            <%= if @current_user.role == :admin and function_exported?(Routes, :live_dashboard_path, 2) do %>
+              <li class="mx-2 my-1">
+                <%= live_redirect to: Routes.live_dashboard_path(Endpoint, :home),
+                  class: "text-primary-600 text-white hover:underline" do %>
+                  <i class="fas fa-tachometer-alt"></i>
+                <% end %>
+              </li>
+            <% end %>
+          <% else %>
+            <%= if Accounts.allow_registration?() do %>
+              <li class="mx-2 my-1">
+                <%= live_redirect(dgettext("actions", "Register"),
+                  to: Routes.user_registration_path(Endpoint, :new),
+                  class: "text-primary-600 text-white hover:underline truncate"
+                ) %>
+              </li>
+            <% end %>
+            <li class="mx-2 my-1">
+              <%= live_redirect(dgettext("actions", "Log in"),
+                to: Routes.user_session_path(Endpoint, :new),
+                class: "text-primary-600 text-white hover:underline truncate"
+              ) %>
+            </li>
+          <% end %>
+        </ul>
+      </div>
+    </nav>
+    """
+  end
+end
diff --git a/lib/lokal_web/live/live_helpers.ex b/lib/lokal_web/live/live_helpers.ex
index eee3e9b..a851eea 100644
--- a/lib/lokal_web/live/live_helpers.ex
+++ b/lib/lokal_web/live/live_helpers.ex
@@ -4,28 +4,9 @@ defmodule LokalWeb.LiveHelpers do
   """
 
   import Phoenix.LiveView.Helpers
-  import Phoenix.LiveView, only: [assign_new: 3]
+  import Phoenix.LiveView
   alias Lokal.Accounts
-
-  @doc """
-  Renders a component inside the `LokalWeb.ModalComponent` component.
-
-  The rendered modal receives a `:return_to` option to properly update
-  the URL when the modal is closed.
-
-  ## Examples
-
-      <%= live_modal LokalWeb.TagLive.FormComponent,
-        id: @tag.id || :new,
-        action: @live_action,
-        tag: @tag,
-        return_to: Routes.tag_index_path(@socket, :index) %>
-  """
-  def live_modal(component, opts) do
-    path = Keyword.fetch!(opts, :return_to)
-    modal_opts = [id: :modal, return_to: path, component: component, opts: opts]
-    live_component(LokalWeb.ModalComponent, modal_opts)
-  end
+  alias Phoenix.LiveView.JS
 
   def assign_defaults(socket, %{"user_token" => user_token} = _session) do
     socket
@@ -37,4 +18,78 @@ defmodule LokalWeb.LiveHelpers do
   def assign_defaults(socket, _session) do
     socket
   end
+
+  @doc """
+  Renders a live component inside a modal.
+
+  The rendered modal receives a `:return_to` option to properly update
+  the URL when the modal is closed.
+
+  ## Examples
+
+      <.modal return_to={Routes.<%= schema.singular %>_index_path(Endpoint, :index)}>
+        <.live_component
+          module={<%= inspect context.web_module %>.<%= inspect Module.concat(schema.web_namespace, schema.alias) %>Live.FormComponent}
+          id={@<%= schema.singular %>.id || :new}
+          title={@page_title}
+          action={@live_action}
+          return_to={Routes.<%= schema.singular %>_index_path(Endpoint, :index)}
+          <%= schema.singular %>: @<%= schema.singular %>
+        />
+      </.modal>
+  """
+  def modal(assigns) do
+    ~H"""
+    <%= live_patch to: @return_to,
+      id: "modal-bg",
+      class:
+        "fade-in fixed z-10 left-0 top-0
+         w-full h-full overflow-hidden
+         p-8 flex flex-col justify-center items-center cursor-auto",
+      style: "background-color: rgba(0,0,0,0.4);",
+      phx_remove: hide_modal()
+    do %>
+      <span class="hidden"></span>
+    <% end %>
+
+    <div
+      id="modal"
+      class="fixed z-10 left-0 top-0 pointer-events-none
+        w-full h-full overflow-hidden
+        p-4 sm:p-8 flex flex-col justify-center items-center"
+    >
+      <div
+        id="modal-content"
+        class="fade-in-scale w-full max-w-3xl relative
+        pointer-events-auto overflow-hidden
+        px-8 py-4 sm:py-8 flex flex-col justify-center items-center
+        flex flex-col justify-start items-center
+        bg-white border-2 rounded-lg"
+      >
+        <%= live_patch to: @return_to,
+                   id: "close",
+                   class:
+                     "absolute top-8 right-10
+                      text-gray-500 hover:text-gray-800
+                      transition-all duration-500 ease-in-out",
+                   phx_remove: hide_modal() do %>
+          <i class="fa-fw fa-lg fas fa-times"></i>
+        <% end %>
+
+        <div
+          class="overflow-x-hidden overflow-y-auto w-full p-8 flex flex-col space-y-4 justify-start items-center"
+        >
+          <%= render_slot(@inner_block) %>
+        </div>
+      </div>
+    </div>
+    """
+  end
+
+  def hide_modal(js \\ %JS{}) do
+    js
+    |> JS.hide(to: "#modal", transition: "fade-out")
+    |> JS.hide(to: "#modal-bg", transition: "fade-out")
+    |> JS.hide(to: "#modal-content", transition: "fade-out-scale")
+  end
 end
diff --git a/lib/lokal_web/live/modal_component.ex b/lib/lokal_web/live/modal_component.ex
deleted file mode 100644
index b55e870..0000000
--- a/lib/lokal_web/live/modal_component.ex
+++ /dev/null
@@ -1,30 +0,0 @@
-defmodule LokalWeb.ModalComponent do
-  @moduledoc """
-  Component that provides a floating modal
-  """
-
-  use LokalWeb, :live_component
-
-  @impl true
-  def render(assigns) do
-    ~L"""
-    <div id="<%= @id %>" class="phx-modal"
-      phx-capture-click="close"
-      phx-window-keydown="close"
-      phx-key="escape"
-      phx-target="#<%= @id %>"
-      phx-page-loading>
-
-      <div class="phx-modal-content">
-        <%= live_patch raw("&times;"), to: @return_to, class: "phx-modal-close" %>
-        <%= live_component @component, @opts %>
-      </div>
-    </div>
-    """
-  end
-
-  @impl true
-  def handle_event("close", _, socket) do
-    {:noreply, push_patch(socket, to: socket.assigns.return_to)}
-  end
-end