user management new/edit/delete working, with fixed live modal
This commit is contained in:
parent
ce03eaaf2d
commit
ea74a89078
5 changed files with 91 additions and 83 deletions
|
|
@ -3,12 +3,12 @@ defmodule Shift73kWeb.ModalComponent do
|
|||
|
||||
@impl true
|
||||
def render(assigns) do
|
||||
~L"""
|
||||
<div id="<%= @id %>" class="modal fade"
|
||||
~H"""
|
||||
<div id={@id} class="modal fade"
|
||||
phx-hook="BsModal"
|
||||
phx-window-keydown="hide"
|
||||
phx-key="escape"
|
||||
phx-target="#<%= @id %>"
|
||||
phx-target={"#" <> to_string(@id)}
|
||||
phx-page-loading>
|
||||
|
||||
<div class="modal-dialog modal-dialog-centered">
|
||||
|
|
@ -16,10 +16,10 @@ defmodule Shift73kWeb.ModalComponent do
|
|||
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title"><%= Keyword.get(@opts, :title, "Modal title") %></h5>
|
||||
<button type="button" class="btn-close" phx-click="hide" phx-target="<%= @myself %>" aria-label="Close"></button>
|
||||
<button type="button" class="btn-close" phx-click="hide" phx-target={@myself} aria-label="Close"></button>
|
||||
</div>
|
||||
|
||||
<%= live_component @socket, @component, Keyword.put(@opts, :modal_id, @id) %>
|
||||
<%= live_component @component, Keyword.put(@opts, :modal_id, @id) %>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,20 @@
|
|||
<div>
|
||||
|
||||
<div class="modal-body">
|
||||
|
||||
Are you sure you want to delete "<%= @delete_user.email %>"?
|
||||
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
|
||||
<%= link "Cancel", to: "#", class: "btn btn-outline-dark", phx_click: "hide", phx_target: "##{@modal_id}" %>
|
||||
<%= link "Confirm Delete", to: "#",
|
||||
class: "btn btn-danger",
|
||||
phx_click: "confirm",
|
||||
phx_target: @myself,
|
||||
phx_value_id: @delete_user.id,
|
||||
phx_value_email: @delete_user.email %>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
|
@ -1,16 +0,0 @@
|
|||
<div class="modal-body">
|
||||
|
||||
Are you sure you want to delete "<%= @delete_user.email %>"?
|
||||
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
|
||||
<%= link "Cancel", to: "#", class: "btn btn-outline-dark", phx_click: "hide", phx_target: "##{@modal_id}" %>
|
||||
<%= link "Confirm Delete", to: "#",
|
||||
class: "btn btn-danger",
|
||||
phx_click: "confirm",
|
||||
phx_target: @myself,
|
||||
phx_value_id: @delete_user.id,
|
||||
phx_value_email: @delete_user.email %>
|
||||
|
||||
</div>
|
||||
|
|
@ -0,0 +1,66 @@
|
|||
<div>
|
||||
|
||||
<%= form_for @changeset, "#", [
|
||||
phx_target: @myself,
|
||||
phx_change: "validate",
|
||||
phx_submit: "save"
|
||||
], fn f -> %>
|
||||
|
||||
<div class="modal-body">
|
||||
|
||||
<%= label f, :email, class: "form-label" %>
|
||||
<div class="inner-addon left-addon mb-3" phx-feedback-for={input_id(f, :email)}>
|
||||
<i class="bi bi-at icon is-left text-muted fs-5"></i>
|
||||
<%= email_input f, :email,
|
||||
value: input_value(f, :email),
|
||||
class: input_class(f, :email, "form-control"),
|
||||
placeholder: "e.g., babka@73k.us",
|
||||
maxlength: User.max_email,
|
||||
autofocus: true,
|
||||
phx_debounce: "250",
|
||||
aria_describedby: error_ids(f, :email)
|
||||
%>
|
||||
<%= error_tag f, :email %>
|
||||
</div>
|
||||
|
||||
<%= label f, :password, class: "form-label" %>
|
||||
<div class="inner-addon left-addon mb-3" phx-feedback-for={input_id(f, :password)}>
|
||||
<i class="bi bi-key icon is-left text-muted fs-5"></i>
|
||||
<%= password_input f, :password,
|
||||
value: input_value(f, :password),
|
||||
class: input_class(f, :password, "form-control"),
|
||||
maxlength: User.max_password,
|
||||
aria_describedby: error_ids(f, :password)
|
||||
%>
|
||||
<%= error_tag f, :password %>
|
||||
</div>
|
||||
|
||||
<%= if Roles.can?(@current_user, %User{}, :edit_role) do %>
|
||||
<%= label f, :role, class: "form-label" %>
|
||||
<div class="inner-addon left-addon mb-3">
|
||||
<i class="bi bi-shield icon is-left text-muted fs-5"></i>
|
||||
<%= select f, :role, Enum.map(User.roles(), fn {k, _v} -> {String.capitalize(Atom.to_string(k)), k} end), class: "form-select" %>
|
||||
<span class="valid-feedback text-primary" style="display: block;">
|
||||
<%= role_description(input_value(f, :role)) %>
|
||||
</span>
|
||||
</div>
|
||||
<% else %>
|
||||
<%= hidden_input f, :role, value: input_value(f, :role) %>
|
||||
<% end %>
|
||||
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
|
||||
<%= link "Cancel", to: "#", class: "btn btn-outline-dark", phx_click: "hide", phx_target: "##{@modal_id}" %>
|
||||
<%= submit "Save",
|
||||
class: "btn btn-primary ",
|
||||
disabled: !@changeset.valid?,
|
||||
aria_disabled: !@changeset.valid? && "true" || false,
|
||||
phx_disable_with: "Saving..."
|
||||
%>
|
||||
|
||||
</div>
|
||||
|
||||
<% end %>
|
||||
|
||||
</div>
|
||||
|
|
@ -1,62 +0,0 @@
|
|||
<%= form_for @changeset, "#", [
|
||||
phx_target: @myself,
|
||||
phx_change: "validate",
|
||||
phx_submit: "save"
|
||||
], fn f -> %>
|
||||
|
||||
<div class="modal-body">
|
||||
|
||||
<%= label f, :email, class: "form-label" %>
|
||||
<div class="inner-addon left-addon mb-3" phx-feedback-for="<%= input_id(f, :email) %>">
|
||||
<%= icon_div @socket, "bi-at", [class: "icon is-left text-muted fs-5"] %>
|
||||
<%= email_input f, :email,
|
||||
value: input_value(f, :email),
|
||||
class: input_class(f, :email, "form-control"),
|
||||
placeholder: "e.g., babka@73k.us",
|
||||
maxlength: User.max_email,
|
||||
autofocus: true,
|
||||
phx_debounce: "250",
|
||||
aria_describedby: error_ids(f, :email)
|
||||
%>
|
||||
<%= error_tag f, :email %>
|
||||
</div>
|
||||
|
||||
<%= label f, :password, class: "form-label" %>
|
||||
<div class="inner-addon left-addon mb-3" phx-feedback-for="<%= input_id(f, :password) %>">
|
||||
<%= icon_div @socket, "bi-key", [class: "icon is-left text-muted fs-5"] %>
|
||||
<%= password_input f, :password,
|
||||
value: input_value(f, :password),
|
||||
class: input_class(f, :password, "form-control"),
|
||||
maxlength: User.max_password,
|
||||
aria_describedby: error_ids(f, :password)
|
||||
%>
|
||||
<%= error_tag f, :password %>
|
||||
</div>
|
||||
|
||||
<%= if Roles.can?(@current_user, %User{}, :edit_role) do %>
|
||||
<%= label f, :role, class: "form-label" %>
|
||||
<div class="inner-addon left-addon mb-3">
|
||||
<%= icon_div @socket, "bi-shield", [class: "icon is-left text-muted fs-5"] %>
|
||||
<%= select f, :role, Enum.map(User.roles(), fn {k, _v} -> {String.capitalize(Atom.to_string(k)), k} end), class: "form-select" %>
|
||||
<span class="valid-feedback text-primary" style="display: block;">
|
||||
<%= role_description(input_value(f, :role)) %>
|
||||
</span>
|
||||
</div>
|
||||
<% else %>
|
||||
<%= hidden_input f, :role, value: input_value(f, :role) %>
|
||||
<% end %>
|
||||
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
|
||||
<%= link "Cancel", to: "#", class: "btn btn-outline-dark", phx_click: "hide", phx_target: "##{@modal_id}" %>
|
||||
<%= submit "Save",
|
||||
class: "btn btn-primary ",
|
||||
disabled: !@changeset.valid?,
|
||||
aria_disabled: !@changeset.valid? && "true" || false,
|
||||
phx_disable_with: "Saving..."
|
||||
%>
|
||||
|
||||
</div>
|
||||
|
||||
<% end %>
|
||||
Loading…
Reference in a new issue