@paris-ias/list 1.0.3 → 1.0.5

package/example/.env.example

@@ -0,0 +1,3 @@
+# GraphQL Configuration
+GRAPHQL_ENDPOINT=your_graphql_endpoint_here
+GRAPHQL_API_KEY=your_graphql_api_key_here 

package/example/nuxt.config.ts

@@ -0,0 +1,19 @@
+export default defineNuxtConfig({
+  modules: ["@paris-ias/list"],
+  list: {
+    modules: [
+      "events",
+      "news",
+      "people",
+      "projects",
+      "fellowships",
+      "publications",
+    ],
+  },
+  runtimeConfig: {
+    public: {
+      graphqlEndpoint: process.env.GRAPHQL_ENDPOINT,
+      graphqlApiKey: process.env.GRAPHQL_API_KEY,
+    },
+  },
+})

package/example/pages/index.vue

@@ -0,0 +1,27 @@
+<template>
+  <div>
+    <h1>List Module Example</h1>
+
+    <h2>Events</h2>
+    <ListOrganismsList type="events" />
+
+    <h2>News</h2>
+    <ListOrganismsList type="news" />
+
+    <h2>People</h2>
+    <ListOrganismsList type="people" />
+
+    <h2>Publications</h2>
+    <ListOrganismsList type="publications" />
+
+    <h2>Fellowships</h2>
+    <ListOrganismsList type="fellowships" />
+
+    <h2>Projects</h2>
+    <ListOrganismsList type="projects" />
+  </div>
+</template>
+
+<script setup lang="ts">
+// The components are automatically imported by the module
+</script>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@paris-ias/list",
-  "version": "1.0.3",
+  "version": "1.0.5",
   "private": false,
   "type": "module",
   "main": "./dist/module.mjs",
