@paris-ias/list 1.0.112 → 1.0.113

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

@@ -0,0 +1,174 @@
+<template>
+  <v-row>
+    <v-col
+      v-if="smAndDown"
+      cols="12"
+      class="text-wrap text-h4 text-black mx-sm-6"
+    >
+      <v-skeleton-loader
+        v-if="loading"
+        :type="['heading', 'heading'][['xs', 'sm'].indexOf(name || 'sm')]"
+      />
+      <template v-else>
+        <v-chip v-if="item && item.category && item.name" class="mb-4">
+          {{ $t("list.filters.news.category." + item.category) }}
+        </v-chip>
+        <br />
+        {{ item.name }}
+      </template>
+    </v-col>
+    <v-col cols="12" md="4" class="pb-0">
+      <v-skeleton-loader v-if="loading" height="100%" type="image" />
+
+      <div v-else class="mx-sm-6">
+        <MiscAtomsImageContainer
+          v-if="item && item.image"
+          cover
+          :loading="loading"
+          :src="item.image.url ? item.image : '/default.png'"
+          :ratio="1 / 1"
+        />
+      </div>
+    </v-col>
+
+    <v-col cols="12" md="8" class="pl-0 pb-0 d-flex flex-column justify-md-end">
+      <v-skeleton-loader
+        v-if="loading"
+        :type="
+          [
+            'text, chip@4',
+            'text, chip@4',
+            'heading, text',
+            'heading, text',
+            'heading, text',
+            'heading',
+          ][['xs', 'sm', 'md', 'lg', 'xl', 'xxl'].indexOf(name || 'md')]
+        "
+      />
+
+      <div v-else class="mx-4 mx-md-0 justify-md-end">
+        <v-chip v-if="item && item.category && mdAndUp" class="mb-4">
+          {{ $t("list.filters.news.category." + item.category) }}
+        </v-chip>
+        <div
+          v-if="item && item.name && mdAndUp"
+          class="d-flex text-wrap text-h4 text-black"
+        >
+          {{ item.name }}
+        </div>
+
+        <div
+          v-if="item.description && mdAndUp"
+          class="mt-md-n2 mx-4 mx-sm-8 mx-md-0 d-flex text-wrap text-h6 text-black mt-3"
+        >
+          <MDC v-if="item.description" :value="item.description" class="" />
+        </div>
+        <div
+          class="d-flex flex-column flex-md-row align-md-center mt-6 mx-sm-4 mx-md-6"
+        >
+          <div class="ml-md-n6">
+            <div
+              v-if="item && item.authors && item.authors[0]"
+              class="text-body-2 text-lg-body-1 text-black"
+            >
+              <!--    TODO use a proper & conditional formatting of names (depending on number of authors) -->
+              {{
+                $t("by-author", [
+                  item.authors[0].firstname + " " + item.authors[0].firstname,
+                ])
+              }}
+            </div>
+            <div v-if="smAndDown" class="">
+              <MiscMoleculesChipContainer
+                v-if="item && item.tags"
+                :items="item.tags"
+                class="mt-4"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </v-col>
+  </v-row>
+
+  <v-row class="mt-12">
+    <v-col cols="12" md="4" :order="mdAndUp ? 'first' : 'last'" class="pt-0">
+      <v-skeleton-loader
+        v-if="loading"
+        :type="
+          ['chip@2', 'chip@3', 'chip@4', 'chip@5'][
+            ['md', 'lg', 'xl', 'xxl'].indexOf(name || 'md')
+          ]
+        "
+      />
+      <template v-else>
+        <div v-if="mdAndUp" class="mt-2 mx-sm-6">
+          <MiscMoleculesChipContainer
+            v-if="item && item.tags"
+            :items="item.tags"
+            class="mt-4"
+          />
+        </div>
+      </template>
+    </v-col>
+    <v-col cols="12" md="8" class="pl-0 pt-0">
+      <v-skeleton-loader
+        v-if="loading"
+        :type="
+          ['text@50', 'text@50', 'text@50', 'text@50', 'text@50', 'text@50'][
+            ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'].indexOf(name || 'md')
+          ]
+        "
+      />
+      <div v-if="item.description" class="mt-md-n2 mx-4 mx-sm-8 mx-md-0">
+        <MDC :value="item.description" />
+      </div>
+    </v-col>
+  </v-row>
+
+  <!-- DIVIDERS -->
+  <v-responsive class="mx-auto my-9" width="120">
+    <v-divider class="mb-1" />
+    <v-divider />
+  </v-responsive>
+  <MiscAtomsSlidingCarousel
+    v-if="item && item.gallery && item.gallery.length"
+    ref="MiscAtomsImage"
+    key="MiscAtomsImage"
+    :items="item.gallery"
+    type="MiscAtomsImage"
+    :loading="false"
+    :more="false"
+  >
+    <div :class="mdAndUp ? 'text-h5' : 'text-h6'">
+      {{ $t("gallery") }}
+    </div>
+  </MiscAtomsSlidingCarousel>
+  <!-- DIVIDERS -->
+  <v-responsive class="mx-auto my-9" width="120">
+    <v-divider class="mb-1" />
+    <v-divider />
+  </v-responsive>
+
+  <MiscMoleculesRelated v-if="item && item.related" :related="item.related" />
+</template>
+
+<script setup>
+import { useDisplay } from "vuetify";
+import { useNuxtApp } from "#imports";
+const { $stores } = useNuxtApp();
+const { name, mdAndUp, smAndDown } = useDisplay();
+const props = defineProps({
+  item: {
+    type: Object,
+    required: true
+  },
+  loading: {
+    type: Boolean,
+    required: false,
+    default: false
+  }
+});
+const today = /* @__PURE__ */ new Date();
+$stores.news.loading = false;
+</script>

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

