@paris-ias/list 1.0.108 → 1.0.111

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@paris-ias/list",
   "configKey": "list",
-  "version": "1.0.108",
+  "version": "1.0.111",
   "builder": {
     "@nuxt/module-builder": "1.0.0",
     "unbuild": "3.5.0"

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

@@ -0,0 +1,39 @@
+<template>
+  <v-select
+    v-model="itemsPerPage"
+    class="perPageSelect"
+    density="compact"
+    variant="outlined"
+    :items="itemsPerPageArray"
+    hide-details
+    :loading="$rootStore.loading"
+    @update:model-value="
+      $rootStore.updateItemsPerPage({
+        value: $event,
+        type: type,
+        lang: locale,
+      })
+    "
+  />
+</template>
+
+<script setup>
+import { useNuxtApp, useI18n } from "#imports";
+import { useDisplay } from "vuetify";
+import { computed, ref } from "vue";
+const { smAndDown } = useDisplay();
+const { $stores, $rootStore } = useNuxtApp();
+const { locale } = useI18n();
+const props = defineProps({
+  type: {
+    type: String,
+    required: false,
+    default: ""
+  }
+});
+const itemsPerPage = ref($stores[props.type].itemsPerPage);
+const itemsPerPageArray = computed(
+  () => $stores[props.type].view.perPage.options
+);
+const scrolled = computed(() => $stores.scrolled);
+</script>

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

@@ -1,84 +1,44 @@
 <template>
   <div class="d-flex flex-grow-1 flex-column">
-    <div class="d-flex align-center">
-      <v-text-field
-        v-model.trim="search"
-        :placeholder="$t('list.search-type', [$t('items.' + type, 2)])"
-        prepend-inner-icon="mdi-magnify"
-        single-line
-        class="transition-swing flex-grow-1"
-        variant="outlined"
-        hide-details
-        clearable
-        tile
-        type="search"
-        :loading="rootStore.loading"
-      >
-        <!--    :loading="$nuxt.loading || $store.state.loading" :class="{ 'mt-3':
-        $store.state.scrolled }" -->
-        <template v-if="!search" #label>
-          <div class="searchLabel">
-            {{
-              type === "all"
-                ? $t("search")
-                : $t("list.search-type", [$t("items." + type, 2)])
-            }}
-          </div>
-        </template>
-      </v-text-field>
-
-      <v-menu
-        v-model="filterMenuOpen"
-        :close-on-content-click="false"
-        location="bottom end"
-        offset="4"
-      >
-        <template #activator="{ props: menuProps }">
-          <v-btn
-            v-bind="menuProps"
-            :rounded="0"
-            variant="outlined"
-            size="large"
-            height="56"
-          >
-            <v-icon>mdi-filter</v-icon>
-            <v-icon class="ml-1" size="small">
-              {{ filterMenuOpen ? "mdi-chevron-up" : "mdi-chevron-down" }}
-            </v-icon>
-          </v-btn>
-        </template>
-
-        <v-card min-width="200">
-          <v-list>
-            <v-list-item
-              v-for="option in filterOptions"
-              :key="option.value"
-              @click="toggleFilter(option)"
-            >
-              <template #prepend>
-                <v-checkbox
-                  hide-details
-                  :model-value="selectedFilters.includes(option.value)"
-                  @update:model-value="toggleFilter(option)"
-                />
-              </template>
-              <v-list-item-title>{{ option.label }}</v-list-item-title>
-            </v-list-item>
-          </v-list>
-        </v-card>
-      </v-menu>
-    </div>
+    <v-text-field
+      v-model.trim="search"
+      :placeholder="$t('list.search-type', [$t('items.' + type, 2)])"
+      :append-icon="type === 'all' ? 'mdi-magnify' : false"
+      prepend-inner-icon="mdi-magnify"
+      single-line
+      class="transition-swing"
+      variant="outlined"
+      hide-details
+      clearable
+      tile
+      type="search"
+      :loading="rootStore.loading"
+      @keyup.enter="$router.push(localePath('/search'))"
+      @click:append="$router.push(localePath('/search'))"
+    >
+      <!--    :loading="$nuxt.loading || $store.state.loading" :class="{ 'mt-3':
+      $store.state.scrolled }" -->
+      <template v-if="!search" #label>
+        <div class="searchLabel">
+          {{
+            type === "all"
+              ? $t("search")
+              : $t("list.search-type", [$t("items." + type, 2)])
+          }}
+        </div>
+      </template>
+    </v-text-field>
   </div>
 </template>
 
 <script setup>
 import { useDebounceFn } from "@vueuse/core";
 import { useRootStore } from "../../../stores/root";
