From d7cb6b5471b969503c523ec97110ec4530867a39 Mon Sep 17 00:00:00 2001 From: Kieran Eglin Date: Sun, 19 May 2024 14:45:57 -0700 Subject: [PATCH] Refactored tab layout to grab tabs by name --- assets/js/tabs.js | 14 +++++++------- .../custom_components/tab_components.ex | 19 +++++++++++++------ .../custom_components/table_components.ex | 2 +- .../media_item_html/show.html.heex | 4 ++-- .../media_profile_html/show.html.heex | 4 ++-- .../sources/source_html/index.html.heex | 2 +- .../sources/source_html/show.html.heex | 8 ++++---- 7 files changed, 30 insertions(+), 23 deletions(-) diff --git a/assets/js/tabs.js b/assets/js/tabs.js index 964223d..0d1cfa8 100644 --- a/assets/js/tabs.js +++ b/assets/js/tabs.js @@ -1,20 +1,20 @@ -window.setTabIndex = (index) => { - window.location.hash = `tab-${index}` +window.setTabByName = (tabName) => { + window.location.hash = `tab-${tabName}` - return index + return tabName } // The conditionals and currIndex stuff ensures that // the tab index is always set to 0 if the hash is empty // AND other hash values are ignored -window.getTabIndex = (currIndex) => { +window.getTabFromHash = (currentTabName, defaultTabName) => { if (window.location.hash === '' || window.location.hash === '#') { - return 0 + return defaultTabName } if (window.location.hash.startsWith('#tab-')) { - return parseInt(window.location.hash.replace('#tab-', '')) + return window.location.hash.replace('#tab-', '') } - return currIndex + return currentTabName } diff --git a/lib/pinchflat_web/components/custom_components/tab_components.ex b/lib/pinchflat_web/components/custom_components/tab_components.ex index fda08bd..56cfe2a 100644 --- a/lib/pinchflat_web/components/custom_components/tab_components.ex +++ b/lib/pinchflat_web/components/custom_components/tab_components.ex @@ -6,25 +6,32 @@ defmodule PinchflatWeb.CustomComponents.TabComponents do Takes a list of tabs and renders them in a tabbed layout. """ slot :tab, required: true do + attr :id, :string, required: true attr :title, :string, required: true end slot :tab_append, required: false def tabbed_layout(assigns) do + assigns = Map.put(assigns, :first_tab_id, hd(assigns.tab).id) + ~H"""
<%= tab.title %> @@ -35,7 +42,7 @@ defmodule PinchflatWeb.CustomComponents.TabComponents do
-
+
<%= render_slot(tab) %>
diff --git a/lib/pinchflat_web/components/custom_components/table_components.ex b/lib/pinchflat_web/components/custom_components/table_components.ex index fa283d3..166a313 100644 --- a/lib/pinchflat_web/components/custom_components/table_components.ex +++ b/lib/pinchflat_web/components/custom_components/table_components.ex @@ -36,7 +36,7 @@ defmodule PinchflatWeb.CustomComponents.TableComponents do - + - <:tab title="Media"> + <:tab title="Media" id="media">
<%= if media_file_exists?(@media_item) do %>
@@ -52,7 +52,7 @@
- <:tab title="Tasks"> + <:tab title="Tasks" id="tasks"> <%= if match?([_|_], @media_item.tasks) do %> <.table rows={@media_item.tasks} table_class="text-black dark:text-white"> <:col :let={task} label="Worker"> diff --git a/lib/pinchflat_web/controllers/media_profiles/media_profile_html/show.html.heex b/lib/pinchflat_web/controllers/media_profiles/media_profile_html/show.html.heex index 7a33fe8..2168292 100644 --- a/lib/pinchflat_web/controllers/media_profiles/media_profile_html/show.html.heex +++ b/lib/pinchflat_web/controllers/media_profiles/media_profile_html/show.html.heex @@ -23,13 +23,13 @@ <.actions_dropdown media_profile={@media_profile} /> - <:tab title="Media Profile"> + <:tab title="Media Profile" id="media-profile">

Raw Attributes

<.list_items_from_map map={Map.from_struct(@media_profile)} />
- <:tab title="Sources"> + <:tab title="Sources" id="sources"> <.table rows={@sources} table_class="text-black dark:text-white"> <:col :let={source} label="Name"> <.subtle_link href={~p"/sources/#{source.id}"}> diff --git a/lib/pinchflat_web/controllers/sources/source_html/index.html.heex b/lib/pinchflat_web/controllers/sources/source_html/index.html.heex index 675601c..a064d53 100644 --- a/lib/pinchflat_web/controllers/sources/source_html/index.html.heex +++ b/lib/pinchflat_web/controllers/sources/source_html/index.html.heex @@ -19,8 +19,8 @@ <:col :let={source} label="Type"><%= source.collection_type %> - <:col :let={source} label="Downloaded"><%= source.downloaded_count %> <:col :let={source} label="Pending"><%= source.pending_count %> + <:col :let={source} label="Downloaded"><%= source.downloaded_count %> <:col :let={source} label="Retention"> <%= if source.retention_period_days && source.retention_period_days > 0 do %> <%= source.retention_period_days %> day(s) diff --git a/lib/pinchflat_web/controllers/sources/source_html/show.html.heex b/lib/pinchflat_web/controllers/sources/source_html/show.html.heex index 92104c8..00ad375 100644 --- a/lib/pinchflat_web/controllers/sources/source_html/show.html.heex +++ b/lib/pinchflat_web/controllers/sources/source_html/show.html.heex @@ -23,7 +23,7 @@ <.actions_dropdown source={@source} conn={@conn} /> - <:tab title="Source"> + <:tab title="Source" id="source">

Raw Attributes

@@ -36,21 +36,21 @@ <.list_items_from_map map={Map.from_struct(@source)} />
- <:tab title="Pending Media"> + <:tab title="Pending Media" id="pending"> <%= live_render( @conn, Pinchflat.Sources.MediaItemTableLive, session: %{"source_id" => @source.id, "media_state" => "pending"} ) %> - <:tab title="Downloaded Media"> + <:tab title="Downloaded Media" id="downloaded"> <%= live_render( @conn, Pinchflat.Sources.MediaItemTableLive, session: %{"source_id" => @source.id, "media_state" => "downloaded"} ) %> - <:tab title="Pending Tasks"> + <:tab title="Pending Tasks" id="tasks"> <%= if match?([_|_], @pending_tasks) do %> <.table rows={@pending_tasks} table_class="text-black dark:text-white"> <:col :let={task} label="Worker">