mobilizon.chapril.org-mobilizon/js/src/views/Search.vue

<template>
  <div class="section container">
    <h1 class="title">{{ $t("Explore") }}</h1>
    <section v-if="tag">
      <i18n path="Events tagged with {tag}">
        <b-tag slot="tag" type="is-light">{{ $t("#{tag}", { tag }) }}</b-tag>
      </i18n>
    </section>
    <section class="hero is-light" v-else>
      <div class="hero-body">
        <form @submit.prevent="submit()">
          <b-field :label="$t('Key words')" label-for="search" expanded>
            <b-input
              icon="magnify"
              type="search"
              id="search"
              size="is-large"
              expanded
              v-model="search"
              :placeholder="
                $t('For instance: London, Taekwondo, Architecture…')
              "
            />
          </b-field>
          <b-field grouped group-multiline position="is-right" expanded>
            <b-field :label="$t('Location')" label-for="location">
              <address-auto-complete
                v-model="location"
                id="location"
                ref="aac"
                :placeholder="$t('For instance: London')"
                @input="locchange"
              />
            </b-field>
            <b-field :label="$t('Radius')" label-for="radius">
              <b-select v-model="radius" id="radius" expanded>
                <option
                  v-for="(radiusOption, index) in radiusOptions"
                  :key="index"
                  :value="radiusOption"
                >
                  {{ radiusString(radiusOption) }}
                </option>
              </b-select>
            </b-field>
            <b-field :label="$t('Date')" label-for="date">
              <b-select
                v-model="when"
                id="date"
                :disabled="activeTab !== 0"
                expanded
              >
                <option
                  v-for="(option, index) in options"
                  :key="index"
                  :value="index"
                >
                  {{ option.label }}
                </option>
              </b-select>
            </b-field>
          </b-field>
        </form>
      </div>
    </section>
    <section
      class="events-featured"
      v-if="!canSearchEvents && !canSearchGroups"
    >
      <b-loading :active.sync="$apollo.loading"></b-loading>
      <h2 class="title">{{ $t("Featured events") }}</h2>
      <div v-if="events.elements.length > 0">
        <div class="columns is-multiline">
          <div
            class="column is-one-third-desktop"
            v-for="event in events.elements"
            :key="event.uuid"
          >
            <EventCard :event="event" />
          </div>
        </div>
        <div class="pagination" v-if="events.total > EVENT_PAGE_LIMIT">
          <b-pagination
            :total="events.total"
            v-model="eventPage"
            :per-page="EVENT_PAGE_LIMIT"
            :aria-next-label="$t('Next page')"
            :aria-previous-label="$t('Previous page')"
            :aria-page-label="$t('Page')"
            :aria-current-label="$t('Current page')"
          >
          </b-pagination>
        </div>
      </div>
      <b-message
        v-else-if="events.elements.length === 0 && $apollo.loading === false"
        type="is-danger"
        >{{ $t("No events found") }}</b-message
      >
    </section>
    <b-tabs v-else v-model="activeTab" type="is-boxed" class="searchTabs">
      <b-loading :active.sync="$apollo.loading"></b-loading>
      <b-tab-item>
        <template slot="header">
          <b-icon icon="calendar"></b-icon>
          <span>
            {{ $t("Events") }}
            <b-tag rounded>{{ searchEvents.total }}</b-tag>
          </span>
        </template>
        <div v-if="searchEvents.total > 0">
          <div class="columns is-multiline">
            <div
              class="column is-one-third-desktop"
              v-for="event in searchEvents.elements"
              :key="event.uuid"
            >
              <EventCard :event="event" />
            </div>
          </div>
          <div class="pagination" v-if="searchEvents.total > EVENT_PAGE_LIMIT">
            <b-pagination
              :total="searchEvents.total"
              v-model="eventPage"
              :per-page="EVENT_PAGE_LIMIT"
              :aria-next-label="$t('Next page')"
              :aria-previous-label="$t('Previous page')"
              :aria-page-label="$t('Page')"
              :aria-current-label="$t('Current page')"
            >
            </b-pagination>
          </div>
        </div>
        <b-message v-else-if="$apollo.loading === false" type="is-danger">{{
          $t("No events found")
        }}</b-message>
      </b-tab-item>
      <b-tab-item v-if="!tag">
        <template slot="header">
          <b-icon icon="account-multiple"></b-icon>
          <span>
            {{ $t("Groups") }} <b-tag rounded>{{ searchGroups.total }}</b-tag>
          </span>
        </template>
        <b-message v-if="config && !config.features.groups" type="is-danger">
          {{ $t("Groups are not enabled on this instance.") }}
        </b-message>
        <div v-else-if="searchGroups.total > 0">
          <div class="columns is-multiline">
            <div
              class="column is-one-third-desktop"
              v-for="group in searchGroups.elements"
              :key="group.uuid"
            >
              <group-card :group="group" />
            </div>
          </div>
          <div class="pagination">
            <b-pagination
              :total="searchGroups.total"
              v-model="groupPage"
              :per-page="GROUP_PAGE_LIMIT"
              :aria-next-label="$t('Next page')"
              :aria-previous-label="$t('Previous page')"
              :aria-page-label="$t('Page')"
              :aria-current-label="$t('Current page')"
            >
            </b-pagination>
          </div>
        </div>
        <b-message v-else-if="$apollo.loading === false" type="is-danger">
          {{ $t("No groups found") }}
        </b-message>
      </b-tab-item>
    </b-tabs>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
