forked from shibao/cannery
		
	use core components
This commit is contained in:
		@@ -45,7 +45,8 @@
 | 
			
		||||
  <div class="w-full flex flex-col sm:flex-row justify-center items-center space-y-4 sm:space-y-0 sm:space-x-4 max-w-xl">
 | 
			
		||||
    <.form
 | 
			
		||||
      :let={f}
 | 
			
		||||
      for={:search}
 | 
			
		||||
      for={%{}}
 | 
			
		||||
      as={:search}
 | 
			
		||||
      phx-change="search"
 | 
			
		||||
      phx-submit="search"
 | 
			
		||||
      class="grow self-stretch flex flex-col items-stretch"
 | 
			
		||||
 
 | 
			
		||||
@@ -4,7 +4,6 @@ defmodule CanneryWeb.AmmoGroupLive.Show do
 | 
			
		||||
  """
 | 
			
		||||
 | 
			
		||||
  use CanneryWeb, :live_view
 | 
			
		||||
  import CanneryWeb.Components.ContainerCard
 | 
			
		||||
  alias Cannery.{ActivityLog, ActivityLog.ShotGroup, Ammo, Ammo.AmmoGroup, Repo}
 | 
			
		||||
  alias CanneryWeb.Endpoint
 | 
			
		||||
  alias Phoenix.LiveView.Socket
 | 
			
		||||
 
 | 
			
		||||
@@ -20,7 +20,8 @@
 | 
			
		||||
    <div class="w-full flex flex-col sm:flex-row justify-center items-center space-y-4 sm:space-y-0 sm:space-x-4 max-w-xl">
 | 
			
		||||
      <.form
 | 
			
		||||
        :let={f}
 | 
			
		||||
        for={:search}
 | 
			
		||||
        for={%{}}
 | 
			
		||||
        as={:search}
 | 
			
		||||
        phx-change="search"
 | 
			
		||||
        phx-submit="search"
 | 
			
		||||
        class="grow self-stretch flex flex-col items-stretch"
 | 
			
		||||
 
 | 
			
		||||
@@ -4,7 +4,6 @@ defmodule CanneryWeb.AmmoTypeLive.Show do
 | 
			
		||||
  """
 | 
			
		||||
 | 
			
		||||
  use CanneryWeb, :live_view
 | 
			
		||||
  import CanneryWeb.Components.AmmoGroupCard
 | 
			
		||||
  alias Cannery.{Ammo, Ammo.AmmoType}
 | 
			
		||||
  alias CanneryWeb.Endpoint
 | 
			
		||||
 | 
			
		||||
 
 | 
			
		||||
@@ -36,7 +36,8 @@
 | 
			
		||||
 | 
			
		||||
    <.form
 | 
			
		||||
      :let={f}
 | 
			
		||||
      for={:tag}
 | 
			
		||||
      for={%{}}
 | 
			
		||||
      as={:tag}
 | 
			
		||||
      id="add-tag-to-container-form"
 | 
			
		||||
      class="flex flex-col space-y-4 sm:space-y-0 sm:grid sm:grid-cols-3 sm:gap-4 justify-center items-center"
 | 
			
		||||
      phx-target={@myself}
 | 
			
		||||
 
 | 
			
		||||
@@ -4,7 +4,6 @@ defmodule CanneryWeb.ContainerLive.Index do
 | 
			
		||||
  """
 | 
			
		||||
 | 
			
		||||
  use CanneryWeb, :live_view
 | 
			
		||||
  import CanneryWeb.Components.ContainerCard
 | 
			
		||||
  alias Cannery.{Containers, Containers.Container, Repo}
 | 
			
		||||
  alias Ecto.Changeset
 | 
			
		||||
 | 
			
		||||
 
 | 
			
		||||
@@ -20,7 +20,8 @@
 | 
			
		||||
    <div class="w-full flex flex-col sm:flex-row justify-center items-center space-y-4 sm:space-y-0 sm:space-x-4 max-w-xl">
 | 
			
		||||
      <.form
 | 
			
		||||
        :let={f}
 | 
			
		||||
        for={:search}
 | 
			
		||||
        for={%{}}
 | 
			
		||||
        as={:search}
 | 
			
		||||
        phx-change="search"
 | 
			
		||||
        phx-submit="search"
 | 
			
		||||
        class="grow self-stretch flex flex-col items-stretch"
 | 
			
		||||
 
 | 
			
		||||
@@ -4,7 +4,6 @@ defmodule CanneryWeb.ContainerLive.Show do
 | 
			
		||||
  """
 | 
			
		||||
 | 
			
		||||
  use CanneryWeb, :live_view
 | 
			
		||||
  import CanneryWeb.Components.{AmmoGroupCard, TagCard}
 | 
			
		||||
  alias Cannery.{Accounts.User, Ammo, Containers, Containers.Container, Repo, Tags}
 | 
			
		||||
  alias CanneryWeb.Endpoint
 | 
			
		||||
  alias Ecto.Changeset
 | 
			
		||||
 
 | 
			
		||||
