Skip to content

Commit

Permalink
refactor: removed `LantternWeb.AssessmetPointLive.CurriculumItemSearc…
Browse files Browse the repository at this point in the history 
…hInputComponent`

moved all field handling to parent form components (create and update assessment point form) and removed `LantternWeb.AssessmetPointLive.CurriculumItemSearchInputComponent` in favor of `LantternWeb.CurriculumLive.CurriculumItemSearchComponent`
  • Loading branch information
@endoooo
endoooo committed Nov 16, 2023
1 parent b93f2b0 commit 6838e88
Show file tree
Hide file tree
Showing 6 changed files with 148 additions and 242 deletions.
28 changes: 0 additions & 28 deletions assets/js/autocomplete-hook.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,15 +24,6 @@ const pushSelect = (hook, input, selected) => {
input.value = selected.name;
}

// force hidden input value change and trigger phx-change event
if (input.getAttribute("data-hidden-input-id")) {
const hiddenInput = document.getElementById(
input.getAttribute("data-hidden-input-id")
);
hiddenInput.value = selected.id;
hiddenInput.dispatchEvent(new Event("input", { bubbles: true }));
}

// send event to liveview server
hook.pushEventTo(input, "autocomplete_result_select", selected);
};
Expand Down Expand Up @@ -92,19 +83,6 @@ function autocompleteSearchResults(event) {
}
}

function clearSelectedItem(event) {
const input = this.el;

// force hidden input value change and trigger phx-change event
if (input.getAttribute("data-hidden-input-id")) {
const hiddenInput = document.getElementById(
input.getAttribute("data-hidden-input-id")
);
hiddenInput.value = "";
hiddenInput.dispatchEvent(new Event("input", { bubbles: true }));
}
}

// on click away
function clickAwayHandler(event) {
const input = this.el;
Expand Down Expand Up @@ -201,12 +179,6 @@ const autocompleteHook = {
{ signal: hookAbortControllerMap[this.el.id].signal }
);

window.addEventListener(
`phx:clear_selected_item:${id}`,
clearSelectedItem.bind(this),
{ signal: hookAbortControllerMap[this.el.id].signal }
);

window.addEventListener("click", clickAwayHandler.bind(this), {
signal: hookAbortControllerMap[this.el.id].signal,
});
Expand Down
1 change: 1 addition & 0 deletions lib/lanttern_web/live/admin/strand_live/form_component.ex
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,7 @@ defmodule LantternWeb.Admin.StrandLive.FormComponent do
module={CurriculumItemSearchComponent}
id="curriculum-item-search"
notify_component={@myself}
refocus_on_select="true"
/>
<div
:for={curriculum_item <- @curriculum_items}
Expand Down
73 changes: 66 additions & 7 deletions lib/lanttern_web/live/assessment_point_live/assessment_point_create_form_component.ex
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,8 @@ defmodule LantternWeb.AssessmentPointLive.AssessmentPointCreateFormComponent do
alias LantternWeb.GradingHelpers
alias LantternWeb.SchoolsHelpers

alias LantternWeb.CurriculumLive.CurriculumItemSearchComponent

def render(assigns) do
~H"""
<div>
Expand Down Expand Up @@ -63,12 +65,30 @@ defmodule LantternWeb.AssessmentPointLive.AssessmentPointCreateFormComponent do
/>
</div>
</div>
<.live_component
module={LantternWeb.AssessmetPointLive.CurriculumItemSearchInputComponent}
id="create-assessment-point-form-curriculum-item"
field={@form[:curriculum_item_id]}
class="mb-6"
/>
<.input field={@form[:curriculum_item_id]} type="hidden" label="Curriculum item" />
<div class="mt-1 mb-6">
<.live_component
module={CurriculumItemSearchComponent}
id="create-assessment-point-form-curriculum-item-search"
notify_component={@myself}
/>
<.badge
:if={@selected_curriculum_item}
class="mt-2"
theme="cyan"
show_remove
phx-click="remove_curriculum_item"
phx-target={@myself}
>
<div>
#<%= @selected_curriculum_item.id %>
<span :if={@selected_curriculum_item.code}>
(<%= @selected_curriculum_item.code %>)
</span>
<%= @selected_curriculum_item.name %>
</div>
</.badge>
</div>
<.input
field={@form[:scale_id]}
type="select"
Expand Down Expand Up @@ -155,14 +175,53 @@ defmodule LantternWeb.AssessmentPointLive.AssessmentPointCreateFormComponent do
class_options: class_options,
selected_classes: selected_classes,
student_options: student_options,
selected_students: selected_students
selected_students: selected_students,
selected_curriculum_item: nil
})

{:ok, socket}
end

def update(%{action: {CurriculumItemSearchComponent, {:selected, curriculum_item}}}, socket) do
# basically a manual "validate" event to update curriculum_item id
params =
socket.assigns.form.params
|> Map.put("curriculum_item_id", curriculum_item.id)

form =
%AssessmentPoint{}
|> Assessments.change_assessment_point(params)
|> Map.put(:action, :validate)
|> to_form()

{:ok,
socket
|> assign(:selected_curriculum_item, curriculum_item)
|> assign(:form, form)}
end

def update(assigns, socket), do: {:ok, assign(socket, assigns)}

# event handlers

def handle_event("remove_curriculum_item", _params, socket) do
# basically a manual "validate" event to update curriculum_item id
params =
socket.assigns.form.params
|> Map.put("curriculum_item_id", nil)

form =
%AssessmentPoint{}
|> Assessments.change_assessment_point(params)
|> Map.put(:action, :validate)
|> to_form()

{:noreply,
socket
|> assign(:selected_curriculum_item, nil)
|> assign(:form, form)}
end

def handle_event(
"class_selected",
%{"assessment_point" => %{"class_id" => class_id}},
Expand Down
102 changes: 79 additions & 23 deletions lib/lanttern_web/live/assessment_point_live/assessment_point_update_form_component.ex
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,11 @@ defmodule LantternWeb.AssessmentPointLive.AssessmentPointUpdateFormComponent do
use LantternWeb, :live_component

alias Lanttern.Assessments
alias Lanttern.Assessments.AssessmentPoint
alias LantternWeb.GradingHelpers
alias LantternWeb.SchoolsHelpers

alias LantternWeb.CurriculumLive.CurriculumItemSearchComponent

def render(assigns) do
~H"""
<div>
Expand Down Expand Up @@ -64,12 +65,30 @@ defmodule LantternWeb.AssessmentPointLive.AssessmentPointUpdateFormComponent do
/>
</div>
</div>
<.live_component
module={LantternWeb.AssessmetPointLive.CurriculumItemSearchInputComponent}
id="update-assessment-point-form-curriculum-item"
field={@form[:curriculum_item_id]}
class="mb-6"
/>
<.input field={@form[:curriculum_item_id]} type="hidden" label="Curriculum item" />
<div class="mt-1 mb-6">
<.live_component
module={CurriculumItemSearchComponent}
id="update-assessment-point-form-curriculum-item-search"
notify_component={@myself}
/>
<.badge
:if={@selected_curriculum_item}
class="mt-2"
theme="cyan"
show_remove
phx-click="remove_curriculum_item"
phx-target={@myself}
>
<div>
#<%= @selected_curriculum_item.id %>
<span :if={@selected_curriculum_item.code}>
(<%= @selected_curriculum_item.code %>)
</span>
<%= @selected_curriculum_item.name %>
</div>
</.badge>
</div>
<%!-- <.input
field={@form[:scale_id]}
type="select"
Expand Down Expand Up @@ -98,7 +117,8 @@ defmodule LantternWeb.AssessmentPointLive.AssessmentPointUpdateFormComponent do
class_options: class_options,
selected_classes: selected_classes,
student_options: student_options,
selected_students: selected_students
selected_students: selected_students,
selected_curriculum_item: nil
})

