Add event search field on explore page and fix featured events

Closes #195 and #196

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

js/src/graphql/search.ts

@@ -8,6 +8,9 @@ query SearchEvents($searchText: String!) {
       title,
       uuid,
       beginsOn,
+      picture {
+        url,
+      },
       tags {
         slug,
         title

js/src/views/Event/Explore.vue

@@ -1,20 +1,33 @@
 <template>
-  <section class="container">
+  <div class="container">
     <h1 class="title">{{ $t('Explore') }}</h1>
-<!--    <pre>{{ events }}</pre>-->
+    <section class="hero">
+      <div class="hero-body">
+        <form @submit="submit()">
+          <b-field :label="$t('Event')" grouped label-position="on-border">
+            <b-input icon="magnify" type="search" size="is-large" expanded v-model="searchTerm" :placeholder="$t('For instance: London, Taekwondo, Architecture…')" />
+            <p class="control">
+              <b-button @click="submit" type="is-info" size="is-large">{{ $t('Search') }}</b-button>
+            </p>
+          </b-field>
+        </form>
+      </div>
+    </section>
+    <section class="events-featured">
       <b-loading :active.sync="$apollo.loading"></b-loading>
+      <h3 class="title">{{ $t('Featured events') }}</h3>
       <div v-if="events.length > 0" class="columns is-multiline">
+        <div class="column is-one-quarter-desktop" v-for="event in events" :key="event.uuid">
           <EventCard
-        v-for="event in events"
-        :key="event.uuid"
             :event="event"
-        class="column is-one-quarter-desktop"
           />
         </div>
+      </div>
       <b-message v-else-if="events.length === 0 && $apollo.loading === false" type="is-danger">
         {{ $t('No events found') }}
       </b-message>
     </section>
+  </div>
 </template>
 
 <script lang="ts">
@@ -22,6 +35,7 @@ import { Component, Vue } from 'vue-property-decorator';
 import EventCard from '@/components/Event/EventCard.vue';
 import { FETCH_EVENTS } from '@/graphql/event';
 import { IEvent } from '@/types/event.model';
+import { RouteName } from '@/router';
 
 @Component({
   components: {
@@ -35,8 +49,24 @@ import { IEvent } from '@/types/event.model';
 })
 export default class Explore extends Vue {
   events: IEvent[] = [];
+  searchTerm: string = '';
+
+  submit() {
+    this.$router.push({ name: RouteName.SEARCH, params: { searchTerm: this.searchTerm } });
+  }
 }
 </script>
 
-<style scoped>
+<style scoped lang="scss">
+  h3.title {
+    margin-bottom: 1.5rem;
+  }
+
+  .events-featured {
+    margin: 25px auto;
+
+    .columns {
+      margin: 1rem auto 3rem;
+    }
+}
 </style>