#21 Add pagination to contents

cmd/mb3server/src/api-impl.go

@@ -92,13 +92,14 @@ func GetBrowseOptions() (*BrowseOptions, error) {
  return &result, nil
 }
 
-func GetRecords(limit int32, offset int32) (*SearchResult, error) {
+func GetRecords(limit int32, page int32) (*SearchResult, error) {
  if limit <= 0 {
  limit = 20
  }
- if offset <= 0 {
- offset = 0
+ if page <= 0 {
+ page = 1
  }
+ var offset = (page - 1) * limit
  if err := initDB(); err != nil {
  return nil, err
  }
@@ -127,7 +128,7 @@ func GetRecords(limit int32, offset int32) (*SearchResult, error) {
  for _, record := range records {
  var val = SearchResultDataInner{
  Data: map[string]interface{}{},
- Name: record.Compound.Names[1].String,
+ Name: record.Compound.Names[0].String,
  Formula: record.Compound.Formula.String,
  Mass: record.Compound.Mass.Value,
  Smiles: record.Compound.Smiles.String,

cmd/mb3server/src/api_default_service.go

@@ -70,7 +70,7 @@ func (s *DefaultApiService) GetRecord(ctx context.Context, accession string) (Im
 
 // GetRecords - Get a list of records
 func (s *DefaultApiService) GetRecords(ctx context.Context, instrumentType []string, splash string, msType []string, ionMode string, compoundName string, exactMass string, massTolerance float64, formula string, peaks []string, intensity int32, peakDifferences []string, peakList []string, limit int32, page int32, intensityCutoff int32, inchiKey string, contributor string) (ImplResponse, error) {
- result, err := GetRecords(limit, (page-1)*limit)
+ result, err := GetRecords(limit, page)
  if err != nil {
  return Response(http.StatusInternalServerError, nil), errors.New("Could not get results")
  }

web-frontend/src/lib/components/MainNav.svelte

@@ -18,7 +18,7 @@
  <a href="https://github.com/MassBank/MassBank-data/releases/latest" target="_blank" class="pure-menu-link">Download</a>
  </li>
  <li class="pure-menu-item">
- <input type="search" placeholder="Accession" bind:value="{acc}"><button on:click={() => goto('/record/'+acc)}>Go</button>
+ <input type="search" placeholder="Accession" bind:value="{acc}"><button on:click={() => goto('/record/'+acc)}>Go</button>{acc}
  </li>
  <li class="pure-menu-item pure-menu-has-children pure-menu-allow-hover">
  <a href="#" id="moreLink" class="pure-menu-link">More</a>

web-frontend/src/lib/components/Pagination.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+ export let currentPage: bigint=1;
+ export let pages: bigint=1;
+ export let size: bigint = 4;
+ function setPage(page) {
+ currentPage = page;
+ }
+</script>
+
+<div class="pagination">
+ <button disabled={currentPage==1} class="page-link-btn" on:click={() => setPage(1)}>1</button>
+ <button disabled={currentPage<2} class="page-link-btn" on:click={() => setPage(currentPage-1)}>previous</button>
+ <span class:hide={currentPage-size<2}>...</span>
+ {#each Array(size).fill().map((element,index) => index+(currentPage-size)) as p}
+ <button disabled={p<1 || p>pages} class="page-link-btn page-label-btn" on:click={() => setPage(p)}> {p > pages || p<1 ? '-' : p} </button>
+ {/each}
+ <span class="current-page">{currentPage}</span>
+ {#each Array(size).fill().map((element,index) => index+(currentPage+1)) as p}
+ <button disabled={p > pages || p<1} class="page-link-btn page-label-btn" on:click={() => setPage(p)}>{p > pages || p<1 ? '-' : p} </button>
+ {/each}
+ <span class:hide={currentPage+size>=pages}>...</span>
+ <button disabled={currentPage>=pages} class="page-link-btn" on:click={() => setPage(currentPage+1)}>next</button>
+ <button disabled={currentPage>=pages} class="page-link-btn" on:click={() => setPage(pages)}>{pages}</button>
+</div>
+<slot></slot>
+
+<style>
+ .current-page {
+ font-size: 1.2em;
+ font-weight: bold;
+ width: 4em;
+ display: inline-block;
+ text-align: center;
+ }
+
+ .page-link-btn {
+ font-size: 0.9em;
+ padding: 5px;
+ }
+
+ .page-label-btn {
+ width: 4em;
+ }
+
+ .hide {
+ color: lightgrey;
+ }
+</style>

web-frontend/src/routes/contents/+page.svelte

@@ -2,11 +2,13 @@
  import Header from "$lib/components/Header.svelte";
  import FilterButton from "$component/FilterBox.svelte";
  import ShortRecordSummary from "$component/ShortRecordSummary.svelte";
+ import Pagination from "$component/Pagination.svelte";
 
  /** @type {import('./$types').PageData} */
  export let data: any;
  let base: string;
-
+ let page: bigint = 1;
+ let pages: bigint = 10;
  async function getFilters(base) {
  let resp = await fetch(base + "/v1/filter/browse");
  let jsonData = await resp.json();
@@ -19,8 +21,11 @@
 
  }
 
- async function getResults(filters) {
- let resp = await fetch(base+"/v1/records")
+ async function getResults(page) {
+ let url = new URL("/v1/records",base)
+ url.searchParams.append('page',page.toString())
+ console.log(url)
+ let resp = await fetch(url)
  let jsonData = await resp.json();
  if(resp.ok) {
  console.log(JSON.stringify(jsonData))
@@ -35,7 +40,7 @@
  $: base = data.baseurl;
 </script>
 
-
+{page}
 <div class="pure-g">
  <div class="pure-u-1-5">
  {#await getFilters(base)}
@@ -70,13 +75,15 @@
  </div>
  <div class="pure-u-4-5">
  <h2>Results</h2>
- {#await getResults(base)}
+ {#await getResults(page)}
  <div class="info">Loading results...</div>
  {:then records}
+ <Pagination bind:currentPage={page} pages={pages}>
  {#each records.data as record}
  <ShortRecordSummary record="{record}"></ShortRecordSummary>
  {/each}
- {:catch error}
+ </Pagination>
+ {:catch error}
  <div class="error">Error while loading results</div>
  {/await}
  </div>

web-frontend/src/routes/record/[id]/+page.js

@@ -1,6 +1,10 @@
 /** @type {import('./$types').PageLoad} */
-export function load({ params }) {
+import { error } from '@sveltejs/kit';
+
+/** @type {import('./$types').PageLoad} */
+export function load({params: {id}}) {
  return {
- accession: params.id
+ title: "Massbank Europe",
+ accession: id
  };
 }