LiveCal

---

The following commit demonstrates how to conditionally show and hide a nested input within Phoenix.Component.inputs_for/1 based on the value of a sibling nested input.

• Nested inputs_for events in calendar form livecomponent with conditional rendering of one input based on another

To see it in action:

• Navigate to http://localhost:4000/calendars/new
• Click add event
• Select field trip from the type dropdown

There should now be a destination text input field underneath the dropdown.

For reference, this was created in response to this thread on ElixirForum.

---

The following two commits demonstrate how to handle multiple radio button inputs grouped together under a fieldset that represent the possible values of an Ecto.Enum field in a Phoenix LiveView form.

1. Add fieldset radio button example for Ecto.Enum field
2. Add radio_fieldset function component that autogenerates radio buttons

To see it in action:

• Navigate to http://localhost:4000/calendars/new
• Click between the public and private radio buttons
• Click add event
• Click between the busy, free, and tbd radio buttons

For reference, this was created in response to this thread on ElixirForum.

---

The following commit demonstrates how to show/hide streamed elements by tagging them via HTML attributes and using LiveView's client side JS commands to toggle their visibility.

• Show or hide streamed calendars on the client side based on their visibility field

To see it in action:

• Navigate to http://localhost:4000/calendars
• Click the public and private toggle buttons once to hide the public and private calendars respectively
• Click either again to show the public and private calendars respectively
• So on and so forth

For reference, this was created in response to this thread on ElixirForum.

---

The following commit demonstrates how to add and remove a HTML class and attribute while using LiveView's client side JS commands to toggle their visibility.

• Add and remove HTML attribute and class while toggling via client side JS Commands

To see it in action:

• Navigate to http://localhost:4000/calendars
• Click the Aria prefixed public and private toggle buttons once to add the aria-hidden attributes and invisible classes to the <tr> elements representing public and private calendars respectively
• Click either again to remove the aria-hidden attributes and invisible classes respectively
• So on and so forth

For reference, this was created in response to this thread on ElixirForum.

---

The following two commits demonstrate how to allow users to choose between setting up a parent association by selecting an existing resource from a dropdown or creating a new resource via a nested form.

• Run LiveView generators for events
• Demonstrate creating a resource alongside a new or existing parent

To see it in action:

• Navigate to http://localhost:4000/events
• Select an existing calendar from the dropdown or click button to replace dropdown with form to add a new calendar
• Click Save Event
• Note the newly added event and its calendar id on the events index LiveView
• Click New Event and add another event

For reference, this was created in response to this thread on ElixirForum.

---

The following commit demonstrates how to show an empty message when there are no streamed items using the :last-child pseudoselector.

• Show empty stream message using :last-child pseudoselector

To see it in action:

• Navigate to http://localhost:4000/events
• If there are no events, note the "No Streamed Items" message that disappears when creating an event.
• Alternatively, delete all events and note the "No Streamed Items" message that appears.

For reference, this was created in response to this thread on ElixirForum.

---

The following commits demonstrates how to dynamically set options for one dropdown based on the value a user selects in another dropdown.

• Fetch options for one dropdown based off the selected value of another dropdown
• Hide dropdown until the other dropdown it depends on has a selected value

To see it in action:

• Navigate to http://localhost:4000/organization_user_search
• Select a value from the organizations dropdown
• Select a value from the users dropdown that appears
• Submit the form and check the logs

For reference, this was created in response to this thread on ElixirForum.

---

To start your Phoenix server:

• Run mix setup to install and setup dependencies
• Start Phoenix endpoint with mix phx.server or inside IEx with iex -S mix phx.server

Now you can visit localhost:4000 from your browser.