fix: Update pagination logic in the help center (#5693)

app/javascript/dashboard/components/widgets/TableFooter.vue

@@ -83,75 +83,71 @@ export default {
     },
     pageSize: {
       type: Number,
-      default: 15,
+      default: 25,
     },
     totalCount: {
       type: Number,
       default: 0,
     },
-    onPageChange: {
-      type: Function,
-      default: () => {},
-    },
   },
   computed: {
     isFooterVisible() {
       return this.totalCount && !(this.firstIndex > this.totalCount);
     },
     firstIndex() {
-      const firstIndex = this.pageSize * (this.currentPage - 1) + 1;
-      return firstIndex;
+      return this.pageSize * (this.currentPage - 1) + 1;
     },
     lastIndex() {
-      const index = Math.min(this.totalCount, this.pageSize * this.currentPage);
-      return index;
+      return Math.min(this.totalCount, this.pageSize * this.currentPage);
     },
     searchButtonClass() {
       return this.searchQuery !== '' ? 'show' : '';
     },
     hasLastPage() {
-      const isDisabled =
-        this.currentPage === Math.ceil(this.totalCount / this.pageSize);
-      return isDisabled;
+      return !!Math.ceil(this.totalCount / this.pageSize);
     },
     hasFirstPage() {
-      const isDisabled = this.currentPage === 1;
-      return isDisabled;
+      return this.currentPage === 1;
     },
     hasNextPage() {
-      const isDisabled =
-        this.currentPage === Math.ceil(this.totalCount / this.pageSize);
-      return isDisabled;
+      return this.currentPage === Math.ceil(this.totalCount / this.pageSize);
     },
     hasPrevPage() {
-      const isDisabled = this.currentPage === 1;
-      return isDisabled;
+      return this.currentPage === 1;
     },
   },
   methods: {
     onNextPage() {
-      if (this.hasNextPage) return;
+      if (this.hasNextPage) {
+        return;
+      }
       const newPage = this.currentPage + 1;
       this.onPageChange(newPage);
     },
     onPrevPage() {
-      if (this.hasPrevPage) return;
-
+      if (this.hasPrevPage) {
+        return;
+      }
       const newPage = this.currentPage - 1;
       this.onPageChange(newPage);
     },
     onFirstPage() {
-      if (this.hasFirstPage) return;
-
+      if (this.hasFirstPage) {
+        return;
+      }
       const newPage = 1;
       this.onPageChange(newPage);
     },
     onLastPage() {
-      if (this.hasLastPage) return;
-
+      if (this.hasLastPage) {
+        return;
+      }
       const newPage = Math.ceil(this.totalCount / this.pageSize);
       this.onPageChange(newPage);
     },
+    onPageChange(page) {
+      this.$emit('page-change', page);
+    },
   },
 };
 </script>

app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleTable.vue

@@ -29,10 +29,10 @@
     </table>
     <table-footer
       v-if="articles.length"
-      :on-page-change="onPageChange"
-      :current-page="Number(currentPage)"
+      :current-page="currentPage"
       :total-count="totalCount"
       :page-size="pageSize"
+      @page-change="onPageChange"
     />
   </div>
 </template>
@@ -60,12 +60,12 @@ export default {
     },
     pageSize: {
       type: Number,
-      default: 15,
+      default: 25,
     },
   },
   methods: {
     onPageChange(page) {
-      this.$emit('on-page-change', page);
+      this.$emit('page-change', page);
     },
   },
 };

app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/ListAllArticles.vue

@@ -2,16 +2,15 @@
   <div class="container overflow-auto">
     <article-header
       :header-title="headerTitle"
-      :count="articleCount"
+      :count="meta.count"
       selected-value="Published"
       @newArticlePage="newArticlePage"
     />
     <article-table
       :articles="articles"
-      :article-count="articles.length"
       :current-page="Number(meta.currentPage)"
-      :total-count="articleCount"
-      @on-page-change="onPageChange"
+      :total-count="Number(meta.count)"
+      @page-change="onPageChange"
     />
     <div v-if="shouldShowLoader" class="articles--loader">
       <spinner />
@@ -128,9 +127,9 @@ export default {
     newArticlePage() {
       this.$router.push({ name: 'new_article' });
     },
-    fetchArticles() {
+    fetchArticles({ pageNumber } = {}) {
       this.$store.dispatch('articles/index', {
-        pageNumber: this.pageNumber,
+        pageNumber: pageNumber || this.pageNumber,
         portalSlug: this.$route.params.portalSlug,
         locale: this.$route.params.locale,
         status: this.status,
@@ -138,8 +137,8 @@ export default {
         category_slug: this.selectedCategorySlug,
       });
     },
-    onPageChange(page) {
-      this.fetchArticles({ pageNumber: page });
+    onPageChange(pageNumber) {
+      this.fetchArticles({ pageNumber });
     },
   },
 };

app/javascript/shared/helpers/AudioNotificationHelper.js

@@ -4,6 +4,17 @@ import { IFrameHelper } from 'widget/helpers/utils';
 import { showBadgeOnFavicon } from './faviconHelper';
 
 export const initOnEvents = ['click', 'touchstart', 'keypress', 'keydown'];
+
+export const getAudioContext = () => {
+  let audioCtx;
+  try {
+    audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+  } catch {
+    // AudioContext is not available.
+  }
+  return audioCtx;
+};
+
 export const getAlertAudio = async (baseUrl = '', type = 'dashboard') => {
   const audioCtx = getAudioContext();
 
@@ -35,18 +46,6 @@ export const getAlertAudio = async (baseUrl = '', type = 'dashboard') => {
   }
 };
 
-export const getAudioContext = () => {
-  let audioCtx;
-
-  try {
-    audioCtx = new (window.AudioContext || window.webkitAudioContext)();
-  } catch {
-    // AudioContext is not available.
-  }
-
-  return audioCtx;
-};
-
 export const notificationEnabled = (enableAudioAlerts, id, userId) => {
   if (enableAudioAlerts === 'mine') {
     return userId === id;

app/views/api/v1/accounts/articles/index.json.jbuilder

@@ -5,7 +5,6 @@ end
 json.meta do
   json.current_page @current_page
   json.articles_count @articles_count
-  json.all_articles_count @articles_count
   json.archived_articles_count @articles.archived.size
   json.published_count @articles.published.size
   json.draft_articles_count @articles.draft.size

app/views/api/v1/accounts/portals/_portal.json.jbuilder

@@ -7,6 +7,7 @@ json.name portal.name
 json.page_title portal.page_title
 json.slug portal.slug
 json.archived portal.archived
+json.account_id portal.account_id
 
 json.config do
   json.allowed_locales do

spec/controllers/api/v1/accounts/articles_controller_spec.rb

@@ -195,7 +195,6 @@ RSpec.describe 'Api::V1::Accounts::Articles', type: :request do
         json_response = JSON.parse(response.body)
         expect(json_response['payload'].count).to be 1
         expect(json_response['meta']['articles_count']).to be 2
-        expect(json_response['meta']['all_articles_count']).to be 2
         expect(json_response['meta']['mine_articles_count']).to be 1
       end
     end