-import { computed, useI18n, ref } from "#imports";
-import { capitalize } from "../../../composables/useUtils";
-const { locale, t } = useI18n();
+import { computed, useI18n } from "#imports";
+const { $router } = useNuxtApp();
+const localePath = useLocalePath();
+const { locale } = useI18n();
 const rootStore = useRootStore();
-const emit = defineEmits(["filter-change"]);
 const props = defineProps({
   type: {
     type: String,
@@ -89,29 +49,6 @@ const props = defineProps({
     default: false
   }
 });
-const filterMenuOpen = ref(false);
-const selectedFilters = ref([]);
-const filterOptions = [
-  { value: "people", label: capitalize(t("items.people", 2)) },
-  { value: "events", label: capitalize(t("items.events", 2)) },
-  { value: "news", label: capitalize(t("items.news", 2)) },
-  { value: "publications", label: capitalize(t("items.publications", 2)) },
-  { value: "fellowships", label: capitalize(t("items.fellowships", 2)) },
-  { value: "projects", label: capitalize(t("items.projects", 2)) }
-];
-const toggleFilter = (option) => {
-  const index = selectedFilters.value.indexOf(option.value);
-  if (index > -1) {
-    selectedFilters.value.splice(index, 1);
-  } else {
-    selectedFilters.value.push(option.value);
-  }
-  emit("filter-change", {
-    name: option.value,
-    value: selectedFilters.value.includes(option.value),
-    allSelected: selectedFilters.value
-  });
-};
 const search = computed({
   get() {
     return rootStore.search;

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

@@ -3,7 +3,11 @@
     <div class="d-flex align-center">
       <v-text-field
         v-model.trim="search"
-        :placeholder="$t('list.search-type', [$t('items.' + type, 2)])"
+        :placeholder="
+          type === 'all'
+            ? t('search')
+            : $t('list.search-type', [$t('items.' + type, 2)])
+        "
         prepend-inner-icon="mdi-magnify"
         single-line
         class="transition-swing flex-grow-1"
@@ -13,6 +17,7 @@
         tile
         type="search"
         :loading="rootStore.loading"
+        @keyup.enter="$router.push(localePath('/search'))"
       >
         <!--    :loading="$nuxt.loading || $store.state.loading" :class="{ 'mt-3':
         $store.state.scrolled }" -->
@@ -37,7 +42,7 @@
           <v-btn
             v-bind="menuProps"
             :rounded="0"
-            variant="outlined"
+            variant="text"
             size="large"
             height="56"
           >
@@ -45,6 +50,9 @@
             <v-icon class="ml-1" size="small">
               {{ filterMenuOpen ? "mdi-chevron-up" : "mdi-chevron-down" }}
             </v-icon>
+            <v-tooltip activator="parent" location="start">
+              {{ $t("filter-by-type") }}
+            </v-tooltip>
           </v-btn>
         </template>
 
@@ -67,6 +75,21 @@
           </v-list>
         </v-card>
       </v-menu>
+      <v-btn
+        v-bind="attrs"
+        :rounded="0"
+        variant="test"
+        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-tooltip activator="parent" location="start">{{
+          $t("click-here-to-search")
+        }}</v-tooltip>
+      </v-btn>
     </div>
   </div>
 </template>
@@ -94,14 +117,14 @@ const props = defineProps({
   }
 });
 const filterMenuOpen = ref(false);
-const filterOptions = [
+const filterOptions = computed(() => [
   { value: "people", label: capitalize(t("items.people", 2)) },
   { value: "events", label: capitalize(t("items.events", 2)) },
   { value: "news", label: capitalize(t("items.news", 2)) },
   { value: "publications", label: capitalize(t("items.publications", 2)) },
   { value: "fellowships", label: capitalize(t("items.fellowships", 2)) },
   { value: "projects", label: capitalize(t("items.projects", 2)) }
-];
+]);
 const toggleFilter = (option) => {
   const currentCategories = [...props.categories];
   const index = currentCategories.indexOf(option.value);

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

@@ -16,6 +16,7 @@
           <ListMoleculesFilters :type="type" />
         </div>
       </v-expand-transition>
+
       <ListAtomsSearchInput :type="type" />
       <ListAtomsSearchString :type="type" />
     </v-col>

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

@@ -15,7 +15,12 @@
         class="d-flex flex-column cursor-pointer"
         @click="$emit('toggle', type)"
       >
-        <div class="text-h4">
+        <div
+          class="text-h4"
+          :class="
+            $rootStore.results[type].total > 0 ? '' : 'text-grey darken-2'
+          "
+        >
           {{ capitalize($t("items." + props.type, 2)) }}
         </div>
         <div class="text-overline">
@@ -58,7 +63,9 @@
 <script setup>
 import { useNuxtApp, useLocalePath } from "#imports";
 const localePath = useLocalePath();
+const capitalize = (str) => str.charAt(0).toUpperCase() + str.slice(1);
 const { $rootStore } = useNuxtApp();
+defineEmits(["toggle"]);
 const props = defineProps({
   type: {
     type: String,

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

@@ -10,6 +10,8 @@
     />
   </component>
   <div class="text-center">
+    <ListAtomsPerPage :type="type" class="float-right" />
+
     <ListMoleculesPagination
       v-if="numberOfPages > 1"
       :type="type"

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

@@ -3,17 +3,15 @@
     type="all"
     :placeholder="$t('search')"
     variant="outlined"
+    :categories="selectedCategories"
+    @filter-change="handleFilterChange"
   />
   <ListMoleculesResultsContainer
-    v-for="type in sortedModules"
+    v-for="type in filteredSortedModules"
     :key="type"
     :feminine="type === 'people'"
     :type
-    :open="
-      open[type] !== undefined
-        ? open[type]
-        : $rootStore.results[type]?.total > 0
-    "
+    :open="$rootStore.results[type]?.total > 0 || open[type]"
     @toggle="open[$event] = !open[$event]"
   >
     <v-expand-transition class="results-container">
@@ -27,7 +25,6 @@
 <script setup>
 import {
   useNuxtApp,
-  useLocalePath,
   onBeforeUnmount,
   onMounted,
   useI18n,
@@ -35,7 +32,6 @@ import {
   ref,
   computed
 } from "#imports";
-const localePath = useLocalePath();
 defineOptions({
   name: "SearchResults"
 });
@@ -43,6 +39,10 @@ const { $rootStore } = useNuxtApp();
 const appConfig = useAppConfig();
 const { locale } = useI18n();
 const open = ref({});
+const selectedCategories = ref([...appConfig.list.modules]);
+const handleFilterChange = (filterData) => {
+  selectedCategories.value = filterData.categories;
+};
 const sortedModules = computed(() => {
   return appConfig.list.modules.slice().sort((a, b) => {
     const aResults = $rootStore.results[a] || { total: 0 };
@@ -50,6 +50,11 @@ const sortedModules = computed(() => {
     return (bResults.total || 0) - (aResults.total || 0);
   });
 });
+const filteredSortedModules = computed(() => {
+  return sortedModules.value.filter(
+    (type) => selectedCategories.value.includes(type)
+  );
+});
 onMounted(async () => {
   console.log("mounted list");
   try {

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

@@ -2,7 +2,7 @@
   <v-row
     v-ripple
     no-gutters
-    class="cursor-pointer highlight-on-hover"
+    class="cursor-pointer highlight-on-hover my-3"
     @click="
       $router.push(
         localePath({
@@ -24,12 +24,12 @@
         width="80px"
       />
     </v-col>
-    <v-col align-self="center" class="text-h6 dense pl-2">
+    <v-col align-self="center" class="text-h6 dense px-2">
       <v-skeleton-loader v-if="rootStore.loading" type="heading" />
       <div v-else class="text-h5">
         {{ item.firstname + " " + item.lastname }}
       </div>
-      <div class="mt-2 text-body-2 font-weight-light">
+      <div class="mt-2 text-body-1 font-weight-light">
         {{ item.groups.vintage ? item.groups.vintage[0].theme : "" }}
       </div>
     </v-col>

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

@@ -125,7 +125,14 @@
             :key="position.role + index"
             class="text-body-2"
           >
-            {{ position.role + " " + (position.department || "") }}
+            <template v-if="position.role === 'Fellow'">
+              <span class="text-caption text-uppercase">
+                {{ $t("fellow") }}
+              </span>
+            </template>
+            <template v-else>
+              {{ position.role + " " + (position.department || "") }}
+            </template>
             <span v-if="position.start" class="">
               <!--  TODO FIx dates display -->
               -

package/dist/runtime/translations/en.json

@@ -13,7 +13,7 @@
     "see-more": "See more events"
   },
   "filters": "Filters",
-  "from {0} to {1}": "from {0} to {1}",
+  "from {0} to {1}": "From {0} to {1}",
   "gallery": "Gallery",
   "hybrid-event": "Hybrid event",
   "inscription-gratuite-et-obligatoire": " Free and mandatory registration",
@@ -346,5 +346,6 @@
   "list.by-vintage-from-recent-to-old": "By Year, from recent to old",
   "list.by-vintage-from-old-to-recent": "By Year, from old to recent",
   "no-biography": "No biography available",
-  "search": "Search"
+  "search": "Search",
+  "items-per-page": "Items per page"
 }

package/dist/runtime/translations/fr.json

@@ -13,7 +13,7 @@
     "see-more": "Voir plus d'événements"
   },
   "filters": "filtre | filtre | Filtres",
-  "from {0} to {1}": "de {0} à {1}",
+  "from {0} to {1}": "Du {0} à {1}",
   "gallery": "Galerie",
   "hybrid-event": "Évènement hybride",
   "inscription-gratuite-et-obligatoire": "Enregistrement gratuit et obligatoire",
@@ -342,8 +342,9 @@
   "visit-this-project-website": "Visitez le site Web du projet",
   "visit-this-publications-website": "Visitez la page Web de cette publication",
   "no-biography": "Aucune biographie disponible",
-  "search": "Rechercher",
   "close-the-filter-panel": "Réduire les filtres",
   "list.by-vintage-from-recent-to-old": "Par année, du plus récent au plus vieux",
-  "list.by-vintage-from-old-to-recent": "Par année, du plus vieux au plus récent"
+  "list.by-vintage-from-old-to-recent": "Par année, du plus vieux au plus récent",
+  "search": "Rechercher",
+  "items-per-page": "Éléments par page"
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "license": "AGPL-3.0-only",
   "main": "./dist/module.mjs",
-  "version": "1.0.108",
+  "version": "1.0.111",
   "name": "@paris-ias/list",
   "repository": {
     "url": "git+https://github.com/IEA-Paris/list.git",