In liveView here, I am using checkbox. But this checkbox doesn’t track the state of the checkbox. So I would like an option where I can track the state of the checkbox, i.e…
-
if the checkbox id is already present inside the module attribute @changes, it removes the id from @changes (clicking twice is basically reverting back to original state so it doesn’t need to be saved)
-
if it is not already present in @changes, then add it along with state whether “true” or “false”.
-
I would like to handle it through a handle event function and store inside the module attribute @changes and use it else where in my code for further implementation.
I came across something called phx-click but I am not sure how to use it in my case here or how to handle it through handle_event to store inside @changes. Any thoughts??
<div class="sm:flex sm:items-start justify-center w-80 min-w-full">
<div class="w-80">
<h2 class="modal-title"><%= @title %></h2>
<%= f = form_for :cred_flags, "#",
id: "cred_flags-form",
phx_target: @myself,
phx_submit: "save",
class: "mt-4" %>
<%= if @cred_flags == [] do %>
<p class="mb-4">No Cred Flags have been created yet</p>
<% else %>
<table class="table-auto">
<thead>
<tr>
<th class="px-2"></th>
<th class="px-2 text-left">Flag Name</th>
</tr>
</thead>
<tbody>
<%= for f <- @flags do %>
<tr>
<td class="px-2"><%= checkbox(f, String.to_atom(f.id), value: Enum.member?(Enum.map(@cred_flags, & &1.flag_id), f.id), checked_value: true, unchecked_value: false, class: "mr-2") %>
<td class="px-2"><%= f.flag_name %></span>
</tr>
<% end%>
</tbody>
</table>
<div class="mt-5 mt-4 relative">
<%= submit "Save", phx_disable_with: "Saving...", class: "btn-success" %>
</div>
<% end %>
</form>
</div>
</div>