Packages
moon
2.76.2
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/examples/parts/modal_example/with_form.ex
defmodule MoonWeb.Examples.Parts.ModalExample.WithForm do
@moduledoc false
use Moon.StatefulComponent
use MoonWeb, :example
alias Moon.Parts.Modal
alias Moon.Design.Button
alias Moon.Design.Form
alias MoonWeb.Schema.Dates
prop(is_open, :boolean, default: false)
data(changeset, :any)
def render(assigns) do
~F"""
<div>
<Button on_click="open">Open</Button>
<Modal id="custom-date-selector" {=@is_open}>
<Form
id={"#{assigns.id}-form"}
for={@changeset}
change="update_selected"
target={@myself}
submit="apply"
>
<Form.Field label="Start date" field={:date_from} class="flex flex-col gap-2">
<Form.Input size="lg" type="date" class="text-trunks" />
</Form.Field>
<Form.Field label="End date" field={:date_to} class="flex flex-col gap-2">
<Form.Input size="lg" type="date" class="text-trunks" />
</Form.Field>
<Button type="submit" class="rounded-full">Apply</Button>
</Form>
</Modal>
</div>
"""
end
def mount(socket) do
changeset = Dates.create_changeset(%{})
socket = assign(socket, changeset: changeset)
{:ok, socket}
end
def handle_event("close", _params, socket) do
# Moon.Design.Modal.close("custom-date-selector")
{:noreply, assign(socket, is_open: false)}
end
def handle_event("open", _params, socket) do
# Moon.Design.Modal.open("custom-date-selector")
{:noreply, assign(socket, is_open: true)}
end
def handle_event("update_selected", %{"dates" => params}, socket) do
changeset = Dates.create_changeset(params)
{:noreply, assign(socket, changeset: changeset)}
end
def handle_event("apply", _params, socket) do
changeset = Map.merge(socket.assigns.changeset, %{action: :insert})
socket =
if changeset.valid? do
# params = %{value: "custom", dates: Ecto.Changeset.apply_changes(changeset)}
# send(self(), {:updated_date_filter, params})
assign(socket, is_open: false)
else
assign(socket, is_open: true, changeset: changeset)
end
{:noreply, socket}
end
end