[FEATURE] Disable "next" button in the last record

[nataliaElv]

Is your feature request related to a problem? Please describe.
In the UI, whenever I'm in the last record of a queue (with or without filters) the "next" button is still enabled but if I click I get a message saying that I reached the end of the queue.

Describe the solution you'd like
A clear and concise description of what you want to happen.
When I get to the last record, the "next" button should be disabled so that I cannot click by mistake and I understand intuitively that I reached the end of the queue without a pop-up message.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

[dosubot]

🤖

Hi @nataliaElv! 👋

I'm Dosu, an automated bot here to assist you with Argilla. I can help solve bugs, answer questions, and guide you on how to become a contributor. While a human maintainer is on the way, I'm here to provide immediate support. Nice to meet you! 😊

Thank you for your feature request. It's indeed a good idea to disable the "next" button when the user reaches the last record of a queue. This would prevent accidental clicks and provide an intuitive understanding that the end of the queue has been reached.

Currently, the "next" button in the Argilla UI emits a "changePage" event when clicked. This event carries the information of the next page number and the size of the page. The next page number is calculated by adding 1 to the current page number. This behavior is defined in the prevNextButtonEmition function and tested in the "emit event when next is clicked" test case. However, the behavior when the user reaches the last record of a queue is not specified.

To implement your feature request, we can add a computed property that checks if the current page is the last page. If it is, the "next" button should be disabled. Here's how you can do it:

computed: {
  isLastPage() {
    return this.paginationSettings.page * this.paginationSettings.size >= this.totalItems;
  }
}

Then, in your template, you can bind the disabled attribute of the "next" button to the isLastPage computed property:

<button class="pagination__arrow--next" :disabled="isLastPage" @click="nextPage">Next</button>

In the nextPage method, you should also check if the current page is the last page before emitting the changePage event:

methods: {
  nextPage() {
    if (!this.isLastPage) {
      this.$emit('changePage', this.paginationSettings.page + 1, this.paginationSettings.size);
    }
  }
}

This way, the "next" button will be disabled and unclickable when the user reaches the last record of a queue, preventing accidental clicks and providing an intuitive understanding that the end of the queue has been reached.

You can find the relevant code in the frontend/components/base/base-pagination/BasePagination.spec.js file.

I hope this helps! If you have any further questions or need more clarification, feel free to ask.

Best regards,
Dosu

Sources

• frontend/components/base/base-pagination/BasePagination.spec.js