@paris-ias/list 1.0.3 → 1.0.5

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

@@ -0,0 +1,37 @@
+<template>
+  <v-row
+    v-ripple
+    no-gutters
+    class="cursor-pointer highlight-on-hover"
+    @click="$router.push(localePath('/people/' + item.slug))"
+  >
+    <v-col align-self="center" class="text-h6 pl-2">
+      <v-skeleton-loader
+        v-if="rootStore.loading || $stores[type].loading"
+        type="heading"
+      />
+      <template v-else>
+        {{ item.firstname + " " + item.lastname }}
+      </template>
+    </v-col>
+    <v-col align-self="center">
+      <PeopleGroupBadges :item="item" />
+    </v-col>
+  </v-row>
+</template>
+<script setup>
+import { useRootStore } from "../../stores/root"
+const { $stores } = useNuxtApp()
+const localePath = useLocalePath()
+const rootStore = useRootStore()
+const props = defineProps({
+  item: {
+    type: Object,
+    required: true,
+  },
+  index: {
+    type: Number,
+    required: true,
+  },
+})
+</script>

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

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

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

@@ -0,0 +1,56 @@
+<template>
+  <div>
+    <v-skeleton-loader
+      v-if="rootStore.loading || $stores.people.loading"
+      type="chip"
+    />
+
+    <template
+      v-for="(value, key, index) in item.groups"
+      v-else
+      :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 &&
+          ((!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
+    >
+  </div>
+</template>
+
+<script setup>
+import { useRootStore } from "../../stores/root"
+const rootStore = useRootStore()
+const { $stores } = useNuxtApp()
+const props = defineProps({
+  item: {
+    type: Object,
+    required: true,
+  },
+})
+</script>
+
+<style lang="scss" scoped></style>

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

@@ -0,0 +1,41 @@
+<template>
+  <v-sheet
+    :to="
+      localePath({
+        name: 'people-slug',
+        params: { slug: slugify(item.firstname + item.lastname) }, //TODO à modifier
+      })
+    "
+  >
+    <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"
+const localePath = useLocalePath()
+const rootStore = useRootStore()
+const { lgAndUp } = useDisplay()
+
+const props = defineProps({ item: { type: Object, required: true } })
+</script>

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

@@ -0,0 +1,95 @@
+<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" />
+
+        <MDC
+          v-if="item.biography"
+          :value="item.biography"
+          class="text-wrap clamped-text text-black"
+          :style="'-webkit-line-clamp:' + lineClamp"
+        />
+      </div>
+    </v-col>
+  </v-row>
+</template>
+<script setup>
+import { useDisplay } from "vuetify"
+
+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/src/runtime/components/people/View.vue

@@ -0,0 +1,162 @@
+<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>
+        <MDC
+          v-if="item.biography"
+          :value="item.biography"
+          class="my-6 flex-wrap"
+        />
+      </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"
+          >
+            {{ position.role + " " + (position.department || "") }}
+            <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"
+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/src/runtime/components/projects/ExpandedItem.vue

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

package/src/runtime/components/projects/RelatedItem.vue

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

package/src/runtime/components/projects/RowsItem.vue

@@ -0,0 +1,106 @@
+<template>
+  <v-row class="highlight-on-hover pa-3">
+    <v-col v-ripple cols="12" sm="6" md="4" lg="3" xl="2">
+      <MiscAtomsImageContainer
+        contain
+        :src="item.image"
+        :loading="$stores.projects.loading"
+        :ratio="1 / 1"
+        :title="item.name"
+        link="activities-projects-slug"
+        :slug="item.slug[locale]"
+      />
+    </v-col>
+    <v-col
+      v-ripple
+      cols="12"
+      sm="6"
+      md="8"
+      lg="9"
+      xl="10"
+      class="px-6 cursor-pointer"
+      @click="
+        router.push(localePath('/activities/projects/' + item.slug[locale]))
+      "
+    >
+      <v-skeleton-loader
+        v-if="rootStore.loading"
+        type="heading,ossein,text@8,ossein,button,button"
+      />
+
+      <template v-else>
+        <div class="text-h5 text-sm-h3 text-md-h4 text-md-h4 my-6">
+          {{ item.name }}
+        </div>
+
+        <MDC
+          v-if="item.summary"
+          class="mt-n3 text-wrap clamped-text"
+          :style="
+            '-webkit-line-clamp:' +
+            [5, 5, 4, 8, 10][
+              ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'].indexOf(name || 'md')
+            ]
+          "
+          :value="item.summary"
+        />
+
+        <v-btn
+          class="mt-4"
+          variant="outlined"
+          tile
+          :to="
+            localePath({
+              name: 'project-slug',
+              params: { slug: item.slug[locale] },
+            })
+          "
+          :size="
+            ['small', 'small', 'small', 'default', 'default', 'large'][
+              ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'].indexOf(name || 'md')
+            ]
+          "
+        >
+          {{ $t("read-more") }}
+        </v-btn>
+        <v-btn
+          variant="outlined"
+          tile
+          class="mt-4 ml-4"
+          prepend-icon="mdi-web"
+          :size="
+            ['small', 'small', 'small', 'default', 'default', 'large'][
+              ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'].indexOf(name || 'md')
+            ]
+          "
+          >{{ $t("visit-the-project-website") }}</v-btn
+        >
+      </template>
+    </v-col></v-row
+  >
+  <v-divider />
+</template>
+
+<script setup>
+import { useRootStore } from "../../stores/root"
+import { useDisplay } from "vuetify"
+const { locale } = useI18n()
+
+const { name } = useDisplay()
+
+const rootStore = useRootStore()
+const router = useRouter()
+const localePath = useLocalePath()
+
+const props = defineProps({
+  item: {
+    type: Object,
+    default: () => {
+      return {}
+    },
+    required: true,
+  },
+})
+</script>
+
+<style lang="scss"></style>