Make modals client-side #76
Conversation
starcraft66
force-pushed
the
feature/tgh/improve-modals
branch
from
fb8a158 to
e1d0a75
Compare
starcraft66
force-pushed
the
feature/tgh/improve-modals
branch
from
e1d0a75 to
d7a1200
Compare
| @@ -9,7 +9,7 @@ import Config | |||
| config :esbuild, | |||
| path: System.get_env("MIX_ESBUILD_PATH"), | |||
| default: [ | |||
| args: ~w(js/app.js --bundle --target=es2016 --outdir=../priv/static/js --external:/images/*), | |||
| args: ~w(js/app.js --bundle --target=es2017 --outdir=../priv/static/js --external:/images/*), | |||
There was a problem hiding this comment.
Alpine.js esm version requires a minimum target of es2017
| @@ -101,6 +101,7 @@ | |||
| systems = [ | |||
| # systems for which you want to build the `perSystem` attributes | |||
| "x86_64-linux" | |||
| "x86_64-darwin" | |||
There was a problem hiding this comment.
This is left-over from when I was developing on my old intel mac but this should still be a supported development platform
| <div class="modal-action"> | ||
| <button | ||
| class="btn btn-success" | ||
| x-on:click={"$refs.station_modal_#{@station.station_number}.close()"} |
There was a problem hiding this comment.
For some reason I can't figure out, all of the modals on this page require a hook to close the modal on the submit button while other pages like the selfsign page simply close the modal just fine when submitting the form. This is an intermediary solution that works without any apparent issues on my end. This comment applies to the rest of the modals in this file too.
| @@ -19,7 +19,7 @@ defmodule NavComponent do | |||
| <ul class="p-0 menu menu-horizontal"> | |||
| <%= for {menu_txt, path} <- assigns.nav_menu do %> | |||
| <li class={"nav-item min-w-fit #{if path == assigns.nav_menu_active_path, do: "font-bold"}"}> | |||
| <%= live_redirect menu_txt, to: path, class: "nav-link" %> | |||
| <.link patch={path} class="nav-link"><%= menu_txt %></.link> | |||
There was a problem hiding this comment.
live_redirect has been deprecated for a while and its replacement is the <.link /> tag, see the docs
| @@ -37,7 +37,7 @@ defmodule Lanpartyseating.Mixfile do | |||
| {:ecto_sql, "~> 3.10.1"}, | |||
| {:postgrex, ">= 0.0.0"}, | |||
| {:phoenix_html, "~> 3.3.1"}, | |||
| {:phoenix_live_view, "~> 0.19.3"}, | |||
| {:phoenix_live_view, "~> 0.20.0"}, | |||
There was a problem hiding this comment.
Required upgrade to handle <form method="dialog"> submissions without crashing the live view connection, see this commit
| @@ -104,3 +104,9 @@ Lanpartyseating.Repo.insert!(%Lanpartyseating.Setting{ | |||
| horizontal_trailing: 1, | |||
| vertical_trailing: 0 | |||
| }) | |||
|
|
|||
| Lanpartyseating.Repo.insert!(%Lanpartyseating.Badge{ | |||
There was a problem hiding this comment.
Convenience seeder to allow one to simply input 1 as the badge number in the selfsign page to easily test station registrations in dev
| let liveSocket = new LiveSocket("/live", Socket, { | ||
| params: { _csrf_token: csrfToken }, | ||
| dom: { | ||
| onBeforeElUpdated(from, to) { |
There was a problem hiding this comment.
Little trick to keep Alpine.js up-to-date with the DOM patches Phoenix LiveView is performing, taken from here
Refactors modals to be entirely client-side using Alpine.js and the modern
<dialog>tag instead of being driven by Phoenix LiveView and deprecated DaisyUI functionality. This makes them more responsive and fixes things like auto-selecting the badge serial number field.Upgraded DaisyUI to 4.6.0 (latest) while testing to see if it fixed a bug but kept it in the PR cause why not.
Updated flake inputs to their latest revisions because there was an stdenv-darwin-related problem preventing me from testing the nix build.
Closes #19