@paris-ias/list 1.0.137 → 1.0.139

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

@@ -1,34 +1,30 @@
 <template>
   <ListMoleculesHeader :type="type" />
-  <component :is="view">
+  <component
+    :is="view"
+    :loading="$stores[type] && $stores[type].loading && pending"
+  >
     <component
       :is="itemTemplate"
       v-for="(item, index) in items"
-      :key="index"
-      :item="item"
-      :index="index"
+      :key="(item.name || item.lastname) + type + index"
+      :item
+      :index
+      :loading="$stores[type] && $stores[type].loading && pending"
       :pathPrefix="
-        localePath({
-          name: pathPrefix,
-          params: { slug: item.slug },
-        })
+        localePath({ name: pathPrefix, params: { slug: item.slug } })
       "
     />
   </component>
   <div class="text-center">
-    <ListAtomsPerPage
-      v-if="numberOfPages > 1"
-      :type="type"
-      class="float-right"
-    />
+    <ListAtomsPerPage :type="type" class="float-right" />
 
     <ListMoleculesPagination
-      v-if="numberOfPages > 1"
-      :type="type"
-      color="black"
+      v-if="$stores[type].numberOfPages > 1"
+      :type
       large
-      :current-page="page"
-      :total-pages="numberOfPages"
+      :current-page="$stores[type].page"
+      :total-pages="$stores[type].numberOfPages"
       :page-padding="1"
       :page-gap="2"
       :hide-prev-next="false"
@@ -38,21 +34,20 @@
 </template>
 
 <script setup>
-import { nextTick, watch } from "vue"
+import { computed, onUpdated, onMounted, watch } from "vue"
 import { useRootStore } from "../../../stores/root"
 import { capitalize } from "../../../composables/useUtils"
 import {
   useNuxtApp,
   resolveComponent,
-  computed,
   onBeforeUnmount,
-  onMounted,
   useI18n,
   useRoute,
-  navigateTo,
   useLocalePath,
+  useAsyncQuery,
 } from "#imports"
-const { $stores } = useNuxtApp()
+
+const { $stores, $queries } = useNuxtApp()
 const { locale } = useI18n()
 const route = useRoute()
 const rootStore = useRootStore()
@@ -69,7 +64,7 @@ const props = defineProps({
     default: "people",
     required: true,
   },
-  layout: {
+  /*   layout: {
     type: Object,
     required: false,
     default: () => {
@@ -78,94 +73,130 @@ const props = defineProps({
         xl: 12,
       }
     },
-  },
+  }, */
   pathPrefix: {
     type: String,
     required: true,
   },
-  pagination: {
-    type: Object,
-    required: false,
-    default: () => {
-      return {}
-    },
-  },
+
   addButton: {
     type: Boolean,
     required: false,
     default: false,
   },
-  items: [Object],
 })
 
+// Initialize loading state
+console.log("start llocal loading from setup")
+rootStore.setLoading(true, props.type)
+
+// Initial route -> store (single source-of-truth on first load)
+rootStore.loadRouteQuery(props.type)
+
+// Computed properties for dynamic components
 const view = computed(() =>
   props.customView
     ? resolveComponent("ListViews" + capitalize(props.customView))
-    : resolveComponent("ListViews" + capitalize($stores[props.type].view.name)),
+    : resolveComponent(
+        "ListViews" + capitalize($stores[props.type]?.view?.name || "list"),
+      ),
 )
 const itemTemplate = computed(() =>
   resolveComponent(
     (
       capitalize(props.type) +
-      capitalize($stores[props.type].view.name) +
+      capitalize($stores[props.type]?.view?.name || "list") +
       "Item"
     ).toString(),
   ),
 )
-const numberOfPages = computed(() => $stores[props.type].numberOfPages)
 
