Feat/pagination ressources

configs/ecospheres/config.yaml

@@ -67,6 +67,7 @@ website:
   pagination_sizes:
     organizations_list: 9
     topics_list: 100
+    files_list: 6
   contact_email: ecospheres@developpement-durable.gouv.fr
   home_banner_colors:
     - '#D6E3A1'

configs/meteo-france/config.yaml

@@ -75,6 +75,7 @@ website:
   pagination_sizes:
     organizations_list: 9
     topics_list: 100
+    files_list: 6
   home_banner_colors:
     - '#F7EED4'
     - '#ECEEE6'

package.json

@@ -18,7 +18,7 @@
     "prepare": "husky install"
   },
   "dependencies": {
-    "@etalab/data.gouv.fr-components": "^1.6.0",
+    "@etalab/data.gouv.fr-components": "^1.9.0",
     "@gouvminint/vue-dsfr": "^3.6.0",
     "@vueform/multiselect": "^2.6.2",
     "axios": "^1.6.2",

src/services/api/DatagouvfrAPI.js

@@ -89,9 +89,9 @@ export default class DatagouvfrAPI {
    * @param {string} entity_id
    * @returns {Promise}
    */
-  async get(entity_id) {
+  async get(entity_id, params) {
     const url = `${this.url()}/${entity_id}/`
-    return await this.makeRequestAndHandleResponse(url)
+    return await this.makeRequestAndHandleResponse(url, 'get', params)
   }
 
   /**

src/store/DatasetStore.js

@@ -67,7 +67,7 @@ export const useDatasetStore = defineStore('dataset', {
     async loadDatasetsForOrg(org_id, page = 1, sort = '-created') {
       const existing = this.getDatasetsForOrg(org_id, page, sort)
       if (existing.data) return existing
-      const datasets = await datasetsApi.getDatasetsForOrganization(
+      const datasets = await datasetsApiv2.getDatasetsForOrganization(
         org_id,
         page,
         sort
@@ -125,7 +125,7 @@ export const useDatasetStore = defineStore('dataset', {
     async load(dataset_id) {
       const existing = this.get(dataset_id)
       if (existing) return existing
-      const dataset = await datasetsApi.get(dataset_id)
+      const dataset = await datasetsApiv2.get(dataset_id)
       if (!dataset) return
       return this.addOrphan(dataset)
     },
@@ -136,11 +136,11 @@ export const useDatasetStore = defineStore('dataset', {
      * @returns {Array<object>}
      */
     async loadMultiple(rel) {
-      let response = await datasetsApi.request(rel.href)
+      let response = await datasetsApiv2.request(rel.href)
       let datasets = response.data
       this.addDatasets('orphan', response)
       while (response.next_page) {
-        response = await datasetsApi.request(response.next_page)
+        response = await datasetsApiv2.request(response.next_page)
         datasets = [...datasets, ...response.data]
         this.addDatasets('orphan', response)
       }
@@ -153,14 +153,23 @@ export const useDatasetStore = defineStore('dataset', {
      * @param {Object} rel - HATEOAS rel for datasets
      * @returns {Array<object>}
      */
-    async loadResources(rel) {
-      let response = await datasetsApiv2.request(rel.href)
-      let resources = response.data
-      while (response.next_page) {
-        response = await datasetsApiv2.request(response.next_page)
-        resources = [...resources, ...response.data]
-      }
-      return resources
+    async loadResources(rel, pageSize) {
+      let url = new URL(rel.href)
+      url.searchParams.set('page_size', pageSize)
+      let updatedUrl = url.toString()
+
+      let response = await datasetsApiv2.request(updatedUrl)
+      return response
+    },
+
+    async fetchDatasetResources(datasetId, page, pageSize) {
+      const response = await datasetsApiv2.get(`${datasetId}/resources/`, {
+        params: {
+          page: page,
+          page_size: pageSize
+        }
+      })
+      return response.data
     }
   }
 })

src/views/datasets/DatasetDetailView.vue

@@ -1,9 +1,12 @@
 <script setup>
 import { ResourceAccordion } from '@etalab/data.gouv.fr-components'
+import { Pagination } from '@etalab/data.gouv.fr-components'
 import { filesize } from 'filesize'
 import { computed, onMounted, ref, watchEffect } from 'vue'
 import { useRoute } from 'vue-router'
 
+import config from '@/config'
+
 import ChartData from '../../components/ChartData.vue'
 import Tile from '../../components/Tile.vue'
 import { useDatasetStore } from '../../store/DatasetStore'
@@ -26,6 +29,9 @@ const discussions = ref({})
 const discussionsPage = ref(1)
 const expandedDiscussion = ref(null)
 const selectedTabIndex = ref(0)
+const currentPage = ref(1)
+const totalResults = ref(0)
+const pageSize = config.website.pagination_sizes.files_list
 
 onMounted(() => {
   datasetStore.load(datasetId)
@@ -76,6 +82,15 @@ const tabs = computed(() => {
 
 const description = computed(() => descriptionFromMarkdown(dataset))
 
+const changePage = (page = 1) => {
+  currentPage.value = page
+  return datasetStore
+    .fetchDatasetResources(dataset.value.id, page, pageSize)
+    .then((data) => {
+      resources.value = data
+    })
+}
+
 const formatDate = (dateString) => {
   const date = new Date(dateString)
   return new Intl.DateTimeFormat('default', {
@@ -103,7 +118,12 @@ watchEffect(async () => {
     })
   // fetch ressources if need be
   if (dataset.value.resources.rel) {
-    resources.value = await datasetStore.loadResources(dataset.value.resources)
+    const { data, total } = await datasetStore.loadResources(
+      dataset.value.resources,
+      pageSize
+    )
+    resources.value = data
+    totalResults.value = total
   } else {
     resources.value = dataset.value.resources
   }
@@ -149,10 +169,21 @@ watchEffect(async () => {
       >
         <div class="datagouv-components" v-if="selectedTabIndex === 0">
           <ResourceAccordion
-            v-for="resource in dataset.resources"
+            v-for="resource in resources"
             :datasetId="datasetId"
             :resource="resource"
           />
+          <p v-if="!totalResults">
+            Aucune ressource n'est associée à votre recherche.
+          </p>
+          <Pagination
+            class="fr-mt-3w"
+            v-else-if="totalResults > pageSize"
+            :page="currentPage"
+            :page-size="pageSize"
+            :total-results="totalResults"
+            @change="changePage"
+          />
         </div>
       </DsfrTabContent>