@@ -0,0 +1,60 @@
+<template>
+  <v-row
+    v-ripple
+    no-gutters
+    class="cursor-pointer highlight-on-hover"
+    @click="
+      $router.push(
+        localePath({
+          name: 'people-slug',
+          params: { slug: item.slug },
+        }),
+      )
+    "
+  >
+    <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-h6 dense pl-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">
+        {{ item.groups.vintage ? item.groups.vintage[0].theme : "" }}
+      </div>
+    </v-col>
+    <v-col align-self="center" cols="auto">
+      <PeopleGroupBadges :item="item" />
+    </v-col>
+  </v-row>
+</template>
+
+<script setup>
+import { useRootStore } from "../../stores/root";
+import { useNuxtApp, useLocalePath } from "#imports";
+import { useDisplay } from "vuetify";
+const { mdAndUp } = useDisplay();
+const { $stores } = useNuxtApp();
+const localePath = useLocalePath();
+const rootStore = useRootStore();
+const props = defineProps({
+  item: {
+    type: Object,
+    required: true
+  },
+  index: {
+    type: Number,
+    required: true
+  }
+});
+</script>

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

@@ -0,0 +1,14 @@
+<template>
+  <div>
+    {{ item.name }}
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  item: {
+    type: Object,
+    required: true
+  }
+});
+</script>

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

