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

homepage Signed-off-by: Thomas Citharel <tcit@tcit.fr>
2021-02-12 18:19:49 +01:00
parent 7d8399f4c8
commit b1cc3868a6
27 changed files with 538 additions and 112 deletions
--- a/js/src/views/Home.vue
+++ b/js/src/views/Home.vue
@@ -47,20 +47,23 @@
      </div>
    </section>
    <div
-      id="featured_events"
+      id="recent_events"
      class="container section"
      v-if="config && (!currentUser.id || !currentActor.id)"
    >
-      <section class="events-featured">
-        <h2 class="title">{{ $t("Featured events") }}</h2>
+      <section class="events-recent">
+        <h2 class="is-size-2 has-text-weight-bold">
+          {{ $t("Last published events") }}
+        </h2>
+        <p>
+          {{ $t("On {instance}", { instance: config.name }) }}
+          <b-loading :active.sync="$apollo.loading" />
+        </p>
        <b-loading :active.sync="$apollo.loading" />
-        <div
-          v-if="filteredFeaturedEvents.length > 0"
-          class="columns is-multiline"
-        >
+        <div v-if="this.events.total > 0" class="columns is-multiline">
          <div
            class="column is-one-third-desktop"
-            v-for="event in filteredFeaturedEvents.slice(0, 6)"
+            v-for="event in this.events.elements.slice(0, 6)"
            :key="event.uuid"
          >
            <EventCard :event="event" />
@@ -185,11 +188,12 @@
          })
        }}</b-message>
      </section>
+      <!-- Your upcoming events -->
      <section
        v-if="currentActor.id && goingToEvents.size > 0"
        class="container"
      >
-        <h3 class="title">{{ $t("Upcoming") }}</h3>
+        <h3 class="title">{{ $t("Your upcoming events") }}</h3>
        <b-loading :active.sync="$apollo.loading" />
        <div v-for="row of goingToEvents" class="upcoming-events" :key="row[0]">
          <span
@@ -231,6 +235,7 @@
          >
        </span>
      </section>
+      <!-- Last week events -->
      <section v-if="currentActor && lastWeekEvents.length > 0">
        <h3 class="title">{{ $t("Last week") }}</h3>
        <b-loading :active.sync="$apollo.loading" />
@@ -244,19 +249,59 @@
          />
        </div>
      </section>
-      <section class="events-featured">
-        <h2 class="title">{{ $t("Featured events") }}</h2>
-        <b-loading :active.sync="$apollo.loading" />
-        <div
-          v-if="filteredFeaturedEvents.length > 0"
-          class="columns is-multiline"
-        >
+      <!-- Events close to you -->
+      <section class="events-close" v-if="closeEvents.total > 0">
+        <h2 class="is-size-2 has-text-weight-bold">
+          {{ $t("Close events") }}
+        </h2>
+        <p>
+          {{
+            $tc(
+              "Within {number} kilometers of {place}",
+              loggedUser.settings.location.radius,
+              {
+                number: loggedUser.settings.location.radius,
+                place: loggedUser.settings.location.name,
+              }
+            )
+          }}
+          <router-link :to="{ name: RouteName.PREFERENCES }">
+            <b-icon
+              class="clickable"
+              icon="pencil"
+              :title="$t('Change')"
+              size="is-small"
+            />
+          </router-link>
+          <b-loading :active.sync="$apollo.loading" />
+        </p>
+        <div class="columns is-multiline">
          <div
            class="column is-one-third-desktop"
-            v-for="event in filteredFeaturedEvents.slice(0, 6)"
+            v-for="event in closeEvents.elements.slice(0, 3)"
            :key="event.uuid"
          >
-            <EventCard :event="event" />
+            <event-card :event="event" />
+          </div>
+        </div>
+      </section>
+      <hr class="home-separator" />
+      <section class="events-recent">
+        <h2 class="is-size-2 has-text-weight-bold">
+          {{ $t("Last published events") }}
+        </h2>
+        <p>
+          {{ $t("On {instance}", { instance: config.name }) }}
+          <b-loading :active.sync="$apollo.loading" />
+        </p>
+
+        <div v-if="this.events.total > 0" class="columns is-multiline">
+          <div
+            class="column is-one-third-desktop"
+            v-for="event in this.events.elements.slice(0, 6)"
+            :key="event.uuid"
+          >
+            <recent-event-card-wrapper :event="event" />
          </div>
        </div>
        <b-message v-else type="is-danger"
@@ -279,9 +324,10 @@ import { ParticipantRole } from "@/types/enums";
 import { Paginate } from "@/types/paginate";
 import { supportsWebPFormat } from "@/utils/support";
 import { IParticipant, Participant } from "../types/participant.model";
-import { FETCH_EVENTS } from "../graphql/event";
+import { CLOSE_EVENTS, FETCH_EVENTS } from "../graphql/event";
 import EventListCard from "../components/Event/EventListCard.vue";
 import EventCard from "../components/Event/EventCard.vue";
