@paris-ias/list 1.0.4 → 1.0.5

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

@@ -0,0 +1,131 @@
+<template>
+  <!--  {{ name }} -->
+  <v-row justify="center">
+    <v-col cols="12" sm="11" md="8" lg="8" xl="6">
+      <v-row class="justify-center">
+        <v-col cols="12" sm="10" md="6" lg="4" xl="3" class="text-center">
+          <!--   PROJECT IMAGE -->
+          <v-skeleton-loader v-if="loading" height="100%" type="image" />
+
+          <MiscAtomsImageContainer
+            v-else
+            contain
+            :loading="loading"
+            :src="item.image.url ? item.image : '/default.png'"
+            :ratio="1 / 1"
+          />
+        </v-col>
+      </v-row>
+      <v-skeleton-loader
+        v-if="loading"
+        :type="
+          [
+            'avatar, paragraph',
+            'avatar, paragraph',
+            'heading, ossein,	avatar, text, ossein, chip@3',
+            'heading, ossein,	avatar, text, ossein, chip@3',
+            'heading, ossein, avatar, text, ossein, chip@3',
+            'heading',
+          ][['xs', 'sm', 'md', 'lg', 'xl', 'xxl'].indexOf(name || 'md')]
+        "
+      />
+
+      <div v-else class="d-flex align-center flex-column mt-12">
+        <div class="d-flex text-center text-wrap text-h3 text-black">
+          {{ item.name }}
+        </div>
+        <v-divider width="154px" class="mb-1 mt-6" />
+        <v-divider width="154px" />
+        <div
+          v-if="!loading"
+          class="d-flex text-center text-wrap text-h5 text-black mt-6"
+        >
+          <MDC v-if="item.subtitle" :value="item.subtitle" />
+        </div>
+        <MiscMoleculesChipContainer
+          v-if="item && item.tags"
+          :items="item.tags"
+          class="py-6 mt-4 align-self-center"
+        />
+        <v-btn-toggle variant="outlined">
+          <MiscAtomsShareMenu :item class="mt-6" />
+        </v-btn-toggle>
+        <v-btn
+          v-if="item.url"
+          class="my-6 d-flex"
+          variant="outlined"
+          :href="item.url"
+          target="_blank"
+          prepend-icon="mdi-link"
+        >
+          {{ $t("visit-this-project-website") }}
+        </v-btn>
+      </div>
+
+      <!-- DIVIDERS -->
+      <v-responsive class="mx-auto my-9" width="120">
+        <v-divider class="mb-1" />
+        <v-divider />
+      </v-responsive>
+
+      <!-- PROJECT DESCRIPTION -->
+      <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')
+          ]
+        "
+      />
+      <MDC
+        v-if="item.description"
+        :value="item.description"
+        class="mt-md-n2 mx-10 mx-md-0"
+      />
+    </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"
+const { $stores } = useNuxtApp()
+const { name } = useDisplay()
+const props = defineProps({
+  item: {
+    type: Object,
+    required: true,
+  },
+  loading: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
+})
+$stores.projects.loading = false
+</script>

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

