From c0382cd2311fdee6f127ff268f5989b9409bc09f Mon Sep 17 00:00:00 2001
From: Henrik <hreissig@outlook.com>
Date: Mon, 18 Mar 2024 18:19:22 +0100
Subject: [PATCH] [TASK] Show total links count on hover and toggle on click

---
 resources/js/Components/LinkList/LinkList.svelte |  2 +-
 resources/js/Components/Pagination.svelte        | 11 ++++++++---
 resources/js/Pages/PublicLink/Show.svelte        |  2 +-
 3 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/resources/js/Components/LinkList/LinkList.svelte b/resources/js/Components/LinkList/LinkList.svelte
index 98bf218..18cfc5e 100644
--- a/resources/js/Components/LinkList/LinkList.svelte
+++ b/resources/js/Components/LinkList/LinkList.svelte
@@ -274,7 +274,7 @@
 
 {#if links.data.length && links.total > links.per_page}
     <Pagination prevPageUrl={links.prev_page_url} nextPageUrl={links.next_page_url} currentPage={links.current_page}
-                totalPages={Math.trunc(links.total / links.per_page) + 1}/>
+                totalPages={Math.trunc(links.total / links.per_page) + 1} totalLinks={links.total}/>
 {/if}
 <GroupSelectMenu on:changesSaved={() => bulkEditLinks(bulkEditingAction)} bind:this={groupSelectMenu}
                  bind:selectedGroups/>
diff --git a/resources/js/Components/Pagination.svelte b/resources/js/Components/Pagination.svelte
index f7ee13e..dc147c4 100644
--- a/resources/js/Components/Pagination.svelte
+++ b/resources/js/Components/Pagination.svelte
@@ -5,13 +5,18 @@
     export let nextPageUrl = '';
     export let currentPage = 0;
     export let totalPages = 0;
+    export let totalLinks = 0;
+
+    let showLinksCount = false;
 </script>
 
 <nav class="flex flex-col justify-center items-center mt-8 px-4 sm:flex-row sm:justify-end sm:px-0"
      aria-label="Pagination">
-    <div class="order-last mt-4 text-sm text-gray-600 font-medium sm:order-none sm:mt-0 sm:mr-4">
-        {currentPage} of {totalPages}
-    </div>
+    <button on:click={() => showLinksCount = !showLinksCount} type="button"
+            title={!showLinksCount ? `${totalLinks} links in total` : `${currentPage} of ${totalPages}`}
+            class="order-last mt-4 text-sm text-gray-600 font-medium sm:order-none sm:mt-0 sm:mr-4">
+        {showLinksCount ? `${totalLinks} links in total` : `${currentPage} of ${totalPages}`}
+    </button>
     <div class="flex bg-white ring-1 ring-[#DFDFDF] divide-x divide-gray-100 shadow-sm rounded-md overflow-hidden">
         <Link href={prevPageUrl} aria-disabled={!prevPageUrl}
               class="inline-flex items-center px-5 py-3 text-gray-500 hover:bg-gray-50 aria-disabled:text-gray-200 aria-disabled:pointer-events-none">
diff --git a/resources/js/Pages/PublicLink/Show.svelte b/resources/js/Pages/PublicLink/Show.svelte
index 79bba8f..4429f6a 100644
--- a/resources/js/Pages/PublicLink/Show.svelte
+++ b/resources/js/Pages/PublicLink/Show.svelte
@@ -104,6 +104,6 @@
     {#if links.data.length && links.total > links.per_page}
         <Pagination prevPageUrl={links.prev_page_url} nextPageUrl={links.next_page_url}
                     currentPage={links.current_page}
-                    totalPages={Math.trunc(links.total / links.per_page) + 1}/>
+                    totalPages={Math.trunc(links.total / links.per_page) + 1} totalLinks={links.total}/>
     {/if}
 </Main>