@paris-ias/list 1.0.136 → 1.0.138

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

@@ -12,6 +12,8 @@
         v-bind="tooltip"
         prepend-icon="mdi-tune-variant"
         :append-icon="open ? 'mdi-chevron-down' : 'mdi-chevron-up'"
+        :loading="$stores[type] && $stores[type].loading"
+        :disabled="$stores[type] && $stores[type].loading"
         @click="$emit('open', !open)"
       >
         <!--     <v-icon>mdi-tune-variant</v-icon> -->
@@ -26,6 +28,8 @@
 
 <script setup>
 import { useDisplay } from "vuetify"
+import { useNuxtApp } from "#imports"
+const { $stores } = useNuxtApp()
 const {
   name: nameDisplay,
   xs: isXsDisplay,
@@ -40,6 +44,11 @@ const props = defineProps({
     required: false,
     default: false,
   },
+  type: {
+    type: String,
+    required: false,
+    default: "",
+  },
 })
 </script>
 

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

@@ -1,12 +1,13 @@
 <template>
   <v-select
+    :id="'per-page-select' + type"
     v-model="itemsPerPage"
     class="perPageSelect"
-    density="compact"
     variant="outlined"
     :items="itemsPerPageArray"
     hide-details
-    :loading="$rootStore.loading"
+    density="compact"
+    :loading="$stores[type] && $stores[type].loading"
     @update:model-value="
       $rootStore.updateItemsPerPage({
         value: $event,

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

@@ -9,7 +9,7 @@
         icon
         class="ml-auto"
         v-bind="tooltip"
-        @click="rootStore.resetState(props.type, locale)"
+        @click="resetState(props.type)"
       >
         <v-icon>mdi-restore</v-icon>
       </v-btn>
@@ -30,5 +30,9 @@ const props = defineProps({
     required: true,
   },
 })
+const resetState = (type) => {
+  rootStore.resetState(type, locale.value)
+  rootStore.updateRouteQuery(type)
+}
 </script>
 <style lang="scss"></style>

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

@@ -2,6 +2,7 @@
   <div class="d-flex flex-grow-1 flex-column">
     <v-text-field
       v-model.trim="search"
+      :id="inputId"
       :placeholder="$t('list.search-type', [$t('items.' + type, 2)])"
       :append-icon="type === 'all' ? 'mdi-magnify' : ''"
       prepend-inner-icon="mdi-magnify"
@@ -12,7 +13,7 @@
       clearable
       tile
       type="search"
-      :loading="rootStore.loading"
+      :loading="isLoading"
     >
       <!--    :loading="$nuxt.loading || $store.state.loading" :class="{ 'mt-3':
       $store.state.scrolled }" -->
@@ -46,14 +47,20 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  id: {
+    type: String,
+    required: false,
+    default: "",
+  },
 })
