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

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);
         
@@ -121,12 +121,15 @@ export async function getRessourceItemCard(item) {
             }
         }
 
-        const relatedEtape = await REST.get(item.relationships.field_etape.links.related.href);        
+        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,

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

@@ -83,6 +83,9 @@ const ressourcesByType = (type) => {
             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);
             

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/scss/main.scss

@@ -1590,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);
                   }