+
+
diff --git a/src/custom/ecospheres/components/indicators/IndicatorList.vue b/src/custom/ecospheres/components/indicators/IndicatorList.vue
new file mode 100644
index 000000000..f15be9fe1
--- /dev/null
+++ b/src/custom/ecospheres/components/indicators/IndicatorList.vue
@@ -0,0 +1,154 @@
+
+
+
+
+
+
+
+
+
+ -
+
-
+
+ {{ tag.value }} +
+
+
+ {{ indicator.title }}
+
+
+
+
+ {{ numberOfResultMsg }}
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+ + Aucun résultat ne correspond à votre recherche +
++ Essayez de réinitialiser les filtres pour agrandir votre champ de + recherche. +
+
+
+
+
+
+ -
+
-
+
+
+
+
+
diff --git a/src/custom/ecospheres/model/config.ts b/src/custom/ecospheres/model/config.ts
new file mode 100644
index 000000000..4431333c1
--- /dev/null
+++ b/src/custom/ecospheres/model/config.ts
@@ -0,0 +1,17 @@
+import { type IndicatorFilters } from './indicator'
+
+export interface FilterConf {
+ id: keyof IndicatorFilters
+ name: string
+ color: string
+ values: {
+ id: string
+ name: string
+ }[]
+}
+
+export interface IndicatorsConf {
+ global_tag_prefix: string
+ organization_id: string
+ filters: FilterConf[]
+}
diff --git a/src/custom/ecospheres/model/indicator.ts b/src/custom/ecospheres/model/indicator.ts
new file mode 100644
index 000000000..ef3a39956
--- /dev/null
+++ b/src/custom/ecospheres/model/indicator.ts
@@ -0,0 +1,18 @@
+import type { DatasetV2 } from '@datagouv/components'
+
+export type Indicator = DatasetV2
+
+// repeating keys is necessary, type becomes too complex to be usable if we don't
+// we're keeping values and type in the same place to facilitate maintenance
+export const FILTER_KEYS = ['theme', 'enjeu'] as const
+
+export type IndicatorFilters = {
+ theme: string | null
+ enjeu: string | null
+}
+
+export interface IndicatorTag {
+ color: string
+ value: string
+ type: string
+}
diff --git a/src/custom/ecospheres/routes.ts b/src/custom/ecospheres/routes.ts
index 55672e28f..07396e2c4 100644
--- a/src/custom/ecospheres/routes.ts
+++ b/src/custom/ecospheres/routes.ts
@@ -1,3 +1,6 @@
+import { type RouteLocationNormalizedLoaded } from 'vue-router'
+import { FILTER_KEYS } from './model/indicator'
+
export const routes = [
{
path: '/',
@@ -6,5 +9,30 @@ export const routes = [
title: 'Accueil'
},
component: async () => await import('./views/HomeView.vue')
+ },
+ {
+ path: '/indicators',
+ name: 'indicators',
+ meta: {
+ title: 'Indicateurs'
+ },
+ props: (route: RouteLocationNormalizedLoaded) => {
+ const filterProps = FILTER_KEYS.reduce(
+ (acc, key) => ({
+ ...acc,
+ [key]: route.query[key] || null
+ }),
+ {}
+ )
+ return {
+ query: route.query.q,
+ geozone: route.query.geozone || null,
+ page: route.query.page || null,
+ sort: route.query.sort || null,
+ ...filterProps
+ }
+ },
+ component: async () =>
+ await import('./views/indicators/IndicatorsListView.vue')
}
]
diff --git a/src/custom/ecospheres/store/IndicatorStore.ts b/src/custom/ecospheres/store/IndicatorStore.ts
new file mode 100644
index 000000000..0dd738315
--- /dev/null
+++ b/src/custom/ecospheres/store/IndicatorStore.ts
@@ -0,0 +1,53 @@
+import { defineStore } from 'pinia'
+
+import config from '@/config'
+import SearchAPI from '@/services/api/SearchAPI'
+import type { Indicator, IndicatorFilters } from '../model/indicator'
+import { useTagsQuery } from '../utils/indicator'
+
+const searchApi = new SearchAPI()
+const PAGE_SIZE = 20
+
+export interface RootState {
+ indicators: Indicator[]
+ total: number
+}
+
+interface QueryArgs extends IndicatorFilters {
+ query: string
+ geozone: string | null
+}
+
+export const useIndicatorStore = defineStore('indicator', {
+ state: (): RootState => ({
+ indicators: [],
+ total: 0
+ }),
+ actions: {
+ async query(args: QueryArgs) {
+ const { query, ...queryArgs } = args
+ const { extraArgs, tag } = useTagsQuery(queryArgs)
+ const results = await searchApi.search(query, null, 1, {
+ organization: config.indicators.organization_id,
+ page_size: PAGE_SIZE,
+ tag,
+ ...extraArgs
+ })
+ this.indicators = results.data
+ this.total = results.total
+ }
+ },
+ getters: {
+ pagination() {
+ const nbPages = Math.ceil(this.total / PAGE_SIZE)
+ return [...Array(nbPages).keys()].map((page) => {
+ page += 1
+ return {
+ label: page.toString(),
+ href: '#',
+ title: `Page ${page}`
+ }
+ })
+ }
+ }
+})
diff --git a/src/custom/ecospheres/utils/a11y.ts b/src/custom/ecospheres/utils/a11y.ts
new file mode 100644
index 000000000..606f571f6
--- /dev/null
+++ b/src/custom/ecospheres/utils/a11y.ts
@@ -0,0 +1,33 @@
+import {
+ AccessibilityPropertiesKey,
+ type AccessibilityPropertiesType
+} from '@/model/injectionKeys'
+import { computed, watch, type Ref } from 'vue'
+import { useRoute } from 'vue-router'
+
+// TODO: use this on BouquetsListView and DatasetsListView
+export const useAccessibilityProperties = (
+ query: Ref
+
+
+
+
+
+
+
+
+
+
+ Indicateurs territoriaux
+
+
+ Les indicateurs territoriaux, qu’est-ce que c’est ?
++ Les indicateurs territoriaux sont des outils statistiques et analytiques + qui permettent d’évaluer et de mesurer divers aspects d’un territoire + donné. Ces indicateurs aident à comprendre les dynamiques locales, à + identifier des problématiques spécifiques, et à orienter les décisions + publiques et les politiques de développement. +
++ Ils sont essentiels pour un diagnostic territorial et pour le suivi des + évolutions dans le temps. +
+Catalogues d'indicateurs
+
+
+
+
+
+
+
+
+
+