complete event details page

pages/events/_id.vue

@@ -3,7 +3,7 @@
     <header class="mb-4">
       <v-layout>
         <v-btn
-          :to="{path: '/events', query: { theme: theme, hideTitle: hideTitle }}"
+          :to="{path: '/events', query: query}"
           nuxt
           plain
         >
@@ -15,16 +15,15 @@
 
     <v-container class="content">
       <v-row>
-        <v-col cols="6" class="pr-6">
+        <v-col cols="12" sm="6" class="pr-6">
           <img
-            v-if="publicEvent.imageId"
             :src="publicEvent.imageId ? 'https://api.opentalent.fr/app.php/_internal/secure/files/' + publicEvent.imageId + '/raw' : '/images/event-default.jpg'"
             alt="banner"
             style="max-width: 100%"
           >
         </v-col>
-        <v-col cols="6" class="pl-6">
-          <v-container class="d-flex flex-column" style="min-height: 100%">
+        <v-col cols="12" sm="6" class="pl-6">
+          <div class="d-flex flex-column" style="min-height: 100%">
             <v-row class="py-2">
               <h2>{{ publicEvent.name }}</h2>
             </v-row>
@@ -53,27 +52,31 @@
                 </tr>
               </table>
             </v-row>
-            <v-row class="py-2 flex">
-              <h4 class="mt-2 mb-3">
+            <v-row v-if="publicEvent.description" class="py-2 flex d-flex flex-column">
+              <h4 class="mt-2 mb-3" style="height: fit-content;">
                 {{ $t('description') }}
               </h4>
               <p class="flex">
                 {{ publicEvent.description }}
               </p>
             </v-row>
-            <v-row v-if="publicEvent.url" justify="end" class="py-2">
+            <div class="flex"></div>
+            <v-row v-if="publicEvent.url" justify="end" align-content="end" class="py-2">
               <v-btn :href="publicEvent.url" target="_blank">{{ $t("more_to_know") }}</v-btn>
             </v-row>
-          </v-container>
+          </div>
         </v-col>
       </v-row>
       <v-row>
-        <v-col cols="12">
+        <v-col
+          cols="12"
+          v-if="publicEvent.address.latitude && publicEvent.address.longitude"
+        >
           <v-responsive width="100%" height="300px">
             <no-ssr>
               <l-map
                 id="map"
-                :zoom="13"
+                :zoom="16"
                 :center="[publicEvent.address.latitude, publicEvent.address.longitude]"
                 :options="{ scrollWheelZoom: false, zoomSnap: 0.25 }"
               >
@@ -87,7 +90,7 @@
                 >
                   <l-popup>
                     <b>{{ publicEvent.name }}</b><br>
-                    <span v-if="publicEvent.mapAddress">
+                    <span>
                       {{ publicEvent.address.postalCode }} {{ publicEvent.address.addressCity }}
                     </span><br>
                   </l-popup>
@@ -97,37 +100,45 @@
           </v-responsive>
         </v-col>
       </v-row>
-      <v-row align-content="space-between">
-        <v-col cols="2">
-        </v-col>
+      <v-row>
         <v-spacer />
-        <v-col cols="5" class="d-flex flex-column align-end">
-          <h5 class="ma-2">
-            {{ $t('share') }}
-          </h5>
-          <div class="d-flex flex-row align-items-end flex-wrap">
-            <ShareNetwork
-              v-for="socialNetwork in socialNetworks"
-              :key="socialNetwork.network"
-              :network="socialNetwork.network"
-              :url="localUrl"
-              :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'"
-              class="social-link"
-            >
-              <a
-                :title="$t('share_on') + ' ' + socialNetwork.name"
-                :style="{color: socialNetwork.color}"
-              >
-                <font-awesome-icon
-                  class="icon social-icon"
-                  :icon="socialNetwork.icon"
-                />
-              </a>
-            </ShareNetwork>
-          </div>
+        <v-col cols="12" md="6" class="d-flex flex-column align-end">
+          <table>
+            <tr>
+              <td>
+                <h5 class="ma-2">
+                  {{ $t('share') }}
+                </h5>
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <div class="d-flex flex-row align-items-start flex-wrap">
+                  <ShareNetwork
+                    v-for="socialNetwork in socialNetworks"
+                    :key="socialNetwork.network"
+                    :network="socialNetwork.network"
+                    :url="localUrl"
+                    :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'"
+                    class="social-link"
+                  >
+                    <a
+                      :title="$t('share_on') + ' ' + socialNetwork.name"
+                      :style="{color: socialNetwork.color}"
+                    >
+                      <font-awesome-icon
+                        class="icon social-icon"
+                        :icon="socialNetwork.icon"
+                      />
+                    </a>
+                  </ShareNetwork>
+                </div>
+              </td>
+            </tr>
+          </table>
         </v-col>
       </v-row>
     </v-container>
