Merge pull request #122 from keithjgrant/fix-pagination-text

fix pagination text

__tests__/components/Pagination.test.jsx

@@ -119,6 +119,63 @@ describe('<Pagination />', () => {
     pageSizeDropdownItems.at(1).simulate('click');
   });
 
+  test('itemCount displays correctly', () => {
+    const onSetPage = jest.fn();
+
+    pagination = mount(
+      <I18nProvider>
+        <Pagination
+          count={7}
+          page={1}
+          pageCount={2}
+          page_size={5}
+          pageSizeOptions={[5, 10, 25, 50]}
+          onSetPage={onSetPage}
+        />
+      </I18nProvider>
+    );
+    const itemCount = pagination.find('.awx-pagination__item-count');
+    expect(itemCount.text()).toEqual('Items 1 – 5 of 7');
+  });
+
+  test('itemCount matching pageSize displays correctly', () => {
+    const onSetPage = jest.fn();
+
+    pagination = mount(
+      <I18nProvider>
+        <Pagination
+          count={5}
+          page={1}
+          pageCount={1}
+          page_size={5}
+          pageSizeOptions={[5, 10, 25, 50]}
+          onSetPage={onSetPage}
+        />
+      </I18nProvider>
+    );
+    const itemCount = pagination.find('.awx-pagination__item-count');
+    expect(itemCount.text()).toEqual('Items 1 – 5 of 5');
+  });
+
+  test('itemCount less than pageSize displays correctly', () => {
+    const onSetPage = jest.fn();
+
+    pagination = mount(
+      <I18nProvider>
+        <Pagination
+          count={3}
+          page={1}
+          pageCount={1}
+          page_size={5}
+          pageSizeOptions={[5, 10, 25, 50]}
+          onSetPage={onSetPage}
+        />
+      </I18nProvider>
+    );
+    const itemCount = pagination.find('.awx-pagination__item-count');
+    expect(itemCount.text()).toEqual('Items 1 – 3 of 3');
+  });
+
   test('submit a new page by typing in input works', () => {
     const textInputSelector = '.awx-pagination__page-input.pf-c-form-control';
     const submitFormSelector = '.awx-pagination__page-input-form';

src/components/Pagination/Pagination.jsx

@@ -116,7 +116,12 @@ class Pagination extends Component {
     const isOnFirst = page === 1;
     const isOnLast = page === pageCount;
 
-    const itemCount = isOnLast ? count % page_size : page_size;
+    let itemCount;
+    if (!isOnLast || count === page_size) {
+      itemCount = page_size;
+    } else {
+      itemCount = count % page_size;
+    }
     const itemMin = ((page - 1) * page_size) + 1;
     const itemMax = itemMin + itemCount - 1;
 
@@ -154,7 +159,7 @@ class Pagination extends Component {
             )}
             <div className="awx-pagination__counts">
               <div className="awx-pagination__item-count">
-                <Trans>{`Items ${itemMin} - ${itemMax} of ${count}`}</Trans>
+                <Trans>{`Items ${itemMin} – ${itemMax} of ${count}`}</Trans>
               </div>
               {pageCount !== 1 && (
                 <div className="awx-pagination__page-count">