@paris-ias/list 1.0.115 → 1.0.116

package/dist/module.json

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

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

@@ -27,21 +27,39 @@
       />
     </v-col>
 
-    <v-col align-self="top" class="pl-2">
+    <v-col align-self="start" class="pl-2">
       <v-chip
         class="mr-3"
         color="black"
-        :size="mdAndUp ? 'default' : 'small'"
+        size="small"
         style="background-color: white; color: black"
         tile
         variant="outlined"
       >
         {{ $t("list.filters.events.category." + item.category) }}
       </v-chip>
+      <span v-if="smAndDown" class="text-overline">
+        {{
+          new Date(item.start).toLocaleDateString(locale, {
+            year: "numeric",
+            month: "numeric",
+            day: "numeric",
+          })
+        }}
+      </span>
 
-      <div class="text-h5 dense paragraph">
-        {{ item.name }}
-      </div>
+      <div
+        class="text-h5 dense paragraph mt-2"
+        v-html="
+          $rootStore.search.length
+            ? highlightAndTruncate(300, item.name, $rootStore.search.split(' '))
+            : item.name
+        "
+      />
+      <MDC
+        class="text-body-1 font-weight-light paragraph"
+        :value="`${highlightAndTruncate(85, item.summary, $rootStore.search.split(' '))}`"
+      />
     </v-col>
 
     <v-col align-self="center" cols="auto">
@@ -51,9 +69,10 @@
 </template>
 
 <script setup>
-import { useLocalePath, useI18n } from "#imports";
+import { useLocalePath, useI18n, useNuxtApp } from "#imports";
 import { useDisplay } from "vuetify";
