Current section
Files
Jump to
Current section
Files
lib/web/components/multi_select.ex
defmodule Observer.Web.Components.MultiSelect do
@moduledoc """
Multi select box
References:
* https://www.creative-tim.com/twcomponents/component/multi-select
"""
use Phoenix.Component
alias Phoenix.LiveView.JS
attr :id, :string, required: true
attr :selected_text, :string, required: true
attr :selected, :list, required: true
attr :unselected, :list, required: true
attr :show_options, :boolean, required: true
def content(assigns) do
~H"""
<div class="w-full m flex flex-col items-center mx-auto">
<div class="w-full px-2">
<div class="flex flex-col items-center relative">
<div class="w-full ">
<div class="my-2 p-1 flex border border-gray-300 bg-white rounded ">
<div class="flex flex-auto flex-wrap">
<div class="flex text-ms font-normal items-center p-2 py-1 bg-gray-200 rounded border-gray-200 ">
{@selected_text}
</div>
<%= for item <- @selected do %>
<%= for key <- item.keys do %>
<div class={[
"flex justify-center items-center m-1 font-medium py-1 px-2 rounded-full border",
border_item_color(item.name),
bg_item_color(item.name)
]}>
<div class={[
"text-sm font-normal leading-none max-w-full flex-initial",
text_item_color(item.name)
]}>
{"#{item.name}:#{key}"}
</div>
<button
id={
String.replace(
"#{@id}-#{item.name}-#{key}-remove-item",
["@", ".", "/"],
"-"
)
}
class="flex flex-auto flex-row-reverse"
phx-click="multi-select-remove-item"
phx-value-key={key}
phx-value-item={item.name}
>
<div>
<svg
xmlns="http://www.w3.org/2000/svg"
width="100%"
height="100%"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="feather feather-x cursor-pointer hover:text-teal-400 rounded-full w-4 h-4 ml-2"
>
<line x1="18" y1="6" x2="6" y2="18"></line>
<line x1="6" y1="6" x2="18" y2="18"></line>
</svg>
</div>
</button>
</div>
<% end %>
<% end %>
<div class="flex-1">
<input
placeholder=""
phx-click="toggle-options"
class="bg-transparent p-1 px-2 appearance-none outline-none h-full w-full text-gray-800"
/>
</div>
</div>
<div class="text-gray-300 w-8 py-1 pl-2 pr-1 border-l flex items-center border-gray-200 ">
<button
id={"#{@id}-toggle-options"}
class="cursor-pointer w-6 h-6 text-gray-600 outline-none focus:outline-none"
phx-click="toggle-options"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="100%"
height="100%"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="feather feather-chevron-up w-4 h-4"
>
<polyline :if={!@show_options} points="18 15 12 9 6 15"></polyline>
<polyline :if={@show_options} points="6 9 12 15 18 9"></polyline>
</svg>
</button>
</div>
</div>
<div
:if={@show_options}
class="relative shadow top-100 bg-white z-40 lef-0 rounded max-h-select"
>
<div phx-mounted={
JS.transition(
{"first:ease-in duration-300", "first:opacity-0 first:p-0 first:h-0",
"first:opacity-100"},
time: 300
)
}>
<%= for item <- @unselected do %>
<div class="w-full flex-wrap">
<div class="flex items-start p-2">
<div class="text-sm font-bold text-black">{item.name}:</div>
</div>
<div class="flex flex-wrap">
<%= for key <- item.keys do %>
<button
id={
String.replace(
"#{@id}-#{item.name}-#{key}-add-item",
["@", ".", "/"],
"-"
)
}
class="flex justify-center items-center m-1 font-medium px-2 rounded-full text-gray-700 bg-gray-100 border border-gray-300"
phx-click="multi-select-add-item"
phx-value-key={key}
phx-value-item={item.name}
>
<div class="text-sm font-normal leading-none max-w-full flex-initial">
{key}
</div>
<div class="flex flex-auto flex-row-reverse">
<div>
<svg
xmlns="http://www.w3.org/2000/svg"
width="100%"
height="100%"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="feather feather-x cursor-pointer hover:text-teal-400 rounded-full w-4 h-4 ml-2"
>
<polyline points="20 6 9 17 4 12"></polyline>
</svg>
</div>
</div>
</button>
<% end %>
</div>
</div>
<% end %>
</div>
</div>
</div>
</div>
</div>
</div>
"""
end
def border_item_color("services"), do: "border-teal-300"
def border_item_color("apps"), do: "border-blue-400"
def border_item_color("metrics"), do: "border-orange-400"
# coveralls-ignore-start
def border_item_color(_), do: "border-gray-300"
# coveralls-ignore-stop
def bg_item_color("services"), do: "bg-teal-50"
def bg_item_color("apps"), do: "bg-blue-50"
def bg_item_color("metrics"), do: "bg-orange-50"
# coveralls-ignore-start
def bg_item_color(_), do: "bg-gray-50"
# coveralls-ignore-stop
def text_item_color("services"), do: "text-teal-700"
def text_item_color("apps"), do: "text-blue-700"
def text_item_color("metrics"), do: "text-orange-700"
# coveralls-ignore-start
def text_item_color(_), do: "text-teal-700"
# coveralls-ignore-stop
end