cloud/music_library
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Use responsive list for scrobble rules list

Browse Source
This commit is contained in:
Claudio Ortolina
2025-07-13 10:17:40 +01:00
parent ae23e02ab1
commit fea5e3e862
3 changed files with 67 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/music_library_web/live/scrobble_rules_live/index.html.heex
+67 -62
View File
@@ -32,69 +32,74 @@
</header>
<div class="mt-6 space-y-4">
<.table>
<.table_head>
<:col>{gettext("Type")}</:col>
<:col>{gettext("Match Value")}</:col>
<:col>{gettext("Target MusicBrainz ID")}</:col>
<:col>{gettext("Status")}</:col>
<:col>{gettext("Description")}</:col>
<:col>{gettext("Created")}</:col>
<:col></:col>
</.table_head>
<.table_body phx-update="stream" id="scrobble-rules">
<.table_row :for={{dom_id, scrobble_rule} <- @streams.scrobble_rules} id={dom_id}>
<:cell>
<.type_badge type={scrobble_rule.type} />
</:cell>
<:cell>{scrobble_rule.match_value}</:cell>
<:cell class="whitespace-nowrap font-mono">{scrobble_rule.target_musicbrainz_id}</:cell>
<:cell>
<ul phx-update="stream" id="scrobble-rules-list" class="space-y-4">
<li
:for={{dom_id, scrobble_rule} <- @streams.scrobble_rules}
id={dom_id}
class="flex justify-between"
>
<div class="flex items-center">
<.type_badge type={scrobble_rule.type} />
</div>
<div class="grow p-2">
<p class="text-sm text-zinc-900 dark:text-zinc-100">
{scrobble_rule.match_value}
</p>
<p class="text-xs font-mono text-zinc-500 dark:text-zinc-400 mt-2">
{scrobble_rule.target_musicbrainz_id}
</p>
<p class="text-xs text-zinc-500 dark:text-zinc-400 mt-2">
{scrobble_rule.description}
</p>
</div>
<div class="flex flex-col justify-center text-right">
<span>
<.status_badge enabled={scrobble_rule.enabled} />
</:cell>
<:cell>{scrobble_rule.description}</:cell>
<:cell>{Calendar.strftime(scrobble_rule.inserted_at, "%Y-%m-%d")}</:cell>
<:cell>
<.dropdown id={"actions-#{scrobble_rule.id}"} placement="bottom-end">
<:toggle>
<div>
<span class="sr-only">{gettext("Actions")}</span>
<.icon
name="hero-ellipsis-vertical"
class="-mt-1 h-5 w-5 text-zinc-500 dark:text-zinc-400 cursor-pointer"
aria-hidden="true"
data-slot="icon"
/>
</div>
</:toggle>
<.dropdown_button phx-click="apply_rule" phx-value-id={scrobble_rule.id}>
{gettext("Apply rule")}
</.dropdown_button>
<.dropdown_button phx-click="toggle_enabled" phx-value-id={scrobble_rule.id}>
{if scrobble_rule.enabled, do: gettext("Disable rule"), else: gettext("Enable rule")}
</.dropdown_button>
<.dropdown_link
id={"actions-#{scrobble_rule.id}-edit"}
patch={~p"/scrobble-rules/#{scrobble_rule}/edit"}
>
{gettext("Edit")}
</.dropdown_link>
<.separator />
<.dropdown_button
phx-click="delete"
phx-value-id={scrobble_rule.id}
data-confirm={gettext("Are you sure?")}
class={[
"text-red-900! hover:bg-red-50! dark:text-red-500! dark:hover:bg-red-900/30! dark:hover:text-red-600!"
]}
>
{gettext("Delete")}
</.dropdown_button>
</.dropdown>
</:cell>
</.table_row>
</.table_body>
</.table>
</span>
<span class="text-xs text-zinc-500 dark:text-zinc-400 text-nowrap mt-2">
{Calendar.strftime(scrobble_rule.inserted_at, "%Y-%m-%d")}
</span>
</div>
<div class="flex items-center">
<.dropdown id={"actions-#{scrobble_rule.id}"} placement="bottom-end">
<:toggle>
<div>
<span class="sr-only">{gettext("Actions")}</span>
<.icon
name="hero-ellipsis-vertical"
class="-mt-1 h-5 w-5 text-zinc-500 dark:text-zinc-400 cursor-pointer"
aria-hidden="true"
data-slot="icon"
/>
</div>
</:toggle>
<.dropdown_button phx-click="apply_rule" phx-value-id={scrobble_rule.id}>
{gettext("Apply rule")}
</.dropdown_button>
<.dropdown_button phx-click="toggle_enabled" phx-value-id={scrobble_rule.id}>
{if scrobble_rule.enabled, do: gettext("Disable rule"), else: gettext("Enable rule")}
</.dropdown_button>
<.dropdown_link
id={"actions-#{scrobble_rule.id}-edit"}
patch={~p"/scrobble-rules/#{scrobble_rule}/edit"}
>
{gettext("Edit")}
</.dropdown_link>
<.separator />
<.dropdown_button
phx-click="delete"
phx-value-id={scrobble_rule.id}
data-confirm={gettext("Are you sure?")}
class={[
"text-red-900! hover:bg-red-50! dark:text-red-500! dark:hover:bg-red-900/30! dark:hover:text-red-600!"
]}
>
{gettext("Delete")}
</.dropdown_button>
</.dropdown>
</div>
</li>
</ul>
</div>
<.modal
priv/gettext/default.pot
-18
View File
@@ -201,7 +201,6 @@ msgid "Total wishlist"
msgstr ""
#: lib/music_library_web/components/form_component.ex
#: lib/music_library_web/live/scrobble_rules_live/index.html.heex
#, elixir-autogen, elixir-format
msgid "Type"
msgstr ""
@@ -991,16 +990,6 @@ msgstr ""
msgid "Artist Name"
msgstr ""
#: lib/music_library_web/live/scrobble_rules_live/index.html.heex
#, elixir-autogen, elixir-format
msgid "Created"
msgstr ""
#: lib/music_library_web/live/scrobble_rules_live/index.html.heex
#, elixir-autogen, elixir-format
msgid "Description"
msgstr ""
#: lib/music_library_web/live/scrobble_rules_live/form_component.ex
#, elixir-autogen, elixir-format
msgid "Description (optional)"
@@ -1027,7 +1016,6 @@ msgid "Error applying rule: %{reason}"
msgstr ""
#: lib/music_library_web/live/scrobble_rules_live/form_component.ex
#: lib/music_library_web/live/scrobble_rules_live/index.html.heex
#, elixir-autogen, elixir-format
msgid "Match Value"
msgstr ""
@@ -1079,13 +1067,7 @@ msgstr ""
msgid "Select a rule type"
msgstr ""
#: lib/music_library_web/live/scrobble_rules_live/index.html.heex
#, elixir-autogen, elixir-format
msgid "Status"
msgstr ""
#: lib/music_library_web/live/scrobble_rules_live/form_component.ex
#: lib/music_library_web/live/scrobble_rules_live/index.html.heex
#, elixir-autogen, elixir-format
msgid "Target MusicBrainz ID"
msgstr ""
priv/gettext/en/LC_MESSAGES/default.po
-18
View File
@@ -201,7 +201,6 @@ msgid "Total wishlist"
msgstr ""
#: lib/music_library_web/components/form_component.ex
#: lib/music_library_web/live/scrobble_rules_live/index.html.heex
#, elixir-autogen, elixir-format
msgid "Type"
msgstr ""
@@ -991,16 +990,6 @@ msgstr ""
msgid "Artist Name"
msgstr ""
#: lib/music_library_web/live/scrobble_rules_live/index.html.heex
#, elixir-autogen, elixir-format
msgid "Created"
msgstr ""
#: lib/music_library_web/live/scrobble_rules_live/index.html.heex
#, elixir-autogen, elixir-format
msgid "Description"
msgstr ""
#: lib/music_library_web/live/scrobble_rules_live/form_component.ex
#, elixir-autogen, elixir-format
msgid "Description (optional)"
@@ -1027,7 +1016,6 @@ msgid "Error applying rule: %{reason}"
msgstr ""
#: lib/music_library_web/live/scrobble_rules_live/form_component.ex
#: lib/music_library_web/live/scrobble_rules_live/index.html.heex
#, elixir-autogen, elixir-format
msgid "Match Value"
msgstr ""
@@ -1079,13 +1067,7 @@ msgstr ""
msgid "Select a rule type"
msgstr ""
#: lib/music_library_web/live/scrobble_rules_live/index.html.heex
#, elixir-autogen, elixir-format, fuzzy
msgid "Status"
msgstr ""
#: lib/music_library_web/live/scrobble_rules_live/form_component.ex
#: lib/music_library_web/live/scrobble_rules_live/index.html.heex
#, elixir-autogen, elixir-format
msgid "Target MusicBrainz ID"
msgstr ""