@paris-ias/list 1.0.111 → 1.0.113

package/dist/runtime/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 { useLocalePath, useI18n } from "#imports";
+import { useDisplay } from "vuetify";
+const localePath = useLocalePath();
+const { smAndUp } = useDisplay();
+const { locale } = useI18n();
+const props = defineProps({
+  item: { type: Object, required: true }
+});
+</script>

package/dist/runtime/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>{{ $t("from-starttime-to-stoptime", [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 { ref } from "vue";
+import { getDetailedFormatedDate } from "../../composables/useUtils";
+import { useI18n } from "#imports";
+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>

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

@@ -0,0 +1,60 @@
+<template>
+  <v-row
+    v-ripple
+    no-gutters
+    class="cursor-pointer highlight-on-hover"
+    @click="$router.push(localePath('/activities/events/' + item.slug[locale]))"
+  >
+    <v-col v-if="mdAndUp" align-self="center" cols="1">
+      <MiscAtomsImageContainer
+        cover
+        :loading="$stores.events.loading"
+        :src="item.image.url ? item.image : '/default.png'"
+        :ratio="1 / 1"
+        :name="item.name"
+        :slug="item.slug"
+        link="events-slug"
+        width="80px"
+      />
+    </v-col>
+
+    <v-col align-self="center" class="pl-2">
+      <div class="text-h5 dense text-overline font-weight-black">
+        {{
+          $t("list.filters.events.category." + item.category) +
+          " / " +
+          new Date(item.start).toLocaleDateString(locale, {
+            year: "numeric",
+            month: "numeric",
+            day: "numeric",
+          })
+        }}
+      </div>
+      <div class="text-h5 dense">
+        {{ item.name }}
+      </div>
+    </v-col>
+
+    <v-col align-self="center" cols="auto">
+      <EventsBadges :item />
+    </v-col>
+  </v-row>
+</template>
+
+<script setup>
+import { useLocalePath, useI18n } from "#imports";
+import { useDisplay } from "vuetify";
+const { mdAndUp } = useDisplay();
+const { locale } = useI18n();
+const localePath = useLocalePath();
+const props = defineProps({
+  item: {
+    type: Object,
+    required: true
+  },
+  index: {
+    type: Number,
+    required: true
+  }
+});
+</script>

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

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

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

@@ -0,0 +1,50 @@
+<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:.8rem}
+</style>

package/dist/runtime/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";
+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/events/RowsItem.vue

@@ -0,0 +1,118 @@
+<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 && 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";
+import { useNuxtApp, useI18n, useLocalePath } from "#imports";
+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>

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

@@ -0,0 +1,63 @@
+<template>
+  <v-sheet v-motion class="d-flex sliding-item flex-md-row flex-column px-6">
+    <MiscAtomsDateStamp
+      :date-start="item.start"
+      :date-stop="item.stop"
+      :loading="loading"
+      class="mr-4 mb-6 mb-md-0"
+      style="min-width: 70px"
+    />
+    <div
+      class="d-flex flex-column"
+      :style="
+        'min-width:' +
+        [250, 300, 350, 380, 430, 460][
+          ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'].indexOf(name || 'md')
+        ] +
+        'px!important;'
+      "
+    >
+      <MiscAtomsImageContainer
+        cover
+        :ratio="1"
+        :src="item.image"
+        link="activities-events-slug"
+        :slug="item.id"
+        :loading="loading"
+        :to="
+          localePath({
+            name: 'activities-events-slug',
+            params: { slug: item.slug[locale] },
+          })
+        "
+        style="cursor: pointer"
+      />
+      <nuxt-link
+        class="mt-6 pl-0 text-h6 text-md-h5 font-weight-medium sliding-item-title cursor-pointer"
+        :to="
+          localePath({
+            name: 'activities-events-slug',
+            params: { slug: item.slug[locale] },
+          })
+        "
+      >
+        <div class="text-overline text-uppercase">
+          {{ $t(item.category) }}
+        </div>
+        {{ item.name }}
+      </nuxt-link>
+    </div>
+  </v-sheet>
+</template>
+
+<script setup>
+import { useDisplay } from "vuetify";
+import { useLocalePath, useI18n } from "#imports";
+const { locale } = useI18n();
+const { name } = useDisplay();
+const localePath = useLocalePath();
+defineProps({
+  item: { type: Object, required: true },
+  loading: { type: Boolean, required: true, default: false }
+});
+</script>