Move resources to their own store

package.json

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

src/model/resource.ts

@@ -0,0 +1,16 @@
+import type { Resource } from '@etalab/data.gouv.fr-components'
+
+export interface ResourceType {
+  id: string
+  label: string
+}
+
+export interface ResourceData {
+  currentPage: number
+  resources: Resource[]
+  total: number
+  totalWithoutFilter: number
+  type: ResourceType
+}
+
+export type { Resource }

src/store/DatasetStore.js

@@ -147,46 +147,6 @@ export const useDatasetStore = defineStore('dataset', {
       }
       return datasets
     },
-    /**
-     * Load resources from the API via a HATEOAS rel
-     *
-     * @param {Object} rel - HATEOAS rel for datasets
-     * @param {string} pageSize - page size
-     * @returns {Promise<Array<{typeId: string, typeLabel: string, resources: Array<import("@etalab/data.gouv.fr-components").Resource>, total: number}>>}
-     */
-    async loadResources(rel, pageSize) {
-      if (this.resourceTypes.length === 0) {
-        this.resourceTypes = await datasetsApi.get('resource_types')
-      }
-      const resources = []
-      for (const type of this.resourceTypes) {
-        const url = new URL(rel.href)
-        url.searchParams.set('page_size', pageSize)
-        url.searchParams.set('type', type.id)
-        const updatedUrl = url.toString()
-        const response = await datasetsApiv2.request(updatedUrl)
-        resources.push({
-          currentPage: 1,
-          resources: response.data,
-          total: response.total,
-          typeId: type.id,
-          typeLabel: type.label
-        })
-      }
-      return resources
-    },
-
-    async fetchDatasetResources(datasetId, type, page, pageSize, query) {
-      const response = await datasetsApiv2.get(`${datasetId}/resources/`, {
-        params: {
-          page,
-          page_size: pageSize,
-          type,
-          q: query
-        }
-      })
-      return { data: response.data, total: response.total }
-    },
 
     async getLicense(license) {
       const response = await datasetsApi.get('licenses')

src/store/ResourceStore.ts

@@ -0,0 +1,69 @@
+import type { Rel } from '@etalab/data.gouv.fr-components'
+import { defineStore } from 'pinia'
+
+import config from '@/config'
+
+import type { Resource, ResourceData, ResourceType } from '../model/resource'
+import DatasetsAPI from '../services/api/resources/DatasetsAPI'
+
+const datasetsApi = new DatasetsAPI()
+const datasetsApiv2 = new DatasetsAPI({ version: 2 })
+const pageSize: number = config.website.pagination_sizes.files_list
+
+export interface RootState {
+  data: Record<string, ResourceData[]>
+  resourceTypes: ResourceType[]
+}
+
+export const useResourceStore = defineStore('resource', {
+  state: (): RootState => ({
+    data: {},
+    resourceTypes: []
+  }),
+  actions: {
+    /**
+     * Load resources from the API via a HATEOAS rel
+     *
+     */
+    async loadResources(datasetId: string, rel: Rel): Promise<ResourceData[]> {
+      if (datasetId in this.data) {
+        return this.data[datasetId]
+      }
+      if (this.resourceTypes.length === 0) {
+        this.resourceTypes = await datasetsApi.get('resource_types', {})
+      }
+      this.data[datasetId] = []
+      for (const type of this.resourceTypes) {
+        const url = new URL(rel.href)
+        url.searchParams.set('page_size', pageSize.toFixed(0))
+        url.searchParams.set('type', type.id)
+        const response = await datasetsApi.request(url.toString())
+        this.data[datasetId].push({
+          currentPage: 1,
+          resources: response.data,
+          total: response.total,
+          totalWithoutFilter: response.total,
+          type
+        })
+      }
+      return this.data[datasetId]
+    },
+
+    async fetchDatasetResources(
+      datasetId: string,
+      typeId: string,
+      page: number,
+      q = ''
+    ): Promise<{ data: Resource[]; total: number }> {
+      const response = await datasetsApiv2.get(`${datasetId}/resources`, {
+        params: {
+          page,
+          page_size: pageSize,
+          type: typeId,
+          q
+        }
+      })
+      return { data: response.data, total: response.total }
+    }
+  }
+})

src/views/datasets/DatasetDetailView.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 import {
   ResourceAccordion,
   OrganizationNameWithCertificate,
@@ -15,19 +15,23 @@ import config from '@/config'
 
 import ChartData from '../../components/ChartData.vue'
 import DiscussionsList from '../../components/DiscussionsList.vue'
+import type { ResourceData } from '../../model/resource'
 import { useDatasetStore } from '../../store/DatasetStore'
+import { useResourceStore } from '../../store/ResourceStore'
 import { useReuseStore } from '../../store/ReuseStore'
 import { descriptionFromMarkdown, formatDate } from '../../utils'
 
 const route = useRoute()
 const datasetId = route.params.did
 
 const datasetStore = useDatasetStore()
+const resourceStore = useResourceStore()
 const reuseStore = useReuseStore()
 
 const dataset = computed(() => datasetStore.get(datasetId) || {})
 const reuses = ref([])
-const resources = ref({})
+
+const resources = ref<Record<string, ResourceData>>({})
 const selectedTabIndex = ref(0)
 const license = ref({})
 const types = ref([])
@@ -83,11 +87,11 @@ const tabs = computed(() => {
 
 const description = computed(() => descriptionFromMarkdown(dataset))
 
-const changePage = (type, page = 1, query = '') => {
+const changePage = (type: string, page = 1, query = '') => {
   resources.value[type].currentPage = page
   resources.value[type].query = query
-  return datasetStore
-    .fetchDatasetResources(dataset.value.id, type, page, pageSize, query)
+  return resourceStore
+    .fetchDatasetResources(dataset.value.id, type, page, query)
     .then((data) => {
       resources.value[type].resources = data['data']
       resources.value[type].total = data['total']
@@ -131,10 +135,10 @@ const reuseDescription = (r) => {
   }
 }
 
-const getResourcesTitle = (typedResources) => {
+const getResourcesTitle = (typedResources: ResourceData) => {
   if (typedResources?.total > 1) {
     let pluralName
-    switch (typedResources.typeId) {
+    switch (typedResources.type.id) {
       case 'main':
         pluralName = 'Fichiers principaux'
         break
@@ -189,13 +193,13 @@ watch(
     // fetch ressources if need be
     if (dataset.value.resources.rel) {
       const resourceLoader = useLoading().show()
-      const allResources = await datasetStore.loadResources(
-        dataset.value.resources,
-        pageSize
+      const allResources = await resourceStore.loadResources(
+        dataset.value.id,
+        dataset.value.resources
       )
       for (const typedResources of allResources) {
-        resources.value[typedResources.typeId] = typedResources
-        resources.value[typedResources.typeId]['totalWithoutFilter'] =
+        resources.value[typedResources.type.id] = { ...typedResources }
+        resources.value[typedResources.type.id].totalWithoutFilter =
           typedResources.total
       }
       resourceLoader.hide()
@@ -271,9 +275,13 @@ watch(
         tab-id="tab-0"
         :selected="selectedTabIndex === 0"
       >
-        <div class="datagouv-components" v-if="selectedTabIndex === 0">
+        <div v-if="selectedTabIndex === 0" class="datagouv-components">
           <template v-for="typedResources in resources">
-            <div v-if="typedResources.totalWithoutFilter" class="fr-mb-4w">
+            <div
+              v-if="typedResources.totalWithoutFilter"
+              :key="typedResources.type.id"
+              class="fr-mb-4w"
+            >
               <h2 class="fr-mb-1v subtitle subtitle--uppercase">
                 {{ getResourcesTitle(typedResources) }}
               </h2>
@@ -283,15 +291,16 @@ watch(
                 placeholder="Rechercher"
                 :large="false"
                 class="search-bar"
-                @search="() => doSearch(typedResources.typeId)"
+                @search="() => doSearch(typedResources.type.id)"
                 @update:model-value="
-                  (value) => updateQuery(value, typedResources.typeId)
+                  (value) => updateQuery(value, typedResources.type.id)
                 "
               />
               <span v-if="typedResources.resources.length != 0">
                 <ResourceAccordion
                   v-for="resource in typedResources.resources"
-                  :datasetId="datasetId"
+                  :key="resource.id"
+                  :dataset-id="datasetId"
                   :resource="resource"
                 />
                 <Pagination
@@ -303,7 +312,7 @@ watch(
                   @change="
                     (page) =>
                       changePage(
-                        typedResources.typeId,
+                        typedResources.type.id,
                         page,
                         typedResources.query
                       )

src/views/datasets/DatasetsListView.vue

@@ -52,20 +52,14 @@ onBeforeRouteUpdate((to, from) => {
 })
 
 const getDatasetPage = (id) => {
-  const url = router.resolve({ name: 'dataset_detail', params: { did: id } })
-  return url.href
+  return { name: 'dataset_detail', params: { did: id } }
 }
 
 const getOrganizationPage = (id) => {
-  try {
-    const url = router.resolve({
-      name: 'organization_detail',
-      params: { oid: id }
-    })
-    return url.href
-  } catch (e) {
-    return ''
+  if (router.hasRoute('organization_detail')) {
+    return { name: 'organization_detail', params: { oid: id } }
   }
+  return ''
 }
 
 onMounted(() => {