@@ -0,0 +1,54 @@
+<template>
+  <div>
+    <v-skeleton-loader
+      v-if="rootStore.loading || $stores.people.loading"
+      type="chip"
+    />
+    <template v-else-if="item.groups">
+      <template v-for="(value, key, index) in item.groups" :key="key + index">
+        <template v-if="value && key === 'vintage'">
+          <v-chip
+            v-for="(vintage, index2) in item.groups.vintage"
+            :key="index2"
+            class="mt-3 mr-3"
+            variant="outlined"
+            tile
+            style="background-color: white; color: black"
+          >
+            {{ $t("vintage", [vintage.year]) }}
+          </v-chip>
+        </template>
+
+        <v-chip
+          v-if="
+            value &&
+            key !== 'fellows' &&
+            ((!item.groups.vintage && key === 'vintage') ||
+              !['vintage', '__typename'].includes(key))
+          "
+          class="mt-3 mr-3"
+          color="black"
+          style="background-color: white; color: black"
+          tile
+          variant="outlined"
+        >
+          {{ $t("list.filters.people.groups." + key) }}
+        </v-chip>
+      </template>
+    </template>
+  </div>
+</template>
+
+<script setup>
+import { useRootStore } from "../../stores/root";
+import { useNuxtApp } from "#imports";
+const rootStore = useRootStore();
+const { $stores } = useNuxtApp();
+const props = defineProps({
+  item: {
+    type: Object,
+    required: true,
+    default: () => ({})
+  }
+});
+</script>

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

@@ -0,0 +1,41 @@
+<template>
+  <v-sheet
+    :to="
+      localePath({
+        name: 'people-slug',
+        params: { slug: item.slug },
+      })
+    "
+  >
+    <v-row>
+      <v-col v-if="lgAndUp" cols="3">
+        <MiscAtomsImageContainer
+          cover
+          :loading="rootStore.loading"
+          :src="item.image"
+          :ratio="1 / 1"
+          :link="item.firstname + item.lastname"
+          :name="people - slug"
+        />
+      </v-col>
+      <v-col cols="12" lg="9">
+        <v-skeleton-loader v-if="rootStore.loading" type="heading" />
+        <template v-else>
+          <div class="text-h6">
+            {{ item.firstname + " " + item.lastname }}
+          </div>
+        </template>
+      </v-col>
+    </v-row>
+  </v-sheet>
+</template>
+
+<script setup>
+import { useDisplay } from "vuetify";
+import { useRootStore } from "../../stores/root";
+import { useLocalePath } from "#imports";
+const localePath = useLocalePath();
+const rootStore = useRootStore();
+const { lgAndUp } = useDisplay();
+const props = defineProps({ item: { type: Object, required: true } });
+</script>

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

@@ -0,0 +1,93 @@
+<template>
+  <v-divider v-if="index > 0" />
+  <v-row
+    class="my-6 ml-md-1 px-3 px-md-0 highlight-on-hover"
+    @click="
+      $router.push(
+        localePath({
+          name: 'people-slug',
+          params: { slug: item.slug },
+        })
+      )
+    "
+  >
+    <v-col v-if="mdAndUp" cols="12" md="3">
+      <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"
+      />
+    </v-col>
+
+    <v-col cols="12" md="8">
+      <v-skeleton-loader
+        v-if="$stores.people.loading"
+        :type="
+          [
+            'heading, subtitle, text@5',
+            'heading, subtitle, text@5',
+            'heading, subtitle, text@3',
+            'heading, subtitle, text@6',
+            'heading, subtitle, text@9',
+            'heading, subtitle, text@9',
+          ][['xs', 'sm', 'md', 'lg', 'xl', 'xxl'].indexOf(name || 'md')]
+        "
+      />
+
+      <div v-else class="ml-md-8">
+        <NuxtLink
+          :to="
+            localePath({
+              name: 'people-slug',
+              params: { slug: item.slug },
+            })
+          "
+          class="text-wrap text-h5 text-md-h4 text-black"
+        >
+          {{ item.firstname + " " + item.lastname }}
+        </NuxtLink>
+        <MiscAtomsSocials v-if="item.socials" :socials="item.socials" />
+        <PeopleGroupBadges :item="item" />
+        <div
+          v-if="item.biography && item.biography.length > 0"
+          class="text-wrap clamped-text text-black"
+          :style="'-webkit-line-clamp:' + lineClamp"
+        >
+          <MDC :value="item.biography" />
+        </div>
+
+        <div v-else class="text-body-2">
+          {{ $t("no-biography") }}
+        </div>
+      </div>
+    </v-col>
+  </v-row>
+</template>
+
+<script setup>
+import { useDisplay } from "vuetify";
+import { useLocalePath, computed } from "#imports";
+const { name, mdAndUp } = useDisplay();
+const localePath = useLocalePath();
+const props = defineProps({
+  item: {
+    type: Object,
+    required: true
+  },
+  index: {
+    type: Number,
+    required: true
+  }
+});
+const lineClamp = computed(() => {
+  let base = [5, 6, 3, 6, 8, 10][["xs", "sm", "md", "lg", "xl", "xxl"].indexOf(name.value || "md")];
+  if (props.item?.socials && Object.keys(props.item.socials).length > 0) {
+    base = base - [0, 0, 1, 1, 1, 2][["xs", "sm", "md", "lg", "xl", "xxl"].indexOf(name.value || "md")];
+  }
+  return base;
+});
+</script>

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

