more pagination buttons

src/components/pagination/Pagination.svelte

@@ -11,9 +11,13 @@
 
   $: page = current_page + 1
   $: total_pages = total_items > 0 ? Math.ceil(total_items / items_per_page) : 0
+
   $: prevDisabled = disable || current_page == 0
   $: nextDisabled = disable || current_page == total_pages - 1
 
+  $: firstDisabled = prevDisabled
+  $: lastDisabled = nextDisabled
+
   $: shouldDisplay =
     total_items > items_per_page &&
     !isNaN(current_page) &&
@@ -31,6 +35,18 @@
     trigger('next', ++current_page)
     trigger('change', current_page)
   }
+
+  const onClickFirst = event => {
+    if (prevDisabled) return
+    trigger('first', (current_page = 0))
+    trigger('change', current_page)
+  }
+
+  const onClickLast = event => {
+    if (nextDisabled) return
+    trigger('last', (current_page = total_pages - 1))
+    trigger('change', current_page)
+  }
 </script>
 
 <style>
@@ -46,6 +62,13 @@
 {#if shouldDisplay}
   Page {page} of {total_pages}
   <div class="ui pagination menu {className}">
+    <a
+      class="icon item"
+      class:disabled={firstDisabled}
+      on:click={onClickFirst}
+      href="javascript:;">
+      <i class="angle double left icon" />
+    </a>
     <a
       class="icon item"
       class:disabled={prevDisabled}
@@ -60,5 +83,12 @@
       href="javascript:;">
       <i class="right chevron icon" />
     </a>
+    <a
+      class="icon item"
+      class:disabled={lastDisabled}
+      on:click={onClickLast}
+      href="javascript:;">
+      <i class="angle double right icon" />
+    </a>
   </div>
 {/if}

src/store/search.js

@@ -110,7 +110,11 @@ export const search = store => {
       store.dispatch('search/loading', false)
       store.dispatch('notification/add', {
         type: 'error',
-        message: get(error, 'response.data.error.reason', error.message),
+        message: get(
+          error,
+          'response.data.error.root_cause[0].reason',
+          get(error, 'response.data.error.reason', error.message)
+        ),
       })
     }
   })