Packages
moon
2.78.4
2.90.5
retired
2.90.4
2.90.3
2.90.2
2.90.1
2.90.0
2.89.4
2.89.1
2.89.0
2.88.0
2.87.11
2.87.10
2.87.9
2.87.8
2.87.7
2.87.6
2.87.5
2.87.4
2.87.3
2.87.2
2.87.1
2.87.0
2.86.1
2.86.0
2.85.1
2.85.0
2.84.0
2.83.0
2.82.0
2.81.4
2.81.3
2.81.2
2.81.1
2.81.0
2.80.2
2.80.1
2.80.0
2.79.13
2.79.12
2.79.11
2.79.10
2.79.9
2.79.8
2.79.7
2.79.6
2.79.5
2.79.4
2.79.3
2.79.2
2.79.1
2.79.0
2.78.4
2.78.3
2.78.2
2.78.1
2.78.0
2.77.0
2.76.5
2.76.4
2.76.3
2.76.2
2.76.1
2.76.0
2.75.0
2.74.1
2.74.0
2.73.8
2.73.7
2.73.6
2.73.5
2.73.4
2.73.3
2.73.2
2.73.1
2.73.0
2.72.5
2.72.4
2.72.3
2.72.2
2.72.1
2.72.0
2.71.1
2.71.0
2.70.0
2.69.2
2.69.1
2.69.0
2.68.11
2.68.10
Components-based design system written in elixir
Current section
Files
Jump to
Current section
Files
lib/moon_web/components/show_room_page/editable_table.ex
defmodule MoonWeb.Components.ShowRoomPage.EditableTable do
@moduledoc false
use MoonWeb, :stateful_component
alias Moon.Design.Table
alias Moon.Design.Table.Column
alias Moon.Design.Dropdown
alias Moon.Parts.Status
alias Moon.Parts.Button
alias MoonIcons.Helpers.Icons
prop(editable_menu_items, :list, default: [])
prop(change_name, :event)
prop(name, :string)
prop(add_row, :event)
prop(value, :any)
prop(active, :boolean, default: false)
def render(assigns) do
~F"""
<div class="m-2 bg-goku rounded-moon-s-lg">
<Table
items={editable_menu_item <- @editable_menu_items}
{=@id}
class="bg-goku !border-collapse pb-4 rounded-moon-s-lg"
header_row_class="text-left first:rounded-l-moon-s-none last:rounded-r-moon-s-none"
row_size="xl"
selected_bg="bg-heles"
>
<Column
name="id"
label="Icon"
class="text-moon-18 text-bulma py-4 px-4 first:rounded-l-moon-s-none last:rounded-r-moon-s-none border-y-[0.5px] border-beerus font-dm-sans"
width="text-moon-16 text-trunks py-4 px-4 font-normal h-16"
>
<Dropdown
id={"menu-icons-#{editable_menu_item.id}"}
side_values={num: editable_menu_item.id, field: :icon}
on_change={@change_name}
value={editable_menu_item.icon}
>
<Dropdown.Trigger>
{editable_menu_item.icon}
</Dropdown.Trigger>
<Dropdown.Options
class="w-fit h-96 overflow-auto"
position="bottom-start"
option_module={Moon.Design.Dropdown.IconOption}
titles={generate_dropdown_options()}
/>
</Dropdown>
</Column>
<Column
name="name"
label="Name"
class="text-moon-18 text-bulma py-4 px-4 first:rounded-l-moon-s-none last:rounded-r-moon-s-none border-y-[0.5px] border-beerus font-dm-sans"
width="text-moon-16 text-trunks py-4 px-4 font-normal h-16"
>
<Table.Input
value={editable_menu_item.name}
side_values={num: editable_menu_item.id, field: :name}
on_keyup={@change_name}
/>
</Column>
<Column
name="created_at"
label="Link"
class="text-moon-18 text-bulma py-4 px-4 first:rounded-l-moon-s-none last:rounded-r-moon-s-none border-y-[0.5px] border-beerus font-dm-sans"
width="text-moon-16 text-trunks py-4 px-4 font-normal h-16 hidden md:table-cell"
>
<Table.Input
value={editable_menu_item.link}
side_values={num: editable_menu_item.id, field: :link}
on_keyup={@change_name}
/>
</Column>
<Column
name="created_at"
label="Status"
class="text-moon-18 text-bulma py-4 px-4 first:rounded-l-moon-s-none last:rounded-r-moon-s-none border-y-[0.5px] border-beerus font-dm-sans"
width="text-moon-16 text-trunks py-4 px-4 font-normal h-16"
>
<Status
side_values={num: editable_menu_item.id, field: :status}
active={editable_menu_item.active}
/>
</Column>
</Table>
<Button.White class="w-fit ms-4 my-4" on_click={@add_row}>+ Add menu item</Button.White>
</div>
"""
end
def generate_dropdown_options() do
icon_names = Icons.list_other()
Enum.map(icon_names, fn icon_name ->
%{icon: icon_name, name: icon_name}
end)
end
end