Add user setting to provide location and show events near location on

homepage

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

js/src/components/Event/AddressAutoComplete.vue

@@ -71,6 +71,7 @@ import { IConfig } from "../../types/config.model";
 })
 export default class AddressAutoComplete extends Vue {
   @Prop({ required: true }) value!: IAddress;
+  @Prop({ required: false, default: false }) type!: string | false;
 
   addressData: IAddress[] = [];
 
@@ -118,13 +119,17 @@ export default class AddressAutoComplete extends Vue {
     }
 
     this.isFetching = true;
+    const variables: { query: string; locale: string; type?: string } = {
+      query,
+      locale: this.$i18n.locale,
+    };
+    if (this.type) {
+      variables.type = this.type;
+    }
     const result = await this.$apollo.query({
       query: ADDRESS,
       fetchPolicy: "network-only",
-      variables: {
-        query,
-        locale: this.$i18n.locale,
-      },
+      variables,
     });
 
     this.addressData = result.data.searchAddress.map(
@@ -144,7 +149,7 @@ export default class AddressAutoComplete extends Vue {
 
   @Watch("value")
   updateEditing(): void {
-    if (!(this.value && this.value.id)) return;
+    if (!this.value?.id) return;
     this.selected = this.value;
     const address = new Address(this.selected);
     this.queryText = `${address.poiInfos.name} ${address.poiInfos.alternativeName}`;

js/src/components/Event/EventCard.vue

@@ -39,13 +39,24 @@
           />
         </div>
         <div class="media-content">
-          <p class="event-title">{{ event.title }}</p>
-          <div class="event-subtitle" v-if="event.physicalAddress">
+          <p class="event-title" :title="event.title">{{ event.title }}</p>
+          <div
+            class="event-subtitle"
+            v-if="event.physicalAddress"
+            :title="
+              isDescriptionDifferentFromLocality
+                ? `${event.physicalAddress.description}, ${event.physicalAddress.locality}`
+                : event.physicalAddress.description
+            "
+          >
             <!--            <p>{{ $t('By @{username}', { username: actor.preferredUsername }) }}</p>-->
-            <span>
+            <span v-if="isDescriptionDifferentFromLocality">
               {{ event.physicalAddress.description }},
               {{ event.physicalAddress.locality }}
             </span>
+            <span v-else>
+              {{ event.physicalAddress.description }}
+            </span>
           </div>
         </div>
       </div>
@@ -130,6 +141,14 @@ export default class EventCard extends Vue {
       this.event.organizerActor || this.mergedOptions.organizerActor
     );
   }
+
+  get isDescriptionDifferentFromLocality(): boolean {
+    return (
+      this.event?.physicalAddress?.description !==
+        this.event?.physicalAddress?.locality &&
+      this.event?.physicalAddress?.description !== undefined
+    );
+  }
 }
 </script>
 

js/src/components/Event/RecentEventCardWrapper.vue

@@ -0,0 +1,35 @@
+<template>
+  <div>
+    <p class="time">
+      {{
+        formatDistanceToNow(new Date(event.publishAt || event.insertedAt), {
+          locale: $dateFnsLocale,
+          addSuffix: true,
+        }) || $t("Right now")
+      }}
+    </p>
+    <EventCard :event="event" />
+  </div>
+</template>
+<script lang="ts">
+import { IEvent } from "@/types/event.model";
+import { formatDistanceToNow } from "date-fns";
+import { Component, Prop, Vue } from "vue-property-decorator";
+import EventCard from "./EventCard.vue";
+
+@Component({
+  components: {
+    EventCard,
+  },
+})
+export default class RecentEventCardWrapper extends Vue {
+  @Prop({ required: true, type: Object }) event!: IEvent;
+
+  formatDistanceToNow = formatDistanceToNow;
+}
+</script>
+<style lang="scss" scoped>
+p.time {
+  color: $orange-2;
+}
+</style>