import ngeohash, { GeographicPoint } from "ngeohash";
import {
  endOfToday,
  addDays,
  startOfDay,
  endOfDay,
  endOfWeek,
  addWeeks,
  startOfWeek,
  endOfMonth,
  addMonths,
  startOfMonth,
  eachWeekendOfInterval,
} from "date-fns";
import { SearchTabs } from "@/types/enums";
import EventCard from "../components/Event/EventCard.vue";
import { FETCH_EVENTS } from "../graphql/event";
import { IEvent } from "../types/event.model";
import RouteName from "../router/name";
import { IAddress, Address } from "../types/address.model";
import AddressAutoComplete from "../components/Event/AddressAutoComplete.vue";
import { SEARCH_EVENTS, SEARCH_GROUPS } from "../graphql/search";
import { Paginate } from "../types/paginate";
import { IGroup } from "../types/actor";
import GroupCard from "../components/Group/GroupCard.vue";
import { CONFIG } from "../graphql/config";
import { REVERSE_GEOCODE } from "../graphql/address";

interface ISearchTimeOption {
  label: string;
  start?: Date;
  end?: Date | null;
}

const EVENT_PAGE_LIMIT = 12;

const GROUP_PAGE_LIMIT = 12;

const DEFAULT_RADIUS = 25; // value to set if radius is null but location set

const DEFAULT_ZOOM = 11; // zoom on a city

const GEOHASH_DEPTH = 9; // put enough accuracy, radius will be used anyway

const THROTTLE = 2000; // minimum interval in ms between two requests

@Component({
  components: {
    EventCard,
    AddressAutoComplete,
    GroupCard,
  },
  apollo: {
    config: CONFIG,
    events: {
      query: FETCH_EVENTS,
      variables() {
        return {
          page: this.eventPage,
          limit: EVENT_PAGE_LIMIT,
        };
      },
    },
    searchEvents: {
      query: SEARCH_EVENTS,
      fetchPolicy: "cache-and-network",
      variables() {
        return {
          term: this.search,
          tags: this.tag,
          location: this.geohash,
          beginsOn: this.start,
          endsOn: this.end,
          radius: this.radius,
          page: this.eventPage,
          limit: EVENT_PAGE_LIMIT,
        };
      },
      throttle: THROTTLE,
      skip() {
        return !this.canSearchEvents;
      },
    },
    searchGroups: {
      query: SEARCH_GROUPS,
      fetchPolicy: "cache-and-network",
      variables() {
        return {
          term: this.search,
          location: this.geohash,
          radius: this.radius,
          page: this.groupPage,
          limit: GROUP_PAGE_LIMIT,
        };
      },
      throttle: THROTTLE,
      skip() {
        return !this.canSearchGroups;
      },
    },
  },
  metaInfo() {
    return {
      title: this.$t("Explore events") as string,
      titleTemplate: "%s | Mobilizon",
    };
  },
})
export default class Search extends Vue {
  @Prop({ type: String, required: false }) tag!: string;