@@ -0,0 +1,172 @@
+<template>
+  <v-row justify="center">
+    <v-col cols="12" sm="11" md="8" lg="8" xl="6">
+      <v-row no-gutters class="justify-center">
+        <v-col cols="12" sm="10" md="6" class="text-center">
+          <!--   PEOPLE IMAGE -->
+          <MiscAtomsImageContainer
+            v-if="mdAndUp && item && item.image"
+            cover
+            :loading="loading"
+            :src="item.image"
+            :ratio="1 / 1"
+            :width="
+              [200, 250, 250, 300][
+                ['md', 'lg', 'xl', 'xxl'].indexOf(name || 'md')
+              ]
+            "
+          />
+        </v-col>
+        <v-col cols="12" class="text-center">
+          <!-- FIRSTNAME LASTNAME -->
+          <v-skeleton-loader
+            v-if="loading"
+            class="mx-auto"
+            :max-width="
+              ['300', '400', '340', '400', '600', '600'][
+                ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'].indexOf(name || 'md')
+              ]
+            "
+            :type="
+              [
+                'heading@2, ossein, avatar@4, ossein, chip@3',
+                'heading, ossein, avatar@6, ossein, chip@4',
+                'heading, ossein, avatar@5, ossein, chip@3',
+                'heading, ossein, avatar@6, ossein, chip@4',
+                'heading, ossein, avatar@9, ossein, chip@6',
+                'heading, ossein, avatar@9, ossein, chip@6',
+              ][['xs', 'sm', 'md', 'lg', 'xl', 'xxl'].indexOf(name || 'md')]
+            "
+          />
+
+          <template v-else>
+            <div
+              v-if="item && item.firstname && item.lastname"
+              class="my-8 text-h3 align-self-center text-wrap"
+            >
+              {{ item.firstname + " " + item.lastname
+              }}<!--  TODO : call a composable to format people names (multiple, initials, capped & al. ) -->
+            </div>
+            <!-- SOCIALS -->
+            <div class="text-center">
+              <MiscAtomsSocials
+                v-if="item && item.socials"
+                :socials="item.socials"
+              />
+            </div>
+            <!-- GROUPS -->
+            <div class="mt-6 align-self-center">
+              <PeopleGroupBadges v-if="item && item.groups" :item="item" />
+            </div>
+          </template>
+        </v-col>
+      </v-row>
+
+      <!-- DIVIDERS -->
+      <v-responsive class="mx-auto my-6" width="120">
+        <v-divider class="mb-1" />
+        <v-divider />
+      </v-responsive>
+
+      <div class="text-overline mt-6">
+        <v-skeleton-loader v-if="loading" width="200" type="heading" />
+        <div v-else>
+          {{ $t("biography") }}
+        </div>
+      </div>
+
+      <v-skeleton-loader
+        v-if="loading"
+        :type="
+          ['text@16', 'text@16', 'text@16', 'text@12', 'text@12', 'text@12'][
+            ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'].indexOf(name || 'md')
+          ]
+        "
+      />
+      <template v-else class="my-6 flex-wrap">
+        <MDC
+          v-if="item.biography && item.biography.length > 0"
+          :value="item.biography"
+        />
+        <div v-else class="text-body-2">
+          {{ $t("no-biography") }}
+        </div>
+      </template>
+
+      <!-- DIVIDERS -->
+      <v-responsive class="mx-auto my-9" width="120">
+        <v-divider class="mb-1" />
+        <v-divider />
+      </v-responsive>
+
+      <!-- POSITIONS AND AFFILIATIONS -->
+      <div class="text-overline mt-6">
+        <v-skeleton-loader v-if="loading" width="200" type="heading" />
+        <div v-else>
+          {{ $t("positions-and-affiliations") }}
+        </div>
+      </div>
+
+      <!-- BIOGRAPHY -->
+      <v-skeleton-loader v-if="loading" type="subtitle, text@2" width="300" />
+
+      <v-card
+        v-for="record in item.affiliations"
+        v-else-if="item && item.affiliations"
+        :key="record.affiliation"
+        flat
+      >
+        <v-card-item class="px-0">
+          <v-card-title class="text-wrap">
+            {{ record.affiliation.name }}
+          </v-card-title>
+          <div
+            v-for="(position, index) in record.positions"
+            :key="position.role + index"
+            class="text-body-2"
+          >
+            <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 -->
+              -
+              {{
+                $t("from {0} to {1}", [
+                  formatDate(position.start, locale),
+                  (position.stop && formatDate(position.stop, locale)) ||
+                    $t("present"),
+                ])
+              }}
+            </span>
+          </div>
+        </v-card-item>
+      </v-card>
+    </v-col>
+  </v-row>
+
+  <!-- DIVIDERS -->
+  <v-responsive class="mx-auto my-9" width="120">
+    <v-divider class="mb-1" />
+    <v-divider />
+  </v-responsive>
+  <MiscMoleculesRelated v-if="item && item.related" :related="item.related" />
+</template>
+
+<script setup>
+import { useDisplay } from "vuetify";
+import { useNuxtApp, useI18n } from "#imports";
+const { locale } = useI18n();
+const { $stores } = useNuxtApp();
+const { name, mdAndUp } = useDisplay();
+const props = defineProps({
+  item: { type: Object, required: true },
+  loading: { type: Boolean, default: false }
+});
+$stores.people.loading = false;
+</script>

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

