@paris-ias/list 1.0.106 → 1.0.107

package/dist/module.json

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

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

@@ -1,32 +1,50 @@
 <template>
   <v-row
     v-ripple
+    no-gutters
     class="cursor-pointer highlight-on-hover"
     @click="$router.push(localePath('/activities/events/' + item.slug[locale]))"
   >
-    <v-col align-self="center" cols="auto">
-      {{
-        new Date(item.start).toLocaleDateString(locale, {
-          year: "numeric",
-          month: "numeric",
-          day: "numeric",
-        })
-      }}
+    <v-col v-if="mdAndUp" align-self="center" cols="1">
+      <MiscAtomsImageContainer
+        cover
+        :loading="$stores.events.loading"
+        :src="item.image.url ? item.image : '/default.png'"
+        :ratio="1 / 1"
+        :name="item.name"
+        :slug="item.slug"
+        link="events-slug"
+        width="80px"
+      />
     </v-col>
-    <v-col align-self="center" class="text-h6 dense">
-      <div class="mt-2 text-h6 text-overline font-weight-black">
-        {{ $t("list.filters.events.category." + item.category) }}
+
+    <v-col align-self="center" class="pl-2">
+      <div class="text-h5 dense text-overline font-weight-black">
+        {{
+          $t("list.filters.events.category." + item.category) +
+          " / " +
+          new Date(item.start).toLocaleDateString(locale, {
+            year: "numeric",
+            month: "numeric",
+            day: "numeric",
+          })
+        }}
+      </div>
+      <div class="text-h5 dense">
+        {{ item.name }}
       </div>
-      {{ item.name }}
     </v-col>
-    <v-col align-self="center">
-      <!--       <EventsBadges :item /> -->
+
+    <v-col align-self="center" cols="auto">
+      <EventsBadges :item />
     </v-col>
   </v-row>
 </template>
 
 <script setup>
 import { useLocalePath, useI18n } from "#imports";
+import { useDisplay } from "vuetify";
+const { mdAndUp } = useDisplay();
 const { locale } = useI18n();
 const localePath = useLocalePath();
 const props = defineProps({

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

@@ -1,12 +1,13 @@
 <template>
   <v-row
     v-ripple
+    no-gutters
     class="cursor-pointer highlight-on-hover"
     @click="
       $router.push(localePath('/activities/fellowships' + item.slug[locale]))
     "
   >
-    <v-col align-self="center" cols="8" class="text-h6">
+    <v-col align-self="center" cols="8" class="text-h5 dense">
       {{ item.name }}
       <FellowshipsBadges :item="item" />
     </v-col>

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

@@ -0,0 +1,27 @@
+<template>
+  <component
+    :is="itemTemplate"
+    v-for="(item, index) in $rootStore.results[type].items"
+    :key="index"
+    :item="item"
+    :index="index"
+  />
+</template>
+
+<script setup>
+import { capitalize } from "../../../composables/useUtils";
+import { useNuxtApp, resolveComponent, computed } from "#imports";
+const { $stores, $rootStore } = useNuxtApp();
+console.log("rootStore: ", $rootStore);
+const props = defineProps({
+  type: {
+    type: String,
+    default: "people"
+  }
+});
+const itemTemplate = computed(
+  () => resolveComponent(
+    (capitalize(props.type) + capitalize($stores[props.type].view.name) + "Item").toString()
+  )
+);
+</script>

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

@@ -1,80 +1,83 @@
 <template>
   <div class="d-flex flex-grow-1 flex-column">
-    <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"
-      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-expand-transition v-if="type === 'all'">
-      <v-list
-        v-show="search.length"
-        lines="three"
-        item-props
-        style="max-height: 300px"
-        class="overflow-y-auto"
+    <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"
       >
-        <div v-if="rootStore.loading" class="d-flex justify-center py-6">
-          <v-progress-circular color="black" size="64" indeterminate />
-        </div>
-        <template v-for="(item, index) in results">
-          <v-list-subheader
-            v-if="item.type && item.type === 'subheader'"
-            :key="'subheader-' + index"
-          >
-            {{ $t(item.name) }}
-          </v-list-subheader>
-          <div
-            v-else-if="item.type && item.type === 'no-result'"
-            :key="'no-result-' + index"
-            class="mx-6"
-          >
-            {{ $t("no-result") }}
+        <!--    :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>
-          <v-divider
-            v-else-if="item.type && item.type === 'divider'"
-            :key="'divider-' + index"
-            inset
-          />
-          <ListAtomsSearchItem
-            v-else
-            :key="'item- ' + index"
-            :index
-            :item
-            :type="item.type"
-          />
         </template>
-      </v-list>
-    </v-expand-transition>
+      </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>
   </div>
 </template>
 
 <script setup>
 import { useDebounceFn } from "@vueuse/core";
 import { useRootStore } from "../../../stores/root";
-import { useNuxtApp, computed, useI18n } from "#imports";
+import { computed, useI18n, ref } from "#imports";
 const { locale, t } = useI18n();
 const rootStore = useRootStore();
-const { $stores } = useNuxtApp();
+const emit = defineEmits(["filter-change"]);
 const props = defineProps({
   type: {
     type: String,
@@ -85,34 +88,29 @@ const props = defineProps({
     default: false
   }
 });
-const results = computed(() => {
-  const storeRst = rootStore.results;
-  const rst = Object.keys(storeRst).length && Object.keys(storeRst).sort((a, b) => {
-    return storeRst[b]?.items?.length - storeRst[a]?.items?.length;
-  }).reduce((acc, key, index) => {
-    const items = storeRst[key]?.items;
-    const total = storeRst[key]?.total;
-    if (total === 0 && index === 0) {
-      acc.push({ type: "no-result" });
-      return acc;
-    }
-    if (items?.length) {
-      acc.push({ type: "subheader", name: t("items." + key, 2) });
-      acc.push(
-        ...items.map((item) => ({
-          prependAvatar: item?.image?.url || "mdi-square",
-          title: item.name || item.firstname + " " + item.lastname,
-          subtitle: item.summary || item.biography,
-          id: item.id,
-          type: key
-        }))
-      );
-    }
-    acc.push({ type: "divider" });
-    return acc;
-  }, []) || {};
-  return rst;
-});
+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/atoms/SearchString.vue

@@ -14,7 +14,7 @@
                 $stores[type].total,
                 $t("items." + props.type, $stores[type].total),
               ],
-              $stores[type].total
+              $stores[type].total,
             )
           : $t(
               "list.0-items-found",
@@ -22,7 +22,7 @@
                 $stores[type].total,
                 $t("items." + props.type, $stores[type].total),
               ],
-              $stores[type].total
+              $stores[type].total,
             )
       }}
     </template>
