displays dates and locations for events; various fixes

pages/events/index.vue

@@ -78,9 +78,9 @@
     <v-row>
       <!-- loading skeleton -->
       <v-container v-if="$fetchState.pending">
-        <v-row v-for="i in 3" :key="i" justify="space-between" class="mt-1 mb-3">
-          <v-col v-for="j in 2" :key="j" cols="12" :md="12" class="py-2 px-1">
-            <v-skeleton-loader type="card" :loading="true" />
+        <v-row v-for="i in 4" :key="i" justify="space-between" class="mt-1 mb-3">
+          <v-col v-for="j in 4" :key="j" cols="3" :md="6" class="py-2 px-1">
+            <v-skeleton-loader type="card-avatar, text, button" :loading="true" />
           </v-col>
         </v-row>
       </v-container>
@@ -99,32 +99,32 @@
           <i class="results-count">{{ totalRecords }} {{ $t('results') }}</i>
         </template>
         <template #default="props">
-          <v-row justify="space-between" class="mt-1 mb-3">
+          <v-row justify="space-between" class="mt-3 mb-3">
             <v-col
               v-for="event in props.items"
               :key="event.uuid"
-              cols="12"
-              sm="12"
-              :lg="12"
+              cols="3"
+              sm="6"
+              :lg="3"
               class="py-2 px-1"
             >
               <v-card
                 elevation="1"
                 outlined
-                :class="'event-card pa-3 d-flex ' + ($vuetify.breakpoint.smAndDown ? 'flex-column' : 'flex-row align-items-center')"
+                class="event-card pa-0 d-flex flex-column"
               >
                 <div class="d-flex justify-center max-w100">
                   <v-img
                     v-if="event.imageId"
                     :src="'https://api.opentalent.fr/app.php/_internal/secure/files/' + event.imageId"
                     alt="poster"
-                    height="80"
-                    width="240"
+                    height="320"
+                    width="100%"
                     max-height="100%"
                     :contain="true"
                     style="margin: 12px;"
                   />
-                  <div v-else style="height: 104px; width: 264px" />
+                  <div v-else style="height: 344px; width: 264px" />
                 </div>
 
                 <div class="d-flex flex-column flex-grow-1">
@@ -135,6 +135,30 @@
                   </v-card-title>
 
                   <v-card-text class="infos">
+                    <table>
+                      <tr v-if="event.datetimeStart">
+                        <td>
+                          <font-awesome-icon :icon="['fas', 'calendar']" class="icon mr-2" />
+                        </td>
+                        <td>
+                          <span v-if="event.datetimeStart && event.datetimeEnd">
+                            {{ new Date(event.datetimeStart).toLocaleString() }} ~ {{ new Date(event.datetimeEnd).toLocaleString() }}
+                          </span>
+                          <span v-else>{{ new Date(event.datetimeStart).toLocaleString() }}</span>
+                        </td>
+                      </tr>
+
+                      <tr v-if="event.address.addressCity">
+                        <td>
+                          <font-awesome-icon class="icon" :icon="['fas', 'map-marker-alt']" />
+                        </td>
+                        <td>
+                          <span v-if="event.address.streetAddress" style="white-space: pre-line;">{{ event.address.streetAddress }}<br></span>
+                          <span v-if="event.address.postalCode" class="postalCode">{{ event.address.postalCode }} </span>
+                          <span>{{ event.address.addressCity }}</span>
+                        </td>
+                      </tr>
+                    </table>
                   </v-card-text>
                 </div>
 
@@ -169,8 +193,8 @@
 <script lang="ts">
 import Vue from 'vue'
 import EventsProvider from "~/services/data/EventsProvider"
-import { today, todayIso, formatIso } from '@/services/utils/date'
-import { addDays, nextSunday, addMonths } from "date-fns";
+import {today, todayIso, formatIso, formatIsoDate} from '@/services/utils/date'
+import { reformatDate, addDays, nextSunday, addMonths } from "date-fns";
 
 const defaultDateRange: DateRange = { start: '', end: '' }
 
@@ -180,7 +204,6 @@ export default Vue.extend({
       theme: this.$route.query.theme ?? 'orange',
       hideTitle: this.$route.query.hideTitle === 'true',
       events: [] as Array<PublicEvent>,
-      loading: true,
       page: 1,
       itemsPerPage: 16,
       textFilter: null as string | null,
@@ -191,7 +214,6 @@ export default Vue.extend({
     }
   },
   async fetch () {
-    this.loading = true
     await new EventsProvider(this.$axios).getBy(
       this.textFilter,
       null,
@@ -203,10 +225,11 @@ export default Vue.extend({
     ).then(
       (collection: HydraCollection<PublicEvent>) => {
         this.events = collection.items
-        this.loading = false
         this.totalRecords = collection.totalItems
         this.page = collection.page ?? 1
         this.pagesCount = collection.lastPage ?? 1
+
+        console.log(this.events)
       })
   },
   computed: {
@@ -281,6 +304,10 @@ export default Vue.extend({
      */
     enhancedAutocompleteFilter (_: any, queryText: string, itemText: string): boolean {
       return normalize(itemText).includes(normalize(queryText))
+    },
+    formatDatetime(date: string): string {
+      console.log(date)
+      return reformatDate(date, 'yyyy-MM-DD[T]HH:mm:ssZZ', 'dd/MM/yyyy hh:mm')
     }
   }
 })

services/data/EventsProvider.ts

@@ -11,10 +11,9 @@ class PublicEventsProvider extends BaseProvider {
       longitude: e.longitude,
       streetAddress: e.streetAddress,
       postalCode: e.postalCode,
-      addressCity: e.addressCity,
+      addressCity: e.city,
       country: ''
     } as Address
-    // s.categories = s.categories.split()
 
     delete e['@id']
     delete e['@type']
@@ -22,7 +21,7 @@ class PublicEventsProvider extends BaseProvider {
     delete e.longitude
     delete e.streetAddress
     delete e.postalCode
-    delete e.addressCity
+    delete e.city
 
     return e
   }
@@ -45,7 +44,7 @@ class PublicEventsProvider extends BaseProvider {
       query.append('organizationId', String(organizationId))
     }
     if (dateMin !== null && dateMin !== '') {
-      query.append('datetimeStart[after]', dateMin)
+      query.append('datetimeEnd[after]', dateMin)
     }
     if (dateMax !== null && dateMax !== '') {
       query.append('datetimeEnd[before]', dateMax)

services/utils/date.ts

@@ -18,4 +18,8 @@ function formatIsoDate(date: string, fmt: string): string {
   return format(parse(date, ISO_FORMAT, new Date()), fmt);
 }
 
+function reformatDate(date: string, fromFormat: string, toFormat: string): string {
+  return format(parse(date, fromFormat, new Date()), toFormat);
+}
+
 export { today, formatIso, todayIso, formatIsoDate }