ENG-810: Remove unnecessary separator between consecutive page numbers in OXD pagination

changelog.md

@@ -1,3 +1,5 @@
+2024-11-01 - d9cb67f8abf3c1128203f14bce687c8b5b4075a6 - Remove unnecessary separator between consecutive page numbers in OXD pagination
+
 2024-10-28 - e5840791366e3abbf3cb6b57f77ede4a8842fb79 - Icon/icons.ts - Add oxd-date-input, oxd-attachment-input,oxd-checkbox-input, oxd-checkbox-group-input, oxd-select-input, oxd-file-input, oxd-radio-input, oxd-radio-group-input, oxd-switch-input, oxd-time-input, oxd-text-input, oxd-password-input, oxd-circle-plus, oxd-textbox, oxd-text, oxd-divider, oxd-grid, oxd-grid-item, oxd-subform, oxd-masterdata, oxd-employee-autocomplete, oxd-status, oxd-required to OXD Icons
 
 2024-10-26 - a7f234223a3a34e55a77e3c216733c9f01e5e3c9 - directives/focus-first-element/index.ts - Update the focus first directive to wait for animations to stop

components/src/core/components/Pagination/Pagination.vue

@@ -13,7 +13,7 @@
         @click="onClickPage(1, $event)"
       />
       <span
-        v-if="pageItems.indexOf(1) === -1"
+        v-if="pageItems.indexOf(1) === -1 && pageItems[0] > 2"
         class="d-flex align-end oxd-pagination-separator"
         last
         >...</span
@@ -26,7 +26,10 @@
         @click="onClickPage(page, $event)"
       />
       <span
-        v-if="!(pageItems[pageItems.length - 1] === length)"
+        v-if="
+          !(pageItems[pageItems.length - 1] === length) &&
+            pageItems[pageItems.length - 1] < length - 1
+        "
         class="d-flex align-end oxd-pagination-separator"
         last
         >...</span

components/src/core/components/Pagination/__tests__/pagination.spec.ts

@@ -30,4 +30,54 @@ describe('Pageination.vue', () => {
       '<div role="option" class="oxd-select-option --selected"><span>50</span></div>',
     );
   });
+  it('shows the first separator when first page is missing and pageItems starts from 3 or higher', async () => {
+    const wrapper = mount(Pagination, {
+      props: {
+        length: 5,
+        current: 10,
+        max: 3,
+      },
+      data() {
+        return {
+          pageItems: [3, 4, 5],
+        };
+      },
+    });
+
+    expect(wrapper.find('.oxd-pagination-separator').exists()).toBe(true);
+  });
+
+  it('shows the second separator when last page is missing and last pageItem is less than (length - 1)', async () => {
+    const wrapper = mount(Pagination, {
+      props: {
+        length: 5,
+        current: 10,
+        max: 3,
+      },
+      data() {
+        return {
+          pageItems: [1, 2, 3],
+        };
+      },
+    });
+    const separators = wrapper.findAll('.oxd-pagination-separator');
+    expect(separators.length).toBe(1);
+    expect(separators[0].exists()).toBe(true);
+  });
+
+  it('does not show separators when pageItems contain both first and last pages', async () => {
+    const wrapper = mount(Pagination, {
+      props: {
+        length: 5,
+        current: 10,
+        max: 5,
+      },
+      data() {
+        return {
+          pageItems: [1, 2, 3, 4, 5],
+        };
+      },
+    });
+    expect(wrapper.find('.oxd-pagination-separator').exists()).toBe(false);
+  });
 });