@paris-ias/list 1.0.137 → 1.0.138

package/dist/runtime/components/list/atoms/ViewMenu.vue

@@ -1,23 +1,26 @@
 <template>
-  <v-menu>
+  <v-menu :disabled="$stores[type].loading">
     <template #activator="{ props: menu }">
       <v-tooltip location="top">
         <template #activator="{ props: tooltip }">
-          <v-btn
-            x-large
-            tile
-            flat
-            :icon="'mdi-' + current?.icon || defaultView?.icon"
-            :class="{
-              'mt-3': isXsDisplay,
-            }"
-            v-bind="mergeProps(menu, tooltip)"
-          />
+          <template v-if="$stores[type].loading">
+            <v-skeleton-loader type="button" :class="{ 'mt-3': isXsDisplay }" />
+          </template>
+          <template v-else>
+            <v-btn
+              x-large
+              tile
+              flat
+              :icon="'mdi-' + (current?.icon || defaultView?.icon)"
+              :class="{ 'mt-3': isXsDisplay }"
+              v-bind="mergeProps(menu, tooltip)"
+            />
+          </template>
         </template>
         <div
           v-html="
             $t('list.view-mode') +
-            $t('list.' + current.name || defaultView.name)
+            $t('list.' + (current?.name || defaultView?.name))
           "
         />
       </v-tooltip>
@@ -26,6 +29,7 @@
       <v-list-item
         v-for="(value, key, index) in items"
         :key="index"
+        :disabled="$stores[type].loading"
         @click="updateView(value.name || key)"
       >
         <template #prepend>
@@ -43,7 +47,7 @@
 import { mergeProps } from "vue"
 import { useDisplay } from "vuetify"
 import { useRootStore } from "../../../stores/root"
-import { useNuxtApp, ref, useI18n } from "#imports"
+import { useNuxtApp, ref, useI18n, computed } from "#imports"
 const { locale } = useI18n()
 const { $stores } = useNuxtApp()
 
@@ -61,8 +65,16 @@ const items = ref($stores[props.type].views)
 
 const current = ref($stores[props.type].view)
 
+const defaultView = ref(
+  $stores[props.type].views[
+    Object.keys($stores[props.type].views).find(
+      (k) => $stores[props.type].views[k]?.default === true,
+    )
+  ] || { name: "list", icon: "view-list" },
+)
+
 const updateView = async (value) => {
-  await rootStore.updateView({ value, type: props.type, lang: locale.value })
+  rootStore.updateView({ value, type: props.type, lang: locale.value })
 }
 </script>
 

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

@@ -1,15 +1,16 @@
 <template>
   <v-row>
-    <template v-for="filterItem in Object.keys($stores[type].filters)">
+    <template v-for="(filterItem, index) in Object.keys($stores[type].filters)">
       <v-col
         v-if="computeVisibility(filterItem)"
-        :key="type + filterItem"
+        :key="type + index + filterItem"
         cols="12"
         sm="6"
         md="4"
       >
         <component
           :is="ComponentName(filterItem)"
+          :id="type + index + filterItem"
           tile
           :name="filterItem"
           hide-details
@@ -53,7 +54,6 @@ const getItems = (name) => {
   }
 
   if ($filters?.[props.type]?.[name]) {
-    /*  console.log("filters found for ", name, $filters[props.type][name]) */
     return $filters[props.type][name]
       .filter((key) => key !== "label")
       .map((item) => ({
@@ -68,7 +68,7 @@ const getItems = (name) => {
   if (
     messages.value[locale.value].list.filters[props.type][name] === undefined
   ) {
-    console.log("name not found, no item for this filmter: ", name)
+    console.log("name not found, no item for this filter: ", name)
     return []
   }
   // TODO replace with package based values

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,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,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(),
   ),
 )
-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" })
+  }
 }
-
-console.log("pathPrefix", itemTemplate.value)
+/* 
+onUpdated(() => {
+  console.log("STOP local loading from updated")
+  rootStore.setLoading(false, props.type)
+}) */
 </script>

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>