-
Notifications
You must be signed in to change notification settings - Fork 10
LocalLiveView Forms Demo #420
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: main
Are you sure you want to change the base?
Conversation
mat-hek
left a comment
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
- fix the error in
mix setup - configure CI
| List of users is stored in local live view process memory. | ||
| The form handles onchange and onsubmit LocalLiveView events. | ||
| The change event triggers validate function that looks through already saved users and makes sure that | ||
| new username or email isn't already present in the users list. The submit event add a new user to the user list. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
| new username or email isn't already present in the users list. The submit event add a new user to the user list. | |
| new username or email isn't already present in the users list. The submit event adds a new user to the user list. |
|
|
||
| The demo project implementing phoenix forms using LocalLiveView. | ||
|
|
||
| The demo form is build as a html page with a single form and a rendered list of users (usernames and emails). |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
| The demo form is build as a html page with a single form and a rendered list of users (usernames and emails). | |
| The demo form is built as an html page with a single form and a rendered list of users (usernames and emails). |
| @@ -0,0 +1,35 @@ | |||
| # FormDemo | |||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
| # FormDemo | |
| # Local Live View Form Demo |
| use LocalLiveView | ||
| import Local.CoreComponents | ||
|
|
||
| def render(assigns) do |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
| def render(assigns) do | |
| @impl true | |
| def render(assigns) do |
same for other callbacks
| |> Enum.reduce(%{}, fn {k, v}, acc -> | ||
| in_existing_users = Enum.any?(existing_users, fn u -> Map.get(u, k) == v end) | ||
| Map.put(acc, k, in_existing_users) | ||
| end) | ||
|
|
||
| Enum.reduce(result, "", fn | ||
| {k, true}, acc -> acc <> "#{to_string(k)} already in use! " | ||
| {_k, false}, acc -> acc | ||
| end) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
| |> Enum.reduce(%{}, fn {k, v}, acc -> | |
| in_existing_users = Enum.any?(existing_users, fn u -> Map.get(u, k) == v end) | |
| Map.put(acc, k, in_existing_users) | |
| end) | |
| Enum.reduce(result, "", fn | |
| {k, true}, acc -> acc <> "#{to_string(k)} already in use! " | |
| {_k, false}, acc -> acc | |
| end) | |
| |> Enum.filter(fn {key, value} -> | |
| Enum.any?(existing_users, fn user -> Map.get(user, key) == value end) | |
| end) | |
| |> Enum.map_join(", ", fn {key, _value} -> | |
| String.capitalize("#{key} already in use") | |
| end) |
| {js_event: "click", pop_event: "pop-click"}, | ||
| {js_event: "keydown", pop_event: "pop-keydown"}, | ||
| {js_event: "submit", pop_event: "pop-submit"}, | ||
| {js_event: "input", pop_event: "pop-change"} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
How hard would it be to support more events?
| <label>EMAIL</label> | ||
| <.input type="email" field={@form[:email]} /> | ||
| <div class="centered"> | ||
| <button class="ghost-button">SAVE</button> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Can we easily disable the button when validation doesn't pass?
From README: