@paris-ias/list 1.0.136 → 1.0.138

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

@@ -34,25 +34,6 @@ import { ref, computed } from "vue"
 import { useNuxtApp } from "#imports"
 const { $stores } = useNuxtApp()
 
-const filtersOpen = ref(false)
-const visible = computed(() => {
-  console.log(
-    "$stores[props.type]?.filtersCount > 0: ",
-    $stores[props.type]?.filtersCount > 0
-  )
-  console.log(
-    "$stores[props.type]?.filtersCount: ",
-    $stores[props.type]?.filtersCount
-  )
-  console.log(
-    !!(
-      $stores[props.type]?.filtersCount && $stores[props.type]?.filtersCount > 0
-    )
-  )
-  return !!(
-    $stores[props.type]?.filtersCount && $stores[props.type]?.filtersCount > 0
-  )
-})
 const props = defineProps({
   type: {
     type: String,
@@ -60,4 +41,14 @@ const props = defineProps({
     default: "",
   },
 })
+const visible = computed(() => {
+  console.log(
+    "SHOULD DISPLAY FILTERS:",
+    $stores[props.type]?.filtersCount && $stores[props.type]?.filtersCount > 0,
+  )
+  return !!(
+    $stores[props.type]?.filtersCount && $stores[props.type]?.filtersCount > 0
+  )
+})
+const filtersOpen = ref(unref(visible))
 </script>

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

@@ -9,9 +9,10 @@
     <v-btn
       v-if="!(hidePrevNext && isFirstPage)"
       :disabled="isFirstPage"
-      min-width="35"
-      height="35"
-      width="35"
+      min-width="40"
+      height="40"
+      width="40"
+      class="prev-btn"
       :tabindex="isFirstPage && hidePrevNext ? -1 : 0"
       aria-label="Previous Page"
       @click="onChange(currentPage - 1)"
@@ -19,16 +20,16 @@
     >
       <v-icon>mdi-chevron-left</v-icon>
     </v-btn>
-
     <!-- Page buttons and gaps -->
     <template v-for="(page, index) in renderPages" :key="page.key">
       <!-- Ellipsis gap -->
       <v-btn
+        class="ellipsis-btn"
         v-if="page.isGap"
-        icon
-        min-width="35"
-        height="35"
-        width="35"
+        min-width="40"
+        tile
+        height="40"
+        width="40"
         @click="onChange(getGapPage(index))"
         @keyup.enter="onChange(getGapPage(index))"
       >
@@ -40,10 +41,10 @@
         v-else
         :class="['page-button', { 'active-page': page.current }]"
         tabindex="0"
-        min-width="35"
-        height="35"
+        min-width="40"
+        height="40"
         tile
-        width="35"
+        width="40"
         :aria-current="page.current ? 'page' : undefined"
         :aria-label="
           page.current
@@ -63,9 +64,11 @@
       :disabled="isLastPage"
       :tabindex="isLastPage && hidePrevNext ? -1 : 0"
       aria-label="Next Page"
-      min-width="35"
-      height="35"
-      width="35"
+      min-width="40"
+      tile
+      class="next-btn"
+      height="40"
+      width="40"
       @click="onChange(currentPage + 1)"
       @keyup.enter="onChange(currentPage + 1)"
     >
@@ -75,7 +78,7 @@
 </template>
 
 <script setup>
-import { computed } from "vue";
+import { computed } from "vue"
 
 const props = defineProps({
   currentPage: { type: Number, required: true },
@@ -83,15 +86,15 @@ const props = defineProps({
   pagePadding: { type: Number, default: 1, validator: (v) => v > 0 },
   pageGap: { type: Number, default: 2, validator: (v) => v > 0 },
   hidePrevNext: { type: Boolean, default: false },
-});
+})
 
-const emit = defineEmits(["update"]);
+const emit = defineEmits(["update"])
 
 // Computed state for prev/next disabled
-const isFirstPage = computed(() => props.currentPage === 1);
+const isFirstPage = computed(() => props.currentPage === 1)
 const isLastPage = computed(
-  () => props.currentPage === props.totalPages || props.totalPages === 0
-);
+  () => props.currentPage === props.totalPages || props.totalPages === 0,
+)
 
 // Generate pages and gap positions
 const renderPages = computed(() => {
@@ -99,41 +102,41 @@ const renderPages = computed(() => {
     key: `page-${pageIndex}`,
     value: pageIndex,
     current: pageIndex === props.currentPage,
-  });
-  const createGap = (pageIndex) => ({ key: `gap-${pageIndex}`, isGap: true });
+  })
+  const createGap = (pageIndex) => ({ key: `gap-${pageIndex}`, isGap: true })
 
-  const pages = [];
+  const pages = []
   for (let i = 1; i <= props.totalPages; i++) {
     if (
       i === props.currentPage ||
       i < props.pageGap ||
       i > props.totalPages - props.pageGap + 1
     ) {
-      pages.push(createPage(i));
-      continue;
+      pages.push(createPage(i))
+      continue
     }
 
-    let min, max;
+    let min, max
     if (props.currentPage <= props.pageGap + props.pagePadding) {
-      min = props.pageGap + 1;
-      max = min + props.pagePadding * 2;
+      min = props.pageGap + 1
+      max = min + props.pagePadding * 2
     } else if (
       props.currentPage >=
       props.totalPages - props.pageGap - props.pagePadding
     ) {
-      max = props.totalPages - props.pageGap;
-      min = max - props.pagePadding * 2;
+      max = props.totalPages - props.pageGap
+      min = max - props.pagePadding * 2
     } else {
-      min = props.currentPage - props.pagePadding;
-      max = props.currentPage + props.pagePadding;
+      min = props.currentPage - props.pagePadding
+      max = props.currentPage + props.pagePadding
     }
 
     if (
       (i >= min && i <= props.currentPage) ||
       (i <= max && i >= props.currentPage)
     ) {
-      pages.push(createPage(i));
-      continue;
+      pages.push(createPage(i))
+      continue
     }
 
     if (i === props.pageGap) {
@@ -141,11 +144,11 @@ const renderPages = computed(() => {
         min > props.pageGap + 1 &&
         props.currentPage > props.pageGap + props.pagePadding + 1
       ) {
-        pages.push(createGap(i));
+        pages.push(createGap(i))
       } else {
-        pages.push(createPage(i));
+        pages.push(createPage(i))
       }
-      continue;
+      continue
     }
 
     if (i === props.totalPages - props.pageGap + 1) {
@@ -153,28 +156,28 @@ const renderPages = computed(() => {
         max < props.totalPages - props.pageGap &&
         props.currentPage < props.totalPages - props.pageGap - props.pagePadding
       ) {
-        pages.push(createGap(i));
+        pages.push(createGap(i))
       } else {
-        pages.push(createPage(i));
+        pages.push(createPage(i))
       }
-      continue;
+      continue
     }
   }
-  return pages;
-});
+  return pages
+})
 
 // Calculate page to jump when clicking gap
 const getGapPage = (index) => {
-  const before = renderPages.value[index - 1];
-  const after = renderPages.value[index + 1] || { value: props.totalPages };
-  return Math.floor((before.value + after.value) / 2);
-};
+  const before = renderPages.value[index - 1]
+  const after = renderPages.value[index + 1] || { value: props.totalPages }
+  return Math.floor((before.value + after.value) / 2)
+}
 
 function onChange(page) {
-  emit("update", page);
+  emit("update", page)
 }
 </script>
 
 <style scoped>