@@ -146,7 +157,7 @@ export default Vue.extend({
   data () {
     return {
       theme: this.$route.query.theme ?? 'orange',
-      hideTitle: this.$route.query.hideTitle === 'true',
+      organization: this.$route.query.organization ?? null,
       dateUtils: new DatesUtils(this.$dateFns, this.$t, this.$i18n),
       localUrl: location.href,
       socialNetworks: [
@@ -160,6 +171,15 @@ export default Vue.extend({
       ] // @see https://nicolasbeauvais.github.io/vue-social-sharing/?path=/story/vuesocialsharing--multiple-share-networks
     }
   },
+  computed: {
+    query () {
+      const q: any = { theme: this.theme }
+      if (this.organization !== null) {
+        q.organization = this.organization
+      }
+      return q
+    }
+  },
   async asyncData ({
                      params, $axios
                    }): Promise<{ publicEvent: PublicEvent }> {
@@ -212,6 +232,13 @@ h4 {
   }
 }
 
+@media screen and (max-width: 600px) {
+  .content {
+    max-width: 100%;
+    margin: 10px 0;
+  }
+}
+
 .contact td {
   padding: 6px 12px;
 }

pages/events/index.vue

@@ -110,7 +110,7 @@
               justify-sm="start"
             >
               <v-col
-                v-for="publicEvent in props.items"
+                v-for="publicEvent in events"
                 :key="publicEvent.uuid"
                 :cols="12"
                 :sm="6"
@@ -136,7 +136,7 @@
 
                   <div class="d-flex flex-column flex-grow-1 px-3">
                     <v-card-title class="title">
-                      <nuxt-link :to="{path: '/events/' + publicEvent.uuid, query: { theme: theme }}">
+                      <nuxt-link :to="{path: '/events/' + publicEvent.uuid, query: query}">
                         {{ publicEvent.name }}
                       </nuxt-link>
                     </v-card-title>
@@ -171,7 +171,7 @@
                   <v-card-actions class="align-self-end pa-3">
                     <v-btn
                       class="see"
-                      :to="{path: '/events/' + publicEvent.uuid, query: { theme: theme, hideTitle: hideTitle }}"
+                      :to="{path: '/events/' + publicEvent.uuid, query: query}"
                       nuxt
                     >
                       <span style="margin-right: 6px;">{{ $t("more_to_know") }}</span>
@@ -208,10 +208,10 @@ const defaultDateRange: DateRange = { start: '', end: '' }
 export default Vue.extend({
   data () {
     return {
-      theme: this.$route.query.theme ?? 'orange',
-      hideTitle: this.$route.query.hideTitle === 'true',
-      events: [] as Array<PublicEvent>,
+      theme: this.$route.query.theme as string ?? 'orange',
+      organization: parseInt(this.$route.query.organization as string) ?? null,
       page: 1,
+      events: [] as Array<PublicEvent>,
       itemsPerPage: 16,
       textFilter: null as string | null,
       locationFilter: null as Coordinates | null,
@@ -224,7 +224,7 @@ export default Vue.extend({
   async fetch () {
     await new EventsProvider(this.$axios).getBy(
       this.textFilter,
-      null,
+      this.organization,
       this.dateRangeFilter.start,
       this.dateRangeFilter.end,
       this.locationFilter,
@@ -239,6 +239,13 @@ export default Vue.extend({
       })
   },
   computed: {
+    query (): object {
+      const q: any = { theme: this.theme }
+      if (this.organization > 0) {
+        q.organization = this.organization
+      }
+      return q
+    },
     dateRangeMin(): string {
       return this.dateUtils.todayIso()
     },

services/data/EventsProvider.ts

@@ -61,6 +61,8 @@ class PublicEventsProvider extends BaseProvider {
       query.append('itemsPerPage', `${itemsPerPage}`)
     }
 
+    query.append('order[datetimeEnd]', 'asc')
+
     let url = `/api/public/events`
     if (query) {
       url += `?${query}`

services/utils/dateUtils.ts

@@ -39,7 +39,7 @@ export default class DatesUtils {
   }
 
   formatTime(date: Date): string {
-    return this.$dateFns.format(date, 'HH:mm')
+    return this.$dateFns.format(date, "HH'h'mm")
   }
 
   formatDateTime(date: Date): string {
@@ -52,7 +52,7 @@ export default class DatesUtils {
     } else if (dateEnd === null && dateStart !== null) {
       return this.formatDateTime(dateStart)
     } else if (dateStart !== null && dateEnd !== null) {
-      if (dateStart === dateEnd) {
+      if (this.$dateFns.isEqual(dateStart, dateEnd)) {
         return this.formatDateTime(dateStart)
       } else if (this.$dateFns.isSameDay(dateStart, dateEnd)) {
         return this.formatDate(dateStart, false) + ', ' +