@@ -42,11 +42,11 @@
                 $t(
                   "items." + props.type,
                   $stores[type].total,
-                  $stores[type].total
+                  $stores[type].total,
                 ),
                 $stores[type].search,
               ],
-              $stores[type].total
+              $stores[type].total,
             )
           : $t(
               "list.0-items-found-searching-for",
@@ -55,11 +55,11 @@
                 $t(
                   "items." + props.type,
                   $stores[type].total,
-                  $stores[type].total
+                  $stores[type].total,
                 ),
                 $stores[type].search,
               ],
-              $stores[type].total
+              $stores[type].total,
             )
       }}
     </template>
@@ -79,12 +79,12 @@
                 $t(
                   "items." + props.type,
                   $stores[type].total,
-                  $stores[type].total
+                  $stores[type].total,
                 ),
                 $stores[type].filtersCount,
                 $t("filters", $stores[type].filtersCount),
               ],
-              $stores[type].total
+              $stores[type].total,
             )
           : $t(
               "list.0-items-found-with-1-filter",
@@ -94,7 +94,7 @@
                 $stores[type].filtersCount,
                 $t("filters", $stores[type].filtersCount),
               ],
-              $stores[type].total
+              $stores[type].total,
             )
       }}
     </template>
@@ -117,7 +117,7 @@
                 $stores[type].filtersCount,
                 $t("filters", $stores[type].filtersCount),
               ],
-              $stores[type].total
+              $stores[type].total,
             )
           : $t(
               "list.0-items-found-searching-for-with-1-filter",
@@ -128,7 +128,7 @@
                 $stores[type].filtersCount,
                 $t("filters", $stores[type].filtersCount),
               ],
-              $stores[type].total
+              $stores[type].total,
             )
       }}
     </template>

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

