diff --git a/assets/js/app.js b/assets/js/app.js index 6e1eb82..9482ead 100644 --- a/assets/js/app.js +++ b/assets/js/app.js @@ -268,6 +268,19 @@ Hooks.EmptyNickname = { }, }; +Hooks.SearchableSelect = { + mounted() { + this.handleEvent("update_hidden_field", (payload) => { + if (payload.id === this.el.id) { + this.el.value = payload.value; + // Trigger a change event to update the form + const event = new Event('input', { bubbles: true }); + this.el.dispatchEvent(event); + } + }); + } +}; + Hooks.PostForm = { onPress(e, submitBtn, TA) { if (e.key == "Enter" && !e.shiftKey) { diff --git a/lib/claper_web/live/admin_live/event_live/form_component.ex b/lib/claper_web/live/admin_live/event_live/form_component.ex index a356eda..6af40a8 100644 --- a/lib/claper_web/live/admin_live/event_live/form_component.ex +++ b/lib/claper_web/live/admin_live/event_live/form_component.ex @@ -61,17 +61,16 @@ defmodule ClaperWeb.AdminLive.EventLive.FormComponent do /> <.live_component - module={ClaperWeb.AdminLive.FormFieldComponent} + module={ClaperWeb.AdminLive.SearchableSelectComponent} id="event-user-id" form={@form} field={:user_id} - type="select" label="Assigned User" - select_options={@user_options} - prompt="Select a user" + options={@user_options} + placeholder="Search for a user..." required={true} width_class="sm:col-span-6" - description="The user who owns this event" + description="The user who owns this event (required)" /> diff --git a/lib/claper_web/live/admin_live/form_field_component.ex b/lib/claper_web/live/admin_live/form_field_component.ex index 7098152..e30fb58 100644 --- a/lib/claper_web/live/admin_live/form_field_component.ex +++ b/lib/claper_web/live/admin_live/form_field_component.ex @@ -80,7 +80,9 @@ defmodule ClaperWeb.AdminLive.FormFieldComponent do @field, [ class: "checkbox checkbox-primary", - checked: Phoenix.HTML.Form.input_value(@form, @field) == true || Phoenix.HTML.Form.input_value(@form, @field) == "true" + checked: + Phoenix.HTML.Form.input_value(@form, @field) == true || + Phoenix.HTML.Form.input_value(@form, @field) == "true" ] ++ @extra_attrs )} {@checkbox_label || @label} diff --git a/lib/claper_web/live/admin_live/searchable_select_component.ex b/lib/claper_web/live/admin_live/searchable_select_component.ex new file mode 100644 index 0000000..a1a213c --- /dev/null +++ b/lib/claper_web/live/admin_live/searchable_select_component.ex @@ -0,0 +1,170 @@ +defmodule ClaperWeb.AdminLive.SearchableSelectComponent do + use ClaperWeb, :live_component + + @impl true + def render(assigns) do + ~H""" +