Merge pull request #190 from ecolabdata/feat-add-ressource-component

npm package @etalab/data.gouv.fr-components + replaced DsfrFileDownloadList by ResourceAccordion

package.json

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

src/main.js

@@ -1,4 +1,7 @@
+import { setupI18n } from '@etalab/data.gouv.fr-components'
+import '@etalab/data.gouv.fr-components/dist/style.css'
 import '@gouvfr/dsfr/dist/dsfr.min.css'
+import '@gouvfr/dsfr/dist/utility/utility.min.css'
 import VueDsfr from '@gouvminint/vue-dsfr'
 // Import des styles du DSFR
 import '@gouvminint/vue-dsfr/styles'
@@ -19,10 +22,12 @@ import router from './router'
 
 const app = createApp(App)
 const pinia = createPinia()
+const i18n = setupI18n()
 
 app.use(router)
 app.use(VueDsfr, { icons: Object.values(icons) })
 app.use(pinia)
+app.use(i18n)
 
 app.use(TextClamp)
 app.use(LoadingPlugin)

src/views/datasets/DatasetDetailView.vue

@@ -1,4 +1,5 @@
 <script setup>
+import { ResourceAccordion } from '@etalab/data.gouv.fr-components'
 import { filesize } from 'filesize'
 import { computed, onMounted, ref, watchEffect } from 'vue'
 import { useRoute } from 'vue-router'
@@ -146,11 +147,13 @@ watchEffect(async () => {
         tab-id="tab-0"
         :selected="selectedTabIndex === 0"
       >
-        <DsfrFileDownloadList
-          class="fr-mt-4w"
-          :files="files"
-          title="Fichiers du jeu de données"
-        />
+        <div class="datagouv-components" v-if="selectedTabIndex === 0">
+          <ResourceAccordion
+            v-for="resource in dataset.resources"
+            :datasetId="datasetId"
+            :resource="resource"
+          />
+        </div>
       </DsfrTabContent>
 
       <!-- Réutilisations -->

vite.config.ts

@@ -37,7 +37,8 @@ export default defineConfig(({ mode }) => {
       alias: {
         '@': fileURLToPath(new URL('./src', import.meta.url)),
         '@root': resolve(__dirname, './'),
-        '@siteConfig': fileURLToPath(new URL(configDir, import.meta.url))
+        '@siteConfig': fileURLToPath(new URL(configDir, import.meta.url)),
+        vue: 'vue/dist/vue.esm-bundler.js'
       }
     },
     test: {