@@ -4,7 +4,6 @@ defmodule CanneryWeb.InviteLive.Index do
 | 
			
		||||
  """
 | 
			
		||||
 | 
			
		||||
  use CanneryWeb, :live_view
 | 
			
		||||
  import CanneryWeb.Components.{InviteCard, UserCard}
 | 
			
		||||
  alias Cannery.Accounts
 | 
			
		||||
  alias Cannery.Accounts.{Invite, Invites}
 | 
			
		||||
  alias CanneryWeb.HomeLive
 | 
			
		||||
 
 | 
			
		||||
@@ -1,136 +0,0 @@
 | 
			
		||||
defmodule CanneryWeb.LiveHelpers do
 | 
			
		||||
  @moduledoc """
 | 
			
		||||
  Contains common helper functions for liveviews
 | 
			
		||||
  """
 | 
			
		||||
 | 
			
		||||
  use Phoenix.Component
 | 
			
		||||
  alias Phoenix.LiveView.JS
 | 
			
		||||
 | 
			
		||||
  attr :return_to, :string, required: true
 | 
			
		||||
  slot(:inner_block)
 | 
			
		||||
 | 
			
		||||
  @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"""
 | 
			
		||||
    <.link
 | 
			
		||||
      patch={@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()}
 | 
			
		||||
    >
 | 
			
		||||
      <span class="hidden"></span>
 | 
			
		||||
    </.link>
 | 
			
		||||
 | 
			
		||||
    <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-start items-center
 | 
			
		||||
          bg-white border-2 rounded-lg"
 | 
			
		||||
      >
 | 
			
		||||
        <.link
 | 
			
		||||
          patch={@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()}
 | 
			
		||||
        >
 | 
			
		||||
          <i class="fa-fw fa-lg fas fa-times"></i>
 | 
			
		||||
        </.link>
 | 
			
		||||
 | 
			
		||||
        <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
 | 
			
		||||
 | 
			
		||||
  defp 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
 | 
			
		||||
 | 
			
		||||
  attr :action, :string, required: true
 | 
			
		||||
  attr :value, :boolean, required: true
 | 
			
		||||
  attr :id, :string
 | 
			
		||||
  slot(:inner_block)
 | 
			
		||||
 | 
			
		||||
  @doc """
 | 
			
		||||
  A toggle button element that can be directed to a liveview or a
 | 
			
		||||
  live_component's `handle_event/3`.
 | 
			
		||||
 | 
			
		||||
  ## Examples
 | 
			
		||||
 | 
			
		||||
  <.toggle_button action="my_liveview_action" value={@some_value}>
 | 
			
		||||
    <span>Toggle me!</span>
 | 
			
		||||
  </.toggle_button>
 | 
			
		||||
  <.toggle_button action="my_live_component_action" target={@myself} value={@some_value}>
 | 
			
		||||
    <span>Whatever you want</span>
 | 
			
		||||
  </.toggle_button>
 | 
			
		||||
  """
 | 
			
		||||
  def toggle_button(assigns) do
 | 
			
		||||
    assigns = assigns |> assign_new(:id, fn -> assigns.action end)
 | 
			
		||||
 | 
			
		||||
    ~H"""
 | 
			
		||||
    <label for={@id} class="inline-flex relative items-center cursor-pointer">
 | 
			
		||||
      <input
 | 
			
		||||
        id={@id}
 | 
			
		||||
        type="checkbox"
 | 
			
		||||
        value={@value}
 | 
			
		||||
        checked={@value}
 | 
			
		||||
        class="sr-only peer"
 | 
			
		||||
        aria-labelledby={"#{@id}-label"}
 | 
			
		||||
        {
 | 
			
		||||
          if assigns |> Map.has_key?(:target),
 | 
			
		||||
            do: %{"phx-click": @action, "phx-value-value": @value, "phx-target": @target},
 | 
			
		||||
            else: %{"phx-click": @action, "phx-value-value": @value}
 | 
			
		||||
        }
 | 
			
		||||
      />
 | 
			
		||||
      <div class="w-11 h-6 bg-gray-300 rounded-full peer
 | 
			
		||||
        peer-focus:ring-4 peer-focus:ring-teal-300 dark:peer-focus:ring-teal-800
 | 
			
		||||
        peer-checked:bg-gray-600
 | 
			
		||||
        peer-checked:after:translate-x-full peer-checked:after:border-white
 | 
			
		||||
        after:content-[''] after:absolute after:top-1 after:left-[2px] after:bg-white after:border-gray-300
 | 
			
		||||
        after:border after:rounded-full after:h-5 after:w-5
 | 
			
		||||
        after:transition-all after:duration-250 after:ease-in-out
 | 
			
		||||
        transition-colors duration-250 ease-in-out">
 | 
			
		||||
      </div>
 | 
			
		||||
      <span id={"#{@id}-label"} class="ml-3 text-sm font-medium text-gray-900 dark:text-gray-300">
 | 
			
		||||
        <%= render_slot(@inner_block) %>
 | 
			
		||||
      </span>
 | 
			
		||||
    </label>
 | 
			
		||||
    """
 | 
			
		||||
  end
 | 
			
		||||
