@paris-ias/list 1.0.178 → 1.0.180

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@paris-ias/list",
   "configKey": "list",
-  "version": "1.0.178",
+  "version": "1.0.180",
   "builder": {
     "@nuxt/module-builder": "0.8.4",
     "unbuild": "2.0.0"

package/dist/runtime/components/events/DenseItem.vue

@@ -91,6 +91,7 @@
 import { useI18n, useNuxtApp, computed } from "#imports"
 import { useDisplay } from "vuetify"
 import { useRootStore } from "../../stores/root"
+import { highlightAndTruncate } from "../../composables/useUtils"
 const { $rootStore } = useNuxtApp()
 const { smAndDown, mdAndUp } = useDisplay()
 

package/dist/runtime/components/events/View.vue

@@ -206,7 +206,6 @@
               eager
               ripple
               variant="accordion"
-              "
             >
               <v-expansion-panel
                 v-if="item.description"

package/dist/runtime/components/fellowships/DenseItem.vue

@@ -35,6 +35,7 @@
 
 <script setup>
 import { useNuxtApp } from "#imports"
+import { highlightAndTruncate } from "../../composables/useUtils"
 const { $rootStore } = useNuxtApp()
 
 const props = defineProps({

package/dist/runtime/components/list/molecules/Header.vue

@@ -42,10 +42,10 @@ const props = defineProps({
   },
 })
 const visible = computed(() => {
-  console.log(
+  /*   console.log(
     "SHOULD DISPLAY FILTERS:",
     $stores[props.type]?.filtersCount && $stores[props.type]?.filtersCount > 0,
-  )
+  ) */
   return !!(
     $stores[props.type]?.filtersCount && $stores[props.type]?.filtersCount > 0
   )

package/dist/runtime/components/list/organisms/List.vue

@@ -105,7 +105,7 @@ const props = defineProps({
 })
 
 // Initialize loading state
-console.log("start llocal loading from setup")
+/* console.log("start llocal loading from setup") */
 rootStore.setLoading(true, props.type)
 
 // Initial route -> store (single source-of-truth on first load)
@@ -132,8 +132,8 @@ const itemTemplate = computed(() =>
     ).toString(),
   ),
 )
-console.log("Starting query for type: ", props.type)
-console.log("Using variables: ", variables.value)
+/* console.log("Starting query for type: ", props.type)
+console.log("Using variables: ", variables.value) */
 
 // Apollo GraphQL query with proper reactivity
 const { data, pending, error, refresh } = await useAsyncQuery(
@@ -147,25 +147,37 @@ const { data, pending, error, refresh } = await useAsyncQuery(
 if (error.value) {
   console.error("GraphQL query error: ", error.value)
 } else {
-  console.log("Query result data: ", data.value)
+  /*   console.log("Query result data: ", data.value) */
 }
 
 // Apply data to store immediately if available
 if (data.value) {
-  console.log("Applying data to store directly [first load scenario]")
+  /*   console.log("Applying data to store directly [first load scenario]") */
   rootStore.applyListResult(props.type, data.value)
 }
 
+// Watch for route query changes to update filters
+watch(
+  () => route.query,
+  (newQuery, oldQuery) => {
+    if (JSON.stringify(newQuery) !== JSON.stringify(oldQuery)) {
+      /*     console.log("Route query changed, reloading filters from URL") */
+      rootStore.loadRouteQuery(props.type)
+    }
+  },
+  { deep: true },
+)
+
 // Watch for variable changes to refresh and apply new data
 watch(
   variables,
   async (newVars, oldVars) => {
     if (newVars && JSON.stringify(newVars) !== JSON.stringify(oldVars)) {
-      console.log("Variables changed, refreshing query, newVars: ", newVars)
+      /*     console.log("Variables changed, refreshing query, newVars: ", newVars) */
       rootStore.setLoading(true, props.type)
       await refresh()
       if (data.value) {
-        console.log("Applying refreshed data to store")
+        /*         console.log("Applying refreshed data to store") */
         rootStore.applyListResult(props.type, data.value)
       }
       rootStore.setLoading(false, props.type)
@@ -179,7 +191,7 @@ const items = computed(() => $stores[props.type]?.items || [])
 
 onMounted(() => {
   // On initial mount: clear loading state
-  console.log("STOP local loading from mounted")
+  /*  console.log("STOP local loading from mounted") */
   rootStore.setLoading(false, props.type)
 })
 
@@ -187,7 +199,7 @@ onBeforeUnmount(() => {
   rootStore.resetState(props.type, locale.value)
 })
 async function onPageChange(newPage) {
-  console.log("onPageChange: ", newPage)
+  /*  console.log("onPageChange: ", newPage) */
 
   // Set loading state first
   rootStore.setLoading(true, props.type)

package/dist/runtime/components/list/organisms/Results.vue

@@ -84,7 +84,7 @@ const { data, pending, error, refresh } = await useAsyncQuery(
 if (error.value) {
   console.error("GraphQL query error: ", error.value)
 } else {
-  console.log("Query result data: ", data.value.items?.length)
+  /*  console.log("Query result data: ", data.value.items?.length) */
 }
 
 // Apply data to store immediately if available
@@ -118,6 +118,62 @@ const updateSearch = async (newSearch) => {
 onBeforeUnmount(() => {
   /* rootStore.resetState("all", locale.value) */
 })
+
+const socioscope = {
+  appId: ["iea"],
+  url: "https://thesocioscope.org",
+  subtitle: {
+    en: "Seeing How Social Change Takes Shape",
+    fr: "Voir comment le changement social prend forme",
+  },
+  date: {
+    $date: "2023-03-18T00:00:00.000Z",
+  },
+  image: {
+    url: "https://cdn-yggdrasil-dev.s3.eu-west-2.amazonaws.com/iea/project/the_socioscope.svg",
+  },
+  summary: {
+    en: "Through large scale data collection around the world and LLM-driven research, the Socioscope analyses how behaviours, norms, and practices evolve within sustainable food transitions.\nWe're building a systemic way to help make complex social patterns measurable, comparable, and understandable.",
+    fr: "Grâce à la collecte de données à grande échelle dans le monde entier et à la recherche pilotée par LLM, le Socioscope analyse comment les comportements, normes et pratiques évoluent dans les transitions alimentaires durables.\nNous construisons une méthode systématique pour rendre les schémas sociaux complexes mesurables, comparables et compréhensibles.",
+  },
+  description: {
+    en: "The Socioscope is a transformative qualitative research project that maps how behaviours, norms, and communities influence the transition toward sustainable food systems.\nThe Socioscope serves as a comprehensive observatory of these efforts, making knowledge accessible to researchers, policymakers, and practitioners worldwide. Equally important is shining a light on local initiatives that lead change on the ground and drive the shift toward a more sustainable food system.",
+    fr: "Le Socioscope est un projet de recherche qualitative transformatif qui cartographie comment les comportements, normes et communautés influencent la transition vers des systèmes alimentaires durables.\nLe Socioscope sert d'observatoire complet de ces efforts, rendant les connaissances accessibles aux chercheurs, décideurs politiques et praticiens du monde entier. Tout aussi important, il met en lumière les initiatives locales qui mènent le changement sur le terrain et conduisent la transition vers un système alimentaire plus durable.",
+  },
+  name: {
+    en: "The Socioscope",
+    fr: "Le Socioscope",
+  },
+  related: {
+    people: [
+      {
+        firstname: "Antoine",
+        lastname: "Cordelois",
+        image: {
+          url: "https://cdn-yggdrasil-dev.s3.eu-west-2.amazonaws.com/iea/people/antoine_cordelois.jpg",
+        },
+      },
+      {
+        firstname: "Saadi",
+        lastname: "Lahlou",
+        image: {
+          url: "https://cdn-yggdrasil-dev.s3.eu-west-2.amazonaws.com/iea/people/lahlou_saadi.jpg",
+        },
+      },
+      {
+        firstname: "Paulius",
+        lastname: "Yamin",
+        image: {
+          url: "https://cdn-yggdrasil-dev.s3.eu-west-2.amazonaws.com/iea/people/Paulius_Yamin.jpg",
+        },
+      },
+    ],
+  },
+  slug: {
+    fr: "le-socioscope",
+    en: "the-socioscope",
+  },
+}
 </script>
 <style scoped>
 .results-container{display:flex;flex-direction:column;gap:8px;margin-left:8px}

package/dist/runtime/components/misc/atoms/ImageContainer.vue

@@ -11,7 +11,7 @@
       <div class="overflow-hidden mw-100">
         <!--  TODO debug why the picture is not displaying/sizing properly -->
         <v-img
-          v-if="src"
+          v-if="src && computedSrc"
           :aspect-ratio="ratio"
           :class="{ 'img-animation': animate }"
           :lazy-src="
@@ -43,7 +43,8 @@ import { computed, useImage } from "#imports"
 const img = useImage()
 
 const computedSrc = computed(() => {
-  return typeof props.src === "string" ? props.src : props.src.url
+  if (!props.src) return null
+  return typeof props.src === "string" ? props.src : props.src?.url || null
 })
 const props = defineProps({
   src: {
@@ -68,17 +69,16 @@ const props = defineProps({
   animate: { type: Boolean, default: true },
 })
 const _srcset = computed(() => {
-  return img.getSizes(
-    typeof props.src === "string" ? props.src : props.src.url,
-    {
-      sizes: "xs:100vw sm:100vw md:100vw lg:100vw xl:100vw",
-      modifiers: {
-        format: "webp",
-        quality: 70,
-        ...(props.width && { width: props.width }),
-      },
+  const srcUrl = typeof props.src === "string" ? props.src : props.src?.url
+  if (!srcUrl) return { srcset: "", sizes: "" }
+  return img.getSizes(srcUrl, {
+    sizes: "xs:100vw sm:100vw md:100vw lg:100vw xl:100vw",
+    modifiers: {
+      format: "webp",
+      quality: 70,
+      ...(props.width && { width: props.width }),
     },
-  )
+  })
 })
 </script>
 

package/dist/runtime/components/news/DenseItem.vue

@@ -36,11 +36,11 @@
         </template>
         <div
           v-html="
-            $rootStore.search.length
+            rootStore.search.length
               ? highlightAndTruncate(
                   300,
                   item.name,
-                  $rootStore.search.split(' '),
+                  rootStore.search.split(' '),
                 )
               : item.name
           "
@@ -52,9 +52,12 @@
 
 <script setup>
 import { useDisplay } from "vuetify"
+import { useRootStore } from "../../stores/root"
+import { highlightAndTruncate } from "../../composables/useUtils"
 import { computed } from "#imports"
 
 const { name, mdAndUp } = useDisplay()
+const rootStore = useRootStore()
 
 const props = defineProps({
   item: {

package/dist/runtime/components/people/DenseItem.vue

@@ -20,7 +20,7 @@
               ? highlightAndTruncate(
                   300,
                   item.firstname + ' ' + item.lastname,
-                  $rootStore.search.split(' '),
+                  rootStore.search.split(' '),
                 )
               : item.firstname + ' ' + item.lastname
           "
@@ -36,7 +36,7 @@
             ? highlightAndTruncate(
                 300,
                 item.groups.vintage[0].theme,
-                $rootStore.search.split(' '),
+                rootStore.search.split(' '),
               )
             : item.groups.vintage[0].theme
         "
@@ -47,6 +47,7 @@
 
 <script setup>
 import { useRootStore } from "../../stores/root"
+import { highlightAndTruncate } from "../../composables/useUtils"
 import { computed } from "#imports"
 import { useDisplay } from "vuetify"
 

package/dist/runtime/components/projects/DenseItem.vue

@@ -17,7 +17,7 @@
         v-else
         v-html="
           rootStore.search.length
-            ? highlightAndTruncate(300, item.name, $rootStore.search.split(' '))
+            ? highlightAndTruncate(300, item.name, rootStore.search.split(' '))
             : item.name
         "
       />
@@ -46,6 +46,7 @@
 <script setup>
 import { useDisplay } from "vuetify"
 import { useRootStore } from "../../stores/root"
+import { highlightAndTruncate } from "../../composables/useUtils"
 
 const { mdAndUp } = useDisplay()
 

package/dist/runtime/components/publications/DenseItem.vue

@@ -48,7 +48,7 @@
               ? highlightAndTruncate(
                   300,
                   item.name,
-                  $rootStore.search.split(' '),
+                  rootStore.search.split(' '),
                 )
               : item.name
           "
@@ -71,6 +71,7 @@
 <script setup>
 import { useDisplay } from "vuetify"
 import { useRootStore } from "../../stores/root"
+import { highlightAndTruncate } from "../../composables/useUtils"
 import { computed } from "#imports"
 const rootStore = useRootStore()
 

package/dist/runtime/stores/root.js

@@ -26,7 +26,6 @@ export const useRootStore = defineStore("rootStore", {
   }),
   actions: {
     setLoading(value, type = "") {
-      console.log("X - setLoading", { value, type });
       const { $stores } = useNuxtApp();
       if (type.length && $stores[type]) {
         $stores[type].loading = value;
@@ -40,7 +39,6 @@ export const useRootStore = defineStore("rootStore", {
       }
     },
     loadRouteQuery(type) {
-      console.log("0 - loadRouteQuery", type);
       const { currentRoute } = useRouter();
       const { $stores } = useNuxtApp();
       const query = currentRoute.value.query;
@@ -60,7 +58,6 @@ export const useRootStore = defineStore("rootStore", {
         $stores[type].page = parseInt(query.page, 10) || 1;
     },
     setFiltersCount(type) {
-      console.log("6- setFiltersCount", type);
       const { $stores } = useNuxtApp();
       const filters = $stores[type]?.filters ?? {};
       const count = Object.values(filters).reduce((acc, filter) => {
@@ -71,7 +68,6 @@ export const useRootStore = defineStore("rootStore", {
       $stores[type].filtersCount = count;
     },
     updateRouteQuery(type) {
-      console.log("5- updateRouteQuery", type);
       const router = useRouter();
       const { $stores } = useNuxtApp();
       const routeQuery = {
@@ -93,7 +89,6 @@ export const useRootStore = defineStore("rootStore", {
       router.replace({ query: routeQuery });
     },
     resetState(type, lang = "en") {
-      console.log("Y - resetState", { type, lang });
       const { $stores, $models } = useNuxtApp();
       const model = structuredClone($models[type]);
       $stores[type].filters = model?.filters;
@@ -102,10 +97,6 @@ export const useRootStore = defineStore("rootStore", {
       $stores[type].sortKey = null;
     },
     updateSort({ type, sortKey }) {
-      console.log("Z - updateSort", {
-        type,
-        sortKey
-      });
       const { $stores } = useNuxtApp();
       $stores[type].page = 1;
       $stores[type].sortKey = sortKey;
@@ -116,7 +107,6 @@ export const useRootStore = defineStore("rootStore", {
       type,
       lang
     }) {
-      console.log("W - updateView", { value, type });
       const { $stores } = useNuxtApp();
       if ($stores[type]?.views?.[value]) {
         $stores[type].view = {
@@ -132,7 +122,6 @@ export const useRootStore = defineStore("rootStore", {
     }, */
     updateFilter(key, val, type, lang) {
       const { $stores } = useNuxtApp();
-      console.log("R - update filter: ", { key, val, type });
       if ($stores[type]?.filters?.[key]) {
         $stores[type].filters[key].value = val;
       }
@@ -146,7 +135,6 @@ export const useRootStore = defineStore("rootStore", {
       type,
       lang
     }) {
-      console.log("H - updateItemsPerPage", { value, type });
       const { $stores } = useNuxtApp();
       this.page = 1;
       $stores[type].itemsPerPage = value;
@@ -158,7 +146,6 @@ export const useRootStore = defineStore("rootStore", {
       type,
       lang = "en"
     }) {
-      console.log("update page: ", page);
       const router = useRouter();
       const currentQuery = router.currentRoute.value.query;
       const newQuery = { ...currentQuery };

package/package.json

@@ -1,14 +1,14 @@
 {
   "license": "AGPL-3.0-only",
   "main": "./dist/module.mjs",
-  "version": "1.0.178",
+  "version": "1.0.180",
   "name": "@paris-ias/list",
   "repository": {
     "url": "git+https://github.com/IEA-Paris/list.git",
     "type": "git"
   },
   "dependencies": {
-    "@paris-ias/trees": "^2.0.45"
+    "@paris-ias/trees": "^2.0.47"
   },
   "description": "Paris IAS List Module",
   "peerDependencies": {