@@ -13,8 +13,8 @@
     }
   },
   "files": [
-    "dist",
-    "templates"
+    "example",
+    "src"
   ],
   "scripts": {
     "dev": "nuxt dev",

package/src/module.ts

@@ -0,0 +1,119 @@
+import {
+  defineNuxtModule,
+  createResolver,
+  addComponentsDir,
+  addImportsDir,
+  addPlugin,
+} from "@nuxt/kit"
+import { fileURLToPath } from "node:url"
+
+export interface ModuleOptions {
+  modules: string[]
+}
+
+export default defineNuxtModule<ModuleOptions>({
+  meta: {
+    name: "@paris-ias/list",
+    configKey: "list",
+    compatibility: {
+      nuxt: "^3.0.0",
+    },
+  },
+  defaults: {
+    modules: [],
+  },
+  setup(options, nuxt) {
+    const { resolve } = createResolver(import.meta.url)
+    const runtimeDir = fileURLToPath(new URL("./runtime", import.meta.url))
+
+    // Add components
+    addComponentsDir({
+      path: resolve(runtimeDir, "components"),
+      global: true,
+    })
+    // Add store
+    nuxt.hook("modules:before", () => {
+      nuxt.options.build.transpile.push(resolve(runtimeDir, "stores"))
+    })
+    // Add composables
+    addImportsDir(resolve(runtimeDir, "composables"))
+
+    // Add graphQL queries
+    addImportsDir(resolve(runtimeDir, "graphql"))
+
+    // Add plugin
+    addPlugin(resolve(runtimeDir, "plugins/pinia.ts"))
+    addPlugin(resolve(runtimeDir, "plugins/vuetify.js"))
+
+    // Add translations
+
+    nuxt.hook("i18n:registerModule", (register) => {
+      register({
+        // langDir path needs to be resolved
+        langDir: resolve(runtimeDir, "translations"),
+        locales: [
+          {
+            code: "en",
+            file: "en.json",
+          },
+          {
+            code: "fr",
+            file: "fr.json",
+          },
+        ],
+      })
+    })
+    nuxt.options.runtimeConfig.public.list = options
+
+    // Add i18n configuration
+    nuxt.options.i18n = {
+      ...nuxt.options.i18n,
+      langDir: resolve(runtimeDir, "translations"),
+      lazy: true,
+    }
+
+    // Add Apollo configuration
+    nuxt.options.apollo = {
+      ...nuxt.options.apollo,
+      clients: {
+        default: {
+          httpEndpoint: process.env.GRAPHQL_ENDPOINT || "",
+          httpLinkOptions: {
+            headers: {
+              "x-api-key": process.env.GRAPHQL_API_KEY || "",
+            },
+          },
+        },
+      },
+    }
+
+    // Add Vuetify configuration
+    nuxt.options.build.transpile = [
+      ...(nuxt.options.build.transpile || []),
+      "vuetify",
+    ]
+    nuxt.options.css = [
+      ...(nuxt.options.css || []),
+      "vuetify/lib/styles/main.sass",
+    ]
+
+    // Add Vite configuration
+    nuxt.options.vite = {
+      ...nuxt.options.vite,
+      define: {
+        ...nuxt.options.vite?.define,
+        "process.env.DEBUG": false,
+      },
+      css: {
+        preprocessorOptions: {
+          scss: {
+            api: "modern-compiler",
+          },
+        },
+      },
+      build: {
+        target: "esnext",
+      },
+    }
+  },
+})

package/src/runtime/components/events/Badges.vue

@@ -0,0 +1,73 @@
+<template>
+  <div>
+    <EventsRegisterModal v-if="item.bookingState === 'OPEN'" :item="item" />
+    <v-btn
+      v-if="item.bookingState === 'FULL'"
+      color="grey-lighten-3"
+      flat
+      rounded="0"
+      prepend-icon="mdi-circle-medium"
+      size="small"
+      class="my-2"
+    >
+      <template #prepend>
+        <v-icon size="large" color="danger" />
+      </template>
+      {{ $t("event-full") }}</v-btn
+    >
+
+    <v-divider v-if="smAndUp" vertical class="mx-3" />
+    <v-btn
+      v-if="item.stream && item.stream.length"
+      color="grey-lighten-3"
+      flat
+      rounded="0"
+      prepend-icon="mdi-television-play"
+      size="small"
+      class="my-xs-2"
+      :to="
+        localePath({
+          name: 'activities-events-slug',
+          params: { slug: item.slug[locale] },
+        })
+      "
+    >
+      {{ $t("live-stream-available") }}</v-btn
+    >
+
+    <v-btn
+      v-if="item.outside"
+      color="grey-lighten-3"
+      flat
+      rounded="0"
+      prepend-icon="mdi-location-exit"
+      size="small"
+      class="my-xs-2"
+    >
+      {{ $t("outside-event") }}</v-btn
+    >
+
+    <v-btn
+      v-if="item.type === 'HYBRID'"
+      color="grey-lighten-3"
+      flat
+      rounded="0"
+      prepend-icon="mdi-cast-education"
+      size="small"
+      class="my-xs-2"
+    >
+      {{ $t("hybrid-event") }}</v-btn
+    >
+  </div>
+</template>
+
+<script setup>
+import { useDisplay } from "vuetify"
+const { smAndUp } = useDisplay()
+const { locale } = useI18n()
+const props = defineProps({
+  item: { type: Object, required: true },
+})
+</script>
+
+<style lang="scss" scoped></style>

package/src/runtime/components/events/DateTimePlace.vue

@@ -0,0 +1,77 @@
+<template>
+  <div class="text-overline font-weight-bold">
+    {{ $t("date-et-heure") }}
+  </div>
+  <div>
+    <div>{{ startDay }}</div>
+    <div>{{ startTime }} - {{ stopTime }}</div>
+  </div>
+
+  <div class="text-overline font-weight-bold mt-md-4">
+    {{ $t("location") }}
+  </div>
+  <div>{{ item.location }}</div>
+
+  <v-btn
+    variant="text"
+    class="ml-n4"
+    size="small"
+    :prepend-icon="
+      open ? 'mdi-chevron-double-down' : 'mdi-chevron-double-right'
+    "
+    @click="open = !open"
+  >
+    {{ $t("show-on-map") }}
+  </v-btn>
+  <v-expand-transition>
+    <v-responsive v-show="open" :aspect-ratio="1 / 1">
+      <iframe
+        title="openstreetmap"
+        width="100%"
+        height="100%"
+        absolute
+        frameborder="0"
+        scrolling="no"
+        marginheight="0"
+        marginwidth="0"
+        src="https://www.openstreetmap.org/export/embed.html?bbox=2.3413968033604786%2C48.84311283480419%2C2.3779606766514942%2C48.8594349634343&amp;layer=mapnik&amp;marker=48.851274564242196%2C2.359678740005961"
+      /><br /><small
+        ><a
+          href="https:/www.openstreetmap.org/?mlat=48.85127&amp;mlon=2.35968#map=16/48.85127/2.35968"
+          >Afficher une carte plus grande</a
+        ></small
+      >
+      ></v-responsive
+    >
+  </v-expand-transition>
+  <br />
+  <v-btn
+    variant="text"
+    class="ml-n4"
+    size="small"
+    prepend-icon="mdi-open-in-new"
+  >
+    {{ $t("details") }}
+  </v-btn>
+</template>
+
+<script setup>
+import { getDetailedFormatedDate } from "../../composables/useUtils"
+const { locale } = useI18n()
+const props = defineProps({
+  item: {
+    type: Object,
+    required: true,
+  },
+})
+const open = ref(false)
+const detailedStart = getDetailedFormatedDate(props.item.start, locale.value)
+const startDay = ref(
+  `${detailedStart.day} ${detailedStart.month} ${detailedStart.year}`
+)
+const startTime = ref(detailedStart.hours)
+const detailedStop = getDetailedFormatedDate(props.item.stop, locale.value)
+const stopTime = ref(detailedStop.hours)
+</script>
+
+<style lang="scss" scoped></style>

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

@@ -0,0 +1,40 @@
+<template>
+  <v-row
+    v-ripple
+    class="cursor-pointer highlight-on-hover"
+    @click="$router.push(localePath('/activities/events/' + item.slug[locale]))"
+  >
+    <v-col align-self="center" cols="2">
+      {{
+        new Date(item.start).toLocaleDateString(locale, {
+          year: "numeric",
+          month: "numeric",
+          day: "numeric",
+        })
+      }}
+    </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) }}
+      </div>
+      {{ item.name }}
+    </v-col>
+    <v-col align-self="center">
+      <!--       <EventsBadges :item /> -->
+    </v-col>
+  </v-row>
+</template>
+<script setup>
+const { locale } = useI18n()
+const localePath = useLocalePath()
+const props = defineProps({
+  item: {
+    type: Object,
+    required: true,
+  },
+  index: {
+    type: Number,
+    required: true,
+  },
+})
+</script>

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

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

