@paris-ias/list 1.0.138 → 1.0.140

package/dist/module.json

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

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

@@ -2,6 +2,7 @@
   <div class="d-flex flex-grow-1 flex-column">
     <div class="d-flex align-center">
       <v-text-field
+        :id="`global-search-input-${type}`"
         v-model.trim="search"
         :placeholder="
           type === 'all'
@@ -24,11 +25,7 @@
         $store.state.scrolled }" -->
         <template v-if="!search" #label>
           <div class="searchLabel">
-            {{
-              type === "all"
-                ? $t("search")
-                : $t("list.search-type", [$t("items." + type, 2)])
-            }}
+            {{ $t("search") }}
           </div>
         </template>
       </v-text-field>
@@ -78,16 +75,14 @@
         </v-card>
       </v-menu>
       <v-btn
-        v-bind="attrs"
         :rounded="0"
-        variant="test"
+        variant="outlined"
         size="large"
         height="56"
-        v-on="on"
         @keyup.enter="$router.push(localePath('/search'))"
         @click="$router.push(localePath('/search'))"
       >
-        <v-icon>mdi-magnify</v-icon>
+        <v-icon size="large">mdi-magnify</v-icon>
         <v-tooltip activator="parent" location="start">{{
           $t("click-here-to-search")
         }}</v-tooltip>
@@ -99,15 +94,14 @@
 <script setup>
 import { useDebounceFn } from "@vueuse/core"
 import { useRootStore } from "../../../stores/root"
-import { computed, useI18n, ref } from "#imports"
+import { computed, useI18n, ref, useLocalePath } from "#imports"
+const localePath = useLocalePath()
 const { locale, t } = useI18n()
 const rootStore = useRootStore()
 
 // Utility function to capitalize first letter
 const capitalize = (str) => str.charAt(0).toUpperCase() + str.slice(1)
-
 const emit = defineEmits(["filter-change"])
