@paris-ias/list 1.0.137 → 1.0.139

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/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,29 +30,10 @@
 </template>
 
 <script setup>
-import { ref, computed } from "vue"
+import { ref, unref, 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/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"