  events: Paginate<IEvent> = {
    total: 0,
    elements: [],
  };

  searchEvents: Paginate<IEvent> = {
    total: 0,
    elements: [],
  };

  searchGroups: Paginate<IGroup> = { total: 0, elements: [] };

  groupPage = 1;

  location: IAddress = new Address();

  options: Record<string, ISearchTimeOption> = {
    today: {
      label: this.$t("Today") as string,
      start: new Date(),
      end: endOfToday(),
    },
    tomorrow: {
      label: this.$t("Tomorrow") as string,
      start: startOfDay(addDays(new Date(), 1)),
      end: endOfDay(addDays(new Date(), 1)),
    },
    weekend: {
      label: this.$t("This weekend") as string,
      start: this.weekend.start,
      end: this.weekend.end,
    },
    week: {
      label: this.$t("This week") as string,
      start: new Date(),
      end: endOfWeek(new Date(), { locale: this.$dateFnsLocale }),
    },
    next_week: {
      label: this.$t("Next week") as string,
      start: startOfWeek(addWeeks(new Date(), 1), {
        locale: this.$dateFnsLocale,
      }),
      end: endOfWeek(addWeeks(new Date(), 1), { locale: this.$dateFnsLocale }),
    },
    month: {
      label: this.$t("This month") as string,
      start: new Date(),
      end: endOfMonth(new Date()),
    },
    next_month: {
      label: this.$t("Next month") as string,
      start: startOfMonth(addMonths(new Date(), 1)),
      end: endOfMonth(addMonths(new Date(), 1)),
    },
    any: {
      label: this.$t("Any day") as string,
      start: undefined,
      end: undefined,
    },
  };

  EVENT_PAGE_LIMIT = EVENT_PAGE_LIMIT;

  GROUP_PAGE_LIMIT = GROUP_PAGE_LIMIT;

  $refs!: {
    aac: AddressAutoComplete;
  };

  mounted(): void {
    this.prepareLocation(this.$route.query.geohash as string);
  }

  radiusString = (radius: number | null): string => {
    if (radius) {
      return this.$tc("{nb} km", radius, { nb: radius }) as string;
    }
    return this.$t("any distance") as string;
  };

  radiusOptions: (number | null)[] = [1, 5, 10, 25, 50, 100, 150, null];

  submit(): void {
    this.$apollo.queries.searchEvents.refetch();
  }

  get eventPage(): number {
    return parseInt(this.$route.query.eventPage as string, 10) || 1;
  }

  set eventPage(page: number) {
    this.$router.push({
      name: this.$route.name || RouteName.SEARCH,
      query: { ...this.$route.query, eventPage: page.toString() },
    });
  }

  get search(): string | undefined {
    return this.$route.query.term as string;
  }

  set search(term: string | undefined) {
    this.$router.replace({
      name: RouteName.SEARCH,
      query: { ...this.$route.query, term },
    });
  }

  get activeTab(): SearchTabs {
    return (
      parseInt(this.$route.query.searchType as string, 10) || SearchTabs.EVENTS
    );
  }

  set activeTab(value: SearchTabs) {
    this.$router.replace({
      name: RouteName.SEARCH,
      query: { ...this.$route.query, searchType: value.toString() },
    });
  }

  get geohash(): string | undefined {
    if (this.location?.geom) {
      const [lon, lat] = this.location.geom.split(";");
      return ngeohash.encode(lat, lon, GEOHASH_DEPTH);
    }
    return undefined;
  }