-.page-button{background-color:transparent;border:1px solid rgba(0,0,0,.2);color:#000;transition:background-color .3s ease,color .3s ease,transform .2s ease}.page-button:hover{background-color:#f0f0f0}.page-button.active-page{background-color:#000!important;color:#fff!important;transform:scale(1.05)}.page-button:focus{box-shadow:0 0 0 2px rgba(0,0,0,.3);outline:none}
+.ellipsis-btn,.next-btn,.page-button,.prev-btn{background-color:transparent;border:1px solid rgba(0,0,0,.2);font-size:16px;transition:background-color .3s ease,color .3s ease,transform .2s ease}.page-button:hover{background-color:#f0f0f0}.page-button.active-page{background-color:#000!important;color:#fff!important;transform:scale(1.05)}.page-button:focus{box-shadow:0 0 0 2px rgba(0,0,0,.3);outline:none}
 </style>

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

@@ -1,28 +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 } })
+      "
     />
   </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"
@@ -32,23 +34,25 @@
 </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()
+const localePath = useLocalePath()
+
 const props = defineProps({
   addBtn: {
     type: Boolean,
@@ -60,7 +64,7 @@ const props = defineProps({
     default: "people",
     required: true,
   },
-  layout: {
+  /*   layout: {
     type: Object,
     required: false,
     default: () => {
@@ -69,88 +73,119 @@ 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()
-  )
+    ).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)
+  rootStore.updatePage({
     page: newPage,
     type: props.type,
     lang: locale.value,
   })
+  if (typeof window !== "undefined") {
+    window.scrollTo({ top: 0, behavior: "smooth" })
+  }
 }
+/* 
+onUpdated(() => {
+  console.log("STOP local loading from updated")
+  rootStore.setLoading(false, props.type)
+}) */
 </script>

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

@@ -8,6 +8,10 @@ defineProps({
     type: Object,
     required: true,
   },
+  pathPrefix: {
+    type: String,
+    required: true,
+  },
 })
 </script>
 

package/dist/runtime/components/mailing/ExpandedItem.vue

@@ -10,6 +10,10 @@ const props = defineProps({
     type: Object,
     required: true,
   },
+  pathPrefix: {
+    type: String,
+    required: true,
+  },
 })
 </script>
 

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

@@ -1,14 +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,
-  },
-});
+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/mailing/View.vue

