@@ -15,9 +15,17 @@
1515 let selectedShipIndex: number;
1616 let page: number = 0;
1717 let pageSize: number = 50;
18+ let totalPages, firstItemOnPage;
1819 let searchStatus: ('init' | 'prog' | 'done' | 'fail') = 'init';
1920 let notification: string = null;
20− $: { searchedContacts.search(query) }
21+
22+ let timer;
23+ $: {
24+ clearTimeout(timer);
25+ timer = setTimeout(() => {
26+ searchedContacts.search(query);
27+ }, 1000);
28+ }
2129 $: searchedPointsP = searchPoints(search);
2230 $: {
2331 searchStatus = 'prog';
@@ -56,8 +64,15 @@
5664 selectedShipIndex = null;
5765 }
5866 }
59− $: totalPages = Math.ceil(combinedSearchResults.length / pageSize);
60− $: firstItemOnPage = page * pageSize
67+ $: {
68+ totalPages = Math.ceil(combinedSearchResults.length / pageSize);
69+ firstItemOnPage = page * pageSize;
70+ if (firstItemOnPage >= combinedSearchResults.length) {
71+ page = totalPages - 1;
72+ } else if (firstItemOnPage < 0) {
73+ page = 0;
74+ }
75+ }
6176 $: pageResults = combinedSearchResults.slice(firstItemOnPage, (page + 1) * pageSize);
6277 $: itemRangeText = pageResults.length == combinedSearchResults.length ? 'all' :
6378 `${firstItemOnPage + 1}-${firstItemOnPage + pageResults.length}`;
@@ -96,5 +111,14 @@
96111 ships={pageResults}
97112 linkToShips differentiateContacts
98113 />
114+ {#if pageResults.length >= 5}
115+ <SearchResultsNavButtons {page} {pageSize} {totalPages}
116+ on:updatePage={({ detail }) => page = detail.page}
117+ >
118+ <p class="px-4 py-8 text-center">
119+ Showing {itemRangeText} of {combinedSearchResults.length} results
120+ </p>
121+ </SearchResultsNavButtons>
122+ {/if}
99123 </div>
100124{/if}