@@ -0,0 +1,44 @@
+<template>
+  <v-sheet
+    :to="
+      localePath({
+        name: 'activities-publicationss-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-publicationss-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/publications/RowsItem.vue

@@ -0,0 +1,105 @@
+<template>
+  <v-col v-ripple cols="12" sm="6" md="4" lg="3" xl="2">
+    <MiscAtomsImageContainer
+      contain
+      :src="item.image.url ? item.image : '/default.png'"
+      :loading="$stores.publications.loading"
+      :ratio="1 / 1"
+      :title="item.name"
+      link="activities-publications-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/publications/' + item.slug[locale]))
+    "
+  >
+    <div>
+      <v-skeleton-loader
+        v-if="$stores.publications.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"
+          :value="item.summary"
+          class="text-wrap clamped-text"
+          :style="
+            '-webkit-line-clamp:' +
+            [5, 5, 5, 10, 12, 14][
+              ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'].indexOf(name || 'md')
+            ]
+          "
+        />
+        <v-btn
+          class="mt-4"
+          variant="outlined"
+          tile
+          :to="
+            localePath({
+              name: 'publications-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
+          v-if="item.url"
+          variant="outlined"
+          tile
+          target="_blank"
+          :href="item.url"
+          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-publications-website") }}</v-btn
+        >
+        ></template
+      >
+    </div>
+  </v-col>
+  <v-divider />
+</template>
+
+<script setup>
+import { useDisplay } from "vuetify"
+const { name } = useDisplay()
+const { locale } = useI18n()
+const { $stores } = useNuxtApp()
+const router = useRouter()
+const localePath = useLocalePath()
+const props = defineProps({
+  item: {
+    type: Object,
+    default: () => {
+      return {}
+    },
+    required: true,
+  },
+})
+</script>
+
+<style lang="scss"></style>

package/src/runtime/components/publications/View.vue

@@ -0,0 +1,139 @@
+<template>
+  <!--  {{ name }} -->
+  <v-row justify="center">
+    <v-col cols="12" sm="11" md="8" lg="8" xl="6">
+      <v-row class="justify-center">
+        <v-col cols="12" sm="10" md="6" lg="4" xl="3" class="text-center">
+          <!--   PUBLICATIONS IMAGE -->
+
+          <v-skeleton-loader v-if="loading" height="100%" type="image" />
+
+          <MiscAtomsImageContainer
+            v-else
+            contain
+            :loading="$stores.publications.loading"
+            :src="item.image.url ? item.image : '/default.png'"
+            :ratio="1 / 1"
+          />
+        </v-col>
+      </v-row>
+      <v-skeleton-loader
+        v-if="loading"
+        :type="
+          [
+            'avatar, paragraph',
+            'avatar, paragraph',
+            'heading, ossein,	avatar, text, ossein, chip@3',
+            'heading, ossein,	avatar, text, ossein, chip@3',
+            'heading, ossein, avatar, text, ossein, chip@3',
+            'heading',
+          ][['xs', 'sm', 'md', 'lg', 'xl', 'xxl'].indexOf(name || 'md')]
+        "
+      />
+
+      <div v-else class="d-flex align-center flex-column mt-12">
+        <div class="d-flex text-center text-wrap text-h3 text-black">
+          {{ item.name }}
+        </div>
+        <v-divider width="154px" class="mb-1 mt-6" />
+        <v-divider width="154px" />
+        <div class="overline my-2">
+          {{ formatDateValue(item.date, locale) }}
+        </div>
+        <MiscMoleculesChipContainer
+          v-if="item.tags && item.tags.length"
+          :items="item.tags"
+          class="py-6 mt-4 align-self-center"
+        />
+        <v-btn-toggle variant="outlined">
+          <MiscAtomsShareMenu :item class="mt-6" />
+          <v-btn
+            v-if="item.url"
+            class="my-6 d-flex"
+            variant="outlined"
+            :href="item.url"
+            target="_blank"
+            prepend-icon="mdi-link"
+          >
+            {{ $t("visit-this-publications-website") }}
+          </v-btn>
+        </v-btn-toggle>
+      </div>
+
+      <!-- DIVIDERS -->
+      <v-responsive class="mx-auto my-9" width="120">
+        <v-divider class="mb-1" />
+        <v-divider />
+      </v-responsive>
+
+      <!-- PUBLICATIONS DESCRIPTION -->
+      <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')
+          ]
+        "
+      />
+      <MDC
+        v-if="item.description"
+        :value="item.description"
+        class="mt-md-n2 mx-10 mx-md-0"
+      />
+    </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="!loading && item && item.related"
+    :related="item.related"
+  />
+</template>
+
+<script setup>
+import { useDisplay } from "vuetify"
+const { $stores } = useNuxtApp()
+const { name } = useDisplay()
+const { locale } = useI18n()
+const props = defineProps({
+  item: {
+    type: Object,
+    required: true,
+  },
+  loading: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
+})
+
+/* const { data: action } = await useAsyncData("actions", () =>
+  queryContent("/actions/" + locale.value)
+    .limit(1)
+    .find()
+) */
+$stores.publications.loading = false
+</script>

package/src/runtime/composables/useFetchItem.ts

@@ -0,0 +1,64 @@
+import { useRoute } from "vue-router"
+export const useFetchItem = () => {
+  const fetchItem = async <T>(payload: {
+    query: string
+    key: string
+  }): Promise<T> => {
+    try {
+      const { locale } = useI18n()
+      const route = useRoute()
+
+      const variables = {
+        itemId: route.params.slug?.toString().trim(),
+        appId: "iea",
+        lang: locale.value,
+      }
+      const { data, error } = await useAsyncQuery(payload.query, variables)
+      /*  console.log("variables: ", variables) */
+
+      if (error.value) {
+        console.error("GraphQL error:", error.value)
+        throw error.value
+      }
+
+      const item = data?.value[payload.key]
+      /*      console.log("item: ", item) */
+
+      if (!item) {
+        throw createError({
+          statusCode: 404,
+          message: "Item not found in response",
+        })
+      }
+      // Update the slug in the i18n params
+      // for people, the slug is the same in both languages
+      // for other items, the slug is different in each language
+      const setI18nParams = useSetI18nParams()
+      if (!route.name.includes("people")) {
+        /*  console.log("update params") */
+        setI18nParams({
+          en: { slug: item.slug.en },
+          fr: { slug: item.slug.fr },
+        })
+      } else {
+        // for people, the slug is the same in both languages
+        setI18nParams({
+          en: { slug: item.slug },
+          fr: { slug: item.slug },
+        })
+      }
+      return item as T
+    } catch (error) {
+      console.error("Error fetching item:", error)
+      throw createError({
+        statusCode: 404,
+        message: "Item not found",
+        cause: error,
+      })
+    }
+  }
+
+  return {
+    fetchItem,
+  }
+}

package/src/runtime/composables/useIcons.ts

@@ -0,0 +1,30 @@
+export default function getFileIcon(fileName: string): string {
+  console.log("fileName: ", fileName)
+  const fileExtension = fileName.split(".").pop()
+  console.log("fileExtension: ", fileExtension)
+  switch (fileExtension) {
+    case "pdf":
+      return "mdi-file-pdf-box"
+    case "doc":
+    case "docx":
+      return "mdi-file-word"
+    case "xls":
+    case "xlsx":
+      return "mdi-file-excel"
+    case "ppt":
+    case "pptx":
+      return "mdi-file-powerpoint"
+    case "jpg":
+    case "jpeg":
+    case "png":
+    case "gif":
+      return "mdi-file-image"
+    case "zip":
+    case "rar":
+      return "mdi-folder-zip"
+    case "txt":
+      return "mdi-file-document"
+    default:
+      return "mdi-file"
+  }
+}

package/src/runtime/composables/useUtils.ts

@@ -0,0 +1,75 @@
+export const formatDate = (dateStr: string, locale: string): string => {
+  const date = new Date(dateStr)
+  return date.toLocaleDateString(locale, {
+    weekday: "long",
+    year: "numeric",
+    month: "long",
+    day: "numeric",
+  })
+}
+
+export const getLocalizedDate = (dateIso: string): string => {
+  const { $i18n } = useNuxtApp()
+  return new Date(dateIso).toLocaleDateString(
+    $i18n.localeProperties.value.language,
+    {
+      weekday: "long",
+      year: "numeric",
+      month: "long",
+      day: "numeric",
+    }
+  )
+}
+
+export const getDetailedFormatedDate = (
+  dateStr: string,
+  locale: string
+): {
+  day: number
+  month: string
+  year: number
+  hours: number
+  minutes: number
+} => {
+  const date = new Date(dateStr)
+
+  return {
+    day: date.getDate(),
+    month: date.toLocaleString(locale, { month: "long" }),
+    year: date.getFullYear(),
+    hours: date.getUTCHours(),
+    minutes: date.getMinutes(),
+  }
+}
+
+export const capitalize = (value: string, multiple?: boolean) =>
+  multiple
+    ? value.replace(/(?:^|[\s'-])\S/g, (a) => a.toUpperCase())
+    : value && value.charAt(0).toUpperCase() + value.slice(1)
+
+export const slugify = (str: string) => {
+  str = str.replace(/^\s+|\s+$/g, "").trim() // trim
+  str = str.toLowerCase()
+
+  // remove accents, swap ñ for n, etc
+  const from = "àáäâèéëêìíïîòóöôùúüûñç·/_,:;"
+  const to = "aaaaeeeeiiiioooouuuunc------"
+  for (let i = 0, l = from.length; i < l; i++) {
+    str = str.replace(new RegExp(from.charAt(i), "g"), to.charAt(i))
+  }
+
+  str = str
+    .replace(/[^a-z0-9 -]/g, "") // remove invalid chars
+    .replace(/\s+/g, "-") // collapse whitespace and replace by -
+    .replace(/-+/g, "-") // collapse dashes
+
+  return str
+}
+
+export const formatDateValue = (
+  date: string | Date,
+  locale: string
+): string => {
+  const formattedDate = new Date(date)
+  return formattedDate.toLocaleDateString(locale)
+}

package/src/runtime/graphql/queries/buildFiltersValues.gql

@@ -0,0 +1,35 @@
+query buildFiltersValues {
+  buildFiltersValues {
+    events {
+      disciplines
+      fellowships
+      tags
+      category
+    }
+    fellowships {
+      affiliations
+      disciplines
+      tags
+    }
+    news {
+      category
+      tags
+    }
+    people {
+      disciplines
+      fellowships
+      members
+      vintage
+    }
+    projects {
+      tags
+    }
+    publications {
+      affiliations
+      disciplines
+      eventCategory
+      tags
+      type
+    }
+  }
+}