Add the map in search view

Signed-off-by: Thomas Citharel <tcit@tcit.fr>

js/src/components/Event/EventCard.vue

@@ -3,7 +3,7 @@
     class="mbz-card snap-center dark:bg-mbz-purple"
     :class="{
       'sm:flex sm:items-start': mode === 'row',
-      'max-w-xs w-[18rem] shrink-0 flex flex-col': mode === 'column',
+      'sm:max-w-xs sm:w-[18rem] shrink-0 flex flex-col': mode === 'column',
     }"
     :to="to"
     :isInternal="isInternal"

js/src/components/Event/EventMetadataBlock.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <h2 class="text-2xl">{{ title }}</h2>
+    <h2>{{ title }}</h2>
     <div class="flex items-center mb-3 gap-1 eventMetadataBlock">
       <slot name="icon"></slot>
       <!-- Custom icons -->
@@ -15,7 +15,7 @@
         />
       </span>
       <o-icon v-else-if="icon" :icon="icon" size="is-medium" /> -->
-      <div class="content-wrapper">
+      <div class="content-wrapper overflow-hidden w-full">
         <slot></slot>
       </div>
     </div>
@@ -28,13 +28,7 @@ defineProps<{
 </script>
 <style lang="scss" scoped>
 div.eventMetadataBlock {
-  display: flex;
-  align-items: center;
-  margin-bottom: 1.75rem;
-
   .content-wrapper {
-    overflow: hidden;
-    width: 100%;
     max-width: calc(100vw - 32px - 20px);
 
     &.padding-left {

js/src/components/Event/EventMetadataSidebar.vue

@@ -2,11 +2,11 @@
   <div>
     <event-metadata-block
       v-if="!event.options.isOnline"
-      :title="$t('Location')"
-      :icon="physicalAddress ? physicalAddress.poiInfos.poiIcon.icon : 'earth'"
+      :title="t('Location')"
+      :icon="addressPOIInfos?.poiIcon?.icon ?? 'earth'"
     >
       <div class="address-wrapper">
-        <span v-if="!physicalAddress">{{ $t("No address defined") }}</span>
+        <span v-if="!physicalAddress">{{ t("No address defined") }}</span>
         <div class="address" v-if="physicalAddress">
           <address-info :address="physicalAddress" />
           <o-button
@@ -15,12 +15,23 @@
             @click="$emit('showMapModal', true)"
             v-if="physicalAddress.geom"
           >
-            {{ $t("Show map") }}
+            {{ t("Show map") }}
           </o-button>
         </div>
       </div>
+      <template #icon>
+        <o-icon
+          v-if="addressPOIInfos?.poiIcon?.icon"
+          :icon="addressPOIInfos?.poiIcon?.icon"
+          customSize="36"
+        />
+        <Earth v-else :size="36" />
+      </template>
     </event-metadata-block>
-    <event-metadata-block :title="$t('Date and time')" icon="calendar">
+    <event-metadata-block :title="t('Date and time')">
+      <template #icon>
+        <Calendar :size="36" />
+      </template>
       <event-full-date
         :beginsOn="event.beginsOn.toString()"
         :show-start-time="event.options.showStartTime"
@@ -32,7 +43,7 @@
     </event-metadata-block>
     <event-metadata-block
       class="metadata-organized-by"
-      :title="$t('Organized by')"
+      :title="t('Organized by')"
     >
       <router-link
         v-if="event.attributedTo"
@@ -66,16 +77,18 @@
     </event-metadata-block>
     <event-metadata-block
       v-if="event.onlineAddress && urlToHostname(event.onlineAddress)"
-      icon="link"
-      :title="$t('Website')"
+      :title="t('Website')"
     >
+      <template #icon>
+        <Link :size="36" />
+      </template>
       <a
         target="_blank"
         class="hover:underline"
         rel="noopener noreferrer ugc"
         :href="event.onlineAddress"
         :title="
-          $t('View page on {hostname} (in a new window)', {
+          t('View page on {hostname} (in a new window)', {
             hostname: urlToHostname(event.onlineAddress),
           })
         "
@@ -85,9 +98,9 @@
     <event-metadata-block
       v-for="extra in extraMetadata"
       :title="extra.title || extra.label"
-      :icon="extra.icon"
       :key="extra.key"
     >
+      <template #icon> <o-icon :icon="extra.icon" customSize="36" /> </template>
       <span
         v-if="
           ((extra.type == EventMetadataType.STRING &&
@@ -108,7 +121,7 @@
         rel="noopener noreferrer ugc"
         :href="extra.value"
         :title="
-          $t('View page on {hostname} (in a new window)', {
+          t('View page on {hostname} (in a new window)', {
             hostname: urlToHostname(extra.value),
           })
         "
@@ -123,7 +136,7 @@
         rel="noopener noreferrer ugc"
         :href="accountURL(extra)"
         :title="
-          $t('View account on {hostname} (in a new window)', {
+          t('View account on {hostname} (in a new window)', {
             hostname: urlToHostname(accountURL(extra)),
           })
         "
@@ -134,7 +147,7 @@
   </div>
 </template>
 <script lang="ts" setup>
-import { Address } from "@/types/address.model";
+import { Address, addressToPoiInfos } from "@/types/address.model";
 import { EventMetadataKeyType, EventMetadataType } from "@/types/enums";
 import { IEvent } from "@/types/event.model";
 import { computed } from "vue";
@@ -147,6 +160,10 @@ import AddressInfo from "../../components/Address/AddressInfo.vue";
 import { IEventMetadataDescription } from "@/types/event-metadata";
 import { eventMetaDataList } from "../../services/EventMetadata";
 import { IUser } from "@/types/current-user.model";
+import { useI18n } from "vue-i18n";
+import Earth from "vue-material-design-icons/Earth.vue";
+import Calendar from "vue-material-design-icons/Calendar.vue";
+import Link from "vue-material-design-icons/Link.vue";
 
 const props = withDefaults(
   defineProps<{
@@ -157,12 +174,19 @@ const props = withDefaults(
   { showMap: false }
 );
 
+const { t } = useI18n({ useScope: "global" });
+
 const physicalAddress = computed((): Address | null => {
   if (!props.event.physicalAddress) return null;
 
   return new Address(props.event.physicalAddress);
 });
 
+const addressPOIInfos = computed(() => {
+  if (!props.event.physicalAddress) return null;
+  return addressToPoiInfos(props.event.physicalAddress);
+});
+
 const extraMetadata = computed((): IEventMetadataDescription[] => {
   return props.event.metadata.map((val) => {
     const def = eventMetaDataList.find((dat) => dat.key === val.key);