[Enhancement] Add "Copy JSON" action button to help when troubleshooting (#224)

* [WIP] [skip ci] * Added 'copy JSON' button to all dropdowns; hopefully fixed some CSS silliness
2024-05-03 10:07:59 -07:00 · 2024-05-03 10:07:59 -07:00 · 5427c6247f
commit 5427c6247f
parent f655a8ae01
15 changed files with 91 additions and 37 deletions
--- a/assets/js/alpine_helpers.js
+++ b/assets/js/alpine_helpers.js
@ -22,6 +22,12 @@ window.copyTextToClipboard = async (text) => {
  }
 }

+window.copyWithCallbacks = async (text, onCopy, onAfterDelay, delay = 4000) => {
+  await window.copyTextToClipboard(text)
+  onCopy()
+  setTimeout(onAfterDelay, delay)
+}
+
 window.markVersionAsSeen = (versionString) => {
  localStorage.setItem('seenVersion', versionString)
 }
--- a/lib/pinchflat_web/controllers/media_items/media_item_html/actions_dropdown.html.heex
+++ b/lib/pinchflat_web/controllers/media_items/media_item_html/actions_dropdown.html.heex
@ -1,4 +1,19 @@
 <.button_dropdown text="Actions" class="justify-center w-full sm:w-50">