@@ -0,0 +1,128 @@
+<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 density="compact">
+            <v-list-item
+              v-for="(option, index) in filterOptions"
+              :key="option.value"
+              @click="toggleFilter(option)"
+            >
+              <template #prepend>
+                <v-checkbox
+                  hide-details
+                  :model-value="categories.includes(index)"
+                  @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>
+  </div>
+</template>
+
+<script setup>
+import { useDebounceFn } from "@vueuse/core";
+import { useRootStore } from "../../../stores/root";
+import { computed, useI18n, ref } from "#imports";
+const { locale, t } = useI18n();
+const rootStore = useRootStore();
+const emit = defineEmits(["filter-change"]);
+const props = defineProps({
+  type: {
+    type: String,
+    required: true
+  },
+  loading: {
+    type: Boolean,
+    default: false
+  },
+  categories: {
+    type: Array,
+    default: () => []
+  }
+});
+const filterMenuOpen = ref(false);
+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 = props.categories.indexOf(option.value);
+  if (index > -1) {
+    props.categories.splice(index, 1);
+  } else {
+    props.categories.push(option.value);
+  }
+  emit("filter-change", {
+    name: option.value,
+    value: props.categories.includes(option.value)
+  });
+};
+const search = computed({
+  get() {
+    return rootStore.search;
+  },
+  set: await useDebounceFn(async function(v) {
+    await rootStore.updateSearch({
+      type: props.type,
+      search: v || "",
+      lang: locale.value
+    });
+  }, 300)
+});
+</script>

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

@@ -0,0 +1,79 @@
+<template>
+  <div>
+    <v-divider />
+    <div class="d-flex align-center justify-space-between my-6">
+      <v-btn
+        variant="text"
+        size="large"
+        class=""
+        @click="$emit('toggle', type)"
+      >
+        <v-icon size="large">{{
+          open ? "mdi-chevron-down" : "mdi-chevron-right"
+        }}</v-icon>
+      </v-btn>
+      <div
+        class="d-flex flex-column cursor-pointer"
+        @click="$emit('toggle', type)"
+      >
+        <div class="text-h4">
+          {{ capitalize($t("items." + props.type, 2)) }}
+        </div>
+        <div class="text-overline">
+          {{
+            feminine
+              ? $t(
+                  "list.0-items-found-f",
+                  [
+                    $rootStore.results[type].total,
+                    $t("items." + props.type, $rootStore.results[type].total),
+                  ],
+                  $rootStore.results[type].total,
+                )
+              : $t(
+                  "list.0-items-found",
+                  [
+                    $rootStore.results[type].total,
+                    $t("items." + props.type, $rootStore.results[type].total),
+                  ],
+                  $rootStore.results[type].total,
+                )
+          }}
+        </div>
+      </div>
+      <v-spacer />
+      <v-btn
+        class="ma-2"
+        color="default"
+        variant="outlined"
+        rounded="0"
+        :to="localePath(type === 'people' ? '/people' : '/activities/' + type)"
+      >
+        {{ $t("list.pls-x-more", [$rootStore.results[type].total]) }}
+      </v-btn>
+    </div>
+    <slot />
+  </div>
+</template>
+
+<script setup>
+import { useNuxtApp, useLocalePath } from "#imports";
+const localePath = useLocalePath();
+const { $rootStore } = useNuxtApp();
+const props = defineProps({
+  type: {
+    type: String,
+    required: true
+  },
+  feminine: {
+    type: Boolean,
+    required: false,
+    default: false
+  },
+  open: {
+    type: Boolean,
+    required: false,
+    default: true
+  }
+});
+</script>

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

@@ -1,54 +1,45 @@
 <template>
-  <ListMoleculesResultsHeader :type="props.type" />
-  <div class="results-container">
-    <component
-      :is="itemTemplate"
-      v-for="(item, index) in items"
-      :key="index"
-      :item="item"
-      :index="index"
-    />
-  </div>
+  <ListMoleculesGlobalSearchInput
+    type="all"
+    :placeholder="$t('search')"
+    variant="outlined"
+  />
+  <ListMoleculesResultsContainer
+    v-for="(type, index) in appConfig.list.modules"
+    :key="index"
+    :feminine="type === 'people'"
+    :type
+    :open="$rootStore.results[type].total > 0"
+    @toggle="open[$event] = !open[$event]"
+  >
+    <v-expand-transition class="results-container">
+      <div v-show="open[type]">
+        <ListAtomsResultsList :type />
+      </div> </v-expand-transition
+  ></ListMoleculesResultsContainer>
 </template>
 
 <script setup>
