Move import releases button at the bottom

Disabled when no records are present.
This commit is contained in:
Claudio Ortolina
2025-02-16 14:07:02 +00:00
parent 23fab67e53
commit dfcfd1a066
3 changed files with 23 additions and 11 deletions
@@ -232,6 +232,7 @@ defmodule MusicLibraryWeb.CoreComponents do
"phx-submit-loading:opacity-75 rounded-md py-1 sm:py-2 px-2 sm:px-3 mt-2",
"text-xs sm:text-sm font-semibold leading-6 ",
"bg-zinc-900 hover:bg-zinc-800 dark:bg-zinc-100 dark:hover:bg-zinc-200",
"disabled:bg-zinc-300 dark:disabled:bg-zinc-300 disabled:active:text-white",
"text-white active:text-white/80 dark:text-zinc-900 dark:active:text-zinc-900/80",
"focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-zinc-600",
@class
@@ -53,17 +53,19 @@ defmodule MusicLibraryWeb.RecordLive.BarcodeScannerComponent do
<video :if={!(@camera == :denied)} class="w-full hidden h-96" id="camera-preview" playsinline />
</div>
<div :if={length(@releases) > 0} class="mt-4 flex justify-center">
<ul class="divide-y divide-zinc-100 dark:divide-slate-300/30 mt-5">
<.result :for={release <- @releases} id={release.id} release={release} />
</ul>
<div class="mt-4 flex justify-center">
<.button
disabled={length(@releases) == 0}
phx-disable-with={gettext("Importing...")}
phx-click={JS.push("import_releases", target: "#barcode-scanner")}
>
{gettext("Import releases")}
</.button>
</div>
<ul class="divide-y divide-zinc-100 dark:divide-slate-300/30 mt-5">
<.result :for={release <- @releases} id={release.id} release={release} />
</ul>
</div>
"""
end
@@ -73,7 +75,16 @@ defmodule MusicLibraryWeb.RecordLive.BarcodeScannerComponent do
defp result(assigns) do
~H"""
<li id={@id} class="flex justify-between gap-x-6 py-5 hover:bg-zinc-50 dark:hover:bg-zinc-700">
<li
id={@id}
class="flex justify-between gap-x-6 py-5 hover:bg-zinc-50 dark:hover:bg-zinc-700"
phx-mounted={
JS.transition(
{"first:ease-in duration-300", "first:opacity-0 first:p-0 first:h-0", "first:opacity-100"},
time: 300
)
}
>
<div class="flex items-center justify-between w-full px-4">
<div class="min-w-0 flex-auto">
<h1 class="text-sm leading-6 text-zinc-700 dark:text-zinc-400">
+6 -6
View File
@@ -11,7 +11,7 @@
msgid ""
msgstr ""
#: lib/music_library_web/components/core_components.ex:505
#: lib/music_library_web/components/core_components.ex:506
#, elixir-autogen, elixir-format
msgid "Actions"
msgstr ""
@@ -640,27 +640,27 @@ msgstr ""
msgid "Open camera"
msgstr ""
#: lib/music_library_web/live/record_live/barcode_scanner_component.ex:61
#: lib/music_library_web/live/record_live/barcode_scanner_component.ex:66
#, elixir-autogen, elixir-format
msgid "Import releases"
msgstr ""
#: lib/music_library_web/live/record_live/barcode_scanner_component.ex:127
#: lib/music_library_web/live/record_live/barcode_scanner_component.ex:138
#, elixir-autogen, elixir-format
msgid "Failed to search release for barcode %{number}"
msgstr ""
#: lib/music_library_web/live/record_live/barcode_scanner_component.ex:120
#: lib/music_library_web/live/record_live/barcode_scanner_component.ex:131
#, elixir-autogen, elixir-format
msgid "No release found for barcode %{number}"
msgstr ""
#: lib/music_library_web/live/record_live/barcode_scanner_component.ex:58
#: lib/music_library_web/live/record_live/barcode_scanner_component.ex:63
#, elixir-autogen, elixir-format
msgid "Importing..."
msgstr ""
#: lib/music_library_web/live/record_live/barcode_scanner_component.ex:150
#: lib/music_library_web/live/record_live/barcode_scanner_component.ex:161
#, elixir-autogen, elixir-format
msgid "Records imported successfully"
msgstr ""