Deploy 2024-11-22

cypress/e2mock/edge-application/list-edge-applications.cy.js

@@ -81,4 +81,25 @@ describe('Edge Application List Spec', { tags: ['@dev2'] }, () => {
       .its('response.body')
       .should('have.property', 'count', 100)
   })
-})
+
+  it('should paginate correctly list', function () {
+    cy.intercept('GET', '/api/v4/edge_application/*', (req) => {
+      if (req.url.includes('page_size=10')) {
+        req.reply({
+          fixture: '/edge-application/edge-applications-paginated.json'
+        })
+      }
+    }).as('paginatedEdgeApplicationsListApi')
+
+    cy.get(selectors.list.rowsPerPage.dropdown).click()
+    cy.get(selectors.list.rowsPerPage.option('10')).click()
+    cy.get(selectors.list.pageNumber.option('5')).click()
+    cy.wait('@paginatedEdgeApplicationsListApi')
+    cy.get(selectors.list.pageNumber.option('6')).should('be.visible')
+    cy.get(selectors.list.pageNumber.option('5')).should('have.class', 'p-highlight')
+
+    cy.get(selectors.list.searchInput).type('foo 1{enter}')
+    cy.get(selectors.list.pageNumber.option('1')).should('be.visible')
+    cy.get(selectors.list.pageNumber.option('1')).should('have.class', 'p-highlight')
+  })
+})

cypress/fixtures/edge-application/edge-applications-paginated.json

@@ -0,0 +1,65 @@
+{
+  "count": 100,
+  "results": [
+    {
+      "id": 1727808946,
+      "name": "foo 1",
+      "last_editor": "foobar@azion.com",
+      "last_modified": "2024-10-01T18:45:58.915153Z"
+    },
+    {
+      "id": 1727808947,
+      "name": "foo 2",
+      "last_editor": "foobar@azion.com",
+      "last_modified": "2024-10-02T18:45:58.915153Z"
+    },
+    {
+      "id": 1727808948,
+      "name": "foo 3",
+      "last_editor": "foobar@azion.com",
+      "last_modified": "2024-10-03T18:45:58.915153Z"
+    },
+    {
+      "id": 1727808949,
+      "name": "foo 4",
+      "last_editor": "foobar@azion.com",
+      "last_modified": "2024-10-04T18:45:58.915153Z"
+    },
+    {
+      "id": 1727808950,
+      "name": "foo 5",
+      "last_editor": "foobar@azion.com",
+      "last_modified": "2024-10-05T18:45:58.915153Z"
+    },
+    {
+      "id": 1727808951,
+      "name": "foo 6",
+      "last_editor": "foobar@azion.com",
+      "last_modified": "2024-10-06T18:45:58.915153Z"
+    },
+    {
+      "id": 1727808952,
+      "name": "foo 7",
+      "last_editor": "foobar@azion.com",
+      "last_modified": "2024-10-07T18:45:58.915153Z"
+    },
+    {
+      "id": 1727808953,
+      "name": "foo 8",
+      "last_editor": "foobar@azion.com",
+      "last_modified": "2024-10-08T18:45:58.915153Z"
+    },
+    {
+      "id": 1727808954,
+      "name": "foo 9",
+      "last_editor": "foobar@azion.com",
+      "last_modified": "2024-10-09T18:45:58.915153Z"
+    },
+    {
+      "id": 1727808955,
+      "name": "foo 10",
+      "last_editor": "foobar@azion.com",
+      "last_modified": "2024-10-10T18:45:58.915153Z"
+    }
+  ]
+}

cypress/support/selectors/block-selectors/list-table-block.js

@@ -25,6 +25,9 @@ export default {
     dropdown: '.p-paginator-rpp-options',
     option: (size) => `li.p-dropdown-item[aria-label="${size}"]`
   },