-import { useRootStore } from "../../../stores/root";
-import { capitalize } from "../../../composables/useUtils";
 import {
-  useNuxtApp,
-  resolveComponent,
-  computed,
   onBeforeUnmount,
   onMounted,
-  useI18n
+  useI18n,
+  useAppConfig,
+  useNuxtApp
 } from "#imports";
-const { $stores } = useNuxtApp();
+const { $rootStore } = useNuxtApp();
+const appConfig = useAppConfig();
 const { locale } = useI18n();
-const rootStore = useRootStore();
-const props = defineProps({
-  type: {
-    type: String,
-    default: "people",
-    required: true
-  },
-  items: [Object]
-});
-const itemTemplate = computed(
-  () => resolveComponent(
-    (capitalize(props.type) + capitalize($stores[props.type].view.name) + "Item").toString()
-  )
-);
-const items = computed(() => $stores[props.type].items);
+const open = ref({});
 onMounted(() => {
   console.log("mounted list");
 });
 try {
-  await rootStore.update(props.type, locale.value);
+  await $rootStore.update("all", locale.value);
 } catch (error) {
   console.log("error fetching update list: ", error);
 }
 onBeforeUnmount(() => {
-  rootStore.resetState(props.type, locale.value);
 });
 </script>
 

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

@@ -1,17 +1,30 @@
 <template>
   <v-row
     v-ripple
+    no-gutters
     class="cursor-pointer highlight-on-hover"
     @click="$router.push(localePath('/activities/news/' + item.slug[locale]))"
   >
-    <v-col align-self="center" cols="7" class="text-h6 dense">
+    <v-col v-if="mdAndUp" align-self="center" cols="1">
+      <MiscAtomsImageContainer
+        cover
+        :loading="$stores.people.loading"
+        :src="item.image.url ? item.image : '/default.png'"
+        :ratio="1 / 1"
+        :name="item.lastname + ' ' + item.firstname"
+        :slug="item.slug"
+        link="people-slug"
+        width="80px"
+      />
+    </v-col>
+    <v-col align-self="center" class="text-h5 dense pl-2">
       <v-skeleton-loader v-if="rootStore.loading" type="heading" />
       <template v-else>
         {{ item.name }}
       </template>
     </v-col>
 
-    <v-col align-self="center" cols="5" class="dense">
+    <v-col align-self="center">
       <v-skeleton-loader
         v-if="rootStore.loading"
         :type="
@@ -36,7 +49,7 @@ import { useDisplay } from "vuetify";
 import { useRootStore } from "../../stores/root";
 import { computed, useNuxtApp, useI18n, useLocalePath } from "#imports";
 const { $stores } = useNuxtApp();
-const { name } = useDisplay();
+const { name, mdAndUp } = useDisplay();
 const localePath = useLocalePath();
 const { locale } = useI18n();
 const rootStore = useRootStore();

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

@@ -3,7 +3,14 @@
     v-ripple
     no-gutters
     class="cursor-pointer highlight-on-hover"
-    @click="$router.push(localePath('/people/' + item.slug))"
+    @click="
+      $router.push(
+        localePath({
+          name: 'people-slug',
+          params: { slug: item.slug },
+        }),
+      )
+    "
   >
     <v-col v-if="mdAndUp" align-self="center" cols="1">
       <MiscAtomsImageContainer
@@ -14,10 +21,10 @@
         :name="item.lastname + ' ' + item.firstname"
         :slug="item.slug"
         link="people-slug"
-        width="50"
+        width="80px"
       />
     </v-col>
-    <v-col align-self="center" class="text-h6 pl-2">
+    <v-col align-self="center" class="text-h6 dense pl-2">
       <v-skeleton-loader v-if="rootStore.loading" type="heading" />
       <div v-else class="text-h5">
         {{ item.firstname + " " + item.lastname }}
@@ -26,7 +33,7 @@
         {{ item.groups.vintage ? item.groups.vintage[0].theme : "" }}
       </div>
     </v-col>
-    <v-col align-self="center">
+    <v-col align-self="center" cols="auto">
       <PeopleGroupBadges :item="item" />
     </v-col>
   </v-row>

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

@@ -1,10 +1,30 @@
 <template>
   <v-row
     v-ripple
+    no-gutters
     class="cursor-pointer highlight-on-hover"
-    @click="$router.push(localePath('/projects/' + item.slug[locale]))"
+    @click="
+      $router.push(
+        localePath({
+          name: 'activities-projects-slug',
+          params: { slug: item.slug[locale] },
+        }),
+      )
+    "
   >
