Register for contest via website form

[richeterre]

The aim of this PR is to let participants sign up for a contest using a JS-enhanced web form.

[denisw]

Just pushed some initial Vue code. We have changeset JSON serialization, passing of that JSON to Vue, and the first Vue-controlled form input (the contest category <select>) now.

[denisw]

I think that with the last commits, the approach for combining Phoenix and Vue has shaped up nicely. @richeterre Please review if things look good in general, if yes we can extend it to the Pieces section and then add some UX cherries on top.

[richeterre]

Hmm, I just pulled the latest changes and the form is pretty broken for me 🤔 Anything I'm missing? It shows a validation error right away (see screenshot) that doesn't go away if I select a category, and the participant accordion doesn't open for me. Console says: [Vue warn]: Error in render: "TypeError: undefined is not an object (evaluating 'errors.participant.given_name')"

[richeterre]

Perhaps the missing peer dependency NPM warns me about?

ajv-keywords@3.2.0 requires a peer of ajv@^6.0.0 but none is installed.

Edit: Nope

[denisw]

Fixed the JS error. I forgot to make sure the form still works if the changeset has no errors. 😅

The initial error gets generated already on the server side, I guess by creating the initial changeset in a way that already triggers a validation error.

[richeterre]

By the way: I built a basic CRUD for viewing performances that can be reached by clicking 🏠 (top right) -> Contests -> (Contest name) -> List performances -> (Click performance). Useful for checking whether the form data was submitted correctly ☺️

[richeterre]

Getting there! I'll list some open points that should be addressed before closing:

• [x] (Bug) Add button doesn't work after submitting form
• [x] (Feature) Remove participants
• [x] (Feature) Add and remove pieces
• [x] (UX cherry) After submit, open first panel that has validation errors
• [x] (UX cherry) Reconfigure form based on category selection

[richeterre]

I think we can wrap this up! There's still the Ecto warning in ecto_encoders.ex, but not sure if that's a problem…

[denisw]

I think the warning is fine for now. In fact, the protocol implementation we redefine is one we don't want from the Echo source:

  defimpl Poison.Encoder, for: Ecto.Association.NotLoaded do
    def encode(%{__owner__: owner, __field__: field}, _) do
      raise "cannot encode association #{inspect field} from #{inspect owner} to " <>
            "JSON because the association was not loaded. Please make sure you have " <>
            "preloaded the association or remove it from the data to be encoded"
    end
  end

The warning might also go away once we move to Jason.

[richeterre]

I took a quick stab at Jason (adding a custom encoding for Range which isn't included), but get this rather cryptic error when loading the form:

protocol Enumerable not implemented for {#Function<2.9618734/3 in Jason.Encode.escape_function/1>, #Function<0.9618734/3 in Jason.Encode.encode_map_function/1>}. This protocol is implemented for: DBConnection.PrepareStream, DBConnection.Stream, Date.Range, Ecto.Adapters.SQL.Stream, File.Stream, Function, GenEvent.Stream, HashDict, HashSet, IO.Stream, List, Map, MapSet, Postgrex.Stream, Range, Stream, Timex.Interval

Any hunch what this could be about? Because in principle replacing Poison with Jason should be pretty straightforward by the looks of it.

[denisw]

I took a quick stab at Jason (adding a custom encoding for Range which isn't included), but get this rather cryptic error when loading the form:

protocol Enumerable not implemented for {#Function<2.9618734/3 in Jason.Encode.escape_function/1>, #Function<0.9618734/3 in Jason.Encode.encode_map_function/1>}. This protocol is implemented for: DBConnection.PrepareStream, DBConnection.Stream, Date.Range, Ecto.Adapters.SQL.Stream, File.Stream, Function, GenEvent.Stream, HashDict, HashSet, IO.Stream, List, Map, MapSet, Postgrex.Stream, Range, Stream, Timex.Interval

Any hunch what this could be about? Because in principle replacing Poison with Jason should be pretty straightforward by the looks of it.

Looks like you are trying to encode a tuple, for which no encoder implementation exists. I guess you need to use a list instead.

[richeterre]

I worked around that, but this is something else. Has to do with the defimpl Jason.Encoder, for: Ecto.Changeset itself, because encoding all parts of the changeset separately in the console worked fine for me. Anyway, Jason seems to be significantly more explicit, perhaps it's overkill to introduce it at this point.