Using "per page" filter issue when the current page doesn't have enough elements

[AurelGit]

• Laravel Version: 10.17.1
• Nova Version: 4.26.5
• PHP Version: 8.2.6
• Database Driver & Version: MySQL 8.0.30
• Browser type and version: Chrome 118

Description:

Hello !

Using the "Per Page" filter (with a "simple" pagination) on a index resource does not reset the user to the first page.
If the resource contains 50 elements and the user is on second page with 25 elements displayed per page, then changes for displaying 50 elements per page, the "add resource" button will be displayed because no elements are available on the second page with 50 items per page.

Detailed steps to reproduce the issue on a fresh Nova installation:

1. Create a Laravel Model, and populate database of this model with 50 elements
2. Create a Nova Resource and display some fields on the index page for the given Model
3. Display 25 elements per page (1-25 items are displayed)
4. Navigate to page 2 (26-50 items are displayed)
5. Change the per page filter to "50 items per page"

Issue: The index page displays a button to create a new item, as if no resource was existing for the Model.
Expected: The index page displays the first page of the resource changing the "per page" filter.

Thank you 😄

[AurelGit]

Mentioned issue : #62

[AurelGit]

Hello,

It do not seems to be a discussion.
When the user change the number of elements displayed, it show the wrong page "add resource".

Don't you think it's a real trouble ?

[MorganeHuebraTCM]

Hello !

We managed to get round the problem by using a global mixin in this way:

Nova.booting(Vue => {
    Vue.mixin({
        mounted() {
            // Verify that we are in the right component (the one with pageParameter set)
            if (this.pageParameter) {
                // Save the parameters of the url
                let oldParams = this.route.params
                // Getting when the 'query-string-changed' event is emitted (when the url parameters have change)
                Nova.$on('query-string-changed', (value) => {
                    // Get the new parameters of the url
                    const currentParams = Object.fromEntries(value.entries())

                    // Compare old parameters and new parameters (only for perpage params)
                    if (oldParams[this.perPageParameter] !== currentParams[this.perPageParameter]) {
                        // If the perPage parameter has changed, then :
                        // Set the old parameters to new ones
                        // Use the nova 'updateQueryString' function to update pageParameter to 1
                        oldParams = currentParams
                        this.updateQueryString({ [this.pageParameter]: 1 })
                    }
                })
            }
        },
    })
})

Note : This is for version 4.26

For version 4.29, this method seems to work (still with a global mixin) :

Nova.booting(Vue => {
    Vue.mixin({
        mounted() {
            // Verify that we are in the right component (the one with pageParameter set)
            if (this.pageParameter) {
                // Save the parameters of the url (this.route does not exist anymore)
                let oldParams = new URLSearchParams(window.location.search)
                // Getting when the 'query-string-changed' event is emitted (when the url parameters have change)
                Nova.$on('query-string-changed', (value) => {
                    // Get the new parameters of the url
                    const currentParams = Object.fromEntries(value.entries())

                    // Compare old parameters and new parameters (only for perpage params)
                    if (oldParams[this.perPageParameter] !== currentParams[this.perPageParameter]) {
                        // If the perPage parameter has changed, then :
                            // Set the old parameters to new ones
                            // Use the nova 'updateQueryString' function to update pageParameter to 1
                            // Reload Nova.$router
                        oldParams = currentParams
                        this.updateQueryString({ [this.pageParameter]: 1 }).then(() => Nova.$router.reload())
                    }
                })
            }
        },
    })
})

Hope it helps