+  pageNumber: {
+    option: (page) => `button.p-paginator-page[aria-label="${page}"]`
+  },
   orderingHeader: {
     firstColumn: ':nth-child(1) > .p-column-header-content > [data-pc-section="sort"] > .p-icon'
   }

src/templates/list-table-block/with-fetch-ordering-and-pagination.vue

@@ -32,6 +32,7 @@
       @row-click="editItemSelected"
       @page="changeNumberOfLinesPerPage"
       @sort="fetchOnSort"
+      :first="firstItemIndex"
     >
       <template
         #header
@@ -451,6 +452,7 @@
   const totalRecords = ref()
   const savedSearch = ref('')
   const savedOrdering = ref('')
+  const firstItemIndex = ref(0)
 
   const firstLoadData = ref(true)
 
@@ -489,13 +491,14 @@
   /**
    * Moves an item within the original array based on updated positions in a reference array.
    *
-   * @param {Array} originalArray - The array to be modified.
+   * @param {Array} originalData - The array to be modified.
    * @param {Array} referenceArray - The reference array with the new order.
    * @param {number} fromIndex - The index of the item to move in the reference array.
    * @param {number} toIndex - The target index  in the reference array.
    * @returns {Array} The updated array with the item moved.
    */
-  const moveItem = (originalArray, referenceArray, fromIndex, toIndex) => {
+  const moveItem = (originalData, referenceArray, fromIndex, toIndex) => {
+    const originalArray = [...originalData]
     const oldItemMove = toIndex + Math.sign(fromIndex - toIndex)
     const itemToMoveId = referenceArray[toIndex]
     const targetItemId = referenceArray[oldItemMove]
@@ -622,14 +625,19 @@
   }
 
   const reload = async (query = {}) => {
-    loadData({
+    const commonParams = {
       page: 1,
       pageSize: itemsByPage.value,
       fields: props.apiFields,
-      search: savedSearch.value,
       ordering: savedOrdering.value,
       ...query
-    })
+    }
+
+    if (props.lazy) {
+      commonParams.search = savedSearch.value
+    }
+
+    loadData(commonParams)
   }
 
   const extractFieldValue = (rowData, field) => {
@@ -648,7 +656,7 @@
     const numberOfLinesPerPage = event.rows
     tableDefinitions.setNumberOfLinesPerPage(numberOfLinesPerPage)
     itemsByPage.value = numberOfLinesPerPage
-
+    firstItemIndex.value = event.first
     reload({ page: event.page + 1 })
   }
 
@@ -672,6 +680,10 @@
   }
 
   const fetchOnSearch = () => {
+    if (!props.lazy) return
+
+    const firstPage = 1
+    firstItemIndex.value = firstPage
     reload()
   }
 

src/views/EdgeApplicationsRulesEngine/ListView.vue

@@ -221,25 +221,22 @@
       })
       return
     }
+
     const { dragIndex: originIndex, dropIndex: destinationIndex, value: updatedTable } = event
-    const alterFirstItem = originIndex === 0 || destinationIndex === 0
 
-    if (alterFirstItem) {
-      const firstItem = updatedTable[originIndex]
-      const secondItem = updatedTable[destinationIndex]
-      const isDefaultRuleMoved =
-        firstItem.name === 'Default Rule' || secondItem.name === 'Default Rule'
-      if (isDefaultRuleMoved) {
-        toast.add({
-          closable: true,
-          severity: 'error',
-          summary: 'The default rule cannot be reordered'
-        })
-        return
-      }
+    const reorderedData = moveItem(data.value, updatedTable, originIndex, destinationIndex)
+
+    const isFirstRuleNotDefault = reorderedData[0].name !== 'Default Rule'
+
+    if (isFirstRuleNotDefault) {
+      toast.add({
+        closable: true,
+        severity: 'error',
+        summary: 'The default rule cannot be reordered'
+      })
+      return
     }
 
-    const reorderedData = moveItem(data.value, updatedTable, originIndex, destinationIndex)
     data.value = reorderedData
     disabledOrdering.value = false
   }