+  <:option>
+    <span x-data="{ copied: false }" x-on:click={~s"
+        copyWithCallbacks(
+          `#{Jason.Formatter.pretty_print(Phoenix.json_library().encode!(@media_item))}`, 
+          () => copied = true, 
+          () => copied = false
+        )
+      "}>
+      Copy JSON
+      <span x-show="copied" x-transition.duration.150ms><.icon name="hero-check" class="ml-2 h-4 w-4" /></span>
+    </span>
+  </:option>
+  <:option>
+    <div class="h-px w-full bg-bodydark2"></div>
+  </:option>
  <:option>
    <.link
      href={~p"/sources/#{@media_item.source_id}/media/#{@media_item}/force_download"}
--- a/lib/pinchflat_web/controllers/media_items/media_item_html/edit.html.heex
+++ b/lib/pinchflat_web/controllers/media_items/media_item_html/edit.html.heex
@ -5,7 +5,7 @@
 </div>

 <div class="rounded-sm border border-stroke bg-white px-5 pb-2.5 pt-6 shadow-default dark:border-strokedark dark:bg-boxdark sm:px-7.5 xl:pb-1">
-  <div class="max-w-full overflow-x-auto">
+  <div class="max-w-full">
    <div class="flex flex-col gap-10">
      <.media_item_form changeset={@changeset} action={~p"/sources/#{@media_item.source_id}/media/#{@media_item}"} />
    </div>
--- a/lib/pinchflat_web/controllers/media_items/media_item_html/show.html.heex
+++ b/lib/pinchflat_web/controllers/media_items/media_item_html/show.html.heex
@ -17,7 +17,7 @@
  </nav>
 </div>
 <div class="rounded-sm border border-stroke bg-white py-5 pt-6 shadow-default dark:border-strokedark dark:bg-boxdark px-7.5">
-  <div class="max-w-full overflow-x-auto">
+  <div class="max-w-full">
    <.tabbed_layout>
      <:tab_append>
        <.actions_dropdown media_item={@media_item} />
--- a/lib/pinchflat_web/controllers/media_profiles/media_profile_html/actions_dropdown.html.heex
+++ b/lib/pinchflat_web/controllers/media_profiles/media_profile_html/actions_dropdown.html.heex
@ -0,0 +1,36 @@
+<.button_dropdown text="Actions" class="justify-center w-full sm:w-50">
+  <:option>
+    <span x-data="{ copied: false }" x-on:click={~s"
+        copyWithCallbacks(
+          `#{Jason.Formatter.pretty_print(Phoenix.json_library().encode!(@media_profile))}`, 
+          () => copied = true, 
+          () => copied = false
+        )
+      "}>
+      Copy JSON
+      <span x-show="copied" x-transition.duration.150ms><.icon name="hero-check" class="ml-2 h-4 w-4" /></span>
+    </span>
+  </:option>
+  <:option>
+    <div class="h-px w-full bg-bodydark2"></div>
+  </:option>
+  <:option>
+    <.link
+      href={~p"/media_profiles/#{@media_profile}"}
+      method="delete"
+      data-confirm="Are you sure you want to delete this profile and all its sources (leaving files in place)? This cannot be undone."
+    >
+      Delete Profile
+    </.link>
+  </:option>
+  <:option>
+    <.link
+      href={~p"/media_profiles/#{@media_profile}?delete_files=true"}
+      method="delete"
+      data-confirm="Are you sure you want to delete this profile, all its sources, and its files on disk? This cannot be undone."
+      class="mt-5 md:mt-0"
+    >
+      Delete Profile + Files
+    </.link>
+  </:option>
+</.button_dropdown>
--- a/lib/pinchflat_web/controllers/media_profiles/media_profile_html/edit.html.heex
+++ b/lib/pinchflat_web/controllers/media_profiles/media_profile_html/edit.html.heex
@ -8,7 +8,7 @@
 </div>

 <div class="rounded-sm border border-stroke bg-white px-5 pb-2.5 pt-6 shadow-default dark:border-strokedark dark:bg-boxdark sm:px-7.5 xl:pb-1">
-  <div class="max-w-full overflow-x-auto">
+  <div class="max-w-full">
    <div class="flex flex-col gap-10">
      <.media_profile_form changeset={@changeset} action={~p"/media_profiles/#{@media_profile}"} />
    </div>
--- a/lib/pinchflat_web/controllers/media_profiles/media_profile_html/new.html.heex
+++ b/lib/pinchflat_web/controllers/media_profiles/media_profile_html/new.html.heex
@ -6,7 +6,7 @@
 </div>

 <div class="rounded-sm border border-stroke bg-white px-5 pb-2.5 pt-6 shadow-default dark:border-strokedark dark:bg-boxdark sm:px-7.5 xl:pb-1">
-  <div class="max-w-full overflow-x-auto">
+  <div class="max-w-full">
    <div class="flex flex-col gap-10">
      <.media_profile_form changeset={@changeset} action={~p"/media_profiles"} />
    </div>
--- 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
@ -17,30 +17,10 @@
  </nav>
 </div>
 <div class="rounded-sm border border-stroke bg-white px-5 pb-2.5 pt-6 shadow-default dark:border-strokedark dark:bg-boxdark sm:px-7.5 xl:pb-1">
-  <div class="max-w-full overflow-x-auto">
+  <div class="max-w-full">
    <.tabbed_layout>
      <:tab_append>
-        <.button_dropdown text="Actions" class="justify-center w-full sm:w-50">
-          <:option>
-            <.link
-              href={~p"/media_profiles/#{@media_profile}"}
-              method="delete"
-              data-confirm="Are you sure you want to delete this profile and all its sources (leaving files in place)? This cannot be undone."
-            >
-              Delete Profile
-            </.link>
-          </:option>
-          <:option>
-            <.link
-              href={~p"/media_profiles/#{@media_profile}?delete_files=true"}
-              method="delete"
-              data-confirm="Are you sure you want to delete this profile, all its sources, and its files on disk? This cannot be undone."
-              class="mt-5 md:mt-0"
-            >
-              Delete Profile + Files
-            </.link>
-          </:option>
-        </.button_dropdown>
+        <.actions_dropdown media_profile={@media_profile} />
      </:tab_append>

      <:tab title="Media Profile">
--- a/lib/pinchflat_web/controllers/searches/search_html/show.html.heex
+++ b/lib/pinchflat_web/controllers/searches/search_html/show.html.heex
@ -5,7 +5,7 @@
 </div>

 <div class="rounded-sm border border-stroke bg-white px-5 py-5 shadow-default dark:border-strokedark dark:bg-boxdark sm:px-7.5">
-  <div class="max-w-full overflow-x-auto">
+  <div class="max-w-full">
    <div class="flex flex-col gap-10 dark:text-white">
      <%= if match?([_|_], @search_results) do %>
        <.table rows={@search_results} table_class="text-black dark:text-white">
--- a/lib/pinchflat_web/controllers/settings/setting_html/setting_form.html.heex
+++ b/lib/pinchflat_web/controllers/settings/setting_html/setting_form.html.heex
@ -3,7 +3,7 @@
    Oops, something went wrong! Please check the errors below.
  </.error>

-  <h3 class="mt-8 text-2xl text-black dark:text-white">
+  <h3 class="mt-2 md:mt-8 text-2xl text-black dark:text-white">
    Notification Settings
  </h3>

@ -17,5 +17,5 @@
    placeholder="https://discordapp.com/api/webhooks/{WebhookID}/{WebhookToken}"
  />

-  <.button class="my-10 sm:mb-7.5 w-full sm:w-auto" rounding="rounded-lg">Save Settings</.button>
+  <.button class="mt-10 mb-4 sm:mb-8 w-full sm:w-auto" rounding="rounded-lg">Save Settings</.button>
 </.simple_form>
--- a/lib/pinchflat_web/controllers/settings/setting_html/show.html.heex
+++ b/lib/pinchflat_web/controllers/settings/setting_html/show.html.heex
@ -6,7 +6,7 @@
  </div>
 </div>
 <div class="rounded-sm border border-stroke bg-white px-5 py-5 shadow-default dark:border-strokedark dark:bg-boxdark sm:px-7.5">
-  <div class="max-w-full overflow-x-auto">
+  <div class="max-w-full">
    <.setting_form changeset={@changeset} action={~p"/settings"} />
  </div>
 </div>
--- a/lib/pinchflat_web/controllers/sources/source_html/actions_dropdown.html.heex
+++ b/lib/pinchflat_web/controllers/sources/source_html/actions_dropdown.html.heex
@ -3,15 +3,32 @@
    <span
      x-data="{ copied: false }"
      x-on:click={"
-                window.copyTextToClipboard('#{rss_feed_url(@conn, @source)}')
-                copied = true
-                setTimeout(() => copied = false, 4000)
-              "}
+        copyWithCallbacks(
+          '#{rss_feed_url(@conn, @source)}', 
+          () => copied = true, 
+          () => copied = false
+        )
+      "}
    >
      Copy RSS Feed
      <span x-show="copied" x-transition.duration.150ms><.icon name="hero-check" class="ml-2 h-4 w-4" /></span>
    </span>
  </:option>
+  <:option>
+    <span x-data="{ copied: false }" x-on:click={~s"
+        copyWithCallbacks(
+          `#{Jason.Formatter.pretty_print(Phoenix.json_library().encode!(@source))}`, 
+          () => copied = true, 
+          () => copied = false
+        )
+      "}>
+      Copy JSON
+      <span x-show="copied" x-transition.duration.150ms><.icon name="hero-check" class="ml-2 h-4 w-4" /></span>
+    </span>
+  </:option>
+  <:option>
+    <div class="h-px w-full bg-bodydark2"></div>
+  </:option>
  <:option :if={@source.download_media}>
    <.link
      href={~p"/sources/#{@source}/force_download"}
--- a/lib/pinchflat_web/controllers/sources/source_html/edit.html.heex
+++ b/lib/pinchflat_web/controllers/sources/source_html/edit.html.heex
@ -8,7 +8,7 @@
 </div>

 <div class="rounded-sm border border-stroke bg-white px-5 pb-2.5 pt-6 shadow-default dark:border-strokedark dark:bg-boxdark sm:px-7.5 xl:pb-1">
-  <div class="max-w-full overflow-x-auto">
+  <div class="max-w-full">
    <div class="flex flex-col gap-10">
      <.source_form changeset={@changeset} media_profiles={@media_profiles} action={~p"/sources/#{@source}"} />
    </div>
--- a/lib/pinchflat_web/controllers/sources/source_html/new.html.heex
+++ b/lib/pinchflat_web/controllers/sources/source_html/new.html.heex
@ -6,7 +6,7 @@
 </div>

 <div class="rounded-sm border border-stroke bg-white px-5 pb-2.5 pt-6 shadow-default dark:border-strokedark dark:bg-boxdark sm:px-7.5 xl:pb-1">
-  <div class="max-w-full overflow-x-auto">
+  <div class="max-w-full">
    <div class="flex flex-col gap-10">
      <.source_form changeset={@changeset} media_profiles={@media_profiles} action={~p"/sources"} />
    </div>
--- a/lib/pinchflat_web/controllers/sources/source_html/show.html.heex
+++ b/lib/pinchflat_web/controllers/sources/source_html/show.html.heex
@ -17,7 +17,7 @@
  </nav>
 </div>
 <div class="rounded-sm border border-stroke bg-white px-5 py-5 shadow-default dark:border-strokedark dark:bg-boxdark sm:px-7.5">
-  <div class="max-w-full overflow-x-auto">
+  <div class="max-w-full">
    <.tabbed_layout>
      <:tab_append>
        <.actions_dropdown source={@source} conn={@conn} />