feat: created use-query-pagination prop

CHANGELOG.md

@@ -10,6 +10,10 @@ Neste arquivo (CHANGELOG.MD) você encontrará somente as mudanças referentes a
 ### Sobre os "BREAKING CHANGES"
 Podemos ter pequenas breaking changes sem alterar o `major` version, apesar de serem pequenas, podem alterar o comportamento da funcionalidade caso não seja feita uma atualização, **preste muita atenção** nas breaking changes dentro das versões quando existirem.
 
+## Nao publicado
+### Adicionado
+- `QasListView`: adicionado prop `use-query-pagination` para a paginação ser controlada internamente no componente, para o uso quando temos o caso de ter mais de um `QasListView` na mesma página.
+
 ## [3.17.0-beta.8] - 30-09-2024
 ### Corrigido
 - `QasChartView`: corrigido altura mínima ao fazer fetch.

docs/src/examples/QasListView/InternalPagination.vue

@@ -0,0 +1,26 @@
+<template>
+  <qas-list-view v-model:fields="viewState.fields" v-model:results="viewState.results" :entity :use-query-pagination="false">
+    <template #header>
+      <qas-page-header title="Lista de materiais" :use-breadcrumbs="false">
+        <qas-btn icon="sym_r_add" label="Novo [item]" />
+      </qas-page-header>
+    </template>
+
+    <template #default>
+      <qas-table-generator :columns :fields="viewState.fields" :results="viewState.results" row-key="uuid" />
+    </template>
+  </qas-list-view>
+</template>
+
+<script setup>
+import { useView } from '@bildvitta/composables'
+
+const { viewState } = useView({ mode: 'list' })
+
+const columns = [
+  'name',
+  'company'
+]
+
+const entity = 'users'
+</script>

docs/src/pages/components/list-view.md

@@ -61,3 +61,8 @@ Agora ao fazer o fetch, o valor da url enviada para a action do fetchList será
 
 <doc-example file="QasListView/BeforeFetch" title="Controlando fetch" />
 <doc-example file="QasListView/ExAutoRefetchOnDelete" title="Controle de refetch ao deletar automático" />
+
+:::info
+Ao utilizar mais de um list-view na mesma página que tenha paginação, é recomendado o uso da prop `use-query-pagination` como `false`, para as queries da paginação não se conflitarem, mantendo o controle internamente no componente.
+:::
+<doc-example file="QasListView/InternalPagination" title="Controle interno da paginação" />

docs/src/store/mocks/users.json

@@ -61,7 +61,7 @@
     },
     {
       "uuid": "62fc0a79-ddea-45b5-8d21-be6f0502923296",
-      "isActive": false,
+      "isActive": true,
       "company": "Sed occaecati cupiditate.",
       "name": "Quaerat veritatis aut voluptatem enim.",
       "email": "Jillian_Wilkinson97@gmail.com",
@@ -72,7 +72,7 @@
     },
     {
       "uuid": "2f8856d0-8eca-4e41-8146-63ed2a4f23ff4c",
-      "isActive": false,
+      "isActive": true,
       "company": "Dolores minus iusto quo et dolorem eveniet nesciunt.",
       "name": "Maiores animi non asperiores recusandae dolor exercitationem ut.",
       "email": "Rafael91@hotmail.com",
@@ -83,7 +83,7 @@
     },
     {
       "uuid": "5bda242f-5e99-43dd-af6a-093d68cee1235f",
-      "isActive": false,
+      "isActive": true,
       "company": "Excepturi ad nihil est.",
       "name": "Ullam eligendi dolor a placeat.",
       "email": "Katelyn_Bernhard76@gmail.com",
@@ -94,7 +94,7 @@
     },
     {
       "uuid": "620c8045-acc8-4c53-b083-fe7ed991233cf5",
-      "isActive": false,
+      "isActive": true,
       "company": "Quis ea voluptas recusandae omnis.",
       "name": "Debitis maiores itaque sit et recusandae et eveniet.",
       "email": "Syble42@yahoo.com",
@@ -105,7 +105,7 @@
     },
     {
       "uuid": "82f18f90-d5f9-486f-8b7b-b95745fa123d57",
-      "isActive": false,
+      "isActive": true,
       "company": "Quia qui blanditiis est minus ut quia dolores expedita aut.",
       "name": "Deleniti est quaerat qui dolores blanditiis qui vel maxime.",
       "email": "Felipe94@yahoo.com",
@@ -116,7 +116,7 @@
     },
     {
       "uuid": "570e003f-bb7d-4dae-a336-8f187c73242501",
-      "isActive": false,
+      "isActive": true,
       "company": "Voluptate omnis et.",
       "name": "Enim aut labore autem tempore cumque laborum ut.",
       "email": "Antone.Bednar30@yahoo.com",
@@ -127,7 +127,7 @@
     },
     {
       "uuid": "943e4923-12c0-473e-a07f-63eb28201a3491",
-      "isActive": false,
+      "isActive": true,
       "company": "Occaecati et velit magnam et recusandae rerum autem et voluptas.",
       "name": "Illo quam ad ratione.",
       "email": "Emmalee_McGlynn@gmail.com",
@@ -138,7 +138,7 @@
     },
     {
       "uuid": "ce2e298a-be37-408f-a789-4c7b18b4132432bc",
-      "isActive": false,
+      "isActive": true,
       "company": "Atque cum illum debitis consequatur exercitationem dolorum corporis.",
       "name": "Incidunt perferendis error iusto ut.",
       "email": "Heloise_Hegmann@hotmail.com",
@@ -149,7 +149,7 @@
     },
     {
       "uuid": "62fc0a79-ddea-45b5-8d21-be6f0502929645",
-      "isActive": false,
+      "isActive": true,
       "company": "Sed occaecati cupiditate.",
       "name": "Quaerat veritatis aut voluptatem enim.",
       "email": "Jillian_Wilkinson97@gmail.com",

ui/src/components/list-view/QasListView.vue

@@ -87,6 +87,11 @@ export default {
       type: Boolean
     },
 
+    useQueryPagination: {
+      default: true,
+      type: Boolean
+    },
+
     useRefresh: {
       default: true,
       type: Boolean
@@ -182,8 +187,13 @@ export default {
 
   methods: {
     changePage () {
-      const query = { ...this.$route.query, page: this.page }
-      this.$router.push({ query })
+      if (this.useQueryPagination) {
+        const query = { ...this.$route.query, page: this.page }
+
+        this.$router.push({ query })
+      } else {
+        this.fetchList({ page: this.page })
+      }
     },
 
     async fetchList (externalPayload = {}) {

ui/src/components/list-view/QasListView.yml

@@ -81,6 +81,11 @@ props:
     default: true
     type: Boolean
 
+  use-query-pagination:
+    desc: Controla se vai ter controla da paginação via query. Recomendado o uso como "false" em casos de ter mais de um list-view na mesma página.
+    default: true
+    type: Boolean
+
   use-refresh:
     desc: Controla o [pull-to-refresh](https://quasar.dev/vue-components/pull-to-refresh#basic).
     default: true