-    <v-col align-self="center" cols="7" class="text-h6 dense">
+    <v-col v-if="mdAndUp" align-self="center" cols="1">
+      <MiscAtomsImageContainer
+        cover
+        :loading="$stores.projects.loading"
+        :src="item.image.url ? item.image : '/default.png'"
+        :ratio="1 / 1"
+        :name="item.name"
+        :slug="item.slug[locale]"
+        link="activities-projects-slug"
+        width="50"
+      />
+    </v-col>
+    <v-col align-self="center" class="text-h5 dense pl-2">
       <v-skeleton-loader v-if="rootStore.loading" type="heading" />
       <template v-else>
         {{ item.name }}
@@ -33,7 +53,7 @@ import { useDisplay } from "vuetify";
 import { useRootStore } from "../../stores/root";
 import { computed, useNuxtApp, useI18n, useLocalePath } from "#imports";
 const { $stores } = useNuxtApp();
-const { name } = useDisplay();
+const { name, mdAndUp } = useDisplay();
 const localePath = useLocalePath();
 const { locale } = useI18n();
 const rootStore = useRootStore();

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

@@ -1,19 +1,32 @@
 <template>
   <v-row
     v-ripple
+    no-gutters
     class="cursor-pointer highlight-on-hover"
     @click="
       $router.push(localePath('/activities/publications/' + item.slug[locale]))
     "
   >
-    <v-col align-self="center" cols="7" class="text-h6 dense">
+    <v-col v-if="mdAndUp" align-self="center" cols="1">
+      <MiscAtomsImageContainer
+        cover
+        :loading="$stores.people.loading"
+        :src="item.image.url ? item.image : '/default.png'"
+        :ratio="1 / 1"
+        :name="item.lastname + ' ' + item.firstname"
+        :slug="item.slug[locale]"
+        link="activities-publications-slug"
+        width="80px"
+      />
+    </v-col>
+    <v-col align-self="center" class="text-h5 dense pl-2">
       <v-skeleton-loader v-if="rootStore.loading" type="heading" />
       <template v-else>
         {{ item.name }}
       </template>
     </v-col>
 
-    <v-col align-self="center" cols="5" class="dense">
+    <v-col align-self="center">
       <v-skeleton-loader
         v-if="rootStore.loading"
         :type="
@@ -38,7 +51,7 @@ import { useDisplay } from "vuetify";
 import { useRootStore } from "../../stores/root";
 import { computed, useNuxtApp, useI18n, useLocalePath } from "#imports";
 const { $stores } = useNuxtApp();
-const { name } = useDisplay();
+const { name, mdAndUp } = useDisplay();
 const localePath = useLocalePath();
 const { locale } = useI18n();
 const rootStore = useRootStore();

package/dist/runtime/graphql/list/search.gql

@@ -4,6 +4,19 @@ query search($appId: ID = "", $search: String = "", $lang: String = "en") {
       items {
         firstname
         id
+        groups {
+          board
+          fellows
+          sab
+          sponsor
+          team
+          vintage {
+            name
+            theme
+            url
+            year
+          }
+        }
         image {
           alt
           backgroundColor

package/package.json

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

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

@@ -1,59 +0,0 @@
-<template>
-  <v-divider />
-  <div class="d-flex align-center justify-space-between my-6">
-    <div class="d-flex flex-column">
-      <div class="text-h4">
-        {{ capitalize($t("items." + props.type, 2)) }}
-      </div>
-      <div class="text-overline">
-        {{
-          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,
-              )
-        }}
-      </div>
-    </div>
-    <v-spacer />
-    <v-btn
-      class="ma-2"
-      color="default"
-      variant="outlined"
-      rounded="0"
-      :to="localePath(type === 'people' ? '/people' : '/activities/' + type)"
-      @click="$emit('add')"
-    >
-      {{ $t("list.pls-x-more", [$stores[type].total]) }}
-    </v-btn>
-  </div>
-</template>
-
-<script setup>
-import { useNuxtApp, useLocalePath } from "#imports";
-const localePath = useLocalePath();
-const { $stores } = useNuxtApp();
-const props = defineProps({
-  type: {
-    type: String,
-    required: true
-  },
-  feminine: {
-    type: Boolean,
-    required: false,
-    default: false
-  }
-});
-</script>