From bfb39a02597a596219e8542a68169bb1f4b3bcf8 Mon Sep 17 00:00:00 2001
From: Valentin Le Moign <valentin_le_moign@figureslibres.io>
Date: Tue, 20 May 2025 20:07:03 +0200
Subject: [PATCH] =?UTF-8?q?filtre=20ressources=20par=20=C3=A9tape=20+=20tr?=
 =?UTF-8?q?i=C3=A9es=20par=20ordre=20chrono?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../caravane/assets/js/stores/content.js      |  3 +-
 .../js/utils/content/contentFetchUtils.js     |  3 ++
 .../assets/js/utils/content/multiItemPages.js |  2 ++
 .../js/vuejs/components/CentreDeRessource.vue | 35 ++++++++++++++++---
 .../js/vuejs/composables/useParseDates.js     | 26 ++++++++++++++
 .../custom/caravane/assets/scss/main.scss     |  2 ++
 6 files changed, 66 insertions(+), 5 deletions(-)
 create mode 100644 web/themes/custom/caravane/assets/js/vuejs/composables/useParseDates.js

diff --git a/web/themes/custom/caravane/assets/js/stores/content.js b/web/themes/custom/caravane/assets/js/stores/content.js
index a0fc2f4..14fec4e 100644
--- a/web/themes/custom/caravane/assets/js/stores/content.js
+++ b/web/themes/custom/caravane/assets/js/stores/content.js
@@ -188,9 +188,10 @@ export const useContentStore = defineStore('content', {
                         case 'gouvernance':
                             multiItemPageArray = await getGouvernance(rawContent);
                             break;
-                    }
+                        }
 
                     this.content[`${this.contentType}s`] = multiItemPageArray;
+                    
                 }
             } catch (error) {
                 this.error = 'Failed to fetch data';
diff --git a/web/themes/custom/caravane/assets/js/utils/content/contentFetchUtils.js b/web/themes/custom/caravane/assets/js/utils/content/contentFetchUtils.js
index a6933ee..f4c588b 100644
--- a/web/themes/custom/caravane/assets/js/utils/content/contentFetchUtils.js
+++ b/web/themes/custom/caravane/assets/js/utils/content/contentFetchUtils.js
@@ -120,6 +120,8 @@ export async function getRessourceItemCard(item) {
                     vignette = null;
             }
         }
+
+        const relatedEtape = await REST.get(item.relationships.field_etape.links.related.href);        
         
         return {
             ressourceType: item.attributes.field_type_de_ressource,
@@ -127,6 +129,7 @@ export async function getRessourceItemCard(item) {
             auteurice: item.attributes.field_autheurice,
             date: getCleanDate(item.attributes.field_date_ressource),
             url: ressourceFetch.data.data.attributes.metatag.find(tag => tag.tag === "link")?.attributes.href,
+            relatedEtape: relatedEtape.data.data.attributes.title,
             vignette
         };
     } catch (error) {
diff --git a/web/themes/custom/caravane/assets/js/utils/content/multiItemPages.js b/web/themes/custom/caravane/assets/js/utils/content/multiItemPages.js
index f9f267c..9b960e4 100644
--- a/web/themes/custom/caravane/assets/js/utils/content/multiItemPages.js
+++ b/web/themes/custom/caravane/assets/js/utils/content/multiItemPages.js
@@ -55,6 +55,8 @@ export async function getGouvernance(rawContent) {
 }
 
 export async function getRessources(rawContent) {
+    console.log(rawContent);
+    
     const ressourcesPromises = rawContent.map(item => getRessourceItemCard(item));        
 
     return await Promise.all(ressourcesPromises);
diff --git a/web/themes/custom/caravane/assets/js/vuejs/components/CentreDeRessource.vue b/web/themes/custom/caravane/assets/js/vuejs/components/CentreDeRessource.vue
index bf24421..41344f2 100644
--- a/web/themes/custom/caravane/assets/js/vuejs/components/CentreDeRessource.vue
+++ b/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>
diff --git a/web/themes/custom/caravane/assets/js/vuejs/composables/useParseDates.js b/web/themes/custom/caravane/assets/js/vuejs/composables/useParseDates.js
new file mode 100644
index 0000000..6f04bb9
--- /dev/null
+++ b/web/themes/custom/caravane/assets/js/vuejs/composables/useParseDates.js
@@ -0,0 +1,26 @@
+const frenchMonthMap = {
+    janvier: 0,
+    février: 1,
+    mars: 2,
+    avril: 3,
+    mai: 4,
+    juin: 5,
+    juillet: 6,
+    août: 7,
+    septembre: 8,
+    octobre: 9,
+    novembre: 10,
+    décembre: 11
+  };
+  
+export default function parseDate(dateObj) {
+    if (!dateObj || !frenchMonthMap[dateObj.m?.toLowerCase()]) return new Date(0);
+  
+    const day = Number(dateObj.d);
+    const month = frenchMonthMap[dateObj.m.toLowerCase()];
+    const year = Number(dateObj.y);
+  
+    if (isNaN(day) || isNaN(month) || isNaN(year)) return new Date(0);
+  
+    return new Date(year, month, day);
+  }
\ No newline at end of file
diff --git a/web/themes/custom/caravane/assets/scss/main.scss b/web/themes/custom/caravane/assets/scss/main.scss
index ea42178..cb0a3d9 100644
--- a/web/themes/custom/caravane/assets/scss/main.scss
+++ b/web/themes/custom/caravane/assets/scss/main.scss
@@ -1292,6 +1292,8 @@ body{
                             font-family: 'Marianne', sans-serif;
                           }
                           > select {
+                            max-width: 20%;
+                            margin-right: 2rem;
                             appearance: none;
                             border: solid 1px var(--couleur);
                             padding: 0.5rem 1rem;