package/src/runtime/components/events/ListContainer.vue

@@ -0,0 +1,41 @@
+<template>
+  <v-sheet v-for="(event, i) in events" :key="i" flat class="ma-6">
+    <v-row
+      :value="event"
+      style="cursor: pointer"
+      @click="
+        $router.push(localePath('/activities/events/' + slugify(event.title)))
+      "
+    >
+      <v-col cols="3">
+        <MiscAtomsDateStamp
+          :loading="rootStore.events.loading"
+          :date="[
+            new Date(event.start),
+            ...(event.stop ? [new Date(event.stop)] : []),
+          ]"
+        />
+      </v-col>
+      <v-col cols="9">
+        <v-list-item-title class="text-h6 my-3">
+          {{ event.title }}
+        </v-list-item-title>
+        <v-list-item-subtitle v-text="event.summary" />
+        <v-chip v-if="event.online" class="mr-2 mt-3" color="primary">
+          {{ $t("online") }}
+        </v-chip>
+      </v-col>
+    </v-row>
+  </v-sheet>
+</template>
+<script setup>
+import { useRootStore } from "../../stores/root"
+const rootStore = useRootStore()
+const props = defineProps({
+  events: {
+    type: Array,
+    required: true,
+  },
+})
+</script>
+<style lang="scss"></style>

package/src/runtime/components/events/RegisterModal.vue

@@ -0,0 +1,51 @@
+<template>
+  <v-dialog max-width="500">
+    <template #activator="{ props: activatorProps }">
+      <v-btn
+        variant="outlined"
+        tile
+        block
+        v-bind="activatorProps"
+        size="x-large"
+        prepend-icon="mdi-circle-medium"
+      >
+        <template #prepend>
+          <v-icon size="x-large" color="success" />
+        </template>
+        <div class="text-wrap register-text">
+          {{ $t("register") }}
+        </div>
+      </v-btn>
+    </template>
+
+    <template #default="{ isActive }">
+      <v-card :title="$t('events.register')">
+        <v-card-text>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+          eiusmod tempor incididunt ut labore et dolore magna aliqua.
+        </v-card-text>
+
+        <v-card-actions>
+          <v-spacer />
+
+          <v-btn :text="$t('cancel')" @click="isActive.value = false" />
+          <v-btn
+            :text="$t('events.register-me')"
+            @click="isActive.value = false"
+          />
+        </v-card-actions>
+      </v-card>
+    </template>
+  </v-dialog>
+</template>
+
+<script setup>
+const props = defineProps({
+  item: { type: Object, required: true },
+})
+</script>
+<style>
+.register-text {
+  font-size: 0.8rem;
+}
+</style>

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

