feat: pagination phase 5

martinjagodic · martinjagodic · commit c97a457f3785 · 2025-11-03T15:12:25.000+01:00
diff --git a/packages/decap-cms-core/src/components/Collection/Entries/Entries.js b/packages/decap-cms-core/src/components/Collection/Entries/Entries.js
@@ -6,6 +6,7 @@ import { translate } from 'react-polyglot';
 import { Loader, lengths } from 'decap-cms-ui-default';
 
 import EntryListing from './EntryListing';
+import Pagination from './Pagination';
 
 const PaginationMessage = styled.div`
   width: ${lengths.topCardWidth};
@@ -29,6 +30,13 @@ function Entries({
   getWorkflowStatus,
   getUnpublishedEntries,
   filterTerm,
+  paginationEnabled,
+  paginationConfig,
+  currentPage,
+  pageSize,
+  totalCount,
+  onPageChange,
+  onPageSizeChange,
 }) {
   const loadingMessages = [
     t('collection.entries.loadingEntries'),
@@ -41,6 +49,13 @@ function Entries({
   }
 
   const hasEntries = (entries && entries.size > 0) || cursor?.actions?.has('append_next');
+  
+  // Calculate page count for pagination
+  const pageCount = paginationEnabled && totalCount > 0 ? Math.ceil(totalCount / pageSize) : 1;
+  
+  // Show pagination controls only if pagination is enabled and we have entries
+  const showPagination = paginationEnabled && totalCount > 0 && pageCount > 1;
+  
   if (hasEntries) {
     return (
       <>
@@ -54,10 +69,22 @@ function Entries({
           getWorkflowStatus={getWorkflowStatus}
           getUnpublishedEntries={getUnpublishedEntries}
           filterTerm={filterTerm}
+          paginationEnabled={paginationEnabled}
         />
         {isFetching && page !== undefined && entries.size > 0 ? (
           <PaginationMessage>{t('collection.entries.loadingEntries')}</PaginationMessage>
         ) : null}
+        {showPagination && !isFetching && (
+          <Pagination
+            currentPage={currentPage}
+            pageCount={pageCount}
+            pageSize={pageSize}
+            totalCount={totalCount}
+            userOptions={paginationConfig?.user_options || null}
+            onPageChange={onPageChange}
+            onPageSizeChange={onPageSizeChange}
+          />
+        )}
       </>
     );
   }
@@ -77,6 +104,13 @@ Entries.propTypes = {
   getWorkflowStatus: PropTypes.func,
   getUnpublishedEntries: PropTypes.func,
   filterTerm: PropTypes.string,
+  paginationEnabled: PropTypes.bool,
+  paginationConfig: PropTypes.object,
+  currentPage: PropTypes.number,
+  pageSize: PropTypes.number,
+  totalCount: PropTypes.number,
+  onPageChange: PropTypes.func,
+  onPageSizeChange: PropTypes.func,
 };
 
 export default translate()(Entries);
diff --git a/packages/decap-cms-core/src/components/Collection/Entries/EntriesCollection.js b/packages/decap-cms-core/src/components/Collection/Entries/EntriesCollection.js
@@ -11,14 +11,20 @@ import { colors } from 'decap-cms-ui-default';
 import {
   loadEntries as actionLoadEntries,
   traverseCollectionCursor as actionTraverseCollectionCursor,
+  setEntriesPageSize as actionSetEntriesPageSize,
+  loadEntriesPage as actionLoadEntriesPage,
 } from '../../../actions/entries';
 import { loadUnpublishedEntries } from '../../../actions/editorialWorkflow';
 import {
   selectEntries,
   selectEntriesLoaded,
   selectIsFetching,
   selectGroups,
+  selectEntriesPageSize,
+  selectEntriesCurrentPage,
+  selectEntriesTotalCount,
 } from '../../../reducers/entries';
+import { isPaginationEnabled, getPaginationConfig } from '../../../lib/pagination';
 import { selectUnpublishedEntry, selectUnpublishedEntriesByStatus } from '../../../reducers';
 import { selectCollectionEntriesCursor } from '../../../reducers/cursors';
 import Entries from './Entries';
@@ -78,6 +84,13 @@ export class EntriesCollection extends React.Component {
     isEditorialWorkflowEnabled: PropTypes.bool,
     getWorkflowStatus: PropTypes.func.isRequired,
     getUnpublishedEntries: PropTypes.func.isRequired,
+    paginationEnabled: PropTypes.bool,
+    paginationConfig: PropTypes.object,
+    currentPage: PropTypes.number,
+    pageSize: PropTypes.number,
+    totalCount: PropTypes.number,
+    setEntriesPageSize: PropTypes.func.isRequired,
+    loadEntriesPage: PropTypes.func.isRequired,
   };
 
   componentDidMount() {
@@ -144,6 +157,13 @@ export class EntriesCollection extends React.Component {
       getWorkflowStatus,
       getUnpublishedEntries,
       filterTerm,
+      paginationEnabled,
+      paginationConfig,
+      currentPage,
+      pageSize,
+      totalCount,
+      setEntriesPageSize,
+      loadEntriesPage,
     } = this.props;
 
     const EntriesToRender = ({ entries }) => {
@@ -160,6 +180,13 @@ export class EntriesCollection extends React.Component {
           getWorkflowStatus={getWorkflowStatus}
           getUnpublishedEntries={getUnpublishedEntries}
           filterTerm={filterTerm}
+          paginationEnabled={paginationEnabled}
+          paginationConfig={paginationConfig}
+          currentPage={currentPage}
+          pageSize={pageSize}
+          totalCount={totalCount}
+          onPageChange={page => loadEntriesPage(collection, page)}
+          onPageSizeChange={pageSize => setEntriesPageSize(collection, pageSize)}
         />
       );
     };
@@ -227,6 +254,13 @@ function mapStateToProps(state, ownProps) {
     ? !!state.editorialWorkflow?.getIn(['pages', 'ids'], false)
     : true;
 
+  // Pagination state
+  const paginationEnabled = isPaginationEnabled(collection, state.config);
+  const paginationConfig = paginationEnabled ? getPaginationConfig(collection, state.config) : null;
+  const currentPage = selectEntriesCurrentPage(state.entries, collection.get('name'));
+  const pageSize = selectEntriesPageSize(state.entries, collection.get('name'));
+  const totalCount = selectEntriesTotalCount(state.entries, collection.get('name'));
+
   return {
     collection,
     collections,
@@ -239,6 +273,11 @@ function mapStateToProps(state, ownProps) {
     cursor,
     unpublishedEntriesLoaded,
     isEditorialWorkflowEnabled,
+    paginationEnabled,
+    paginationConfig,
+    currentPage,
+    pageSize,
+    totalCount,
     getWorkflowStatus: (collectionName, slug) => {
       const unpublishedEntry = selectUnpublishedEntry(state, collectionName, slug);
       return unpublishedEntry ? unpublishedEntry.get('status') : null;
@@ -270,6 +309,8 @@ const mapDispatchToProps = {
   loadEntries: actionLoadEntries,
   traverseCollectionCursor: actionTraverseCollectionCursor,
   loadUnpublishedEntries: collections => loadUnpublishedEntries(collections),
+  setEntriesPageSize: actionSetEntriesPageSize,
+  loadEntriesPage: actionLoadEntriesPage,
 };
 
 const ConnectedEntriesCollection = connect(mapStateToProps, mapDispatchToProps)(EntriesCollection);
diff --git a/packages/decap-cms-core/src/components/Collection/Entries/EntryListing.js b/packages/decap-cms-core/src/components/Collection/Entries/EntryListing.js
@@ -29,6 +29,7 @@ class EntryListing extends React.Component {
     getUnpublishedEntries: PropTypes.func.isRequired,
     getWorkflowStatus: PropTypes.func.isRequired,
     filterTerm: PropTypes.string,
+    paginationEnabled: PropTypes.bool,
   };
 
   componentDidMount() {
@@ -133,15 +134,15 @@ class EntryListing extends React.Component {
   };
 
   render() {
-    const { collections, page } = this.props;
+    const { collections, page, paginationEnabled } = this.props;
 
     return (
       <div>
         <CardsGrid>
           {Map.isMap(collections)
             ? this.renderCardsForSingleCollection()
             : this.renderCardsForMultipleCollections()}
-          {this.hasMore() && <Waypoint key={page} onEnter={this.handleLoadMore} />}
+          {!paginationEnabled && this.hasMore() && <Waypoint key={page} onEnter={this.handleLoadMore} />}
         </CardsGrid>
       </div>
     );
diff --git a/packages/decap-cms-core/src/components/Collection/Entries/Pagination.js b/packages/decap-cms-core/src/components/Collection/Entries/Pagination.js
@@ -0,0 +1,157 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from '@emotion/styled';
+import { translate } from 'react-polyglot';
+import { Icon, colors } from 'decap-cms-ui-default';
+
+const PaginationControls = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  margin: 2rem;
+`;
+
+const PaginationInfo = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 12px;
+`;
+
+const PaginationButton = styled.button`
+  padding: 6px 6px 4px 6px;
+  background-color: ${colors.button};
+  color: ${colors.buttonText};
+  border: none;
+  border-radius: 4px;
+  cursor: ${props => (props.disabled ? 'not-allowed' : 'pointer')};
+  font-size: 12px;
+  transition: background-color 0.2s;
+
+  &:hover:not(:disabled) {
+    background-color: #555a65;
+  }
+
+  &:disabled {
+    opacity: 0.5;
+  }
+`;
+
+const PageSizeSelect = styled.select`
+  padding: 6px 10px;
+  border: 1px solid ${colors.textFieldBorder};
+  border-radius: 4px;
+  background-color: ${colors.inputBackground};
+  color: ${colors.text};
+  font-size: 14px;
+  cursor: pointer;
+  outline: none;
+
+  &:focus {
+    border-color: ${colors.active};
+  }
+`;
+
+const PageSizeLabel = styled.label`
+  color: ${colors.text};
+  font-size: 14px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+`;
+
+function Pagination({
+  currentPage,
+  pageCount,
+  pageSize,
+  totalCount,
+  userOptions,
+  onPageChange,
+  onPageSizeChange,
+  t,
+}) {
+  const hasPrevPage = currentPage > 1;
+  const hasNextPage = currentPage < pageCount;
+
+  const startEntry = (currentPage - 1) * pageSize + 1;
+  const endEntry = Math.min(currentPage * pageSize, totalCount);
+
+  return (
+    <div>
+      <PaginationControls>
+        <PaginationButton
+          disabled={!hasPrevPage}
+          onClick={() => onPageChange(1)}
+          title={t('collection.pagination.first')}
+        >
+          <Icon type="chevron-double" size="small" direction="left" />
+        </PaginationButton>
+        <PaginationButton
+          disabled={!hasPrevPage}
+          onClick={() => onPageChange(currentPage - 1)}
+          title={t('collection.pagination.previous')}
+        >
+          <Icon type="chevron" size="small" direction="left" />
+        </PaginationButton>
+
+        <span style={{ color: colors.text, fontSize: '14px', padding: '0 8px' }}>
+          {t('collection.pagination.page', { current: currentPage, total: pageCount })}
+        </span>
+
+        <PaginationButton
+          disabled={!hasNextPage}
+          onClick={() => onPageChange(currentPage + 1)}
+          title={t('collection.pagination.next')}
+        >
+          <Icon type="chevron" size="small" direction="right" />
+        </PaginationButton>
+        <PaginationButton
+          disabled={!hasNextPage}
+          onClick={() => onPageChange(pageCount)}
+          title={t('collection.pagination.last')}
+        >
+          <Icon type="chevron-double" size="small" direction="right" />
+        </PaginationButton>
+      </PaginationControls>
+
+      <PaginationInfo>
+        <span>
+          {t('collection.pagination.showing', {
+            start: startEntry,
+            end: endEntry,
+            total: totalCount,
+          })}
+        </span>
+        {userOptions && userOptions.length > 0 && (
+          <PageSizeLabel>
+            {t('collection.pagination.itemsPerPage')}:
+            <PageSizeSelect
+              value={pageSize}
+              onChange={e => onPageSizeChange(Number(e.target.value))}
+            >
+              {userOptions.map(option => (
+                <option key={option} value={option}>
+                  {option}
+                </option>
+              ))}
+            </PageSizeSelect>
+          </PageSizeLabel>
+        )}
+      </PaginationInfo>
+    </div>
+  );
+}
+
+Pagination.propTypes = {
+  currentPage: PropTypes.number.isRequired,
+  pageCount: PropTypes.number.isRequired,
+  pageSize: PropTypes.number.isRequired,
+  totalCount: PropTypes.number.isRequired,
+  userOptions: PropTypes.arrayOf(PropTypes.number),
+  onPageChange: PropTypes.func.isRequired,
+  onPageSizeChange: PropTypes.func.isRequired,
+  t: PropTypes.func.isRequired,
+};
+
+export default translate()(Pagination);
diff --git a/packages/decap-cms-locales/src/en/index.js b/packages/decap-cms-locales/src/en/index.js
@@ -57,6 +57,15 @@ const en = {
       longerLoading: 'This might take several minutes',
       noEntries: 'No Entries',
     },
+    pagination: {
+      showing: 'Showing %{start}-%{end} of %{total}',
+      itemsPerPage: 'Items per page',
+      page: 'Page %{current} of %{total}',
+      first: 'First',
+      previous: 'Previous',
+      next: 'Next',
+      last: 'Last',
+    },
     groups: {
       other: 'Other',
       negateLabel: 'Not %{label}',
