fix: add pagination to table view in catalog

Kong · Sep 8, 2023 · dd6efa7 · dd6efa7
1 parent 0b6ccdd
commit dd6efa7
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 35 deletions.
diff --git a/cypress/e2e/specs/catalog.spec.ts b/cypress/e2e/specs/catalog.spec.ts
@@ -153,6 +153,10 @@ describe('Catalog', () => {
     it('displays the table view', () => {
       cy.get('.k-table').should('have.length', 1)
       cy.get('.k-table tbody td:nth-of-type(1)').should('have.length', 13)
+      cy.get('.card-pagination-bar')
+        .should('have.length', 1)
+        .get('.card-pagination-bar')
+        .contains('1 - 12 of 13')
     })
 
     it('goes to details view on click', () => {

diff --git a/src/components/Catalog.vue b/src/components/Catalog.vue
@@ -32,25 +32,29 @@
       <CatalogCardList
         v-if="activeView == 'grid'"
         :products="catalogItems"
-        :page-size="cardsPerPage"
-        :total-count="totalCount"
-        :search-triggered="searchTriggered"
         :loading="loading"
-        @page-changed="$emit('cards-page-changed', $event)"
       />
       <CatalogTableList
         v-else
         :products="catalogItems"
         :loading="loading"
       />
     </div>
+    <PaginationBar
+      class="pagination-bar mt-4"
+      :page-size="cardsPerPage"
+      :total-count="totalCount"
+      :search-triggered="searchTriggered"
+      @pageChanged="$emit('list-page-changed', $event)"
+    />
   </div>
 </template>
 
 <script lang="ts">
 import { PropType, defineComponent } from 'vue'
 import EmptyState from '../assets/catalog-empty-state.svg'
 import CatalogCardList from './CatalogCardList.vue'
+import PaginationBar from './PaginationBar.vue'
 import CatalogTableList from './CatalogTableList.vue'
 import { CatalogItemModel, useI18nStore } from '@/stores'
 
@@ -59,6 +63,7 @@ export default defineComponent({
   components: {
     CatalogCardList,
     CatalogTableList,
+    PaginationBar,
     EmptyState
   },
   props: {
@@ -83,7 +88,7 @@ export default defineComponent({
       default: false
     }
   },
-  emits: ['cards-page-changed', 'active-view-changed'],
+  emits: ['list-page-changed', 'active-view-changed'],
   setup () {
     const helpText = useI18nStore().state.helpText.catalog
     const catalogTitle = helpText.entityTypeProduct

diff --git a/src/components/CatalogCardList.vue b/src/components/CatalogCardList.vue
@@ -10,55 +10,28 @@
         :loading="loading"
       />
     </div>
-    <PaginationBar
-      class="catalog-pagination mt-4"
-      :page-size="pageSize"
-      :total-count="totalCount"
-      :search-triggered="searchTriggered"
-      @pageChanged="onPageChanged"
-    />
   </div>
 </template>
 
 <script lang="ts">
 import CatalogItem from './CatalogItem.vue'
-import PaginationBar from './PaginationBar.vue'
 import { PropType } from 'vue'
 import { CatalogItemModel } from '@/stores'
 
 export default {
   name: 'CatalogCardList',
   components: {
-    CatalogItem,
-    PaginationBar
+    CatalogItem
   },
   props: {
     products: {
       type: Array as PropType<CatalogItemModel[]>,
       default: () => []
     },
-    pageSize: {
-      type: Number,
-      default: 12
-    },
-    totalCount: {
-      type: Number,
-      default: 0
-    },
-    searchTriggered: {
-      type: Boolean,
-      default: false
-    },
     loading: {
       type: Boolean,
       default: false
     }
-  },
-  emits: ['page-changed'],
-  methods: {
-    onPageChanged (page) {
-      this.$emit('page-changed', page)
-    }
   }
 }
 </script>
diff --git a/src/components/PaginationBar.vue b/src/components/PaginationBar.vue
@@ -167,7 +167,7 @@ export default defineComponent({
 </style>
 
 <style lang="scss">
-.catalog-card-view {
+.card-pagination-bar {
   .pagination-button .kong-icon path {
     fill: var(--text_colors-secondary);
     fill-opacity: unset;

diff --git a/src/views/ProductCatalogWrapper.vue b/src/views/ProductCatalogWrapper.vue
@@ -47,7 +47,7 @@
       :search-triggered="searchTriggered"
       :loading="loading"
       @active-view-changed="catalogViewChanged"
-      @cards-page-changed="catalogPageChanged"
+      @list-page-changed="catalogPageChanged"
     />
   </div>
 </template>