-const { mdAndUp } = useDisplay();
+const { $rootStore } = useNuxtApp();
+const { smAndDown, mdAndUp, lgAndUp } = useDisplay();
 const { locale } = useI18n();
 const localePath = useLocalePath();
 const props = defineProps({

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

@@ -8,7 +8,13 @@
     "
   >
     <v-col align-self="center" cols="8" class="text-h5 dense">
-      {{ item.name }}
+      <div
+        v-html="
+          $rootStore.search.length
+            ? highlightAndTruncate(300, item.name, $rootStore.search.split(' '))
+            : item.name
+        "
+      />
       <FellowshipsBadges :item="item" />
     </v-col>
     <v-col align-self="center" cols="4">
@@ -26,7 +32,8 @@
 </template>
 
 <script setup>
-import { useLocalePath, useI18n } from "#imports";
+import { useLocalePath, useI18n, useNuxtApp } from "#imports";
+const { $rootStore } = useNuxtApp();
 const { locale } = useI18n();
 const localePath = useLocalePath();
 const props = defineProps({

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

@@ -9,7 +9,7 @@
         icon
         class="ml-auto"
         v-bind="tooltip"
-        @click="rootStore.resetState(type, locale)"
+        @click="rootStore.resetState(props.type, locale)"
       >
         <v-icon>mdi-restore</v-icon>
       </v-btn>
@@ -21,8 +21,8 @@
 <script setup>
 import { useRootStore } from "../../../stores/root";
 import { useI18n } from "#imports";
-const rootStore = useRootStore();
 const { locale } = useI18n();
+const rootStore = useRootStore();
 const props = defineProps({
   type: {
     type: String,

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

@@ -1,7 +1,7 @@
 <template>
   <component
     :is="itemTemplate"
-    v-for="(item, index) in $rootStore.results[type].items"
+    v-for="(item, index) in rootStore.results[type].items"
     :key="index"
     :item="item"
     :index="index"
@@ -10,9 +10,11 @@
 
 <script setup>
 import { capitalize } from "../../../composables/useUtils";
+import { useRootStore } from "../../../stores/root";
 import { useNuxtApp, resolveComponent, computed } from "#imports";
-const { $stores, $rootStore } = useNuxtApp();
-console.log("rootStore: ", $rootStore);
+const { $stores } = useNuxtApp();
+const rootStore = useRootStore();
+console.log("rootStore: ", rootStore);
 const props = defineProps({
   type: {
     type: String,

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

@@ -3,7 +3,7 @@
     <v-text-field
       v-model.trim="search"
       :placeholder="$t('list.search-type', [$t('items.' + type, 2)])"
-      :append-icon="type === 'all' ? 'mdi-magnify' : false"
+      :append-icon="type === 'all' ? 'mdi-magnify' : ''"
       prepend-inner-icon="mdi-magnify"
       single-line
       class="transition-swing"
@@ -13,8 +13,10 @@
       tile
       type="search"
       :loading="rootStore.loading"
-      @keyup.enter="type === 'all' ? null : router.push(localePath('/search'))"
-      @click:append="type === 'all' ? null : router.push(localePath('/search'))"
+      @keyup.enter="type === 'all' ? $router.push(localePath('/search')) : null"
+      @click:append="
+        type === 'all' ? $router.push(localePath('/search')) : null
+      "
     >
       <!--    :loading="$nuxt.loading || $store.state.loading" :class="{ 'mt-3':
       $store.state.scrolled }" -->

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

@@ -34,7 +34,7 @@
         ...
       </v-btn>
       <template v-else>
-        <v-btn
+        <!-- <v-btn
           :class="{ 'active-page': !!page.current }"
           tabindex="0"
           outlined
@@ -56,6 +56,25 @@
           @keyup.enter="updatePage(page.value)"
         >
           {{ page.value }}
+        </v-btn> -->
+
+        <v-btn
+          :class="['page-button', { 'active-page': page.current }]"
+          tabindex="0"
+          min-width="35"
+          height="35"
+          tile
+          width="35"
+          aria-current="page"
+          :aria-label="
+            page.current
+              ? `Current page, Page ${page.value}`
+              : `Goto Page ${page.value}`
+          "
+          @click="updatePage(page.value)"
+          @keyup.enter="updatePage(page.value)"
+        >
+          {{ page.value }}
         </v-btn>
       </template>
     </template>
@@ -190,5 +209,5 @@ const getGapPage = (index) => {
 </script>
 
 <style>
-.active-page{background-color:#000!important;color:#f5f5f5!important}
+.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}
 </style>

package/dist/runtime/components/misc/molecules/ChipContainer.vue

@@ -1,26 +1,16 @@
 <template>
-  <div class="d-flex flex-row flex-wrap" v-bind="attrs">
+  <span class="d-flex flex-row flex-wrap" v-bind="attrs">
     <div v-for="(tag, index) in items" :key="tag + index" class="">
-      <v-chip
-        :size="
-          ['small', 'small', 'small', 'default', 'large'][
-            ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'].indexOf(name || 'md')
-          ]
-        "
-        class="mr-2 mt-2"
-        variant="outlined"
-        label
-        >{{ tag }}</v-chip
-      >
+      <v-chip size="small" class="mr-2 mt-2" variant="outlined" label>{{
+        tag
+      }}</v-chip>
     </div>
-  </div>
+  </span>
 </template>
 
 <script setup>
 import { useAttrs } from "vue";
-import { useDisplay } from "vuetify";
 const attrs = useAttrs();
-const { name, md, xl, lg, smAndDown, mdAndUp } = useDisplay();
 const props = defineProps({
   items: {
     type: Array,

package/dist/runtime/components/misc/molecules/RelatedItems.vue

@@ -11,9 +11,6 @@
 </template>
 
 <script setup>
-import { useRootStore } from "../../../stores/root";
-import { capitalize } from "../../../composables/useUtils";
-const rootStore = useRootStore();
 const props = defineProps({
   type: {
     type: String,

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

@@ -17,7 +17,7 @@
         width="80px"
       />
     </v-col>
-    <v-col align-self="top" class="text-h5 dense px-2 paragraph">
+    <v-col align-self="start" class="text-h5 dense px-2 paragraph">
       <v-skeleton-loader v-if="rootStore.loading" type="heading" />
       <template v-else>
         <v-skeleton-loader
@@ -33,13 +33,24 @@
           <v-chip
             class="ma-2"
             style="background-color: white; color: black"
-            :size="mdAndUp ? 'default' : 'small'"
+            size="small"
+            variant="outlined"
           >
             {{ $t(eventCategory) }}
           </v-chip>
           <MiscMoleculesChipContainer :items="item.tags" size="small" />
         </template>
-        {{ item.name }}
+        <div
+          v-html="
+            $rootStore.search.length
+              ? highlightAndTruncate(
+                  300,
+                  item.name,
+                  $rootStore.search.split(' '),
+                )
+              : item.name
+          "
+        />
       </template>
     </v-col>
   </v-row>

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

@@ -15,7 +15,7 @@
               localePath({
                 name: 'news-slug',
                 params: { slug: item.slug[locale] },
-              })
+              }),
             )
           : null
       "
@@ -36,7 +36,7 @@
                 localePath({
                   name: 'news-slug',
                   params: { slug: item.slug[locale] },
-                })
+                }),
               )
             : null
         "
@@ -71,7 +71,7 @@
               localePath({
                 name: 'news-slug',
                 params: { slug: item.slug[locale] },
-              })
+              }),
             )
           "
         >

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

@@ -135,13 +135,7 @@
 <script setup>
 import { useDisplay } from "vuetify";
 import { useRootStore } from "../../stores/root";
-import {
-  useNuxtApp,
-  useI18n,
-  useLocalePath,
-  computed,
-  useRouter
-} from "#imports";
+import { useNuxtApp, useI18n, useLocalePath, computed } from "#imports";
 const { $stores } = useNuxtApp();
 const { locale } = useI18n();
 const localePath = useLocalePath();

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

@@ -10,7 +10,7 @@
           <v-chip
             v-for="(vintage, index2) in item.groups.vintage"
             :key="index2"
-            :size="mdAndUp ? 'default' : 'small'"
+            size="small"
             class="mt-3 mr-3"
             variant="outlined"
             tile
@@ -28,7 +28,7 @@
               !['vintage', '__typename'].includes(key))
           "
           class="mt-3 mr-3"
-          :size="mdAndUp ? 'default' : 'small'"
+          size="small"
           color="black"
           style="background-color: white; color: black"
           tile
@@ -45,7 +45,7 @@
           v-if="value && index < 3"
           class="mt-3 mr-3"
           color="black"
-          :size="mdAndUp ? 'default' : 'small'"
+          size="small"
           style="background-color: white; color: black"
           tile
           variant="outlined"

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

@@ -24,16 +24,36 @@
         width="80px"
       />
     </v-col>
-    <v-col align-self="top" class="text-h6 dense px-2">
+    <v-col align-self="start" class="text-h6 dense px-2">
       <v-skeleton-loader v-if="rootStore.loading" type="heading" />
       <div v-else class="d-flex text-h5 align-center">
-        {{ item.firstname + " " + item.lastname }}
+        <span
+          v-html="
+            rootStore.search.length
+              ? highlightAndTruncate(
+                  300,
+                  item.firstname + ' ' + item.lastname,
+                  $rootStore.search.split(' '),
+                )
+              : item.firstname + ' ' + item.lastname
+          "
+        />
         <v-spacer />
         <PeopleBadges :item="item" />
       </div>
-      <div class="text-body-1 font-weight-light paragraph">
-        {{ item.groups.vintage ? item.groups.vintage[0].theme : "" }}
-      </div>
+      <div
+        v-if="item.groups.vintage && item.groups.vintage[0].theme"
+        class="text-body-1 font-weight-light paragraph"
+        v-html="
+          rootStore.search.length
+            ? highlightAndTruncate(
+                300,
+                item.groups.vintage[0].theme,
+                $rootStore.search.split(' '),
+              )
+            : item.groups.vintage[0].theme
+        "
+      />
     </v-col>
   </v-row>
 </template>

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

@@ -26,12 +26,14 @@
     </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">
+      <span
+        v-else
+        v-html="
+          rootStore.search.length
+            ? highlightAndTruncate(300, item.name, $rootStore.search.split(' '))
+            : item.name
+        "
+      />
       <v-skeleton-loader
         v-if="rootStore.loading"
         :type="
@@ -40,10 +42,12 @@
           ]
         "
       />
+      <MiscMoleculesChipContainer :items="item.tags" size="small" />
 
-      <template v-else>
-        <MiscMoleculesChipContainer :items="item.tags" size="small" />
-      </template>
+      <MDC
+        class="text-caption font-weight-light paragraph"
+        :value="`${highlightAndTruncate(150, item.summary, rootStore.search.split(' '))}`"
+      />
     </v-col>
   </v-row>
 </template>

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

@@ -7,7 +7,7 @@
       $router.push(localePath('/activities/publications/' + item.slug[locale]))
     "
   >
-    <v-col v-if="mdAndUp" align-self="center" cols="1">
+    <v-col v-if="mdAndUp" cols="1" class="align-center">
       <MiscAtomsImageContainer
         cover
         :loading="$stores.people.loading"
@@ -19,54 +19,72 @@
         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>
-      <MDC class="text-caption" :value="item.summary" />
-    </v-col>
-
-    <v-col align-self="center">
-      <v-skeleton-loader
-        v-if="rootStore.loading"
-        :type="
-          ['chip', 'chip@2', 'chip@3', 'chip@4', 'chip@4', 'chip@4'][
-            ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'].indexOf(name || 'md')
-          ]
-        "
-      />
+    <v-col class="pl-2">
+      <div class="inline-flex flex-row flex-wrap">
+        <v-skeleton-loader
+          v-if="rootStore.loading"
+          :type="
+            ['chip', 'chip@2', 'chip@3', 'chip@4', 'chip@4', 'chip@4'][
+              ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'].indexOf(name || 'md')
+            ]
+          "
+        />
 
-      <template v-else>
-        <v-chip
-          v-if="eventCategory"
-          class="ma-2"
-          style="background-color: white; color: black"
-        >
-          {{ $t(eventCategory) }} </v-chip
-        ><v-chip
-          v-if="eventType"
-          c
-          class="ma-2"
-          style="background-color: white; color: black"
-        >
-          {{ $t(eventType) }}
-        </v-chip>
-        <MiscMoleculesChipContainer :items="item.tags" size="small" />
-      </template>
-    </v-col>
-  </v-row>
+        <template v-else>
+          <v-chip
+            v-if="eventCategory"
+            class="ma-2"
+            variant="outlined"
+            size="small"
+            style="background-color: white; color: black"
+          >
+            {{ $t(eventCategory) }} </v-chip
+          ><v-chip
+            v-if="eventType"
+            variant="outlined"
+            size="small"
+            class="mx-2"
+            style="background-color: white; color: black"
+          >
+            {{ $t(eventType) }}
+          </v-chip>
+          <MiscMoleculesChipContainer
+            v-if="item.tags && item.tags.length"
+            :items="item.tags"
+            size="small"
+          />
+        </template>
+        <v-skeleton-loader v-if="rootStore.loading" type="heading" />
+        <span
+          v-else
+          class="text-h5 dense paragraph"
+          v-html="
+            rootStore.search.length
+              ? highlightAndTruncate(
+                  300,
+                  item.name,
+                  $rootStore.search.split(' '),
+                )
+              : item.name
+          "
+        />
+        <MDC
+          class="text-body-1 font-weight-light paragraph"
+          :value="`${highlightAndTruncate(150, item.summary, rootStore.search.split(' '))}`"
+        />
+      </div> </v-col
+  ></v-row>
 </template>
 
 <script setup>
 import { useDisplay } from "vuetify";
 import { useRootStore } from "../../stores/root";
 import { computed, useNuxtApp, useI18n, useLocalePath } from "#imports";
+const rootStore = useRootStore();
 const { $stores } = useNuxtApp();
 const { name, mdAndUp } = useDisplay();
 const localePath = useLocalePath();
 const { locale } = useI18n();
-const rootStore = useRootStore();
 const props = defineProps({
   item: {
     type: Object,

package/dist/runtime/composables/useUtils.d.ts

@@ -10,3 +10,4 @@ export declare const getDetailedFormatedDate: (dateStr: string, locale: string)
 export declare const capitalize: (value: string, multiple?: boolean) => string;
 export declare const slugify: (str: string) => string;
 export declare const formatDateValue: (date: string | Date, locale: string) => string;
+export declare const highlightAndTruncate: (stop: number, text: string, query: string[]) => string;

package/dist/runtime/composables/useUtils.js

@@ -46,3 +46,47 @@ export const formatDateValue = (date, locale) => {
   const formattedDate = new Date(date);
   return formattedDate.toLocaleDateString(locale);
 };
+export const highlightAndTruncate = (stop, text, query) => {
+  console.log("highlightAndTruncate", stop, text, query);
+  try {
+    if (query?.length && query[0]?.length) {
+      if (text.length > stop) {
+        console.log("text bigger than stop, truncate", text.length, stop);
+        const indexes = query.map((element) => text.indexOf(element)).filter((index) => index !== -1);
+        if (indexes.length) {
+          const firstIndex = Math.min(...indexes);
+          if (firstIndex > stop + Math.max(...query.map((element) => element.length))) {
+            if (text.length - firstIndex < stop) {
+              text = "..." + text.substring(text.length - stop, text.length);
+            } else {
+              text = "..." + text.substring(firstIndex - 5, stop - 5 + firstIndex);
+            }
+          } else {
+            text = text.slice(0, stop) + "...";
+          }
+        } else {
+          text = text.slice(0, stop) + "...";
+        }
+        query.forEach((element) => {
+          const check = new RegExp(element, "gi");
+          text = text.replace(check, function(matchedText) {
+            return '<strong style="color: white;background-color: black;">' + matchedText + "</strong>";
+          });
+        });
+      } else {
+        query.forEach((element) => {
+          const check = new RegExp(element, "gi");
+          text = text.replace(check, function(matchedText) {
+            return '<strong style="color: white;background-color: black;">' + matchedText + "</strong>";
+          });
+        });
+      }
+    } else {
+      text = text.slice(0, stop) + "...";
+    }
+    return text;
+  } catch (error) {
+    console.log(error);
+    return text;
+  }
+};

package/dist/runtime/translations/en.json

@@ -53,6 +53,7 @@
           "label": "Category",
           "COLLOQUIUM": "Colloquium",
           "CONFERENCE": "Conference",
+          "CONFERENCE_CYCLE": "Conference cycle",
           "FELLOW_PRESENTATION": "Fellow's presentation",
           "FORUM": "Forum",
           "LECTURE": "Lecture",
@@ -126,8 +127,8 @@
           "ONGOING": "Ongoing",
           "PLANNED": "Planned"
         },
-        "discipline": {
-          "label": "Discipline"
+        "disciplines": {
+          "label": "Disciplines"
         }
       },
       "news": {

package/dist/runtime/translations/fr.json

@@ -51,6 +51,7 @@
           "label": "Catégorie",
           "COLLOQUIUM": "Colloque",
           "CONFERENCE": "Conférence",
+          "CONFERENCE_CYCLE": "Cycle de conférences",
           "FELLOW_PRESENTATION": "Présentation de Fellow",
           "FORUM": "Forum",
           "LECTURE": "Conférence",
@@ -95,7 +96,7 @@
           "label": "Passé"
         },
         "disciplines": {
-          "label": "Discipline"
+          "label": "Disciplines"
         },
         "status": {
           "label": "Statut",
@@ -185,7 +186,7 @@
           "label": "Année"
         },
         "disciplines": {
-          "label": "Discipline"
+          "label": "Disciplines"
         }
       },
       "projects": {

package/package.json

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