-const page = computed(() => {
-  const p = parseInt(route.query.page, 10)
-  return !isNaN(p) && p > 0 ? p : 1
+// Apollo: reactive query using variables computed from store
+const variables = computed(() => {
+  console.log("computed variables loop")
+  return rootStore.buildListVariables(props.type, locale.value)
 })
+console.log("Starting query for type: ", props.type)
+console.log("Using variables: ", variables.value)
 
-const items = computed(() => $stores[props.type].items)
-console.log("setup list")
-
-// On mounted: load filters and data
-onMounted(async () => {
-  // Load any route filters
-  rootStore.loadRouteQuery(props.type)
-  // Initialize store page from URL
-  const pageParam = parseInt(route.query.page, 10)
-  if (!isNaN(pageParam) && pageParam > 1) {
-    await rootStore.updatePage({
-      page: pageParam,
-      type: props.type,
-      lang: locale.value,
-    })
-  }
-  // Fetch initial items
-  try {
-    await rootStore.update(props.type, locale.value)
-  } catch (e) {
-    console.error("Error fetching list:", e)
-  }
-})
+// Apollo GraphQL query with proper reactivity
+const { data, pending, error, refresh } = await useAsyncQuery(
+  $queries[props.type]?.list,
+  variables, // Pass the reactive computed, not its value
+  {
+    key: `list-${props.type}`, // 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)
+}
 
+// Apply data to store immediately if available
+if (data.value) {
+  console.log("Applying data to store directly [first load scenario]")
+  rootStore.applyListResult(props.type, data.value)
+}
+
+// Watch for variable changes to refresh and apply new data
 watch(
-  () => page.value,
-  async (newPage) => {
-    const query = {
-      ...route.query,
-      page: newPage > 1 ? String(newPage) : undefined,
+  variables,
+  async (newVars, oldVars) => {
+    if (newVars && JSON.stringify(newVars) !== JSON.stringify(oldVars)) {
+      console.log("Variables changed, refreshing query, newVars: ", newVars)
+      console.log("start local loading from computed")
+      rootStore.setLoading(true, props.type)
+      await refresh()
+      if (data.value) {
+        console.log("Applying refreshed data to store")
+        rootStore.applyListResult(props.type, data.value)
+      }
+      rootStore.setLoading(false, props.type)
     }
-    navigateTo({ query }, { replace: true })
-    await nextTick()
-    window.scrollTo({ top: 0, behavior: "smooth" })
   },
+  { deep: true },
 )
+
+// Reactive items computed from the store (single source of truth)
+const items = computed(() => $stores[props.type]?.items || [])
+
+onMounted(() => {
+  // On initial mount: clear loading state
+  console.log("STOP local loading from mounted")
+  rootStore.setLoading(false, props.type)
+})
+
 onBeforeUnmount(() => {
   rootStore.resetState(props.type, locale.value)
 })
-
 async function onPageChange(newPage) {
-  await rootStore.updatePage({
+  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,
   })
-}
 
-console.log("pathPrefix", itemTemplate.value)
+  // 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)
+}) */
 </script>

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/dist/runtime/components/mailing/RowsItem.vue

@@ -1,18 +1,34 @@
 <template>
-  {{ item }}
+  <v-row
+    class="highlight-on-hover pa-3"
+    no-gutters
+    @click="$router.push(pathPrefix)"
+  >
+    <v-col cols="12" class="px-6">
+      <v-skeleton-loader v-if="isLoading" type="heading, text@8, button" />
+      <template v-else>
+        <div class="text-h5">{{ item.name }}</div>
+        <div v-if="item.summary" class="mt-2">
+          <MDC :value="item.summary" />
+        </div>
+      </template>
+    </v-col>
+  </v-row>
+  <v-divider />
 </template>
 
 <script setup>
-defineProps({
-  item: {
-    type: Object,
-    required: true,
-  },
-  pathPrefix: {
-    type: String,
-    required: true,
-  },
+import { computed } from "#imports"
+import { useRootStore } from "../../stores/root"
+
+const rootStore = useRootStore()
+const props = defineProps({
+  item: { type: Object, required: true },
+  pathPrefix: { type: String, required: true },
+  loading: { type: Boolean, default: false },
 })
+
+const isLoading = computed(() => rootStore.loading || props.loading)
 </script>
 
 <style></style>

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

@@ -1,53 +1,60 @@
 <template>
-  <v-row v-ripple no-gutters class="cursor-pointer highlight-on-hover my-2">
-    <v-col v-if="mdAndUp" align-self="center" cols="1">
-      <MiscAtomsImageContainer
-        cover
-        :loading="$stores.news.loading"
-        :src="
-          item && item.image && item.image.url ? item.image.url : '/default.png'
-        "
-        :ratio="1 / 1"
-        width="80px"
-      />
-    </v-col>
-    <v-col align-self="start" class="text-h5 dense px-2 paragraph">
-      <v-skeleton-loader v-if="rootStore.loading" type="heading" />
-      <template v-else>
-        <v-skeleton-loader
-          v-if="rootStore.loading"
-          :type="
-            ['chip', 'chip@2', 'chip@3', 'chip@4', 'chip@4', 'chip@4'][
-              ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'].indexOf(name || 'md')
-            ]
+  <NuxtLink
+    v-if="pathPrefix"
+    :to="pathPrefix"
+    class="text-decoration-none text-black"
+  >
+    <v-row v-ripple no-gutters class="cursor-pointer highlight-on-hover my-2">
+      <v-col v-if="mdAndUp" align-self="center" cols="1">
+        <MiscAtomsImageContainer
+          cover
+          :loading="isLoading"
+          :src="
+            item && item.image && item.image.url
+              ? item.image.url
+              : '/default.png'
           "
+          :ratio="1 / 1"
+          width="80px"
         />
-
+      </v-col>
+      <v-col align-self="start" class="text-h5 dense px-2 paragraph">
+        <v-skeleton-loader v-if="isLoading" type="heading" />
         <template v-else>
-          <v-chip
-            class="ma-2"
-            style="background-color: white; color: black"
-            size="small"
-            variant="outlined"
-          >
-            {{ $t(eventCategory) }}
-          </v-chip>
-          <MiscMoleculesChipContainer :items="item.tags" size="small" />
+          <v-skeleton-loader
+            v-if="isLoading"
+            :type="
+              ['chip', 'chip@2', 'chip@3', 'chip@4', 'chip@4', 'chip@4'][
+                ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'].indexOf(name || 'md')
+              ]
+            "
+          />
+
+          <template v-else>
+            <v-chip
+              class="ma-2"
+              style="background-color: white; color: black"
+              size="small"
+              variant="outlined"
+            >
+              {{ $t(eventCategory) }}
+            </v-chip>
+            <MiscMoleculesChipContainer :items="item.tags || []" size="small" />
+          </template>
+          <div
+            v-html="
+              $rootStore.search.length
+                ? highlightAndTruncate(
+                    300,
+                    item.name,
+                    $rootStore.search.split(' '),
+                  )
+                : item.name
+            "
+          />
         </template>
-        <div
-          v-html="
-            $rootStore.search.length
-              ? highlightAndTruncate(
-                  300,
-                  item.name,
-                  $rootStore.search.split(' '),
-                )
-              : item.name
-          "
-        />
-      </template>
-    </v-col>
-  </v-row>
+      </v-col> </v-row
+  ></NuxtLink>
 </template>
 
 <script setup>
@@ -73,6 +80,11 @@ const props = defineProps({
     type: String,
     required: true,
   },
+  loading: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
 })
 const eventCategory = computed(() => {
   if (props.item.category) {
@@ -81,4 +93,6 @@ const eventCategory = computed(() => {
     return "list.filters.news.category.others"
   }
 })
+
+const isLoading = computed(() => props.loading)
 </script>

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

@@ -6,7 +6,7 @@
         cover
         :src="item.image.url ? item.image : '/default.png'"
         :ratio="1 / 1"
-        :loading="$stores.news.loading"
+        :loading="isLoading"
       >
         <v-chip class="ma-2" style="background-color: white; color: black">
           {{ $t(eventCategory) }}
@@ -15,7 +15,7 @@
     </v-col>
     <v-col cols="12" md="8" lg="4" class="pl-md-6">
       <v-skeleton-loader
-        v-if="rootStore.loading || $stores['news'].loading"
+        v-if="isLoading"
         :type="
           [
             'heading, subtitle, text@5, ossein, button',
@@ -44,7 +44,7 @@
         </div>
         <MiscMoleculesChipContainer
           v-if="item.tags && item.tags.length"
-          :items="item.tags"
+          :items="item.tags || []"
           class="mt-4"
         />
         <template v-if="mdAndDown">
@@ -74,10 +74,7 @@
     </v-col>
 
     <v-col v-if="lgAndUp" cols="12" lg="5">
-      <v-skeleton-loader
-        v-if="rootStore.loading || $stores.news.loading"
-        type="text@8, ossein, button"
-      />
+      <v-skeleton-loader v-if="isLoading" type="text@8, ossein, button" />
 
       <template v-else>
         <div
@@ -140,6 +137,11 @@ const props = defineProps({
     type: String,
     required: true,
   },
+  loading: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
 })
 
 const processedSummary = computed(() => {
@@ -155,6 +157,8 @@ function replaceMarkdownLinksWithSlug(markdownText, slugPath) {
     return `[${text}](${slugPath}?redirect=${encodedUrl})`
   })
 }
+
+const isLoading = computed(() => rootStore.loading || props.loading)
 </script>
 
 <style></style>

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

@@ -1,14 +1,9 @@
 <template>
-  <v-row
-    v-ripple
-    no-gutters
-    class="cursor-pointer highlight-on-hover my-2"
-    @click="$router.push(pathPrefix)"
-  >
+  <v-row v-ripple no-gutters class="cursor-pointer highlight-on-hover my-2">
     <v-col v-if="mdAndUp" cols="1">
       <MiscAtomsImageContainer
         cover
-        :loading="$stores.people.loading"
+        :loading="isLoading"
         :src="
           item && item.image && item.image.url ? item.image.url : '/default.png'
         "
@@ -17,7 +12,7 @@
       />
     </v-col>
     <v-col align-self="start" class="text-h6 dense px-2">
-      <v-skeleton-loader v-if="rootStore.loading" type="heading" />
+      <v-skeleton-loader v-if="isLoading" type="heading" />
       <div v-else class="d-flex text-h5 align-center">
         <span
           v-html="
@@ -72,7 +67,14 @@ const props = defineProps({
     type: String,
     required: true,
   },
+  loading: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
 })
+
+const isLoading = computed(() => props.loading)
 </script>
 <style>
 .paragraph{max-width:83ch!important}

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

@@ -7,7 +7,7 @@
     <v-col v-if="mdAndUp" cols="12" md="3">
       <MiscAtomsImageContainer
         cover
-        :loading="$stores.people.loading"
+        :loading="isLoading"
         :src="item.image.url ? item.image : '/default.png'"
         :ratio="1 / 1"
       />
@@ -15,7 +15,7 @@
 
     <v-col cols="12" md="8">
       <v-skeleton-loader
-        v-if="$stores.people.loading"
+        v-if="isLoading"
         :type="
           [
             'heading, subtitle, text@5',
@@ -53,9 +53,11 @@
 <script setup>
 import { useDisplay } from "vuetify"
 import { useLocalePath, computed } from "#imports"
+import { useRootStore } from "../../stores/root"
 
 const { name, mdAndUp } = useDisplay()
 const localePath = useLocalePath()
+const rootStore = useRootStore()
 const props = defineProps({
   item: {
     type: Object,
@@ -65,6 +67,11 @@ const props = defineProps({
     type: Number,
     required: true,
   },
+  loading: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
 })
 const lineClamp = computed(() => {
   let base = [5, 6, 3, 6, 8, 10][
@@ -80,4 +87,6 @@ const lineClamp = computed(() => {
 
   return base
 })
+
+const isLoading = computed(() => rootStore.loading || props.loading)
 </script>