+const inputId = computed(() => props.id || `search-input-${props.type}`)
 const search = computed({
   get() {
     return props.type === "all"
       ? rootStore.search
       : $stores[props.type]?.search || ""
   },
-  set: await useDebounceFn(async function (v) {
+  set: useDebounceFn(async (v) => {
     await rootStore.updateSearch({
       type: props.type,
       search: v || "",
@@ -61,6 +68,12 @@ const search = computed({
     })
   }, 300),
 })
+
+const isLoading = computed(() =>
+  props.type === "all"
+    ? rootStore.loading
+    : Boolean($stores[props.type]?.loading),
+)
 </script>
 
 <style lang="scss" scoped></style>

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

@@ -1,154 +1,161 @@
 <template>
   <div class="mt-4 font-weight-light">
-    <template
-      v-if="
-        (!$stores[type].search || $stores[type].search.length === 0) &&
-        $stores[type].filtersCount === 0
-      "
-    >
-      {{
-        feminine
-          ? $t(
-              "list.0-items-found-f",
-              [
-                $stores[type].total,
-                $t("items." + props.type, $stores[type].total),
-              ],
-              $stores[type].total,
-            )
-          : $t(
-              "list.0-items-found",
-              [
-                $stores[type].total,
-                $t("items." + props.type, $stores[type].total),
-              ],
-              $stores[type].total,
-            )
-      }}
-    </template>
-    <!--  searching for "XXX" -->
-    <template
-      v-else-if="
-        !(!$stores[type].search || $stores[type].search.length === 0) &&
-        $stores[type].filtersCount === 0
-      "
-    >
-      {{
-        feminine
-          ? $t(
-              "list.0-items-found-searching-for-f",
-              [
-                $stores[type].total,
-                $t(
-                  "items." + props.type,
+    <ClientOnly v-if="showSkeleton">
+      <v-skeleton-loader :type="isSmAndDown ? 'text@2' : 'text'" />
+    </ClientOnly>
+    <template v-else>
+      <template
+        v-if="
+          (!$stores[type].search || $stores[type].search.length === 0) &&
+          $stores[type].filtersCount === 0
+        "
+      >
+        {{
+          feminine
+            ? $t(
+                "list.0-items-found-f",
+                [
                   $stores[type].total,
+                  $t("items." + props.type, $stores[type].total),
+                ],
+                $stores[type].total,
+              )
+            : $t(
+                "list.0-items-found",
+                [
                   $stores[type].total,
-                ),
-                $stores[type].search,
-              ],
-              $stores[type].total,
-            )
-          : $t(
-              "list.0-items-found-searching-for",
-              [
+                  $t("items." + props.type, $stores[type].total),
+                ],
                 $stores[type].total,
-                $t(
-                  "items." + props.type,
+              )
+        }}
+      </template>
+      <!--  searching for "XXX" -->
+      <template
+        v-else-if="
+          !(!$stores[type].search || $stores[type].search.length === 0) &&
+          $stores[type].filtersCount === 0
+        "
+      >
+        {{
+          feminine
+            ? $t(
+                "list.0-items-found-searching-for-f",
+                [
                   $stores[type].total,
+                  $t(
+                    "items." + props.type,
+                    $stores[type].total,
+                    $stores[type].total,
+                  ),
+                  $stores[type].search,
+                ],
+                $stores[type].total,
+              )
+            : $t(
+                "list.0-items-found-searching-for",
+                [
                   $stores[type].total,
-                ),
-                $stores[type].search,
-              ],
-              $stores[type].total,
-            )
-      }}
-    </template>
-    <!--  with X filters -->
-    <template
-      v-else-if="
-        (!$stores[type].search || $stores[type].search.length === 0) &&
-        $stores[type].filtersCount > 0
-      "
-    >
-      {{
-        feminine
-          ? $t(
-              "list.0-items-found-with-1-filter-f",
-              [
+                  $t(
+                    "items." + props.type,
+                    $stores[type].total,
+                    $stores[type].total,
+                  ),
+                  $stores[type].search,
+                ],
                 $stores[type].total,
-                $t(
-                  "items." + props.type,
+              )
+        }}
+      </template>
+      <!--  with X filters -->
+      <template
+        v-else-if="
+          (!$stores[type].search || $stores[type].search.length === 0) &&
+          $stores[type].filtersCount > 0
+        "
+      >
+        {{
+          feminine
+            ? $t(
+                "list.0-items-found-with-1-filter-f",
+                [
                   $stores[type].total,
+                  $t(
+                    "items." + props.type,
+                    $stores[type].total,
+                    $stores[type].total,
+                  ),
+                  $stores[type].filtersCount,
+                  $t("filters", $stores[type].filtersCount),
+                ],
+                $stores[type].total,
+              )
+            : $t(
+                "list.0-items-found-with-1-filter",
+                [
                   $stores[type].total,
-                ),
-                $stores[type].filtersCount,
-                $t("filters", $stores[type].filtersCount),
-              ],
-              $stores[type].total,
-            )
-          : $t(
-              "list.0-items-found-with-1-filter",
-              [
+                  $t("items." + type, $stores[type].total, $stores[type].total),
+                  $stores[type].filtersCount,
+                  $t("filters", $stores[type].filtersCount),
+                ],
                 $stores[type].total,
-                $t("items." + type, $stores[type].total, $stores[type].total),
-                $stores[type].filtersCount,
-                $t("filters", $stores[type].filtersCount),
-              ],
-              $stores[type].total,
-            )
-      }}
-    </template>
-    <!--  searching for "XXX" with Y filters  -->
-    <template
-      v-else-if="
-        $stores[type].search &&
-        $stores[type].search.length &&
-        $stores[type].filtersCount > 0
-      "
-    >
-      {{
-        feminine
-          ? $t(
-              "list.0-items-found-searching-for-with-1-filter-f",
-              [
+              )
+        }}
+      </template>
+      <!--  searching for "XXX" with Y filters  -->
+      <template
+        v-else-if="
+          $stores[type].search &&
+          $stores[type].search.length &&
+          $stores[type].filtersCount > 0
+        "
+      >
+        {{
+          feminine
+            ? $t(
+                "list.0-items-found-searching-for-with-1-filter-f",
+                [
+                  $stores[type].total,
+                  $t("items." + type, $stores[type].total),
+                  $stores[type].search,
+                  $stores[type].filtersCount,
+                  $t("filters", $stores[type].filtersCount),
+                ],
                 $stores[type].total,
-                $t("items." + type, $stores[type].total),
-                $stores[type].search,
-                $stores[type].filtersCount,
-                $t("filters", $stores[type].filtersCount),
-              ],
-              $stores[type].total,
-            )
-          : $t(
-              "list.0-items-found-searching-for-with-1-filter",
-              [
+              )
+            : $t(
+                "list.0-items-found-searching-for-with-1-filter",
+                [
+                  $stores[type].total,
+                  $t("items." + type, $stores[type].total),
+                  $stores[type].search,
+                  $stores[type].filtersCount,
+                  $t("filters", $stores[type].filtersCount),
+                ],
                 $stores[type].total,
-                $t("items." + type, $stores[type].total),
-                $stores[type].search,
-                $stores[type].filtersCount,
-                $t("filters", $stores[type].filtersCount),
-              ],
-              $stores[type].total,
-            )
-      }}
+              )
+        }}
+      </template>
+      <template v-if="$stores[type].numberOfPages > 1">
+        <!--   // Page X of Y -->
+        {{
+          $t("list.page-0-of-1", [
+            $stores[type].page || 1,
+            $stores[type].numberOfPages || 1,
+          ])
+        }}
+      </template>
+      <!--  X items per page -->
+      <!-- displayed by X -->
+      <!--  and sorted by X -->
     </template>
-    <template v-if="$stores[type].numberOfPages > 1">
-      <!--   // Page X of Y -->
-      {{
-        $t("list.page-0-of-1", [
-          $stores[type].page || 1,
-          $stores[type].numberOfPages || 1,
-        ])
-      }}
-    </template>
-    <!--  X items per page -->
-    <!-- displayed by X -->
-    <!--  and sorted by X -->
   </div>
 </template>
 
 <script setup>
-import { useNuxtApp, ref } from "#imports"
+import { useNuxtApp, ref, computed } from "#imports"
+import { useDisplay } from "vuetify"
+import { useRootStore } from "../../../stores/root"
 
 const { $stores } = useNuxtApp()
 const props = defineProps({
@@ -158,6 +165,35 @@ const props = defineProps({
   },
 })
 const feminine = ref(["news", "publications", "people"].includes(props.type))
+const { smAndDown: isSmAndDown } = useDisplay()
+const rootStore = useRootStore()
+
+const isLoading = computed(() =>
+  Boolean($stores[props.type] && $stores[props.type].loading),
+)
+const isTypeSearchActive = computed(() => {
+  const s = $stores[props.type]?.search
+  return Boolean(s && s.length)
+})
+const isGlobalSearchActive = computed(
+  () => typeof rootStore.search === "string" && rootStore.search.length > 0,
+)
+const isAnySearchActive = computed(
+  () => isTypeSearchActive.value || isGlobalSearchActive.value,
+)
+const isZeroTotal = computed(
+  () => Number($stores[props.type]?.total || 0) === 0,
+)
+const itemsCount = computed(() =>
+  Array.isArray($stores[props.type]?.items)
+    ? $stores[props.type]?.items?.length || 0
+    : 0,
+)
+const showSkeleton = computed(
+  () =>
+    isLoading.value ||
+    (isZeroTotal.value && (isAnySearchActive.value || itemsCount.value > 0)),
+)
 </script>
 
 <style lang="scss" scoped></style>

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

@@ -1,35 +1,39 @@
 <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
-            outlined
-            tile
-            flat
-            icon
-            :class="{
-              'mt-3': isXsDisplay,
-            }"
-            v-bind="mergeProps(menu, tooltip)"
-          >
-            <v-icon>mdi-{{ current?.icon || defaultSort?.icon }}</v-icon>
-          </v-btn>
+          <template v-if="$stores[type].loading">
+            <v-skeleton-loader type="button" :class="{ 'mt-3': isXsDisplay }" />
+          </template>
+          <template v-else>
+            <v-btn
+              x-large
+              outlined
+              tile
+              flat
+              icon
+              :class="{ 'mt-3': isXsDisplay }"
+              v-bind="mergeProps(menu, tooltip)"
+            >
+              <v-icon>mdi-{{ current?.icon || defaultSort?.icon }}</v-icon>
+            </v-btn>
+          </template>
         </template>
         <div
           v-html="
             $t('list.sort-mode') +
-            $t('list.' + current.text || defaultSort.text)
+            $t('list.' + (current?.text || defaultSort?.text))
           "
         />
       </v-tooltip>
     </template>
     <v-list density="compact">
-      <template v-for="(item, index) in items">
+      <template v-for="(item, index) in $stores[props.type].sort">
         <v-list-item
           v-if="item.text !== current.text"
           :key="index"
+          :disabled="$stores[type].loading"
           @click="updateSort(item.value)"
         >
           <template #prepend>
@@ -59,7 +63,7 @@ const props = defineProps({
     required: true,
   },
 })
-const items = ref($stores[props.type].sort)
+const items = ref()
 const defaultSort = ref(
   $stores[props.type].sort[
     Object.keys($stores[props.type].sort).find(
@@ -87,7 +91,7 @@ const current = computed(() => {
 })
 
 const updateSort = async (value) => {
-  await rootStore.updateSort({ value, type: props.type, lang: locale.value })
+  rootStore.updateSort({ value, type: props.type, lang: locale.value })
 }
 </script>
 

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
@@ -44,7 +45,7 @@ const props = defineProps(["type", "expanded"])
 
 const ComponentName = (name) => {
   return resolveComponent(
-    "ListInputs" + capitalize($stores[props.type].filters[name].type)
+    "ListInputs" + capitalize($stores[props.type].filters[name].type),
   )
 }
 const getItems = (name) => {
@@ -53,14 +54,13 @@ 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) => ({
         title: i18n.t(
           props.type === "people" && name === "vintage"
             ? item
-            : `list.filters.${props.type}.${name}.${item}`
+            : `list.filters.${props.type}.${name}.${item}`,
         ),
         value: item,
       }))
@@ -68,12 +68,12 @@ 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
   return Object.keys(
-    messages.value[locale.value].list.filters[props.type][name]
+    messages.value[locale.value].list.filters[props.type][name],
   )
     .filter((key) => key !== "label")
     .map((item) => ({
@@ -97,7 +97,7 @@ const computeVisibility = (filterItem) => {
                 $stores[props.type].filters[value]?.value.includes(rule[value])
             : $stores[props.type].filters[value]?.value === rule[value]
         })
-      }
+      },
     )
   )
 }