end
 | 
			
		||||
@@ -4,7 +4,6 @@ defmodule CanneryWeb.RangeLive.Index do
 | 
			
		||||
  """
 | 
			
		||||
 | 
			
		||||
  use CanneryWeb, :live_view
 | 
			
		||||
  import CanneryWeb.Components.AmmoGroupCard
 | 
			
		||||
  alias Cannery.{ActivityLog, ActivityLog.ShotGroup, Ammo, Repo}
 | 
			
		||||
  alias CanneryWeb.Endpoint
 | 
			
		||||
  alias Phoenix.LiveView.Socket
 | 
			
		||||
 
 | 
			
		||||
@@ -70,7 +70,8 @@
 | 
			
		||||
    <div class="w-full flex flex-col sm:flex-row justify-center items-center space-y-4 sm:space-y-0 sm:space-x-4 max-w-xl">
 | 
			
		||||
      <.form
 | 
			
		||||
        :let={f}
 | 
			
		||||
        for={:search}
 | 
			
		||||
        for={%{}}
 | 
			
		||||
        as={:search}
 | 
			
		||||
        phx-change="search"
 | 
			
		||||
        phx-submit="search"
 | 
			
		||||
        class="grow self-stretch flex flex-col items-stretch"
 | 
			
		||||
 
 | 
			
		||||
@@ -4,7 +4,6 @@ defmodule CanneryWeb.TagLive.Index do
 | 
			
		||||
  """
 | 
			
		||||
 | 
			
		||||
  use CanneryWeb, :live_view
 | 
			
		||||
  import CanneryWeb.Components.TagCard
 | 
			
		||||
  alias Cannery.{Tags, Tags.Tag}
 | 
			
		||||
  alias CanneryWeb.ViewHelpers
 | 
			
		||||
 | 
			
		||||
 
 | 
			
		||||
@@ -23,7 +23,8 @@
 | 
			
		||||
  <div class="w-full flex flex-col sm:flex-row justify-center items-center space-y-4 sm:space-y-0 sm:space-x-4 max-w-xl">
 | 
			
		||||
    <.form
 | 
			
		||||
      :let={f}
 | 
			
		||||
      for={:search}
 | 
			
		||||
      for={%{}}
 | 
			
		||||
      as={:search}
 | 
			
		||||
      phx-change="search"
 | 
			
		||||
      phx-submit="search"
 | 
			
		||||
      class="grow self-stretch flex flex-col items-stretch"
 | 
			
		||||
 
 | 
			
		||||
		Reference in New Issue
	
	Block a user