Skip to content

Commit

Permalink
Update add/remove inputs to match updated Phoenix recommendations (#816)
Browse files Browse the repository at this point in the history
  • Loading branch information
doughsay authored Mar 18, 2024
1 parent 158736b commit 05fc948
Show file tree
Hide file tree
Showing 6 changed files with 63 additions and 60 deletions.
56 changes: 31 additions & 25 deletions lib/ambry_web/components/admin/components.ex
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ defmodule AmbryWeb.Admin.Components do

use AmbryWeb, :html

alias Phoenix.HTML.Form
alias Phoenix.HTML.FormField

def admin_table_header(assigns) do
Expand Down Expand Up @@ -230,49 +229,56 @@ defmodule AmbryWeb.Admin.Components do
"""
end

attr :drop_param, :atom, required: true
attr :parent_form, Form, required: true
attr :form, Form, required: true
attr :class, :string, default: nil, doc: "class overrides"
attr :field, FormField, required: true

def delete_button(assigns) do
def delete_input(assigns) do
~H"""
<label class={["flex", @class]}>
<input type="checkbox" name={@parent_form[@drop_param].name <> "[]"} value={@form.index} class="hidden" />
<FA.icon name="trash" class="h-4 w-4 cursor-pointer fill-current transition-colors hover:text-red-600" />
</label>
<input type="hidden" name={@field.name <> "[]"} />
"""
end

attr :drop_param, :atom, required: true
attr :form, Form, required: true
attr :field, FormField, required: true
attr :index, :integer, required: true

def delete_input(assigns) do
def sort_input(assigns) do
~H"""
<input type="hidden" name={@form[@drop_param].name <> "[]"} />
<input type="hidden" name={@field.name <> "[]"} value={@index} />
"""
end

attr :sort_param, :atom, required: true
attr :parent_form, Form, required: true
attr :form, Form, required: true
attr :field, FormField, required: true
attr :index, :integer, required: true
attr :class, :string, default: nil, doc: "class overrides"

def sort_input(assigns) do
def delete_button(assigns) do
~H"""
<input type="hidden" name={@parent_form[@sort_param].name <> "[]"} value={@form.index} />
<button
type="button"
name={@field.name <> "[]"}
value={@index}
phx-click={JS.dispatch("change")}
class={["flex", @class]}
>
<FA.icon name="trash" class="h-4 w-4 cursor-pointer fill-current transition-colors hover:text-red-600" />
</button>
"""
end

attr :sort_param, :atom, required: true
attr :form, Form, required: true
attr :label, :string, required: true
attr :field, FormField, required: true
slot :inner_block, required: true

def add_button(assigns) do
~H"""
<label class="text-brand flex cursor-pointer items-center gap-1 hover:underline dark:text-brand-dark">
<input type="checkbox" name={@form[@sort_param].name <> "[]"} class="hidden" /> <%= @label %>
<button
type="button"
name={@field.name <> "[]"}
value="new"
phx-click={JS.dispatch("change")}
class="text-brand flex cursor-pointer items-center gap-1 hover:underline dark:text-brand-dark"
>
<%= render_slot(@inner_block) %>
<FA.icon name="plus" class="h-4 w-4 fill-current" />
</label>
</button>
"""
end

Expand Down
16 changes: 8 additions & 8 deletions lib/ambry_web/live/admin/book_live/form.html.heex
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,7 @@
<div class="space-y-2">
<.label>Authors</.label>
<.inputs_for :let={book_author_form} field={@form[:book_authors]}>
<.sort_input parent_form={@form} form={book_author_form} sort_param={:book_authors_sort} />
<.sort_input field={@form[:book_authors_sort]} index={book_author_form.index} />

<div class="flex items-start gap-2">
<.input
Expand All @@ -84,18 +84,18 @@
list="authors"
container_class="grow"
/>
<.delete_button parent_form={@form} form={book_author_form} drop_param={:book_authors_drop} class="pt-[10px]" />
<.delete_button field={@form[:book_authors_drop]} index={book_author_form.index} class="pt-[10px]" />
</div>
</.inputs_for>

<.add_button form={@form} sort_param={:book_authors_sort} label="Add author" />
<.delete_input form={@form} drop_param={:book_authors_drop} />
<.add_button field={@form[:book_authors_sort]}>Add author</.add_button>
<.delete_input field={@form[:book_authors_drop]} />
</div>

<div class="space-y-2">
<.label>Series</.label>
<.inputs_for :let={series_book_form} field={@form[:series_books]}>
<.sort_input parent_form={@form} form={series_book_form} sort_param={:series_books_sort} />
<.sort_input field={@form[:series_books_sort]} index={series_book_form.index} />

<div class="flex items-start gap-2">
<.input
Expand All @@ -111,12 +111,12 @@
list="series"
container_class="grow"
/>
<.delete_button parent_form={@form} form={series_book_form} drop_param={:series_books_drop} class="pt-[10px]" />
<.delete_button field={@form[:series_books_drop]} index={series_book_form.index} class="pt-[10px]" />
</div>
</.inputs_for>

<.add_button form={@form} sort_param={:series_books_sort} label="Add series" />
<.delete_input form={@form} drop_param={:series_books_drop} />
<.add_button field={@form[:series_books_sort]}>Add series</.add_button>
<.delete_input field={@form[:series_books_drop]} />
</div>

<.input type="hidden" field={@form[:image_path]} />
Expand Down
8 changes: 4 additions & 4 deletions lib/ambry_web/live/admin/media_live/chapters.html.heex
Original file line number Diff line number Diff line change
Expand Up @@ -19,17 +19,17 @@
<div class="space-y-2">
<.label>Chapters</.label>
<.inputs_for :let={chapter_form} field={@form[:chapters]}>
<.sort_input parent_form={@form} form={chapter_form} sort_param={:chapters_sort} />
<.sort_input field={@form[:chapters_sort]} index={chapter_form.index} />

<div class="flex items-start gap-2">
<.input field={chapter_form[:time]} container_class="w-24" />
<.input field={chapter_form[:title]} container_class="grow" />
<.delete_button parent_form={@form} form={chapter_form} drop_param={:chapters_drop} class="pt-[10px]" />
<.delete_button field={@form[:chapters_drop]} index={chapter_form.index} class="pt-[10px]" />
</div>
</.inputs_for>

<.add_button form={@form} sort_param={:chapters_sort} label="Add chapter" />
<.delete_input form={@form} drop_param={:chapters_drop} />
<.add_button field={@form[:chapters_sort]}>Add chapter</.add_button>
<.delete_input field={@form[:chapters_drop]} />
</div>

<:actions>
Expand Down
19 changes: 8 additions & 11 deletions lib/ambry_web/live/admin/media_live/form.html.heex
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@
<div class="space-y-2">
<.label>Narrated by</.label>
<.inputs_for :let={media_narrator_form} field={@form[:media_narrators]}>
<.sort_input parent_form={@form} form={media_narrator_form} sort_param={:media_narrators_sort} />
<.sort_input field={@form[:media_narrators_sort]} index={media_narrator_form.index} />

<div class="flex items-start gap-2">
<.input
Expand All @@ -67,17 +67,12 @@
list="narrators"
container_class="grow"
/>
<.delete_button
parent_form={@form}
form={media_narrator_form}
drop_param={:media_narrators_drop}
class="pt-[10px]"
/>
<.delete_button field={@form[:media_narrators_drop]} index={media_narrator_form.index} class="pt-[10px]" />
</div>
</.inputs_for>

<.add_button form={@form} sort_param={:media_narrators_sort} label="Add narrator" />
<.delete_input form={@form} drop_param={:media_narrators_drop} />
<.add_button field={@form[:media_narrators_sort]}>Add narrator</.add_button>
<.delete_input field={@form[:media_narrators_drop]} />
</div>

<div class="flex gap-4">
Expand Down Expand Up @@ -182,17 +177,19 @@
<.label>Supplemental files</.label>

<.inputs_for :let={supplemental_file_form} field={@form[:supplemental_files]}>
<.sort_input parent_form={@form} form={supplemental_file_form} sort_param={:supplemental_files_sort} />
<.sort_input field={@form[:supplemental_files_sort]} index={supplemental_file_form.index} />
<.input field={supplemental_file_form[:id]} type="hidden" />

<div class="flex items-center gap-2">
<.label for={supplemental_file_form[:label].name}>Label</.label>
<.input field={supplemental_file_form[:label]} placeholder="Label" container_class="grow" />
<.label for={supplemental_file_form[:filename].name}>Filename</.label>
<.input field={supplemental_file_form[:filename]} placeholder="filename.ext" container_class="grow" />
<.delete_button parent_form={@form} form={supplemental_file_form} drop_param={:supplemental_files_drop} />
<.delete_button field={@form[:supplemental_files_drop]} index={supplemental_file_form.index} />
</div>
</.inputs_for>

<.delete_input field={@form[:supplemental_files_drop]} />
</div>

<div class="space-y-2">
Expand Down
16 changes: 8 additions & 8 deletions lib/ambry_web/live/admin/person_live/form.html.heex
Original file line number Diff line number Diff line change
Expand Up @@ -50,31 +50,31 @@
<div class="space-y-2">
<.label>Writing as</.label>
<.inputs_for :let={author_form} field={@form[:authors]}>
<.sort_input parent_form={@form} form={author_form} sort_param={:authors_sort} />
<.sort_input field={@form[:authors_sort]} index={author_form.index} />

<div class="flex items-start gap-2">
<.input field={author_form[:name]} container_class="grow" />
<.delete_button parent_form={@form} form={author_form} drop_param={:authors_drop} class="pt-[10px]" />
<.delete_button field={@form[:authors_drop]} index={author_form.index} class="pt-[10px]" />
</div>
</.inputs_for>

<.add_button form={@form} sort_param={:authors_sort} label="Add author" />
<.delete_input form={@form} drop_param={:authors_drop} />
<.add_button field={@form[:authors_sort]}>Add author</.add_button>
<.delete_input field={@form[:authors_drop]} />
</div>

<div class="space-y-2">
<.label>Narrating as</.label>
<.inputs_for :let={narrator_form} field={@form[:narrators]}>
<.sort_input parent_form={@form} form={narrator_form} sort_param={:narrators_sort} />
<.sort_input field={@form[:narrators_sort]} index={narrator_form.index} />

<div class="flex items-start gap-2">
<.input field={narrator_form[:name]} container_class="grow" />
<.delete_button parent_form={@form} form={narrator_form} drop_param={:narrators_drop} class="pt-[10px]" />
<.delete_button field={@form[:narrators_drop]} index={narrator_form.index} class="pt-[10px]" />
</div>
</.inputs_for>

<.add_button form={@form} sort_param={:narrators_sort} label="Add narrator" />
<.delete_input form={@form} drop_param={:narrators_drop} />
<.add_button field={@form[:narrators_sort]}>Add narrator</.add_button>
<.delete_input field={@form[:narrators_drop]} />
</div>

<.input type="hidden" field={@form[:image_path]} />
Expand Down
8 changes: 4 additions & 4 deletions lib/ambry_web/live/admin/series_live/form.html.heex
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
<div class="space-y-2">
<.label>Books</.label>
<.inputs_for :let={series_book_form} field={@form[:series_books]}>
<.sort_input parent_form={@form} form={series_book_form} sort_param={:series_books_sort} />
<.sort_input field={@form[:series_books_sort]} index={series_book_form.index} />

<div class="flex items-start gap-2">
<.input
Expand All @@ -23,12 +23,12 @@
list="books"
container_class="grow"
/>
<.delete_button parent_form={@form} form={series_book_form} drop_param={:series_books_drop} class="pt-[10px]" />
<.delete_button field={@form[:series_books_drop]} index={series_book_form.index} class="pt-[10px]" />
</div>
</.inputs_for>

<.add_button form={@form} sort_param={:series_books_sort} label="Add book" />
<.delete_input form={@form} drop_param={:series_books_drop} />
<.add_button field={@form[:series_books_sort]}>Add book</.add_button>
<.delete_input field={@form[:series_books_drop]} />
</div>

<:actions>
Expand Down

0 comments on commit 05fc948

Please sign in to comment.