various fixes

pages/events/_id.vue

@@ -16,11 +16,13 @@
     <v-container class="content">
       <v-row>
         <v-col cols="12" sm="6" class="pr-6">
-          <img
-            :src="publicEvent.imageId ? 'https://api.opentalent.fr/app.php/_internal/secure/files/' + publicEvent.imageId + '/raw' : '/images/event-default.jpg'"
+          <v-img
+            :src="publicEvent.imageUrl || '/images/event-default.jpg'"
             alt="banner"
-            style="max-width: 100%"
-          >
+            max-width="100%"
+            max-height="100%"
+            lazy-src="/images/event-default.jpg"
+          />
         </v-col>
         <v-col cols="12" sm="6" class="pl-6">
           <div class="d-flex flex-column" style="min-height: 100%">
@@ -35,7 +37,7 @@
                   </td>
                   <td class="pa-1">
                     <span>
-                      {{ dateUtils.formatDateIntervalFor(new Date(publicEvent.datetimeStart), new Date(publicEvent.datetimeEnd), false) }}
+                      {{ dateUtils.formatDateIntervalFor(new Date(publicEvent.datetimeStart), new Date(publicEvent.datetimeEnd)) }}
                     </span>
                   </td>
                 </tr>
@@ -85,7 +87,7 @@
                   attribution="&copy; <a href='http://osm.org/copyright'>OpenStreetMap</a> contributors"
                 />
                 <l-marker
-                  :key="publicEvent.id"
+                  :key="publicEvent.uuid"
                   :lat-lng="[publicEvent.address.latitude, publicEvent.address.longitude]"
                 >
                   <l-popup>
@@ -122,7 +124,7 @@
                     :title="publicEvent.name"
                     :description="publicEvent.description"
                     hashtags="opentalent,event"
-                    :media="publicEvent.imageId ? 'https://api.opentalent.fr/app.php/_internal/secure/files/' + publicEvent.imageId + '/raw' : '/images/event-default.jpg'"
+                    :media="publicEvent.imageUrl || '/images/event-default.jpg'"
                     class="social-link"
                   >
                     <a
@@ -149,7 +151,6 @@
 
 <script lang="ts">
 import Vue from 'vue'
-// eslint-disable-next-line import/no-named-as-default
 import EventsProvider from '~/services/data/EventsProvider'
 import DatesUtils from "~/services/utils/dateUtils";
 
@@ -158,6 +159,7 @@ export default Vue.extend({
     return {
       theme: this.$route.query.theme ?? 'orange',
       organization: this.$route.query.organization ?? null,
+      publicEvent: null as PublicEvent | null,
       dateUtils: new DatesUtils(this.$dateFns, this.$t, this.$i18n),
       localUrl: location.href,
       socialNetworks: [
@@ -180,9 +182,7 @@ export default Vue.extend({
       return q
     }
   },
-  async asyncData ({
-                     params, $axios
-                   }): Promise<{ publicEvent: PublicEvent }> {
+  async asyncData ({params, $axios}): Promise<{ publicEvent: PublicEvent }> {
     return await new EventsProvider($axios).getById(params.id).then((res) => {
       return { publicEvent: res }
     })

pages/events/index.vue

@@ -3,7 +3,7 @@
 <template>
   <LayoutContainer>
     <!-- Search form -->
-    <v-row class="my-3">
+    <v-row class="my-3" id="searchBar">
       <v-col cols="1"></v-col>
       <v-col cols="10">
         <v-card class="px-4" rounded="lg" :elevation="6">
@@ -25,6 +25,7 @@
                     :inputProps="{outlined: true}"
                     :menuProps="{offsetY: true, closeOnContentClick: false}"
                     :actionLabels="{apply: $t('apply'), cancel: $t('cancel'), reset: $t('reset')}"
+                    @input="dateRangeFilterChanged"
                   >
                   </UiSearchDateRangePicker>
                 </v-col>
@@ -124,10 +125,9 @@
                 >
                   <div class="d-flex justify-center max-w100">
                     <v-img
-                      :src="publicEvent.imageId ? 'https://api.opentalent.fr/app.php/_internal/secure/files/' + publicEvent.imageId : '/images/event-default.jpg'"
+                      :src="publicEvent.thumbnailUrl || '/images/event-default.jpg'"
                       alt="poster"
-                      height="160"
-                      width="100%"
+                      max-width="100%"
                       max-height="100%"
                       :contain="true"
                       tile
@@ -206,6 +206,7 @@ import DatesUtils from "~/services/utils/dateUtils";
 const defaultDateRange: DateRange = { start: '', end: '' }
 
 export default Vue.extend({
+  scrollToTop: true,
   data () {
     return {
       theme: this.$route.query.theme as string ?? 'orange',
@@ -294,11 +295,15 @@ export default Vue.extend({
       this.textFilter = null
       this.locationFilter = null
       this.dateRangeFilter = defaultDateRange
+      const dateSearch = this.$refs.dateSearch as any
+      dateSearch.reset()
       const addressSearch = this.$refs.addressSearch as any
       addressSearch.clear()
+      this.page = 1
       this.search()
     },
-    pageUpdated (page: number): void {
+    async pageUpdated (page: number): Promise<void> {
+      await this.$vuetify.goTo(0, { duration: 400, offset: 0, easing: 'easeInOutCubic' })
       this.page = page
       this.search()
     },

services/data/EventsProvider.ts

@@ -68,9 +68,7 @@ class PublicEventsProvider extends BaseProvider {
       url += `?${query}`
     }
 
-    console.log(url)
     return await this.get(url).then((res) => {
-      console.log(res)
       return HydraParser.parseCollection(res, this.normalize)
     })
   }

types/interfaces.d.ts

@@ -61,18 +61,19 @@ interface UiSearchAddressItem {
 
 interface PublicEvent {
   uuid: string,
-  organizationId: number,
+  organizationId: number | null,
   name: string,
-  description: string,
-  url: string,
+  description: string | null,
+  url: string | null,
   datetimeStart: Date,
   datetimeEnd: Date,
   address: Address | null,
-  roomName: string,
-  roomDescription: string,
-  roomCapacity: string,
-  roomFloorSize: string,
-  imageId: number,
+  roomName: string | null,
+  roomDescription: string | null,
+  roomCapacity: string | null,
+  roomFloorSize: string | null,
+  imageUrl: string | null,
+  thumbnailUrl: string | null,
   categories: Array<string>,
   origin: string,
   entityId: number