{:ok, socket}
Expand All @@ -109,30 +129,66 @@ defmodule LantternWeb.AssessmentPointLive.AssessmentPointUpdateFormComponent do
assessment_point
|> Assessments.change_assessment_point()

socket =
socket
|> assign(assigns)
|> assign(:form, to_form(changeset))
selected_curriculum_item =
case assessment_point.curriculum_item_id do
id when is_integer(id) -> Lanttern.Curricula.get_curriculum_item!(id)
_ -> nil
end

{:ok,
socket
|> assign(assigns)
|> assign(:form, to_form(changeset))
|> assign(:selected_curriculum_item, selected_curriculum_item)}
end

{:ok, socket}
def update(%{action: {CurriculumItemSearchComponent, {:selected, curriculum_item}}}, socket) do
# basically a manual "validate" event to update curriculum_item id
params =
socket.assigns.form.params
|> Map.put("curriculum_item_id", curriculum_item.id)

form =
socket.assigns.assessment_point
|> Assessments.change_assessment_point(params)
|> Map.put(:action, :validate)
|> to_form()

{:ok,
socket
|> assign(:selected_curriculum_item, curriculum_item)
|> assign(:form, form)}
end

def update(assigns, socket) do
socket =
Enum.reduce(
assigns,
socket,
fn {key, value}, socket ->
assign(socket, key, value)
end
)
{:ok,
socket
|> assign(assigns)}
end

{:ok, socket}
# event handlers

def handle_event("remove_curriculum_item", _params, socket) do
# basically a manual "validate" event to update curriculum_item id
params =
socket.assigns.form.params
|> Map.put("curriculum_item_id", nil)

form =
socket.assigns.assessment_point
|> Assessments.change_assessment_point(params)
|> Map.put(:action, :validate)
|> to_form()

{:noreply,
socket
|> assign(:selected_curriculum_item, nil)
|> assign(:form, form)}
end

def handle_event("validate", %{"assessment_point" => params}, socket) do
form =
%AssessmentPoint{}
socket.assigns.assessment_point
|> Assessments.change_assessment_point(params)
|> Map.put(:action, :validate)
|> to_form()
Expand Down
Loading

0 comments on commit 6838e88

Please sign in to comment.