+import RecentEventCardWrapper from "../components/Event/RecentEventCardWrapper.vue";
 import {
  CURRENT_ACTOR_CLIENT,
  LOGGED_USER_PARTICIPATIONS,
@@ -330,7 +376,24 @@ import Subtitle from "../components/Utils/Subtitle.vue";
          (participation: IParticipant) => new Participant(participation)
        ),
      skip() {
-        return this.currentUser.isLoggedIn === false;
+        return this.currentUser?.isLoggedIn === false;
+      },
+    },
+    closeEvents: {
+      query: CLOSE_EVENTS,
+      variables() {
+        return {
+          location: this.loggedUser?.settings?.location?.geohash,
+          radius: this.loggedUser?.settings?.location?.radius,
+        };
+      },
+      update: (data) => data.searchEvents,
+      skip() {
+        return (
+          this.currentUser?.isLoggedIn === false &&
+          this.loggedUser?.settings?.location?.geohash &&
+          this.loggedUser?.settings?.location?.radius
+        );
      },
    },
  },
@@ -339,6 +402,7 @@ import Subtitle from "../components/Utils/Subtitle.vue";
    DateComponent,
    EventListCard,
    EventCard,
+    RecentEventCardWrapper,
    "settings-onboard": () => import("./User/SettingsOnboard.vue"),
  },
  metaInfo() {
@@ -364,7 +428,7 @@ export default class Home extends Vue {

  country = { name: null };

-  currentUser!: ICurrentUser;
+  currentUser!: IUser;

  loggedUser!: ICurrentUser;

@@ -378,6 +442,8 @@ export default class Home extends Vue {

  supportsWebPFormat = supportsWebPFormat;

+  closeEvents: Paginate<IEvent> = { elements: [], total: 0 };
+
  // get displayed_name() {
  //   return this.loggedPerson && this.loggedPerson.name === null
  //     ? this.loggedPerson.preferredUsername
@@ -499,21 +565,6 @@ export default class Home extends Vue {
    return res;
  }

-  /**
-   * Return all events from server excluding the ones shown as participating
-   */
-  get filteredFeaturedEvents(): IEvent[] {
-    return this.events.elements.filter(
-      ({ id }) =>
-        !this.thisWeekGoingToEvents
-          .filter(
-            (participation) => participation.role === ParticipantRole.CREATOR
-          )
-          .map(({ event: { id: eventId } }) => eventId)
-          .includes(id)
-    );
-  }
-
  eventDeleted(eventid: string): void {
    this.currentUserParticipations = this.currentUserParticipations.filter(
      (participation) => participation.event.id !== eventid
@@ -549,7 +600,7 @@ main > div > .container {
  color: rgba(0, 0, 0, 0.87);
 }

-.events-featured {
+.events-recent {
  & > h3 {
    padding-left: 0.75rem;
  }
@@ -620,7 +671,7 @@ section.hero {
  }
 }

-#featured_events {
+#recent_events {
  padding: 1rem 0;
  min-height: calc(100vh - 400px);
  z-index: 10;
@@ -686,4 +737,12 @@ section.hero {
 #homepage {
  background: $white;
 }
+
+.home-separator {
+  background-color: $orange-2;
+}
+
+.clickable {
+  cursor: pointer;
+}
 </style>
--- a/js/src/views/Search.vue
+++ b/js/src/views/Search.vue
@@ -409,7 +409,7 @@ export default class Search extends Vue {
  }

  get geohash(): string | undefined {
-    if (this.location && this.location.geom) {
+    if (this.location?.geom) {
      const [lon, lat] = this.location.geom.split(";");
      return ngeohash.encode(lat, lon, 6);
    }
--- a/js/src/views/Settings/Notifications.vue
+++ b/js/src/views/Settings/Notifications.vue
@@ -135,13 +135,14 @@ import RouteName from "../../router/name";
 export default class Notifications extends Vue {
  loggedUser!: IUser;

-  notificationOnDay = true;
+  notificationOnDay: boolean | undefined = true;

-  notificationEachWeek = false;
+  notificationEachWeek: boolean | undefined = false;

-  notificationBeforeEvent = false;
+  notificationBeforeEvent: boolean | undefined = false;

-  notificationPendingParticipation = INotificationPendingEnum.NONE;
+  notificationPendingParticipation: INotificationPendingEnum | undefined =
+    INotificationPendingEnum.NONE;

  notificationPendingParticipationValues: Record<string, unknown> = {};

--- a/js/src/views/Settings/Preferences.vue
+++ b/js/src/views/Settings/Preferences.vue
@@ -26,7 +26,7 @@
          </option>
        </b-select>
      </b-field>
-      <b-field :label="$t('Timezone')">
+      <b-field :label="$t('Timezone')" v-if="selectedTimezone">
        <b-select
          :placeholder="$t('Select a timezone')"
          :loading="!config || !loggedUser"
@@ -55,11 +55,46 @@
      <b-message v-else type="is-danger">{{
        $t("Unable to detect timezone.")
      }}</b-message>
+      <hr />
+      <b-field grouped>
+        <b-field :label="$t('City or region')" expanded>
+          <address-auto-complete
+            v-if="
+              loggedUser && loggedUser.settings && loggedUser.settings.location
+            "
+            :type="AddressSearchType.ADMINISTRATIVE"
+            v-model="address"
+          >
+          </address-auto-complete>
+        </b-field>
+        <b-field :label="$t('Radius')">
+          <b-select
+            :placeholder="$t('Select a radius')"
+            v-model="locationRange"
+          >
+            <option
+              v-for="index in [1, 5, 10, 25, 50, 100]"
+              :key="index"
+              :value="index"
+            >
+              {{ $tc("{count} km", index, { count: index }) }}
+            </option>
+          </b-select>
+        </b-field>
+      </b-field>
+      <p>
+        {{
+          $t(
+            "Your city or region and the radius will only be used to suggest you events nearby."
+          )
+        }}
+      </p>
    </div>
  </div>
 </template>
 <script lang="ts">
 import { Component, Vue, Watch } from "vue-property-decorator";
+import ngeohash from "ngeohash";
 import { saveLocaleData } from "@/utils/auth";
 import { TIMEZONES } from "../../graphql/config";
 import {
@@ -68,22 +103,28 @@ import {
  UPDATE_USER_LOCALE,
 } from "../../graphql/user";
 import { IConfig } from "../../types/config.model";
-import { IUser } from "../../types/current-user.model";
+import { IUser, IUserSettings } from "../../types/current-user.model";
 import langs from "../../i18n/langs.json";
 import RouteName from "../../router/name";
+import AddressAutoComplete from "../../components/Event/AddressAutoComplete.vue";
+import { AddressSearchType } from "@/types/enums";
+import { Address, IAddress } from "@/types/address.model";

@Component({
  apollo: {
    config: TIMEZONES,
    loggedUser: USER_SETTINGS,
  },
+  components: {
+    AddressAutoComplete,
+  },
 })
 export default class Preferences extends Vue {
  config!: IConfig;

  loggedUser!: IUser;

-  selectedTimezone: string | null = null;
+  selectedTimezone: string | undefined = undefined;

  locale: string | null = null;

@@ -91,14 +132,16 @@ export default class Preferences extends Vue {

  langs: Record<string, string> = langs;

+  AddressSearchType = AddressSearchType;
+
  @Watch("loggedUser")
  setSavedTimezone(loggedUser: IUser): void {
-    if (loggedUser && loggedUser.settings.timezone) {
+    if (loggedUser?.settings?.timezone) {
      this.selectedTimezone = loggedUser.settings.timezone;
    } else {
      this.selectedTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
    }
-    if (loggedUser && loggedUser.locale) {
+    if (loggedUser?.locale) {
      this.locale = loggedUser.locale;
    } else {
      this.locale = this.$i18n.locale;
@@ -145,12 +188,7 @@ export default class Preferences extends Vue {
  @Watch("selectedTimezone")
  async updateTimezone(): Promise<void> {
    if (this.selectedTimezone !== this.loggedUser.settings.timezone) {
-      await this.$apollo.mutate<{ setUserSetting: string }>({
-        mutation: SET_USER_SETTINGS,
-        variables: {
-          timezone: this.selectedTimezone,
-        },
-      });
+      this.updateUserSettings({ timezone: this.selectedTimezone });
    }
  }

@@ -166,5 +204,67 @@ export default class Preferences extends Vue {
      saveLocaleData(this.locale);
    }
  }
+
+  get address(): IAddress | null {
+    if (
+      this.loggedUser?.settings?.location?.name &&
+      this.loggedUser?.settings?.location?.geohash
+    ) {
+      const { latitude, longitude } = ngeohash.decode(
+        this.loggedUser?.settings?.location?.geohash
+      );
+      const name = this.loggedUser?.settings?.location?.name;
+      return {
+        description: name,
+        locality: "",
+        type: "administrative",
+        geom: `${longitude};${latitude}`,
+        street: "",
+        postalCode: "",
+        region: "",
+        country: "",
+      };
+    }
+    return null;
+  }
+
+  set address(address: IAddress | null) {
+    if (address && address.geom) {
+      const { geom } = address;
+      const addressObject = new Address(address);
+      const queryText = addressObject.poiInfos.name;
+      const [lon, lat] = geom.split(";");
+      const geohash = ngeohash.encode(lat, lon, 6);
+      if (queryText && geom) {
+        this.updateUserSettings({
+          location: {
+            geohash,
+            name: queryText,
+          },
+        });
+      }
+    }
+  }
+
+  get locationRange(): number | undefined {
+    return this.loggedUser?.settings?.location?.range;
+  }
+
+  set locationRange(locationRange: number | undefined) {
+    if (locationRange) {
+      this.updateUserSettings({
+        location: {
+          range: locationRange,
+        },
+      });
+    }
+  }
+
+  private async updateUserSettings(userSettings: IUserSettings) {
+    await this.$apollo.mutate<{ setUserSetting: string }>({
+      mutation: SET_USER_SETTINGS,
+      variables: userSettings,
+    });
+  }
 }
 </script>