filtre ressources par étape + triées par ordre chrono

web/themes/custom/caravane/assets/js/vuejs/components/CentreDeRessource.vue

@@ -8,6 +8,12 @@
                     {{ type.replace(/_/g, ' ').replace(/^\w/, char => char.toUpperCase()) }}
                 </option>
             </select>
+            <select v-model="selectedEtape">
+                <option value="">Toutes les étapes</option>
+                <option v-for="etape in allRelatedEtapes" :key="etape" :value="etape">
+                    {{ etape }}
+                </option>
+            </select>
         </div>
         <div v-if="content.intro" v-html="content.intro" class="intro"></div>
         <template v-for="(type, typeIndex) in filteredTypes" :key="type">
@@ -43,6 +49,7 @@
 
 <script setup>
 import RessourceCard from './RessourceCard.vue';
+import useParseDate from '../composables/useParseDates';
 
 import { ref, computed, watch, nextTick } from 'vue';
 
@@ -55,6 +62,14 @@ const searchQuery = ref('');
 const selectedType = ref('');
 const ressourcesToDisplay = ref({});
 const visibleItemsPerSection = 4;
+const selectedEtape = ref('');
+const allRelatedEtapes = new Set();
+
+props.content.ressources.forEach(ressource => {
+    if (ressource.relatedEtape) {
+        allRelatedEtapes.add(ressource.relatedEtape);
+    }
+})
 
 const filteredTypes = computed(() => {
     return selectedType.value ? [selectedType.value] : props.content.ressourceTypes;
@@ -62,12 +77,18 @@ const filteredTypes = computed(() => {
 
 const ressourcesByType = (type) => {
     return props.content.ressources
+        .filter(ressource => !selectedEtape.value || ressource.relatedEtape === selectedEtape.value)
         .filter(ressource => ressource.ressourceType === type)
-        .filter(ressource => 
-            searchQuery.value === '' || 
+        .filter(ressource =>
+            searchQuery.value === '' ||
             ressource.title.toLowerCase().includes(searchQuery.value.toLowerCase())
-        );
-}
+        ).sort((a, b) => {
+            const dateA = useParseDate(a.date);
+            const dateB = useParseDate(b.date);
+            
+            return dateB - dateA; // descending order (newest first)
+        });        
+};
 
 const initializeRessources = (type) => {
     ressourcesToDisplay.value[type] = ressourcesByType(type).slice(0, visibleItemsPerSection);
@@ -112,6 +133,12 @@ watch(selectedType, async () => {
         }
     });
 });
+
+watch(selectedEtape, () => {
+  props.content.ressourceTypes.forEach(type => {
+    initializeRessources(type);
+  });
+});
 </script>
 
 <style lang="scss" scoped>