Merge pull request #16 from Smidra/oliver

pagination
Smidra · Feb 17, 2024 · 8fe4b82 · 8fe4b82
2 parents 4e964ae + 6394090
commit 8fe4b82
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 12 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -1,7 +1,7 @@
 <template>
     <div id="app">
         <ais-instant-search :search-client="searchClient" index-name="firmy">
-            <ais-configure :query="searchQuery" />
+            <ais-configure :query="searchQuery" :hitsPerPage="hitsPerPage" :page="page - 1" />
             <!-- Header -->
             <cv-header aria-label="Carbon header">
                 <cv-header-menu-button class="hamburger-menu" aria-label="Header menu" aria-controls="side-nav"
@@ -36,7 +36,22 @@
             </cv-header>
 
             <!-- Main Content -->
-            <main>
+            <main id="#main-content">
+                <div class="top-pagination">
+                    <ais-pagination>
+                        <template v-slot="{ nbHits }">
+                            <cv-pagination @change="onPaginationChange" :number-of-items="nbHits" :page="page"
+                                pageSizesLabel="Firem na stránku:">
+                                <template v-slot:range-text="{ scope }">
+                                    <span>{{ scope.start }}-{{ scope.end }} ze {{ scope.items }}</span>
+                                </template>
+                                <template v-slot:of-n-pages="{ scope }">
+                                    <span>ze {{ scope.pages }} stránek</span>
+                                </template>
+                            </cv-pagination>
+                        </template>
+                    </ais-pagination>
+                </div>
                 <ais-hits>
                     <template v-slot="{ items }">
                         <div class="tile-container">
@@ -52,7 +67,8 @@
 
 <script src="./script.js"></script>
 
-<style src="./style.css"></style>
+<style src="./style.css">
+</style>
 <style scoped>
 :deep(.hamburger-menu) {
     display: none;

diff --git a/src/script.js b/src/script.js
@@ -1,5 +1,5 @@
 import { CvHeader, CvHeaderMenuButton, CvSkipToContent, CvHeaderName, CvSearch, CvSideNav } from '@carbon/vue';
-import { AisInstantSearch, AisHits, AisHierarchicalMenu, AisConfigure, AisStateResults } from 'vue-instantsearch/vue3/es';
+import { AisInstantSearch, AisHits, AisHierarchicalMenu, AisConfigure, AisPagination, AisStateResults } from 'vue-instantsearch/vue3/es';
 import algoliasearch from 'algoliasearch';
 import HierarchicalMenu from './components/HierarchicalMenu.vue';
 import ItemTile from './components/ItemTile.vue';
@@ -21,6 +21,7 @@ export default {
         AisHits,
         AisHierarchicalMenu,
         AisConfigure,
+        AisPagination,
         AisStateResults,
         'add-icon': Add16,
         EditModal,
@@ -29,6 +30,8 @@ export default {
         return {
             expandedSideNav: window.innerWidth > 768,
             useFixed: true,
+            hitsPerPage: 20,
+            page: 1,
             searchQuery: '',
             searchResults: [],
             searchClient: algoliasearch('S27OT8U78J', '995efbd2d821e03836317ed9c20812a3'),
@@ -56,6 +59,10 @@ export default {
         handleClick(item, refine) {
             refine(item.value);
         },
+        onPaginationChange(data) {
+            this.hitsPerPage = data.length;
+            this.page = data.page;
+        },
         reloadPage() {
             location.reload();
         },

diff --git a/src/style.css b/src/style.css
@@ -1,18 +1,29 @@
 #app {
     text-align: center;
     color: #2c3e50;
-    margin-top: 60px;
+    /* margin-top: 60px; */
 }
 
 .bx--side-nav {
     border-right: 1px solid #d9d9d9;
     width: 16rem !important;
 }
 
-.main-content {
-    grid-column: 2;
-    padding: 1rem;
-    margin-left: 16rem;
+.top-pagination {
+    position: sticky;
+    top: 3rem;
+    padding-top: 1rem;
+    padding-bottom: 1rem;
+    z-index: 1;
+    background-color: white;
+}
+
+main {
+    position: relative;
+    margin-left: 17rem;
+    margin-right: 1rem;
+    margin-bottom: 1rem;
+    margin-top: 3rem;
 }
 
 .bx--side-nav__header-navigation {
@@ -34,8 +45,6 @@
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
     gap: 1rem;
-    margin-left: 17rem;
-    margin-right: 1rem;
 }
 
 .tile-content {
@@ -145,4 +154,4 @@
 
 .subtitle {
     padding-left: 1rem;
-}
+}