@@ -0,0 +1,77 @@
+<template>
+  <v-row
+    v-ripple
+    no-gutters
+    class="cursor-pointer highlight-on-hover"
+    @click="
+      $router.push(
+        localePath({
+          name: 'activities-projects-slug',
+          params: { slug: item.slug[locale] },
+        }),
+      )
+    "
+  >
+    <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 }}
+      </template>
+    </v-col>
+
+    <v-col align-self="center" cols="5" class="dense">
+      <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>
+        <MiscMoleculesChipContainer :items="item.tags" size="small" />
+      </template>
+    </v-col>
+  </v-row>
+</template>
+
+<script setup>
+import { useDisplay } from "vuetify";
+import { useRootStore } from "../../stores/root";
+import { computed, useNuxtApp, useI18n, useLocalePath } from "#imports";
+const { $stores } = useNuxtApp();
+const { name, mdAndUp } = useDisplay();
+const localePath = useLocalePath();
+const { locale } = useI18n();
+const rootStore = useRootStore();
+const props = defineProps({
+  item: {
+    type: Object,
+    required: true
+  },
+  index: {
+    type: Number,
+    required: true
+  }
+});
+const eventCategory = computed(() => {
+  if (props.item.category) {
+    return "list.filters.news.category." + props.item.category;
+  } else {
+    return "list.filters.news.category.others";
+  }
+});
+</script>