complete pagination

src/components/pagination/Pagination.svelte

@@ -23,14 +23,26 @@
   const onClickPrev = event => {
     if (prevDisabled) return
     trigger('prev', --current_page)
+    trigger('change', current_page)
   }
 
   const onClickNext = event => {
     if (nextDisabled) return
     trigger('next', ++current_page)
+    trigger('change', current_page)
   }
 </script>
 
+<style>
+  .pagination {
+    margin-left: 1rem !important;
+  }
+
+  .menu.mini {
+    font-size: 0.6rem;
+  }
+</style>
+
 {#if shouldDisplay}
   Page {page} of {total_pages}
   <div class="ui pagination menu {className}">

src/footer/Footer.svelte

@@ -10,7 +10,7 @@
 
 <footer class="ui segment">
   <p>
-    Created with 🖤 by
+    Made with 🖤 by
     <a href="https://github.com/antonkorotkov" target="_blank">
       @antonkorotkov
     </a>

src/store/search.js

@@ -12,7 +12,13 @@ export const search = store => {
       useSource: false,
       _source: '',
       requestBody: {
-        query: '',
+        query: {
+          bool: {
+            must: {
+              match_all: {},
+            },
+          },
+        },
         size: 10,
         from: 0,
         _source: true,

src/workspace/search/Search.svelte

@@ -3,6 +3,7 @@
   import JSONEditor from 'jsoneditor'
   import { useStoreon } from '@storeon/svelte'
   import { onMount, onDestroy, afterUpdate } from 'svelte'
+  import get from 'lodash/get'
 
   import Pagination from '../../components/pagination/Pagination.svelte'
 
@@ -23,6 +24,20 @@
       ]
   )
 
+  $: uriPaginationCurrentPage = () => Math.round($search.from / $search.size)
+
+  $: bodyPaginationCurrentPage = () => {
+    const body = $search.requestBody
+    const from = get(body, 'from', 0)
+    const size = get(body, 'size', 10)
+
+    return Math.round(from / size)
+  }
+
+  $: bodyPaginationOffset = () => get($search.requestBody, 'from', 0)
+
+  $: bodyPaginationItemsPerPage = () => get($search.requestBody, 'size', 10)
+
   const onEditorChange = () => {
     try {
       if (qEditor) {
@@ -125,10 +140,26 @@
     }
   })
 
-  const onPaginationChanged = ({ detail }) => {
+  const onUriPaginationChanged = ({ detail }) => {
     dispatch('search/update', { from: $search.size * detail })
     dispatch('search/run')
   }
+
+  const onBodyPaginationChanged = ({ detail }) => {
+    try {
+      const requestBody = qEditor.get()
+      const size = get(requestBody, 'size', 10)
+      requestBody.from = size * detail
+      qEditor.set(requestBody)
+      dispatch('search/update', { requestBody })
+      dispatch('search/run')
+    } catch (error) {
+      dispatch('notification/add', {
+        type: 'error',
+        message: error.message,
+      })
+    }
+  }
 </script>
 
 <style>
@@ -315,15 +346,27 @@
         </div>
       </div>
       <div class="four wide column pagination">
-        <Pagination
-          className="mini"
-          disable={$search.loading}
-          current_page={Math.round($search.from / $search.size)}
-          offset={$search.from}
-          items_per_page={$search.size}
-          total_items={$search.stats.total_results}
-          on:prev={onPaginationChanged}
-          on:next={onPaginationChanged} />
+        {#if $search.type === 'uri'}
+          <Pagination
+            className="mini"
+            disable={$search.loading}
+            current_page={uriPaginationCurrentPage()}
+            offset={$search.from}
+            items_per_page={$search.size}
+            total_items={$search.stats.total_results}
+            on:change={onUriPaginationChanged} />
+        {/if}
+
+        {#if $search.type === 'body'}
+          <Pagination
+            className="mini"
+            disable={$search.loading}
+            current_page={bodyPaginationCurrentPage()}
+            offset={bodyPaginationOffset()}
+            items_per_page={bodyPaginationItemsPerPage()}
+            total_items={$search.stats.total_results}
+            on:change={onBodyPaginationChanged} />
+        {/if}
       </div>
     </div>