New table and filters sorts

datagouv · May 16, 2024 · 7c61ad5 · 7c61ad5
1 parent 832c280
commit 7c61ad5
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 30 deletions.
diff --git a/frontend/site/.vitepress/theme/components/HighValueDatasets.vue b/frontend/site/.vitepress/theme/components/HighValueDatasets.vue
@@ -1,5 +1,5 @@
 <template>
-    <Table :filters endpoint="high_value_datasets" :sortFunc>
+    <Table :filters endpoint="high_value_datasets" :filtersSorts>
         <template #thead>
             <th>Titre</th>
             <th>Ensemble de données</th>
@@ -37,24 +37,14 @@ const filters = [
     { slug: 'status', key_in_api: 'STATUT', placeholder: 'Tous les statuts', label: 'Statut' },
 ]
 
-let nextId = 0
-let categoriesIds = {}
-
-// Sort first by theme (with a known list of priorities) then by category (don't have to be ordered, just group together)
-const sortFunc = (line) => {
-    const themeValue = {
+const filtersSorts = {
+    'theme': {
         "Données géospatiales": 1,
         "Observation de la Terre et environnement": 2,
         "Météorologie": 3,
         "Statistiques": 4,
         "Entreprises et propriétés d'entreprises": 5,
         "Mobilité": 6,
-    }[line['THÉMATIQUE']]
-
-    if (! categoriesIds[line['ENSEMBLE DE DONNÉES']]) {
-        categoriesIds[line['ENSEMBLE DE DONNÉES']] = nextId++
-    }
-
-    return themeValue * 100 + categoriesIds[line['ENSEMBLE DE DONNÉES']]
+    },
 }
 </script>
diff --git a/frontend/site/.vitepress/theme/components/Table.vue b/frontend/site/.vitepress/theme/components/Table.vue
@@ -42,16 +42,18 @@ import Select from './Select.vue'
 import { useData } from 'vitepress';
 import { useUrlSearchParams } from '@vueuse/core'
 
-const props = defineProps<{
+const props = withDefaults(defineProps<{
     endpoint: 'high_value_datasets' | 'ministerial_commitments';
     filters: Array<{
         slug: string;
         key_in_api: string;
         label: string;
         placeholder: string;
     }>;
-    sortFunc?: (value: any) => number;
-}>()
+    filtersSorts?: { [filterSlug: string] : { [filterValue: string] : number; } ; }
+}>(), {
+    filtersSorts: {}
+})
 
 // If the selected is not set, the value is undefined (the placeholder inside the `Select` has a `:value="undefined"` too)
 const selectedFilters = useUrlSearchParams<{ string: string | undefined }>('history')
@@ -77,17 +79,16 @@ const allValues = Object.fromEntries(
     props.filters.map((filter) => [
         filter.slug,
         computed(() => {
-            const values = lines.value.filter(Boolean).map((line) => line[filter.key_in_api])
+            const values: Array<string> = lines.value.filter(Boolean).map((line) => line[filter.key_in_api])
             const uniqueValues = Array.from(new Set(values))
 
-            const valuesWithCount = uniqueValues
-                .filter(Boolean)
-                .map((value) => ({
-                    value,
-                    count: lines.value.filter((line) => line[filter.key_in_api] == value).length,
-                }));
-            valuesWithCount.sort((a, b) => b.count - a.count);
-            return valuesWithCount.map(({ value }) => value)
+            if (filter.slug in props.filtersSorts) {
+                uniqueValues.sort((a, b) => (props.filtersSorts[filter.slug][a] ?? Infinity) - (props.filtersSorts[filter.slug][b] ?? Infinity));
+            } else {
+                uniqueValues.sort((a, b) => a.localeCompare(b));
+            }
+
+            return uniqueValues
         }),
     ])
 )
@@ -102,10 +103,11 @@ const filteredLines = computed(() => {
         return true
     })
 
-    if (props.sortFunc) {
-        const sortFunc = props.sortFunc // To make TS happy… :-(
-        results.sort((a, b) => sortFunc(a) - sortFunc(b))
-    }
+
+    // Put the undefined title at the end of the table
+    const fixTitle = (title) => title === 'A venir' ? 'zzzz' : title; 
+
+    results.sort((a, b) => fixTitle(a['TITRE']).localeCompare(fixTitle(b['TITRE'])))
 
     return results
 })