MODIF CONFIGS DRUPAL centre de ressources: tri par étape + ressources mis en avant

config/sync/caravane.settings.yml

@@ -2,9 +2,10 @@ features:
   node_user_picture: false
   comment_user_picture: true
   comment_user_verification: true
-  favicon: 1
+  favicon: 0
 logo:
-  use_default: 1
+  use_default: 0
+  path: 'public://favicon-caravane_1.png'
 favicon:
   use_default: 0
   path: ''

config/sync/core.entity_form_display.node.ressource.default.yml

@@ -7,6 +7,7 @@ dependencies:
     - field.field.node.ressource.field_date_ressource
     - field.field.node.ressource.field_etape
     - field.field.node.ressource.field_introduction
+    - field.field.node.ressource.field_mis_en_avant
     - field.field.node.ressource.field_parties_ressource
     - field.field.node.ressource.field_thematiques
     - field.field.node.ressource.field_type_de_ressource
@@ -22,11 +23,12 @@ third_party_settings:
   field_group:
     group_details:
       children:
-        - field_type_de_ressource
         - field_thematiques
         - field_etape
         - status
         - path
+        - field_mis_en_avant
+        - field_type_de_ressource
       label: Details
       region: content
       parent_name: ''
@@ -128,6 +130,13 @@ content:
       rows: 5
       placeholder: ''
     third_party_settings: {  }
+  field_mis_en_avant:
+    type: boolean_checkbox
+    weight: 31
+    region: content
+    settings:
+      display_label: true
+    third_party_settings: {  }
   field_parties_ressource:
     type: paragraphs
     weight: 5
@@ -165,7 +174,7 @@ content:
     third_party_settings: {  }
   field_type_de_ressource:
     type: options_select
-    weight: 31
+    weight: 32
     region: content
     settings: {  }
     third_party_settings: {  }

config/sync/core.entity_view_display.node.ressource.default.yml

@@ -7,6 +7,7 @@ dependencies:
     - field.field.node.ressource.field_date_ressource
     - field.field.node.ressource.field_etape
     - field.field.node.ressource.field_introduction
+    - field.field.node.ressource.field_mis_en_avant
     - field.field.node.ressource.field_parties_ressource
     - field.field.node.ressource.field_thematiques
     - field.field.node.ressource.field_type_de_ressource
@@ -54,6 +55,16 @@ content:
     third_party_settings: {  }
     weight: 107
     region: content
+  field_mis_en_avant:
+    type: boolean
+    label: above
+    settings:
+      format: default
+      format_custom_false: ''
+      format_custom_true: ''
+    third_party_settings: {  }
+    weight: 109
+    region: content
   field_parties_ressource:
     type: entity_reference_revisions_entity_view
     label: above

config/sync/core.entity_view_display.node.ressource.teaser.yml

@@ -8,6 +8,7 @@ dependencies:
     - field.field.node.ressource.field_date_ressource
     - field.field.node.ressource.field_etape
     - field.field.node.ressource.field_introduction
+    - field.field.node.ressource.field_mis_en_avant
     - field.field.node.ressource.field_parties_ressource
     - field.field.node.ressource.field_thematiques
     - field.field.node.ressource.field_type_de_ressource
@@ -29,6 +30,7 @@ hidden:
   field_date_ressource: true
   field_etape: true
   field_introduction: true
+  field_mis_en_avant: true
   field_parties_ressource: true
   field_thematiques: true
   field_type_de_ressource: true

config/sync/field.field.node.ressource.field_mis_en_avant.yml

@@ -0,0 +1,23 @@
+uuid: 3e824533-8b04-4c3c-acb4-cdf87f40e281
+langcode: fr
+status: true
+dependencies:
+  config:
+    - field.storage.node.field_mis_en_avant
+    - node.type.ressource
+id: node.ressource.field_mis_en_avant
+field_name: field_mis_en_avant
+entity_type: node
+bundle: ressource
+label: 'mis en avant'
+description: ''
+required: false
+translatable: false
+default_value:
+  -
+    value: 0
+default_value_callback: ''
+settings:
+  on_label: Activé
+  off_label: Désactivé
+field_type: boolean

config/sync/field.storage.node.field_mis_en_avant.yml

@@ -0,0 +1,18 @@
+uuid: e92021e0-c606-4e50-b042-012920aa6341
+langcode: fr
+status: true
+dependencies:
+  module:
+    - node
+id: node.field_mis_en_avant
+field_name: field_mis_en_avant
+entity_type: node
+type: boolean
+settings: {  }
+module: core
+locked: false
+cardinality: 1
+translatable: true
+indexes: {  }
+persist_with_no_fields: false
+custom_storage: false

config/sync/views.view.partenaires.yml

@@ -200,7 +200,7 @@ display:
         type: normal
         title: 'Les partenaires'
         description: ''
-        weight: -48
+        weight: -47
         expanded: false
         menu_name: main
         parent: ''

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';

web/themes/custom/caravane/assets/js/utils/content/contentFetchUtils.js

@@ -67,7 +67,7 @@ export async function getRelatedEtape(direction, path) {
     });    
 }
 
-export async function getRessourceItemCard(item) {    
+export async function getRessourceItemCard(item) {
     try {
         const ressourceFetch = await REST.get(item.links.self.href);
         
@@ -120,13 +120,19 @@ export async function getRessourceItemCard(item) {
                     vignette = null;
             }
         }
+
+        const relatedEtape = await REST.get(item.relationships.field_etape.links.related.href);
+        console.log(item);
+        
         
         return {
             ressourceType: item.attributes.field_type_de_ressource,
             title: item.attributes.title,
             auteurice: item.attributes.field_autheurice,
+            promoted: item.attributes.field_mis_en_avant,
             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) {

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);

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,21 @@ 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) => {
+            if (a.promoted && !b.promoted) return -1;
+            if (!a.promoted && b.promoted) return 1;
+
+            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 +136,12 @@ watch(selectedType, async () => {
         }
     });
 });
+
+watch(selectedEtape, () => {
+  props.content.ressourceTypes.forEach(type => {
+    initializeRessources(type);
+  });
+});
 </script>
 
 <style lang="scss" scoped>

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

@@ -1,7 +1,8 @@
 <template>
     <div 
     :data-href="ressource.url"
-    :id="`ressource-${index}`">
+    :id="`ressource-${index}`"
+    :class="ressource.promoted ? 'promoted' : ''">
         <figure>
             <img :src="ressource.vignette.url" :alt="ressource.vignette.alt" />
         </figure>
@@ -45,4 +46,4 @@ const props = defineProps({
   ressource: Object,
   index: String,
 });
-</script>
+</script>

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);
+  }

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;
@@ -1588,12 +1590,27 @@ body{
                 > .ressource-item > div {
                   display: flex;
                   gap: 0.8rem;
+
                   @media screen and (min-width: $desktop-min-width) {
                     gap: 1.2rem;
                   }
                   cursor: pointer;
                   transform: scale(1);
                   transition: transform 0.2s ease-in-out;
+                  &.promoted {
+                    &::after {
+                        content: '';
+                        position: absolute;
+                        top: -10px;
+                        left: -10px;
+                        width: 20px !important;
+                        height: 20px !important;
+                        background-color: $brand-color;
+                        mask-image: url("/themes/custom/caravane/assets/pictograms/hexagone.svg");
+                        mask-size: contain;
+                        mask-repeat: no-repeat;
+                    }
+                  }
                   &:hover {
                     transform: scale(1.05);
                   }