@@ -0,0 +1,44 @@
+<template>
+  <v-sheet
+    :to="
+      localePath({
+        name: 'activities-events-slug',
+        params: { slug: item.name },
+      })
+    "
+  >
+    <v-row>
+      <v-col v-if="lgAndUp" cols="3">
+        <MiscAtomsImageContainer
+          cover
+          :src="item.image"
+          :ratio="1 / 1"
+          :link="item.name"
+          :loading="rootStore.loading"
+          name="activities-events-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.description }}
+          </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/events/RowsItem.vue

@@ -0,0 +1,114 @@
+<template>
+  <v-divider v-if="index > 0" />
+  <v-row class="py-8 px-6 highlight-on-hover" no-gutters>
+    <v-col cols="12" md="1">
+      <MiscAtomsDateStamp
+        v-if="item.start"
+        :loading="$stores['events'].loading"
+        :date-start="item.start"
+        :date-stop="item.stop"
+        class="pr-6 mt-md-2"
+      />
+    </v-col>
+    <v-col cols="12" md="7" class="px-md-6 mt-6 mt-md-0">
+      <v-row no-gutters>
+        <v-col cols="12" class="pr-lg-6">
+          <v-skeleton-loader
+            v-if="rootStore.loading || $stores['events'].loading"
+            :type="
+              [
+                'heading, subtitle, text@6,subtitle, text,  ossein,  button, button',
+                'heading, subtitle, text@6,subtitle, text,  ossein,  button, button',
+                'heading, subtitle, text@6,  ossein,  button, button',
+                'heading, subtitle, text@6,  ossein,  button, button',
+                'heading, subtitle, text@6,  ossein,  button, button',
+                'heading, subtitle, text@6,  ossein,  button, button',
+              ][['xs', 'sm', 'md', 'lg', 'xl', 'xxl'].indexOf(name || 'md')]
+            "
+          />
+
+          <div v-else>
+            <nuxt-link
+              v-if="item.name"
+              :to="
+                localePath({
+                  name: 'activities-events-slug',
+                  params: { slug: item.slug[locale] },
+                })
+              "
+              class="text-h4 text-black text-wrap mt-4"
+            >
+              {{ item.name }}
+            </nuxt-link>
+            <div class="mt-2 text-h6 text-overline font-weight-black">
+              {{ $t("list.filters.events.category." + item.category) }}
+            </div>
+
+            <p
+              class="text-wrap clamped-text"
+              :style="
+                '-webkit-line-clamp:' +
+                [5, 5, 5, 10, 12, 14][
+                  ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'].indexOf(name || 'md')
+                ]
+              "
+            >
+              <MDC v-if="item.summary" :value="item.summary" />
+            </p>
+
+            <div v-if="lgAndUp" class="d-flex flex-row align-center flex-wrap">
+              <EventsBadges :item />
+            </div>
+          </div>
+        </v-col>
+      </v-row>
+      <v-row
+        v-if="mdAndDown"
+        class="d-flex flex-row align-center flex-wrap"
+        no-gutters
+      >
+        <v-col cols="12">
+          <v-skeleton-loader
+            v-if="rootStore.loading || $stores['events'].loading"
+            :type="
+              ['article, heading, text, heading, text, button, button'][
+                ['md'].indexOf(name || 'md')
+              ]
+            "
+          />
+
+          <div v-else><EventsBadges :item="item" /></div>
+        </v-col>
+      </v-row>
+    </v-col>
+    <v-col cols="12" md="4">
+      <MiscAtomsImageContainer
+        cover
+        :slug="item.slug[locale]"
+        link="activities-events-slug"
+        :loading="$stores['events'].loading"
+        :src="item.image.url ? item.image : '/default.png'"
+        :ratio="1 / 1"
+      />
+    </v-col>
+  </v-row>
+</template>
+<script setup>
+import { useDisplay } from "vuetify"
+import { useRootStore } from "../../stores/root"
+const { locale } = useI18n()
+const { name, mdAndDown, lgAndUp } = useDisplay()
+const localePath = useLocalePath()
+const rootStore = useRootStore()
+const { $stores } = useNuxtApp()
+const props = defineProps({
+  item: {
+    type: Object,
+    required: true,
+  },
+  index: {
+    type: Number,
+    required: true,
+  },
+})
+</script>