-
 const props = defineProps({
   type: {
     type: String,
@@ -162,8 +156,12 @@ const search = computed({
   get() {
     return rootStore.search
   },
-  set: await useDebounceFn(async function (v) {
-    await rootStore.updateSearch({
+  set: useDebounceFn(function (v) {
+    emit("change", {
+      name: "search",
+      value: v,
+    })
+    rootStore.updateSearch({
       type: props.type,
       search: v || "",
       lang: locale.value,

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

@@ -30,7 +30,7 @@
 </template>
 
 <script setup>
-import { ref, computed } from "vue"
+import { ref, unref, computed } from "vue"
 import { useNuxtApp } from "#imports"
 const { $stores } = useNuxtApp()
 

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

@@ -6,6 +6,7 @@
         size="large"
         class=""
         @click="$emit('toggle', type)"
+        :disabled="$rootStore.results[type]?.total === 0"
       >
         <v-icon size="large">{{
           open ? "mdi-chevron-down" : "mdi-chevron-right"
@@ -16,9 +17,9 @@
         @click="$emit('toggle', type)"
       >
         <div
-          class="text-h4"
+          class="text-h5 font-weight-medium"
           :class="
-            $rootStore.results[type].total > 0 ? '' : 'text-grey darken-2'
+            $rootStore.results[type].total > 0 ? 'black' : 'text-grey darken-2'
           "
         >
           {{ capitalize($t("items." + props.type, 2)) }}
@@ -53,11 +54,13 @@
       color="default"
       variant="text"
       rounded="0"
+      v-if="$rootStore.results[type]?.total > 0"
       :to="localePath(type === 'people' ? '/people' : '/activities/' + type)"
     >
       {{ $t("list.pls-x-more", [$rootStore.results[type].total]) }}
     </v-btn>
   </div>
+  <v-divider></v-divider>
 </template>
 <script setup>
 import { useNuxtApp, useLocalePath } from "#imports"

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

@@ -34,13 +34,17 @@
 </template>
 
 <script setup>
-import { computed, onUpdated, onMounted, watch } from "vue"
 import { useRootStore } from "../../../stores/root"
 import { capitalize } from "../../../composables/useUtils"
 import {
   useNuxtApp,
   resolveComponent,
+  computed,
+  onUpdated,
+  onMounted,
+  watch,
   onBeforeUnmount,
+  nextTick,
   useI18n,
   useRoute,
   useLocalePath,
@@ -171,19 +175,30 @@ onMounted(() => {
 onBeforeUnmount(() => {
   rootStore.resetState(props.type, locale.value)
 })
-
 async function onPageChange(newPage) {
   console.log("onPageChange: ", newPage)
+
+  // Set loading state first
+  rootStore.setLoading(true, props.type)
+
+  // Update the page in the store
   rootStore.updatePage({
     page: newPage,
     type: props.type,
     lang: locale.value,
   })
-  if (typeof window !== "undefined") {
-    window.scrollTo({ top: 0, behavior: "smooth" })
-  }
+
+  // Wait for the next tick to ensure DOM updates
+  await nextTick()
+
+  // Use setTimeout to ensure the scroll happens after route transition completes
+  setTimeout(() => {
+    if (typeof window !== "undefined") {
+      window.scrollTo({ top: 0, behavior: "smooth" })
+    }
+  }, 0)
 }
-/* 
+/*
 onUpdated(() => {
   console.log("STOP local loading from updated")
   rootStore.setLoading(false, props.type)

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

@@ -4,6 +4,7 @@
     :placeholder="$t('search')"
     variant="outlined"
     :categories="selectedCategories"
+    @change="updateSearch($event)"
     @filter-change="handleFilterChange"
   />
   <ListMoleculesResultsContainer
@@ -31,8 +32,9 @@ import {
   useAppConfig,
   ref,
   computed,
+  watch,
 } from "#imports"
-
+import SEARCH from "../../../graphql/list/search.gql"
 // Component name for linting
 defineOptions({
   name: "SearchResults",
@@ -70,24 +72,36 @@ const filteredSortedModules = computed(() => {
   )
 })
 
-onMounted(async () => {
-  // Initialize the page from the route
-  console.log("mounted list")
-
-  try {
-    await $rootStore.update("all", locale.value)
+// Apollo GraphQL query with proper reactivity
+const { data, pending, error, refresh } = await useAsyncQuery(
+  SEARCH,
+  { search: $rootStore.search, appId: "iea", locale: locale.value },
+  {
+    key: `search-${$rootStore.search}`, // Unique key for caching
+    server: true, // Enable SSR
+  },
+)
+if (error.value) {
+  console.error("GraphQL query error: ", error.value)
+} else {
+  console.log("Query result data: ", data.value.items?.length)
+}
 
-    // Set all types to be expanded by default when they have results
-    appConfig.list.modules.forEach((type) => {
-      if ($rootStore.results[type]?.total > 0) {
-        open.value[type] = true
-      }
-    })
-  } catch (error) {
-    console.log("error fetching update list: ", error)
+// Apply data to store immediately if available
+if (data.value) {
+  console.log("Applying data to store directly [first load scenario]")
+  $rootStore.applyListResult("all", data.value)
+}
+const updateSearch = async (newSearch) => {
+  console.log("update search")
+  if (newSearch !== $rootStore.search) {
+    await refresh()
+    if (data.value) {
+      console.log("Applying data to store directly [first load scenario]")
+      $rootStore.applyListResult("all", data.value)
+    }
   }
-})
-
+}
 onBeforeUnmount(() => {
   /* rootStore.resetState("all", locale.value) */
 })

package/package.json

@@ -1,7 +1,7 @@
 {
   "license": "AGPL-3.0-only",
   "main": "./dist/module.mjs",
-  "version": "1.0.138",
+  "version": "1.0.140",
   "name": "@paris-ias/list",
   "repository": {
     "url": "git+https://github.com/IEA-Paris/list.git",