  set geohash(value: string | undefined) {
    this.$router.replace({
      name: RouteName.SEARCH,
      query: { ...this.$route.query, geohash: value },
    });
  }

  get radius(): number | null {
    if (this.$route.query.radius === "any") {
      return null;
    }
    return parseInt(this.$route.query.radius as string, 10) || null;
  }

  set radius(value: number | null) {
    const radius = value === null ? "any" : value.toString();
    this.$router.replace({
      name: RouteName.SEARCH,
      query: { ...this.$route.query, radius },
    });
  }

  get when(): string {
    return (this.$route.query.when as string) || "any";
  }

  set when(value: string) {
    this.$router.replace({
      name: RouteName.SEARCH,
      query: { ...this.$route.query, when: value },
    });
  }

  get weekend(): { start: Date; end: Date } {
    const now = new Date();
    const endOfWeekDate = endOfWeek(now, { locale: this.$dateFnsLocale });
    const startOfWeekDate = startOfWeek(now, { locale: this.$dateFnsLocale });
    const [start, end] = eachWeekendOfInterval({
      start: startOfWeekDate,
      end: endOfWeekDate,
    });
    return { start: startOfDay(start), end: endOfDay(end) };
  }

  private prepareLocation(value: string | undefined): void {
    if (value !== undefined) {
      // decode
      const latlon = ngeohash.decode(value);
      // set location
      this.reverseGeoCode(latlon, DEFAULT_ZOOM);
    }
  }

  async reverseGeoCode(e: GeographicPoint, zoom: number): Promise<void> {
    const result = await this.$apollo.query({
      query: REVERSE_GEOCODE,
      variables: {
        latitude: e.latitude,
        longitude: e.longitude,
        zoom,
        locale: this.$i18n.locale,
      },
    });
    const addressData = result.data.reverseGeocode.map(
      (address: IAddress) => new Address(address)
    );
    if (addressData.length > 0) {
      this.location = addressData[0];
    }
  }

  locchange = (e: IAddress): void => {
    if (this.radius === undefined || this.radius === null) {
      this.radius = DEFAULT_RADIUS;
    }
    if (e.geom) {
      const [lon, lat] = e.geom.split(";");
      this.geohash = ngeohash.encode(lat, lon, GEOHASH_DEPTH);
    }
  };

  get start(): Date | undefined {
    if (this.options[this.when]) {
      return this.options[this.when].start;
    }
    return undefined;
  }

  get end(): Date | undefined | null {
    if (this.options[this.when]) {
      return this.options[this.when].end;
    }
    return undefined;
  }

  get canSearchGroups(): boolean {
    return (
      this.stringExists(this.search) ||
      (this.stringExists(this.geohash) && this.valueExists(this.radius))
    );
  }

  get canSearchEvents(): boolean {
    return (
      this.stringExists(this.search) ||
      this.stringExists(this.tag) ||
      (this.stringExists(this.geohash) && this.valueExists(this.radius)) ||
      this.valueExists(this.end)
    );
  }

  // helper functions for skip
  private valueExists(value: any): boolean {
    return value !== undefined && value !== null;
  }

  private stringExists(value: string | undefined): boolean {
    return this.valueExists(value) && (value as string).length > 0;
  }
}
</script>

<style scoped lang="scss">
main > .container {
  background: $white;

  .hero-body {
    padding: 1rem 1.5rem;
  }
}

h1.title {
  margin-top: 1.5rem;
}

h3.title {
  margin-bottom: 1.5rem;
}

.events-featured {
  margin: 25px auto;

  .columns {
    margin: 1rem auto 3rem;
  }
}

form {
  ::v-deep .field label.label {
    margin-bottom: 0;
  }

  .field.is-expanded:last-child > .field-body > .field.is-grouped {
    flex-wrap: wrap;
    flex: 1;
    .field {
      flex: 1 0 auto;
      &:first-child {
        flex: 3 0 300px;
      }
    }
  }
}
</style>