From 1b6340a0c16828f003938ecd43db8848c6d62aa7 Mon Sep 17 00:00:00 2001
From: Blake Niemyjski <bniemyjski@gmail.com>
Date: Sun, 17 Sep 2023 10:36:45 -0500
Subject: [PATCH] Added ability to navigate to the first page

---
 .../src/lib/components/events/EventsTable.svelte   | 13 ++++++++++++-
 .../src/lib/components/table/Pager.svelte          | 14 ++++++++++++--
 .../ClientApp/src/lib/helpers/api.ts               |  4 ++++
 3 files changed, 28 insertions(+), 3 deletions(-)

diff --git a/src/Exceptionless.Web/ClientApp/src/lib/components/events/EventsTable.svelte b/src/Exceptionless.Web/ClientApp/src/lib/components/events/EventsTable.svelte
index 6394c61b33..7dd65220f2 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/components/events/EventsTable.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/lib/components/events/EventsTable.svelte
@@ -30,7 +30,7 @@
 	import ErrorMessage from '$comp/ErrorMessage.svelte';
 	import Table from '$comp/table/Table.svelte';
 	import { createEventDispatcher, onMount } from 'svelte';
-	import { DEFAULT_LIMIT, hasNextPage, hasPreviousPage } from '$lib/helpers/api';
+	import { DEFAULT_LIMIT, hasNextPage, hasPreviousPage, canNavigateToFirstPage } from '$lib/helpers/api';
 	import { type FetchClientResponse, FetchClient } from '$api/FetchClient';
 
 	export let mode: GetEventsMode = 'summary';
@@ -203,6 +203,15 @@
 		}
 	}
 
+	function onNavigateToFirstPage() {
+		page = 0;
+		parameters.update((params) => ({
+			...params,
+			before: undefined,
+			after: undefined
+		}));
+	}
+
 	function onPreviousPage() {
 		page = Math.max(page - 1, 0);
 		parameters.update((params) => ({
@@ -248,6 +257,8 @@
 
 		<div class="py-2">
 			<Pager
+                canNavigateToFirstPage={canNavigateToFirstPage(page)}
+				on:navigatetofirstpage={() => onNavigateToFirstPage()}
 				hasPrevious={hasPreviousPage(page)}
 				on:previous={() => onPreviousPage()}
 				hasNext={hasNextPage(
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/components/table/Pager.svelte b/src/Exceptionless.Web/ClientApp/src/lib/components/table/Pager.svelte
index a2b75a8298..77d7d6866e 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/components/table/Pager.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/lib/components/table/Pager.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
+	import FirstPageIcon from '~icons/mdi/first-page';
+	import NavigateBeforeIcon from '~icons/mdi/navigate-before';
+	import NavigateNextIcon from '~icons/mdi/navigate-next';
 	import { createEventDispatcher } from 'svelte';
 
+	export let canNavigateToFirstPage: boolean;
 	export let hasPrevious: boolean;
 	export let hasNext: boolean;
 
@@ -8,14 +12,20 @@
 </script>
 
 <div class="join">
+    {#if canNavigateToFirstPage}
+	<button
+		class="btn btn-square btn-outline join-item btn-sm"
+		on:click|preventDefault={() => dispatch('navigatetofirstpage')}><FirstPageIcon /></button
+	>
+    {/if}
 	<button
 		class="btn btn-square btn-outline join-item btn-sm"
 		disabled={!hasPrevious}
-		on:click|preventDefault={() => dispatch('previous')}>&lt;</button
+		on:click|preventDefault={() => dispatch('previous')}><NavigateBeforeIcon /></button
 	>
 	<button
 		class="btn btn-square btn-outline join-item btn-sm"
 		disabled={!hasNext}
-		on:click|preventDefault={() => dispatch('next')}>&gt;</button
+		on:click|preventDefault={() => dispatch('next')}><NavigateNextIcon /></button
 	>
 </div>
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/helpers/api.ts b/src/Exceptionless.Web/ClientApp/src/lib/helpers/api.ts
index efc00975b6..5ad08fc7f1 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/helpers/api.ts
+++ b/src/Exceptionless.Web/ClientApp/src/lib/helpers/api.ts
@@ -8,6 +8,10 @@ export function getPageEnd(page: number, pageTotal: number, limit: number): numb
 	return getPageStart(page, limit) + pageTotal - 1;
 }
 
+export function canNavigateToFirstPage(page: number): boolean {
+    return page > 1;
+}
+
 export function hasPreviousPage(page: number): boolean {
 	return page > 0;
 }