Feat/add breadcrumbs (#251)

* feat: added breadcrumbs to pages

* feat: added breadcrumbs for about page

* fix: removed console.log

* fix: removed computed when no necessary

src/custom/meteo/views/FormMF.vue

@@ -12,6 +12,8 @@ const selectItems = ref([])
 let selectedDataPack = ref(null)
 const optionsDataPack = ref(Object.keys(datasetsIds))
 
+const links = [{ to: '/', text: 'Accueil' }, { text: 'Recherche Guidée' }]
+
 const onSelectDataPack = (pack) => {
   selectedDataset.value = null
   showDep.value = false
@@ -124,6 +126,9 @@ const showLoader = ref(false)
 </script>
 
 <template>
+  <div class="fr-container">
+    <DsfrBreadcrumb :links="links" />
+  </div>
   <div class="fr-container fr-mt-4w fr-mb-4w">
     <h1>Recherche guidée</h1>
     <p>Utiliser ce formulaire pour trouver un fichier en particulier.</p>

src/views/SimplePageView.vue

@@ -1,26 +1,33 @@
 <script setup>
 import MarkdownIt from 'markdown-it'
 import { computed, watchEffect } from 'vue'
+import { useRouter } from 'vue-router'
 
 import { pageStore } from '../store/PageStore'
 
 const markdown = new MarkdownIt()
 const store = pageStore()
 const content = computed(() => store.content)
+const title = useRouter().currentRoute.value.meta.title
 const props = defineProps({
   url: {
     type: String,
     required: true
   }
 })
 
+const links = computed(() => [{ to: '/', text: 'Accueil' }, { text: title }])
+
 watchEffect(async () => {
   if (!props.url) return
   store.getPageFromUrl(props.url)
 })
 </script>
 
 <template>
+  <div class="fr-container">
+    <DsfrBreadcrumb :links="links" />
+  </div>
   <div class="fr-container fr-mt-4w fr-mb-4w">
     <!-- eslint-disable-next-line vue/no-v-html -->
     <div v-html="markdown.render(content)" />

src/views/datasets/DatasetsListView.vue

@@ -34,6 +34,8 @@ const topicOptions = computed(() => {
   return [{ value: '', text: 'Toutes les données' }, ...topics]
 })
 
+const links = [{ to: '/', text: 'Accueil' }, { text: 'Données' }]
+
 const onSelectTopic = (topicId) => {
   selectedTopicId.value = topicId
   currentPage.value = 1
@@ -63,6 +65,9 @@ watchEffect(() => {
 </script>
 
 <template>
+  <div class="fr-container">
+    <DsfrBreadcrumb :links="links" />
+  </div>
   <div class="fr-container fr-mt-4w fr-mb-4w">
     <h1>Jeux de données</h1>
     <p v-if="query">Résultats de recherche pour "{{ query }}".</p>

src/views/organizations/OrganizationDetailView.vue

@@ -15,6 +15,12 @@ const datasetStore = useDatasetStore()
 
 const org = computed(() => orgStore.get(organizationId) || {})
 
+const links = computed(() => [
+  { to: '/', text: 'Accueil' },
+  { to: '/organizations', text: 'Organisations' },
+  { text: org.value.title }
+])
+
 const currentPage = ref(1)
 const pages = ref([])
 const datasets = ref({})
@@ -51,6 +57,9 @@ watchEffect(() => {
 </script>
 
 <template>
+  <div class="fr-container">
+    <DsfrBreadcrumb :links="links" />
+  </div>
   <div class="fr-container fr-mt-4w fr-mb-4w">
     <h1>{{ org.name }}</h1>
     <div v-html="description"></div>

src/views/organizations/OrganizationsListView.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, onMounted } from 'vue'
+import { computed, ref, onMounted } from 'vue'
 import { useLoading } from 'vue-loading-overlay'
 
 import config from '@/config'
@@ -14,6 +14,11 @@ const currentPage = ref(1)
 const pages = store.getPagination()
 const organizations = ref([])
 
+const links = computed(() => [
+  { to: '/', text: 'Accueil' },
+  { text: 'Organisations' }
+])
+
 const title = config.website.title
 
 async function onUpdatePage(page) {
@@ -29,6 +34,9 @@ onMounted(() => {
 </script>
 
 <template>
+  <div class="fr-container">
+    <DsfrBreadcrumb :links="links" />
+  </div>
   <div class="fr-container fr-mt-4w fr-mb-4w">
     <h1>Organisations</h1>
     <p>Parcourir toutes les organisations présentes sur {{ title }}.</p>