[TASK] Show total links count on hover and toggle on click

beromir · Mar 18, 2024 · c0382cd · c0382cd
1 parent 6b8da97
commit c0382cd
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 5 deletions.
diff --git 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
@@ -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
@@ -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>