@@ -3,9 +3,9 @@
 </template>
 
 <script setup>
-import { useNuxtApp } from "#imports";
+import { useNuxtApp } from "#imports"
 
-const { $stores } = useNuxtApp();
+const { $stores } = useNuxtApp()
 defineProps({
   item: {
     type: Object,
@@ -16,7 +16,7 @@ defineProps({
     required: false,
     default: false,
   },
-});
+})
 
-$stores.mailing.loading = false;
+$stores.mailing.loading = false
 </script>

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

@@ -8,46 +8,7 @@
     <v-skeleton-loader v-if="loading" height="100%" type="image" />
 
     <template v-else>
-      <nuxt-link
-        v-if="link"
-        v-slot="{ navigate, isActive }"
-        :to="
-          localePath({
-            name: link,
-            params: { slug },
-          })
-        "
-        custom
-      >
-        <div class="overflow-hidden mw-100">
-          <!--  TODO debug why the picture is not displaying/sizing properly -->
-          <v-img
-            v-if="src"
-            :aspect-ratio="ratio"
-            :active="isActive"
-            :class="{ 'img-animation': animate }"
-            :lazy-src="
-              img(computedSrc, {
-                width,
-                quality: 70,
-              })
-            "
-            :src="
-              img(computedSrc, {
-                width,
-                quality: 70,
-              })
-            "
-            :srcset="_srcset.srcset"
-            :sizes="_srcset.sizes"
-            :title="caption"
-            v-bind="$attrs"
-            @click="navigate"
-          >
-            <slot />
-          </v-img></div
-      ></nuxt-link>
-      <div v-else class="overflow-hidden mw-100">
+      <div class="overflow-hidden mw-100">
         <!--  TODO debug why the picture is not displaying/sizing properly -->
         <v-img
           v-if="src"
@@ -78,8 +39,7 @@
 </template>
 
 <script setup>
-import { computed, useImage, useLocalePath } from "#imports"
-const localePath = useLocalePath()
+import { computed, useImage } from "#imports"
 const img = useImage()
 
 const computedSrc = computed(() => {
@@ -105,8 +65,6 @@ const props = defineProps({
   width: { type: Number, default: 0 },
   ratio: { type: Number, required: true, default: 1 },
   caption: { type: String, default: "" },
-  slug: { type: [Object, String], default: "" },
-  link: { type: String, default: "" },
   animate: { type: Boolean, default: true },
 })
 const _srcset = computed(() => {
@@ -119,7 +77,7 @@ const _srcset = computed(() => {
         quality: 70,
         ...(props.width && { width: props.width }),
       },
-    }
+    },
   )
 })
 </script>

package/dist/runtime/components/misc/molecules/Related.vue

@@ -24,5 +24,5 @@ const props = defineProps({
     type: Object,
     required: true,
   },
-});
+})
 </script>